Hängning-skiljetecken - CSS-tricks

Anonim

De hanging-punctuationfastighets syftar till att ge webbdesigners en mer finmaskig kontroll över typografi på webben.

Tanken bakom hängande skiljetecken är att placera några skiljetecken från början (eller i mindre utsträckning i slutet) av textelement ”utanför” rutan för att bevara läsflödet.

I grund och botten skulle det flytta citatet, punkten eller vad som helst åt vänster (eller höger i rtlläge) så att den första bokstaven är korrekt inriktad med resten av dokumentet.

Figur från den här artikeln av Steve Hickey

Observera att den här egenskapen är valfri så att webbläsarproducenter kanske stöder den.

Syntax

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

none

Ingen karaktär hänger. Detta är standardvärdet för den här egenskapen.

first

Ett tillgängligt tecken i början av den första formaterade raden i ett element hänger.

last

Ett tillgängligt tecken i slutet av den sista formaterade raden i ett element hänger.

force-end

Ett stopp eller komma i slutet av en rad hänger.

Tecknet tvingas hänga och beaktas inte när man mäter linjen för att motivera.

allow-end

Ett stopp eller komma i slutet av en rad hänger om det inte annars passar före motiveringen.

Tecknet i slutet av första raden för hänger inte eftersom det passar utan att hänga. På andra raden finns det dock inte tillräckligt med utrymme så det hänger.

Tillgängliga tecken

Koda Karaktär namn
U+002C , KOMMATECKEN
U+002E . PUNKT
U+060C ، ARABISK KOMMA
U+06D4 ۔ ARABISKT HELT STOPP
U+3001 、 IDEOGRAFISK KOMMA
U+3002 。 IDEOGRAFISK STOPP
U+FF0C ， FULLBREDD KOMMA
U+FF0E ． FULLWIDTH FULL STOP
U+FE50 ﹐ SMÅ KOMMA
U+FE51 ﹑ SMÅ IDEOGRAFISK KOMMA
U+FE52 ﹒ SMÅ HELT STOPP
U+FF61 ｡ HALVVID IDEOGRAFISK HELA STOPP
U+FF64 ､ HALVVID IDEOGRAFISK KOMMA

Observera att användaragenter får lägga till vilket tecken som helst i den här listan. Citera specifikationen:

UA kan innehålla andra tecken efter behov.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
Nej Nej Nej Nej 10

Mobil / surfplatta

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

En anständig reserv för webbläsare som inte stöds skulle vara att använda en negativ textindragning så:

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

För punktlistor kanske du vill se till att kulorna är inställda på outsideoch att behållarens överflöd inte är inställd på hidden.