text-emphasis-position

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

構文

css
/* 初期値 */
text-emphasis-position: auto;

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

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 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;

このプロパティは 1 つまたは 2 つの値を受け入れます。

  • 指定された値が 1 つだけの場合、autooverunder のいずれかになります。over または under のみが使用される場合、 right が既定位置として想定されます。
  • 2 つの値が指定された場合、 overunder のどちらかと rightleft のどちらかが含まれていなければなりません。その順序は重要ではありません。

値には次のようなものがあります。

auto

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

over

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

under

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

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

left

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

解説

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

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

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

公式定義

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

形式文法

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

圏点の位置を追加

ドロップダウンメニューを使用して、圏点の位置を変更します。この操作により、 <section> 要素のクラスが変更され、テキスト上の圏点の位置が更新されます。

HTML

html
<section id="setting" class="auto">
  <p class="horizontal" lang="zh">你好世界</p>
  <!-- Hello World in Chinese -->
  <p class="vertical" lang="ja">世界、こんにちは。</p>
  <!-- Hello World in Japanese -->
</section>

CSS

css
section p {
  text-emphasis: filled circle tomato;
  text-emphasis-position: auto;
}
.over-right p,
.preferred p [lang="ja"] {
  text-emphasis-position: over right;
}
.over-left p {
  text-emphasis-position: over left;
}
.under-right p,
.preferred p [lang="zh"] {
  text-emphasis-position: under right;
}
.under-left p {
  text-emphasis-position: under left;
}
.preferred p [lang="ja"] {
}

結果

「圏点の位置」のドロップダウンを使用して、強調マークの位置を選べます。ドロップダウンで preferred オプションは、解説の節で説明したように、優先位置を使用します。

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

編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-emphasis-position
auto
ExperimentalNon-standard
left
over
right
under

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報