Die hanging-punctuationEigenschaft zielt darauf ab, Webdesignern eine genauere Kontrolle über die Typografie im Web zu geben.
Die Idee hinter der hängenden Interpunktion besteht darin, einige Interpunktionszeichen vom Anfang (oder in geringerem Maße am Ende) von Textelementen „außerhalb“ des Felds einzufügen, um den Lesefluss zu erhalten.
Grundsätzlich würde das Zitat, das Aufzählungszeichen oder was auch immer leicht nach links (oder rechts im rtlModus) verschoben, sodass der erste Buchstabe richtig mit dem Rest des Dokuments ausgerichtet ist.
Bitte beachten Sie, dass diese Eigenschaft optional ist, damit Browserhersteller sie möglicherweise unterstützen oder nicht.
Syntax
hanging-punctuation: none | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )none
Es hängt kein Charakter. Dies ist der Standardwert für diese Eigenschaft.
first
Ein verfügbares Zeichen am Anfang der ersten formatierten Zeile eines Elements hängt.
last
Ein verfügbares Zeichen am Ende der letzten formatierten Zeile eines Elements hängt.
force-end
Ein Stopp oder Komma am Ende einer Zeile hängt.
Die Interpunktion muss hängen bleiben und wird bei der Messung der Linie zur Rechtfertigung nicht berücksichtigt.
allow-end
Ein Stopp oder Komma am Ende einer Zeile hängt, wenn es vor der Begründung nicht passt.
Die Interpunktion am Ende der ersten Zeile für hängt nicht, weil sie passt, ohne zu hängen. In der zweiten Zeile ist jedoch nicht genügend Platz vorhanden, sodass er hängen bleibt.
Verfügbare Zeichen
| Code | Charakter | Name |
|---|---|---|
U+002C | , | KOMMA |
U+002E | . | PUNKT |
U+060C | ، | ARABISCHES KOMMA |
U+06D4 | ۔ | ARABISCHER VOLLSTÄNDIGER STOP |
U+3001 | 、 | IDEOGRAPHISCHES KOMMA |
U+3002 | 。 | IDEOGRAPHISCHER VOLLSTÄNDIGER STOP |
U+FF0C | ， | FULLWIDTH COMMA |
U+FF0E | ． | FULLWIDTH FULL STOP |
U+FE50 | ﹐ | KLEINES KOMMA |
U+FE51 | ﹑ | KLEINES IDEOGRAPHISCHES KOMMA |
U+FE52 | ﹒ | KLEINER VOLLSTÄNDIGER STOP |
U+FF61 | ｡ | HALBBREITE IDEOGRAPHISCHE VOLLSTÄNDIGE STOPPUNG |
U+FF64 | ､ | HALBBREITE IDEOGRAPHISCHE KOMMA |
Beachten Sie, dass Benutzerprogramme dieser Liste beliebige Zeichen hinzufügen dürfen. Zitieren der Spezifikation:
Die UA kann gegebenenfalls andere Zeichen enthalten.
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| Nein | Nein | Nein | Nein | 10 |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nein | Nein | Nein | 10.0-10.2 |
Ein anständiger Fallback für nicht unterstützte Browser wäre die Verwendung eines negativen Texteinzugs als:
blockquote p ( text-indent: -0.5em; /* Change according to your font */ )Bei Aufzählungslisten möchten Sie möglicherweise sicherstellen, dass die Position der Aufzählungszeichen outsideund der Überlauf des Containers nicht auf eingestellt ist hidden.