文字幅

テキスト表示における各文字の横方向の占有サイズ。全角 (2 カラム幅) と半角 (1 カラム幅) の区別や、プロポーショナルフォントでの可変幅が含まれる。

文字幅 (character width) は、テキストを画面や紙面に表示する際に、各文字が横方向に占めるスペースの大きさです。日本語のテキスト処理では「全角」と「半角」という概念が根強く残っており、全角文字は半角文字の 2 倍の幅を占めるとされています。この区別は、1 バイトで表す文字と 2 バイトで表す文字が併存し、固定幅フォントの端末で表示していた時代に定着したものです。注意したいのは、全角・半角が本来は「表示上の幅」の話であって、文字コード上の 1 文字かどうかとは別の軸だという点です。全角の「A」も半角の「A」も Unicode では 1 文字 (1 コードポイント) です。

Unicode では文字幅を East Asian Width プロパティで分類しています。F (Fullwidth) は全角、H (Halfwidth) は半角、W (Wide) は東アジアの広い文字 (漢字、ひらがな、カタカナなど)、Na (Narrow) は狭い文字 (ASCII 英数字など)、A (Ambiguous) は文脈によって幅が変わる文字、N (Neutral) はどちらでもない文字です。この Ambiguous カテゴリが厄介で、ギリシャ文字の「α」やキリル文字の「А」、丸囲み数字の「①」、アクセント付きの「é」などが含まれ、東アジア向けの環境では全角扱い、欧米向けの環境では半角扱いになります。同じ文字列でも端末の設定次第で表示幅が変わるため、罫線や記号で表を組むと桁がずれます。ずれを避けたいなら、Ambiguous に該当する文字を装飾に使わず、桁揃えはフォント幅に依存しない方法 (HTML なら表組みやグリッド) で行うのが確実です。

プロポーショナルフォントでは、文字ごとに幅が異なります。「W」や「m」は「i」や「l」の数倍の幅を持ち、その比率はフォントによって変わります。このため、プロポーショナルフォントで表示されるテキストの横幅は、文字数だけでは予測できません。同じ 10 文字でも「WWWWWWWWWW」と「iiiiiiiiii」では表示幅が大きく異なります。実際の幅を知る必要があるなら、使用するフォントで測るしかありません。ブラウザ上なら canvas の measureText() で描画幅をピクセル単位で取得できます。

等幅フォント (モノスペースフォント) では、すべての文字が同じ幅を持ちます。プログラミングのコードエディタやターミナルで等幅フォントが使われるのは、文字の位置揃えが容易で、インデントや桁揃えが崩れないためです。日本語の等幅フォントでは、全角文字が半角文字のちょうど 2 倍の幅になるよう設計されています。

文字数カウントと文字幅の関係は、表示レイアウトの設計で重要になります。たとえば、データベースの一覧画面で「名前」カラムに 20 文字分の幅を確保する場合、全角文字だけなら 10 文字、半角文字だけなら 20 文字が収まります。実際のデータは全角と半角が混在するため、最悪ケース (全角のみ) を想定した幅設計が必要です。

ウェブデザインでは、CSS の ch 単位が「0」(数字のゼロ) の幅を基準とした相対単位です。width: 40ch と指定すると、約 40 文字分の幅になります。ただし、プロポーショナルフォントでは文字によって幅が異なるため、ch 単位はあくまで目安です。日本語テキストの場合は、和文の 1 文字分を基準にできる単位の方が直感的です。em は要素の文字サイズそのものを表す単位で、和文の字面は文字サイズいっぱいに設計されているため、結果として全角 1 文字分の幅とほぼ一致します。より厳密に和文基準で組みたい場合は ic 単位が使えます。これは「水」(U+6C34) の送り幅を 1 とする単位で、width: 20ic は和文 20 文字分の幅になります。使い分けの目安は、欧文中心の本文なら ch、和文の桁数を揃えたいなら ic、フォントに依存しない余白計算なら rem です。

この記事を共有