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);
}
Nice snippet :)
Nice tip. I rarely see tips about Right-to-left languages.