MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

text-emphasis-position

この翻訳は不完全です。英語から この記事を翻訳 してください。

text-emphasis-position CSSプロパティは、圏点が描かれる場所を記述します。圏点の効果は、ルビテキストに対するものと同じです。十分な空間がない場合、行の高さは増やされます。

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

望ましい圏点とルビの位置
言語 望ましい位置
横書き 縦書き
日本語 over right Emphasis marks appear over each emphasized character in horizontal Japanese text. Emphasis marks appear on the right of each emphasized character in vertical Japanese text.
モンゴル語
中国語 under right Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text.

The text-emphasis-position cannot be set, and therefore are not reset either, using the text-emphasis shorthand property.

初期値over right
適用対象全要素
継承不可
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* Initial value */
text-emphasis-position: over right;

/* キーワード値 */
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;

/* グローバル値 */
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-position: unset;

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

公式の構文

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

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

ruby {
  text-emphasis: none;
}

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

em {
  text-emphasis: dot; /* Set text-emphasis for <em> elements */
}

em rt {
  display: none; /* Hide ruby inside <em> elements */
}

仕様

仕様 状態 コメント
CSS Text Decoration Level 3
text-emphasis の定義
勧告候補 初期の定義

ブラウザー互換性

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート(overunder) 46 (46)[1] 25.0-webkit 未サポート 15.0-webkit 6.1-webkit
7.1
leftright 46 (46)[1] 未サポート[2] 未サポート 未サポート 7.1
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート 46 (46)[1] 4.4-webkit 未サポート 33-webkit 7.1

[1] Firefox 45では、デフォルトでアクティブではありません。about:configで、ユーザーはlayout.css.text-emphasis.enabledtrueに設定する必要があります。

[2] Chromeのbug 522882を参照。

関連項目

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

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