em, px, pt, cm, in… Hangisi daha iyi?


CSS içinde uzunluk veya genişlik tanımlamaları için birkaç çeşit birim mevcut. Bunların bazıları matbaadan bilgisayar dünyasına taşınmış. pt (point – nokta) ve pc (pica)… ve diğerleri günlük kullanımdan gelen ölçü birimleri: cm ve in (inç). Bir de CSS için özellikle icat edilmiş “sihirli” bir birim var: px (pixel -piksel). Bu, değişik özelliklerin değişik birimleri iktiza ettiği anlamına mı gelir?

Hayır, birimlerin özelliklerle yapacağı birşey yoktur, fakat çıkış ortamı ile çok şeyi vardır: Ekran veya kağıt?

Hangi ölçü biriminin kullanılacağına ilişkin herhangi bir kısıtlama yoktur. Eğer bir özellik piksel cinsinden bir değeri kabul ediyorsa (‘margin: 5px’), inç veya cm cinsinden değeri de pekala kabul eder (‘margin: 1.2in; margin: 0.5cm’) ya da tam tersi de geçerlidir.

Fakat, genellikle ekrandan ziyade kağıda yazdırma işlemlerinde farklı birimleri kullanırsınız.

Tavsiye Edilen Ara Sıra Kullanılan Tavsiye Edilmeyen
Ekran em, px, % ex pt, cm, mm, in, pc
Baskı em, cm, mm, in, pt, pc, % px, ex

Ölçüler arasındaki ilişki aşağıda gösterildiği gibidir:

1" = 2.54cm = 25.4mm = 72pt = 6pc

Mutlak ölçü birimleri (cm, mm, in, pt ve pc) ekranda görüntülenecek belgeler için aslında çok kullanışlı ve tavsiye edilen birimler değillerdir. Çünkü 23″ full HD bir masaüstü ekranı ile 5″ bir akıllı telefon ekranıaynı çözünürlükte olabilir. Dolayısıyla 10 cm olarak belirlenmiş bir genişlik masaüstü ekranda çok problem olmaz ama cep teleonunda bunu görebilmek için ekranı kaydırmak gerekecektir. Bunun yanısıra bu iki cihazın ekranlarına olan mesafe aynı olmayacaktır.

em ve ex belge içindeki yazıtipi boyuna bağımlıdır. Yazıtipinin 12pt olduğu bir belgede 1em 12pt, yazıtipinin 30px olduğu belgede ise 30px’dir. Görecelidir yani. Dolayısıyla margin veya padding değerleri em birimiyle belirlenirse yazıtipine göre orantılanacaktır.

ex birimi de em birimi gibi bağıl bir değeri ifade eder. Nadiren kullanılır. Genellikle geçerli yazıtipi boyutunda küçük a, c, m veya o harflerinin yüksekliğine bağlıdır.

CSS’nin sihirli birimi px’dir. Ne mutlak ne de göreceli birimlere bağımlı değildir. Tam olarak ekranda yumuşatma  (anti-alias) yapmadan görüntülenebilecek değerdir. diğer birimler ondalıklı ifade olabilirler ancak px tam sayı olmalıdır.

px kullanarak resimlerin ve diğer öğelerin hizalamasını tam olarak yapabilirsiniz. Her çözünürlükte de aynı görüntüyü alırsınız.

Yazıtipi boyutları için em veya px kullanın

pt ve pc birimleri CSS’ye tipografiden geçmiştir. Yazıcılar cm veya in yerine bu birimleri kullanmışlardır. Fakat CSS içinde pt kullanmak için hiçbir sebep yoktur. İstediğiniz birimi kullanabilirsiniz. Fakat em veya px kullanmak için güzel bir sebep vardır:

0.5pt, 0.5px, 1px, 1pt, 1.5px, 1.5pt, 2px ve 2pt kalınlıkta çizgiler çizelim:

Fiddle’dan baksanız daha iyi

0.5pt, 0.5px, 1pt 1px ve 1.5px kalınlıktaki çizgiler aynı görünüyor. Ekranınızın gösterebileceği en küçük birim 1px’dir. Dolayısıyla yarım piksel görüntülenemez. onun yerine yine 1px kalınlığında bir çizgi görürsünüz. Yine 0.5pt kalınlığındaki çizgi de 72dpi bir monitörde yarım piksel yapar ki bunu da 1px olarak görürsünüz. Eğer çizgiler gittikçe kalınlaşıyorsa muhtemelen yüksek kalitede bir monitörde veya kağıt üzerinde bu çizgileri görüyorsunuz demektir. Yine 1pt kalınlığındaki çizgi 1.5px olandan daha kalın görünüyorsa muhtemelen taşınabilir bir cihaz (tablet, akıllı telefon) üzerinden bakıyor olmalısınız. Yine fiddle açıkken içeriği yakınlaştırmaya başladığınızda çizgilerin kalınlık farkını göreceksiniz.

CSS’nin sihirli birimi px genellikle en kullanışlı olanıdır. Özellikle de metin ve resim hizalamaları yapıyorsanız.. Çünkü ekranda 1px ve katı boyutlarında olan herşey keskin bir şekilde görünür.

Fakat yazıtipleri için em kullanmak daha iyidir. BODY veya HTML takıları için bir yazıtipi boyutu ayarlamayın. Zira cihazın veya web tarayıcısının kendi varsayılan değerlerini kullanmak okuyucu açısından rahatlık sağlayacaktır. Bunun yanı sıra diğer öğeler için yazıtipi boyutunu em cinsinden belirtin. Mesela:
h3 {font-size: 1.4em;}

Bu sayede h3 takıları, normal gövde metninin %140’ı kadar büyütmüş oldunuz.pt ve/veya cm ( ya da in) birimlerini sadece yazdırma için kullanın. Ekran boyları değişebilir. Dolayısıyla (daha önce de bahsettiğim gibi) 3 cmlik bir yükseklik her ekranda farklı piksel sayısıyla görüntülenir. Fakat A4 kağıt tüm dünyada aynı boydadır. Fakat burada bile varsayılan yazıtipi boyutunu kullanmak evladır.

CSS için yeni birimler de var

rem var bir de. root em’in kısaltması. web sayfasının kök öğesine orantılanmış ölçü birimidir. em’den farklı olarak tüm belgede sabittir.

Pencerenin genişlik ve yükseklik değerine göre belirlenen iki ölçü birimi daha var. vw (viewport width) ve vh (viewport height). 1vw, pencere genişliğinin yüzde biri kadardır. Evet tabii ki, vh de pencerenin yüzde biri kadar olur. Responsive web siteleri için kullanışlıdır.,

Kaynak: http://www.w3.org/Style/Examples/007/units

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s