CSS’te büyük harfe çevirince i neden I oluyor

Bir menüde “iletişim” yazıp CSS ile büyük harfe çevirdiğinizde ekranda “ILETIŞIM” görüyorsanız sorun fontta değil, sayfanın dil bilgisindedir. Tarayıcı metnin Türkçe olduğunu bilmiyorsa küçük i’yi İngilizcedeki gibi noktasız büyük I’ya çevirir. Çözüm çoğu zaman tek bir özniteliktir: lang="tr".

Türkçede iki ayrı i var

Unicode’un büyük-küçük harf dönüşümü kuralları varsayılan olarak İngilizce ve Batı Avrupa dillerine göre çalışır: i büyüyünce I, I küçülünce i olur. Türkçe ve Azerbaycan Türkçesinde ise iki ayrı harf çifti vardır: i ile İ, ı ile I.

Unicode Konsorsiyumu bu istisnayı SpecialCasing.txt adlı dosyada tanımlıyor. Dosyanın “Turkish and Azeri” bölümündeki açıklama satırı şöyle: “I ve noktasız i; noktalı İ ve i, Türkçede ve Azericede büyük-küçük harf çiftidir.” Altındaki kurallar tr ve az dil kodlarına bağlı:

• Küçük harfe çevirirken I, noktasız ı olur.
• Büyük harfe çevirirken i, noktalı İ olur.
• İ küçültülünce i olur.

Bu kurallar yalnız dil Türkçe ya da Azerice olarak işaretlendiğinde devreye girer. Dil bilgisi yoksa varsayılan eşleme uygulanır.

CSS bu kuralı ne zaman uygular?

MDN’in text-transform sayfası, bu özelliğin dile özgü büyük-küçük harf kurallarını hesaba kattığını açıkça yazıyor ve örnek olarak Türkçe, Azerice, Kırım Tatarcası, Volga Tatarcası ve Başkurtçayı sayıyor. Aynı sayfaya göre dil, HTML’deki lang özniteliğinden okunur. Sayfa ayrıca dile özgü dönüşüm desteğinin tarayıcıdan tarayıcıya değiştiğini not ediyor; bu yüzden kendi hedef tarayıcılarınızda denemeniz gerekir.

Aşağıdaki iki satır aynı CSS’i kullanıyor, tek fark lang değeri:

<p lang="en" style="text-transform: uppercase">istanbul iğdir</p>
<p lang="tr" style="text-transform: uppercase">istanbul iğdir</p>

Dile özgü dönüşümü destekleyen bir tarayıcıda ilk satır “ISTANBUL IĞDIR”, ikinci satır “İSTANBUL İĞDİR” olarak görünür. Ters yönde de aynı şey geçerli: text-transform: lowercase ile “IĞDIR” sözcüğü İngilizce işaretli bir sayfada “iğdir”, Türkçe işaretli bir sayfada “ığdır” olur. İkincisi doğru yazımdır.

text-transform: capitalize da etkilenir. Türkçe işaretli bir sayfada “ilk adım” → “İlk Adım” olur; işaretsiz sayfada “Ilk Adım” çıkar.

lang özniteliği nereye yazılır?

W3C’nin uluslararasılaştırma ekibi tavsiyeyi tek cümleyle veriyor: sayfanın varsayılan dilini her zaman html öğesindeki lang özniteliğiyle bildirin. Bu değer sayfadaki bütün öğelere miras kalır.

<html lang="tr">

Aynı öznitelik CSS’te :lang() seçicisiyle de kullanılabilir. :lang(tr) seçicisi lang="tr" ile birlikte lang="tr-TR" yazılmış öğeleri de seçer, çünkü bölge eki dilin alt etiketidir. Bu sayede yalnız Türkçe sayfalarda farklı bir harf aralığı ya da başlık fontu tanımlamak mümkün:

:lang(tr) .menu a { text-transform: uppercase; letter-spacing: .04em; }

Sayfanın bir bölümü başka dildeyse o bölüme ayrıca lang verilir. Örneğin Türkçe bir sayfada İngilizce bir alıntı lang="en" ile işaretlenirse büyük harfe çevrildiğinde İngilizce kurallar uygulanır.

Sık görülen hatalar

• Şablon İngilizce kalmış. Hazır bir temanın ya da açılış sayfası şablonunun html etiketinde lang="en" yazıyor olabilir. Site Türkçe içerikle doldurulduğunda bu değer değiştirilmezse büyük harfli menüler bozulur. Sayfanın kaynağını açıp (Ctrl+U) ilk satırlara bakmak yeterli.
• Dil kodu yanlış. lang="TR" ya da lang="tr-TR" sorun değildir; dil etiketleri büyük-küçük harfe duyarlı değildir ve bölge eki dili değiştirmez. lang="turkish" ise geçerli bir etiket değildir.
• Metin JavaScript ile büyütülüyor. CSS yerine bir betik toUpperCase() kullanıyorsa lang özniteliği işe yaramaz; betiğin dil parametreli yöntemi kullanması gerekir. Bunu noktalı ve noktasız i yazımızda anlattık.
• Büyük harfle yazılmış metin. Metni HTML’de zaten “İLETİŞİM” diye büyük yazdıysanız CSS’in yapacağı bir şey kalmaz; ama bu metni bir tasarım değişikliğinde lowercase ile küçültmek isterseniz yine lang gerekir.

İkinci tuzak, font İ’yi çizmiyorsa

Dil doğru işaretlendi, tarayıcı “istanbul”u “İSTANBUL” yaptı. Ekranda hâlâ farklı görünen bir harf varsa bu kez sorun fonttadır. Dönüşüm sonucunda ortaya çıkan İ (U+0130) harfini font çizmiyorsa tarayıcı onu yedek fonttan alır.

Ölçümümüzde Türkçesi eksik 566 ailenin büyük çoğunluğunda (553 aile) noktalı büyük İ bulunmuyor; İ, en sık eksik Türkçe harf. Bir grup font ise Türkçenin bütün harflerini çiziyor, yalnız İ’yi atlıyor: Atkinson Hyperlegible, Titan One, Poly, Rakkas, Radley ve Syne Mono bunlardan. Bu fontlar küçük harfli gövde metninde sorunsuz görünür; ama aynı font bir başlıkta text-transform: uppercase ile kullanıldığında her İ farklı bir fonttan gelir. Yani Türkçe sayfada büyük harfli başlık kullanıyorsanız fontu küçük harfli örnekle değil, büyük harfli bir satırla denemelisiniz.

Tersi daha nadir ama var: Rubik Mono One, Patrick Hand SC ve La Belle Aurore gibi bazı aileler büyük İ’yi çiziyor, küçük noktasız ı’yı çizmiyor. lowercase dönüşümü “IĞDIR”ı doğru biçimde “ığdır” yapsa da ı harfleri yedek fonttan gelir.

Fontun hangi harfleri eksik çizdiğini font listesinde arayabilir, popüler fontlardaki eksikleri Türkçesi eksik fontlar sayfasında görebilirsiniz.

Küçük büyük harfler (small caps)

font-variant: small-caps ya da font-variant-caps kullanan tasarımlarda iş biraz daha karışır. Küçük büyük harf (small caps), küçük harflerin yerine boyu küçültülmüş büyük harf biçimlerinin kullanılmasıdır. Türkçede i’nin küçük büyük harf biçimi noktalı, ı’nınki noktasız olmalıdır. Google’ın font kalitesi araçlarını tuttuğu googlefonts/glyphsets deposunun açıklamasında, shaperglot adlı aracın Türkçe için “ı ve i küçük büyük harf biçiminde birbirinden ayrı harflere dönüşüyor mu” diye ayrıca kontrol ettiği yazıyor. Bu kontrolün ayrıca yazılmış olması, ayrımın her fontta kendiliğinden yapılmadığını düşündürüyor. Fontun gerçek küçük büyük harfleri yoksa tarayıcı büyük harfleri küçülterek yapay küçük büyük harf üretir; bu durumda dönüşüm yine lang değerine göre yapılır.

Sınama satırları

Bir sayfa şablonunu ya da yeni bir fontu denerken şu satırları kullanabilirsiniz. Her biri farklı bir sorunu yakalar:

Sitemizdeki her font sayfasında örnek kutusu bu satırların benzerlerini fontun kendi dosyasıyla gösterir; örneğin Inter sayfasında “İSTANBUL’DA ŞİŞLİ’YE ÇIKIŞ” satırı doğrudan Inter ile çizilir. Kendi sitenizde aynı satırı text-transform ile üretip ikisini karşılaştırmak, sorunun dilde mi fontta mı olduğunu ilk bakışta gösterir.