DON'T UPPERCASE TURKISH TEXT WITH CSS

The easiest way to uppercase labels in an interface is CSS:

.label {
  text-transform: uppercase;
}

In a Turkish interface, that line quietly produces the wrong letter.

The problem

In Turkish, the uppercase of “i” is İ, and the uppercase of “ı” is I. No such distinction exists in the rest of the Latin alphabet, where “i” becomes “I”.

Browsers read the language for text-transform from the lang attribute. On a page correctly marked lang="tr", modern browsers usually get it right — but “usually” is not a guarantee. If the text comes from a component, if lang was forgotten on a wrapper, or if the content was pasted in from another locale, “İletişim” shows up on screen as ILETISIM.

Worse: this never fails a build and never turns a test red. It is only visible — and usually to a visitor rather than to whoever built the site.

The fix

Don’t leave casing to CSS. Write it in the source:

<p class="label">İLETİŞİM</p>

.label {
  /* no text-transform: the letters are already uppercase */
  letter-spacing: 0.18em;
  font-size: 0.75rem;
}

CSS handles only spacing and size. What the uppercase of a letter is stays a property of the text itself, so nobody has to guess.

If you generate the text in code, the same trap is waiting: in Python, "iletişim".upper() gives you ILETIŞIM. Turkish needs an explicit mapping.

Enforcing it

This rule is easy to forget — someone adds uppercase to a component and nobody notices. We wired it into an automated check instead: no element in the built page may have a computed text-transform: uppercase.

[...document.querySelectorAll("body *")]
  .filter((e) => getComputedStyle(e).textTransform === "uppercase").length;

If that number is not zero, the check fails. The best way to stop having to remember a rule is to write something that remembers it for you.