text-emphasis

概要

text-emphasis CSSプロパティは、1つの宣言でtext-emphasis-styleとtext-emphasis-colorを設定するためのショートハンドプロパティです。このプロパティは、スペースや制御文字のような分離文字を除く、要素のテキストの各文字に指定された圏点を適用します。

text-emphasisプロパティは、text-decorationとは大きく異なります。text-decorationプロパティは継承せず、指定される装飾は要素全体にわたって適用されます。しかし、text-emphasisは継承します。これは、子孫に対して圏点を変更できることを意味します。

ルビのように、圏点の大きさはフォントの大きさの約50%であり、text-emphasisは現在のレディングが圏点に十分でない場合に、行の高さに影響を与えるかもしれません。

構文

/* 初期値 */
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;
}

仕様

ブラウザー互換性

[1] Firefox 45では、デフォルトでアクティブではありません。about:configで、ユーザーはlayout.css.text-emphasis.enabledをtrueに設定する必要があります。

関連項目

• プロパティtext-emphasis-styleとtext-emphasis-color。
• 圏点の位置の定義を可能にするtext-emphasis-positionプロパティ。