The text-combine-upright
CSS property sets the combination of 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;
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 definition
Initial value | none |
---|---|
Applies to | non-replaced inline elements |
Inherited | yes |
Computed value | specified keyword, plus integer if 'digits' |
Animation type | discrete |
Formal syntax
none | all | [ digits <integer>? ]
Examples
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.
HTML
<p lang="ja" class="exampleText">平成20年4月16日に</p>
CSS
.exampleText { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; }
Results
Screenshot | Live sample |
---|---|
All
The all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.
HTML
<p lang="zh-Hant">民國<span class="num">105</span >年<span class="num">4</span >月<span class="num">29</span>日</p>
CSS
html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all }
Results
Screenshot | Live sample |
---|---|
Specifications
Specification | Status | Comment |
---|---|---|
CSS Writing Modes Level 4 The definition of 'text-combine-upright' in that specification. |
Candidate Recommendation | Add digits value |
CSS Writing Modes Module Level 3 The definition of 'text-combine-upright' in that specification. |
Proposed Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-combine-upright | Chrome
Full support
48
| Edge
Full support
12
| Firefox
Full support
48
| IE
Full support
11
| Opera
Full support
35
| Safari
Partial support
5.1
| WebView Android
Full support
48
| Chrome Android
Full support
48
| Firefox Android
Full support
48
| Opera Android
Full support
35
| Safari iOS
Partial support
5
| Samsung Internet Android
Full support
5.0
|
digits | Chrome No support No | Edge No support 12 — 79 | Firefox
Full support
48
| IE Full support 11 | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
48
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.