I learned HTML in high school and then graduated to CSS.
It’s a great way to exercise my mind. But it’s frustrating as hell.—Chris Bosh

Elválasztás CSS-sel

Kedves látogató, nagyjából fél évtizede láthattad, hogy a Feltételes elválasztójel oldalon mennyire lelkesedtem egy véletlenül talált szövegelválasztó algoritmus miatt, ám a világ folyamatosan fejlődik. Azóta az a technika elavult, a használatát még a készítője sem ajánlja. Úgy látszik, a böngészők fejlesztői már nem csak kevesek hóbortjaként kezelik ezt a kérdést. Rájöttek, hogy a hagyományos nyomdatechnika szerepét rohamosan átveszi a digitalizálás, ami nem nélkülözheti a szövegelválasztást. Ezért egy jobb megoldást választottak: ma már beépítik a böngészőbe a programcsomagot, ami a CSS stílusleíró nyelv segítségével kelthető életre.

Tennivalók

Egyes HTML-elemek jellemzője értékeként – szabványos betűpárral – lehet megadni, hogy az elválasztás melyik (mely) nyelv(ek) szabályait kövesse. Ilyen elem lehet például a div, a p vagy a strong stb., de akár a szöveg bármelyik tartományát átfogó span is, például így: <h3 lang="en">, <em lang="fr">.

A CSS-ben három, elválasztással összefüggő tömb definiálható, melyekre bármelyik HTML-elem azonosítója vagy osztálya hivatkozhat. E kérdéskörben figyelemreméltó információkat tartalmaz ez a hiánypótló eszmefuttatás. Bár nem valami új keletű – utoljára 2015-ben fris­sí­tet­ték –, de körültekintő, precíz, és az intelmei ma is érvényesek. Az elméletet jól szemlélteti a Mozilla fejlesztőcsapata által közzétett specifikáció, amely akár W3C-ajánlásnak is beillene.

A CSS-kódban a -webkit a Safari, a -moz a Mozilla Firefox, az -ms az Internet Explorer és az -o az Opera böngészőhöz rendelt előtag. Az utolsó, előtag nélküli opció az összes többi böngésző számára elhelyezett utalás.
Automatikus elválasztás:
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
Nincs elválasztás:
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
-o-hyphens: none;
hyphens: none;
Kivétel:
-webkit-hyphens: manual;
-moz-hyphens: manual;
-ms-hyphens: manual;
-o-hyphens: manual;
hyphens: manual;
Ez utóbbi utasításcsoport alkalmazása esetén a szöveg betűi közé (ahol a szavak elméletileg elválaszthatók) lágy vagy rejtett elválasztójelet kell beilleszteni. E jel különlegessége, hogy csak sor végén, tényleges elválasztáskor jelenik meg. A tulajdonság hatására a megjelölt HTML-elem szövegében – a megadott kivétel(ek)en kívül – sehol máshol nem történik elválasztás.
A javasolt eljárás

A W3C ajánlása szerint az elsődleges nyelvet minden egyes oldalon rögtön a dokumentumtípus megadása után kell deklarálni:

<!doctype html>
<html lang="hu">

Így a CSS-kódba a html-szelektor kerül:

html {
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   -o-hyphens: auto;
   hyphens: auto;
}

E két kiegészítéssel a teljes weboldalon érvényesül a magyar elválasztás. Az esetleges további nyelveket a megfelelő HTML-elemekben kell előírni. Ilyen egyszerű. Íme két konkrét eset:

Magyar elválasztás: <div>
Angol elválasztás: <div lang="en">
Megállapította: 1999. évi XLIV. törvény 31. §. Hatályos: 1999. VIII. 1-től. Az ezt követően elkövetett fegyelmi vétségek miatt indult eljárásokban kell alkalmazni.
Megállapította: 1999. évi XLIV. törvény 31. §. Hatályos: 1999. VIII. 1-től. Az ezt követően elkövetett fegyelmi vétségek miatt indult eljárásokban kell alkalmazni.
Példa: 1991. évi XLI. törvény a közjegyzőkről; pár előfordulás: 70. § *; 71. § (4) *; 72. § (2) *
A 2012. évi CCXXIII. törvény 318. § (1) szerinti szöveggel lép hatályba.
A 2012. évi CCXXIII. törvény 318. § (1) szerinti szöveggel lép hatályba.
Példa: 2012. évi C. törvény a Büntető Törvénykönyvről; pár előfordulás: 6. § (2) *; 403. § (4) *
A példák valós tartalma csak hűen utánozza az interneten látható állapotot (íme az alsóról készült kép).
Szegény vesztesek

Tudományos kutatások már régen kimutatták, hogy elválasztással jelentősen javítható az olvashatóság, a szövegértés – különösen nagyobb mennyiségű, sorkizárt szöveg esetén (amikor a sorok mindkét margóig végigérnek). Idézet egy egyetemi segédletből (forrás): „Nagyon fontos, hogy a tömbös szedés minden esetben igényli az elválasztást…” (Fura módon a szerző nem hallgatott a saját intelmére: legalábbis mókás, hogy harminckét A4-es oldalon mindössze egyetlenegy szót választott el.)

A Mozilla fejlesztőcsapata által összeállított táblázat azt mutatja, hogy 2018 elején a magyar elválasztást a számítógépen futó Mozilla Firefox és Safari biztosan támogatta, az Internet Explorer viszont nem. A táblázat készítői más, idetartozó esetet nem teszteltek. Ez persze, nem jelenti azt, hogy nincsenek más böngészők (esetleg további eszközökön is), amelyek ne pártolnák a magyar elválasztást. A Használhatom? hálóhely CSS-elválasztás oldalán jól látszik, hogy nincs olyan – magára valamit is adó – számítógépes böngészőfejlesztő csapat, amely en bloc hanyagolná a fejlesztés e fontos területét. Ugyanez igaz az okostelefon-böngészők szoftvereseinek többségére is, ám a fenti ábra elég kiábrándító Google Chrome-ban (lásd alább, a bal oldalon). A jobb oldali ábrát Chrome- és Explorer-használóknak mutatom: ettől az élménytől fosztja meg őket a szoftverük…

… így a böngészőrivalizálás vesztesei egyszerűen nem érthetik, hogy ez az oldal miről szól. Ez nagyon szomorú… Bár a világhálón nemigen találni böngészőhasználatról szóló – különösen magyar felhasználókra vonatkozó – friss statisztikát, csekély vigaszt nyújt, hogy a hálóhelyemre látogatók között általában több a Firefox-rajongó, mint a Chrome- és Explorer-használók száma együttvéve.
Technikai adalék
Készült:
Utolsó módosítás:
Korszerűsítés*:
Frissítés**:
2019. 02. 21.
2019. 03. 06.
2019. 10. 12.
*Adatvédelmi fejlesztés miatt végrehajtott kisebb kiigazítások.
**A Google-hirdető és a Google-látogatáselemző legutóbbi előírásait érvényesítő változtatások.
© Tuna András, 2006–2023