Is it possible to swap order of two words in text?

[steveojm]

Using CSS, no js, how would one go about reversing the order of 2 or more words in a sentence? Example, as I intend it:

This is word1 word2.

This is word2 word1.

I wish to display the same sentence (in original authoring order) underneath the first, only maybe changing the class name for the words so that I end up with:

This is word2 word1.

My only containers so far are paras, but I’ll use what I have to in order to get this effect.

Any ideas?

[noahgelman]

Not possible with css. Depending on how you’re delivering the content to the page, you can any of a couple php string modifiers.

[joshuanhibbert]

If you really want to do it with CSS then you could use this technique: http://jsfiddle.net/joshnh/D63WJ/ (/cc @noahgelman).

Why don’t you want to use JS?

[noahgelman]

Ah, I see. That’s about as round-a-bout as you can get without using php or js

[noahgelman]

Of course the downside of this is several things. Backwards compatibility and text highlighting.

[joshuanhibbert]

@noahgelman Absolutely. It’s not a great solution at all, hence my question about using JS.

[steveojm]

Hi guys – I didn’t think it was possible either, but what you provided does indeed work! You are right, of course, this much better approached with dynamic code.

And I should have been more clear, the eventual usage for this is not a web page but a generated ePub file, where I don’t want to rely on any sort of scripting.

While it may be more trouble than it’s worth, I did want to see if I could give CSS a workout before physically reordering words, because the words themselves will change of course but the pattern (oft repeated) will remain the same throughout the ePub book.

[wolfcry911]

Here’s another way – it admittedly has problems of its own, but it might be something to work with.

[Author]

Posts