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

W3C 候補勧告草案,

この文書についての詳細
このバージョン:
https://www.w3.org/TR/2022/CRD-css-text-decor-3-20220505/
最新公開バージョン:
https://www.w3.org/TR/css-text-decor-3/
編集者草案:
https://drafts.csswg.org/css-text-decor-3/
以前のバージョン:
履歴:
https://www.w3.org/standards/history/css-text-decor-3
実装報告書:
https://wpt.fyi/results/css/css-text-decor
テストスイート:
http://test.csswg.org/suites/css-text-decor-3_dev/nightly-unstable/
フィードバック:
CSSWG課題リポジトリ
仕様内インライン
編集者:
Elika J. Etemad / fantasai (招待専門家)
(Google)
この仕様への編集提案:
GitHub エディター

概要

このモジュールは、下線、テキストシャドウ、強調記号など、CSSのテキスト装飾に関連する機能を含みます。

CSSは、構造化された文書(HTMLやXMLなど)の画面、印刷物などへのレンダリングを記述する言語です。

この文書のステータス

このセクションは、公開時点での文書のステータスを説明します。 現在のW3C出版物の一覧と、この技術レポートの最新の改訂版は W3C技術レポートインデックス https://www.w3.org/TR/ にあります。

この文書は CSSワーキンググループ により、候補勧告草案として 勧告トラックを利用して公開されました。 候補勧告としての公開は、 W3Cおよびそのメンバーによる承認を意味するものではありません。 候補勧告草案は、ワーキンググループが次の候補勧告スナップショットに含める予定の、以前の候補勧告からの変更を統合しています。

これはドラフト文書であり、今後更新、置換、または他の文書によって廃止される場合があります。 この文書を作業途中以外のものとして引用することは適切ではありません。

フィードバックは GitHubで課題を提出(推奨)してください。 タイトルに仕様コード「css-text-decor」を含め、例: “[css-text-decor] …コメント概要…” のようにしてください。 すべての課題とコメントは アーカイブされています。 または、フィードバックは(アーカイブ済み)の公開メーリングリスト www-style@w3.orgにも送信できます。

この文書は 2021年11月2日 W3Cプロセス文書に準拠しています。

この文書は W3C特許ポリシーに基づいて運営されるグループによって作成されました。 W3Cは、グループの成果物に関連して提出された特許開示の公開リストを管理しています。 そのページには特許の開示方法についての案内もあります。 個人が本質的請求権Essential Claim(s)を含むと考える特許について実際に知っている場合は、 W3C特許ポリシー第6節に従い開示する必要があります。

次の機能はリスクありとされており、CR期間中に削除される可能性があります:

「リスクあり」はW3Cプロセス上の専門用語であり、必ずしもその機能が削除や遅延の危険にさらされていることを意味するものではありません。 この表記は、WGがその機能を相互運用可能に適時実装することに困難があると考えていることを示しており、提案勧告段階への移行時に必要であれば新たな候補勧告を公開せずとも機能を削除できるようにするためのものです。

1. はじめに

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

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

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

1.1. モジュール同士の関係

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

1.2. 値の定義

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

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

1.3. 用語集

この仕様で使用される characterlettercontent language という用語は [CSS-TEXT-3] で定義されています。 その他の用語や概念は、[CSS2] および [CSS-WRITING-MODES-4]で定義されています。

2. 線による装飾:下線、上線、取り消し線

以下のプロパティは、要素の内容に追加される線による装飾を説明します。 インラインボックスに指定または伝播されると、 そのボックスは その装飾の装飾ボックスとなり、 装飾がすべてのフラグメントに適用されます。 その後、装飾はインラインを分割するインフローブロックレベルボックスにも伝播されます (CSS2.1 セクション9.2.1.1参照)。 ブロックコンテナで インラインフォーマットコンテキストを確立するものに指定または伝播される場合、 装飾は全てのインフロー インラインレベルの 子要素を囲む匿名インラインボックスに伝播されます。 ルビコンテナに指定または伝播される場合、 装飾はルビベースのみに伝播されます。 その他すべてのボックスタイプでは、装飾はすべてのインフロー子要素に伝播されます。

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

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

注意:CSS 2.1では常にマージン、ボーダー、パディングを除外することが要求されていました。 このレベルでは、デフォルトで装飾ボックスのマージン、ボーダー、パディングのみ除外します。 将来的にCSS2.1もこの新しいデフォルトに合わせて更新される可能性があります。 また、先頭・末尾の空白を装飾する制御はレベル4で導入される予定であり、 デフォルトでHTMLの ins および del 要素に適用されます。

UAは、下線や上線がグリフのインク部分を横切る場合や、グリフ輪郭の両側にある程度の距離まで、 下線や上線を中断してもよいとされます。 この挙動はこのレベルでは制御できませんが、レベル4でさらに定義されます。 ただし、取り消し線は常に連続でなければなりません。

ミャンマー文字の下線は、ディセンダーや合成文字のアルファベットベースライン下に落ちる縦線を避けて描かれる例。

グリフインクの回避

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

注意:この仕様では「グリフの形状に従う」方法を特定の方式で義務付けていません。 これはUAが美的およびパフォーマンス面に配慮した適切な方法を採用できるようにするためです。 例えば、 UAがあるサイズ閾値以下ではパフォーマンスのため角型の線端を使う場合や、 曲線を近似するために台形の線端を用いる場合(特に細い線装飾で)などが考えられます。 美的観点では、 グリフ境界が線の厚みの一部のみと交差する場合や、水平方向に近い斜めの場合に、 曲線に厳密に沿うと下線が不格好な「ひげ状」になることがあります。 グリフ内の閉じた領域内で線を表示するかどうかも検討事項です。
例えば「goal」という単語で、「g」の下部ループに下線が通る場合。
			            下線の位置や太さによって、「g」内で下線の全厚みが見える場合もあれば、一部のみしか見えない場合もあります。
			            この例では2つの位置でマスクされた下線を示します。
			            左側では下線が「g」の中心を通り、全厚みが見えます。
			            右側では下線が少し下にあり、「g」内で部分的な厚みしか見えません。

ボウル内の下線部分を隠すことで文字がよりすっきり見え、 下線の曲線端が外側輪郭を沿うことで文字を通して下線が連続している印象を与えます。

子要素を相対位置で配置すると、そのテキストに適用されるすべての装飾も子要素のテキストとともに移動しますが、 装飾の初期位置の計算には影響しません。 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>text</em>のemブロック内のテキストも下線が引かれます。これは下線が伝播されたインフローブロック内にあるためです。 最後の行のテキストはフューシャ色ですが、その下の下線は依然として匿名インライン要素の青い下線が表示されます。 上記下線例のサンプルレンダリング この図は上記例で関わるボックスを示しています。 丸い水色線は段落要素内のインライン内容を囲む匿名インライン要素、 丸い青い線はspan要素、 オレンジ色の線はブロックを表します。

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

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

名前: text-decoration-line
値: none | [ underline || overline || line-through || blink ]
初期値: none
適用対象: すべての要素
継承: no(ただし上記本文参照)
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法通り
アニメーション型: 離散値

どのような線装飾を要素に追加するかを指定します。 各値の意味は次の通りです:

none
テキスト装飾を生成も抑制もしません。
underline
各行のテキストに下線を引きます。
overline
各行のテキストの上側(下線の反対側)に線を引きます。
line-through
各行のテキストの中央に線を引きます。
blink
テキストが点滅します(表示と非表示を交互に切り替えます)。 適合するユーザーエージェントは単に点滅させない場合があります。 点滅させないことは WAI-UAAG のチェックポイント3.3を満たすための一つの方法です。 この値は 非推奨 であり、Animations [CSS-ANIMATIONS-1] の利用が推奨されます。

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

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

名前: text-decoration-style
値: solid | double | dotted | dashed | wavy
初期値: solid
適用対象: すべての要素
継承: no
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法通り
アニメーション型: 離散値

このプロパティは要素に指定したテキスト装飾線のスタイルを指定します。値の意味は border-style プロパティ [CSS-BACKGROUNDS-3] と同じです。wavy は波線を意味します。

テキスト装飾のスタイルは、要素から発生したすべての装飾で同じでなければならず、子孫ボックスで異なるスタイルが指定されていても変わりません。

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

名前: text-decoration-color
値: <color>
初期値: currentcolor
適用対象: すべての要素
継承: no
パーセンテージ: 該当なし
算出値: 計算された色
正規順序: 文法通り
アニメーション型: 計算値型による

このプロパティは、text-decoration-lineで指定された下線・上線・取り消し線の色を指定します。

テキスト装飾の色は、要素から発生したすべての装飾で同じでなければならず、子孫ボックスで異なる色が指定されていても変わりません。

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

名前: text-decoration
値: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
初期値: 各プロパティ参照
適用対象: 各プロパティ参照
継承: 各プロパティ参照
パーセンテージ: 各プロパティ参照
算出値: 各プロパティ参照
アニメーション型: 各プロパティ参照
正規順序: 文法通り

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

注意: text-decoration 宣言で text-decoration-color および text-decoration-style の両方を省略した場合、 CSSレベル1および2と後方互換性があります。

次の例では、未訪問リンクにCSS1・CSS2 UAでは青色の実線下線、 CSS3 UAではネイビー色の点線下線が引かれます。
:link {
  color: blue;
  text-decoration: underline;
  text-decoration: navy dotted underline; /* CSS1/CSS2 UAでは無視されます */
}

注意: このショートハンドは意図的に text-underline-position プロパティを除外しています。 これは言語や書記体系に依存する設定であり、コンテンツに基づいて決まるため、 継承されない text-decoration ショートハンドのスタイル設定とは独立してカスケード・継承できるようになっています。

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

名前: text-underline-position
値: auto | [ under || [ left | right ] ]
初期値: auto
適用対象: すべての要素
継承: はい
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法通り
アニメーション型: 離散値

このプロパティは、要素に指定された下線の位置を設定します。 (祖先要素で指定された下線には影響しません。) 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ボックス端に合わせる方が適切です。

一般的なラテンフォントでは、下線はアルファベットベースラインのすぐ下に配置され、ほとんどのラテン文字の下部との間に隙間ができますが、pの茎のようなディセンダー部分では線が交差します。

典型的な「アルファベット下線」はアルファベットベースラインすぐ下に位置します

under
下線は要素のテキスト内容のに配置されます。 この場合、通常下線はディセンダーを横切りません。 (「会計下線」と呼ばれることもあります。) この値は、縦書き組版モードで、特定の側(leftまたはright)を指定したい場合に left または right と組み合わせ可能です。
text-underline-position は継承され、 text-decoration のショートハンドではリセットされないため、 次の例では文書全体の下線位置を under に切り替えています。 これはディセンダーが長く複雑な書記体系や、添え字を多用する数式・化学式テキストなどに適しています。
:root { text-underline-position: under; }

注意: under値でも、 下線がグリフと衝突しないことは保証されません。 一部のフォントでは、ディセンダーやダイアクリティカルマークがフォントのディセント指標より下に伸びる場合があります。

left
縦書き組版モードでは、下線は underと同様に揃えますが、 必ずテキストの左端に揃えます。 これにより下線がテキストの「over」側に描画される場合、上線も側を入れ替え「under」側に描画されます。
right
縦書き組版モードでは、下線は underと同様に揃えますが、 必ずテキストの右端に揃えます。 これにより下線がテキストの「over」側に描画される場合、上線も側を入れ替え「under」側に描画されます。
縦書きの日本語とラテン文字混在テキストで、text-underline-position: left は下線が左側に描画されます。 縦書きの日本語とラテン文字混在テキストで、text-underline-position: right は下線が右側に描画されます。
left right

縦書き組版モードでは、text-underline-position の値 left および right により、下線をテキストの任意の側に配置できます。(横書き組版モードでは、両値とも auto として扱われます。)

線装飾の正確な位置や太さは、このレベルではUA定義です。 ただし、下線と上線についてはUAは、単一装飾ボックスから導出された装飾について、各行で単一の太さ・位置を使用しなければなりません。

異なるフォントサイズ・縦位置でも、一つの下線は一本の線で描かれる必要があります。 vs. 装飾されたテキストごとに位置と太さが異なる線分を複数描画するのは誤りです。

正しい/誤った <u>A<sup>B</sup><big>C</big>D</u> の下線描画例

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

縦書きの中央ベースライン揃えのため、小さい縦組テキストの左下線が、大きなフォントサイズの子要素を横切ります。 下線は分断できませんが、より左側に位置調整することで 下線がすべての下線付きテキストに対応できます。

UAは、装飾ボックスvertical-alignbaseline 以外にシフトされた場合や、 font-variant-position で添え字・上付きになった場合は、 線の位置を調整しなければなりません[CSS2][CSS-FONTS-3])。 ただし、装飾ボックスの子孫がそのようにスタイルされた場合は、線の位置や太さを調整してはなりません。 これにより、添え字や上付き文字に対して正しく下線や取り消し線などを装飾でき、 子孫によって祖先の装飾位置が歪むのを防ぎます。

1stの上付きstのみ下線を引く場合は、上付き文字のすぐ下に線が描画され、全体に下線を引く場合は通常の文字サイズに合わせて配置されます。

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

一部のフォント形式(OpenTypeなど)は、線装飾に適切な位置情報を提供できます。 UAはそのような情報(下線の太さや、適切なアルファベット下線位置など)を 必要に応じてフォントから利用すべきです。

注意: 通常、OpenTypeフォントのメトリクスは alphabetic下線の位置を示します。 一部(特にCJKフォント)では under left の位置となる場合もあります。 (この場合、フォントの下線メトリクスは通常emボックス下端に接します。) UAは誤ったフォントメトリクスを補正してもよいですが、必須ではありません。

3. 強調記号

東アジア文書では、テキストを強調するために各グリフの隣に小さな記号を付ける伝統があります。例:

日本語の強調例(青で表示)

アクセント強調(説明のため青色)が日本語テキストに適用された例

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
適用対象: テキスト
継承: はい
パーセンテージ: 該当なし
算出値: キーワード none、形状と塗りつぶしを表すキーワードのペア、または文字列
正規順序: 文法通り
アニメーション型: 離散値

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

none
強調記号なし。
filled
形状は実線で塗りつぶされます。
open
形状は中抜きになります。
dot
小さな丸印を表示します。 塗りつぶしドットはU+2022「•」、中抜きドットはU+25E6「◦」です。
circle
大きな丸印を表示します。 塗りつぶしサークルはU+25CF「●」、中抜きサークルはU+25CB「○」です。
double-circle
二重丸印を表示します。 塗りつぶし二重丸はU+25C9「◉」、中抜き二重丸はU+25CE「◎」です。
triangle
三角印を表示します。 塗りつぶし三角はU+25B2「▲」、中抜き三角はU+25B3「△」です。
sesame
ゴマ印(sesame)を表示します。 塗りつぶしゴマはU+FE45「﹅」、中抜きゴマはU+FE46「﹆」です。
<string>
指定された文字列を強調記号として表示します。 著者は<string>に1文字以上指定しないようにしてください。 UAは複数のグラフクラスタからなる文字列を切り詰めるか無視する場合があります。

形状キーワードが指定され、filled/openのいずれも指定されていない場合、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
適用対象: テキスト
継承: はい
パーセンテージ: 該当なし
算出値: 計算された色
正規順序: 文法通り
アニメーション型: 計算値型による

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

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

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

名前: text-emphasis
値: <'text-emphasis-style'> || <'text-emphasis-color'>
初期値: 各プロパティ参照
適用対象: 各プロパティ参照
継承: 各プロパティ参照
パーセンテージ: 各プロパティ参照
算出値: 各プロパティ参照
アニメーション型: 各プロパティ参照
正規順序: 文法通り

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

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

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

名前: text-emphasis-position
値: [ over | under ] && [ right | left ]?
初期値: over right
適用対象: テキスト
継承: はい
パーセンテージ: 該当なし
算出値: 指定キーワード
正規順序: 文法通り
アニメーション型: 離散値

このプロパティは強調記号がどこに描画されるかを指定します。 [ right | left ] を省略した場合、デフォルトは right です。 各値の意味は以下の通りです:

over
横書き組版モードでは、テキストの上に記号を描画します。
under
横書き組版モードでは、テキストの下に記号を描画します。
right
縦書き組版モードでは、テキストの右側に記号を描画します。
left
縦書き組版モードでは、テキストの左側に記号を描画します。

強調記号は、各文字がその記号をルビ注記テキストとして割り当てられ、 ルビ位置がtext-emphasis-positionで指定され、ルビ揃えが中央であるかのように 正確に描画されます。 この位置は下線や上線装飾と衝突する場合、調整されることがあります。

強調記号による行の高さへの影響は、ルビテキストの場合と同じです。

注意:強調記号の推奨位置は言語によって異なります。 例えば日本語では over right が好まれます。 一方中国語では under right が推奨されます。 下記の表は中国語・日本語の推奨位置をまとめたものです:
推奨される強調記号とルビの位置
言語 推奨位置 図例
横書き 縦書き
日本語 over right 横書き日本語テキストの各強調文字の上に強調記号が表示されます。 縦書き日本語テキストの各強調文字の右側に強調記号が表示されます。
韓国語
モンゴル語
中国語 under right 横書き中国語テキストの各強調文字の下に強調記号が表示されます。

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

この例では、4文字に強調記号が付与され、そのうち2文字にルビがあります。
		       記号は素の文字には各文字の上(ルビと揃えて)に、ルビ付きの文字にはルビテキストの上に配置されます。

強調記号が4文字に適用され、うち2文字にはルビも付与された例

ルビと強調記号が衝突する場合、強調記号を非表示にする編集者もいます。 HTMLでは次のスタイルルールで可能です:
ruby { text-emphasis: none; }

逆に、強調記号と衝突する場合、ルビを非表示にする編集者もいます。 HTMLでは次のパターンで実現できます:

em { text-emphasis: dot; } /* <em>要素にtext-emphasisを設定 */
em rt { display: none; }   /* <em>要素内のルビを非表示 */

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

名前: text-shadow
値: none | [ <color>? && <length>{2,3} ]#
初期値: none
適用対象: テキスト
継承: はい
パーセンテージ: 該当なし
算出値: キーワード none または 各アイテムが3つの絶対長さ+計算された色からなるリスト
正規順序: 文法通り
アニメーション型: シャドウリストとして

このプロパティは要素のテキストに適用するシャドウ効果のカンマ区切りリストを受け付けます。 値の解釈は box-shadow [CSS-BACKGROUNDS-3] と同じです。 (ただし spread値や inset キーワードは使用できません。) 各レイヤーは要素のテキストとそのすべてのテキスト装飾(合成されたもの)にシャドウをかけます。

シャドウ効果は前面から背面の順に適用されます: 最初のシャドウが一番上です。 シャドウ同士は重なりますが、テキスト自体には重なりません。 シャドウは要素のborder・background(存在する場合)よりも積み重ね順が高く、 テキストおよびテキスト装飾よりも低い位置で描画されます。 UAは、同じ積層レベル・スタッキングコンテキスト内の隣接要素のテキスト上にシャドウを描画しないよう配慮すべきです。 (つまり、シャドウの積層レベルはborderやbackgroundがあるかどうかで変化する場合があり、 テキストシャドウの積層挙動は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 および Steve Zilles。

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

この付録は参考情報であり、UA開発者がデフォルトスタイルシートを実装する際の補助となるものですが、 UA開発者は自由に無視または変更することができます。

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

/* ルビテキストへのtext-emphasis継承を無効化:
   強調記号は基底テキストにのみ適用されるべき */
rt { text-emphasis: none; }

/* 言語ごとのデフォルト強調記号位置を設定 */
:root:lang(zh), [lang|=zh] { text-emphasis-position: under right; }
[lang|=ja], [lang|=ko]     { text-emphasis-position: over right; }

/* 言語ごとのデフォルト下線位置を設定 */
: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;  }
/* 互換性の観点から、上記ではunderではなくautoが(暗黙で)選択されています */

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

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: 変更点

2019年8月候補勧告以降の変更点

主な変更点:

2018年7月候補勧告以降の変更点

主な変更点:

コメント処理状況も公開されています。

2013年8月候補勧告以降の主な変更点

主な重要な変更点:

適合性

文書の慣例

適合要件は、記述的なアサーションとRFC 2119の用語の組み合わせで表現されます。規範的な部分における “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, “OPTIONAL” というキーワードはRFC 2119で説明されている通りに解釈されます。 ただし、読みやすさのため本仕様ではこれらの語はすべて大文字では記載されていません。

この仕様書のすべての本文は規範的ですが、明示的に非規範的と記されたセクション、例、および注釈は除きます。[RFC2119]

この仕様書の例は「例えば」で始まるか、class="example"で規範的内容から区別されます。例:

これは参考例の一つです。

参考注釈は「Note」で始まり、class="note"で規範的内容から区別されます。例:

Note: これは参考注釈です。

勧告(advisement)は、特別な注意を喚起するための規範的なセクションで、<strong class="advisement">で他の規範的内容と区別されます。例:UAはアクセシブルな代替手段を提供しなければなりません。

適合クラス

本仕様への適合は、3つの適合クラスについて定義されます:

スタイルシート
CSSスタイルシート
レンダラー
スタイルシートの意味を解釈し、それを使用する文書をレンダリングするUA
オーサリングツール
スタイルシートを書き出すUA

スタイルシートは、本モジュールで定義された構文を用いたすべての記述が、汎用CSS文法および本モジュールで定義された各機能の個別文法に従って有効であれば、本仕様に適合しています。

レンダラーは、スタイルシートを該当する仕様で定義された通りに解釈することに加え、本仕様で定義されたすべての機能を正しくパースし、文書を適切にレンダリングすることで本仕様に適合します。ただし、デバイスの制限によりUAが文書を正しくレンダリングできない場合でも、それによってUAが非適合となるわけではありません。(例:UAはモノクロモニター上で色をレンダリングする必要はありません。)

オーサリングツールは、汎用CSS文法および本モジュールで定義された各機能の個別文法に従って構文的に正しいスタイルシートを書き出し、かつ本モジュールで記述されたスタイルシートに関する他のすべての適合要件を満たしていれば本仕様に適合しています。

部分的な実装

著者が前方互換性のあるパース規則を利用してフォールバック値を指定できるように、CSSレンダラーは、利用可能なレベルのサポートがないatルール、プロパティ、プロパティ値、キーワード、その他構文要素を無効として扱い、適切に無視しなければなりません。特に、ユーザーエージェントは、サポートされていないコンポーネント値のみを選択的に無視し、サポートされる値のみを同じ複数値プロパティ宣言で利用することしてはなりません。いずれかの値が無効(サポートされない値は必ず無効)と判断された場合、CSSは宣言全体を無視することを要求します。

不安定・独自機能の実装

将来の安定CSS機能との衝突を避けるため、CSSWGはベストプラクティスに従って、不安定な機能独自拡張の実装を推奨します。

非実験的な実装

仕様が候補勧告段階に達した時点で、非実験的な実装が可能となります。実装者は、仕様通りに正しく実装できることを示せるCRレベルの機能については、プリフィックスなしの実装を公開すべきです。

CSSの実装間の相互運用性を確立・維持するため、CSSワーキンググループは非実験的CSSレンダラーに対し、プリフィックスなし実装を公開する前に、W3Cへ実装報告書(必要に応じてそのテストケースも)を提出するよう要請します。W3Cに提出されたテストケースはCSSワーキンググループによるレビューや修正の対象となります。

テストケースと実装報告書の提出方法に関する詳細は、CSSワーキンググループのWebサイトhttps://www.w3.org/Style/CSS/Test/にて確認できます。 質問はpublic-css-testsuite@w3.orgメーリングリストへお問い合わせください。

CR終了基準

本仕様が提案勧告へ進むためには、各機能について少なくとも2つの独立した相互運用可能な実装が存在する必要があります。各機能は異なる製品セットによって実装されてもよく、すべての機能が単一製品で実装される必要はありません。この基準のために、以下の用語を定義します:

独立
各実装は異なる組織によって開発され、他の適格な実装で使われているコードを共有、再利用、派生してはなりません。本仕様の実装に関係しないコード部分はこの要件から除外されます。
相互運用可能
公式CSSテストスイートの該当テストケースに合格すること、またはWebブラウザでない場合は同等のテストに合格すること。関連する全テストには同等のテストが作成され、そのUAで相互運用性を主張する場合は、同じ方法で合格できる追加のUAも必要です。同等テストは査読のために公開しなければなりません。
実装
次の条件を満たすユーザーエージェント:
  1. 仕様を実装していること。
  2. 一般公開されていること。リリース済み製品またはベータ版、プレビューリリース、ナイトリービルド等の公開バージョンでもよい。未リリース製品の場合、機能が少なくとも1か月間実装されて安定していることを示す必要があります。
  3. 実験用でないこと(テストスイートに合格するためだけに設計され、今後通常利用を想定しないバージョンではないこと)。

仕様は少なくとも6か月間、候補勧告として維持されます。

索引

本仕様で定義された用語

参照で定義された用語

参考文献

規定参考文献

[CSS-BACKGROUNDS-3]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 2021年7月26日. CR. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-BREAK-3]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 2018年12月4日. 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. 2021年12月15日. WD. URL: https://www.w3.org/TR/css-color-4/
[CSS-DISPLAY-3]
Tab Atkins Jr.; Elika Etemad. CSS Display Module Level 3. 2021年9月3日. CR. URL: https://www.w3.org/TR/css-display-3/
[CSS-FONTS-3]
John Daggett; Myles Maxfield; Chris Lilley. CSS Fonts Module Level 3. 2018年9月20日. REC. URL: https://www.w3.org/TR/css-fonts-3/
[CSS-FONTS-4]
John Daggett; Myles Maxfield; Chris Lilley. CSS Fonts Module Level 4. 2021年12月21日. 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. 2020年8月27日. WD. URL: https://www.w3.org/TR/css-inline-3/
[CSS-OVERFLOW-3]
David Baron; Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 2021年12月23日. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-RUBY-1]
Elika Etemad; 他. CSS Ruby Annotation Layout Module Level 1. 2021年12月2日. WD. URL: https://www.w3.org/TR/css-ruby-1/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS Text Module Level 3. 2021年4月22日. CR. URL: https://www.w3.org/TR/css-text-3/
[CSS-TEXT-DECOR-4]
Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 4. 2020年5月6日. 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. 2019年6月6日. 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. 2021年12月16日. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 2019年7月30日. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS2]
Bert Bos; 他. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 2011年6月7日. REC. URL: https://www.w3.org/TR/CSS21/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. 1997年3月. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[UAX15]
Ken Whistler. Unicode Normalization Forms. 2021年8月27日. Unicode Standard Annex #15. URL: https://www.unicode.org/reports/tr15/tr15-51.html

参考文献(情報)

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

プロパティ索引

名前 初期値 適用対象 継承 %ages アニメーション型 正規順序 算出値
text-decoration <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> 各プロパティ参照 各プロパティ参照 各プロパティ参照 各プロパティ参照 各プロパティ参照 文法通り 各プロパティ参照
text-decoration-color <color> currentcolor すべての要素 no 該当なし 計算値型による 文法通り 計算された色
text-decoration-line none | [ underline || overline || line-through || blink ] none すべての要素 no(ただし上記本文参照) 該当なし 離散値 文法通り 指定されたキーワード
text-decoration-style solid | double | dotted | dashed | wavy solid すべての要素 no 該当なし 離散値 文法通り 指定されたキーワード
text-emphasis <'text-emphasis-style'> || <'text-emphasis-color'> 各プロパティ参照 各プロパティ参照 各プロパティ参照 各プロパティ参照 各プロパティ参照 文法通り 各プロパティ参照
text-emphasis-color <color> currentcolor テキスト はい 該当なし 計算値型による 文法通り 計算された色
text-emphasis-position [ over | under ] && [ right | left ]? over right テキスト はい 該当なし 離散値 文法通り 指定キーワード
text-emphasis-style none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string> none テキスト はい 該当なし 離散値 文法通り キーワードnone、形状と塗りつぶしのペア、または文字列
text-shadow none | [ <color>? && <length>{2,3} ]# none テキスト はい 該当なし シャドウリストとして 文法通り キーワードnoneまたは 各アイテムが3つの絶対長さ+計算された色からなるリスト
text-underline-position auto | [ under || [ left | right ] ] auto すべての要素 はい 該当なし 離散値 文法通り 指定されたキーワード

課題索引

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