トップ HTML/CSS 日本語テキスト両端揃え【IE、Firefox対応】

日本語テキスト両端揃え【IE、Firefox対応】

CSSで日本語のテキストを両端揃えする方法を紹介します。
ぐぐって上位に出てくるやり方だとFirefoxだけうまくいかなかったのでその辺も説明します。

1. 両端揃えのCSS
2. なぜtext-align: justifyだけじゃだめなのか
   1. text-justifyに指定できる値（一部）

両端揃えのCSS

text-align: justify; /* 基本 */
text-justify: inter-ideograph; /* IEで必要 */
text-justify: inter-character; /* Firefoxで必要 */

上記3行を両端揃えしたい箇所に適用すればOKです。

chrome、Firefox、Edge、IE等で動作確認しています。

なぜtext-align: justifyだけじゃだめなのか

text-align: justifyは両端揃えを指定するプロパティです。

そして、text-justifyはtext-align: justifyが指定されているときに、どんなふうに両端ぞろえをするかを指定するプロパティです。（たぶん）

text-justifyに指定できる値（一部）

none

両端揃えは行わない

auto（初期値）

ブラウザに任せる

inter-word

単語間を広げて調整（英語などに適している）

inter-character

文字間を広げて調整（日本語などに適している）

inter-ideograph（IEが独自に採用）

単語間、文字間の両方を広げて調整（謎に包まれている）

Can I use：text-justify

Can I useを参照していただければわかりますが、FirefoxとIEだけ（Edgeも）なぜかtext-justifyに対応しています。

FirefoxとIEはtext-align: justifyだけ指定しても、
text-justifyが初期値のautoのままだとブラウザが広げてくれないってことなんだと思います。(名推理)

ちなみに、text-justify: inter-characterはFirefoxでは効きますが、IEでは認識されません。
そして、text-justify: ideographはIEでは効きますが、Firefoxでは認識されません。

なので、CSSに指定する際の順番はどちらが上でも問題なさそうです。