DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft hanging-punctuation zielt darauf ab, Webdesignern eine feinere Kontrolle über die Typografie im Web zu ermöglichen.
Die Idee hinter hängenden Satzzeichen ist, einige Satzzeichen am Anfang (oder in geringerem Maße am Ende) von Textelementen „außerhalb“ der Box zu platzieren, um den Lesefluss zu erhalten.
Im Grunde würde dies das Anführungszeichen, den Aufzählungspunkt oder was auch immer leicht nach links (oder nach rechts im rtl-Modus) verschieben, sodass der erste Buchstabe korrekt mit dem Rest des Dokuments ausgerichtet ist.
Bitte beachten Sie, dass diese Eigenschaft optional ist und Browserhersteller sie möglicherweise unterstützen oder auch nicht.
Syntax
hanging-punctuation: none | [ first || [ force-end | allow-end ] || last ]
blockquote p {
hanging-punctuation: first;
}none
Kein Zeichen hängt. 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 Punkt oder Komma am Ende einer Zeile hängt.
Die Satzzeichen werden erzwungen, damit sie hängen, und werden bei der Messung der Zeile für die Ausrichtung nicht berücksichtigt.
allow-end
Ein Punkt oder Komma am Ende einer Zeile hängt, wenn es anderweitig vor der Ausrichtung keinen Platz findet.
Die Satzzeichen am Ende der ersten Zeile hängen nicht, weil sie ohne Hängen passen. In der zweiten Zeile ist jedoch nicht genügend Platz, sodass sie hängen.
Verfügbare Zeichen
| Code | Zeichen (Character) | Name |
|---|---|---|
U+002C | , | KOMMA |
U+002E | . | PUNKT |
U+060C | ، | ARABISCHES KOMMA |
U+06D4 | ۔ | ARABISCHER PUNKT |
U+3001 | 、 | IDEOGRAPHISCHES KOMMA |
U+3002 | 。 | IDEOGRAPHISCHER PUNKT |
U+FF0C | ， | VOLLBREITES KOMMA |
U+FF0E | ． | VOLLBREITER PUNKT |
U+FE50 | ﹐ | KLEINES KOMMA |
U+FE51 | ﹑ | KLEINES IDEOGRAPHISCHES KOMMA |
U+FE52 | ﹒ | KLEINER PUNKT |
U+FF61 | ｡ | HALBBREITER IDEOGRAPHISCHER PUNKT |
U+FF64 | ､ | HALBBREITER IDEOGRAPHISCHES KOMMA |
Beachten Sie, dass User Agents berechtigt sind, beliebige Zeichen zu dieser Liste hinzuzufügen. Zitat aus der Spezifikation:
Die UA kann nach Bedarf weitere Zeichen hinzufügen.
Verwandte Eigenschaften
Weitere Ressourcen
hanging-punctuationin der Spezifikationhanging-punctuationmit CSS von Steve Hickey
Browser-Unterstützung
Diese Daten zur Browserunterstützung stammen von Caniuse, wo weitere Details zu finden sind. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| Nein | Nein | Nein | Nein | 10 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nein | Nein | Nein | 10.0-10.2 |
Eine gute Fallback-Lösung für nicht unterstützte Browser wäre die Verwendung eines negativen Text-Indents wie folgt:
blockquote p {
text-indent: -0.5em; /* Change according to your font */
}Für Aufzählungslisten möchten Sie möglicherweise sicherstellen, dass die Position der Aufzählungspunkte auf outside gesetzt ist und der Überlauf des Containers nicht auf hidden gesetzt ist.
Ich sehne mich nach dem Tag, an dem wir die Typografie so kontrollieren können, wie es Programme wie InDesign tun.
Bei der Arbeit an einem Kundenprojekt bin ich auf etwas gestoßen, das ich für einen Browser-Bug halte, hätte aber gerne eine Bestätigung.
Ich hätte mir gewünscht, dass
hanging-puncuationbereit wäre, also habe ich stattdessen einen negativen Text-Indent auf einep > q-Deklaration angewendet. Funktioniert in den meisten Fällen gut, aber wenn es sich innerhalb von CSS3-Spalten befindet, verschwinden die Satzzeichen und kein Überlauf vonoverflow: visiblebringt sie zurück.Hier ist ein CodePen: http://cdpn.io/xkcgw
Hat jemand eine Idee, was hier passiert?
J. Hogue, ich bin mir nicht sicher, was genau passiert, und ich bin nicht sehr vertraut mit CSS3 und Mehrspaltenlayouts, aber es scheint, dass der visuelle Bereich, den das Zitat einnimmt, nicht mehr im visuellen Begrenzungsrahmen der Spalte liegt. Ich habe es in Chrome getestet und den margin-left der zweiten Spalte auf -1em gesetzt, dann das Padding auf das q auf 1em. Danach war das Zitat sichtbar und "hängend" wie im Einspaltenbeispiel. Ich sage "hängend" in dem Sinne, dass es nur so aussieht, und Sie müssten alles in der Spalte entsprechend anpassen, um es zum Funktionieren zu bringen. Dies fühlt sich nach einem Hack an und ist wahrscheinlich die zusätzliche Mühe nicht wert, wenn man Margen usw. verändern muss. Außerdem habe ich keine Ahnung, wie andere Browser es rendern würden :/ Dennoch hoffe ich, dass dies Ihnen in irgendeiner Weise nützlich ist!
Medium macht das derzeit mit JS und CSS. dies.
Es findet Absätze, die mit einem Anführungszeichen beginnen, und fügt dann einen CSS-Selektor hinzu, auf den ein negativer Text-Indent angewendet wird.
http://boldewyn.github.io/jQuery.exdent/
Könnte es auch doppelt gehen?
hanging-punctuation: first last;Oder müssen wir nur eine Seite wählen?
Es stellt sich heraus, dass man dies in der Safari-Implementierung kann.
> text-indent: -0.5em; /* Ändern Sie dies entsprechend Ihrer Schriftart */
Vorsicht vor magischen Zahlen! Welchen Wert Sie auch immer wählen, er passt für Sie, aber passt möglicherweise nicht für andere.
Die Satzzeichen absolut zu positionieren, sollte für alle passen. Für öffnende Satzzeichen siehe Folie 38.
Wenn Sie nicht alle Satzzeichen, die hängen sollen, in
spans in Ihrem Markup verpacken möchten, sehen Sie sich das JavaScript auf der vorherigen Folie an. (Ändern Siex-lnach Ihren Bedürfnissen, vielleichtp.)Beachten Sie, dass dies nur für Satzzeichen am Anfang eines Absatzes funktioniert, nicht für alle Satzzeichen, die zufällig am Anfang einer Zeile nach einem Zeilenumbruch erscheinen.
Danke Chris für den Artikel. Ich habe "Thinking with Type" von Ellen Lupton noch einmal gelesen. Ich hatte eine Webseite mit einigen Zitaten, die nicht gut aussahen. Ich habe Ihre Idee mit dem negativen Text-Indent verwendet, aber den Einheitswert in ch geändert, wie folgt.
text-indent: -1ch; oder
text-indent: -0.8ch;