text-emphasis
text-emphasis は東アジアの組版で一般的な圏点を文字の上（または下）に付ける。text-emphasis-style で記号の種類（dot / circle / sesame など）を、text-emphasis-color で色を指定する。text-emphasis-position で位置を制御する。
概要
text-emphasis は東アジアの組版で一般的な圏点を文字の上（または下）に付ける。text-emphasis-style で記号の種類（dot / circle / sesame など）を、text-emphasis-color で色を指定する。text-emphasis-position で位置を制御する。
対応ブラウザ
デスクトップ
Chrome 99+
Edge 99+
Safari 7+
Firefox 46+
モバイル
Chrome Android 99+
Safari iOS 7+
Firefox Android 46+
基本構文
CSS
/* 基本的な圏点 */
.emphasis {
text-emphasis: filled sesame;
text-emphasis-color: #333;
}
/* ショートハンド + 位置指定 */
.emphasis-bottom {
text-emphasis: filled dot #e63946;
text-emphasis-position: under right;
}実務での使いどころ
-
日本語テキストの強調
日本語の文章で重要な語句に圏点を付け、伝統的な強調表現を行う。
注意点
- 圏点は行間を広げるため、line-height の調整が必要になる場合がある。
- ラテン文字ベースの言語では馴染みがなく、太字や斜体で代用されることが多い。
アクセシビリティ
- スクリーンリーダーは圏点を読み上げない。重要な情報は <em> や <strong> でマークアップして意味的にも強調すること。