最終更新日 
hanging-punctuationプロパティ
hanging-punctuationは、句読点を行ボックスの外側に配置するプロパティです。
値には「none」「first」「last」「force-end」「allow-end」があり、初期値は「none」です。
このプロパティは、値の組み合わせ方のルールが複雑なので、正規表現を以下に示します。正規表現の読み方は「仕様書内の値定義の読み方」を参考にして下さい。
none | [ first || [ force-end | allow-end ] || last ]
■句読点の種類
hanging-punctuationで扱える句読点として、CSS3では以下のものが規定されています。
| 句読点 | 句読点名 | Unicode |
|---|---|---|
| , | COMMA | U+002C |
| . | FULL STOP | U+002E |
| ، | ARABIC COMMA | U+060C |
| ۔ | ARABIC FULL STOP | U+06D4 |
| 、 | IDEOGRAPHIC COMMA | U+3001 |
| 。 | IDEOGRAPHIC FULL STOP | U+3002 |
| ， | FULLWIDTH COMMA | U+FF0C |
| ． | FULLWIDTH FULL STOP | U+FF0E |
| ﹐ | SMALL COMMA | U+FE50 |
| ﹑ | SMALL IDEOGRAPHIC COMMA | U+FE51 |
| ﹒ | SMALL FULL STOP | U+FE52 |
| ｡ | HALFWIDTH IDEOGRAPHIC FULL STOP | U+FF61 |
| ､ | HALFWIDTH IDEOGRAPHIC COMMA | U+FF64 |
CSS3での変更点
・hanging-punctuationは、CSS3から新しく追加されたプロパティです。
| 初期値 | 適用先 | 継承 |
|---|---|---|
| none | インライン要素 | あり |
| 値 | 説明 |
|---|---|
| none | 句読点を行ボックスの外側に配置しない。（初期値） |
| first | 句読点を最初の行ボックスの外側に配置する。 |
| last | 句読点を最後の行ボックスの外側に配置する。 |
| force-end | 強制的に、句読点をすべての行ボックスの外側に配置する。 |
| allow-end | 必要があれば、句読点をすべての行ボックスの外側に配置する。 |
サンプルコード
hanging-punctuation: none; hanging-punctuation: first; hanging-punctuation: last; hanging-punctuation: force-end; hanging-punctuation: allow-end; hanging-punctuation: first last; hanging-punctuation: first last force-end; hanging-punctuation: first last allow-end;
参考文献：CSS Text Level 3
ザマワンにエントリーしました！
『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。