Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

The text-combine-upright CSS property specifies the combination of multiple characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.

This is used to produce an effect that is known as tate-chū-yoko (縦中横) in Japanese, or as 直書橫向 in Chinese.

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

/* Digits values */
text-combine-upright: digits;     /* fits 2 consecutive digits horizontally inside vertical text */
text-combine-upright: digits 4;   /* fits up to 4 consecutive digits horizontally inside vertical text */

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

Initial valuenone
Applies tonon-replaced inline elements
Inheritedyes
Mediavisual
Computed valuespecified keyword, plus integer if 'digits'
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

none
There is no special processing.
all
Attempts to typeset all consecutive characters within the box horizontally, such that they take up the space of a single character within the vertical line of the box.
digits <integer>?
Attempts to display a sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer, such that it takes up the space of a single character within the vertical line box. If the integer is omitted, it computes to 2. Integers outside the range of 2-4 are invalid.

Formal syntax

none | all | [ digits <integer>? ]

Example (digits)

The digits value requires less markup than the all value when digits are being combined, but it is currently not very widely supported by browsers.

<p lang="ja" class="exampleText">平成20年4月16日に</p>
.exampleText {
  writing-mode: vertical-lr;
  text-combine-upright: digits 2;
  font: 36px serif;
}

ScreenshotLive sample

Example (all)

The all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.

<p lang="zh-Hant">民國<span class="num">105</span
>年<span class="num">4</span
>月<span class="num">29</span>日</p>
html { writing-mode: vertical-rl; font: 24px serif }
.num { text-combine-upright: all }

ScreenshotLive sample

Specification

Specification Status Comment
CSS Writing Modes Module Level 3
The definition of 'text-combine-upright' in that specification.
Candidate Recommendation Initial definition
CSS Writing Modes Level 4
The definition of 'text-combine-upright' in that specification.
Editor's Draft Add digits value

Browser compatibility

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

48

Yes1 2

Yes

483

414

31 —?5

26 — 316 7

118

Yes

Yes2 9

Yes2 9
digits No ?4810 11 Yes No ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support4848 Yes

483

414

31 —?5

26 — 316 7

No No No
digits ? ? ?4810 11 ? ? ?

1. This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification, supporting the values none and horizontal without digits.

2. Supported as -webkit-text-combine.

3. Before version 48, Firefox did not implement layout support for tate-chū-yoko.

4. From version 41: this feature is behind the layout.css.text-combine-upright.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

5. From version 31: this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

6. From version 26 until version 31 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

7. Supported as text-combine-horizontal.

8. Supported as -ms-text-combine-horizontal.

9. This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification, supporting the values none and horizontal without digits.

10. Firefox recognizes this value but does not yet implement layout support for tate-chū-yoko (see bug 1258635).

11. From version 48: this feature is behind the layout.css.text-combine-upright-digits.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

 

See also

Schlagwörter des Dokuments und Mitwirkende

 Zuletzt aktualisiert von: fscholz,