Függesztés-központozás - CSS-trükkök

Anonim

Az hanging-punctuationingatlan célja, hogy a webtervezőknek finomabb szemléletet biztosítson a webes tipográfia felett.

Az írásjelek felfüggesztésének ötlete az, hogy néhány írásjelet a kezdetektől (vagy kisebb mértékben a végén) a szövegdobozok „kívül” helyezzenek el az olvasási folyamat megőrzése érdekében.

Alapvetően kissé elmozdítaná az idézetet, a golyót vagy bármit balra (vagy rtlmódban jobbra ), hogy az első betű megfelelően illeszkedjen a dokumentum többi részéhez.

Steve Hickey e cikkéből származó ábra

Felhívjuk figyelmét, hogy ez a tulajdonság nem kötelező, így a böngészőgyártók támogathatják vagy nem.

Szintaxis

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

none

Egy karakter sem lóg. Ez a tulajdonság alapértelmezett értéke.

first

Az elem első formázott sorának elején egy elérhető karakter lefagy.

last

Egy elem utolsó formázott sorának végén egy elérhető karakter lóg.

force-end

A vonal végén megáll vagy vessző lóg.

Az írásjelek kénytelenek lógni, és nem veszik figyelembe, amikor igazolás céljából mérik a sort.

allow-end

A sor végén megáll vagy vessző lóg, ha az indoklás előtt másképp nem illik.

Az első sor végén lévő írásjelek nem lógnak, mert lefagyás nélkül illenek. A második vonalon azonban nincs elég hely, így lóg.

Elérhető karakterek

Kód karakter Név
U+002C , VESSZŐ
U+002E . PONT
U+060C ، ARABIC COMMA
U+06D4 ۔ ARÁBIAI TELJES STOP
U+3001 、 IDEOGRÁFIAI KOMMA
U+3002 。 IDEOGRÁFIAI TELJES STOP
U+FF0C ， TELJES SZÉLES KOMMA
U+FF0E ． FULLWIDTH FULL STOP
U+FE50 ﹐ KIS COMMA
U+FE51 ﹑ KIS IDEOGRÁFIAI KOMMA
U+FE52 ﹒ KIS TELJES STOP
U+FF61 ｡ FÉLWIDTH IDEOGRÁFIAI TELJES STOP
U+FF64 ､ FÉL-WIDTH IDEOGRÁFIAI KOMMA

Vegye figyelembe, hogy a felhasználói ügynökök bármilyen karaktert hozzáadhatnak ehhez a listához. Idézve a specifikációt:

Az UA adott esetben más karaktereket is tartalmazhat.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
Nem Nem Nem Nem 10.

Mobil / Tablet

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

A nem támogatott böngésző számára megfelelő visszalépés lenne a negatív szöveges behúzás használata:

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

A felsoroláslistáknál érdemes lehet ellenőrizni, hogy a golyók helyzete be van-e állítva, outsideés hogy a tároló túlcsordulása nincs-e beállítva hidden.