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
Can you give the resource or code you you used for reversing I would like to reverse pages in a book is it possible to do with html and css i.e; last pages to first since I can do it in word it takes lot of time because I need do it for many books.
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?
Thank for the article,
I want to reverse a value of a input this way don’t work also the bdo element don’t work, any idea ?