Categories: css-tricks.com

RTL Styling 101

A couple of weeks ago I was super excited about publishing my first CSS-Tricks post: “Letter Spacing is Broken. Forget about that though, what’s important is the post’s topic: letter spacing is broken and doesn’t work as the CSS Specification says it should. In a nutshell, instead of spacing the characters evenly, it leaves an unpleasant space 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 right-to-left (RTL) languages like Arabic or Hebrew, an annoying space is left at the start or end of a word. Firefox (Gecko) kinda fixes it and rearranges the unnecessary space at the end (in the reading order), but Google and Safari (Blink and Webkit) leave it at the start.

Of course, I wanted to demo this major pain point, but styling RTL content was beyond my CSS power. That’s when I found this life-saver guide by Ahmad Shadeed that covers every major aspect of styling RTL content on the web and best practices to easily internationalize an LTR webpage. A resource that, I think, is a must-read if you are interested in i18n and accessibility in the web.

I may have discovered warm water since this guide goes back to 2018, but I hope those like me who didn’t know about it have fun learning something new!


RTL Styling 101 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

hnikoloski

Share
Published by
hnikoloski

Recent Posts

Quick Hit #21

Seeing a lot more headlines decrying JavaScript and pumping up PHP. Always interesting to see…

1 day ago

CSSWG Minutes Telecon (2024-09-18)

For the past two months, all my livelihood has gone towards reading, researching, understanding, writing,…

1 day ago

Quick Hit #20

Having fun with Bramus’ new Caniuse CLI tool. This’ll save lots of trips to the…

2 days ago

Quick Hit #19

Two possible syntaxes for CSS masonry, one draft specification, and you get to share your…

2 days ago

Re-Working the CSS Almanac

Getting right to it: the CSS-Tricks Almanac got a big refresh this week! I’m guessing…

2 days ago

Clever Polypane Debugging Features I’m Loving

I’m working on a refresh of my personal website, what I’m calling the HD remaster.…

4 days ago