Hanging punctuation
テキストブロックの端に来る句読点（括弧や引用符など）をマージン領域にはみ出させることで、視覚的に整った文字組みを実現します。タイポグラフィにおいて伝統的に使われてきた「ぶら下げ組み」をCSSで実現する機能です。特に日本語組版で重要な役割を果たします。
概要
テキストブロックの端に来る句読点（括弧や引用符など）をマージン領域にはみ出させることで、視覚的に整った文字組みを実現します。タイポグラフィにおいて伝統的に使われてきた「ぶら下げ組み」をCSSで実現する機能です。特に日本語組版で重要な役割を果たします。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 未対応
基本構文
CSS
p {
hanging-punctuation: first last;
}
blockquote {
hanging-punctuation: first allow-end;
}実務での使いどころ
-
高品質な文字組みの実現
書籍や雑誌のような美しい文字組みを再現するため、行頭・行末の句読点をぶら下げて視覚的な整列を改善します。
注意点
- 2026年3月時点でどの主要ブラウザでも標準的にサポートされていないため、プログレッシブエンハンスメントとして使用してください。
アクセシビリティ
- 句読点のぶら下げは純粋に視覚的な変更であり、スクリーンリーダーの読み上げには影響しません。