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