概要

text-combine-uprightは、CSSで縦書きテキスト内の複数の文字を1つの列にまとめて表示するためのプロパティです。このプロパティを使用することで、縦書きの中で数字や短い文字列を横並びにすることができ、縦書きの視認性やデザイン性を向上させることができます。日本語や中国語などの縦書きが必要なコンテンツにおいて、文字の組み合わせを簡単にカスタマイズできる便利な機能です。

text-combine-uprightの基本構文

text-combine-upright: <value>;

• value
  どのように文字をまとめて表示するかを指定するキーワードまたは整数値です。

値の説明

• none
  文字をまとめず、通常の縦書きのまま表示します（デフォルトの動作）。

• all
  すべての文字を1列にまとめて表示します。例えば、「2024」が1列に収まります。

• digits n
  数字の連続した文字列を指定した桁数（n桁）までまとめます。たとえば、digits 2とすると、2桁の数字が1列にまとめられます。

使用例

基本的な使用例 - 全ての文字を1列にまとめる

以下のコードは、縦書きテキストの中で「2024」を1列にまとめて表示する例です。

.vertical-text {
    writing-mode: vertical-rl; /* 縦書きの設定 */
    text-combine-upright: all; /* すべての文字をまとめる */
}

この設定により、「2024」が縦書き内で1列にまとめられ、見やすく表示されます。

特定の桁数の数字をまとめる

数字が連続する場合、特定の桁数まで1列にまとめるように設定することもできます。

.vertical-digits {
    writing-mode: vertical-rl; /* 縦書きの設定 */
    text-combine-upright: digits 2; /* 2桁の数字をまとめる */
}

このコードでは、2桁の数字（例：「12」や「34」）が1列にまとめられますが、3桁以上の数字はそのまま縦書きで表示されます。

複数の文字をまとめない設定

デフォルトのnoneを使用すると、文字はまとめられず、通常の縦書きのまま表示されます。

.no-combine {
    writing-mode: vertical-rl; /* 縦書きの設定 */
    text-combine-upright: none; /* 文字をまとめない */
}

この設定により、全ての文字が縦に並び、まとめられることはありません。

実用的なシナリオ

数字の見やすさを向上

縦書きの中で数字が横に並ぶことで、数字の視認性が向上します。特に電話番号、年号、ページ番号などのケースで効果的です。

短いフレーズやシンボルの調整

短い文字列や特定の記号を1列にまとめることで、縦書きの流れを乱さずに重要な情報を強調できます。

雑誌や書籍デザイン

雑誌や書籍のレイアウトで、縦書きの中に連続した数字やシンボルが含まれる場合、text-combine-uprightを使って視覚的な整合性を保つことができます。

注意点

• text-combine-uprightは、縦書きコンテキスト（writing-mode: vertical-rlやwriting-mode: vertical-lr）でのみ効果を発揮します。横書きでは動作しません。
• まとめる文字数が多すぎると、視認性が低下する場合があります。適切な桁数や文字数で設定することが重要です。
• allを使用すると、すべての文字がまとめられるため、必要に応じてdigits nなどの具体的な設定で調整する方が効果的です。

まとめ

text-combine-uprightは、CSSで縦書きテキスト内の複数の文字を1列にまとめて表示するための便利なプロパティです。数字や短い文字列を縦書きで見やすくすることで、デザインの一貫性と視認性を向上させることができます。特に日本語や縦書きデザインを多用するプロジェクトにおいて、このプロパティを活用して効果的なレイアウトを実現してください。