Metin dönüşümü - CSS Hileleri

Anonim

CSS'deki text-transformözellik, metin durumunu ve büyük harf kullanımını kontrol eder.

.lowercase ( text-transform: lowercase; )

Metin Dönüştürme Değerleri

  • lowercase seçilen metindeki tüm harfleri küçük yapar.
  • uppercase seçili metindeki tüm harfleri büyük yapar.
  • capitalize seçili metindeki her kelimenin ilk harfini büyük yapar.
  • none metnin büyük / küçük harf kullanımını ve büyük harf kullanımını tam olarak girildiği gibi bırakır.
  • inherit metne büyük harf ve büyük harf kullanımını verir.

Gösterileri Aşağıdaki demo lowercase, uppercaseve capitalizekullanımda. Metnin orijinal olarak nasıl yazıldığını görmek için HTML sekmesine bakın, ardından CSS uygulandıktan sonra görmek için sonuçlar sekmesine geri dönün.

CodePen'de mariemosley (@mariemosley) tarafından Kalem 0f4293fce0d14aafc3818c950ab0ded3 bakın.

İlgi noktaları

capitalizetek veya çift tırnak içinde görünen sözcükleri ve kısa çizgiden sonraki ilk harfi büyük yapar. Bir rakamdan sonraki ilk harfi büyük yazmaz, bu nedenle "4 Şubat 2015" gibi tarihler "4 Şubat 2015" e dönüşmez.

capitalizeyalnızca kelimelerin ilk harflerini etkiler. Bir kelimedeki diğer harflerin durumunu değiştirmeyecektir. Örneğin, capitalizezaten tamamı büyük harf olan bir kelimeniz varsa , kelimedeki diğer harfler küçük harfe geçmeyecektir. Metniniz küçük harf içermemesi gereken bir kısaltma veya kısaltma içerdiğinde bu güzeldir.

CSS, makalelerin küçük harf olduğu kitapların, filmlerin, şarkıların ve şiirlerin başlıklarında kullanılan büyük harf stili olan "başlık büyüklüğünü" yapamaz ("Raiders of the Lost Ark" da olduğu gibi). Ancak, David Gouch'ın toTitleCase () dahil olmak üzere başlık durumu için JavaScript çözümleri vardır.

Daha fazla bilgi

  • MDN'de metin dönüştürme
  • W3C Spesifikasyonunda metin dönüştürme
  • WebAIM'den büyük harfli metnin erişilebilirliğine ilişkin notlar

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
Hiç Hiç Hiç Hiç Hiç Hiç Hiç

Firefox, diğer tarayıcılar tarafından desteklenmeyen Türk dilleri, Almanca, Hollandaca ve Yunanca için dile özgü büyük harf kullanım kurallarını destekler. Firefox, text-transform: full-width;latin ve Doğu Asya alfabelerinin bir karışımını içeren metinlerin okunabilirliğini artırmaya yardımcı olabilecek tek tarayıcıdır . MDN'deki ayrıntılara bakın.