RTL Styling 101 | CSS-Tricks
[ad_1]
A few weeks ago I was super excited to publish my first CSS Tricks post: “The letter spacing is brokenBut forget that, what is important is the topic of the article: the letter spacing is incorrect and does not work as specified in the CSS specificationIn short: instead of arranging the characters evenly, an unsightly blank space appears at the end of the element.
While this inconsistency between the web and the spec is just a quirk for a Spanish/English speaker like me, for speakers of languages written right-to-left (RTL) like Arabic or Hebrew, an annoying space is left at the beginning or end of a word. Firefox (Gecko) somehow fixes the problem and rearranges the unnecessary space at the end (in reading order), but Google and Safari (Blink and Webkit) leave it at the beginning.
Of course I wanted to demonstrate this major weakness, but styling RTL content was beyond my CSS knowledge. That’s when I found this life-saving guide from Ahmad Shaded which covers every important aspect of designing RTL content on the web, as well as best practices for easily internationalizing an LTR website. A resource that I think is required reading if you are interested in i18n and accessibility on the web.
Since this guide is from 2018, I may have already discovered warm water, but I hope those who, like me, didn’t know about it have fun learning something new!
Direct link →
[ad_2]
Source link