- 2009年1月13日 23:16
CSS のお話です。
CSS で段落の右揃え左揃えといったら text-align プロパティですが、値として left, center, right の他に justify という値を選択できます。
'text-align'
Value: left | right | center | justify | <string> | inherit
Initial: depends on user agent and writing direction
Applies to: block-level elements
Inherited: yes
Percentages: N/A
Media: visual
「そんなの本で読んで知ってるよ、 均 等 割 り 付 け に使うやつだろ。IEしか対応してないみたいだし、使いどころ無いよね正直。」
な皆さんこんにちは、実は text-align:justify には別の使い方もあります。
巷でよく紹介されるのはこんな感じです。
text-align:justify -- IE においてのみ text-justify:distribute-all-lines; と組み合わせることで均等割り付けを実現できます。 IE 以外のブラウザは対応していないので意味はありません。
......実は CSS の均等割り付けはなにも強制的な均等割り付けに限らず利用できます。具体的には IE, Firefox の両方で、行末揃えに利用できます。（Google Chrome は違いがでませんが。）
以下の文章において、文末の日本語のがたがた具合に注目です。
| text-align:justify; | text-align:left; |
|---|---|
組版（くみはん）とは、印刷の一工程で、文字や図版などの要素を配置し、紙面を構成すること。組み付けとも言う。本来は活版印刷の用語で、文字通り版を物理的に組むこと、活字を並べて結束糸で縛ったものを「組み版」と呼んだことに由来する 現在ではDTPなどにおいても、レイアウトソフトを用いて紙面を作ることを指し、そういった作業を行うことを組むと表現する。 |
組版（くみはん）とは、印刷の一工程で、文字や図版などの要素を配置し、紙面を構成すること。組み付けとも言う。本来は活版印刷の用語で、文字通り版を物理的に組むこと、活字を並べて結束糸で縛ったものを「組み版」と呼んだことに由来する 現在ではDTPなどにおいても、レイアウトソフトを用いて紙面を作ることを指し、そういった作業を行うことを組むと表現する。 |
文章は『Wikipedia:組版』の冒頭からいただきました。
違いがおわかりいただけるでしょうか。
Firefox 等のブラウザで text-align:justify; を利用すると、段落の一番最後は左揃えのままに、途中の行を全て均等揃えにしてくれます。紙媒体への印刷ではかなり一般的な形式です。
IE でもこれを利用する場合には、text-align:justify; に加えて、 text-justify: inter-ideograph; が必要です。上記の例にも実際は入っています。
一般の、いわゆる全行の強制均等割り付けに利用される distribute-all-lines と異なり、 inter-ideograph では改行された行のみが均等割り付けされます。
というわけで、和文のみで構成された段落については、text-align: justify; でよりきれいになります。
ただし、英単語を高頻度で含む文章については文字組みが汚くなることがあるのでご注意を。
履歴
- 2009年1月14日 推奨する属性を distribute から inter-ideograph に変更しました。
- 2009年9月8日 ちょっと校正
- Newer: 文字コード統一ワンライナー
- Older: MySQL の照合順序の命名規則