この記事は 4 年 3 ヶ月 4 日 前に書かれたものです。最新の情報とは異なる場合がありますのでご注意ください。
今までWebサイト上ではテキストの両端揃えは出来ないと諦めていました。というより、Internet Explorer が存在するが為に諦めていたといべきでしょう。
Firefoxなど、Web標準に準拠したブラウザでは、text-align プロパティに“justify”の値を指定することで両端揃えにできますが、IE は最新版の Ver.7 でさえも text-align:justify に対応していません。
でも、IEでも両端揃えが、それも W3C の Validator をクリアして実現する方法を知り、最近仕事で制作するサイトはこれを使っています。このBlogも本文部分を両端揃えにしました。
それは、IE の独自拡張である“text-justify: inter-ideograph;”を、IE の独自タグである条件付きコメントで読み込む方法です。
“text-justify: inter-ideograph;”は、IE で両端揃えを実現できますが、W3C の仕様に無いため、構文エラーとなります。
そこで、これを IE 専用の CSS ファイルにして、条件付きコメントで XHTML に読み込みます。
つまり、正規の CSS には“text-align:justify”を記述し、IE 専用の CSS に“text-justify: inter-ideograph;”を記述して、これを XHTML の <head> 内に、
<!--[if IE]>
<link rel="stylesheet" href="<$MTBlogRelativeURL$>css/ie_win.css" type="text/css" />
<![endif]-->という具合に記述して読み込むわけです。
これで、IE 以外には“text-align:justify”の指定によって、IE は“text-justify: inter-ideograph;”の指定によって両端揃えとなります。
その上、XHTML に記述した条件付きコメントは、IE 以外には単なるコメントとして扱われるため、W3C の Validator もクリアできるわけです。
連続する半角英数を折り返す“word-break: break-all;”も同様で、これについては以前から同様の方法で実現していました。
一方、最近ではこれら IE が対応していない CSS プロパティや値を補うための JavaScript もいろいろ公開されているみたいですね。
Recent Comments