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>
‮who ate fourteen green apples and died.<br>
‭Within the lamented,<br>
‮the apple fermented<br>
‭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>
Best Answer
You can use CSS transformations to achieve this. A horizontal flip would involve scaling the div like this:
And a vertical flip would involve scaling the div like this:
DEMO: