概要
text-emphasis CSSプロパティは、1つの宣言でtext-emphasis-styleとtext-emphasis-colorを設定するためのショートハンドプロパティです。このプロパティは、スペースや制御文字のような分離文字を除く、要素のテキストの各文字に指定された圏点を適用します。
text-emphasisプロパティは、text-decorationとは大きく異なります。text-decorationプロパティは継承せず、指定される装飾は要素全体にわたって適用されます。しかし、text-emphasisは継承します。これは、子孫に対して圏点を変更できることを意味します。
ルビのように、圏点の大きさはフォントの大きさの約50%であり、text-emphasisは現在のレディングが圏点に十分でない場合に、行の高さに影響を与えるかもしれません。
text-emphasisは、text-emphasis-positionの値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。これが必要とされるかなり稀な場合には、プロパティtext-emphasis-positionを用います。
| 初期値 | 以下の各プロパティのショートハンドとして補完します:
|
|---|---|
| 適用対象 | 全要素 |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 以下の各プロパティのショートハンドとして補完します:
|
| アニメーションの可否 | 以下の各プロパティのショートハンドとして補完します:
|
| 正規順序 | order of appearance in the formal grammar of the values |
構文
/* 初期値 */ text-emphasis: none; /* 圏点なし */ /* <string> 値 */ text-emphasis: 'x'; text-emphasis: '点'; text-emphasis: '\25B2'; text-emphasis: '*' #555; text-emphasis: 'foo'; /* 使用すべきではありません。'f'のみとしてレンダリングされるでしょう。 */ /* キーワード値 */ text-emphasis: filled; text-emphasis: open; text-emphasis: filled sesame; text-emphasis: open sesame; /* 色と組み合わせたキーワード値 */ text-emphasis: filled sesame #555; /* グローバル値 */ text-emphasis: inherit; text-emphasis: initial; text-emphasis: unset;
値
none- 圏点なし。
filled- 形状は単色で塗りつぶされます。
filledもopenも存在しない場合、これがデフォルトです。 open- 形状はくりぬかれます。
dot- 記号として小さな円を表示します。filled dotは
'•'（U+2022）、open dotは'◦'（U+25E6）です。 circle- 記号として大きな円を表示します。filled circleは
'●'（U+25CF）、open circleは'○'（U+25CB）です。これは、他に形状が与えられない場合、横書きモードでデフォルトの形状です。 double-circle- 記号として二重丸を表示します。filled double-circleは
'◉'（U+25C9）、open double-circleは'◎'（U+25CE）です。 triangle- 記号として三角形を表示します。filled triangleは
'▲'（U+25B2）、open triangleは'△'（U+25B3）です。 sesame- 記号としてゴマを表示します。filled sesameは
'﹅'（U+FE45）、open sesameは'﹆'（U+FE46）です。 これは、他に形状が与えられない場合、縦書きモードでデフォルトの形状です。 <string>- 記号として文字列を表示します。著者は、
<string>で1つの文字列より多く指定すべきではありません。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を切り捨てるまたは無視するかもしれません。 <color>- 記号の色を定義します。colorが存在しない場合、デフォルトでは
currentColorです。
正式な構文
<'text-emphasis-style'> || <'text-emphasis-color'>
例
h2 {
/* text-emphasis: shape color; */
text-emphasis: triangle #555;
}仕様
| 仕様 | 状態 | コメント |
|---|---|---|
| CSS Text Decoration Level 3 text-emphasis の定義 |
勧告候補 | 初期の定義 |
ブラウザー互換性
| 機能 | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 46 (46)[1] | 25.0-webkit | 未サポート | 15.0-webkit | 6.1-webkit 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に設定する必要があります。
関連項目
- プロパティ
text-emphasis-styleとtext-emphasis-color。 - 圏点の位置の定義を可能にする
text-emphasis-positionプロパティ。