HTML CSS – How to Make Text Reverse Direction

css

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 form. I was wondering if this was possible with just HTML.

As an example, I would like to be able to write markup that looks something like this:

<p>
  <forward>There once was a young lady with pride,<br>
  <backward>who ate fourteen green apples and died.<br>
  <forward>Within the lamented,<br>
  <backward>the apple fermented<br>
  <forward>and made cider inside her insides.
</p>

which would display something like this

There once was a young lady with pride,
.deid dna selppa neerg neetruof eta ohw
Within the lamented,
detnemref elppa eht
and made cider inside her insides.

For this example, I just manually wrote the text backwards, but I don't want to have to keep doing that since it's a very tedious process. It would be nice if I could do this in pure HTML, without having to do any scripting to dynamically manipulate the text.

Best Answer

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 &#x202E; and &#x202D;, or the decimal equivalents, &#8238; and &#8237;.

This allows you to write your example thus:

<p>
  There once was a young lady with pride,<br>
  &#x202e;who ate fourteen green apples and died.<br>
  &#x202d;Within the lamented,<br>
  &#x202e;the apple fermented<br>
  &#x202d;and made cider inside her insides.
</p>

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);
}
<p>
  There once was a lady with pride,<br>
  <backward>who ate fourteen green apples and died.</backward><br> Within the lamented,<br>
  <backward>the apple fermented</backward><br> and made cider inside her insides.
</p>

Related Question