text-align:justify 及び

text-justifyに関する考察@sota1235

調査対象ページ• bicheの記事ページ

✓タイトル：「夕方のお疲れ顔をメイクで解消する方法」

✓4個目の見出しがいずれのブラウザでも崩れていたので調査対象としました

• URL

✓ https://www.cosme.net/biche/articles/RuC4lXuJ

調査対象ブラウザ

• Chrome 43

• FireFox version 38.01

• Safari version 7.1.6

• Internet Explorer 11.0.7

Chrome 43

• デフォルト

　⇒両端揃えなし

• スタイルシートによる両端揃え

　⇒右図のCSSを当てることで可能

Chrome 43スタイル適用前 スタイル適用後

FireFox(ver 38.01)

• デフォルト

　⇒両端揃えなし

• スタイルシートによる両端揃え

　⇒右図のCSSを当てることで可能

FireFox(ver 38.01)スタイル適用前 スタイル適用後

Safari(version 7.1.6)

• デフォルト

　⇒両端揃えなし

• スタイルシートによる両端揃え

　⇒右図のCSSを当てることで可能

Safari(version 7.1.6)スタイル適用前 スタイル適用後

IE(version 11.0.7)• デフォルト

　⇒両端揃えなし

• スタイルシートによる両端揃え

　⇒右図のCSSを当てることで可能

　⇒ただし他ブラウザと若干挙動が違うので要注意

　⇒text-align:justifyのみだと両端揃え不可

IE(version 11.0.7)スタイル適用前 スタイル適用後

備考 - IEでの挙動• IEではtext-align:justifyを指定した時点で自動的にtext-justify:autoが適用される

• text-justifyはIEのみがサポートする均等割付の方式を指定するプロパティ

• autoの値はデフォルトだと英単語用のinter-wordになっているので明示的に日本語用のinter-ideographを指定する必要がある。