Reversing Text | CSS-Tricks

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 ↓