Reversing Text

For right-to-left languages, you can swap the default left-to-right layout in most browsers simply through the dir attribute.

<body dir="rtl">
  text in right-to-left language
</body>

You can use that attribute on any text element, it doesn't have to be the body. Likewise, you can swap it with just CSS:

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

The following are "less practical" but still interesting:

/* Flip each letter backwards */
div {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  unicode-bidi:bidi-override;
  direction:rtl;
}

/* Entire text flipped around */
div {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
}

Comments

Zsitro

# January 5, 2012

Nice snippet :)

Reply ↓

Ako Kaman

# January 5, 2012

Nice tip. I rarely see tips about Right-to-left languages.

Reply ↓

Brendan Glyn-jones

# May 23, 2014

This was exactly what I was looking for thank you. I just have one question: if a blind person was reading your sight and came over this, would their device read the text correctly or would it see it in reverse?

Reply ↓

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Comments

Submit a Comment

Posting Code

Code of Conduct

Want to tell us something privately?