Taşma Yönetimi

Bu konu boyunca kutular ölçüldü, dizildi ve üst üste bindirildi. Bir durum ele alınmadı: içerik kutusuna sığmadığında ne olur?

Durum kaçınılmazdır. Uzun bir istasyon adı dar bir hücreye, dokuz sütunlu bir ölçüm çizelgesi dar bir ekrana, sabit yükseklik verilmiş bir karta uzun bir açıklama sığmaz. Bu ders taşmanın ne olduğunu, seçeneklerin her birinin neyi kaybettirdiğini ve metin taşmasının neden ayrı bir mesele olduğunu ele alır.

Taşmanın Varsayılan Davranışı Görünürlüktür

Bir kutunun içeriği kutuya sığmadığında, varsayılan davranış içeriğin dışarı taşıp görünmesidir. Kırpılmaz, gizlenmez, kutuyu büyütmez.

Bu seçim bilinçlidir: kaybolan bir içerik, düzeni bozan bir içerikten daha kötüdür. Taşan metin görünür kalır ve okunabilir; sorun görülür ve düzeltilebilir.

// tasma.mjs — icerigin kutuya sigip sigmadigini ve overflow degerinin sonucunu hesaplar
function tasmaDurumu({ kutuEn, kutuBoy, icerikEn, icerikBoy, overflow }) {
  const yatay = Math.max(0, icerikEn - kutuEn);
  const dikey = Math.max(0, icerikBoy - kutuBoy);
  const sonuc = {
    "visible": { gorunur: true,  kaydirilabilir: false, kirpilir: false },
    "hidden":  { gorunur: false, kaydirilabilir: false, kirpilir: true  },
    "clip":    { gorunur: false, kaydirilabilir: false, kirpilir: true  },
    "scroll":  { gorunur: false, kaydirilabilir: true,  kirpilir: true  },
    "auto":    { gorunur: false, kaydirilabilir: yatay > 0 || dikey > 0, kirpilir: true },
  }[overflow];
  return { yatay, dikey, ...sonuc };
}

const kutu = { kutuEn: 320, kutuBoy: 120 };
const icerik = { icerikEn: 480, icerikBoy: 200 };
console.log(`kutu ${kutu.kutuEn}x${kutu.kutuBoy}, icerik ${icerik.icerikEn}x${icerik.icerikBoy}`);
for (const o of ["visible", "hidden", "clip", "scroll", "auto"]) {
  const r = tasmaDurumu({ ...kutu, ...icerik, overflow: o });
  console.log(`${o.padEnd(8)} tasma=${r.yatay}x${r.dikey}  disaridan gorunur=${String(r.gorunur).padEnd(5)} kaydirilabilir=${String(r.kaydirilabilir).padEnd(5)} kirpilir=${r.kirpilir}`);
}

console.log("\n--- sigan icerik ---");
for (const o of ["scroll", "auto"]) {
  const r = tasmaDurumu({ ...kutu, icerikEn: 300, icerikBoy: 100, overflow: o });
  console.log(`${o.padEnd(8)} tasma=${r.yatay}x${r.dikey}  kaydirilabilir=${r.kaydirilabilir}`);
}

console.log("\n--- uzun bir sozcugun satira sigmasi ---");
const sozcuk = "Kuzey-Yamac-Otomatik-Olcum-Istasyonu";
const KARAKTER_EN = 8;   // ornek bir yazi tipinde karakter genisligi
const kutuEn = 160;
const sigar = Math.floor(kutuEn / KARAKTER_EN);
console.log(`sozcuk ${sozcuk.length} karakter x ${KARAKTER_EN}px = ${sozcuk.length * KARAKTER_EN}px`);
console.log(`kutu ${kutuEn}px -> satira ${sigar} karakter sigar, tasma ${sozcuk.length * KARAKTER_EN - kutuEn}px`);
const parcalar = sozcuk.match(new RegExp(`.{1,${sigar}}`, "g"));
console.log("overflow-wrap: anywhere ile bolunme:");
for (const p of parcalar) console.log(`  |${p.padEnd(sigar)}|`);

kutu 320x120, icerik 480x200
visible  tasma=160x80  disaridan gorunur=true  kaydirilabilir=false kirpilir=false
hidden   tasma=160x80  disaridan gorunur=false kaydirilabilir=false kirpilir=true
clip     tasma=160x80  disaridan gorunur=false kaydirilabilir=false kirpilir=true
scroll   tasma=160x80  disaridan gorunur=false kaydirilabilir=true  kirpilir=true
auto     tasma=160x80  disaridan gorunur=false kaydirilabilir=true  kirpilir=true

--- sigan icerik ---
scroll   tasma=0x0  kaydirilabilir=true
auto     tasma=0x0  kaydirilabilir=false

--- uzun bir sozcugun satira sigmasi ---
sozcuk 36 karakter x 8px = 288px
kutu 160px -> satira 20 karakter sigar, tasma 128px
overflow-wrap: anywhere ile bolunme:
  |Kuzey-Yamac-Otomatik|
  |-Olcum-Istasyonu    |

Beş Değerin Karşılaştırması

visible — başlangıç değeridir. İçerik taşar ve görünür kalır. Kutunun kendisi büyümez; komşuları taşmadan haberdar değildir ve üstüne çizilebilir.

hidden — taşan kısım kırpılır ve erişilemez olur. Kaydırma çubuğu gösterilmez ama kutu programatik olarak kaydırılabilir bir kutudur; odaklanan bir öge görünür alana getirilebilir.

clip — hidden gibi kırpar ama kutuyu kaydırılabilir yapmaz. Kırpma kesindir.

scroll — taşan kısım kırpılır ve kaydırma çubuğu her zaman gösterilir.

auto — kırpar ve kaydırma çubuğunu yalnızca gerektiğinde gösterir.

Çıktının ikinci bloğu bu son iki değerin farkını veriyor: içerik kutuya sığdığında scroll hâlâ kaydırılabilir bir kutu üretiyor, auto üretmiyor. Bazı ortamlarda kaydırma çubuğu yer kaplar; scroll yazmak bu durumda içerik sığsa bile bir şerit ayırır ve kutu daralır. Kaydırma gereğinde ortaya çıksın isteniyorsa auto yazılır.

Kırpmanın Bedeli

overflow: hidden yazmak sık başvurulan bir çözümdür ve iki farklı amaçla kullanılır. İkisini ayırmak gerekir.

Birinci kullanım kasıtlı kırpmadır: bir görselin kutuya oturması, bir dekoratif şeklin taşmaması. Burada kırpılan şey bilgi taşımaz.

İkinci kullanım taşma sorununu görünmez kılmaktır: içerik sığmıyor ve gizlenerek sorun ortadan kaldırılmış gibi yapılıyor. Bu, sorunu çözmez; kullanıcıdan saklar. Kırpılan metin ekran okuyucuya okunmaya devam edebilir ama görsel olarak ulaşılamaz; klavyeyle gezen bir kullanıcı odaklanabilir ama göremez.

Ayrım şu soruyla yapılır: kırpılan şeyin kaybolması kabul edilebilir mi? Yanıt hayırsa hidden değil, auto yazılır ya da kutunun ölçüsü esnetilir.

Bir yan etki daha vardır ve önceki derslerde iki kez karşımıza çıktı: overflow değerinin visible dışında olması kutuyu bağımsız akış kökü yapar. Kaydırılmış çocuklar yüksekliğe katılır, dış boşluk çökmesi kutunun sınırında durur. Bu, overflow: hidden yazmanın bazen ilgisiz görünen bir yerleşim değişikliği yaratmasının sebebidir.

İki Eksen Ayrı Ayrı

overflow bir kısayoldur; overflow-x ve overflow-y açılımlarını ayarlar. Mantıksal karşılıkları overflow-inline ve overflow-block’tur.

İki eksene farklı değer verilebilir ama bir kısıt vardır: bir eksen visible iken diğeri kırpan bir değer alırsa, visible olan eksen auto gibi işlenir. İki eksen bağımsız değildir; bir yönde kırpan bir kutu, diğer yönde taşan içeriği görünür bırakamaz.

Yatay kaydırma özel olarak ele alınmalıdır. Geniş bir ölçüm çizelgesini dar bir ekranda göstermenin yolu, çizelgeyi yatay kaydırılabilir bir kutuya almaktır. Böyle bir kutu klavyeyle de erişilebilir olmalıdır; kaydırılabilir bir bölgeye tabindex="0" verilmesi ve erişilebilir bir adla adlandırılması bunun karşılığıdır.

Metin Taşması Ayrı Bir Mekanizmadır

Çıktının üçüncü bloğu farklı bir soruna işaret ediyor. Otuz altı karakterlik bir sözcük 160 birimlik bir kutuya sığmıyor ve 128 birim taşıyor. Bu, overflow ile çözülecek bir sorun değildir — sözcüğün bölünmesi gerekir.

Satır bölme kuralları ayrı özelliklerle yönetilir:

overflow-wrap: anywhere — sığmayan bir sözcüğü herhangi bir noktadan böler. Çıktının son satırlarında bölünme bu kurala göre gösterildi. break-word değeri benzer iş görür ama kutunun en küçük içerik ölçüsü hesabına katılmaz.

word-break: break-all — sözcükleri sığmasalar da sığsalar da böler; sözcük bütünlüğünü gözetmez.

hyphens: auto — belgenin diline göre heceleme yapar ve bölünme noktasına tire koyar. lang özniteliğinin bildirilmiş olmasını gerektirir; Web’in Temelleri ve HTML kursunda kök ögeye yazılan lang="tr" bildiriminin bir karşılığı da budur.

white-space: nowrap — tersini yapar: satır bölünmesini büsbütün engeller. Bu, taşmayı önlemez, garantiler.

text-overflow: ellipsis — taşan metnin sonuna üç nokta koyar. Yalnız çalışmaz; kutunun kırpıyor ve tek satır olması gerekir:

.istasyon-adi {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Üç bildirim birlikte yazılır. Kırpılan metnin kaybolduğunu unutmamak gerekir: tam ad bir title özniteliğinde ya da başka bir yerde erişilebilir kalmalıdır.

/* istasyon.css — 15. adım: taşma */
.cizelge-sarmalayici {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.olcum-cizelgesi { min-width: 40rem; }

.kart .aciklama {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.konum-gorseli img { overflow: clip; }

.cizelge-sarmalayici çizelgeyi dar ekranda yatay kaydırılabilir yapar; min-width bildirimi çizelgenin sıkışıp okunmaz hâle gelmesini önler. İkisi birlikte, çizelgeyi küçültmek yerine kaydırmayı seçmiş olur.

overscroll-behavior-x: contain, kutunun kaydırması bittiğinde sayfanın kaymasını engeller — kaydırma zincirinin o kutuda durmasını sağlar.

Özet

• Taşmanın varsayılan davranışı görünürlüktür: içerik kutunun dışına çıkar ve okunabilir kalır. Bu, kaybolan içeriğin bozulan düzenden kötü olduğu kabulüne dayanır.
• hidden ve clip kırpar, scroll her zaman kaydırma çubuğu gösterir, auto yalnızca gerektiğinde gösterir; içerik sığdığında scroll yine kaydırılabilir bir kutu üretir.
• overflow değerinin visible dışında olması kutuyu bağımsız akış kökü yapar; kaydırılmış çocukları içerir ve dış boşluk çökmesini sınırında durdurur.
• İki eksen bağımsız değildir: bir eksen kırparken diğeri visible kalamaz, auto gibi işlenir.
• Sığmayan bir sözcük overflow ile değil, satır bölme özellikleriyle çözülür; text-overflow: ellipsis yalnız çalışmaz, kırpma ve tek satır bildirimleriyle birlikte yazılır.

Sonraki Adım

Bu konu kutuların ölçüsünü, dizilişini ve sınırlarını kurdu. Ortaya çıkan sayfa yapılı ama renksiz: bütün kararlar geometriye ilişkindi. Sonraki konu görsel özellikleri ele alır ve ilk soru rengin kendisidir — bir rengin nasıl yazıldığı, hangi uzayda tanımlandığı ve iki renk arasındaki kontrastın nasıl bir sayıya dönüştüğü.