text-emphasis-position

CSS の text-emphasis-position プロパティは、圏点が描かれる位置を設定します。ルビテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。

/* 初期値 */
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-position: unset;

望ましい位置

圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は over right です。一方中国語では、望ましい位置は under right となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置を要約するものです。

望ましい圏点とルビの位置

言語	望ましい位置		説明
	横書き	縦書き
日本語	over	right
モンゴル語
中国語	under	right

構文

値

over

横書きモードでテキストの上に圏点を描きます。

under

横書きモードでテキストの下に圏点を描きます。

right

縦書きモードでテキストの右に圏点を描きます。

left

縦書きモードでテキストの左に圏点を描きます。

形式文法

[ over | under ] && [ right | left ]

例

編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。

ruby {
  text-emphasis: none;
}

編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。

em {
  text-emphasis: dot; /* <em> 要素に text-emphasis を設定 */
}

em rt {
  display: none; /* <em> 要素内のルビを隠す */
}

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• 個別指定プロパティ text-emphasis-style, text-emphasis-color および対応する一括指定プロパティ text-emphasis