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- 縦書きモードでテキストの左に圏点を描きます。
形式文法
例
編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 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 の定義 |
勧告候補 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- 個別指定プロパティ
text-emphasis-style,text-emphasis-colorおよび対応する一括指定プロパティtext-emphasis