Besedni izraz “orphan word” se v tipografiji nanaša na besedo, ki se sama nahaja v vrstici. “Reverse” pa pomeni, da postavimo to besedo na začetek besedne zveze, ki ji lahko s pomočjo CSS dodamo tvist.

Besedno siroto v HTMLju dosežemo tako, da dodamo v besedno zvezo <br>, ki vsebino za značko postavi v svojo vrstico. S pomočjo CSS značk “::first-line” in “::last-line” pa lahko to besedo ciljamo in jo ustrezno oblikujemo.

Zakaj bi to sploh uporabili?!?

Semantično je bolje, da so npr. značke, kategorije v svojih elementih. Saj imajo običajno še kakšne klikabilne funkcije. V primerih, ko pa rabimo samo vizualno razlikovanje, brez dodatnih funkcionalnosti pa takšna uporaba čisto primerna. Tudi v primerih, ko nam sam sistem ne dovoljuje takšnih možnosti lahko s takšno rešitvijo rešimo marsi kateri problem razlikovanja, saj običajno vnosna polja v veliki meri <br> značko sprejmejo. Tako lahko brez dodatni oz. večjih stroškov naredimo solidno razlikovanje, ki semantično ustrezno. Najverjetneje tudi pri optimizaciji (SEO) ni težav, prej prednosti.

Podpora CSS značkam “::first-line” in “::last-line” pa je precej dobra, tako da take rešitve delujejo tudi na starejših brskalnikih, kot je IE.

See the Pen
CSS: Reverse orphan word by Ziga (@pomagalnik)
on CodePen.

Vir: Reverse orphan word