TÜRKÇE ARAYÜZDE CSS İLE BÜYÜK HARF YAZMAYIN

Bir arayüzde etiketleri büyük harfe çevirmenin en kolay yolu CSS’tir:

.etiket {
  text-transform: uppercase;
}

Türkçe bir arayüzde bu satır sessizce yanlış harf üretir.

Sorun

Türkçe’de “i” harfinin büyüğü İ’dir, “ı” harfinin büyüğü I. Latin alfabesinin geri kalanında böyle bir ayrım yok: “i” büyüdüğünde “I” olur.

Tarayıcının text-transform uygulaması metnin dilini lang özniteliğinden okur. Doğru lang="tr" verilmiş bir sayfada modern tarayıcılar bunu genellikle doğru yapar — ama bu garanti değildir. Metin bir bileşenin içinden geliyorsa, lang bir üst elemanda unutulmuşsa ya da içerik başka bir dilden kopyalanmışsa “İletişim” ekranda ILETISIM olarak belirir.

Daha kötüsü: bu hata derlemede patlamaz, testte kırmızı yanmaz. Yalnız görünür — ve çoğu zaman siteyi yapan kişi değil, ziyaretçi görür.

Çözüm

Büyük harfi CSS’e bırakmayın, kaynakta yazın:

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

.etiket {
  /* text-transform yok: harf zaten büyük */
  letter-spacing: 0.18em;
  font-size: 0.75rem;
}

CSS yalnız aralığı ve puntoyu ayarlar. Hangi harfin büyüğünün ne olduğuna karar veren şey metnin kendisidir; bu kararı kimse tahmin etmek zorunda kalmaz.

Metni koddan üretiyorsanız aynı tuzak orada da var: Python’da "iletişim".upper() size ILETIŞIM verir. Türkçe için eşlemeyi elle yapmanız gerekir.

Denetleme

Bu kural unutulmaya çok müsait — birisi bir bileşene uppercase ekler, kimse fark etmez. Biz otomatik denetime bağladık: derlenmiş sayfada text-transform: uppercase hesaplanan hiçbir öğe bulunmamalı.

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

Bu sayı sıfır değilse derleme düşer. Kuralı hatırlamak zorunda kalmamanın en iyi yolu, onu hatırlatacak bir şey yazmaktır.