均等割付の方法〜HTML

HTML&CSS

HTMLの文書でテキストを均等割付したい場合があります。
読ませる文章よりも見せたい文章にそのような要望が多いかもしれません。

HTMLでは見せる文章も重要な要素です。

スポンサーリンク

均等割付の方法

結論から言うとtext-align: justifyを使用します。ちょっと前までwebkit系のChromeやSafariでは対応していなかったのですが、現在の最新版では対応しています。

均等割付のサンプル

text-align: justify;
text-justify: inter-ideograph;

text-alignは行揃えの位置・均等割付を指定するプロパティです。
値にjustifyを指定すると均等割付になります。

text-justifyプロパティは、W3Cで審議中の仕様をInternet Explorerが独自に採用したものでIE用です。値には次のものがあります。

IE用 text-justifyプロパティの値

auto
ブラウザに依存します。旧IEでは、半角スペースや全角スペースを調整して均等割付

distribute
単語間隔と文字間隔を調整して均等割付

distribute-all-lines
単語間隔と文字間隔を調整して均等割付。 途中の改行や最終行などの文字数が一行に満たない行も均等に割り付け

inter-cluster
アジアの言語などの単語間隔を持たない言語のテキストを均等割り付け

inter-ideograph
日本語・中国語・韓国語など表意文字のテキストの、単語間隔と文字間隔の両方を調整して均等割付

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

kashida
kashidaなどの筆記体を引き伸ばしたものを使用することで、アラビア語などのスクリプトを均等割付をする

newspaper
単語間隔と文字間隔を調整して均等割付。英文などラテンアルファベットに最適な指定方法

タイトルとURLをコピーしました