Hangende interpunctie - CSS-trucs

De hanging-punctuationeigenschap is bedoeld om webontwerpers een fijnere controle te geven over typografie op internet.

Het idee achter hangende interpunctie is om een ​​aantal leestekens vanaf het begin (of in mindere mate aan het einde) van tekstelementen 'buiten' het kader te plaatsen om de leesstroom te behouden.

In feite zou het dat citaat, opsommingsteken of wat dan ook een beetje naar links (of rechts in de rtlmodus) verplaatsen, zodat de eerste letter correct is uitgelijnd met de rest van het document.

Houd er rekening mee dat deze eigenschap optioneel is, dus browsermakers kunnen deze wel of niet ondersteunen.

Syntaxis

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

none

Geen enkel personage blijft hangen. Dit is de standaardwaarde voor deze eigenschap.

first

Een beschikbaar teken aan het begin van de eerste opgemaakte regel van een element blijft hangen.

last

Een beschikbaar teken aan het einde van de laatste opgemaakte regel van een element blijft hangen.

force-end

Een stop of komma aan het einde van een regel blijft hangen.

De interpunctie wordt geforceerd vastgehouden en wordt niet in aanmerking genomen bij het meten van de regel ter rechtvaardiging.

allow-end

Een stop of komma aan het einde van een regel blijft hangen als deze niet past vóór de uitvulling.

De leestekens aan het einde van de eerste regel hangen niet omdat ze passen zonder op te hangen. Op de tweede regel is er echter niet genoeg ruimte, dus hij hangt wel.

Beschikbare karakters

Code	Karakter	Naam
U​002C	​	KOMMA
U​002E	​	PUNT
U​060C	​	ARABISCHE KOMMA
U​06D4	​	ARABISCH VOLLEDIGE STOP
U​3001	​	IDEOGRAFISCHE KOMMA
U​3002	​	IDEOGRAFISCHE VOLLEDIGE STOP
U​FF0C	​	VOLLEDIGE KOMMA
U​FF0E	​	FULLWIDTH FULL STOP
U​FE50	​	KLEINE KOMMA
U​FE51	​	KLEINE IDEOGRAFISCHE KOMMA
U​FE52	​	KLEINE VOLLEDIGE STOP
U​FF61	​	HALFBREEDTE IDEOGRAFISCHE VOLLEDIGE STOP
U​FF64	​	HALFBREEDTE IDEOGRAFISCHE KOMMA

Merk op dat user agents elk teken aan deze lijst mogen toevoegen. Onder vermelding van de specificatie:

Het UA kan eventueel andere karakters bevatten.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome	Firefox	D.W.Z	Rand	Safari
Nee	Nee	Nee	Nee	10

Mobiel / tablet

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

Een behoorlijke terugval voor een niet-ondersteunde browser zou zijn om een ​​negatieve tekstinspringing als volgt te gebruiken:

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

Voor lijsten met opsommingstekens wilt u er misschien voor zorgen dat de positie van de opsommingstekens is ingesteld op outsideen dat de overloop van de container niet is ingesteld op hidden.