--- title: 'Metin Biçimlendirme' source: 'https://academia.sh/tr/kurslar/css-temelleri/metin-bicimlendirme' course: 'CSS ile Görsel Sunum' language: tr updated: '2026-08-17T18:09:19+00:00' license: 'CC BY-SA 4.0' --- # Metin Biçimlendirme Boşluk işleme kuralları, hizalama ve girinti, büyük–küçük harf dönüşümünün dile bağlılığı ve alt çizgi süslemesinin denetimi. 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. ```js // 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. ```css /* 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.