Revision 1049046 of text-combine-upright

<div>{{CSSRef}}{{SeeCompatTable}}</div>

<h2 id="Summary">Summary</h2>

<p>The <strong><code>text-combine-upright</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 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.</p>

<p>This is used to produce an effect that is known as tate-chū-yoko (<span lang="ja">縦中横</span>) in Japanese.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">
/* 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;
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>There is no special processing.</dd>
 <dt><code>all</code></dt>
 <dd>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&nbsp;box.</dd>
 <dt><code>digits &lt;integer&gt;?</code></dt>
 <dd>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.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Example_(digits)">Example (digits)</h2>

<p>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>

<pre class="brush: html">
&lt;p lang="ja" class="exampleText"&gt;平成20年4月16日に&lt;/p&gt;
</pre>

<pre class="brush: css">
.exampleText {
  writing-mode: vertical-lr;
  text-combine-upright: digits 2;
}</pre>

<p>{{EmbedLiveSample("Example_(digits)", 50, 200, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}</p>

<h2 id="Example_(all)">Example (all)</h2>

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

<pre class="brush: html">
&lt;p lang="zh-Hant"&gt;民國&lt;span class="num"&gt;105&lt;/span
&gt;年&lt;span class="num"&gt;4&lt;/span
&gt;月&lt;span class="num"&gt;29&lt;/span&gt;日&lt;/p&gt;
</pre>

<pre class="brush: css">
html { writing-mode: vertical-rl; font: 24px serif }
.num { text-combine-upright: all }
</pre>

<p>{{EmbedLiveSample("Example_(all)", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}</p>

<h2 id="Specification">Specification</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td>
   <td>{{Spec2("CSS3 Writing Modes")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<sup>[1]</sup><br />
    {{CompatChrome(48.0)}}</td>
   <td>{{CompatGeckoDesktop("48.0")}}<sup>[2]</sup></td>
   <td>11.0{{property_prefix("-ms")}}<sup>[3]</sup></td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<sup>[1]</sup><br />
    {{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<sup>[1]</sup></td>
  </tr>
  <tr>
   <td><code>digits</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}<sup>[4]</sup></td>
   <td>11.0{{property_prefix("-ms")}}<sup>[3]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(48.0)}}</td>
   <td>{{CompatChrome(48.0)}}</td>
   <td>{{CompatGeckoDesktop("48.0")}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>digits</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}<sup>[4]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] In WebKit and Blink the property was initially named <code>-webkit-text-combine</code>&nbsp;according to an&nbsp;<a href="https://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/#text-combine">old version(2011) of the CSS3 Writing Modes specification</a>, supporting the values <code>none</code> and <code>horizontal</code> (without number).</p>

<p>[2] According to an <a href="https://www.w3.org/TR/2013/WD-css-writing-modes-3-20131126/#propdef-text-combine-horizontal">old version(2013) of the CSS3 Writing Modes specification</a> Gecko 26.0 {{geckoRelease("26.0")}} initially implemented this property as <code>text-combine-horizontal,</code>behind the preference <code>layout.css.vertical-text.enabled</code>, defaulting to <code>false</code> (see {{bug("875250")}}). In Gecko 31.0 {{geckoRelease("31.0")}} it was renamed to <code>text-combine-upright</code> (see {{bug("997006")}}. In Gecko 41.0 {{geckoRelease("41.0")}} a new preference <code>layout.css.text-combine-upright.enabled</code> was added, defaulting to <code>false</code>, 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.</p>

<p>[3] In Internet Explorer the property is named <code><a href="https://msdn.microsoft.com/en-us/library/dn337005(v=vs.85).aspx">-ms-text-combine-horizontal</a></code>.</p>

<p>[4] Gecko supports this value since Gecko 48.0 (geckoRelease("48.0")}} behind the preference&nbsp;<code>layout.css.text-combine-upright-digits.enabled</code> and in previous versions via the preference <code>layout.css.text-combine-upright.enabled</code>, defaulting to <code>false</code> , though it doesn't implement layout support (tate-chu-yoko) for it yet (see {{bug("1258635")}}).</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{cssxref("writing-mode")}}, {{cssxref("text-orientation")}}</li>
</ul>