CSS の text-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 の定義 |
勧告候補 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-emphasis-position | Chrome
完全対応
25
| Edge 未対応 なし | Firefox
完全対応
46
| IE 未対応 なし | Opera
完全対応
15
| Safari
完全対応
6.1
| WebView Android
完全対応
4.4
| Chrome Android
完全対応
25
| Firefox Android
完全対応
46
| Opera Android
完全対応
14
| Safari iOS
完全対応
7
| Samsung Internet Android
完全対応
1.5
|
left and right | Chrome 完全対応 62 | Edge 未対応 なし | Firefox 完全対応 46 | IE 未対応 なし | Opera 完全対応 49 | Safari 完全対応 8 | WebView Android 完全対応 62 | Chrome Android 完全対応 62 | Firefox Android 完全対応 46 | Opera Android 完全対応 46 | Safari iOS 完全対応 8 | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報
- 個別指定プロパティ
text-emphasis-style
,text-emphasis-color
および対応する一括指定プロパティtext-emphasis