text-combine-upright

Die CSS-Eigenschaft text-combine-upright kombiniert Zeichen im Platz eines Zeichens. Die Spezifikation nennt dies „horizontal-in-vertical“ Komposition, was eine gute Beschreibung des Anwendungsfalls ist: Situationen, in denen Sie möglicherweise einige Zeichen in einer vertikalen Schreibweise benötigen, um sie auf derselben Zeile horizontal anzuzeigen.

span {
  text-combine-upright: all;
}

Die Technik für horizontalen Text innerhalb von vertikalem Text ist eine japanische Technik namens tate-chū-yoko. So sieht das aus

Syntax

text-combine-upright: none | all | [ digits <integer>? ]

• Initialwert: none
• Gilt für: nicht ersetzte Inline-Elemente
• Vererbt: ja
• Prozentwerte: n/v
• Berechneter Wert: Schlüsselwort, plus Ganzzahl, wenn digits
• Animationstyp: nicht animierbar

Werte

text-combine-upright akzeptiert die folgenden Werte

• none: Dies ist der Anfangswert. Keine Zeichen werden horizontal in einer vertikalen Schreibweise angezeigt.
• all: Alle aufeinanderfolgenden typografischen Zeichen im vertikalen Container-Box werden horizontal auf derselben Zeile angezeigt und nehmen den Platz eines einzelnen Zeichens in der vertikalen Box ein.
• digits <integer>?: Alle aufeinanderfolgenden ASCII-Ziffern im vertikalen Container-Box werden horizontal auf derselben Zeile angezeigt und nehmen den Platz eines einzelnen Zeichens in der vertikalen Box ein, bis zur angegebenen Ganzzahl. Wenn keine Ganzzahl angegeben ist, beträgt 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

Nehmen wir das Beispiel, das direkt aus der Spezifikation stammt, ein <date>-Element mit vertikaler Schreibweise.

<date>平成20年4月16日に</date>

date {
  writing-mode: vertical-lr;
}

OK, wir möchten, dass Zahlen im Datum horizontal angezeigt werden. Es ist logisch anzunehmen, dass das Hinzufügen von text-combine-upright direkt auf das Element den Trick bewirkt.

date {
  text-combine-upright: digits 2; /* 👎 */
  writing-mode: vertical-lr;
}

Aber, nicht wirklich. Zum Zeitpunkt des Schreibens müssen wir die Eigenschaft auf die Ziffern selbst anwenden, damit dies funktioniert. Ein Span reicht aus.

<date>平成<span>20</span>年<span>4</span>月<span>16</span>日に</date>

date {
  writing-mode: vertical-lr;
}

span {
  text-combine-upright: digits 2;
}

Da haben wir es!

Browser-Unterstützung

Wie wir gerade im Beispiel gesehen haben, ist die Browserunterstützung im Moment etwas lückenhaft. Während viele Browser zumindest teilweise text-combine-upright unterstützen, gibt es deutlich weniger Unterstützung für den digits-Wert als für den all-Wert.

IE	Edge	Firefox	Chrome	Safari	Opera
11¹	12+¹	48+²	48+	5.1+³	35+

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

Spezifikation

• CSS Writing Modes Level 4 (Editor's Draft)

Verwandte Eigenschaften