text-emphasis-position

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

試してみましょう

構文

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-position: revert;
text-emphasis-position: revert-layer;
text-emphasis-position: unset;

over

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

under

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

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

left

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

解説

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

望ましい圏点とルビの位置
言語 望ましい位置
横書き 縦書き
日本語 over right 日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。 日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。
韓国語
モンゴル語
中国語 under right 中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。

メモ: text-emphasis 一括指定プロパティを使用して、 text-emphasis-position を設定することはできず、また初期化されることもありません。

公式定義

初期値over right
適用対象すべての要素
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

text-emphasis-position = 
[ over | under ] &&
[ right | left ]?

ルビを圏点より優先させる場合

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

css
ruby {
  text-emphasis: none;
}

圏点よりルビを優先させる場合

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

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

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

仕様書

Specification
CSS Text Decoration Module Level 3
# text-emphasis-position-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報