CSS テキスト装飾モジュール レベル 4

1. 序文

この小節は規範的ではありません。

このモジュールは、テキスト装飾、すなわちフォントや組版規則に従って組版された後のテキストのグリフを装飾する機能について説明します。 （[CSS-TEXT-3] および [CSS-FONTS-3] を参照。） これらの機能は、単なる装飾目的だけでなく、強調や敬称、挿入や削除、綴り間違いなど編集上の変更を示すためにも使用されます。

CSSレベル1および2では、西洋の組版の伝統に適した基本的な線による装飾（下線、上線、取り消し線）のみが定義されていました。 このモジュールのレベル3では、これらの装飾の色やスタイル、位置、連続性を変更する機能が追加され、 強調記号（東アジアの組版で伝統的に用いられる）や シャドウ（レベル2で提案されたが延期された）も導入されました。 レベル4では、これらの装飾に対するさらなる制御が導入されています。

1.1. モジュール間の相互作用

このモジュールは、[CSS-TEXT-DECOR-3]で定義されているテキスト装飾機能を置き換え、拡張します。

本モジュールのすべてのプロパティは、 ::first-line や ::first-letter 疑似要素に適用できます。

1.2. 値の定義

この仕様は、CSSプロパティ定義の規約（[CSS2]）に従い、値定義構文（[CSS-VALUES-3]）を使用しています。 本仕様で定義されていない値型は、CSS Values & Units [CSS-VALUES-3] で定義されています。 他のCSSモジュールとの組み合わせにより、これらの値型の定義が拡張される場合があります。

プロパティ固有の値に加え、 本仕様で定義されているすべてのプロパティは CSS全体のキーワードもプロパティ値として受け入れます。 可読性のため、明示的には繰り返していません。

1.3. 用語

この仕様で用いられる 書字素単位（character）、書記素単位（letter）、 および 内容言語 は、[CSS-TEXT-3] で定義されています。 その他の用語や概念は [CSS2] および [CSS-WRITING-MODES-4] で定義されています。

2. 行の装飾：下線、上線、取り消し線

以下のプロパティは、要素の内容に追加される線の装飾について説明します。 インラインボックス（inline box）に指定または伝播された場合、 そのボックスはその装飾のための 装飾ボックスとなり、 その装飾をすべてのボックス断片に適用します。 装飾はさらに、インラインを分割するインフローの ブロックレベルボックスにも伝播されます （CSS2.1 セクション9.2.1.1 参照）。 ブロックコンテナで インライン整形コンテキスト（inline formatting context）を確立するものに指定または伝播された場合、 装飾は匿名インラインボックスに伝播され、 そのブロックコンテナの全てのインフロー インラインレベル子要素をラップします。 ルビコンテナに指定または伝播された場合、 装飾はルビベースのみに伝播されます。 その他のボックスタイプでは、 装飾はすべてのインフロー子要素に伝播されます。

注：テキスト装飾はアウトオブフローの子孫や、インラインブロックやインラインテーブルなどのアトミックインラインレベルの子孫の内容には伝播されません。 また、インラインボックスのインライン子要素にも伝播されませんが、装飾はそのようなボックスに適用されます。

下線、上線、取り消し線は、置換されない インラインボックスにのみ描画されます。 すべてのテキスト（空白、文字間隔、単語間隔を含む）に渡って描画されますが、行頭・行末の空白（空白・文字間隔・単語間隔）は除きます。 アトミックインライン（画像やインラインブロックなど）は装飾されません。 装飾ボックスのマージン、ボーダー、パディングは常にスキップされますが、子孫の インラインボックスのマージン、ボーダー、パディングはスキップされません。

注：CSS 2.1 ではマージン・ボーダー・パディングは常にスキップする必要がありました。 レベル3以降では、既定で装飾ボックス自身のマージン・ボーダー・パディングのみがスキップされます。 将来的にCSS2.1もこの新しい既定に合わせて更新される可能性があります。

相対配置された子孫は、そのテキストに適用されたすべてのテキスト装飾も一緒に移動しますが、その行の装飾の初期位置の計算には影響しません。 visibilityプロパティやtext-shadow、 フィルタやその他のグラフィック変換も、 同様にそのボックスに適用されているすべてのテキスト装飾 （祖先ボックスから伝播された装飾も含む）に影響しますが、その初期位置や太さの計算には影響しません。 （アトミックインライン（atomic inline）上や 置換されないインラインボックスのマージン・ボーダー・パディング上に描画される場合は、 それらは装飾ボックス（decorating box）ではなく、該当するアトミックインライン／置換されないインラインボックスに関連付けられます。）

blockquote { text-decoration: underline; color: blue; }
em { display: block; }
cite { color: fuchsia; }

<blockquote>
 <p>
  <span>
   Help, help!
   <em> I am under a hat! </em>

   <cite> —GwieF </cite>
  </span>
 </p>
</blockquote>

注: 線の装飾はボックスツリーを通して伝播され、継承によって伝播するわけではありません。 したがって、display: contentsの要素で指定しても、子孫には効果がありません。

2.1. テキスト装飾線：text-decoration-lineプロパティ

このプロパティは、 text-decorationショートハンドの サブプロパティであり、 要素に追加される線の装飾の種類を指定します。 text-decoration-line以外の値は、要素が指定されたテキスト装飾を発生させ、 上記のように適用および伝播します。

注: 線の色・スタイル・太さを カスケード内の下位宣言で設定したい場合を除き、 このtext-decoration ショートハンドを使う方が安全です。

値の意味は以下の通りです：

none

テキスト装飾を生成も抑制もしません。

underline

各行のテキストに下線を引きます。

overline

各行のテキストの上に線を描きます（下線の反対側）。

line-through

各行の中央に線を引きます。

blink

テキストが点滅します（表示と非表示を交互に切り替える）。 準拠するユーザーエージェントは点滅しなくても構いません。 点滅しないことは WAI-UAAG チェックポイント3.3を満たす1つの方法です。 この値は、Animations [CSS3-ANIMATIONS]を推奨し、非推奨です。

spelling-error

ユーザーエージェントがスペルミスを強調表示するために使用するテキスト装飾の種類を示します。 表示はUA依存で、プラットフォームによって異なる場合があります。多くの場合、赤い波線下線として表示されます。

grammar-error

ユーザーエージェントが文法ミスを強調表示するために使用するテキスト装飾の種類を示します。 表示はUA依存で、プラットフォームによって異なる場合があります。多くの場合、緑色の波線下線として表示されます。

注: 縦書きモードでは、text-underline-positionによって下線と上線の位置が入れ替わることがあります。 これにより、言語固有の好みに合わせて下線の位置を自動的に調整できます。

spelling-errorやgrammar-error装飾は完全にUA定義のため、 UAはサブプロパティや、 通常は線の装飾に影響する他のプロパティ （例：text-underline-position、 color、 strokeや fill など）を無視しても構いません。 ただし、UAのレンダリングにおいて意味があり実用的であれば、 それらのプロパティを既定のスタイル修飾として適用すべきです。

2.2. テキスト装飾スタイル：text-decoration-styleプロパティ

このプロパティは、 text-decorationショートハンドのサブプロパティであり、 text-decoration-lineで指定された下線・上線・取り消し線の 線の描画スタイルを設定します。 このプロパティは、たとえ子孫ボックスで異なるスタイルが指定されていても、当該要素から発生するすべての装飾に影響します。

値の意味は border-style プロパティ [CSS-BACKGROUNDS-3] と同じです。 wavyは波線を示します。

2.3. テキスト装飾色：text-decoration-colorプロパティ

このプロパティは、 text-decorationショートハンドのサブプロパティであり、 text-decoration-lineで指定された下線・上線・取り消し線の 色を設定します。 このプロパティは、たとえ子孫ボックスで異なる色が指定されていても、当該要素から発生するすべての装飾に影響します。

2.4. テキスト装飾線の太さ：text-decoration-thicknessプロパティ

このプロパティは、 text-decorationショートハンドのサブプロパティであり、 text-decoration-lineで指定された下線・上線・取り消し線の 線の太さ（ストローク幅）を設定します。 このプロパティは、たとえ子孫ボックスで異なる太さが指定されていても、当該要素から発生するすべての装飾に影響します。

値の意味は以下の通りです：

auto

ユーザーエージェントがテキスト装飾線に適切な太さを選択します（詳細は下記参照）。

from-font

最初に利用可能なフォントが 推奨される下線幅のメトリクスを持つ場合はその幅を使用し、 そうでなければ auto と同様に扱います。

<length>

テキスト装飾線の太さを固定長で指定します。 ユーザーエージェントは実際の値を最低1デバイスピクセルに切り下げる必要があります。

注: 長さは固定値として継承され、フォントのサイズ変更ではスケールしません。

<percentage>

テキスト装飾線の太さを 1em のパーセンテージで指定します。 ユーザーエージェントは実際の値を最低1デバイスピクセルに切り下げる必要があります。

注: パーセンテージは相対値として継承されるため、継承時のフォントサイズ変更に応じてスケールします。

2.4.1. テキスト装飾線の自動太さ

一部のフォント形式（OpenTypeなど）は、線の装飾に適した太さの情報を提供できます。 ユーザーエージェントは、autoの線の太さを選択する際に そのようなフォントベースの情報を適宜使用するべきです。

2.5. 線装飾の位置と太さの決定

このセクションはText Decoration Level 3の初期草案からコピーされたものです。 現在もレビュー中であり、text-underline-offset や text-decoration-thickness との統合が必要です。

線による装飾は、フォントサイズや縦方向の揃えが異なる要素をまたぐ場合があるため、 線装飾の最適な位置は decorating box で決定される理想的な位置とは限りません。 代わりに、その行内で decorating box によって装飾されたすべてのテキスト、 すなわち considered text から、 行ごとに計算されます。 ただし、decorating box の子孫で text-decoration-skip によりスキップされるものや、 text-decoration-skip: ink が指定された子孫インライン、 さらに decorating box のインライン整形コンテキストに参加しない子孫は considered text の集合から除外されます。

その後、線装飾の位置は 各行ごとに次のように計算されます （over 側の下線は over 線、 under 側の上線は under 線として扱います）：

over 線

over EMボックスの上端に considered text を揃えて線装飾を配置します。

アルファベット下線

アルファベット下線の位置は、各 considered text ランごとに理想的なオフセット（アルファベットベースラインから）を取り、 それらの平均を計算し、実際には最も低いアルファベットベースラインを用いて線を配置します。 （アルファベットベースラインは、支配的ベースラインが非アルファベットの場合、baseline 揃えのボックス間で異なることがあります。） 上付き文字や下付き文字による位置ずれを防ぐため、 計算値 vertical-align が初期値でないインラインは 親の理想下線位置を持つものとして扱います。

非アルファベット under 線

under EMボックスの下端に considered text を揃えて線装飾を配置します。

取り消し線

取り消し線は本質的にアルファベット下線と同様の平均化を使いますが、 子孫で異なる計算値 font-size を跨ぐ場合はその都度位置を再計算します。 （これにより、フォントサイズが変わってもテキストが一貫して打ち消しされます。） 同じ font-size を持つ considered text の各ランごとに フォントメトリクスから導いた理想位置の平均を計算します。 上付き文字や下付き文字による位置ずれを防ぐため、 計算値 vertical-align が初期値でないインラインは 親の理想下線位置を持つものとして扱います。 各装飾断片にわたり、その位置に線を描画します。

単純化のため、取り消し線は各要素ごとにその要素の推奨/平均位置で描画すべきです。 これにより一部で跳ねるような描画になる場合がありますが、 すべてのケースで正しい方法は現状存在せず、どの試みも複雑化を招きます。 フォントサイズが異なり considered text が存在しない要素上では 取り消し線はどの位置を採用すべきでしょうか？

CSSは線装飾の太さを定義しません。 テキスト装飾線の太さを決定する際、ユーザーエージェントは子孫のフォントサイズ、書体、ウェイトなどを考慮して 適切に平均化した太さを与えても構いません。

2.6. テキスト装飾ショートハンド：text-decoration プロパティ

このプロパティは、text-decoration-line、text-decoration-thickness、text-decoration-style、 text-decoration-color を一度に設定するショートハンドです。 省略された値は初期値となります。

:link {
  color: blue;
  text-decoration: underline;
  text-decoration: navy dotted underline; /* CSS1/CSS2 UAでは無視 */
}

注: このショートハンドは意図的に text-underline-position プロパティを含みません。 これは言語や書記体系依存の設定であり、内容に基づいて自動的に決定されるため、 （継承しない）text-decorationショートハンドの スタイリスティックな設定とは独立してカスケード・継承できるようにするためです。

2.7. 下線位置：text-underline-positionプロパティ

このプロパティは text-decorationショートハンドの サブプロパティではありません。 下線のテキストに対する位置を設定し、 ゼロ位置 を定義して、text-underline-offset による調整基準とします。 このプロパティは、たとえ子孫ボックスで異なる位置が指定されていても、当該要素から発生するすべての装飾に影響します。 祖先で指定された下線には影響しません。

:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
:root:lang(zh), [lang|=zh] { text-underline-position: under left; }

left や right が単独で指定された場合、auto も暗黙に適用されます。 値の意味は以下の通りです：

auto

ユーザーエージェントは任意のアルゴリズムで下線位置を決定してよいですが、必ずアルファベットベースライン上または下に配置しなければなりません。

注: 既定の下線位置はアルファベットベースラインの近くにするのが推奨されますが、 下付き（または下げられた）テキストと重なったり、 アルファベット下線が高すぎる漢字やチベット文字のようなアジア系グリフと重なる場合は、 下線をより下にずらすか under で述べるようにemボックス端に揃える方が適切です。

典型的な「アルファベット下線」はアルファベットベースライン直下に配置される

from-font

最初に利用可能なフォントが 推奨される下線オフセットのメトリクスを持つ場合はその値を使用し、 そうでなければ auto と同様に扱います。

under

下線を要素のテキスト内容の下に配置します。 この場合、下線は通常ディセンダーを横切りません（会計下線とも呼ばれます）。 この値は、縦書きtypographic modesで特定側を指定したい場合、left や right と組み合わせ可能です。

text-underline-position: under

text-underline-positionは継承され、text-decorationショートハンドではリセットされないため、次の例は文書全体で under 下線を使用します。これは複雑なディセンダーの多い書記体系や多くの下付き文字を使う数式・化学式に有用です。

:root { text-underline-position: under; }

注: under 値でも 下線がグリフと重ならない保証はありません。フォントによってはディセンダーやダイアクリティカルマークがフォントのdescentより下に突き出す場合があります。

left

縦書きtypographic modesでは、下線を under と同様に揃えますが、常にテキストの左端に配置します。 これにより下線が「over」側になる場合は、上線も側を変え「under」側に描画されます。

right

縦書きtypographic modesでは、下線を under と同様に揃えますが、常にテキストの右端に配置します。 これにより下線が「over」側になる場合は、上線も側を変え「under」側に描画されます。

left	right

縦書きtypographic modesでは、text-underline-position の left および right により下線を任意の側に配置できます（横書きtypographic modesでは両値とも autoとして扱われます）。

2.8. 下線オフセット：text-underline-offsetプロパティ

このプロパティは text-decorationショートハンドのサブプロパティではありません。 下線をゼロ位置からどれだけずらすかを設定します。 正の値はテキストから外側への距離、負の値は内側への距離を表します。 このプロパティは、たとえ子孫ボックスで異なる位置が指定されていても、当該要素から発生するすべての装飾に影響します。 祖先で指定された下線には影響しません。

値の意味は以下の通りです：

auto

UAが適切な下線オフセットを選択します。

ただし、text-underline-position の算出値が from-font であり、UAがフォントから適切なメトリクスを取得できた場合は、 このオフセットは0でなければなりません。

<length>

下線のオフセットを固定長で指定します。

注: 長さは固定値として継承され、フォントのサイズ変更ではスケールしません。

<percentage>

下線のオフセットを 1em のパーセンテージで指定します。

注: パーセンテージは相対値として継承されるため、継承時のフォントサイズ変更に応じてスケールします。

text-decoration-line プロパティの値が spelling-error または grammar-error の場合、UAは text-underline-position の値を無視しても構いません。

2.8.1. 下線オフセットの基準点（ゼロ位置）

ゼロ位置（zero position）は、 下線の位置がtext-underline-positionの値によって異なります（下記参照）。

下線は指定された位置の外側に揃えられ（太さは正の方向にのみ広がります）。

子孫コンテンツに対応するための自動調整が行われている場合、それは維持されます。 text-underline-offset の値はそれに加算されます。

2.8.2. フォントメトリクスによる自動位置決め

一部のフォント形式（OpenTypeなど）は、線装飾に適切な位置情報を提供できます。 ユーザーエージェントは auto オフセットを選択する際に そのようなフォント情報を適切に使用するべきであり、 from-font が text-underline-position に指定されている場合は 必ず使用しなければなりません。

注: 通常OpenTypeフォントのメトリクスは alphabetic下線の位置を示しますが、CJKフォントなどでは under left 下線の位置を示す場合があります。 （この場合、フォントの下線メトリクスはemボックス下端に接します。） ユーザーエージェントはフォントメトリクスの誤りを補正しても良いですが、必須ではありません。

2.9. テキスト装飾線の一貫性

線装飾の正確な位置と太さは text-underline-position、 text-underline-offset、 text-decoration-thickness の値と、その他はUA定義によって決まります。 ただし、下線・上線については UAは1つのdecorating boxから派生する装飾について 各行ごとに単一の太さ・位置を使わなければなりません。

vs.

正しいレンダリングと誤ったレンダリング例： <u>A<sup>B</sup><big>C</big>D</u>

注記：線装飾はフォントサイズや縦揃えが異なる要素をまたぐ場合があるため、 線装飾の最適な位置はdecorating boxで決まる理想位置とは限りません。 例えば、小さいフォントに上線を配置した場合、 要素内に大きく異なるフォントサイズのテキストが含まれると実質的に取り消し線のようになってしまうことがあります。 下線でも、テキストがアルファベットベースラインに揃っていない場合 （例えば縦組みスタイルではデフォルトで中央ベースラインに揃う [CSS-WRITING-MODES-4]）、 下線が大きなフォントサイズの子孫テキストを横切ることになります。 UAが子孫コンテンツを考慮することで、より良い組版になります。

縦組みテキストの中央ベースライン揃えのため、 小さい縦組みテキストの左下線が大きなフォントサイズの子要素のテキストを横切ってしまいます。 下線は分断してはならず、 位置をさらに左に調整することで 全体の下線テキストを正しく収めることができます。

UAはdecorating boxがvertical-alignで baseline以外にシフトされた場合や font-variant-position（上付き・下付き）によってシフトされた場合は 装飾線の位置を一致させなければなりませんが、 そのようにスタイルされたdecorating boxの子孫については 装飾線の位置や太さを調整してはなりません （ただし、前述のように単にフォントサイズが異なる子孫などについては調整しても構いません）。 これにより、上付き・下付き文字自体には正しく（下線・取り消し線などの）装飾が適用され、 祖先側の装飾位置が歪んだり分断されたりすることを防ぎます。

上付きテキストへの下線と、上付き要素を含むテキストへの下線の例

2.10. テキスト装飾線の連続性：text-decoration-skipショートハンドとそのサブプロパティ

CSSWGは、スキップ機能を text-decoration-skip-inkのような 個別プロパティに分割することでカスケード挙動を改善することを決議しました。 議論および決議を参照。 このセクションはラフドラフトでCSSWGによる精査は未了です。

text-decoration-skip およびそのサブプロパティ （text-decoration-skip-self、text-decoration-skip-box、text-decoration-skip-inset、text-decoration-skip-spaces、text-decoration-skip-ink） は、要素または祖先がdecorating boxである場合の 線装飾の中断を制御します。 none は すべてのサブプロパティを none にし、 auto は すべてのサブプロパティを初期値にします。

この none の定義はWeb互換性があるか？ Web互換のためにink値も追加すべきか？

これらのプロパティは継承され、子孫は異なる設定を持つことができます。

HTMLの既定UAスタイルシートに次が追加されます：

ins, del { text-decoration-skip: none; }

text-decoration-line の値が spelling-error または grammar-error の場合、 UAはこれらのプロパティを一部または全て無視しても構いません。

2.10.1. スペースのスキップ：text-decoration-skip-selfプロパティ

CSSWGは text-decoration-skip をサブプロパティに分割することを決議しましたが、 この値セットはまだCSSWGによる精査が済んでいません。

このプロパティは、祖先によって描画されるテキスト装飾線が この要素に伝播または横断されるかどうかを指定します。 値の意味は次の通りです：

none

何もスキップしません：祖先のdecorating boxesからの線装飾は、このボックスに適宜伝播または横断されます。

objects

この要素がアトミックインライン（画像やinline-blockなど）であれば、その要素（マージンボックス全体）をスキップします。

2.10.2. スペースのスキップ：text-decoration-skip-boxプロパティ

CSSWGは text-decoration-skip をサブプロパティに分割することを決議しましたが、 この値セットはまだCSSWGによる精査が済んでいません。

このプロパティは、要素に影響を与えるテキスト装飾線が 要素のボックス領域のどの部分をスキップすべきかを指定します。 これは祖先によって描画されるテキスト装飾線のみを制御します。 値の意味は次の通りです：

none

何もスキップしません：祖先のdecorating boxesからの線装飾は、マージン端からマージン端まで描画されます。

all

祖先のdecorating boxに適用されたテキスト装飾線を描画する際は、 そのボックス自身のマージン・ボーダー・パディング領域をスキップし、 コンテンツ領域内のみに線装飾を描画します。

この値は祖先による装飾にのみ効果があり、 decorating box自身は 自身のボックス装飾上に線を描画することはありません。

2.10.3. インセットエッジ：text-decoration-skip-insetプロパティ

CSSWGは text-decoration-skip をサブプロパティに分割することを決議しましたが、 この値セットはまだCSSWGで精査されていません。

このプロパティは、要素に影響するテキスト装飾が要素のボックス領域のどの部分をスキップすべきかを指定します。 これは要素自身が描画するすべてのテキスト装飾線を制御しますが、祖先が描画するテキスト装飾線には影響しません。 値の意味は次の通りです：

none

何もスキップしません：テキスト装飾はボックス端から端まで描画されます。

auto

UAは、decorating box のコンテンツエッジから少し内側に線の開始および終了位置を配置しなければなりません。 例えば、2つの下線付き要素が隣り合っているときに、1本の下線に見えないようにします。 インセットの大きさはユーザーエージェントの裁量ですが（例：線の太さの半分など）ゼロであってはなりません。 （これは中国語において、下線が句読点の一種として使われるため重要です。）

text-decoration-skip-inset: auto の <u>石井</u><u>艾俐俐</u>

このプロパティは text-decoration-skip の一部ではなく独立したプロパティとした方がよいかもしれません。 線の長さを明示的に制御する件については Issue 4557 も参照してください。

2.10.4. スペースのスキップ：text-decoration-skip-spacesプロパティ

初期値はWeb互換のため none の方が良いか？ そうでなければ、少なくともINSとDELはUA既定スタイルでnoneが割り当てられるべきです。 Issue 4653 も参照。

このプロパティはテキスト装飾がスペースをスキップするかどうかを指定します。 要素自身が描画するすべてのテキスト装飾線、および祖先が描画するテキスト装飾線も制御します。 値の意味は次の通りです：

none

スペーサーはスキップされません。他の文字と同じように装飾されます。

all

すべてのスペーサーと、 隣接するletter-spacing または word-spacing もスキップします。

start

行頭にあるスペーサーと 隣接するletter-spacing または word-spacingをスキップします。

end

行末にあるスペーサーと 隣接するletter-spacing または word-spacingをスキップします。

このプロパティの目的において、スペーサーは、 Unicode White_Spaceプロパティを持つ書字素単位（U+202F NARROW NO-BREAK SPACEは除く）および 単語区切りです。

2.10.5. グリフのスキップ：text-decoration-skip-inkプロパティ

このプロパティは、下線や上線がグリフをまたぐ場合の描画方法を制御します。 これはたとえ子孫ボックスで異なるスタイルが指定されていても、当該要素から発生するすべての装飾に影響します。

有効な場合、装飾線はグリフが描画される部分をスキップします。 つまり、装飾線がグリフを横切る部分で線を中断し、文字形状が見えるようにします。 ユーザーエージェントはグリフ輪郭の両側にも少し間隔を空けてスキップしなければなりません。

グリフインクのスキップ

このプロパティは下線と上線にのみ適用されます。取り消し線は常に連続した線です。

auto

UAは、装飾線がグリフインクやその輪郭の両側にかかる場合、 下線や上線を中断してもよいです。 適用範囲を決定する際、テキストのスクリプト（下記注記参照）を考慮すべきです。

all

UAは、装飾線がグリフインクやその輪郭の両側にかかる場合、 必ず下線や上線を中断しなければなりません。

none

UAはグリフをまたいでも下線や上線を中断せず、必ず連続した線を描画しなければなりません。

2.10.6. 形状による中断

UAが下線や上線をグリフ境界で中断する場合、 その境界での線の形状はグリフの形状に従うべきです。

注記：本仕様は「グリフの形状に従う」手法を特定の方式に限定しません。 これはUAが見た目やパフォーマンスを考慮して適切な方法を選択できるようにするためです。 例えば、UAはパフォーマンス上の理由で一定サイズ未満は角ばった終端を仮定したり、 特に細い装飾線の場合は台形状で曲線を近似したりできます。 美的観点では、グリフ境界が線の一部だけを横切る場合や水平方向に近い斜めの場合に、 曲線にぴったり合わせると非常に細長い線片が生じてしまうなど配慮も必要です。 グリフの囲まれた領域内に線を表示するかどうかも考慮点の一つです。

下線がボウル内に現れないようにすると文字がより美しく見えます。 外側で曲線終端にすることで、文字を貫通する下線の連続性も示唆できます。

3. 強調記号の追加制御

東アジア文書では、テキストの一連に強調を示すため、各グリフの横や上に小さな記号を付加するのが伝統的です。例：

日本語テキストに適用されたアクセント強調記号（説明のため青色で表示）

text-emphasisショートハンドと、 そのtext-emphasis-style、text-emphasis-colorロングハンドで、 このような記号をテキストに付加できます。 text-emphasis-positionプロパティは独立して継承し、 記号のテキストに対する配置を制御できます。

サイズや位置の連続性については 関連issueも参照。

3.1. 強調記号スタイル：text-emphasis-styleプロパティ

このプロパティは要素のテキストに強調記号を付加します。 値の意味は以下の通りです：

none

強調記号を付加しません。

filled

図形を塗りつぶした色で表示します。

open

図形は中空（塗りなし）で表示します。

dot

小さな円（ドット）を記号として表示します。 filledはU+2022 '•'、openはU+25E6 '◦'です。

circle

大きな円を記号として表示します。 filledはU+25CF '●'、openはU+25CB '○'です。

double-circle

二重丸を記号として表示します。 filledはU+25C9 '◉'、openはU+25CE '◎'です。

triangle

三角形を記号として表示します。 filledはU+25B2 '▲'、openはU+25B3 '△'です。

sesame

ゴマ（セサミ）を記号として表示します。 filledはU+FE45 '﹅'、openはU+FE46 '﹆'です。

<string>

指定した文字列を記号として表示します。 著者は<string>に1文字のみ指定すべきです。 UAは複数の書記素クラスタからなる文字列を切り詰めたり無視することがあります。

図形キーワードが指定され、filledまたはopenが指定されていない場合、filledが指定されたとみなします。 filledまたはopenのみ指定した場合、図形キーワードは横書きtypographic modesではcircleに、 縦書きtypographic modesではsesameになります。

記号は要素のフォント設定を使い、ruby特性を加え、サイズを50%に縮小して描画されるべきです。 ただし全てのフォントがこれらのグリフを持つわけではなく、記号用コードポイントのサイズが不適切なフォントもあるため、 UAは強調記号に適したフォントを使ったり、UAが記号自体を合成しても構いません。 記号は縦書きtypographic modesでは常に正立（回転しません）。 横書きtypographic modesの縦書きwriting modesでの記号の向きは本レベルでは未定義です（今後明確なユースケースが出れば定義される場合があります）。

注: 強調記号に適したフォントの例としてAdobeのオープンソースKenten Generic OpenType Fontがあります。

強調記号は各書字素単位ごとに1回描画されます。 ただし、以下の場合は描画されません：

• 単語区切りや、Unicode区切りクラス（Z*）に属する文字。 （ただし結合文字と組み合わされたスペースには強調記号が描画されます。）
• 句読点、すなわちUnicode P*一般カテゴリに属し、NFKD正規化で次のいずれにもならない文字。

  #	U+0023	NUMBER SIGN
  %	U+0025	PERCENT SIGN
  ‰	U+2030	PER MILLE SIGN
  ‱	U+2031	PER TEN THOUSAND SIGN
  ٪	U+066A	ARABIC PERCENT SIGN
  ؉	U+0609	ARABIC-INDIC PER MILLE SIGN
  ؊	U+060A	ARABIC-INDIC PER TEN THOUSAND SIGN
  &	U+0026	AMPERSAND
  ⁊	U+204A	TIRONIAN SIGN ET
  @	U+0040	COMMERCIAL AT
  §	U+00A7	SECTION SIGN
  ¶	U+00B6	PILCROW SIGN
  ⁋	U+204B	REVERSED PILCROW SIGN
  ⁓	U+2053	SWUNG DASH
  〽	U+303D	PART ALTERNATION MARK

• Unicodeの制御コードおよび未割り当て文字（Cc, Cf, Cn）クラスの文字。

注: どの文字に記号を付けるかの制御はLevel 4で追加予定です。 （句読点リストは特に非CJK用に精査される可能性があります。）

3.2. 強調記号色：text-emphasis-colorプロパティ

このプロパティは強調記号の前景色を指定します。

注: currentcolorキーワードは自分自身に算出され、継承後にcolor値に解決されます。 つまり、text-emphasis-color はデフォルトでテキストcolorと一致し、colorが要素ごとに変わっても追従します。

3.3. 強調記号ショートハンド：text-emphasis プロパティ

このプロパティはtext-emphasis-styleと text-emphasis-colorを一度に設定するショートハンドです。 省略された値は初期値になります。

注：text-emphasis-positionはこのショートハンドでリセットされません。通常、記号の形や色は変わっても、位置は言語ごとに文書全体で一貫しているため、位置は独立して継承されるべきです。

3.4. 強調記号位置：text-emphasis-positionプロパティ

このプロパティは強調記号の描画位置を指定します。 [ right | left ] を省略した場合、デフォルトはrightです。 値の意味は以下の通りです：

over

横書きtypographic modesでテキストの上に記号を描画します。

under

横書きtypographic modesでテキストの下に記号を描画します。

right

縦書きtypographic modesでテキストの右側に記号を描画します。

left

縦書きtypographic modesでテキストの左側に記号を描画します。

強調記号は、各文字にルビ注記（ruby）がtext-emphasis-positionで与えたルビ位置・中央揃えで割り当てられたかのように描画されます。 この位置が下線や上線と衝突する場合は調整されることがあります。

強調記号が行の高さに与える影響はルビテキストと同じです。

注記：強調記号の推奨位置は言語によって異なります。例えば日本語ではover rightが推奨位置ですが、中国語ではunder rightです。 下記の表は中国語・日本語の推奨位置をまとめたものです：

中国語・日本語の推奨強調記号・ルビ位置

言語	推奨位置		イラスト
	横書き	縦書き
日本語	over	right
韓国語
モンゴル語
中国語	under	right

強調記号が、同じ位置にルビが描画される文字に適用された場合、記号はルビの外側に配置されます。 これは自動非表示や空のルビ注記も含みます。

ルビ付き文字を含む4文字への強調記号例

ruby { text-emphasis: none; }

em { text-emphasis: dot; } /* <em>要素に強調記号を付加 */
em rt { display: none; }   /* <em>内のルビを非表示 */

3.5. 強調マークスキップ: text-emphasis-skip プロパティ

このセクションはブレーンストーミング中です。 また、このプロパティが本当に必要かどうかも、出版物ごとの望ましい動作の違いにもかかわらず、まだ明確ではありません。

このプロパティは、どの文字にマークを描画するかを記述します。 各値の意味は次の通りです:

spaces

単語区切りやその他の Unicode区切りカテゴリ（Z*）に属する文字をスキップします。 （ただし、結合文字と組み合わさるスペースには強調マークが描画される点に注意してください。）

punctuation

句読点をスキップします。 この定義の句読点は、下記「記号」として定義されていないUnicode P*カテゴリに属する文字を含みます。

symbols

記号をスキップします。 この定義の記号には、 Unicode S* 一般カテゴリに属する全ての書字単位、およびUnicode Poカテゴリに属し NFKD同値な下記文字が含まれます:

#	U+0023	NUMBER SIGN
%	U+0025	PERCENT SIGN
‰	U+2030	PER MILLE SIGN
‱	U+2031	PER TEN THOUSAND SIGN
٪	U+066A	ARABIC PERCENT SIGN
؉	U+0609	ARABIC-INDIC PER MILLE SIGN
؊	U+060A	ARABIC-INDIC PER TEN THOUSAND SIGN
&	U+0026	AMPERSAND
⁊	U+204A	TIRONIAN SIGN E[[
@	U+0040	COMMERCIAL AT
§	U+00A7	SECTION SIGN
¶	U+00B6	PILCROW SIGN
⁋	U+204B	REVERSED PILCROW SIGN
⁓	U+2053	SWUNG DASH
〽️	U+303D	PART ALTERNATION MARK

narrow

Unicodeデータベース East_Asian_Width プロパティ [UAX11] [UAX44] が F（全角）またはW（ワイド）でない文字をスキップします。

Unicodeの制御コードや未割り当て文字（Cc, Cf, Cn）クラスに属する文字は、このプロパティの値にかかわらず常にスキップされます。

この構文はスペースにもマーク描画を要求します。 そのような用途はあるでしょうか？ もしなければ、スペースへのマーク描画を許可しないよう構文を修正すべきでしょうか？

初期値についての議論も参照。

4. テキストシャドウ: text-shadow プロパティ

このプロパティは、要素のテキストに適用されるカンマ区切りのシャドウ効果リストを受け付けます。 値の解釈は box-shadow [CSS-BACKGROUNDS-3] と同様です。 各レイヤーは要素のテキストおよびすべてのテキストデコレーション（合成後）にシャドウを付けます。 シャドウ効果は前面から背面の順に適用されます。 最初のシャドウが一番上にきます。 そのため、シャドウ同士が重なることがあります。

box-shadow と異なり、 spread distance は常にグリフ輪郭のあらゆる点からの外側距離として厳密に解釈されます。 そのため、ぼかし半径と同様に、角は鋭角ではなく丸くなります。 spread値が負の場合は無効です。

角の形状を未定義のままとするか？ [Issue #7250]

外側テキストシャドウ （inset キーワードなしで指定）は、 テキスト—およびすべてのテキストストローク [FILL-STROKE-3]—をまるで周囲のキャンバス上に切り抜かれて持ち上がっているかのように影を付けます。 box-shadow と異なり、外側テキストシャドウは影付けされた形状にクリップされず、 テキストが半透明の場合、下に透けて見える場合があります。

内側テキストシャドウ （inset キーワード付きで指定）は、 テキスト—およびすべてのテキストストローク [FILL-STROKE-3]—が周囲のキャンバスの下に切り落とされたかのように影を付けます。 したがって影はストロークの内縁内のみに描画されます。

外側テキストシャドウ は、要素の境界線・背景（存在する場合）とテキスト・テキストデコレーションの間のスタックレベルで描画されなければなりません。 内側テキストシャドウはテキストおよびデコレーションの上に描画される必要があります。 UAは、同じスタックレベルやスタッキングコンテキストに属する隣接要素上のテキストにシャドウを重ねて描画することを避けるべきです。 （影の正確なスタックレベルは、要素に枠線や背景があるかに依存するため、UA定義となる場合があります。）

ストロークとの重なり順は？ [Issue #7251]

box-shadow と同様に、テキストシャドウはレイアウトに影響せず、 スクロールを発生させたり スクロール可能なオーバーフロー領域のサイズを増やしたりしません。

text-shadow プロパティは ::first-line および ::first-letter 疑似要素の両方に適用されます。

5. テキストデコレーションの描画

5.1. テキストデコレーションの描画順序

[CSS2]と同様に、テキストデコレーションは装飾するテキストの直上/直下に描画され、 次の順序で（最も下が最初）描画されます:

• シャドウ（text-shadow）
• 下線（text-decoration）
• 上線（text-decoration）
• テキスト
• 強調マーク（text-emphasis）
• 取り消し線（text-decoration）

線の装飾がボックス装飾やアトミックインライン上を横切る場合、 それらは非配置コンテンツの上、かつ配置された子孫の直下（CSS2.1 Appendix Eのレイヤ#8の直下）に描画されます。

5.2. テキストデコレーションのオーバーフロー

ボックスの外にはみ出すテキストデコレーションは、インクオーバーフローとみなされます。 それらは スクロール可能なオーバーフロー領域を拡張しません。[css-overflow-3]

付録A: 謝辞

この仕様の策定には、以下の方々の協力が不可欠でした: Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe and Steve Zilles.

付録B: デフォルトUAスタイルシート

この付録は情報提供目的であり、 UA開発者がデフォルトスタイルシートを実装する際の助けとなるものですが、 必ずしも従う必要はありません。

/* typical styling of HTML */
blink {
  text-decoration-line: blink;
}
s, strike, del {
  text-decoration: line-through;
}
u, ins, :link, :visited {
  text-decoration: underline;
}
abbr[title], acronym[title] {
  text-decoration: dotted underline;
}

/* disable inheritance of text-emphasis marks to ruby text:
  emphasis marks should only apply to base text */
rt { text-emphasis: none; }

/* set language-appropriate default emphasis mark position */
:root:lang(zh), [lang|=zh] { text-emphasis-position: under right; }
[lang|=ja], [lang|=ko]     { text-emphasis-position: over right; }

/* set language-appropriate default underline position */
:root:lang(ja), [lang|=ja],
:root:lang(mn), [lang|=mn],
:root:lang(ko), [lang|=ko] { text-underline-position: right; }
:root:lang(zh), [lang|=zh] { text-underline-position: left;  }
/* auto is chosen (implied) above instead of under
   due to content-compatibility concerns */

問題や追加すべき提案、修正があれば www-style@w3.org 宛に 件名に [css-text-decor] を入れて送信してください。

@keyframes blink {
  0% {
    visibility: hidden;
    animation-timing-function: step-end;
  }
  25%, 100% {
    visibility: visible;
  }
}
blink {
  animation: blink 1s infinite;
}

付録C: 変更点

2020年5月6日ワーキングドラフト以降の主な変更点

2020年5月6日ワーキングドラフト以降の主な変更点：

• spread distance および inset を text-shadow に追加 (Issue 6074, Issue 6971)
• text-decoration-skip-ink は要素自身が生成する装飾のみに影響することを明確化 (Issue 2817)
• 「適用対象」行でテキストに適用されるプロパティを明記 (Issue 5303)

Level 3 以降の追加点

以下の機能が Level 3 以降で追加されました:

• spelling-error と grammar-error 値を text-decoration-line に追加
• text-decoration-thickness および text-underline-offset プロパティを追加
• from-font 値を text-underline-position に追加
• text-decoration-skip プロパティおよびそのロングハンドをドラフト化
• text-emphasis-skip プロパティをドラフト化
• spread distance および inset を text-shadow に追加

6. プライバシーとセキュリティ上の考慮事項

この仕様は新たなプライバシーやセキュリティ上の考慮事項を導入しません。