path: root/files/ja/web/css/text-combine-upright/index.html

---
title: text-combine-upright
slug: Web/CSS/text-combine-upright
tags:
  - CSS
  - CSS プロパティ
  - CSS 書字方向
  - Experimental
  - Reference
translation_of: Web/CSS/text-combine-upright
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong><code>text-combine-upright</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、一文字分の空間に挿入する文字の組み合わせを設定します。</span>組み合わせたテキストが 1em の幅より広い場合、ユーザーエージェントはコンテンツを 1em の幅に収める必要があります。合成結果は、レイアウトおよび装飾においてグリフ一文字として扱われます。このプロパティは、縦書きモードでのみ効果があります。</p>

<p>これは、日本語の縦中横 (tate-chū-yoko)、中国語の <span lang="zh-Hant">直書橫向</span> として知られる効果をもたらすために使用されます。</p>

<pre class="brush:css no-line-numbers">/* キーワード値 */
text-combine-upright: none;
text-combine-upright: all;

/* Digits 値 */
text-combine-upright: digits;     /* 2 桁の数字を垂直テキスト内に水平に収めます */
text-combine-upright: digits 4;   /* 4 桁までの数字を垂直テキスト内に水平に収めます */

/* グローバル値 */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: unset;
</pre>

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

<h2 id="Syntax" name="Syntax">構文</h2>

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

<dl>
 <dt><code>none</code></dt>
 <dd>何も特別な処理をしません。</dd>
 <dt><code>all</code></dt>
 <dd>タイプセットのすべての文字を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。</dd>
 <dt><code>digits &lt;integer&gt;?</code></dt>
 <dd>指定した桁数 (整数値) までの連続した ASCII 数字 (U+0030–U+0039) を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。整数値を省略した場合の値は 2 になります。2 ～ 4 までの範囲外の整数値は不正です。</dd>
</dl>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

{{csssyntax}}

<h2 id="Example_digits" name="Example_digits">例 (digits)</h2>

<p>digits 値は、数字の桁だけを組み合わせる場合に使用し、all 値よりも必要なマークアップが少なくてすみます。現在、これをサポートしているブラウザーはあまりありません。</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;
  font: 36px serif;
}</pre>

<p>{{EmbedLiveSample("Example_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}</p>

<h2 id="Example_all" name="Example_all">例 (all)</h2>

<p>all 値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザーでサポートされています。</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="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td>
   <td>{{Spec2("CSS4 Writing Modes")}}</td>
   <td><code>digits</code> 値の追加</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td>
   <td>{{Spec2("CSS3 Writing Modes")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.text-combine-upright")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

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