Grow your CSS skills. Land your dream job.

Last updated on:

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);
}

Reference URL

Comments

  1. Permalink to comment#

    Nice snippet :)

  2. Ako Kaman
    Permalink to comment#

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

  3. Brendan Glyn-jones

    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?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".