💻 Bilgisayar

CSS ile Harf Dönüşümü

CSS & HTML
Sunucu taraflı bir dil ve JavaScript kullanmadan belirli bir ID ya da Class’a (sınıf) CSS özelliği atayarak bu özelliği kullanan metinlerin tamamını küçük harfe, büyük harfe ya da ilk harfleri büyük hale getirmeniz mümkün.

(Az önceki satır, aşağıdaki gibi, CSS sınıfları ile biçimlendirilmiştir)

Sunucu taraflı bir dil ve JavaScript kullanmadan belirli bir <em>ID</em> ya da <em>Class</em>’a (sınıf) CSS özelliği atayarak bu özelliği kullanan metinlerin tamamını <span style="text-transform: lowercase;">küçük harfe</span>, <span style="text-transform: uppercase;">büyük harfe</span> ya da <span style="text-transform: capitalize;">ilk harfleri büyük hale</span> getirmeniz mümkün.
.sinif, #id {
	text-transform: lowercase; /* Hepsi küçük harf */
	text-transform: uppercase; /* Hepsi büyük harf  */
	text-transform: capitalize; /* İlk harfler büyük */
}

Neden bu özelliği kullanmalıyım?

CSS ile stillendirdiğiniz için, sunucudan gelen dosyada değişiklik yapmanıza gerek kalmaz. Siz İzmir bile yazsanız, bunu sadece bir CSS sınıfıyla İzmir haline getirebilirsiniz. Yazıcı dostu sayfalar için ayrı stil sayfaları kullanarak, sayfayı yeniden yükletmenize gerek kalmadan, yazıcının tamamı büyük harf olmayan, yazıcıda daha hoş durabilecek bir sayfa yazmasını sağlayabilirsiniz.

Arama motorları ve robotlar sitenizi büyük küçük harf kurallarına uygun olarak görür. Stil sadece bir maske görevi oynadığından alttaki yazı hep aynıdır.

Bir arıza nedeniyle stil sayfası yüklenemediğinde, tamamı büyük ya da küçük harf görünen metinler can sıkıcı olabilir. Ama CSS stili yüklenmediğinde siteniz düz yazıya döner.

Etiketler

CSS ile Harf Dönüşümü 19 yorum aldı.

  1. text-transform:capitalize türkçe karakterlerde sorun çıkarıyor.

    w3C'nin sitesindeki test güya başarılı ama sağdaki küçük i büyük İ'ye dönüşmüyor. Buna da bir cevap ver şimdi.

  2. bir konuda yardımını isteyecektim http://www.haberkaynagi.com/ haber sitesini deneme amaçlı başlattım da manşet bölümünde imagelerin üstüne gelen başlıklar büyük harf fakat yazıya küçük harf giriliyor uppercase komutuyla büyük harfe çeviriyoruz css de ancak İzmir i İZMIR diye büyütüyor küçük "i" leri büyük "I" yapıyor büyük "İ" yapmak için ne yapmam lazım. fontum türkçe karakteri destekliyor.
    kodda şöyle:
    h3.ticker-header {
    background: url(images/ticker-bg.png) no-repeat right center;
    color: #fff;
    float: left;
    font: 700 20px/20px 'Oswald', sans-serif;
    max-width: 155px;
    height: 20px;
    padding: 10px 25px 10px 20px;
    text-transform: uppercase;
    }
    çözümü varsa yardımcı olursan sevinirim.

    1. Maalesef bu tarayıcı ile ilgili bir durum. Tarayıcılar Türkçe'yi takıp destek vermediği sürece yapabileceğiniz bir şey bulunmamakta. :/

      1. Evet haklısınız İE düzgün gözüküyor diğer tüm tarayıcılarda chrome ff seamonkey chromium canary vs hepsinde buyuk İ yapmıyor teşekkürler. yaşasın MİCROSOFT demekten başka birşey yok yani. cevap için teşekkür.

  3. Türkçe karakterler "uppercase" ile büyük çevrildiğinde sorun çıkarıyor ama bir sitede bu yok. http://www.listelist.com

    burada da uppercase kulanılmış ama -i- harfinde hiçbir sorun yok. Mutlaka bir yolu olmalı. Siteyi inceledikten sonra bir fikriniz olur mu? Cevap bekliyorum.

  4. adamım soru sordum neden kaldırdın yorumumu? cevap bekliyordum senden. listelist reklamı yapıyor değilim.

    1. Yorumunuzu kaldırmadım. Listelist'in sitesinde uppercase'li bir örnek göremedim. Bulabileceğim tam bir adres gönderir misiniz?

  5. text-transform: none; yaptım doğru mu bilmiyorum ama ne şekilde yazarsanız o şekilde görünür oluyor. Deneme yanılma mantığı 🙂 yazı için teşekkürler.

  6. Hocam konu bayağı eski ama hala ihtiyaç var. Sadece ben değil, tanıdığım ve blog işiyle uğraşan arkadaşlarımda bu uppercase sorunu var. Ben text-transform:none yapıyorum ama bu seferde temayı basit gösteriyor. Sadece temada ki kategori ve menü başlıklarını el ile büyük harflerle yazmamızın Seo açısından sıkıntısı olur mu? Çünkü, başka çare yok gibi.

  7. Arkadaşlar çözüm çok basit aslında. HTML dökümanının açılışını <html> yerine <html lang="en"> yada <html lang="tr"> yaparsanız sorununuz o dil kurallarına göre çözülmüş olur.

  8. BU YÖNTEM IYI FAKAT İ HARFİ İÇİN ÇALIŞMIYOR. ÖRNEĞIN:

    İSİM YERİNE ISIM YAZAR.

    MAALESEF BUNUN BİR ÇÖZÜMÜ YOK. KULLANACAKLARIN DİKKATİNE.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir