Závesná interpunkcia - Triky CSS

Cieľom tejto služby hanging-punctuationje poskytnúť webovým dizajnérom jemnejšiu kontrolu nad typografiou na webe.

Myšlienkou visiacej interpunkcie je umiestniť niektoré interpunkčné znaky od začiatku (alebo v menšej miere na koniec) textových prvkov „mimo“ poľa, aby sa zachoval tok čítania.

V zásade by to mierne posunulo tento citát, odrážku alebo čokoľvek doľava (alebo doprava v rtlrežime), aby bolo prvé písmeno správne zarovnané so zvyškom dokumentu.

Obrázok z tohto článku od Steva Hickeyho

Upozorňujeme, že táto vlastnosť je voliteľná, takže ju môžu alebo nemusia tvorcovia prehľadávačov podporovať.

Syntax

hanging-punctuation: none | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )

`none`

Žiadna postava nevisí. Toto je predvolená hodnota pre túto vlastnosť.

`first`

Dostupné znaky na začiatku prvého naformátovaného riadku prvku visia.

`last`

Dostupné znaky na konci posledného naformátovaného riadku prvku visia.

`force-end`

Na konci riadku visí zarážka alebo čiarka.

Interpunkcia je vynútená visieť a pri zarovnávaní čiary sa na ňu neprihliada.

`allow-end`

Znak alebo čiarka na konci riadku visí, ak sa inak pred odôvodnením nezmestí.

Interpunkcia na konci prvého riadku pre nevisí, pretože sa hodí bez zavesenia. Na druhom riadku však nie je dosť miesta, takže visí.

Dostupné znaky

Zákonníka	Postava	názov
`U`+`002C`	,	KOMMA
`U`+`002E`	.	BODKA
`U`+`060C`	،	ARABICKÁ KOMMA
`U`+`06D4`	۔	ARABICKÝ CELÝ STOP
`U`+`3001`	、	IDEOGRAFICKÁ KOMMA
`U`+`3002`	。	IDEOGRAFICKÉ PLNÉ ZASTAVENIE
`U`+`FF0C`	，	PLNÁ KOMMA
`U`+`FF0E`	．	CELÁ ŠÍRKA CELÝ STOP
`U`+`FE50`	﹐	MALÁ KÓMA
`U`+`FE51`	﹑	MALÁ IDEOGRAFICKÁ KOMMA
`U`+`FE52`	﹒	MALÉ PLNÉ ZASTAVENIE
`U`+`FF61`	｡	IDEOGRAFICKÉ PLNÉ ZASTAVENIE POLOVIČKY
`U`+`FF64`	､	IDEOGRAFICKÁ ČIERKA POLOVIČKY

Upozorňujeme, že agenti používateľov môžu do tohto zoznamu pridať akýkoľvek znak. Citácia špecifikácie:

UA môže podľa potreby obsahovať ďalšie znaky.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome	Firefox	IE	Hrana	Safari
Nie	Nie	Nie	Nie	10

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
Nie	Nie	Nie	10.0-10.2

Slušnou rezervou pre nepodporovaný prehliadač by bolo použitie záporného odsadenia textu takto:

blockquote p ( text-indent: -0.5em; /* Change according to your font */ )

Pri zoznamoch odrážok sa možno budete chcieť ubezpečiť, že je pozícia odrážok nastavená na outsidea či nie je nastavený pretečenie kontajnera hidden.