acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

均等割付でテキストの両端を揃える

ads

2007/12/27 初稿

何も指定していない場合のテキストは左端は揃いますが右端は綺麗に揃いません。
これを均等割付で綺麗に揃えるためには以下のコードを記述します。

p{
text-align:justify;
text-justify:inter-ideograph;
}

text-alignは文字の表示位置をコントロールするプロパティです。通常はcenterと指定して中央寄せなどに使用しますが均等割付にするためには両端揃えのjustifyと指定します。Firefoxではこれで均等割付ができます。

text-justifyはtext-align:justify;の時の均等割付の形式を指定するプロパティです。これを単語間隔と文字間隔を自動調整するため日本語に最適とされるinter-ideographと指定します。
CSS3に実装予定のプロパティですがIEには先行実装されています。この二つを指定しないとIEでは均等割付ができません。

こちらもCSS3に実装予定でIEに先行実装のプロパティですが禁則処理のプロパティline-breakをstrictと指定すると禁則処理をしてくれます。 上記の均等割付と併せて禁則処理も指定しておくよ良いでしょう。
なお、Firefoxでは標準仕様で禁則処理に対応しています。

p{
line-break: strict;
}

Copyright (C) acky. All Rights Reserved.