text-emphasis-position
text-emphasis-position は CSS のプロパティで、圏点が描かれる位置を設定します。ルビのテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。
/* 初期値 */
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-postition: revert;
text-emphasis-position: unset;
構文
値
over-
横書きモードでテキストの上に圏点を描きます。
under-
横書きモードでテキストの下に圏点を描きます。
right-
縦書きモードでテキストの右に圏点を描きます。
left-
縦書きモードでテキストの左に圏点を描きます。
Description
圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は over right です。一方、中国語では、望ましい位置は under right となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置をまとめたものです。
| 言語 | 望ましい位置 | 図 | ||
|---|---|---|---|---|
| 横書き | 縦書き | |||
| 日本語 | over | right |
|
|
| 韓国語 | ||||
| モンゴル語 | ||||
| 中国語 | under | right |
|
|
Note: text-emphasis 一括指定プロパティを使用して、 text-emphasis-position を設定することはできず、また初期化されることもありません。
公式定義
形式文法
Examples
ルビを圏点より優先させる場合
編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。
ruby {
-webkit-text-emphasis: none;
text-emphasis: none;
}
圏点よりルビを優先させる場合
編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。
em {
-webkit-text-emphasis: dot;
text-emphasis: dot; /* text-emphasis を <em> 要素に設定 */
}
em rt {
display: none; /* <em> 要素内のルビを隠す */
}
仕様書
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-emphasis-position-property |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 個別指定プロパティ
text-emphasis-style,text-emphasis-colorおよび対応する一括指定プロパティtext-emphasis