text-emphasis-position：テキストに付加する圏点、傍点、脇点の位置を指定する

X
f
LINE
B!
p

初期値	`over right`
適用対象	全ての要素
継承	しない
アニメーション	離散値
対応ブラウザ	caniuseで確認

text-emphasis-positionプロパティの説明

text-emphasis-positionは、テキストに付加する圏点、傍点、脇点の位置を指定します。圏点（けんてん）、傍点（ぼうてん）、脇点（わきてん）とは、日本語の文章で文字の強調を行うときに、文字の上や脇に付加する装飾的な点のことです。

インライン方向のボックスに圏点を表示させるための十分な空間がない場合は、行の高さが押し広げられることがあります。

圏点の記号や色を変えるには以下のプロパティを使用します。

text-emphasis-positionに指定できる値

over: 横書きモードの時に圏点をテキストの上に表示します。
under: 横書きモードの時に圏点をテキストの下に表示します。
right: 縦書きモードの時に圏点をテキストの右に表示します。
left: 縦書きモードの時に圏点をテキストの左に表示します。

text-emphasis-positionの使い方とサンプル

text-emphasis-positionプロパティの構文は以下の通りです。

CSS

/* 初期値 */
text-emphasis-position: over right;

/* キーワード値 */
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;
text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;

/* グローバル値 */
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-postition: revert;
text-emphasis-position: unset;

text-emphasis-positionの実例

それでは実際にtext-emphasis-positionプロパティの書き方を見ていきましょう。以下の例は、段落の中の特定の文字列に対して圏点を付加した時の表示です。

ここでは、縦書きと横書きにした時の表示位置を比較します。圏点の記号や色に関する指定を確認するには、text-emphasisの項目を参照して下さい。

表示確認

CSS

.samp_box {
	padding: 1rem;
	background: #eee;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.samp_box > section {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #fff;
}
section h1 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
section > p {
	margin: 1rem 0 0;
}
p[class="vtext"] {
	writing-mode: vertical-rl;
}
p > em {
	font-style: normal;
	text-emphasis: filled sesame;
}
.tep_1 {
	text-emphasis-position: over right;
}
.tep_2 {
	text-emphasis-position: under left;
}

HTML

<div class="samp_box">
	<section>
		<h1>text-emphasis-position: over right;</h1>
		<p>横書きで<em class="tep_1">圏点を表示</em>させます。</p>
		<p class="vtext">縦書きで<em class="tep_1">圏点を表示</em>させます。</p>
	</section>
	<section>
		<h1>text-emphasis-position: under left;</h1>
		<p>横書きで<em class="tep_2">圏点を表示</em>させます。</p>
		<p class="vtext">縦書きで<em class="tep_2">圏点を表示</em>させます。</p>
	</section>
</div>