text-emphasis-position

CSStext-emphasis-position プロパティは、圏点が描かれる位置を設定します。ルビテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。

/* 初期値 */
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: unset;

初期値over right
適用対象すべての要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

望ましい位置

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

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

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

構文

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

形式文法

[ over | under ] && [ right | left ]

編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。

ruby {
  text-emphasis: none;
}

編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。

em {
  text-emphasis: dot; /* <em> 要素に text-emphasis を設定 */
}

em rt {
  display: none; /* <em> 要素内のルビを隠す */
}

仕様書

仕様書 状態 備考
CSS Text Decoration Module Level 3
text-emphasis の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 あり
完全対応 あり
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge ? Firefox 完全対応 46
完全対応 46
未対応 45 — 49
無効
無効 From version 45 until version 49 (exclusive): this feature is behind the layout.css.text-emphasis.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 あり
完全対応 あり
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 あり
完全対応 あり
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 あり
完全対応 あり
完全対応 4.4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 46
完全対応 46
未対応 45 — 49
無効
無効 From version 45 until version 49 (exclusive): this feature is behind the layout.css.text-emphasis.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 あり
完全対応 あり
完全対応 33
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS ? Samsung Internet Android 完全対応 あり
left and rightChrome 完全対応 62Edge ? Firefox 完全対応 46IE 未対応 なしOpera 完全対応 49Safari 完全対応 ありWebView Android 完全対応 62Chrome Android 完全対応 62Edge Mobile ? Firefox Android 完全対応 46Opera Android 完全対応 49Safari iOS ? Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, momdo
最終更新者: mfuji09,