Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

Hanging punctuation

hanging-punctuation は CSS のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。

句読点タイポグラフィ

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
hanging-punctuation
Preview
10
allow-end
10
10
first
10
10
last
10
10
none
10
10
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 文字「U+0027」および「U+0022」は、「first」および「last」キーワードではサポートされていません。 バグ 309123 を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 文字「U+0027」および「U+0022」は、「first」および「last」キーワードではサポートされていません。 バグ 309123 を参照してください。

基本構文

CSS 
p {
  hanging-punctuation: first last;
}
blockquote {
  hanging-punctuation: first allow-end;
}

ライブデモ

first last

CSS First last demo.

プレビュー全画面表示

first allow-end

CSS First allow-end demo.

プレビュー全画面表示

Normal comparison

CSS Normal(comparisonuse) demo.

プレビュー全画面表示

実務での使いどころ

  • 高品質な文字組みの実現

    書籍や雑誌のような美しい文字組みを再現するため、行頭・行末の句読点をぶら下げて視覚的な整列を改善します。

注意点

  • 2026年3月時点でどの主要ブラウザでも標準的にサポートされていないため、プログレッシブエンハンスメントとして使用してください。

アクセシビリティ

  • 句読点のぶら下げは純粋に視覚的な変更であり、スクリーンリーダーの読み上げには影響しません。

参考リンク