hanging-punctuation

hanging-punctuationプロパティは、webデザイナーにweb上のタイポグラフィをより細かく制御できるようにすることを目的としています。

句読点の背後にあるアイデアは、読書の流れを維持するために、ボックスの”外側”のテキスト要素の最初から（または最後に小さい拡張）いくつかの句読点文字を置くことです。

基本的に、最初の文字が文書の残りの部分と適切に整列されるように、その引用符、箇条書きなどを左（またはrtlモードでは右）にわずかに移動します。

によるこの記事からの図このプロパティはオプションであるため、ブラウザメーカーはサポートしていない場合があります。

hanging-punctuation: none | || last ]blockquote p { hanging-punctuation: first;}

none

文字がハングしません。 これは、このプロパティの既定値です。

first

要素の最初の書式設定された行の先頭に使用可能な文字がハングします。

last

要素の最後の書式設定された行の末尾に使用可能な文字がハングします。

force-end

行末のストップまたはコンマがハングします。

句読点は強制的にハングアップし、正当化のために行を測定するときには考慮されません。

allow-end

行末のストップまたはカンマは、正当化の前に収まらない場合はハングします。

最初の行の終わりにある句読点は、吊り下げずに収まるため、吊り下げられません。 しかし、第二の行では、十分なスペースがないので、ハングします。

使用可能な文字

ユーザーエージェントは、このリストに任意の文字を追加することができます。 仕様を引用する:＜６ ０ ９ ６＞＜５ ０ ７＞＜８ ０ ０ ６＞Ｕ Ａは、必要に応じて他の文字を含むことができる。

関連物件

• text-indent
• text-align

その他のリソース

• hanging-punctuation 仕様
• hanging-punctuationCSS付きSteve Hickeyによる

ブラウザのサポート

サポートされていないブラウザの適切なフォールバックは、負のテキストインデントを次のように使用することです:

blockquote p { text-indent: -0.5em; /* Change according to your font */}

箇条書きリストの場合、箇条書きの位置がoutsideに設定され、コンテナのオーバーフローがhiddenに設定されていないことを確認することができます。