How do I make text reverse direction in HTML?

Question

I am working on a creative website featuring silly limericks. I would like to display each line of the limerick in an alternating direction. That is, I want it in boustophedon f

Answer 1

Yes, this is possible using the combination of two Unicode control characters. Namely, the

• 'RIGHT-TO-LEFT OVERRIDE' (U+202E)
• 'LEFT-TO-RIGHT OVERRIDE' (U+202D)

Each override character makes the text that follows it flow in the corresponding direction.

These can be inserted into an document with the HTML entities ‮ and ‭, or the decimal equivalents, ‮ and ‭.

This allows you to write your example thus:

  There once was a young lady with pride,

  ‮who ate fourteen green apples and died.

  ‭Within the lamented,

  ‮the apple fermented

  ‭and made cider inside her insides.

I'm posting this HTML in now so you can see how it appears. You can observe the actual direction change by selecting parts of the text.

There once was a young lady with pride,
‮who ate fourteen green 123 apples and died.
‭Within the lamented,
‮the apple fermented
‭and made cider inside her insides.

If you wanted a true boustrephedon, where the letters forms are also backwards, and if you don't mind using CSS3 features, then you could use a CSS3 transform:

backward {
  display: inline-block;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

  There once was a lady with pride,

  who ate fourteen green apples and died.
 Within the lamented,

  the apple fermented
 and made cider inside her insides.