Webページ上でのテキストの均等割付け【文章編】

Publish:

Category:CSS

  • Hatena Bookmark:
  • Twitter:

Webページで雑誌のように左右揃えで文章を表示したいときのCSS指定方法を割と毎回調べてしまうのでメモしておきます。

均等割付け用CSSプロパティ

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

「inter-ideograph」は日本語・中国語・韓国語などの単語間隔と文字間隔の両方を調整して均等割付する指定。
3行目の「-ms-text-justify」はIE8からの独自拡張としての記述だけれど、今のところ「-ms-」が無い「text-justify」でもIE8は解釈している様子。なので実質なくてもいいかも。

均等割り付けサンプル

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。

青空文庫

ブラウザ対応状況

Webkit系ブラウザは未対応。表示結果は以下の通り。

Internet Explorer 6~8
FireFox 3.6
Chrome 6 ×
Safari 5 ×
テキスト均等割り付け ブラウザ比較

「text-justify」はCSS3の草案にあがっているので、全ブラウザ実装もそう遠くないのかも?

Post Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Return to page top