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, lowercase
, uppercase
, 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ı.