text-transform: uppercase Türkçe sayfada marka adını bozuyorKısa bir yazı, çünkü hata da kısa. Ama bir kez gördükten sonra her Türkçe arayüzde fark ediyorsunuz.
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 · WEBSayfa <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.
Aynı sayfadaki diğer rozetler Türkçe kelimeydi — MOBİL + WEB, OYUN, WEB SİTESİ. Hepsi doğru çıkıyordu. Yalnız marka adı taşıyan rozet bozuluyordu ve İOS ile IOS arasındaki fark küçük punto monospace’te bir noktadan ibaret.
İ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.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.
'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.istanbul ile veritabanındaki İSTANBUL, Türkçe locale ayarlı bir sistemde küçük harfe indirildiğinde eşleşmeyebilir. Klasik “Turkish I problem”.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.i geçen İngilizce kelimelerde.