IEやEdgeでも両端揃え(均等割り付け)にできるtext-justifyプロパティ

前のページでご紹介したように、IEやEdgeで表示する場合、日本語などの「空白文字で単語を区切らない言語」ではtext-alignプロパティに値「justify」を指定するだけでは両端揃え(均等割り付け)になりません。日本語文字だけしかない行も含めて全行を両端揃えにするには、さらにtext-justifyプロパティを併記して以下のように記述します。
p {
   text-align: justify; /* 両端揃え */
   text-justify: inter-ideograph; /* 両端揃えの種類 */
}
上記のように2行を同時に指定しておくと、IEやEdgeでも意図通りに両端揃えで表示されます。下図は、Edgeでの表示例です。左側から順に、
  • 何も指定しなかった場合(灰色枠)、
  • text-alignプロパティのみを使った場合(赤色枠)、
  • text-alignプロパティに加えてtext-justifyプロパティを併記した場合(青色枠)
の表示例です。最後の表示例(青色枠)でだけ、うまく両端揃えにできていることが分かります。

Edgeでの表示例 (text-justifyプロパティも併記すれば、日本語文でも両端揃えができる)

Edgeでの表示例 (text-justifyプロパティも併記すれば、日本語文でも両端揃えができる)


実際にお使いの環境で表示を確認するには、サンプルページ「両端揃え(均等割り付け)での表示例」をご覧下さい。

text-justifyは、両端揃えの方法を選択するプロパティ

上記のCSSソースで加えたtext-justifyプロパティは、両端揃えの方法を指定するプロパティです。これは、text-alignプロパティの値に「justify」が指定されている場合のみで有効になります。IEやEdgeでは値に「inter-ideograph」を指定すると、漢字・ひらがな・カタカナなどを含めたすべての文字間隔を調節して両端揃えが実現できます。

※ideographとは、表意文字・表意記号のことです。日本語以外でも該当する言語があります(例えば中国語など)。

CSS3の仕様では、まだ固まっていない
このtext-justifyプロパティに指定できる値は、まだ規格としては固まっていません。このプロパティ自体は、CSS3のTextモジュールの最終草案には含まれています。しかし、将来的には削除されるかも知れないとの注釈付きで掲載されているものです。

また、上記のCSSソースで記述した値「inter-ideograph」は、W3Cによる最終草案での仕様には含まれていません。しかし、Microsoftによる仕様には含まれています。したがって、少なくとも現時点では「IE・Edgeの独自仕様」と考えておく方が良いでしょう。

text-justifyプロパティに値「inter-ideograph」を指定して英文を表示するとIEでは問題がある

なお、text-justifyプロパティを併記した場合には、IEを使って英文を表示する際に若干の問題が起きます。

下図は、IE11で英文を表示した場合の例です。text-justifyプロパティに値「inter-ideograph」を指定した例(右端の青色枠)では、英文であるにも関わらず(単語ごとではなく)文字ごとに空間が調整されてしまい、若干不自然に見えてしまっています。特に目立つ部分に緑色の丸枠を付けてみました。表示を比較してみて下さい。

text-justifyプロパティに値「inter-ideograph」を指定して英文をIE11で見ると、英字であっても文字の間隔で調整されている

text-justifyプロパティに値「inter-ideograph」を指定して英文をIE11で見ると、英字であっても文字の間隔で調整されている


日本語の場合にはこのように文字単位で空間を調整することで両端揃えされるのが良いのですが、英文では困るでしょう。したがってこの方法は、中身が英文ではない場所(少なくとも英文が中心コンテンツではない場所)だけに適用するようにした方が良いでしょう。

各行の左端だけでなく右端も揃えて表示したい

今回は、各行の左端だけでなく右端もきっちり揃える両端揃え(均等割り付け)を実現する方法をご紹介いたしました。特に幅の狭いボックス内などで文章を両端揃えで表示すると、整頓されたイメージが出せます。見栄えが重要な箇所の文章に、ぜひ活用してみて下さい。