CSS Text Decoration Module Level 3 日本語訳

W3C Candidate Recommendation Draft,

More details about this document
This version:
https://www.w3.org/TR/2022/CRD-css-text-decor-3-20220505/
Latest published version:
https://www.w3.org/TR/css-text-decor-3/
Editor's Draft:
https://drafts.csswg.org/css-text-decor-3/
Previous Versions:
History:
https://www.w3.org/standards/history/css-text-decor-3
Implementation Report:
https://wpt.fyi/results/css/css-text-decor
Test Suite:
http://test.csswg.org/suites/css-text-decor-3_dev/nightly-unstable/
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
Elika J. Etemad / fantasai (Invited Expert)
(Google)
Suggest an Edit for this Spec:
GitHub Editor

概要

このモジュールは、下線、テキストの影、および圏点などの文字装飾に関連する機能を含む。

CSSは、画面、紙などで、構造化文書(HTMLやXMLなど)のレンダリングを記述するための言語である。

この文書の位置付け

この節は、公開時点におけるこの文書のステータスについて説明する。W3Cが現在公開しているリストとテクニカルレポートの最新版は、W3C technical reports index at https://www.w3.org/TR/で見つけることができる。

この文書は、CSS Working Groupによって、勧告トラックを使用したCandidate Recommendation Draftとして公開された。Candidate Recommendationでの公開はW3Cメンバーの支持を意味するものではない。Candidate Recommendation Draft は、ワーキンググループが後続のCandidate Recommendation Snapshotに含める予定の、以前のCandidate Recommendationからの変更を統合する。

これは草案文書であり、いつでも更新、他の文章による置き換えや廃止扱いにされうる。進行中の作業以外のものとしてこの文書を引用することは不適切である。

タイトルにスペックコード“css-text-decor”を含め、“[css-text-decor] …コメントの概要…”のように、GitHubにイシューを提出してフィードバックを送信されたい(推奨)。 すべてのイシューおよびコメントはアーカイブされている。 または、フィードバックを(アーカイブされた)公開メーリングリストwww-style@w3.orgに送信することもできる。

この文書は、2021年11月2日付けのW3Cプロセス文書によって管理される。

この文書はW3C特許ポリシーの下で活動するグループによって作成された。W3Cは、グループの成果物に関するあらゆる開示特許の公開リストを管理する。ここには、特許開示にあたっての指示も含まれている。特許について十分に知識のある人物が、仕様にEssential Claim(s)が認められると判断した場合は、W3C特許ポリシーの第6章に従い情報を開示する必要がある。

次の機能は不安定であり、CR期間中に削除されるかもしれない:

“At-risk”(不安定)は、W3Cプロセスの専門用語であり、必ずしも機能が削除または遅延される危険性があることを意味するものではない。これは、WGは機能がタイムリーな方法で相互運用可能に実装されることが困難かもしれないと考えることを意味し、かつ必要に応じて、その機能なしに新しい勧告候補を公開することなく、勧告案の段階に移行する場合、その機能を削除することができるようマークすることを意味する。

1. 概論

この節は非規範的である。

このモジュールは、テキスト装飾、すなわち、フォントや書体の規則に従って組版テキストの装飾グリフを取り扱う。([CSS-TEXT-3]および[CSS-FONTS-3]を参照)。このような機能は伝統的に、純粋に装飾的な目的のためだけでなく、ある場合は強調を示すため、敬語のため、および挿入、削除、スペルミスなど編集上の変更を示すためにも使用される。

CSS1および2は、西洋活版印刷の慣習に適切な非常に基本的な線装飾(下線、上線、そして打ち消し線)のみを定義していた。このモジュールのレベル3は、色、スタイル、位置、およびこれらの装飾の連続性を変更する機能を追加し、また、圏点(伝統的に東アジアの活版印刷に使用される)、および(レベル2から延期された後に提案されたもの)を導入する。

1.1. モジュール間の相互関係

このモジュールは[CSS2] 16章で定義されるテキスト装飾機能を置換し、拡張する。

1.2. 値の定義

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

さらに、これらの定義で列挙されるプロパティ指定値、この仕様で定義されるすべてのプロパティはまた、それらプロパティ値のようにCSS全域キーワードを受け入れる。読みやすさのために、明示的に繰り返さない。

1.3. 用語

この仕様で使用されるような用語文字(character)字(letter)コンテンツ言語(content language)は、[CSS-TEXT-3]で定義される。この仕様で用いられるその他の用語と概念は、[CSS2]および[CSS-WRITING-MODES-4]で定義される。

2. 行の装飾:下線、上線、および打ち消し線

次のプロパティは、要素のコンテンツに加えられる行の装飾を表す。インラインボックスに指定または伝達される場合、そのボックスは、その装飾に対してすべての断片に装飾を適用するデコレーティングボックスとなる。装飾は、その後インラインを分割する任意のフロー内ブロックレベルボックスにさらに伝達される(CSS 2.1 9.2.1.1節参照)。インライン書式コンテキストを設定するブロックコンテナに指定または伝達される場合、装飾は、ブロックコンテナの中のすべてのフロー内のインラインレベルの子を包む匿名インライン要素に伝達される。ルビコンテナに指定または伝達される場合、装飾は、ルビベースにのみ伝達される。その他すべてのボックス型に対して、装飾はすべてのフロー内の子に伝達される。

テキスト装飾が任意のフロー外の子孫に伝達せず、インラインブロックおよびインラインテーブルのような分割不能なインラインレベルの子孫コンテンツにも伝達しないことに注意する。テキスト装飾はまたインラインボックスのインラインの子に伝達されない。しかし、装飾はこのようなボックスに適用される

下線、上線、および取り消し線は、非置換インラインボックスにのみ描かれ、かつ行の開始および終わりで間隔(空白、文字間隔、および単語間隔)を除く、すべてのテキスト(空白、文字間隔、単語間隔を含む)中に描かれる。画像およびインラインブロックのような分割不能なインラインは、装飾されない。デコレーティングボックスのマージン、ボーダー、およびパディングは、常にスキップされるが、子孫インラインボックスのマージン、ボーダー、およびパディングはスキップされない。

CSS 2.1は常にマージン、ボーダー、パディングのスキップを要求することに注意する。このレベルでは、デフォルトでデコレーティングボックスのマージン、ボーダー、パディングのみがスキップされる。将来において、CSS2.1はこの新しいデフォルトと一致するように更新されるかもしれない。また、先頭と末尾の空白を装飾するコントロールはレベル4で期待され、そしてHTML insおよびdel要素にデフォルトで適用される。

ユーザーエージェントは、線がグリフのインクを横切り、グリフのアウトラインの両側からある程度離れたところで下線と上線を中断してもよい。この動作はこのレベルでは制御できないが、レベル4ではさらにまた定義される。ただし、打ち消し線は連続していなければならない。

An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline.

Skipping Glyph Ink

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

この仕様は、UAが審美的および性能上の考慮事項を扱うための適切な措置を講じることができるように、グリフの「形状に従う」ための特定の方法を意図的に強制しないことに注意すること。たとえば、パフォーマンス上の理由から、UAは特定のサイズのしきい値を下回る四角い行末を仮定することができる。すなわち、特に細い線の装飾で、曲線を近似するために台形の終点を使用する。審美的な検討の観点から、UAは、グリフの境界が線の太さの一部のみと交差する、または水平に近い傾きを持つ場合、何が起こるかを検討するかもしれない—曲線を正確に従うことは、不便な下線の束をもたらす。グリフの囲まれた領域内に線を表示するかどうかは、依然としてもう一つの考慮事項である。
Take, for example, the word “goal” with an underline striking through the bottom loop of the “g”.
			            Depending on the position and thickness of the underline,
			            we might see the entire thickness of the underline, or only part of it within the “g”.
			            This example shows a masked-out underline in two positions.
			            In the left pair the underline passes through the center of the bowl of the “g”:
			            the full thickness of the underline shows through the center,
			            filling it.
			            In the right pair the underline is slightly lower,
			            and thus the portion of the underline within the “g” can only show a partial thickness.

外側の下線の湾曲した端が、その外側の輪郭を抱きこむことによって文字を通して下線の連続性を示唆する一方で、くぼみ内の下線の一部を隠すと、その字をより鮮明に見せることができる。

相対配置の子孫は、子孫のテキストと一緒に相対配置の子孫に適用されるすべてのテキスト装飾を移動する。その行の装飾の初期位置の計算に影響しない。visibilityプロパティ、text-shadow、フィルター、およびその他のグラフィック変換も同様に、そのボックスに適用されるすべてのテキスト装飾—祖先ボックスから伝播された装飾を含む—に影響し、初期位置または厚さの計算には影響しない。 (分割不能なインライン経由または非置換インラインボックスのマージン/ボーダー/パディングを横断して描かれる行装飾の場合、行装飾は同様に装飾ボックスよりもむしろ影響を受けた分割不能なインラインまたは非置換インラインボックスに関連付けられる。)

次のスタイルシートと文書断片の場合:
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>

blockquote要素の下線はspan要素を囲む匿名インライン要素に伝達されて"Help, help!"というテキストを青色にし、その真下の匿名インラインから青色の下線であり、色はblockquote要素から受け継がれている。下線が伝達されるフロー内のブロックのように、emブロックの<em>text</em>も下線が引かれる。テキストの最終行はfuchsiaだが、その真下の下線はまだ匿名インライン要素が提供するblueの下線である。上記の下線レンダリング例この図は上記の例で複雑なボックスを示す。丸みを帯びたaquaの線は、段落要素のインラインの内容を囲む匿名のインライン要素を表し、丸みを帯びたbuleの線はspan要素を表し、orangeの線はブロックを表す。

注:行装飾は、継承を介さずにボックスツリーを介して伝播されるため、display: contentsを持つ要素に指定する場合に、子孫には影響しない。

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

名前: text-decoration-line
値: none | [ underline || overline || line-through || blink ]
初期値: none
適用要素: すべての要素
継承性: no (but see prose, above)
パーセンテージ: n/a
算出値: 指定されるキーワード
規範順: 文法による
アニメーション型: discrete

もしあれば、どの行装飾を要素に加えるかを指定する。値の意味は次のとおり:

none
テキストの装飾を生成も抑制もしない。
underline
テキストの各行に下線を引く。
overline
テキストの各行に上線を引く(すなわち、下線と逆側)。
line-through
テキストの各行に中央線を引く。
blink
テキストを点滅させる(可視と不可視の間で交互に)。適合ユーザーエージェントは単にテキストを点滅させなくてもよい。テキストを点滅させないことが、WAI-UAAGのチェックポイント3.3を満たすための1つの手法であることに注意する。この値は、Animationsを支持して廃止される[CSS-ANIMATIONS-1]

注:縦書きモードにおいて、text-underline-positionは下線と上線が切り替わることがある。これは、下線の位置が言語固有の設定を自動的にキーオフできる。

2.2. テキスト装飾種:text-decoration-styleプロパティ

名前: text-decoration-style
値: solid | double | dotted | dashed | wavy
初期値: solid
適用要素: すべての要素
継承性: なし
パーセンテージ: n/a
算出値: specified keyword
規範順: 文法による
アニメーション型: discrete

このプロパティは、要素で指定されたテキストの装飾に対して引かれた線の種類を指定する。値は、border-styleプロパティ [CSS-BACKGROUNDS-3]と同じ意味を持つ。wavyは波線を示す。

たとえ子孫ボックスが別に指定された種類を持つ場合でも、テキスト装飾の種類は、指定された要素から生じるすべての装飾を同じままにしなければならない。

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

名前: text-decoration-color
値: <color>
初期値: currentcolor
適用要素: すべての要素
継承性: なし
パーセンテージ: n/a
算出値: computed color
規範順: 文法による
アニメーション型: by computed value type

このプロパティは、text-decoration-lineをもつ要素に設定されたテキスト装飾(下線、上線、打ち消し線)の色を指定する。

たとえ子孫ボックスが別に指定された色を持つ場合でも、テキスト装飾の色は、指定された要素から生じるすべての装飾を同じままにしなければならない。

2.4. テキスト略記:text-decorationプロパティ

名前: text-decoration
値: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
初期値: 個々のプロパティを参照
適用要素: 個々のプロパティを参照
継承性: 個々のプロパティを参照
パーセンテージ: 個々のプロパティを参照
算出値: 個々のプロパティを参照
アニメーション型: 個々のプロパティを参照
規範順: 文法による

このプロパティは、1つの宣言でtext-decoration-linetext-decoration-color、およびtext-decoration-styleを設定するための略記である。省略された値には、初期値が設定される。

柱:text-decoration-colortext-decoration-styleの両方の値を省略するtext-decoration宣言は、CSS Level 1およびLevel 2と後方互換性を持つ。

次の例において、未訪問のリンクの下線は、CSS1とCSS2のUAで青色の直線の下線となり、CSS3のUAで波線で点線の下線となる。
:link {
  color: blue;
  text-decoration: underline;
  text-decoration: navy dotted underline; /* Ignored in CSS1/CSS2 UAs */
}

注:略記は、コンテンツをキーオフする言語/書記体系依存の設定であるtext-underline-positionプロパティを意図的に省略しているため、text-decoration略記の(継承されない)文体設定とは独立にカスケードして継承できる。

2.5. テキスト下線の位置:text-underline-positionプロパティ

名前: text-underline-position
値: auto | [ under || [ left | right ] ]
初期値: auto
適用要素: すべての要素
継承性: yes
パーセンテージ: n/a
算出値: 指定されるキーワード
規範順: 文法による
アニメーション型: discrete

このプロパティは、要素で指定された下線の位置を設定する。(これは、祖先要素で指定された下線には影響を与えない。)leftまたはrightが単独で指定される場合、autoも暗黙的に指定される。

次の例は、水平と垂直両方のテキストで適切な下線の位置で、現代の中国語、日本語、韓国語テキストをデザインする:
: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; }

値の意味は次のとおり:

auto
ユーザーエージェントは、下線の位置を決定するために任意のアルゴリズムを使用してもよい。しかし、その位置はアルファベットのベースラインの下に配置しなければならない。

注:添字付き(さもなければ下げた)テキストが交差またはアルファベットの下線が高すぎる漢字やチベット文字などのアジアの文字からグリフの上を描かない限り、デフォルトの下線の位置はアルファベットの下線に近づくことが示唆される。このような場合、より低い下線の移動またはunderに対して説明されるようなemボックス辺への位置合わせが、より適切である。

In a typical Latin font, the underline is positioned slightly
				         below the alphabetic baseline, leaving a gap between the line
				         and the bottom of most Latin letters, but crossing through
				         descenders such as the stem of a 'p'.

典型的な "アルファベット"下線がアルファベットの下線の下だけ配置されている

under
下線は要素のテキストコンテンツのを基準に配置される。この場合、通常下線はディセンダを横断することはない。 (これは“会計”下線とも呼ばれる。)縦のタイポグラフィックモードで特定のサイドが優先される場合、この値はleftまたはrightと結合できる。
text-underline-positionは継承し、またtext-decoration略記によって再設定されないため、以下の例は文書を長くて複雑なディセンダとともに書記システムに対してより適切なunder下線へ変える。それはまた、多くの添字を使用する数学または化学文書に対して、多くの場合有用である。
:root { text-underline-position: under; }

注:一部のフォントは、フォントのディセントメトリックを下回るディセンダーまたはダイアクリティカルマークを持つため、under値は、下線がグリフに接触しないことを保証するものではない。

left
縦のタイポグラフィックモードでは、テキストの左辺に常に揃えられる以外は、下線はunderのように揃えられる。これはテキストの"上"側に描かれる下線が発生した場合、上線も辺を切り替え、"下"側に描かれる。
right
縦のタイポグラフィックモードでは、テキストの右辺に常に揃えられる以外は、下線はunderのように揃えられる。これはテキストの"上"側に描かれる下線が発生した場合、上線も辺を切り替え、"下"側に描かれる。
In mixed Japanese-Latin vertical text, 'text-underline-position: left'
					          places the underline on the left side of the text. In mixed Japanese-Latin vertical text, 'text-underline-position: right'
					          places the underline on the right side of the text.
left right

縦のタイポグラフィックモードで、text-underline-positionの値leftrightは、テキストのいずれかの辺に下線を置くことを許可する。(横のタイポグラフィックモードで、両方の値がautoとして扱われる。)

正確な位置と行装飾の太さは、このレベルではUA定義である。しかし、下線または上線に対してUAは単一の装飾ボックスから派生装飾に対する各行上の単一の太さと位置を使用しなければならない。

A single underline drawn under varying font sizes and vertical positions must be a single line. vs. Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect.

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

行装飾はフォントサイズおよび縦位置の変化とともに要素を補完できるため、行装飾への最良位置は、装飾ボックスによって決定される理想的な位置とは限らないことに注意する。たとえば、要素がかなり大きいフォントサイズでテキストを含む場合、小さなフォントに配置される上線は事実上打ち消し線になる。テキストがアルファベットの下線に揃えられない(たとえば、縦組版のスタイルで、テキストがデフォルトで中央のベースラインに揃えられる[CSS-WRITING-MODES-4])場合、下線はより大きいフォントサイズの子孫テキストを切り取る。子孫コンテンツを考慮するUAは、より良い書体が得られる。

縦書きテキストの中央ベースライン揃えのために、小さな縦書きテキストの左側の下線は、より大きなフォントサイズをもつ子のテキストを切り取る。下線が分割されることは許可されないが、その位置をさらに左に調整すると、下線付きのテキストがすべて適切に収まるようになる。

UAは、baseline以外のvertical-align[CSS2]またはfont-variant-position [CSS-FONTS-3]を介して上付き/下付きで位置決めされる装飾ボックスのシフトされたメトリックと一致するように行位置を調整しなければならないが、そのスタイル付けされた装飾ボックスの子孫に応じて行位置や太さを調整してはならない。これは、上付き文字と下付き文字に正確に装飾させ(下線、打ち消し線など)、変形または先祖でこのような装飾の位置を壊すことから防ぐ。

An underline for just the superscript 'st' in '1st' is drawn just below the superscript,
		             whereas an underline for the entire text is drawn at the appropriate position for full-size text.

上付き文字に下線を適用する vs. 上付き文字を含むテキストに下線を適用する例

(OpenTypeなど)いくつかのフォント形式は、行装飾の適切な位置に関する情報を提供できる。UAは、適切な場所ならどこでもフォントからの情報(下線の太さ、または適切なアルファベットの配置など)を使用すべきである。

注:通常、OpenTypeフォントメトリックは、alphabetic下線の位置を与える。一部の(特にCJKフォントで)場合、これはunder left下線の位置を与える。(この場合、フォントの下線メトリックは典型的に、emボックスの下辺に接する)。UAは不正確なフォントメトリックを修正してもよいが必須ではない。

3. 圏点

東アジアの文書は、テキストの連続を強調するために、各グリフの横に小さな記号を伝統的に使用する。たとえば:

Example of emphasis in Japanese appearing over the text

アクセントの強調(わかりやすさのために青色で示される)を日本語テキストに適用

text-emphasis略記、およびそのtext-emphasis-styletext-emphasis-color記法は、テキストにマークを適用するために使用される。個別に継承するtext-emphasis-positionプロパティは、テキストに対する圏点の位置の設定を可能にする。

3.1. 圏点の種類:text-emphasis-styleプロパティ

名前: text-emphasis-style
値: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>
初期値: none
適用要素: テキスト
継承性: yes
パーセンテージ: n/a
算出値: キーワードnone、形状と塗りつぶしを表すキーワードのペア、または文字列
規範順: 文法による
アニメーション型: discrete

このプロパティは、要素のテキストに圏点を適用する。値の意味は次のとおり:

none
圏点なし。
filled
形状は、無地の色で満たされる。
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>に複数の文字を指定すべきでない。UAは、複数の書記素クラスタから成る文字列を切り捨てる、または無視してもよい。

形状キーワードが指定されるが、filledopenのどちらでもないものが指定された場合、filledが仮定される。filledまたはopenのみが指定される場合、形状キーワードは、横のタイポグラフィックモードcircle、縦のタイポグラフィックモードsesameを算出する。

圏点はrubyの特性の付加および50%に縮小されたサイズをもつ要素のフォントの設定を使用して描画されるべきである。しかし、すべてのフォントがこれらのグリフを持っているとは限らず、一部のフォントは、これらのコードポイントで圏点に対する適切でないサイズを使用する。UAは、圏点にふさわしいとされるフォントの使用を選択してもよく、また代わりにUAによって合成されてもよい。圏点は、縦のタイポグラフィックモードで直立のままにして置かなければならない。CJK文字のように、マークは書字モードに一致するように回転しない。縦書きモードの横タイポグラフィックモードでのマークの向きは、このレベルでは未定義である(ただし、明確なユースケースが発生した場合は、将来のレベルで定義される)。

注:圏点に対するふさわしいフォントの一例は、AdobeのオープンソースプロジェクトのKenten Generic OpenType Fontフォントである。これは、圏点のために特別に設計されている。

圏点は、各タイポグラフィック文字単位に対して一度に描画される。しかし、圏点は、次のものに対して描かれるわけではない

注:マークされている文字のコントロールはレベル4で追加される。(句読点のリストは、特に非CJKの句読点の場合にさらに細かくなる。)

3.2. 圏点の色:text-emphasis-colorプロパティ

名前: text-emphasis-color
値: <color>
初期値: currentcolor
適用要素: テキスト
継承性: yes
パーセンテージ: n/a
算出値: computed color
規範順: 文法による
アニメーション型: by computed value type

このプロパティは、圏点の前景色を指定する。

注:currentcolorキーワードは、自身を計算し、継承が実行された後に、color値に解決される。これは、デフォルトでtext-emphasis-colorが、colorが要素にわたって変化するとともに、テキストのcolorに一致することを意味する。

3.3. 圏点の略記:text-emphasisプロパティ

名前: text-emphasis
値: <'text-emphasis-style'> || <'text-emphasis-color'>
初期値: 個々のプロパティを参照
適用要素: 個々のプロパティを参照
継承性: 個々のプロパティを参照
パーセンテージ: 個々のプロパティを参照
算出値: 個々のプロパティを参照
アニメーション型: 個々のプロパティを参照
規範順: 文法による

このプロパティは、1つの宣言でtext-emphasis-styleおよびtext-emphasis-colorを設定するための略記である。省略された値には、初期値が設定される。

text-emphasis-positionはこの略記でリセットされないことに注意する。これは、一般に形状や色が異なるが、位置は、文書を通して特定の言語に対して一貫するためである。したがって、位置は独立して継承すべきである。

3.4. 圏点の位置:text-emphasis-positionプロパティ

名前: text-emphasis-position
値: [ over | under ] && [ right | left ]?
初期値: over right
適用要素: テキスト
継承性: yes
パーセンテージ: n/a
算出値: 指定されるキーワード
規範順: 文法による
アニメーション型: discrete

このプロパティは、圏点が描かれる場所を記述する。[ right | left ]が省略される場合、rightをデフォルトにする。値は以下の意味をもつ:

over
横のタイポグラフィックモードでテキストの上に圏点を描く。
under
横のタイポグラフィックモードでテキストの下に圏点を描く。
right
縦のタイポグラフィックモードでテキストの右に圏点を描く。
left
縦のタイポグラフィックモードでテキストの左に圏点を描く。

各文字は、text-emphasis-positionおよび中心とするルビ揃えによって与えられるルビ位置をもつルビ注釈テキストとしてマークを割り当てたかのように、圏点は正確に描かれる。この位置は、下線または上線の装飾と矛盾する場合は調整してもよいことに注意する。

行高さでの圏点の効果は、ルビテキストの場合と同じである。

注:圏点の好ましい位置は、言語に依存する。たとえば日本において、好ましい位置はover rightである。一方、中国語において、望ましい位置はunder rightである。以下の表は、中国語と日本語に対する好ましい圏点の位置を要約する:
好ましい圏点とルビの位置
言語 優先される位置
横書き 縦書き
日本語 over right Emphasis marks appear over each emphasized character in horizontal Japanese text. Emphasis marks appear on the right of each emphasized character in vertical Japanese text.
韓国語
モンゴル語
中国語 under right Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text.

ルビが圏点と同じ位置に描かれる文字に圏点が適用される場合、圏点はルビの外側に置かれる。これは、auto-hiddenと空のルビ注釈を含む。

In this example, emphasis marks are applied to 4 characters, two of which have ruby.
		       The dots are placed above each character (aligned with the ruby) for the bare characters,
		       and above the ruby text for the annotated characters.

圏点を4文字に適用し、ルビを2文字に適用する

圏点がルビと衝突する場合、一部のエディターは、圏点を非表示にすることを好む。HTMLにおいて、これは以下のスタイル規則となる:
ruby { text-emphasis: none; }

ルビが圏点と衝突する場合、ルビを非表示にすることを好むエディタもいる。HTMLにおいて、これは以下のスタイル規則となる:

em { text-emphasis: dot; } /* Set text-emphasis for <em> elements */
em rt { display: none; }   /* Hide ruby inside <em> elements */

4. テキストの影:text-shadowプロパティ

名前: text-shadow
値: none | [ <color>? && <length>{2,3} ]#
初期値: none
適用要素: テキスト
継承性: yes
パーセンテージ: n/a
算出値: キーワードnoneまたはリストのいずれか。各項目は3つの絶対長さと算出色で構成される。
規範順: 文法による
アニメーション型: as shadow list

このプロパティは、要素のテキストに適用される影の効果のコンマ区切りのリストを受け入れる。値は、box-shadowに関して解釈される[CSS-BACKGROUNDS-3]。(ただしスプレッド値およびinsetキーワードが許可されないことに注意する。)影は要素のテキスト全部だけでなく、指定する任意の文字装飾すべてに適用される。

影の効果は、前面から背面へ適用される。最初の影が一番上に表示される。影は、このようにお互いに重なってもよいが、テキスト自身をオーバーレイすることは決してない。影は要素のボーダーおよび/または背景(存在する場合)と、要素のテキストおよびテキスト装飾の間をスタックレベルで描かれなければならない。UAは、同じスタックレベルとスタックコンテキストに属する、隣接する要素内のテキストの上にテキストの影を描くのを避けるべきである。(これは、影の正確なスタックレベルが、要素がボーダーや背景を持つかどうかに依存することを意味するかもしれない。このように、テキストの影の正確なスタッキング挙動は、UA定義である。)指定された影レイヤーが各グリフに影をつける、または独立した装飾、またはテキストおよび/または装飾が平らにされてから影をつけるかどうかは不定である。

box-shadowとは異なり、テキストの影は影となった形状に切り取られず、テキストが部分的に透明であるかどうかを通じて表示するかもしれない。box-shadowのように、テキストの影はレイアウトに影響を与えず、スクロールを引き起こしたり、スクロール可能オーバーフロー領域のサイズを大きくしない。

注:ここで定義された影の描画の順序は、1998年のCSS2勧告で定義された順序とは正反対である。

text-shadowプロパティは、::first-line::first-letter擬似要素の両方に適用する。

5. テキスト装飾を描画する

5.1. テキスト装飾の描画順序

[CSS2]によれば、テキスト装飾は以下の順序で描画される(一番下が最初):

行装飾がボックス装飾または分割不能なインライン渡って描かれる場合、それらは非配置コンテンツの上、任意の配置子孫の下に描かれる(CSS2.1付録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の開発者にデフォルトのスタイルシートの実装を支援することが目的であるが、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 */

何らかの問題、追加すべき勧告、または訂正を見つけた場合、件名[css-text-decor]とともにwww-style@w3.orgへ情報を送信されたい。

text-decoration-line: blinkは他の既存のプロパティで完全に再現できない一方で、著者は次のようなCSSで非常によく似た効果を得ることができる:
@keyframes blink {
  0% {
    visibility: hidden;
    animation-timing-function: step-end;
  }
  25%, 100% {
    visibility: visible;
  }
}
blink {
  animation: blink 1s infinite;
}

付録C: 変更点

Changes since the August 2019 Candidate Recommendation

Changes include:

Changes since the July 2018 Candidate Recommendation

Changes include:

A Disposition of Comments is available.

Changes since the August 2013 Candidate Recommendation

Significant changes include:

適合性

文書規約

適合性要件は、説明的な表現とRFC 2119用語の組み合わせで表現される。本文章での標準部分においてキーワード“MUST”、“MUST NOT”、“REQUIRED”、“SHALL”、“SHALL NOT”、“SHOULD”、“SHOULD NOT”、“RECOMMENDED”、“MAY”、“OPTIONAL”はRFC 2119で示されたとおりに解釈される。しかし、読みやすさのために、これらの単語はこの仕様で大文字のみで出現しない。

この仕様のすべての本文は、明示的に非規範的、例、および注としてマークされた部分を除き、規範的である。[RFC2119]

この仕様の例は、“たとえば”という言葉で導入されるか、規範的な本文からclass="example"を設定し離される。このように:

これは参考情報の一例である。

参考情報の注は“注”で始まり、class="note"を設定し離される。このように:

注、これは参考情報の注である。

助言は、特別な注意を喚起するようにスタイル付けされる規範的なセクションであり、<strong class="advisement">とともに他の規範的なテキストとは別に設定される。このように:ユーザーエージェントは、アクセシブルな代替手段を提供しなければならない。

適合クラス

この仕様の適合クラスには次の3つが定義される:

スタイルシート
CSSスタイルシート
レンダラ
スタイルシートの意味を解釈し、それを使ってドキュメントを表示するユーザーエージェント
オーサリングツール
スタイルシートを記述するユーザーエージェント

スタイルシートは、このモジュールで定義される構文プロパティを使用するスタイルシートの宣言のすべてが、このモジュールで定義される総称的なCSS文法および個々の文法に従って妥当である場合、この仕様に準拠する。

レンダラは、適切な仕様によって定義されるスタイルシートの解釈に加え、機能を正確にパースしかつ文書を適切な方法でレンダリングすることでこの仕様によって定義されるすべての機能をサポートする場合、この仕様に準拠する。しかし、デバイスの制限によってがユーザーエージェントが正確にレンダリングできない場合、ユーザーエージェントが非準拠となる。(たとえば、ユーザーエージェントがモノクロのモニタでカラーをレンダリングする必要の無い場合。)

オーサリングツールは、このモジュールにおける機能の総称的なCSS文法および個々の文法に従って構文的に正しいスタイルシートを既述し、かつこのモジュールで説明されるようにスタイルシートの他のすべての適合性要件を満たす場合、この仕様に準拠する。

部分的実装

著者がフォールバックの値として上位互換の解析規則を活用出来るように、CSSレンダラは@規則、プロパティ、プロパティの値、キーワード、その他使用可能なサポートのレベルがない構文要素を、非妥当(そして必要に応じて無視)として扱わなければならない。特に、ユーザーエージェントは1つの複数値プロパティ宣言において、サポートされていないコンポーネントの値と、尊重されサポートされている値を選択的に無視してはならない。もし任意の値が非妥当と見なされている(サポートされていない値はそうでなければならない)場合、CSSは宣言全体が無視されている必要がある。

不安定な実装とプロパティ機能

将来の安定したCSS機能との衝突を避けるために、CSSワーキンググループは、不安定な機能とCSSへの独自拡張の実装に対する次のベストプラクティスを推奨する。

非実験的実装

仕様がCandidate Recommendationの段階に達すると、非実験的な実装が可能になり、実装者は、仕様に対して正しく実装したことを実装できる任意のCR段階の機能を、接頭辞のない実装としてリリースする必要がある。

CSSの実装ごとの相互運用性を確立し維持するために、CSSワーキンググループは非実験的なCSSレンダラに対し、非実験的なCSS機能をリリースする前に、実装レポート(そして、もし必要なら、実装レポートで使用したテストケース)をW3Cへ提出するよう求めている。W3Cへ提出されたテストケースは、CSS ワーキンググループによるレビューと修正の対象となる。

テストケースと実装レポートの提出に関する詳細情報は、CSSワーキンググループのウェブサイト(https://www.w3.org/Style/CSS/Test/)にある。質問は直接public-css-testsuite@w3.orgメーリングリストまで。

CRの終了基準

この仕様をProposed Recommendationにするためには、各機能で少なくとも2つの独立した、相互運用可能な実装がなくてはならない。各機能は、プロダクトの別のセットによって実装されてよく、すべての機能が1つの製品で実装される必要はない。この基準のために、以下の用語を定義する:

independent
各実装は異なる団体によって開発されている必要があり、共有、再利用、また別の条件を満たす実装で使用されているコードからの派生はできない。コードの、この仕様の実装に何の関係もない部分は、この要件から免除される。
interoperable
公式のCSSテストスイート(実装がWebブラウザでない場合は、同等のテスト)において、個々のテストケースをパスすること。該当するユーザーエージェントが相互運用性を主張するために使用される場合、テストスイート内の関連する全てのテストには、同等のテストが作られていなければならない。加えて、そのようなユーザーエージェント相互運用性を主張するために使用される場合、相互運用性のために、同じ方法で同等のテストをパスするユーザーエージェントが1つ以上追加で必要となる。同等のテストは、ペアレビューできるように公開して利用できるようにしなければならない。
implementation
ユーザーエージェントは
  1. 仕様を実装している。
  2. 一般に公開されている。実装は出荷する製品、もしくは公開され利用可能なバージョンである(たとえば、ベータバージョンやプレビュー版、"ナイトリービルド"など)。非出荷製品のリリースは、安定性を実証するため少なくとの1ヶ月の期間が機能実装に必要となる。
  3. 実験的(たとえば、現バージョンがテストスイートをパスすることに特化し、将来的にも通常利用を目的として開発されていない)ではない。

仕様は、少なくとも6ヶ月の間はCandidate Recommendationのままである。

索引

この仕様で定義される用語

参考文献で定義される用語

参考文献

標準情報

[CSS-BACKGROUNDS-3]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 26 July 2021. CR. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-BREAK-3]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 4 December 2018. CR. URL: https://www.w3.org/TR/css-break-3/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou. CSS Color Module Level 4. 15 December 2021. WD. URL: https://www.w3.org/TR/css-color-4/
[CSS-DISPLAY-3]
Tab Atkins Jr.; Elika Etemad. CSS Display Module Level 3. 3 September 2021. CR. URL: https://www.w3.org/TR/css-display-3/
[CSS-FONTS-3]
John Daggett; Myles Maxfield; Chris Lilley. CSS Fonts Module Level 3. 20 September 2018. REC. URL: https://www.w3.org/TR/css-fonts-3/
[CSS-FONTS-4]
John Daggett; Myles Maxfield; Chris Lilley. CSS Fonts Module Level 4. 21 December 2021. WD. URL: https://www.w3.org/TR/css-fonts-4/
[CSS-INLINE-3]
Dave Cramer; Elika Etemad; Steve Zilles. CSS Inline Layout Module Level 3. 27 August 2020. WD. URL: https://www.w3.org/TR/css-inline-3/
[CSS-OVERFLOW-3]
David Baron; Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 23 December 2021. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-RUBY-1]
Elika Etemad; et al. CSS Ruby Annotation Layout Module Level 1. 2 December 2021. WD. URL: https://www.w3.org/TR/css-ruby-1/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS Text Module Level 3. 22 April 2021. CR. URL: https://www.w3.org/TR/css-text-3/
[CSS-TEXT-DECOR-4]
Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 4. 6 May 2020. WD. URL: https://www.w3.org/TR/css-text-decor-4/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 6 June 2019. CR. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 16 December 2021. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 30 July 2019. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: https://www.w3.org/TR/CSS21/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[UAX15]
Ken Whistler. Unicode Normalization Forms. 27 August 2021. Unicode Standard Annex #15. URL: https://www.unicode.org/reports/tr15/tr15-51.html

参考情報

[CSS-ANIMATIONS-1]
Dean Jackson; et al. CSS Animations Level 1. 11 October 2018. WD. URL: https://www.w3.org/TR/css-animations-1/
[CSS-COLOR-3]
Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3. 18 January 2022. REC. URL: https://www.w3.org/TR/css-color-3/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/

プロパティ索引

Name Value Initial Applies to Inh. %ages Anim­ation type Canonical order Com­puted value
text-decoration <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> 個々のプロパティを参照 個々のプロパティを参照 個々のプロパティを参照 個々のプロパティを参照 個々のプロパティを参照 文法による 個々のプロパティを参照
text-decoration-color <color> currentcolor すべての要素 なし n/a by computed value type 文法による computed color
text-decoration-line none | [ underline || overline || line-through || blink ] none すべての要素 no (but see prose, above) n/a discrete 文法による 指定されるキーワード
text-decoration-style solid | double | dotted | dashed | wavy solid すべての要素 なし n/a discrete 文法による specified keyword
text-emphasis <'text-emphasis-style'> || <'text-emphasis-color'> 個々のプロパティを参照 個々のプロパティを参照 個々のプロパティを参照 個々のプロパティを参照 個々のプロパティを参照 文法による 個々のプロパティを参照
text-emphasis-color <color> currentcolor テキスト yes n/a by computed value type 文法による computed color
text-emphasis-position [ over | under ] && [ right | left ]? over right テキスト yes n/a discrete 文法による 指定されるキーワード
text-emphasis-style none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string> none テキスト yes n/a discrete 文法による キーワードnone、形状と塗りつぶしを表すキーワードのペア、または文字列
text-shadow none | [ <color>? && <length>{2,3} ]# none テキスト yes n/a as shadow list 文法による キーワードnoneまたはリストのいずれか。各項目は3つの絶対長さと算出色で構成される
text-underline-position auto | [ under || [ left | right ] ] auto すべての要素 yes n/a discrete 文法による 指定されるキーワード

イシュー索引

何らかの問題、追加すべき勧告、または訂正を見つけた場合、件名[css-text-decor]とともにwww-style@w3.orgへ情報を送信されたい。