Currently, I’m working on a chat UI that switches from a left-to-right to a right-to-left text direction: users can make their selection, then the whole interface changes to provide the best experience possibile. It’s a great chance to talk about inclusion—and the evolution of CSS.
Being Italian, I’ve never thought about the issues with non-latin alphabets, even if I studied ancient Greek at the high school: for several years now, I have been working with Eastern Europe and, at most, I have to deal with a few characters derived from Cyrillic. Nothing to do with Arabic.
I had to convert the company chat for a Moroccan client who requested that it support both French and Arabic. The switch itself was easy to build, since I just had to change the dir attribute value and reload the Angular translation strings, but it’s not enough to offer a satisfying experience.
Many CSS properties will adapt to the language direction automatically… but I’m talking about a chat, where even the text area initial position matters to understand who is writing. You know what? I think that most of the products out there are obsolete. Yet we have the technology.
It was 2017 when the first draft of CSS Logical Properties and Values was published: I bet that few of your are already using them. I didn’t do that, for example. And I was wrong, since these help a lot in switching between different language directions, adapting the whole UI without editing a single line of code.
If you’ve never heard of it, I’m referring to the concepts of -inline- and -block- for the x and the y axis respectively. Back in the days, we use to set top, right, bottom, and left values—and most CSS properties still have them. But there’s a more convenient way of doing it.
Instead of thinking in a Western-centric geometry, we should also consider that some languages have different vertical directions as well. So, not only left and right, but even top and bottom are relative: CSS let you build adaptive UIs that go beyond these limits.
Unfortunately, my company’s product doesn’t make use of those properties, then I was forced to provide two alternatives of the same selector, setting every single value manually. I’ll let you imagine what’s happening for Milano Cortina 2026, where we’ll have all possible writing modes.
I recommend future-proofing your projects by replacing old properties with new ones: I did it with my personal website, and I’m trying to spread the word among colleagues, because we will face a similar situation more and more often, and refactoring an entire CSS from scratch would be painful.
There will always be something to fix, since a chat implies showing profile pictures, which should be repositioned, but it’s possible to reduce manual interventions with a change in mindset. Logical properties and values for CSS are extensively documented and supported.
I know this isn’t news, but I think it should be talked about more often. Large companies are already prepared, but small and medium-sized businesses often don’t know these measures. The same goes for freelancers: we can no longer afford to ignore linguistic needs under the pretext of English.
Top comments (0)