A blogot Firefoxszal nézegetők számára tegnap óta (többnyire) helyes magyar sorvégi elválasztással jelennek meg a bejegyzések. Mindezt a CSS3 hyphens tulajdonsága teszi lehetővé, aminek a támogatása remélhetőleg hamarosan meg fog jelenni minden elterjedtebb böngészőben, a pillanatnyi lefedettség ugyanis elég sovány.

Magát az elválasztást jelenleg a Firefoxon (6.0-tól a -moz előtaggal) kívül az Internet Explorer 10 (-ms prefixszel) és a Safari (5.1+, -webkit prefixszel) böngészők támogatják (a Can I use kompatibilitási táblázata alapján), persze ezt úgy kell érteni, hogy ezek a böngészők képesek nyelvhelyes elválasztást eszközölni angol nyelvű szövegeken, ugyanakkor a többi nyelv támogatása amennyire üdvözlendő, annyira ritka is. Konkrét nyelvlistát csak a Firefoxhoz találtam az MDN vonatkozó cikkében, ez (és a gyakorlati próba) alapján egyelőre csak ezzel működik a magyar elválasztás.

Az elválasztás egyébként azért jó szolgáltatás, mert jelentősen csökkentheti a szövegtörzsben manifesztálódó káoszt: balra zárt szövegnél a sorok tényleges hossza jobban közelítheti az elméleti maximumot (ami itt a befoglaló elem szélessége), sorkizárásnál pedig megnő a sorok átlagos karakterszáma, ezáltal kevésbé lesz jellemző a riverek (és a rivert okozó, bántóan nagy szóközök) kialakulása; mindkét fejlemény sokat javít az olvashatóságon.

Gyakorlati alkalmazás

Az első és legfontosabb jó hírem, hogy semmit nem lehet veszíteni az elválasztás engedélyezésével: ha egy adott böngésző nem támogatja az elválasztást (egyáltalán nem vagy csak adott nyelv hiányzik a repertoárból), akkor nem változik semmi a szöveg megjelenésén. A második jó hírem, hogy a létező implementációk mindegyike van annyira intelligens, hogy egy adott nyelven írt szöveget meg sem próbál más nyelvhez tartozó elválasztási szabályok alapján elválasztani, kivéve, ha erre kényszerítjük. Olyat meg úgyse tennénk, ugye?

Ebből következik, hogy mindenképpen tudatnunk kell a böngészővel, hogy a weboldalunkon megjelenő szöveg milyen nyelven íródott, amit legcélravezetőbben a html elem lang attribútumának megadásával tehetünk meg.

Ha az oldalad készítésekor betartottad az alapvető dolgokat, akkor ez már eleve adott, buksisimi. Természetesen a fenti megoldás abban az esetben ajánlott, ha az oldalon túlnyomórészt magyar nyelvű szöveg olvasható és csak néha kerülnek elő más nyelven írt részletek például idézetek formájában (ekkor az idézetet tartalmazó elemnek szintén megadjuk a megfelelő lang attribútumot és készen is vagyunk).

Ezután azt kell megfontolnunk, hogy az oldalon megjelenő szövegek közül melyeket szeretnénk automatikusan elválasztani. A legegyszerűbb persze a teljes body-ra bekapcsolni, megnézni, hogy okoz-e valahol gondot, aztán az elválasztásból kihagyandó elemekre letiltani:

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

code, pre, abbr, kbd {
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
  }

Mindenki a lehető legjobban ki van szolgálva, betyárosan kimaxoltuk a progressive enhancement filozófiát.

Alternatív megoldás

Létezik az a szituáció, amikor az elválasztás nem lehetőség, hanem követelmény, ennélfogva nem támaszkodhatunk a foghíjas kompatibilitásra. A hyphenator, ami egy Javascriptben készített, számos nyelvet támogató, testreszabható elválasztómodul, ami kipróbálható bookmarkletként is. Az opciók között szerepel a számunkra felesleges nyelvek szótárainak elhagyása, megadható, hogy hány karakternél rövidebb szavak elválasztását mellőzze a szkript és még egy csomó egyéb jellemző, ráadásul böngészőfüggetlen.

Egyetlen komolyabb hátrányaként azt tudom felhozni, hogy a legnagyobb tömörítésű és csak a magyar nyelvet kezelő változata is 500 KB körüli fájlt eredményez, ami nyilván nem tényező, ha muszáj használni az elválasztást, de kicsit meredek ahhoz képest, hogy szeretünk mindent a végtelenségig optimalizálni. (Az opciók között beállítható, hogy a szótárat az első letöltés után helyben tárolja el a böngésző, ha képes rá, ezzel lehet spórolni.)

Észrevételek

Mindkét megoldásnál azt tapasztaltam, hogy elválasztási hibát nem vétenek (vagy az én ismereteim szűkösek). A CSS-ben is lehet valami megszorítás a minimális szóhosszra, három- és négybetűs szavakat például még nem láttam elválasztva. Az elválasztás során a szövegbe beszúrt kötőjelek egyébként nem okoznak gondot a szöveg kijelölésekor és másolásakor, csak azt emeli át a böngésző, ami az oldal kódjában szerepel.