Metin Biçimlendirme

Yazı tipi geldi ve boyut ölçeği kuruldu. Metnin kendisi üzerinde verilecek kararlar kaldı: kaynak metindeki boşluklara ne olur, satırlar nasıl hizalanır, harfler nasıl dönüştürülür, bağlantıların altı nasıl çizilir.

Bu kararların ilki en çok şaşırtan olanıdır. Web’in Temelleri ve HTML kursunda yazılan belgede metin girintili yazılmıştı ve girintiler ekranda görünmedi. Bu ders bunun sebebini kuralla ve hesapla gösterir.

Boşluk İşleme

Varsayılan davranışta, kaynak metindeki ardışık boşluk karakterleri tek bir boşluğa indirgenir ve satır sonları da birer boşluk karakteri sayılır. Bu, HTML belgesinin biçimlendirilebilir olmasını sağlar: girintileme, satır bölme ve hizalama kaynak metinde serbestçe yapılır, çıktıyı etkilemez.

Kural white-space özelliğiyle değiştirilir. Aşağıdaki program beş değeri aynı kaynak metin üzerinde uygular.

// bosluk.mjs — white-space degerlerinin bosluk isleme kurallarini uygular
const KAYNAK = "Kuzey   Yamac\n  Istasyonu\tolcum   verisi";

const DAVRANIS = {
  "normal":   { bosluklariBirlestir: true,  satirSonlariniKoru: false, sarma: true  },
  "nowrap":   { bosluklariBirlestir: true,  satirSonlariniKoru: false, sarma: false },
  "pre":      { bosluklariBirlestir: false, satirSonlariniKoru: true,  sarma: false },
  "pre-wrap": { bosluklariBirlestir: false, satirSonlariniKoru: true,  sarma: true  },
  "pre-line": { bosluklariBirlestir: true,  satirSonlariniKoru: true,  sarma: true  },
};

function isle(metin, kural) {
  let s = metin;
  if (kural.satirSonlariniKoru) {
    if (kural.bosluklariBirlestir) s = s.split("\n").map((p) => p.replace(/[ \t]+/g, " ").trim()).join("\n");
  } else {
    s = s.replace(/\s+/g, " ").trim();
  }
  return s;
}

console.log("kaynak (kacis dizileriyle):");
console.log(JSON.stringify(KAYNAK));
console.log("");
for (const [ad, k] of Object.entries(DAVRANIS)) {
  const sonuc = isle(KAYNAK, k);
  console.log(`${ad.padEnd(9)} sarma=${String(k.sarma).padEnd(5)} -> ${JSON.stringify(sonuc)}`);
}

console.log("\n--- text-transform: Turkce ozel durumu ---");
const ornek = "istasyon ILIK ışık";
console.log(`kaynak            : ${ornek}`);
console.log(`uppercase (en)    : ${ornek.toLocaleUpperCase("en-US")}`);
console.log(`uppercase (tr)    : ${ornek.toLocaleUpperCase("tr-TR")}`);
console.log(`lowercase (en)    : ${ornek.toLocaleLowerCase("en-US")}`);
console.log(`lowercase (tr)    : ${ornek.toLocaleLowerCase("tr-TR")}`);

console.log("\n--- text-indent ve hizalama etkisi (60 karakterlik kutu) ---");
const KUTU = 60;
const satir = "Istasyon deniz seviyesinden 1840 metre yukseklikte";
for (const [ad, hizala] of [["start", (s) => s.padEnd(KUTU)], ["end", (s) => s.padStart(KUTU)], ["center", (s) => s.padStart((KUTU + s.length) / 2).padEnd(KUTU)]]) {
  console.log(`${ad.padEnd(7)}|${hizala(satir)}|`);
}

kaynak (kacis dizileriyle):
"Kuzey   Yamac\n  Istasyonu\tolcum   verisi"

normal    sarma=true  -> "Kuzey Yamac Istasyonu olcum verisi"
nowrap    sarma=false -> "Kuzey Yamac Istasyonu olcum verisi"
pre       sarma=false -> "Kuzey   Yamac\n  Istasyonu\tolcum   verisi"
pre-wrap  sarma=true  -> "Kuzey   Yamac\n  Istasyonu\tolcum   verisi"
pre-line  sarma=true  -> "Kuzey Yamac\nIstasyonu olcum verisi"

--- text-transform: Turkce ozel durumu ---
kaynak            : istasyon ILIK ışık
uppercase (en)    : ISTASYON ILIK IŞIK
uppercase (tr)    : İSTASYON ILIK IŞIK
lowercase (en)    : istasyon ilik ışık
lowercase (tr)    : istasyon ılık ışık

--- text-indent ve hizalama etkisi (60 karakterlik kutu) ---
start  |Istasyon deniz seviyesinden 1840 metre yukseklikte          |
end    |          Istasyon deniz seviyesinden 1840 metre yukseklikte|
center |     Istasyon deniz seviyesinden 1840 metre yukseklikte     |

Çıktı iki ekseni ayırıyor: boşlukların birleştirilip birleştirilmediği ve satır bölünmesine izin verilip verilmediği.

normal — ardışık boşluklar tek boşluğa iner, satır sonları boşluk sayılır, satır kutuya göre bölünür. Kaynak metindeki üç boşluk ve sekme karakteri tek bir boşluğa dönüştü.

nowrap — aynı boşluk işlemesini yapar ama satır bölünmesine izin vermez. Metin kutudan taşar; taşma yönetimi dersinde gördüğümüz durum ortaya çıkar.

pre — hiçbir şey değiştirmez: boşluklar ve satır sonları olduğu gibi korunur, otomatik satır bölünmesi yapılmaz. pre ögesinin tarayıcı varsayılan biçemi budur.

pre-wrap — boşlukları ve satır sonlarını korur ama kutuya sığmayan satırları böler. Uzun satırlar taşırmadan gösterilmek istendiğinde pre yerine bu değer yazılır.

pre-line — boşlukları birleştirir ama satır sonlarını korur. Bir metin alanından gelen kullanıcı metnini paragraf yapısıyla göstermek için kullanılır.

Harf Dönüşümü Dile Bağlıdır

Çıktının ikinci bloğu, text-transform özelliğinin neden yalnızca görsel bir dönüşüm sayılamayacağını gösteriyor.

istasyon sözcüğü İngilizce kurallarla büyütüldüğünde ISTASYON, Türkçe kurallarla büyütüldüğünde İSTASYON oluyor. ILIK sözcüğü İngilizce kurallarla küçültüldüğünde ilik, Türkçe kurallarla ılık oluyor — iki farklı sözcük.

Sebep, Türkçe alfabesinde i ve ı harflerinin ayrı harfler olması ve büyük karşılıklarının İ ve I olmasıdır. Bilgisayarlar Nasıl Çalışır kursundaki kod noktası ayrımı burada anlam farkına dönüşür.

Bu, text-transform yazmanın belgedeki lang bildirimine bağlı olduğunu gösterir. Kök ögede lang="tr" bildirilmemiş bir belgede büyük harfe çevirme yanlış sonuç verebilir.

İkinci bir uyarı: dönüşüm yalnızca çizimde yapılır. Belgedeki metin değişmez; kopyalanan metin kaynaktaki hâliyle gelir ve ekran okuyucu kaynaktaki hâlini okur. Bir başlığın büyük harfle yazılması gerekiyorsa bu bir görsel karardır ve biçemde verilir; metnin kendisi kaynakta olağan yazımıyla durmalıdır.

Hizalama

text-align beş temel değer alır: start, end, center, justify ve fiziksel karşılıkları left ile right. Mantıksal değerler yazma yönüne uyar ve bu kursta kullanılan biçim odur.

Çıktının üçüncü bloğu üç hizalamayı sabit genişlikli bir kutuda gösteriyor. Karar üç ölçütle verilir.

Ortalama kısa metinlerde işler; uzun paragraflarda her satırın başlangıç noktası değiştiği için gözün satır başını bulması zorlaşır. Başlık ve kısa açıklama için uygun, gövde metni için değil.

İki yana yaslama (justify) sözcük aralıklarını genişleterek her satırı aynı uzunlukta yapar. Dar sütunlarda aralıklar aşırı genişler ve metnin içinde dikey beyaz şeritler oluşur. hyphens: auto ile birlikte kullanıldığında sonuç daha dengelidir, ama dar sütunlarda yine de sola yaslama tercih edilir.

Girinti (text-indent) paragraf başlarını içeri alır. Paragraflar arasında dikey boşluk varsa girinti gereksizdir; ikisi birlikte kullanıldığında paragraf ayrımı iki kez işaretlenmiş olur. Basılı metin geleneğinde girinti, boşluğun yerine geçer.

Metin Süslemesi

text-decoration bir kısayoldur ve dört açılımı ayarlar: -line (çizginin yeri), -color, -style, -thickness.

Bağlantıların altının çizili olması tarayıcı varsayılanından gelir ve bir görsel süs değildir: metin içindeki bir bağlantıyı yalnızca renkle işaretlemek, renk ayrımını algılamayan bir okuyucu için bağlantıyı görünmez kılar. Alt çizginin kaldırılması, yerine başka bir görsel ayırt edici konmadıkça yapılmamalıdır.

Alt çizginin okunabilirliği text-underline-offset ve text-decoration-skip-ink ile ayarlanır; ikincisi çizginin harflerin alta inen kısımlarını kesmemesini sağlar.

/* istasyon.css — 20. adım: metin biçimlendirme */
.olcum-cizelgesi th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--yazi-kucuk);
}

.olcum-ham-veri {
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  tab-size: 2;
}

.gozlem-notu { white-space: pre-line; }

main a {
  text-decoration-line: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

main a:hover { text-decoration-thickness: 2px; }

.olcum-ham-veri sınıfı, istasyondan gelen ham ölçüm kaydını gösterir: satır sonları ve hizalama boşlukları anlam taşır, bu yüzden korunur; pre yerine pre-wrap yazılması uzun satırların taşmasını değil bölünmesini sağlar.

Başlık hücrelerine verilen harf aralığı, büyük harfe çevrilmiş metinlerde yerleşik bir düzeltmedir: büyük harfler küçük harflere göre daha sıkışık görünür ve aralık açılmadığında okunması zorlaşır.

Özet

• Varsayılan boşluk işlemesinde ardışık boşluklar tek boşluğa indirgenir ve satır sonları boşluk sayılır; kaynak metnin girintilenebilir olması buna dayanır.
• white-space iki ekseni birden ayarlar: boşlukların birleştirilip birleştirilmediği ve satır bölünmesine izin verilip verilmediği. pre-wrap boşlukları korur ve satırı böler, pre-line boşlukları birleştirir ve satır sonlarını korur.
• text-transform dile bağlıdır; Türkçede i ve ı harflerinin ayrı büyük karşılıkları olduğu için lang bildirimi olmadan yanlış dönüşüm üretilebilir.
• Dönüşüm yalnızca çizimde yapılır; belgedeki metin değişmez ve kopyalandığında kaynaktaki hâliyle gelir.
• Bağlantıların alt çizgisi bir süs değil, renkten bağımsız bir ayırt edicidir; kaldırılacaksa yerine başka bir görsel işaret konur.

Sonraki Adım

Metin kararları tamamlandı. Kutuların arkasına henüz bakılmadı: bir kutunun arka planı yalnızca bir renk değil, konumlandırılabilir ve yinelenebilir bir görsel de olabilir. Sonraki ders arka plan katmanlarını, konumlandırma ve yineleme kurallarını ve arka planın hangi bölgeye kadar uzandığını ele alır.