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.
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?
This article helped me do this! https://codepen.io/Ciwan/pen/NaQWQa
Thanks very much :)
I made this to reverse and it works great.
http://flipmytext.com/textreverser.html
I have segregated the LTR and RTL css in different folders, How to conditionally select css folder in html based on arabic “ar” locale
Any idea how to flip horizontally one letter in a text block on web page?