この記事は編集レビューを必要としています。ぜひご協力ください。
この翻訳は不完全です。英語から この記事を翻訳 してください。
text-emphasis-position CSSプロパティは、圏点が描かれる場所を記述します。圏点の効果は、ルビテキストに対するものと同じです。十分な空間がない場合、行の高さは増やされます。
圏点の望ましい位置は言語に依存します。例えば日本語で、望ましい位置はover rightです。一方中国語では、望ましい位置はunder rightとなります。下記の参考情報の表は、日本語、モンゴル語そして中国語に対する望ましい圏点の位置を要約するものです。
| 言語 | 望ましい位置 | 図 | ||
|---|---|---|---|---|
| 横書き | 縦書き | |||
| 日本語 | over | right |  |
 |
| モンゴル語 | ||||
| 中国語 | under | right |  |
|
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 |
|---|---|---|---|---|---|
基本サポート（overとunder） |
46 (46)[1] | 25.0-webkit | 未サポート | 15.0-webkit | 6.1-webkit 7.1 |
leftとright |
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.enabledをtrueに設定する必要があります。
[2] Chromeのbug 522882を参照。
関連項目
- プロパティ
text-emphasis-style、text-emphasis-colorと対応するショートハンドプロパティtext-emphasis。