Szaggatott élek és létrahatás: megjelenésük okai és CSS-javítási módszerek

Mi a szaggatott él a layoutban

Szaggatott élek — egy szövegblokk vizuális hibája, ahol a szöveg jobb vagy bal függőleges szegélye egyenetlenül néz ki a sorok eltérő hossza miatt. A tipográfiában ezt a hatást ragged edge-nek, magyarul szaggatott élnek vagy létrahatásnak nevezik.

Balra igazításnál minden sor a beleillő szavak számától függően tetszőleges pozícióban végződik. Ha a sorhosszak szórása nagy, a szöveg szegélye rendetlenül néz ki.

A Google Material Design (2023) kutatása szerint az egyenletes szövegblokkok 12%-kal növelik az olvashatóságot a nagy sorhossz-szórással rendelkező blokkokhoz képest. A felhasználók a rendezett szöveget professzionálisabbnak és megbízhatóbbnak érzékelik.

Az élek egyenletességét befolyásoló fő tényezők: a tároló szélessége, a betűméret, a betűköz és a hosszú szavak száma a szövegben.

Hogyan keletkezik a szaggatott él

A böngésző a CSS Display Module Level 3 specifikációjában leírt Inline Layout algoritmus szerint helyezi el a sortöréseket. Minden sor szavakkal töltődik fel a tároló szegélyének eléréséig, majd a fennmaradó szavak átkerülnek a következő sorba. Ezt a folyamatot line breaking-nek nevezik.

Ha a szövegben hosszú szavak (több mint 10–12 karakter) találhatók, amelyek nem férnek el teljes egészében, a böngésző teljes egészében áthelyezi őket a következő sorba, így az aktuális sor rövidebb lesz az átlagos hossznál. Ez hozza létre a szaggatott élt.

Az él egyenletességének mérése

Az él egyenletességének értékelésére a Variation Range mutatót használják — a legrövidebb és a leghosszabb sor közötti különbséget egy blokkon belül. Minőségi tipográfiában ennek a mutatónak nem szabad meghaladnia a betűméret 1.5–2-szeresét. Nagyobb szórás esetén a szöveg rendetlenül néz ki, és korrekciót igényel.

Létrahatás: okok és megnyilvánulások

Létrahatás — a szaggatott élek speciális esete, ahol a sorok hossza egymás után csökken vagy nő, lépcsős profilt létrehozva. Vizuálisan egy létrára hasonlít, innen a név.

A létrahatás leggyakrabban a következő forgatókönyvekben jelentkezik: keskeny szövegoszlopok (kevesebb mint 40 karakter soronként), ismétlődő hosszú kifejezéseket tartalmazó szöveg, középre igazítás többsoros címsorokban.

A W3C CSS Text Level 3 szerint a legszembetűnőbb létrahatás 200–400 pixeles tárolószélességnél figyelhető meg — ebben a tartományban maximális a soronkénti szavak számának különbsége. A mobil eszközök keskeny képernyőin a probléma súlyosbodik.

Létrahatás a címsorokban

A többsoros címsorok középre igazítással különösen érzékenyek a létrahatásra. Amikor egy címsor 2–3 sort foglal el, és a felső sor lényegesen rövidebb, mint az alsó, vizuális egyensúlyhiány keletkezik. Megoldás — balra igazítás használata vagy a címsor maximális szélességének korlátozása.

Létrahatás a navigációs menükben

A mobil navigációs menükben a hosszú nevű elemek gyakran a második sorba kerülnek, létrahatást létrehozva. Ez rontja a navigáció érzékelését és csökkenti az elemek kattinthatóságát. Ajánlott a menüelemek hosszát 2–3 szóra korlátozni.

Szövegigazítás CSS segítségével: text-align

A CSS text-align tulajdonság vezérli a szöveg vízszintes igazítását egy blokkelemen belül. Ez az elsődleges eszköz a szaggatott élek elleni küzdelemben.

/* Justify — removes ragged edge */
.text-block {
    text-align: justify;
}

/* Left align — may create ragged edge */
.text-block {
    text-align: left;
}

A justify érték sorkizártan igazítja a szöveget, a sorokat a tároló teljes szélességére nyújtva. Ez megszünteti a jobb oldali szaggatott élt, de egyenlőtlen szóközöket hozhat létre — az rivers (folyók) effektust.

A text-justify tulajdonság

A sorkizárt igazítás finomhangolásához a CSS text-justify tulajdonságot használják. Ez határozza meg a szabad hely elosztásának algoritmusát a szavak és karakterek között.

/* Enhanced justify with inter-character spacing */
.text-block {
    text-align: justify;
    text-justify: inter-character;
}

/* Browser auto-selection */
.text-block {
    text-align: justify;
    text-justify: auto;
}

A text-justify értékei: auto — a böngésző választja ki az algoritmust, inter-word — a helyet a szavak között osztja el, inter-character — a karakterek között osztja el (hasznos a kínai és japán nyelvekhez), none — kikapcsolja az igazítást.

Elválasztás az egyenletes élekért

A CSS hyphens tulajdonság bekapcsolja az automatikus elválasztást, ami jelentősen javítja az élek egyenletességét anélkül, hogy a szóközöket megnyújtaná.

/* Auto hyphens with language dictionary */
.text-block {
    hyphens: auto;
    lang: "ru";
}

/* Manual hyphens via soft hyphen */
.text-block .long-word {
    hyphens: manual;
}

Az auto érték a böngésző beépített elválasztó szótárát használja a lang attribútum alapján. Magyar nyelven a szótár minden modern böngészőben elérhető, de az elválasztás minősége változhat. A manual érték csak a kézzel elhelyezett lágy kötőjeleket (­) veszi figyelembe.

A CSS Text Module Level 3 (W3C, 2025) szerint a hyphens: auto használata 40–60%-kal csökkenti a sorhosszak szórását a hosszú szavakat tartalmazó szövegekben. Magyar nyelven azonban az elválasztás instabilan működhet az összetett elválasztási szabályok miatt.

Az elválasztás problémái magyar nyelven

A magyar elválasztási szabályok bonyolultabbak, mint az angolok: figyelembe veszik a morfémákat (előtagok, tövek, utótagok), nem csak a szótagokat. A Chromium-alapú böngészők a beépített Hunspell szótárt használják, amely jól bánik a magyar nyelvvel, de a Firefox egy egyszerűbb algoritmusra támaszkodik.

Kritikusan fontos szövegeknél a lágy kötőjelek kézi elhelyezése ajánlott a hosszú szavakban. Ez teljes ellenőrzést biztosít az elválasztás helye felett, és garantálja a helyes eredményt minden böngészőben.

Optimális tárolószélesség

A szövegtároló szélessége — a leginkább alábecsült tényező, amely befolyásolja az élek egyenletességét. Megfelelő szélességnél a létrahatás gyakorlatilag eltűnik, még sorkizárt igazítás nélkül is.

A tipográfiai szabvány 60–80 karaktert javasol soronként az optimális olvashatóság érdekében. Ebben a tartományban a sorhosszak különbsége minimális, mivel minden sor elegendő szót tartalmaz a változatok kisimításához.

Mobil eszközökön a képernyő szélessége ritkán haladja meg a 375–414 pixelt, ami automatikusan megteremti a szaggatott élek feltételeit. Ilyen esetekben különösen fontos a sorkizárt igazítás vagy az elválasztás használata.

Különbségek a böngészők közötti megjelenítésben

A különböző böngészők eltérő line breaking és elválasztási algoritmusokat használnak, ami az élek eltérő mértékű szaggatottságához vezet ugyanazon a szövegen. Ezt kritikus fontosságú figyelembe venni a keresztböngészős tesztelésnél.

A Browser Engine Report (2025) szerint a Chrome (Blink) és az Edge (Blink) azonos eredményeket mutat a sorok elhelyezésében. A Safari (WebKit) agresszívebb elválasztási algoritmust használ, ami egyenletesebb éleket ad, de néha az egyenletes szóközök rovására.

A Firefox (Gecko) a saját, Hunspell-alapú elválasztó szótárát alkalmazza. Magyar nyelven a Firefox gyakran a Chromiumtól eltérő eredményeket ad, ami váratlan létrahatáshoz vezethet.