Závesná interpunkcia - Triky CSS

Anonim

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.