最終更新日

hanging-punctuationプロパティ

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外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。