RTL and Punctuation
Working on a website that supports RTL (right-to-left) really opens your eyes to some problem in modern web development. Despite websites being read in RTL since, well, LTR, it's amazing that we don't have more widely supported -start and -endproperties and values in CSS. The side effect of that is needing to offset LTR and RTL padding, margin, left/right, and other properties. Another issue with RTL seems to be punctuation and digits -- they aren't always where they should be. Check out these examples:
In LTR: "I am the best ever!" in RTL: "!I am the best ever" In LTR: "The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later." in RTL: ".The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later"
Weird, right? You would think that browsers would simply ensure those characters would follow the same format as LTR, but that isn't the case. To ensure those issues don't occur, you can use the <bdi> tag:
<bdi>This text should have bi-directionally correct punctuation!</bdi>
Unfortunately this tag is only supported in Chrome and Firefox, but it definitely prevents the odd punctuation issue in those browsers. Why the issue pops up in the first place isn't something I can answer with any big of expertise, but jump to this solution when it pops up!
Currently we use some specified classes for LTR sentences in RTL layout.
I don’t see any problem in this case because in RTL languages you have to read words from right to the left so it is logical to see punctuation on the left side of the words.
for example this text is in Persian which is right to left.
این متن فارسی است!
the exclamation mark is on the right side of the first word but if you change the direction of the box or add dir=”rtl” to the html tag (preferred option), the exclamation mark will go to the left side after the last word which is it’s correct position.
If you are developing a bi-directional website you should always wrap sections of text with correct
dirattribute. To avoid problems like this.If you are using Node in your back-end you can use my library that detects text direction and
allow you to wrap text with right
dirattribute. It’s also handy in front-end where user inputs the text and you render it in real-time.https://github.com/mohsen1/string-direction
What HTML/CSS code exactly does produce those examples, i.e. how does one set RTL?
also there is problems for web fonts and layout of page.often you see tahoma font on wide number of rtl web sites,because other fonts didn’t designed for use in web.also almost all of frameworks (except foundation) don’t support rtl layouts.
for the second problem i am developing a grid system for my own and i plan to release it on an open source license.
Hi, I’m an Israeli developer and I had to deal with RTL in Hebrew alot.
as mentioned here, the “dir” tag solves most of the problems.
It actually even solve BiDi problems for when I have sentences combine RTL language with LTR languages.
Yes, it’s not perfect and it has its problems but basically it works and we learned to deal with it.
aside from using the
dirattribute, you also have thedirection: rltcss rule – which does the same thing on the css level (not to be confused with text-align which just aligns text)Note that in above text comment, first lines are in bdi tag and second ones in p tag with css value of direction:rtl.
In the first test, there is a br tag between English and Persian text.
The second test doesn’t show good with
direction:rtland English text.The third text is similar with
bidianddirection:rtl.In overall, bdi shows same result as
direction:rtlon rtl text, is fine in ltr text while direction:rtl is not, and shows same issue asdirection:rtlon multilingual text.I prefer bdi in future.