text-transform: uppercase Türkçe sayfada marka adını bozuyor

Bu sitedeki proje kartlarına platform rozetleri ekledim: iOS · Android · Web. Rozetler sayfanın geri kalanıyla aynı düzende, yani küçük punto monospace ve büyük harf:

text-transform: uppercase;

Sonuç şu oldu:

İOS · ANDROİD · WEB

Tarayıcı hata yapmıyor

Sayfa <html lang="tr">. CSS büyük harf dönüşümü, metnin dilinin harf çevirme kurallarını uyguluyor ve Türkçede i harfinin büyüğü İ — noktalı. Türkçede ayrıca noktasız ı ve onun büyüğü I var; yani dört ayrı harf, iki ayrı çift.

Dolayısıyla iOS → İOS, Android → ANDROİD. Türkçe bir kelime için bu doğru davranış. Marka adı için değil.

Düzeltme

İki yol var:

• text-transform: none ve metni istediğiniz gibi yazın. Ben bunu seçtim: rozetler artık iOS · Android · Web diye duruyor. Marka adları zaten kendi büyük-küçük harf düzenine sahip; onu bozmamak daha doğru.
• Öğeye lang="en" verin. Dönüşüm İngilizce kurallarına göre yapılır, IOS çıkar. Teknik olarak doğru ama semantik olarak yalan — o öğe İngilizce değil, marka adı.

⚠️ Metni doğrudan IOS diye yazıp uppercase’i bırakmak da çalışır (Türkçede I’nın büyüğü yine I), ama bu sefer marka adını siz bozmuş olursunuz.

Aynı kural başka yerlerde de var

• JavaScript. 'i'.toUpperCase() her zaman 'I' döner — JS varsayılan olarak dile duyarsız. Ama 'i'.toLocaleUpperCase('tr') 'İ' döner. Yani CSS ile JS aynı metni farklı büyütebilir.
• Arama ve karşılaştırma. Kullanıcının yazdığı istanbul ile veritabanındaki İSTANBUL, Türkçe locale ayarlı bir sistemde küçük harfe indirildiğinde eşleşmeyebilir. Klasik “Turkish I problem”.
• Veritabanı collation’ı. Sunucunun locale’i ile uygulamanınki farklıysa aynı sorgu iki ortamda farklı sonuç verir.

Çıkarılacak dersler

• Marka adına text-transform uygulama. Marka adının büyük-küçük harf düzeni verinin parçası, sunumun değil.
• lang özniteliği kozmetik değil. Harf çevirme, tireleme ve ekran okuyucu telaffuzu ona bakıyor; doğru olması gerekiyor ve doğru olması bu tür sürprizler üretiyor.
• Türkçe arayüzde büyük harf dönüşümünü gözle kontrol et. Özellikle içinde i geçen İngilizce kelimelerde.