text-emphasis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

text-emphasis は CSS のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは text-emphasis-style と text-emphasis-color の一括指定です。

試してみましょう

text-emphasis: none;

text-emphasis: filled red;

text-emphasis: "x";

text-emphasis: filled double-circle #ffb703;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

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

圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 text-emphasis は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。

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

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css

/* 初期値 */
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: revert;
text-emphasis: revert-layer;
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`: `none` `text-emphasis-color`: `currentcolor`
適用対象	すべての要素
継承	あり
計算値	一括指定の次の各プロパティとして `text-emphasis-style`: 指定通り `text-emphasis-color`: 色の計算値
アニメーションの種類	一括指定の次の各プロパティとして `text-emphasis-color`: 色 `text-emphasis-style`: 離散値

形式文法

text-emphasis = 
  <'text-emphasis-style'>  ||
  <'text-emphasis-color'>  

<text-emphasis-style> = 
  none                                                |
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |
  <string>                                            

<text-emphasis-color> = 
  <color>

例

強調して色を付けた見出し

この例は、見出しの各文字に三角形の圏点を付けて描画します。

CSS

css

h2 {
  text-emphasis: triangle #d55;
}

HTML

html

<h2>これは重要です！</h2>

結果

仕様書

Specification
CSS Text Decoration Module Level 3 # text-emphasis-property