Menü Kapat

CSS text-transform özelliği

text-transform bir metnin büyük-küçük harf ayarlarını yapmak için kullanınan bir CSS özelliğidir.

.buyuk-harf {
text-transform: uppercase;
}

text-transform’un alabileceği değerler 

  • lowercase uygulanan metindeki tüm harfleri küçük harfe çevirir.
  • uppercase uygulanan metindeki tüm harfleri büyük harfe çevirir.
  • capitalize uygulanan metindeki her kelimenin ilk harfini büyük harfe çevirir.
  • none uygulanan metindeki küçük-büyük harfleri aynı girildiği gibi bırakır.
  • inherit uygulanan metindeki küçük-büyük harfleri, ebeveyn öğenin küçük büyük harf kurallarına göre ayarlar

Aşağıda,  lowercaseuppercase, ve capitalize değerlerinin kullanımına dair örnekler verilmiştir. HTML ve CSS sekmelerinini seçerek kullanıma dair ayrıntılı bilgi alabilirsiniz.

See the Pen text-transform – temel kullanım by Emre Başaran (@turzifer) on CodePen.

text-transform ve Türkçe karakterler

Yukarıdaki örnekte “İ” gibi Türkçe karakterlerin doğru görüntülenmediği dikkatinizi çekmiştir. Bunu çözmenin bir yolu, HTML’de lang=”tr” niteliğini (attribute) kullanarak o öğenin Türkçe olduğunu belirtmektir. Aşağıdaki örneğini verdim.

See the Pen text-transform – Türkçe karakterler by Emre Başaran (@turzifer) on CodePen.

text-transform: capitalize hakkında

capitalize, tek ya da çift tırnak arasında kalan kelimelerin harflerini ve tireden (-) sonra gelen ilk harfi büyütür.

capitalize, sayıların hemen ardından gelen kelimelerin ilk harfini büyütmez. Böylece “250cm” gibi bir ifade “250Cm”ye çevrilmez

capitalize, kelimelerin yalnızca ilk harflerini etkiler. Kelimede, ilk harfin dışındaki harflere bir etkisi olmaz. Bu yüzden bir kelimenin tüm harfleri büyük olarak yazıldıysa, capitalize ikinci ve sonraki harfleri küçültmez. Bu, “CSS” gibi bir akronim ya da kısaltmalar söz konusu olduğunda işe yarar.

Tarayıcı desteği

text-transform tüm tarayıcılarda desteklenmektedir (IE6+, Firefox 2+, Chrome 1+…).

Firefox Türk dilleri, Almanca, Flemenkçe, Yunanca gibi diller için dile özgü küçük-büyük harf kurallarını (i/İ, ı/I) destekliyor. Ayrıca Firefox, latin ve Doğu Asya dillerinin karışık olarak yer aldığı metinlerin okunabilirliğini artıracak, text-transform: full-width;, ifadesini destekleyen tek tarayıcı.

Bir cevap yazın