Göreceli Yazı Boyutları

Göreceli yazı boyutları web sitelerini daha ulaşılabilir ve okunması kolay hale getiriyor ancak siteyi kullanan kişi yazı boyutunu değiştirmenin bir yolunu bulamazsa bunun pek yardımı dokunmaz. En çok kullanılan tarayıcı olan Internet Explorer, yazı boyutunu değiştirmeye yarayan seçeneği ikinci seviye bir menüde gizliyor ki bu da yazı boyutlandırmasını bazı kullanıcılar için karmaşık bir hale getiriyor. Yazı boyutunu büyütmeye ve küçültmeye yarayan siteye ait butonlar, kullanıcıların boyutlandırma seçeneklerini bulmalarına ve kullanmalarına yardımcı oluyor.

Ne yazık ki, yazı boyutunu değiştirmeye yarayan varolan çoğu metod kullanıcının geçerli ayarlarını tanımıyor. İşte şimdi kullanıcıların seçimlerine saygı gösteren ve onlara yeniden boyutlandırma için ek bir seçenek sunan basit bir çözümü öğreneceğiz.

CSS

İlk adımımız, göreceli yazı boyutlarını varsayılan boyutla birleştiren basit bir CSS dosyası oluşturmak olacak. Yüzde yahut em kullanabiliriz.

/* default font size*/
@import url(small.css);

/* Netscape 4 safe font sizes */
body, div, p, th, td, li, dd {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

h1 {
  font-size: 130%;
  font-weight: bold;
}

h2 {
  font-size: 110%;
  font-weight: bold;
}

Daha sonra, CSS’te belirlenmiş olan 5 kesin boyutu kullanan 5 alternatif stil dosyaları üreteceğiz: xx-small, x-small, small, medium, and large. Bunlar arasındaki boyut, CSS2 tanımlamalarında da tavsiye edildiği gibi 1.2 olacak. Yine IE5 ve Opera’da ortaya çıkan yazı boyutu problemlerini düşünmeli ve telafi etmeliyiz (Detaylar ve açıklama için, Todd Fahrner’ın makalesi, “CSS Design: Size Matters”).

//* xx-small.css*/
body,
body div,
body p,
body th,
body td,
body li,
body dd	{
  font-size: xx-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: x-small
}

html>body,
html>body div,
html>body p,
html>body th,
html>body td,
html>body li,
html>body dd {
  font-size: x-small
}

Oluşturduğumuz dosyalar şunlar: xx-small.css, x-small.css, small.css, medium.css, large.css.

HTML

Daha sonra, HTML dosyasını hazırlıyor ve ana ve alternatif CSS dosyalarına bağlıyoruz. Alternatif CSS dosyalarına en küçükten başlayarak “A–”dan “A-“, “A”, “A+”, ve “A++”ya kadar isimler veriyoruz. Bu isimler Firebird’ün “Switch to alternate stylesheet (Alternatef stil dosyasına geç)” menüsünde ve Mozilla’nın “View > Use style” menüsünde görünecektir.

<link rel="stylesheet" href="style.css" »
type="text/css" />
<link rel="alternate stylesheet" »
type="text/css" href="large.css" title="A++" />
<link rel="alternate stylesheet" »
type="text/css" href="medium.css" title="A+" />
<link rel="alternate stylesheet" »
type="text/css" href="small.css" title="A" />
<link rel="alternate stylesheet" »
type="text/css" href="x-small.css" title="A-" />
<link rel="alternate stylesheet" »
type="text/css" href="xx-small.css" title="A--" />

JavaScript

Şimdi “Alternative Style: Working With Alternate Style Sheets” adresindeki stil dosyası değiştiriciyi HTML sayfamıza ekliyoruz:

<script language="JavaScript1.2" src="styleswitcher.js"
  type="text/javascript">
</script>

Butonlar şu şekilde kullanılmalı:

<form name="font_select" action="GET">
    <input
      type="button"
      onclick="javascript:fontsizedown();"
      value=" font - "
    />
    <input
      type="button"
      onclick="javascript:fontsizeup()"
      value=" font + "
    />
</form>

Stil değiştiricinin kaynak kodlarını burada bulabilirsiniz.Burada çalışan bir örnek var., Mozilla 1.6, Mozilla Firebird 0.7, Opera 7.11, IE 6 Windows, IE 5.2 Mac ve Safari 1.2’de test edildi.

Hepsi bu kadar!

Bir Uyarı

XML tanımı (decleration) dosya tipinden yukarıya eklendiği zaman IE bir bug sebebiyle garipleşebiliyor. Buna dikkat etmelisiniz.

Bu yazı Bojan Mihelac’ın Power to the People: Relative Font Sizes başlıklı yazısından tercüme edilmiştir.

“Translated with the permission of A List Apart Magazine and the author.”

Bir cevap yazın

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