Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

各ブラウザでの均等割り付け比較

66,240 views

Published on

各ブラウザで均等割り付けを実装する方法と比較をまとめました。

We have put together a comparison with how to implement an equal allocation in each browser .

Published in: Technology
  • Be the first to comment

  • Be the first to like this

各ブラウザでの均等割り付け比較

  1. 1. text-align:justify 及び text-justifyに関する考察 @sota1235
  2. 2. 調査対象ページ • bicheの記事ページ タイトル:「夕方のお疲れ顔をメイクで解消する方法」 4個目の見出しがいずれのブラウザでも崩れていたので調 査対象としました • URL https://www.cosme.net/biche/articles/ RuC4lXuJ
  3. 3. 調査対象ブラウザ • Chrome 43 • FireFox version 38.01 • Safari version 7.1.6 • Internet Explorer 11.0.7
  4. 4. Chrome 43 • デフォルト   両端 えなし • スタイルシートによる両端 え   右図のCSSを当てることで可能
  5. 5. Chrome 43 スタイル適用前 スタイル適用後
  6. 6. FireFox(ver 38.01) • デフォルト   両端 えなし • スタイルシートによる両端 え   右図のCSSを当てることで可能
  7. 7. FireFox(ver 38.01) スタイル適用前 スタイル適用後
  8. 8. Safari(version 7.1.6) • デフォルト   両端 えなし • スタイルシートによる両端 え   右図のCSSを当てることで可能
  9. 9. Safari(version 7.1.6) スタイル適用前 スタイル適用後
  10. 10. IE(version 11.0.7) • デフォルト   両端 えなし • スタイルシートによる両端 え   右図のCSSを当てることで可能   ただし他ブラウザと若干挙動が違うので要注意   text-align:justifyのみだと両端 え不可
  11. 11. IE(version 11.0.7) スタイル適用前 スタイル適用後
  12. 12. 備考 - IEでの挙動 • IEではtext-align:justifyを指定した時点で自動的 にtext-justify:autoが適用される • text-justifyはIEのみがサポートする均等割付の方 式を指定するプロパティ • autoの値はデフォルトだと英単語用のinter-wordに なっているので明示的に日本語用のinter-ideograph を指定する必要がある。

×