CSS Text Decoration Module Level 3 日本語訳

Editor’s Draft,

This version:
https://drafts.csswg.org/css-text-decor-3/
Latest version:
https://www.w3.org/TR/css-text-decor-3/
Previous Versions:
https://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/
https://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/
https://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/
Feedback:
www-style@w3.org with subject line “[css-text-decor] … message topic …” (archives)
Test Suite:
http://test.csswg.org/suites/css-text-decor-3_dev/nightly-unstable/
Issue Tracking:
Inline In Spec
http://www.w3.org/Style/CSS/Tracker/products/10
Editors:
Elika J. Etemad / fantasai (Invited Expert)
(Google)

概要

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

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

この文書の位置付け

これは、エディターズドラフトの公開コピーである。これは議論のためにのみ提供されており、いつでも変更することがある。この発行は、W3Cによってその内容の承認を意味するものではない。進行中の作業として以外この文書を引用しないこと。

この文書に関する議論は、公開メーリングリストwww-style@w3.orgアーカイブ参加の手引きを参照)上で行うことが望ましい。Eメールを送る際には、サブジェクトに“css-text-decor”を追加してほしい。できればこのように:“[css-text-decor] …コメントの要約…

この文書は(Style Activityの一部である)CSS Working Groupによって作成された。

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

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

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

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

1. 概論

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

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

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

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

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

1.2.

この仕様は、CSS2.1由来のCSSプロパティの定義規約に従う[CSS21]。この仕様で定義されない値型は、CSS 2.1で定義される[CSS21]。他のCSSモジュールはそれらの値型の定義を拡張してもよい。たとえば[CSS3COLOR]がこの仕様と結合した場合、この仕様で用いられるように<color>値型の定義を拡張する。

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

1.3. 用語

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

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

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

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

デフォルトで、下線、上線、および取り消し線は、すべてのテキスト(空白、文字間隔、単語間隔を含む)中にのみ描かれる。画像のような分割不能なインラインは、装飾されない。たとえば、分割不能なインラインにスキップされた空白に下線または要求を許可することで、text-decoration-skipプロパティはこの動作を修正するために使用されうる。装飾ボックスのマージン、ボーダー、およびパディングは、常にスキップされる。

相対配置の子孫は、子孫のテキストと一緒に相対配置の子孫に適用されるすべてのテキスト装飾を移動する。その行の装飾の初期位置の計算に影響しない。同様に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の線はブロックを表す。

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

名前: text-decoration-line
none | [ underline || overline || line-through || blink ]
初期値: none
適用要素: すべての要素
継承性: なし(ただし文参照)
パーセンテージ: 利用不可
メディア: visual
算出値: 指定される
アニメーション: なし

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

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

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

名前: text-decoration-color
<color>
初期値: currentColor
適用要素: すべての要素
継承性: なし
パーセンテージ: 利用不可
メディア: visual
算出値: 算出色
アニメーション: として

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

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

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

名前: text-decoration-style
solid | double | dotted | dashed | wavy
初期値: solid
適用要素: すべての要素
継承性: なし
パーセンテージ: 利用不可
メディア: visual
算出値: 指定される
アニメーション: なし

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

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

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

名前: text-decoration
<‘text-decoration-line’> || <‘text-decoration-style’> || <‘text-decoration-color’>
初期値: none
適用要素: すべての要素
継承性: なし
パーセンテージ: 利用不可
メディア: visual
算出値: 個々のプロパティを参照
アニメーション: 個々のプロパティを参照

このプロパティは、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 */
}

2.5. テキスト装飾線の継続:text-decoration-skipプロパティ

名前: text-decoration-skip
none | [ objects || spaces || ink || edges || box-decoration ]
初期値: objects
適用要素: すべての要素
継承性: yes
パーセンテージ: 利用不可
メディア: visual
算出値: 指定される
アニメーション: なし

注:この仕様のレベル4は、追加の値(leading-spacestrailing-spaces)を定義し、このプロパティの初期値でそれらを使用する。執筆時点で、これは実験的なもので、まだそれはこのレベルに組み込まれていない理由である、変更されることがある。

このプロパティは、スキップしなければならない要素に影響を与える要素のコンテンツのテキストのどの部分かを指定する。これは、要素で描画されるすべてのテキスト装飾ラインと、その祖先によって描かれる任意のテキスト装飾ラインを制御する。値の意味は次のとおり:

none
何もスキップしない:テキストの装飾は、分割不能なインライン置換要素に対するすべてのテキストコンテンツに対して描画される。
objects
分割不能なインライン(画像やインラインブロックなど)である場合、この要素(その全体のマージンボックス)をスキップする。
spaces
すべての空白をスキップする。すなわち、Unicode White_Spaceプロパティ[UAX44]およびすべての単語区切り文字、すべての文字、任意のletter-spacingまたはword-spacingを加える。
ink
グリフが描画される場所をスキップする:別の方法でテキスト装飾がグリフを越える場所を通してテキストの表示させるように装飾行へ割り込む。UAは、グリフのアウトラインのいずれかの側に短い距離をスキップしなければならない。
edges
UAは、装飾ボックスのコンテンツ辺から線の内側の(たとえば、線の太さで半分)始点と終点を配置すべきである。結果として、たとえば、2つの下線をもつ要素の並びは、1つの下線をもつよう表示しない。(下線が句読点の一種である中国語において、これは重要である。)

An underline below a series of Chinese characters has a gap between two adjacent underlining elements.

<u>石井</u><u>艾俐俐</u>に対するtext-decoration-skip: edges

box-decoration
ボックスのマージン、ボーダー、パディング領域をスキップする。これは、祖先によって課される装飾にのみ影響を及ぼすことに注意する。装飾ボックスは装飾要素自身のボックス装飾の上に描画しない。

このプロパティは継承し、子孫要素が異なる設定を持つことができることに注意する。

CSS 2.1は常にマージン、ボーダー、パディングのスキップを要求することに注意する。このレベルでは、デフォルトで装飾ボックスのマージン、ボーダー、パディングのみがスキップされる。将来において、CSS2.1はこの新しいデフォルトと一致するように更新されるかもしれない。

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

名前: text-underline-position
auto | [ under || [ left | right ] ]
初期値: auto
適用要素: すべての要素
継承性: yes
パーセンテージ: 利用不可
メディア: visual
算出値: 指定される
アニメーション: なし

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

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

: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; }

(この規則は提案されるデフォルトのUAスタイルシートの一部である。)

値の意味は次のとおり:

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 &apos;p&apos;.

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

under
下線は要素のテキストコンテンツのを基準に配置される。この場合、通常下線はディセンダを横断することはない。 (これは“会計”下線とも呼ばれる。)縦書きモードで特定のサイドが優先される場合、この値はleftまたはrightと結合できる。

text-underline-positionは継承し、またtext-decoration略記によって再設定されないため、以下の例は文書を長くて複雑なディセンダとともに書記システムに対してより適切なunder下線へ変える。それはまた、多くの添字を使用する数学または化学文書に対して、多くの場合有用である。

:root { text-underline-position: under; }
left
縦書きモードでは、テキストの左辺に揃えられる以外は、下線はunderのように揃えられる。これはテキストの"上"側に描かれる下線が発生した場合、上線も辺を切り替え、"下"側に描かれる。
right
縦書きモードでは、テキストの右辺に揃えられる以外は、下線はunderのように揃えられる。これはテキストの"上"側に描かれる下線が発生した場合、上線も辺を切り替え、"下"側に描かれる。
In mixed Japanese-Latin vertical text, &apos;text-underline-position: left&apos;
                    places the underline on the left side of the text. In mixed Japanese-Latin vertical text, &apos;text-underline-position: right&apos;
                    places the underline on the right side of the text.
left right

縦書きモードで、text-underline-positionの値leftrightは、テキストのいずれかの辺に下線を置くことを許可する。(横書きモードで、両方の値がunderとして扱われる。)

正確な位置と行装飾の太さは、このレベルでは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>の正しいレンダリングと誤ったレンダリング

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

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

An underline for just the superscript &apos;st&apos; in &apos;1st&apos; 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
パーセンテージ: 利用不可
メディア: visual
算出値: none、形状と塗りつぶしを表すキーワードのペア、または文字列
アニメーション: なし

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

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を算出する。

マークは50%に縮小されたサイズをもつ要素のフォントの設定を使用して描画されるべきである。しかし、すべてのフォントがこれらのグリフを持っているとは限らず、一部のフォントは、これらのコードポイントで圏点に対する適切でないサイズを使用する。UAは、圏点にふさわしいとされるフォントの使用を選択してもよく、また代わりにUAによって合成されてもよい。マークは、縦書きモードで直立のままにして置かなければならない。CJK文字のように、マークは書字モードに一致するように回転しない。

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

マークは、各文字に対して一度に描画される。しかし、圏点は、文字に対して描かれるわけでない:

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

名前: text-emphasis-color
<color>
初期値: currentColor
適用要素: すべての要素
継承性: yes
パーセンテージ: 利用不可
メディア: visual
算出値: 指定される
アニメーション: として

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

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

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

名前: text-emphasis
<‘text-emphasis-style’> || <‘text-emphasis-color’>
初期値: 個々のプロパティを参照
適用要素: すべての要素
継承性: yes
パーセンテージ: 利用不可
メディア: visual
算出値: 個々のプロパティを参照
アニメーション: 個々のプロパティを参照

このプロパティは、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
パーセンテージ: 利用不可
メディア: visual
算出値: 指定される
アニメーション: なし

このプロパティは、圏点が描かれる場所を記述する。値は以下の意味をもつ:

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.

ルビが圏点と同じ位置に描かれる文字に圏点が適用される場合、圏点はルビの外側に置かれる。

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 | [ <length>{2,3} && <color>? ]#
初期値: none
適用要素: すべての要素
継承性: yes
パーセンテージ: n/a
メディア: visual
算出値: 任意の<length>は絶対値にする。任意の指定色は算出される。そうでなければ指定値となる。
アニメーション: 影のリストとして

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

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

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

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

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

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

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

行装飾がボックス装飾または分割不能なインライン渡って描かれる場合、それらは非配置コンテンツの上、任意の配置子孫の下に描かれる(CSS2.1付録Eの層#8の直下)。

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

2013年1月のLast Call Working Draftからの変更点

Significant changes include:

A Disposition of Comments is available.

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

この付録は参考であり、UAの開発者にデフォルトのスタイルシートの実装を支援することが目的であるが、UAの開発者は、無視または変更することは自由である。

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

:root:lang(zh), [lang|=zh] {
/* default emphasis mark position is 'under right' for Chinese */
  text-emphasis-position: under right;
}

:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] {
/* default underline position is 'under right' for Japanese and Korean */
  text-underline-position: under right;
}

:root:lang(zh), [lang|=zh] {
/* default underline position is 'under left' for Chinese */
  text-underline-position: under left;
}

blink {
  text-decoration-line: blink;
}

何らかの問題、追加すべき勧告、または訂正を見つけた場合、件名css-text-decor-3とともに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;
}

適合性

文書規約

適合性要件は、説明的な表現と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の責任ある実装に対する要求

以下の節は、現在と将来の相互運用性を促進するような方法で、責任を持ってCSSを実装するための複数の適合性要件を定義します。

部分的実装

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

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

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

CRレベル機能の実装

仕様が勧告候補の段階に達すると、実装者は、実装者が仕様に従って正しく実装されることを示すことができる任意の勧告候補レベルの機能の接頭辞のない実装を公開すべきであり、その機能の接頭辞変異形を公開すべきではない。

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

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

索引

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

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

参考文献

標準情報

[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: http://www.w3.org/TR/CSS2
[CSS3BG]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 9 September 2014. CR. URL: http://www.w3.org/TR/css3-background/
[CSS3TEXT]
Elika Etemad; Koji Ishii. CSS Text Module Level 3. 10 October 2013. LCWD. URL: http://www.w3.org/TR/css-text-3/
[CSS-BACKGROUNDS-3]
CSS Backgrounds and Borders Module Level 3 URL: http://www.w3.org/TR/css3-background/
[CSS-COLOR-3]
CSS Color Module Level 3 URL: http://www.w3.org/TR/css3-color/
[CSS-COUNTER-STYLES-3]
Tab Atkins Jr.. CSS Counter Styles Level 3. 11 June 2015. CR. URL: http://www.w3.org/TR/css-counter-styles-3/
[CSS-FONTS-3]
John Daggett. CSS Fonts Module Level 3. 3 October 2013. CR. URL: http://www.w3.org/TR/css-fonts-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii. CSS Text Module Level 3. 10 October 2013. LCWD. URL: http://www.w3.org/TR/css-text-3/
[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 11 June 2015. CR. URL: http://www.w3.org/TR/css-values/
[CSS3-FONTS]
John Daggett. CSS Fonts Module Level 3. 3 October 2013. CR. URL: http://www.w3.org/TR/css-fonts-3/
[CSS3-WRITING-MODES]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 15 December 2015. CR. URL: http://www.w3.org/TR/css-writing-modes-3/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119

参考情報

[CSS3COLOR]
Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3. 7 June 2011. REC. URL: http://www.w3.org/TR/css3-color
[UAX44]
Mark Davis; Ken Whistler. Unicode Character Database. 25 September 2013. URL: http://www.unicode.org/reports/tr44/
[CSS3-ANIMATIONS]
Dean Jackson; et al. CSS Animations. 19 February 2013. WD. URL: http://www.w3.org/TR/css3-animations/

プロパティ索引

Name Value Initial Applies to Inh. %ages Media Ani­mat­able Com­puted value Computed value
text-decoration-line none | [ underline || overline || line-through || blink ] none すべての要素 なし(ただし文参照) 利用不可 visual なし 指定される
text-decoration-color <color> currentColor すべての要素 なし 利用不可 visual as color 算出色
text-decoration-style solid | double | dotted | dashed | wavy solid すべての要素 なし 利用不可 visual なし 指定される
text-decoration <‘text-decoration-line’> || <‘text-decoration-style’> || <‘text-decoration-color’> none すべての要素 なし 利用不可 visual 個々のプロパティを参照 個々のプロパティを参照
text-decoration-skip none | [ objects || spaces || ink || edges || box-decoration ] objects すべての要素 yes 利用不可 visual なし 指定される
text-underline-position auto | [ under || [ left | right ] ] auto すべての要素 yes 利用不可 visual なし 指定される
text-emphasis-style none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string> none すべての要素 yes 利用不可 visual なし none, a pair of keywords representing the shape and fill, or a string
text-emphasis-color <color> currentColor すべての要素 yes 利用不可 visual as color 指定される
text-emphasis <‘text-emphasis-style’> || <‘text-emphasis-color’> 個々のプロパティを参照 すべての要素 yes 利用不可 visual 個々のプロパティを参照 個々のプロパティを参照
text-emphasis-position [ over | under ] && [ right | left ] over right すべての要素 yes 利用不可 visual なし 指定される
text-shadow none | [ <length>{2,3} && <color>? ]# none すべての要素 yes n/a visual as shadow list any <length> made absolute; any specified color computed; otherwise as specified

イシュー索引

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