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

Related: http://stackoverflow.com/questions/5406368/can-you-use-css-to-mirror-flip-text — JMax, Aug 29 '12 at 14:14
And some inspiration here: http://yichuanshen.de/blog/2011/01/08/reflecting-text-with-pure-css3/ — JMax, Aug 29 '12 at 14:17
Also related: [http://stackoverflow.com/questions/660634/css-text-decoration-reverse](http://stackoverflow.com/questions/660634/css-text-decoration-reverse) — DavidRR, Aug 29 '12 at 14:23

score 37 · Accepted Answer · edited Jan 16 '20 at 09:29

37

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>

edited Jan 16 '20 at 09:29

Penny Liu

15,447
5
79
98

answered Aug 29 '12 at 14:16

Peter Olson

139,199
49
202
242

1

+1 How can I use CSS3 transforms in Stack posts? If it's possible could you provide an example in your answer? – draks ... Jan 07 '14 at 10:23
@draks... I don't think it's possible, unfortunately – Peter Olson Jan 07 '14 at 14:42
Sad, I've seen usernames with reverted chararcters. How does this work? – draks ... Jan 08 '14 at 22:35
@draks... They use the unicode character `‮` (U+202E). – Peter Olson Jan 08 '14 at 22:39
‮ but this doesn't revert the single chararcters...(and doesn't work in coments ;-) – draks ... Jan 08 '14 at 22:45
@PeterOlson, So isn't this character usable for injection attacks? Just add it into an input box and the rest of the characters end up mirrored. – Pacerier Jun 30 '15 at 07:10
@Pacerier Yes there are some potential attacks for using this character, for example sending an EXE file to somebody (say `evilcod.exe`) and disguising it as a DOC file (`evilexe.doc`). – Peter Olson Jun 30 '15 at 07:15
@draks...: "reverse", not "revert" (yes, very closely related words). – T.J. Crowder Feb 22 '16 at 13:11
2

‮ !̱͈͓͘ͅr̮̙̱̰̪̖͚e̷w͓̟ś͓̹̤̠̲̤n̲͓̮̗͔͈͙͏a̡͓̹̙͔̣̰̩ ̙̗̻͖̘̻̫t͍͈a̡͈e̱̮̪̤͓͙͖r͙͉̼̩ͅG – Josh Crozier Feb 22 '16 at 19:03
1

@draks... Doesn't work in comments you say? ‮ ?teb annaW – Ajedi32 Feb 23 '16 at 18:36
I would also like to note that with the Unicode control characters, the `span` and `b`, etc doesn't stop the direction change. – Emmet Arries Dec 13 '16 at 00:43

score 23 · Answer 2 · edited Jan 16 '20 at 09:21

23

Try this.

span {
  direction: rtl;
  unicode-bidi: bidi-override;
}

<span>who ate fourteen green apples and died.</span>

edited Jan 16 '20 at 09:21

Penny Liu

15,447
5
79
98

answered Aug 29 '12 at 14:16

Zoltan Toth

46,981
12
120
134

Penny Liu · Answer 3 · 2020-01-16T09:51:07.563

2

You can use bdo tag like so:

bdo[dir='rtl'] {
  color: red;
}

There once was a lady with pride,<br>
<bdo dir='rtl'>who ate fourteen green apples and died.</bdo><br> 
Within the lamented,<br>
<bdo dir='rtl'>the apple fermented</bdo><br> 
and made cider inside her insides.

edited Jan 16 '20 at 09:51

answered Jan 16 '20 at 09:20

Penny Liu

15,447
5
79
98

How do I make text reverse direction in HTML?

3 Answers3

Linked