De hanging-punctuationejendom sigter mod at give webdesignere en finere kornet kontrol over typografi på nettet.
Ideen bag hængende tegnsætning er at sætte nogle tegnsætningstegn fra start (eller i mindre udstrækning i slutningen) af tekstelementer "uden for" feltet for at bevare læsestrømmen.
Dybest set vil det flytte citatet, punkttegnet eller hvad der helst til venstre (eller højre i rtltilstand), så det første bogstav er korrekt justeret med resten af dokumentet.
Bemærk, at denne ejendom er valgfri, så browserproducenter understøtter den måske eller måske ikke.
Syntaks
hanging-punctuation: none | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )none
Ingen karakter hænger. Dette er standardværdien for denne egenskab.
first
Et tilgængeligt tegn ved starten af den første formaterede linje i et element hænger.
last
Et tilgængeligt tegn i slutningen af den sidste formaterede linje i et element hænger.
force-end
Et stop eller komma i slutningen af en linje hænger.
Tegnsætningen er tvunget til at hænge og tages ikke i betragtning, når linjen måles til retfærdiggørelse.
allow-end
Et stop eller komma i slutningen af en linje hænger, hvis det ellers ikke passer inden begrundelsen.
Tegnsætningen i slutningen af den første linje for hænger ikke, fordi den passer uden at hænge. På anden linje er der dog ikke plads nok, så den hænger.
Tilgængelige tegn
| Kode | Karakter | Navn |
|---|---|---|
U+002C | , | KOMMA |
U+002E | . | FULDT STOP |
U+060C | ، | ARABISK KOMMA |
U+06D4 | ۔ | ARABISK FULD STOP |
U+3001 | 、 | IDEOGRAFISK COMMA |
U+3002 | 。 | IDEOGRAFISK FULD STOP |
U+FF0C | ， | FULDBREDD KOMMA |
U+FF0E | ． | FULDBREDD FULD STOP |
U+FE50 | ﹐ | SMÅ COMMA |
U+FE51 | ﹑ | SMÅ IDEOGRAFISK COMMA |
U+FE52 | ﹒ | SMÅ FULD STOP |
U+FF61 | ｡ | HJÆLPBREDDE IDEOGRAFISK FULD STOP |
U+FF64 | ､ | HALVBREDDE IDEOGRAFISK KOMMA |
Bemærk, at brugeragenter har tilladelse til at tilføje et hvilket som helst tegn til denne liste. Citere spec:
UA kan omfatte andre tegn efter behov.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| Ingen | Ingen | Ingen | Ingen | 10 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Ingen | Ingen | Ingen | 10.0-10.2 |
En anstændig tilbagegang for ikke-understøttet browser ville være at bruge en negativ tekstindryk som sådan:
blockquote p ( text-indent: -0.5em; /* Change according to your font */ )For kuglelister vil du muligvis sikre dig, at kuglernes position er indstillet til, outsideog at beholderens overløb ikke er indstillet til hidden.