★このページでは、IEで独自に拡張された設定について解説しています。

動作確認されているのはIE6.0のみですので、それ以外のバージョン、ブラウザでは正しく表示されない場合があります。

 

初級篇★ページ作りの基礎知識2. スタイルシートを使ってみよう

VOL13. IE独自拡張による設定 その3 ★ テキスト1 均等割付け(IE5.0以降で有効)

 

text-justify: <値>;

行揃えを指定する「text-align: 」というプロパティの<値>には、既にVol8-その3で挙げた「left、center、right」の他に「justify」があります。これは文字の均等割付けを指示する<値>ですが、これ単体では動作しません。「text-align: justify」とセットにして「text-justify: <値>;」というプロパティを指定した時のみ、IE5.0以降で反映されます。

つまり、「text-align: justify」で行揃えは均等割付けであることを指示し、更に均等割付けの型を「text-justify: <値>」によって指示する必要があるということです。ただ、一応はこのように定められているようなのですが、実際にIE6.0で英文と和文を表示させてみると、下に示した7つの<値>のうち特に変化が見られるのは「distribute-all-lines」だけで、他はそれほど大きな違いはありませんでした。適用する言語や閲覧するブラウザによっても違いは出ると思いますが、英文や和文の場合は特に意識して設定しなくても、デフォルトの「auto」でブラウザが適当によろしくやってくれるようです。従って、知識程度に覚えておかれると良いと思います。

 

このプロパティに使える<値>には、以下の7つのキーワードがあります。

auto ... ブラウザが自動的に判断(デフォルト)

(欧文向け)

newspaper ... 単語間隔と文字間隔の両方を調整して均等に割り付ける (行末に満たない最終行は均等割付しない)

inter-word ... 単語間隔のみを調整して均等に割付ける (行末に満たない最終行は均等割付しない)

(アジア系言語向け)

distribute ... 単語間隔と文字間隔の両方を調整して均等に割り付ける (行末に満たない最終行は均等割付しない)

distribute-all-lines ... 単語間隔と文字間隔の両方を調整して、行末に満たない最終行まで均等に割り付ける

inter-cluster ... 欧文のように規則的な単語間隔を持たない言語のテキストを調整して均等に割り付ける

inter-ideograph ... 漢字などの文字間隔と単語感覚の両方を調整して均等に割り付ける

 

初級篇2.VOL13. IE独自拡張による設定・その2-8 <<

>> 初級篇2.VOL13. IE独自拡張による設定・その3-2

 

2007.7.16.