text-emphasis

概要

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

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

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

text-emphasisは、text-emphasis-positionの値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。これが必要とされるかなり稀な場合には、プロパティtext-emphasis-positionを用います。

初期値以下の各プロパティのショートハンドとして補完します:
適用対象全要素
継承不可
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
  • text-emphasis-style: 指定値
  • text-emphasis-color: 半透明の値なら、計算値はそれに対応する rgba()。さもなくばその値に対応する rgb()transparent キーワードは rgba(0,0,0,0) にマップされます。
アニメーションの可否以下の各プロパティのショートハンドとして補完します:
正規順序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
形状は単色で塗りつぶされます。filledopenも存在しない場合、これがデフォルトです。
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.enabledtrueに設定する必要があります。

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: momdo
 最終更新者: momdo,