Don’t use text-transform, here’s why

text-transform is one of the most basic style-rule out there. It was first introduced in CSS 1 back in 96' and it lets you determine a transform rule for a text from the following options: none|capitalize|uppercase|lowercase|initial|inherit;

For many years it was very helpful to us, the developers, to enforce rules such as capitalize or lowercase to text, Making it super easy to write grammar-correct English and saves as the hassle to write different translations for the same word or sentence.

Then if it such a useful rule why do I think it’s dumb?
Well, the internet and our codebase were very different back in CSS 1 and for a modern application we want to support i18n and we're probably using a single-page developing framework such as Angular, React, or Vue. In such frameworks, the translation is working in a different approach. We all probably work with a translation file per language containing all the text-content of our app and injecting the translated content into our app by loading the relevant translation file and use string interpolation to inject it.

I had a translation issue in production where some titles for both English and Spanish were written in capitalize and we got complaints from our Spanish users that it’s written wrong grammar-wise. A quick check shows what was probably pretty obvious but somehow slipped from our eyes — English is different from other languages.
For example. In English, we’re upper-case every first latter in a title, and in Spanish, we’re doing it only for the first word. So if we want to write a book title, let's say, Harry Potter, Then in English, we’ll write Harry Potter and the Goblet of Fire and in Spanish, we’ll write Harry Potter y el caliz de fuego.
Please notice the different letters form.

So different languages have different grammar rules, Shocking right?

In our case, the translation was correct but we added the CSS rule text-transform: capitalize that massed our Spanish translation.
Of course, we removed this rule and a lot of other text-transform rules that were redundant in a modern application that supports multiple languages.

To sum up, Even if writing the same text if different formatting seems like repeating yourself, Doing it with CSS will surely cause grammar issues in different languages. Give the translation guys to do their job and give you grammar-correct text instead of adding wild-card text transforms that don’t take into consideration the app language.

Coiriues about how to do a multi-language app with ease? You should definitely check my favorite package for that, Transloco.

Transloco allows you to define translations for your content in different languages and switch between them easily in runtime. It exposes a rich API to manage translations efficiently and cleanly