WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > text-justify
text-justify  文章 

均等割付の形式を指定するCSS3草案。

このエントリーをはてなブックマークに追加

text-justifyプロパティは、W3Cで審議中の仕様をInternet Explorerが独自に採用したもので、 text-alignプロパティの値がjustifyのとき、テキストの均等割付の形式を指定する際に使用します。

text-justifyプロパティは、CSS3で標準採用されるかもしれません。

●auto
ブラウザに依存します。IE5やIE6では、半角スペースや全角スペースを調整して均等割付するようです。
●distribute
単語間隔と文字間隔を調整して均等割付します。
●distribute-all-lines
単語間隔と文字間隔を調整して均等割付します。途中の改行や最終行などの文字数が一行に満たない行も均等に割り付けます。
●inter-cluster
アジアの言語などの単語間隔を持たない言語のテキストを均等割り付けします。
●inter-ideograph
日本語・中国語・韓国語など表意文字のテキストの、単語間隔と文字間隔の両方を調整して均等割付します。
●inter-word
単語間隔のみを調整して均等割付します。
●kashida
アラビア文字のテキストの均等割り付けを意図しています。
●newspaper
単語間隔と文字間隔を調整して均等割付します。英文などラテンアルファベットに最適な指定方法です。

スタイルシート部分は外部ファイル(sample.css)に記述。
p.sample1 , p.sample2 , p.sample3 , p.sample4 , p.sample5 , p.sample6 , p.sample7 , p.sample8 {
width:100px; margin-right:50px; background-color:yellow;
float:left;
text-align:justify;
}
p.sample1 {text-justify:auto;}
p.sample2 {text-justify:distribute;}
p.sample3 {text-justify:distribute-all-lines;}
p.sample4 {text-justify:inter-cluster;}
p.sample5 {text-justify:inter-ideograph;}
p.sample6 {text-justify:inter-word;}
p.sample7 {text-justify:kashida;}
p.sample8 {text-justify:newspaper;}

autoで設定

distributeで設定

distribute-all-linesで設定

inter-clusterで設定

inter-ideographで設定

inter-wordで設定

kashidaで設定

newspaperで設定