„Elválaszthatatlanok” – mondjuk a jó barátokra. És örülünk. „Elválaszthatatlanok” – mondjuk a weboldalakon megjelenő szavakra is. És nem örülünk.
Az ideális világban a böngészők képesek lennének – a szövegszerkesztő programokhoz hasonlóan – automatikusan elválasztani a szavakat. Így nem lenne probléma a szokatlanul hosszú kifejezések megjelenítésével a keskeny kijelzőkön. Webfejlesztőként pedig engedhetnénk az ügyfelek azon kérésének, hogy a szöveg sorkizártan jelenjen meg az oldalon.
– Le vagy maradva! Ez az „ideális világ” már itt van! – jegyezhetné meg a tájékozottabb olvasó a hyphenation: auto CSS szabályra gondolva.
Azonban a kicsit még tájékozottabb olvasó azt is tudja, hogy az így beállított elválasztás egyfelől nyelvfüggő (a lang attribútum értékétől függ), másfelől a böngésző-támogatottsága elég hiányos. Magyar nyelvünket pl. csak a Firefox és a Safari(!) kezeli. A jó ideje legnépszerűbb Chrome pedig egyáltalán nem tud semmilyen nyelven sem elválasztani!
És ha mégis kell az elválasztás? Van megoldás!
Persze, hogy van megoldás! Csupán a kesergés kedvéért nem írnék bejegyzést! Aki automatizmust szeretne megpróbálkozhat pl. a Hyphenopoly JS polyfill használatával (én nem próbáltam). És akad másik út is. Igaz nem olyan kényelmes mintha a böngésző intézné, nekünk kell megdolgozni érte. De működik!
A „titok” nyitja az ún. „soft hyphen” karakter, amit az elválasztás helyén kell a hosszú szavakba beszúrni. Ha van elég hely, nem történik semmi különös. Viszont ha nincs, akkor ott törik meg a szó, ahova a karaktert tettük és az elválasztás jel is megjelenik. Így:
Drupal, az óvatos
Ha HTML-t – vagy pl. Markdown-t – szerkesztünk, nem okozhat gondot a ­ entitás beillesztése. Azonban ha valamilyen CMS-sel dolgozunk, meggyűlhet vele a bajunk. Például a Drupal – biztonsági okokból – nem engedi a címekben HTML kód használatát (sem). Ha megpróbáljuk a ­-t beszúrni, akkor az meg fog jelenni a szóban a látogatóknak is, valahogy így: Meg­szent­ség…
Szerencsére elkeseredni továbbra sem kell. Annyi csak a teendőnk, hogy a soft hyphen-eket HTML kód helyett a használt operációs rendszernek megfelelően illesszük be a szóba. Ehhez
- Windowson lenyomva kell tartani az Alt billentyűt és beírni a 0173 számokat,
- macOS-en a billentyűzet beállításoknál található „Emoji and Symbols” paletta „Punctuation” szekciójából lehet kiválasztani a soft hyphen-t és dupla kattintással beszúrni.
A beszúrt karakterek ebben az esetben nem fognak látszani. De ott lesznek és szükség esetén akcióba lépnek!
Oszd meg ismerőseiddel!
