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

試してみましょう

text-emphasis-position: auto;

text-emphasis-position: over right;

text-emphasis-position: under right;

text-emphasis-position: auto;
writing-mode: vertical-rl;

text-emphasis-position: over left;
writing-mode: vertical-rl;

text-emphasis-position: over right;
writing-mode: vertical-rl;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-emphasis: filled double-circle #ffb703;
}

構文

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 つだけの場合、auto、over、under のいずれかになります。over または under のみが使用される場合、 right が既定位置として想定されます。
2 つの値が指定された場合、 over か under のどちらかと right か left のどちらかが含まれていなければなりません。その順序は重要ではありません。

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

auto: 横書きモードではテキストの上に、縦書きモードではテキストの右に圏点を描きます。
over: 横書きモードでテキストの上に圏点を描きます。
under: 横書きモードでテキストの下に圏点を描きます。
right: 縦書きモードでテキストの右に圏点を描きます。
left: 縦書きモードでテキストの左に圏点を描きます。

解説

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

望ましい圏点とルビの位置
言語	望ましい位置	図
日本語	over	right
韓国語
モンゴル語
中国語	under	right

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

公式定義

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

形式文法

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

例

圏点の位置を追加

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

HTML

<p class="unsupported">ブラウザーが <code>auto</code> の値に対応していません。</p>
<label for="position">圏点の位置:</position>
<select id="position">
  <option value="auto">auto</option>
  <option value="over-right">over right</option>
  <option value="over-left">over left</option>
  <option value="under-right">under right</option>
  <option value="under-left">under left</option>
  <option value="preferred">preferred</option>
</select>

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

.unsupported {
  color: red;
}
@supports (text-emphasis-position: auto) {
  .unsupported {
    display: none;
  }
}
.horizontal {
  writing-mode: horizontal-tb;
}
.vertical {
  writing-mode: vertical-rl;
}
section {
  display: flex;
  justify-content: space-around;
}

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"] {
}

const position = document.querySelector("#position");
const setting = document.querySelector("#setting");
const updateClass = () => {
  const currentClass = setting.classList;
  setting.classList.replace(currentClass, position.value);
};
position.addEventListener("change", updateClass);

結果

「圏点の位置」のドロップダウンを使用して、強調マークの位置を選べます。ドロップダウンで 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