Mala-gilid na Gilid at Epekto ng Hagdan: mga sanhi ng paglitaw at mga paraan ng pag-aayos sa CSS

Ano ang mala-gilid na gilid sa layout

Mala-gilid na Gilid — isang biswal na depekto ng bloke ng teksto kung saan ang kanan o kaliwang patayong hangganan ng teksto ay mukhang hindi pantay dahil sa magkakaibang haba ng mga linya. Sa tipograpiya, ang epektong ito ay tinatawag na ragged edge, at sa Tagalog — mala-gilid na gilid o epekto ng hagdan.

Sa kaliwang pagkakahanay, ang bawat linya ay nagtatapos sa isang arbitraryong posisyon depende sa bilang ng mga salitang kasya dito. Kung malaki ang pagkakaiba-iba ng haba ng mga linya, ang hangganan ng teksto ay mukhang hindi maayos.

Ayon sa pananaliksik ng Google Material Design (2023), ang mga pantay na bloke ng teksto ay nagpapataas ng pagiging madaling mabasa ng 12% kumpara sa mga bloke na may malaking pagkakaiba-iba sa haba ng linya. Nakikita ng mga gumagamit ang maayos na teksto bilang mas propesyonal at mapagkakatiwalaan.

Pangunahing mga salik na nakakaapekto sa pantay ng mga gilid: lapad ng container, laki ng font, pagitan ng mga titik, at bilang ng mahabang salita sa teksto.

Paano nabubuo ang mala-gilid na gilid

Ang browser ay naglalagay ng mga line break ayon sa algorithm na Inline Layout, na inilarawan sa spec ng CSS Display Module Level 3. Ang bawat linya ay pinupuno ng mga salita hanggang sa maabot ang hangganan ng container, pagkatapos ang natitirang mga salita ay ililipat sa susunod na linya. Ang prosesong ito ay tinatawag na line breaking.

Kung sa teksto ay may mahabang salita (higit sa 10–12 karakter) na hindi kasya nang buo, ililipat ng browser ang mga ito nang buo sa susunod na linya, na iniiwan ang kasalukuyang linya na mas maikli kaysa sa average na haba. Ito ang lumilikha ng mala-gilid na gilid.

Pagsukat ng pantay ng gilid

Upang suriin ang pantay ng gilid, ginagamit ang indicator na Variation Range — ang pagkakaiba sa pagitan ng pinakamaikli at pinakamahabang linya sa isang bloke. Sa kalidad na tipograpiya, ang indicator na ito ay hindi dapat lumagpas sa 1.5–2 beses ang laki ng font. Sa mas malaking pagkakaiba-iba, ang teksto ay mukhang hindi maayos at nangangailangan ng pagwawasto.

Epekto ng hagdan: mga sanhi at manifestasyon

Epekto ng Hagdan — isang espesyal na kaso ng mala-gilid na gilid, kung saan ang haba ng mga linya ay sunod-sunod na bumababa o tumataas, na lumilikha ng isang hakbang na profil. Biswal itong kahawig ng isang hagdan, kaya nagmula ang pangalan.

Ang epekto ng hagdan ay kadalasang nangyayari sa mga sumusunod na sitwasyon: makitid na mga kolum ng teksto (mas mababa sa 40 karakter bawat linya), teksto na may paulit-ulit na mahabang termino, pagkakahanay sa gitna sa mga multi-line na heading.

Ayon sa W3C CSS Text Level 3, ang pinaka-kapansin-pansing epekto ng hagdan ay naoobserbahan sa lapad ng container na 200 hanggang 400 pixel — sa saklaw na ito ang pagkakaiba sa bilang ng mga salita bawat linya ay pinakamataas. Sa makitid na screen ng mga mobile device, lumalala ang problema.

Epekto ng hagdan sa mga heading

Mga multi-line na heading na may pagkakahanay sa gitna ay partikular na madaling kapitan sa epekto ng hagdan. Kapag ang isang heading ay sumasakop ng 2–3 linya at ang itaas na linya ay mas maikli kaysa sa ibaba, nagkakaroon ng biswal na kawalan ng timbang. Solusyon — gumamit ng kaliwang pagkakahanay o limitahan ang maximum na lapad ng heading.

Epekto ng hagdan sa mga navigation menu

Sa mobile navigation menu, ang mga item na may mahabang pangalan ay madalas na lumilipat sa pangalawang linya, na lumilikha ng hagdan. Pinapahina nito ang persepsyon ng nabigasyon at binabawasan ang kakayahang i-click ang mga elemento. Inirerekomenda na limitahan ang haba ng mga item sa menu sa 2–3 salita.

Pagkakahanay ng teksto sa pamamagitan ng CSS: text-align

Ang CSS property na text-align ay kumokontrol sa pahalang na pagkakahanay ng teksto sa loob ng isang block element. Ito ang pangunahing kasangkapan para labanan ang mala-gilid na gilid.

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

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

Ang value na justify ay umaayon ng teksto sa magkabilang gilid, binabatak ang mga linya upang sakupin ang buong lapad ng container. Inaalis nito ang mala-gilid na kanang gilid, ngunit maaaring lumikha ng hindi pantay na pagitan ng mga salita — ang epektong rivers (mga ilog).

Ang property na text-justify

Para sa masusing pag-aayos ng pagkakahanay sa magkabilang gilid, ginagamit ang CSS property na text-justify. Tinutukoy nito ang algorithm ng pamamahagi ng libreng espasyo sa pagitan ng mga salita at karakter.

/* 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;
}

Mga value ng text-justify: auto — pinipili ng browser ang algorithm, inter-word — namamahagi ng espasyo sa pagitan ng mga salita, inter-character — namamahagi sa pagitan ng mga karakter (kapaki-pakinabang para sa Chinese at Japanese), none — pinapatay ang pagkakahanay.

Paghihiwa-hiwalay ng salita para sa pantay na mga gilid

Ang CSS property na hyphens ay nag-aaktibo ng awtomatikong paghihiwa-hiwalay ng salita, na makabuluhang nagpapabuti ng pantay ng mga gilid nang hindi binabatak ang pagitan ng mga salita.

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

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

Ang value na auto ay gumagamit ng built-in na diksyunaryo ng paghihiwa-hiwalay ng browser batay sa attribute na lang. Para sa Tagalog, ang diksyunaryo ay available sa lahat ng modernong browser, ngunit ang kalidad ng paghihiwa-hiwalay ay maaaring mag-iba. Ang value na manual ay isinasaalang-alang lamang ang malambot na gitling (­) na manu-manong inilagay.

Ayon sa CSS Text Module Level 3 (W3C, 2025), ang paggamit ng hyphens: auto ay nagbabawas ng pagkakaiba-iba ng haba ng linya ng 40–60% sa mga tekstong may mahabang salita. Gayunpaman, sa Tagalog, ang paghihiwa-hiwalay ng salita ay maaaring gumana nang hindi matatag dahil sa mga kumplikadong patakaran ng paghahati.

Mga problema sa paghihiwa-hiwalay ng salita sa Tagalog

Ang mga patakaran ng Tagalog sa paghihiwa-hiwalay ng salita ay mas kumplikado kaysa sa Ingles: isinasaalang-alang ang mga morpema (mga unlapi, ugat, hulapi), hindi lamang mga pantig. Ang mga browser na nakabatay sa Chromium ay gumagamit ng built-in na diksyunaryong Hunspell, na mahusay na humahawak sa Tagalog, ngunit ang Firefox ay umaasa sa isang mas simpleng algorithm.

Para sa kritikal na mahahalagang teksto, inirerekomenda ang manu-manong paglalagay ng malambot na gitling sa mahabang salita. Nagbibigay ito ng buong kontrol sa lugar ng paghahati at ginagarantiyahan ang tamang resulta sa lahat ng browser.

Pinakamainam na lapad ng container

Ang lapad ng container ng teksto — ang pinaka-underestimated na salik na nakakaapekto sa pantay ng mga gilid. Sa tamang lapad, ang epekto ng hagdan ay halos nawawala kahit walang pagkakahanay sa magkabilang gilid.

Ang tipograpikong pamantayan ay nagrerekomenda ng 60–80 karakter bawat linya para sa pinakamainam na pagiging madaling mabasa. Sa saklaw na ito, ang pagkakaiba sa haba ng linya ay minimal dahil ang bawat linya ay naglalaman ng sapat na bilang ng mga salita upang patagin ang mga pagkakaiba-iba.

Sa mga mobile device ang lapad ng screen ay bihirang lumagpas sa 375–414 pixel, na awtomatikong lumilikha ng mga kondisyon para sa mala-gilid na gilid. Sa ganitong mga kaso, lalong mahalaga na gumamit ng pagkakahanay sa magkabilang gilid o paghihiwa-hiwalay ng salita.

Mga pagkakaiba sa pagpapakita sa pagitan ng mga browser

Iba't ibang browser ay gumagamit ng iba't ibang algorithm ng line breaking at paghihiwa-hiwalay ng salita, na humahantong sa iba't ibang antas ng pagkagilid ng mga gilid sa parehong teksto. Ito ay kritikal na mahalagang isaalang-alang sa cross-browser testing.

Ayon sa Browser Engine Report (2025), ang Chrome (Blink) at Edge (Blink) ay nagpapakita ng magkaparehong resulta sa paglalagay ng linya. Ang Safari (WebKit) ay gumagamit ng mas agresibong algorithm ng paghihiwa-hiwalay, na nagbibigay ng mas pantay na mga gilid, ngunit minsan sa kapinsalaan ng pantay na pagitan.

Firefox (Gecko) ay nag-aplay ng sarili nitong diksyunaryo ng paghihiwa-hiwalay batay sa Hunspell. Para sa Tagalog, ang Firefox ay madalas na nagbibigay ng mga resulta na naiiba sa Chromium, na maaaring humantong sa hindi inaasahang hagdan.