【CSS Modules】text-combine-uprightプロパティの使い方
text-combine-uprightプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
text-combine-uprightプロパティは、縦書きのテキストにおいて、複数の文字を一つの正方形のボックスにまとめて表示する設定を制御するプロパティです。このプロパティは、主に日本語などの縦書きモードで使用され、通常は横書きで表示される欧文の数字や記号（約物）などを、縦書きの文中に自然に組み込むために利用されます。
具体的には、縦書きの文章中に現れる二桁以上の欧文数字や特定の記号を、あたかも一文字であるかのように、縦方向の空間を正方形にまとめて表示します。例えば、「2024」という数字を縦書きのテキスト中でこのプロパティを適用すると、数字の「2」「0」「2」「4」が横方向に結合され、全体が縦書きの漢字一文字分の高さに収まるように表示されます。これにより、文字が不自然に縦に並ぶのを避け、縦書き文章の流れやリズムを崩すことなく、欧文数字や記号を効果的に配置し、文章全体の可読性を向上させることが可能になります。
指定できる値には、文字を結合しない none、全ての数字や記号を結合する all、そして指定した桁数までの数字のみを結合する digits <integer> があります。digits <integer> の場合、例えば digits 2 と設定すると、2桁までの数字が結合の対象となります。このプロパティは、複雑な文字組版、特に日本語の縦書きデザインにおいて、視覚的な一貫性とテキストの可読性を高める上で非常に有用な機能を提供します。
公式リファレンス: text-combine-upright
構文(syntax)
1text-combine-upright: all;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません