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 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.

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:

<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>