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

テキストの両端揃え|CSS

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-justifytext-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に指定する際の順番はどちらが上でも問題なさそうです。

最近の記事