テキストを均等配置

• 文字サイズを縮小
• 文字サイズを拡大
• 元の文字サイズに戻す

1. スタッフブログ
2. 業界ブログ
3. 業界ポッド？

例えば<p>などのブロック要素にテキストを流し込むとき、
特に指定しないとブロック要素の右側の文字は、きれいに揃ってくれません。

そこで、そのブロック要素に“text-align”プロパティをあててみます。
プロパティには「均等配置」を意味する“justify”を指定します。

// HTMLソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<p>
    ～長い文章を入れてみてください。～
</p>

// CSSソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

p {
    text-align: justify;
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

このようにCSSを指定すると、ブロック要素の右側に文字が揃うようになり、見た目スッキリします。

でも、いつものようにそう一筋縄ではいかないのがCSSの怖いところ。
IE6では“text-align: justify;”を無視してしまいますので、右側の文字が揃いません。

IE6にはIEの独自拡張で“text-justify”というプロパティが存在します。
これを適用することで、IE6でも右側がきれいに揃ってくれます。

// CSSソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

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

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

一応“* html ”をつけてIE6以前のみに対応するようにCSSをハックしています。
“text-justify”プロパティには以下の指定方法があります。

------------------------------------------
[auto]
ブラウザによる自動判別。

[distribute]
単語と文字のそれぞれの間隔を調整して均等割付。

[distribute-all-lines]
単語と文字のそれぞれの間隔を調整して均等割付。
改行や最後の行が一行に満たない場合も均等割付。

[inter-cluster]
単語間隔を持たない言語のテキストを均等割付。

[inter-ideograph]
単語と文字のそれぞれの間隔を調整して均等割付。
日本語・中国語・韓国語などの表意文字向け。

[inter-word]
単語間隔のみを調整して均等割付。

[kashida]
アラビア文字を均等割付。

[newspaper]
単語と文字のそれぞれの間隔を調整して均等割付。
英文などアルファベット向け。
------------------------------------------

この例では、テキストが日本語なので“inter-ideograph”を使っています。

さぁ、これで主要ブラウザでは文字がきれいに揃うようになりました......。と思いきや、
まだまだ落とし穴があったのです。


落とし穴については、また次回。(そんなに引っ張るネタじゃない気もしますけど。)