Text-Mähdrescher aufrecht - CSS-Tricks

Die text-combine-uprightCSS-Eigenschaft kombiniert Zeichen zu einem Zeichen. Die Spezifikation nennt diese „horizontal-in-vertikal“ -Komposition eine gute Beschreibung des Anwendungsfalls: Situationen, in denen Sie möglicherweise einige Zeichen in einem vertikalen Schreibmodus benötigen, um horizontal in derselben Zeile anzuzeigen.

span ( text-combine-upright: all; )

Die Technik des horizontalen Textes innerhalb des vertikalen Textes ist eine japanische Technik namens Tate-Chū-Yoko. So sieht das aus:

Wenn Sie mit einem vertikalen Schreibmodus von links nach rechts ( `writing-mode: vertical-rl;`) wie auf der linken Seite dieser Abbildung arbeiten, kann die `text-combine-upright`Eigenschaft mehrere Zeichen aufnehmen und horizontal anzeigen, wobei der Zeichenraum je nach Anzahl der ausgewählten Zeichen im Wesentlichen in gleiche Teile aufgeteilt wird. In diesem Beispiel zeigt die rechte Seite zwei Zeichen, die sich innerhalb eines vertikalen Schreibmodus denselben Zeichenraum teilen.

Syntax

text-combine-upright: none | all | ( digits ? )

Ursprünglicher Wert: none
Gilt für: nicht ersetzte Inline-Elemente
Geerbt: ja
Prozentsätze: n / a
Berechneter Wert: angegebenes Schlüsselwort plus Ganzzahl ifdigits
Animationstyp: nicht animierbar

Werte

text-combine-upright akzeptiert die folgenden Werte:

none: Dies ist der Anfangswert. In einem vertikalen Schreibmodus werden keine Zeichen horizontal angezeigt.
all: Alle aufeinanderfolgenden typografischen Zeichen im vertikalen Feld werden horizontal in derselben Zeile angezeigt und nehmen den Platz eines einzelnen Zeichens im vertikalen Feld ein.
digits ?: Alle aufeinanderfolgenden ASCII-Ziffern im vertikalen Feld werden horizontal in derselben Zeile angezeigt und nehmen den Platz eines einzelnen Zeichens im vertikalen Feld bis zur angegebenen Ganzzahl ein. Wenn keine Ganzzahl spezifisch ist, ist der Standardwert 2 Ziffern. Alles unter 2 und über 4 ist ungültig.

/* Keyword values */ text-combine-upright: none; text-combine-upright: all; /* Digits values */ text-combine-upright: digits; /* 2 digits */ text-combine-upright: digits 4; /* 4 digits */ /* Global values */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: unset;

Verwendung

Angenommen, wir nehmen das Beispiel direkt aus der Spezifikation, bei der es sich um ein Element mit vertikalem Schreibmodus handelt.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, wir möchten, dass Zahlen im Datum horizontal angezeigt werden. Es ist logisch anzunehmen, dass das Hinzufügen text-combine-uprightdirekt zum Element den Trick macht:

date ( text-combine-upright: digits 2; /* ? */ writing-mode: vertical-lr; )

Buuuuut, nicht so sehr. Zum Zeitpunkt des Schreibens müssen wir die Eigenschaft auf die Ziffern selbst anwenden, damit dies funktioniert. Eine Spanne reicht aus.

平成20年4月16日に

date ( writing-mode: vertical-lr; ) span ( text-combine-upright: digits 2; )

Na, bitte!

Browser-Unterstützung

Wie wir gerade im Beispiel gesehen haben, ist die Browserunterstützung im Moment etwas verstreut. Während viele Browser zumindest teilweise Unterstützung für anbieten text-combine-upright, gibt es viel weniger Unterstützung für den digitsWert als für den allWert.

IE	Kante	Feuerfuchs	Chrom	Safari	Oper
11¹	12 + ¹	48 + ²	48+	5,1 + ³	35+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + ³	59+

Quelle: caniuse

Verwendet den nicht standardmäßigen Namen: -ms-text-combine-horizontal
Erkennt den digitsWert hinter dem layout.css.text-combine-upright-digits.enabledexperimentellen Flag, implementiert jedoch noch keine Layoutunterstützung für tate-chū-yoko
Verwendet den nicht standardmäßigen Namen: -webkit-text-combine