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.
text-emphasis-position は CSS のプロパティで、圏点が描かれる位置を設定します。ルビのテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。
試してみましょう
構文
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 right です。一方、中国語では、望ましい位置は under right となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置をまとめたものです。
| 言語 | 望ましい位置 | 図 | ||
|---|---|---|---|---|
| 横書き | 縦書き | |||
| 日本語 | over | right |
|
|
| 韓国語 | ||||
| モンゴル語 | ||||
| 中国語 | under | right |
|
|
メモ: text-emphasis 一括指定プロパティを使用して、 text-emphasis-position を設定することはできず、また初期化されることもありません。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
例
ルビを圏点より優先させる場合
編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 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
関連情報
- 個別指定プロパティ
text-emphasis-style,text-emphasis-colorおよび対応する一括指定プロパティtext-emphasis