word-spacing

Updated / Published

word-spacingプロパティは半角スペースで区切られた単語と単語の間隔を指定します。これにより単語の間隔を広げるのに不必要に空白文字を挿入する必要がなくなるので、音声出力機器などの非視覚環境のユーザを混乱させることなく、文字列のスタイルを操作することが可能になります。注意点として、UA は単語の区切りを半角スペースで認識するので、日本語の場合は、あえて半角スペースを加えて区切らない限り、単語という形には認識できません。

初期値
normal
適用対象
すべての要素
継承
する
メディア
visual

word-spacingプロパティの値

word-spacingプロパティの値には、UA に設定されている標準の単語間隔を用いる "normal"、または "em", "px" などの単位識別子を伴う数値の長さを指定することができます。

長さはデフォルトで設定されている単語間隔に対する増加分(幅)、または差分(幅)を指定します。負の値も指定できるのですが、実装上、ある一定以上の負の値を指定すると制限が生じる事があります。つまり、一定以上の負の値になると、それ以上は単語間隔を狭めることができなくなり、表示にも変化がなくなります。

なお、word-spacingプロパティの値が "normal" 以外の場合に text-alignプロパティによる両端揃え(text-align : center ;)を伴うと、単語間隔の影響を受けて、両端揃えが無効になる可能性があります。

単語間隔の指定に対して、テキストの文字と文字の間隔(字間)の操作には letter-spacingプロパティを用います。

word-spacingプロパティの実装状況

IE
Firefox
Opera
Chrome
Safari
iOS
Android

サンプル

.normal     { word-spacing : normal ; }
.increase  { word-spacing : 10px ; }
.decrease { word-spacing : -5px ; }

日本語のように単語と単語を区切らない言語の場合は、あえて半角スペースを加えて区切らない限り単語としては認識されませんが、不必要に半角スペースを加えると、音声出力機器を利用している非視覚環境において作者の意図しない読み上げ(表現)が行われ、ユーザを混乱させることがあるので注意してください。このため日本語のように単語と単語を区切らない言語で使用するのには適していません。