Summary
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.
{{cssinfo}}
Syntax
/* 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;
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
{{csssyntax}}
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: 30px serif; }
{{EmbedLiveSample("Example_(digits)", 100, 325, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}
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 }
{{EmbedLiveSample("Example_(all)", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}
Specification
Specification | Status | Comment |
---|---|---|
{{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}} | {{Spec2("CSS3 Writing Modes")}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}}{{property_prefix("-webkit")}}[1] {{CompatChrome(48.0)}} |
{{CompatGeckoDesktop("48.0")}}[2] | 11.0{{property_prefix("-ms")}}[3] | {{CompatVersionUnknown}}{{property_prefix("-webkit")}}[1] {{CompatVersionUnknown}} |
{{CompatVersionUnknown}}{{property_prefix("-webkit")}}[1] |
digits |
{{CompatNo}} | {{CompatNo}}[4] | 11.0{{property_prefix("-ms")}}[3] | {{CompatNo}} | {{CompatUnknown}} |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatChrome(48.0)}} | {{CompatChrome(48.0)}} | {{CompatGeckoDesktop("48.0")}}[2] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
digits |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatNo}}[4] | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
[1] In WebKit and Blink the property was initially named -webkit-text-combine
according to an old version(2011) of the CSS3 Writing Modes specification, supporting the values none
and horizontal
(without number).
[2] According to an old version(2013) of the CSS3 Writing Modes specification Gecko 26.0 {{geckoRelease("26.0")}} initially implemented this property as text-combine-horizontal,
behind the preference layout.css.vertical-text.enabled
, defaulting to false
(see {{bug("875250")}}). In Gecko 31.0 {{geckoRelease("31.0")}} it was renamed to text-combine-upright
(see {{bug("997006")}}. In Gecko 41.0 {{geckoRelease("41.0")}} a new preference layout.css.text-combine-upright.enabled
was added, defaulting to false
, though Gecko didn't implement layout support (tate-chu-yoko) for it until Gecko 48.0 {{geckoRelease("48.0")}} (see {{bug("1097499")}}), which also enables the property by default.
[3] In Internet Explorer the property is named -ms-text-combine-horizontal
.
[4] Gecko supports this value since Gecko 48.0 (geckoRelease("48.0")}} behind the preference layout.css.text-combine-upright-digits.enabled
and in previous versions via the preference layout.css.text-combine-upright.enabled
, defaulting to false
, though it doesn't implement layout support (tate-chu-yoko) for it yet (see {{bug("1258635")}}).
See also
- {{cssxref("writing-mode")}}, {{cssxref("text-orientation")}}