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 2022年3月.
* 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; } 構文
/* 初期値 */ 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のどちらかが含まれていなければなりません。その順序は重要ではありません。
値には次のようなものがあります。
解説
圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は over right です。一方、中国語では、望ましい位置は under right となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置をまとめたものです。
| 言語 | 望ましい位置 | 図 | ||
|---|---|---|---|---|
| 横書き | 縦書き | |||
| 日本語 | over | right |  |  |
| 韓国語 | ||||
| モンゴル語 | ||||
| 中国語 | under | right |  | |
メモ: text-emphasis 一括指定プロパティを使用して、 text-emphasis-position を設定することはできず、また初期化されることもありません。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
text-emphasis-position =
[ over | under ] &&
[ right | left ]?
例
圏点の位置を追加
ドロップダウンメニューを使用して、圏点の位置を変更します。この操作により、 <section> 要素のクラスが変更され、テキスト上の圏点の位置が更新されます。
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
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 では、これは次のスタイルルールで実現できます。
ruby { text-emphasis: none; } 圏点よりルビを優先させる場合
編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。
em { text-emphasis: dot; /* text-emphasis を <em> 要素に設定 */ } em rt { display: none; /* <em> 要素内のルビを隠す */ } 仕様書
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-emphasis-position-property |