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 User-Agent den Inhalt auf 1em anpassen. Die resultierende Komposition wird als ein einzelnes aufrechtes Glyph für Layout und Dekoration behandelt. Diese Eigenschaft hat nur in vertikalen Schreibrichtungen einen Effekt.

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

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 spezielle Verarbeitung.

all

Versucht, alle aufeinander folgenden Zeichen innerhalb des Rahmens horizontal zu setzen, sodass sie den Raum eines einzelnen Zeichens innerhalb der vertikalen Linie des Rahmens 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) darzustellen, sodass sie den Raum eines einzelnen Zeichens innerhalb der vertikalen Linie des Rahmens 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 Wert all erfordert eine Auszeichnung um jedes Stück horizontalen Textes, wird aber derzeit von mehr Browsern als der digits Wert unterstützt.

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