CSSのtext-combine-uprightで縦書きテキストの複数文字を1文字幅にまとめる方法をわかりやすく解説

text-combine-uprightプロパティは、縦書きの際に、指定された文字を横方向に並べて表示する際に使用されます。通常は文字が縦方向に表示されますが、このプロパティを使うことで、数字や特定のテキストを1つのセル内にまとめて横並びに表示することができます。

text-combine-uprightの値とその効果の一覧

• none: 文字を縦書きでそのまま表示します。
• all: すべての文字を1つのセル内に横並びで表示します。
• digits N: 数字を横並びにして表示し、Nで指定した桁数まで結合します。

注意点と関連情報

text-combine-uprightプロパティは、縦書き時のみ有効です。横書き時には効果がありません。特に数字の結合表示は、日本語の縦書き文章での使用を前提としています。桁数を超える数字は無視されるため、桁数の指定には注意が必要です。

text-combine-uprightが効かない時の原因と対策

writing-modeが適切に設定されていない

text-combine-uprightは、縦書きレイアウトで使用するプロパティです。writing-modeがデフォルトの横書き（horizontal-tb）になっている場合、このプロパティは効果を発揮しません。

対策: writing-modeをvertical-rlやvertical-lrに設定して、縦書きレイアウトを有効にします。例えば、writing-mode: vertical-rl;のように指定することで、text-combine-uprightが適用されるようになります。

対象となるテキストが数値や短い文字列ではない

text-combine-uprightは、主に数字や短い文字列を1つの文字の幅内に縦書きで表示するために使われます。対象のテキストが長すぎたり、数値以外の文字列だと効果がわかりにくいことがあります。

対策: 数字や短い文字列に対してtext-combine-uprightを適用します。例えば、text-combine-upright: all;を数字や1～2文字のテキストに適用すると効果的です。長い文章には適用されません。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 300px;
  background-color: #f9f9f9;
}

.css-sample-text {
  border: 1px solid #999;
  padding: 10px;
  writing-mode: vertical-rl;
}

text-combine-upright: none

文字をそのまま縦書きで表示します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text">
    <span class="css-sample-text-none">123456</span>縦書きのテキスト
  </div>
</div>

CSSコード

.css-sample-text-none {
  text-combine-upright: none;
}

表示結果

text-combine-upright: all

すべての文字を横並びで結合して表示します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text">
    <span class="css-sample-text-all">123</span>縦書きのテキスト
  </div>
</div>

CSSコード

.css-sample-text-all {
  text-combine-upright: all;
}

表示結果

text-combine-upright: digits 2

数字を2桁までであれば横並びで表示します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text">
    <span class="css-sample-text-digits">1234</span>縦書きのテキスト
  </div>
</div>

CSSコード

.css-sample-text-digits {
  text-combine-upright: digits 2;
}

表示結果

まとめ

• text-combine-uprightは、縦書き時に文字を横並びに結合するプロパティです。
• none、all、digits Nの3つの主要な値があり、必要に応じてテキストや数字を結合して表示できます。
• 縦書きの文脈<span class=””>。