text-combine-upright

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Die text-combine-upright CSS Eigenschaft setzt die Kombination von Zeichen in den Raum eines einzelnen Zeichens. Wenn der kombinierte Text breiter als 1em ist, muss der Benutzeragent die Inhalte innerhalb von 1em anpassen. Die resultierende Komposition wird als einzelnes aufrechtes Glyph für Layout und Dekoration behandelt. Diese Eigenschaft hat nur in vertikalen Schreibrichtungen Auswirkungen.

Dies wird verwendet, um einen Effekt zu erzeugen, der in Japanisch als tate-chū-yoko 縦中横 bekannt ist, oder als 橫向文字 in Chinesisch.

Probieren Sie es aus

text-combine-upright: none;

text-combine-upright: all;

<section class="default-example" id="default-example">
  <div>
    <p>
      <span class="transition-all" id="example-element"
        >2022<span>年</span>12<span>月</span>8</span
      >日から楽しい
    </p>
  </div>
</section>

p {
  writing-mode: vertical-rl;
}

Syntax

css
/* Keyword values */
text-combine-upright: none;
text-combine-upright: all;

/* Global values */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: revert;
text-combine-upright: revert-layer;
text-combine-upright: unset;

Werte

none

Es gibt keine besondere Verarbeitung.

all

Versucht, alle aufeinanderfolgenden Zeichen im Kasten horizontal zu setzen, sodass sie den Raum eines einzelnen Zeichens innerhalb der vertikalen Linie des Kastens einnehmen.

Hinweis: Das CSS writing modes Modul definiert einen digits <integer> Wert für die text-combine-upright Eigenschaft, um zwei bis vier aufeinanderfolgende ASCII Ziffern (U+0030–U+0039) so anzuzeigen, dass sie den Raum eines einzelnen Zeichens innerhalb des vertikalen Linienkastens einnehmen. Dies wird jedoch von keinem Browser unterstützt.

Formale Definition

Anfangswertnone
Anwendbar aufnicht ersetzte Inlineelemente
VererbtJa
Berechneter Wertangegebenes Schlüsselwort plus Ganzzahl, falls 'digits'
AnimationstypNot animatable

Formale Syntax

text-combine-upright = 
  none                         |
  all                          |
  [ digits <integer [2,4]>? ]

Beispiele

Verwendung von 'all' mit horizontalem Text

Der all-Wert erfordert Markup um jedes Stück horizontalen Text, wird aber derzeit von mehr Browsern unterstützt als der digits-Wert.

HTML

html
<p lang="zh-Hant">
  民國<span class="num">105</span>年<span class="num">4</span>月<span
    class="num"
    >29</span
  >日
</p>

CSS

css
html {
  writing-mode: vertical-rl;
  font: 24px serif;
}
.num {
  text-combine-upright: all;
}

Ergebnisse

Spezifikationen

Specification
CSS Writing Modes Level 4
# text-combine-upright

Browser-Kompatibilität

Siehe auch