Satır Uzunluğu ve Aralığı

Ölçek metnin ne kadar büyük olacağını verdi. Kayıt ayrıntısı ekranındaki özet paragrafı ise ölçekten bir sayı alıyor — 16 piksel, sıfırıncı basamak — ve düzenin ona verdiği sütunun tamamına yayılıyor. Sütun geniş bir ekranda 880 piksele kadar açılıyor. Bu paragraf okunabilir mi?

Soru, önceki derste tanımlanan ayrımın ikinci yakasına düşüyor. Yazı tipi kararı verildi, boyut kararı verildi; ikisi de seçilebilirlik tarafındaydı. Okunabilirlik ise blok düzeyinde ölçülür ve iki büyüklüğe bağlıdır: bir satırın ne kadar uzun olduğu ve satırların birbirinden ne kadar ayrıldığı. Bu iki büyüklük bağımsız değildir; biri değiştiğinde diğeri de değişmek zorundadır.

Satır Uzunluğu Piksel Değil Karakter Ölçüsüdür

Satır uzunluğu (line length), bir satıra sığan karakter sayısıdır. Piksel değil karakter cinsinden ölçülmesinin nedeni, gözün satır sonundan bir sonraki satırın başına dönerken kat ettiği mesafenin sözcük sayısıyla ilgili olmasıdır; aynı piksel genişliği farklı yazı boyutlarında farklı sayıda sözcük taşır.

Karakter sayısı doğrudan ölçülemez, çünkü karakterler farklı genişliktedir. Ancak yazı tipi her karakterin ilerleme genişliğini (advance width) bildirir; gerçek metin üzerinden ortalama alınarak hesaplanabilir.

// satiruzunlugu.mjs — sutun genisliginden karakter cinsinden satir uzunlugu hesabi

// Aday ailenin bildirdigi ilerleme genislikleri (em = 1000 birim).
// Turkce'ye ozgu harfler taban harflerinin genisligini alir.
const G = {
  " ": 260, a: 556, b: 574, c: 500, ç: 500, d: 574, e: 545, f: 340, g: 574,
  ğ: 574, h: 560, i: 244, ı: 244, j: 244, k: 520, l: 244, m: 856, n: 560,
  o: 570, ö: 570, p: 574, r: 366, s: 480, ş: 480, t: 358, u: 560, ü: 560,
  v: 508, y: 508, z: 470, A: 660, B: 660, C: 686, Ç: 686, D: 720, E: 610,
  G: 740, H: 730, I: 280, İ: 280, K: 660, M: 890, N: 730, O: 760, Ö: 760,
  P: 610, R: 660, S: 620, Ş: 620, T: 620, U: 720, Ü: 720, V: 660, Y: 620,
  Z: 600, ",": 260, ".": 260, ":": 260, "-": 340, "1": 560, "9": 560,
  "0": 560, "8": 560,
};
const VARSAYILAN = 560;

const ozet =
  "Bu ciltte optigin gelisimi, gozlem araclarinin degisimiyle birlikte ele aliniyor. " +
  "Yazar, isik ve golge kavramlarini once olcum sorunu olarak kuruyor; ardindan " +
  "gorme kuramlarinin bu olcumlerden nasil turedigini gosteriyor. Kaynakca genis, " +
  "dizin ayrintili ve gorseller ozgun baskilardan alinmis.";

const toplam = [...ozet].reduce((s, c) => s + (G[c] ?? VARSAYILAN), 0);
const ortalama = toplam / [...ozet].length;

const BOYUT = 16; // px
const ortalamaPx = (ortalama / 1000) * BOYUT;

console.log(`ozet metni karakter sayisi: ${[...ozet].length}`);
console.log(`ortalama ilerleme genisligi: ${ortalama.toFixed(1)} / 1000 em`);
console.log(`16 px'te ortalama karakter genisligi: ${ortalamaPx.toFixed(3)} px\n`);

const HEDEF = [45, 75];
console.log("sutun (px)  satir uzunlugu (karakter)  hedef 45-75");
for (const sutun of [320, 480, 560, 640, 720, 880, 1040]) {
  const karakter = sutun / ortalamaPx;
  const durum = karakter < HEDEF[0] ? "KISA" : karakter > HEDEF[1] ? "UZUN" : "uygun";
  console.log(`${String(sutun).padStart(10)} ${karakter.toFixed(1).padStart(26)}  ${durum}`);
}

console.log("\nhedef karakter sayisi -> gereken sutun genisligi");
for (const k of [45, 66, 75]) {
  console.log(`${String(k).padStart(3)} karakter -> ${(k * ortalamaPx).toFixed(1)} px`);
}

// Ayni sutun genisliginde boyut degistirilirse satir uzunlugu da degisir.
console.log("\nsutun 640 px sabit  ->  boyut  satir uzunlugu (karakter)");
for (const b of [13, 16, 20, 25]) {
  const gen = (ortalama / 1000) * b;
  console.log(`${String(b).padStart(24)} px ${(640 / gen).toFixed(1).padStart(24)}`);
}

ozet metni karakter sayisi: 293
ortalama ilerleme genisligi: 437.8 / 1000 em
16 px'te ortalama karakter genisligi: 7.005 px

sutun (px)  satir uzunlugu (karakter)  hedef 45-75
       320                       45.7  uygun
       480                       68.5  uygun
       560                       79.9  UZUN
       640                       91.4  UZUN
       720                      102.8  UZUN
       880                      125.6  UZUN
      1040                      148.5  UZUN

hedef karakter sayisi -> gereken sutun genisligi
 45 karakter -> 315.2 px
 66 karakter -> 462.3 px
 75 karakter -> 525.4 px

sutun 640 px sabit  ->  boyut  satir uzunlugu (karakter)
                      13 px                    112.4
                      16 px                     91.4
                      20 px                     73.1
                      25 px                     58.5

45–75 karakter aralığı, bu kursun benimsediği ve denetlenebilir olsun diye sayısallaştırdığı ölçüttür; alt sınır satırın çok sık kesilmesini, üst sınır dönüşün zorlaşmasını engeller.

Çıktının ikinci bloğu asıl bulgudur. 880 piksellik sütuna 125.6 karakter sığıyor, yani üst sınırın yaklaşık iki katı. Özet paragrafı sütunun tamamına yayıldığında okunabilirlik ölçütünü tek bir noktada değil, geniş bir ekran aralığının tamamında kaçırıyor. 560 piksel ve üzerindeki her sütun genişliği ölçüt dışında.

Üçüncü blok çözümün ölçüsünü veriyor. Sütun kaç piksel olursa olsun, özet metninin kaplayacağı genişlik en fazla 525 piksel olmalı. Bu, düzenin sütun genişliğinden bağımsız bir kısıttır: metin bloğu kendi en büyük genişliğini taşır ve sütun ondan genişse metin sütunu doldurmaz.

Dördüncü blok bir tuzağı açığa çıkarıyor. Sütun sabit tutulup boyut değiştirildiğinde satır uzunluğu da değişiyor: 640 piksellik sütunda 13 pikselle 112.4, 25 pikselle 58.5 karakter. Satır uzunluğu bir düzen kararı gibi görünse de, ölçekten seçilen basamağın doğrudan sonucudur. Bir başlığın satır uzunluğu ile gövde metninin satır uzunluğu aynı sütunda bile farklıdır ve üst sınır her düzey için ayrı denetlenir.

Kısıtın yazılı biçimi, sütuna değil metin bloğuna verilen bir en büyük genişliktir:

.ozet {
  font-size: 16px;
  max-width: 525px;
}

Bu değerin karakter cinsinden yazılabilen bir birimi de vardır: ch birimi, geçerli yazı tipindeki sıfır rakamının ilerleme genişliğini kullanır. Sıfırın genişliği ortalama karakter genişliğine eşit olmadığı için ch cinsinden verilen bir sayı, hesaplanan karakter sayısına eşit olmaz; bu ders ölçüyü ortalama üzerinden hesaplar ve sonucu piksel olarak yazar.

Satır Aralığı Satır Uzunluğuna Bağlıdır

Satır aralığı (leading), ardışık iki satırın taban çizgileri arasındaki uzaklıktır. M14/K02 CSS ile Görsel Sunum kursunda bu ölçü line-height özelliğiyle verilmişti ve orada satır yüksekliği adıyla anılmıştı; birimsiz yazıldığında yazı boyutunun çarpanı olarak çalışır. Tasarım tarafında sorulan soru ise çarpanın kaç olacağıdır.

Çarpanın iki ayrı alt sınırı vardır ve ikisi de hesaplanabilir.

Birinci alt sınır yazı tipinden gelir. Önceki derste hesaplanan çıkıntı ve iniş toplamı, harflerin gerçekten kapladığı dikey ölçüdür. Çarpan bu değerin altına indiğinde bir satırın inen harfleri, bir sonraki satırın çıkan harfleriyle örtüşür.

İkinci alt sınır göz hareketinden gelir. Satır sonunda göz bir sonraki satırın başına dönüş süpürmesi (return sweep) yapar. Bu hareketin yatay bileşeni satır uzunluğu, dikey bileşeni satır aralığıdır. İkisinin oranı, dönüşün hangi açıyla yapıldığını verir; açı küçüldükçe hedef satırın komşularından ayrılması zorlaşır ve göz aynı satırı iki kez okur ya da bir satır atlar.

// satiraraligi.mjs — satir kutusu, satir arasi bosluk, donus acisi ve paragraf araligi

const BOYUT = 16;            // px
const CIKINTI_INIS = 1.051;  // aday-3'un bildirdigi cikinti+inis (em)
const ESIK_ACI = 2.0;        // bu kursun benimsedigi en kucuk donus acisi (derece)

const derece = (rad) => (rad * 180) / Math.PI;

console.log("carpan  satir kutusu   satir arasi bosluk   paragraf araligi >=");
for (const c of [1.2, 1.3, 1.4, 1.5, 1.6, 1.75]) {
  const kutu = c * BOYUT;
  const bosluk = kutu - CIKINTI_INIS * BOYUT;
  console.log(
    `${c.toFixed(2).padStart(6)} ${kutu.toFixed(2).padStart(14)} px ${bosluk.toFixed(2).padStart(17)} px ${(bosluk * 2).toFixed(2).padStart(17)} px`
  );
}

console.log("\nsatir uzunlugu (px) -> donus acisi (derece), carpana gore");
const carpanlar = [1.2, 1.4, 1.5, 1.6, 1.75];
console.log("uzunluk  " + carpanlar.map((c) => c.toFixed(2).padStart(7)).join(""));
for (const uzunluk of [315, 462, 525, 640, 880]) {
  const satir = carpanlar
    .map((c) => derece(Math.atan((c * BOYUT) / uzunluk)).toFixed(2).padStart(7))
    .join("");
  console.log(`${String(uzunluk).padStart(7)}  ${satir}`);
}

console.log("\nsatir uzunlugu -> esigi (2.0 derece) saglayan en kucuk carpan");
for (const uzunluk of [315, 462, 525, 640, 880]) {
  const acidan = (uzunluk * Math.tan((ESIK_ACI * Math.PI) / 180)) / BOYUT;
  // Satirlarin ust uste binmemesi icin carpan cikinti+inis degerinin altina inemez.
  const alt = Math.max(acidan, CIKINTI_INIS);
  const secilen = Math.ceil(alt * 20) / 20; // 0.05'lik adimlara yuvarla
  console.log(
    `${String(uzunluk).padStart(4)} px -> acidan ${acidan.toFixed(3)}  alt sinir ${alt.toFixed(3)}  secilen ${secilen.toFixed(2)}`
  );
}

carpan  satir kutusu   satir arasi bosluk   paragraf araligi >=
  1.20          19.20 px              2.38 px              4.77 px
  1.30          20.80 px              3.98 px              7.97 px
  1.40          22.40 px              5.58 px             11.17 px
  1.50          24.00 px              7.18 px             14.37 px
  1.60          25.60 px              8.78 px             17.57 px
  1.75          28.00 px             11.18 px             22.37 px

satir uzunlugu (px) -> donus acisi (derece), carpana gore
uzunluk     1.20   1.40   1.50   1.60   1.75
    315     3.49   4.07   4.36   4.65   5.08
    462     2.38   2.78   2.97   3.17   3.47
    525     2.09   2.44   2.62   2.79   3.05
    640     1.72   2.00   2.15   2.29   2.51
    880     1.25   1.46   1.56   1.67   1.82

satir uzunlugu -> esigi (2.0 derece) saglayan en kucuk carpan
 315 px -> acidan 0.688  alt sinir 1.051  secilen 1.10
 462 px -> acidan 1.008  alt sinir 1.051  secilen 1.10
 525 px -> acidan 1.146  alt sinir 1.146  secilen 1.15
 640 px -> acidan 1.397  alt sinir 1.397  secilen 1.40
 880 px -> acidan 1.921  alt sinir 1.921  secilen 1.95

İki derecelik eşik de bu kursun benimsediği bir ölçüttür; sayının kendisi değil, kararın bir sayıya bağlanmış olması önemlidir.

Son blok iki alt sınırın nasıl yer değiştirdiğini gösteriyor. 315 ve 462 piksellik satırlarda açı ölçütü sırasıyla 0.688 ve 1.008 çarpanıyla karşılanıyor; ikisi de yazı tipinin dayattığı 1.051 sınırının altında, dolayısıyla belirleyici olan yazı tipidir. 525 pikselden itibaren açı ölçütü öne geçiyor ve 880 pikselde 1.921 çarpanı istiyor.

Bu, önceki bölümün bulgusunu ikinci bir yoldan doğruluyor. 880 piksellik satır, satır aralığı çarpanı 1.95’e çıkarılarak “kurtarılabilir” görünüyor. Ancak 16 piksellik metinde 1.95 çarpanı 31.2 piksellik bir satır kutusu demektir; satırlar arasındaki boşluk harflerin kendi yüksekliğine yaklaşır ve blok satır kümesi olmaktan çıkıp ayrı satırlar dizisine dönüşür. Uzun satırın gerçek çözümü satır aralığını büyütmek değil, satırı kısaltmaktır.

İkinci tablo ters yönde bir uyarı taşıyor. 315 piksellik kısa satırda 1.75 çarpanı 5.08 derecelik bir dönüş açısı üretiyor. Açının büyük olması bir sorun değildir; ama satır arası boşluğun 11.18 piksele çıkması, kısa satırlı bir blokta satırların birbirinden kopmasına yol açar. Kısa satır az aralık, uzun satır çok aralık ister; bu, tek bir kuralın iki ucudur.

Paragraf Aralığı Satır Arası Boşluktan Türer

İlk tablonun son sütunu, satır aralığının bir yan sonucunu veriyor. Bir paragrafın nerede bitip diğerinin nerede başladığı, ancak paragraflar arasındaki boşluk satır arası boşluktan belirgin biçimde büyükse anlaşılır. Ölçüt olarak iki kat alındığında, 1.5 çarpanıyla dizilmiş bir metinde paragraf aralığının en az 14.37 piksel olması gerekiyor.

Bu, Yakınlık ve Gruplama dersinde kurulan bağıl boşluk ilkesinin tipografiye uygulanmış biçimidir: grup içi boşluk ile gruplar arası boşluk arasındaki oran, gruplamayı belirler. Burada grup paragraf, grup içi boşluk ise satır arası boşluktur.

Aynı gerekçe paragraf girintisi ile paragraf aralığının birlikte kullanılmamasını da açıklar. İkisi de aynı işi yapar — paragraf sınırını ilan eder — ve ikisi birden kullanıldığında sınır iki kez işaretlenmiş olur. İki kanalda ifade etme kuralı burada geçerli değildir, çünkü paragraf sınırı kaybolduğunda okurun ödediği bedel bir hiyerarşi kaybı değil, yalnızca bir duraklamadır.

Hizalama ve Bölünme

Satır uzunluğu sabitlendikten sonra geriye satır sonlarının nasıl kesileceği kalır.

Sola hizalı metinde sağ kenar düzensizdir ve sözcük araları sabit kalır. İki yana yaslı metinde sağ kenar düzelir, ancak sözcük araları satır satır esner. Dar sütunlarda bu esneme büyür ve satır içinde gözle görülür boşluk kanalları oluşur. Katalog arayüzünün özet paragrafı 45 karakterin yakınına inebildiği için sola hizalı dizilir.

Ortalanmış metin sürekli okuma için elverişsizdir, çünkü her satırın başlangıcı farklı noktadadır ve dönüş süpürmesinin hedefi her satırda değişir. Ortalama, tek satırlık ya da en fazla iki satırlık metinlerde — boş durum iletisi, düğme metni — kullanılabilir; bunlar Bileşen Durumları konusunda ele alınacaktır.

Sözcük bölme, iki yana yaslı dizgide esnemeyi azaltır; sola hizalı dizgide ise sağ kenarı düzeltir ama sözcük bütünlüğünü bozar. Katalog arayüzünde yazar adları ve eser başlıkları özel adlardır ve bölünmemeleri gerekir; bu yüzden bölme yalnızca özet paragrafında açılır, başlık ve üstveri alanlarında kapalı kalır.

Özet

• Satır uzunluğu karakter cinsinden ölçülür; piksel genişliği aynı kalsa bile yazı boyutu değiştiğinde karakter sayısı değişir.
• Karakter sayısı, yazı tipinin bildirdiği ilerleme genişliklerinden gerçek metin üzerinden ortalama alınarak hesaplanır ve bir en büyük genişlik kısıtına çevrilir.
• Uzun satır sorunu sütuna değil metin bloğuna verilen bir genişlik sınırıyla çözülür; her metin düzeyi için sınır ayrı hesaplanır.
• Satır aralığı çarpanının iki alt sınırı vardır: yazı tipinin çıkıntı ve iniş toplamı ile dönüş açısı ölçütü. Kısa satırlarda birincisi, uzun satırlarda ikincisi belirleyicidir.
• Aralık büyütmek uzun satırı kurtarmaz; gereken çarpan büyüdükçe blok, satır kümesi olmaktan çıkar.
• Paragraf aralığı satır arası boşluktan belirgin biçimde büyük olmalıdır; paragraf sınırı girinti ya da aralıkla ilan edilir, ikisiyle birden değil.

Sonraki Adım

Bu üç ders metnin biçimini sabitledi: hangi aile, hangi boyut, hangi genişlik ve hangi aralık. Metnin ve zeminin rengi ise hâlâ ilk dersteki koyu gri ile beyazdan ibaret. Arayüzün renge ihtiyacı bir süsleme ihtiyacı değildir: birincil eylemi ikincil eylemden ayırmak, bir kaydın seçili olduğunu bildirmek ve rafta bulunma durumunu göstermek için ayrı yüzeyler gerekir. Sonraki ders renkleri tek tek seçmek yerine rol olarak tanımlar, rolleri açıklık ekseninde bir ölçeğe oturtur ve her rolün hangi zeminle eşleşeceğini hesapla belirler.