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
text-emphasis-positionChrome 完全対応 あり
完全対応 あり
完全対応 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 完全対応 あり
完全対応 あり
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS ? Samsung Internet Android 完全対応 あり
left and rightChrome 完全対応 62Edge 未対応 なしFirefox 完全対応 46IE 未対応 なしOpera 完全対応 49Safari 完全対応 ありWebView Android 完全対応 62Chrome Android 完全対応 62Edge Mobile 未対応 なしFirefox Android 完全対応 46Opera Android 完全対応 46Safari iOS ? Samsung Internet Android 未対応 なし

凡例

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

関連情報

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

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