1. 序論
◎非規範的この~moduleが受持つのは、 ~text装飾 — ~textを植字した後に，その~glyphを［ ~font／~typographic ］規則 （ `CSS-TEXT-3$r, `CSS-FONTS-3$r を見よ） に則って装飾すること — である。 そのような特能は、 伝統的に， 純粋に装飾的な目的のみならず［ 強勢~等を示したり，［ 挿入, 削除, 誤綴り ］などの編集上の変更点を指示するため ］などに利用される事例もある。 ◎ This module covers text decoration, i.e. decorating the glyphs of the text once typeset according to font and typographic rules. (See [CSS-TEXT-3] and [CSS-FONTS-3].) Such features are traditionally used not only for purely decorative purposes, but also in some cases to show emphasis, for honorifics, and to indicate editorial changes such as insertions, deletions, and misspellings.
~CSS~Level 1, 2 は、 ごく基本的な［ 西欧~typographic慣習に適切な，`装飾線$（下線, 上線, 打消線0） ］しか定義していなかった。 この~moduleの~Level 3 では、 これらの装飾の［ 色, ~style, 位置, 連続性 ］を変更する能を追加し、 また， 圏点 （東Asian~typographyに伝統的に利用されている）, および ~text影 （提案されていたが~Level 2 から先送りされていた） を導入する。 ◎ CSS Levels 1 and 2 only defined very basic line decorations (underlines, overlines, and strike-throughs) appropriate to Western typographical traditions. Level 3 of this module adds the ability to change the color, style, position, and continuity of these decorations, and also introduces emphasis marks (traditionally used in East Asian typography), and shadows (which were proposed then deferred from Level 2).
1.1. ~module間の相互作用
この~moduleは、［ `CSS2$r § 16 にて定義された，~textを装飾するための特能 ］を置換して拡張する。 ◎ This module replaces and extends the text-decorating features defined in [CSS2] chapter 16.
1.2. 値~定義
【 この節の内容は ~CSS日本語訳 共通~page に移譲。 】
1.3. 各種用語
この仕様にて利用される用語［ `文字$, `字l$, `内容~言語$ ］は、 `CSS-TEXT-3$r にて定義される。 この仕様にて利用される 他の各種用語と概念は `CSS2$r ／ `CSS-WRITING-MODES-4$r にて定義される。 ◎ The terms character, letter, and content language as used in this specification are defined in [CSS-TEXT-3]. Other terminology and concepts used in this specification are defined in [CSS2] and [CSS-WRITING-MODES-4].
【 この訳では、 次の用語も追加的に定義する： 】
`縦書き~mode@ とは、［ `~typographic~mode$が，縦書き用字系における縦方向~flowである ］ことを意味する略記である。 `横書き~mode@ とは、 `縦書き~mode$でないことを意味する （`縦組み$の中で縦方向に回転された横方向~flowも含む）。
2. 装飾線： 下線, 上線, 打消線0
【 便宜上， `line decoration^en を “~~装飾線” と訳しているが（語順が逆）、 この `line^en は， ~~本当は “~~線” ではなく “~~行” を意味するかもしれない。 “~~線” ならば “何かを装飾する~~線（装飾 線）” ／ “~~行” ならば “~~行を装飾する何か（行l 装飾）” のように解釈できよう。 】
この節に述べる~propは、 要素の内容に追加される装飾線を述べる。 ある装飾が`行内~box$に［ 指定された／伝播した ］とき、 その`~box$は その装飾~用の `装飾ng~box@ になり，~boxを成すすべての`断片$に装飾を適用する。 装飾は、 次に従って伝播する： ◎ The following properties describe line decorations that are added to the content of an element. When specified on or propagated to an inline box, that box becomes a decorating box for that decoration, applying the decoration to all its fragments.＼
- 当の行内を更に分割している各［ `~flow内$にある`塊~levelの~box$ ］へ伝播する （ CSS2.1 § 匿名な~block~boxを見よ）。 ◎ The decoration is then further propagated to any in-flow block-level boxes that split the inline (see CSS2.1 section 9.2.1.1).＼
- `塊~容器$のうち`行内~整形~文脈$を確立するものに［ 指定された／伝播した ］ときは、［ 当の塊~容器の`~flow内$にある，`行内~level$の子~すべて ］を包装する`匿名$な`行内~box$へ伝播する。 ◎ When specified on or propagated to a block container that establishes an inline formatting context, the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container.＼
- `~ruby容器$に［ 指定された／伝播した ］ときは、 その`~ruby基底$のみに伝播する。 ◎ When specified on or propagated to a ruby container, the decorations are propagated only to the ruby base.＼
- 他のすべての型の~box用には、 ~flow内にあるすべての子に伝播する。 ◎ For all other box types, the decorations are propagated to all in-flow children.
注記： ~text装飾は、［ ~flow外にある子孫／ `不可分な行内~level$の子孫 — `行内~塊$や`行内~table$など — の内容 ］には，伝播しない。 また、 `行内~box$の子である`行内$にも伝播しない — そのような各~boxにも`装飾は適用される^emが。 ◎ Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. They are also not propagated to inline children of inline boxes, although the decoration is applied to such boxes.
［ 下線, 上線, 打消線 ］は、 `置換され$ない`行内~box$に限り， すべての~text（空白, 字lアキ, 単語アキも含む）をまたぐように描かれる — ただし、［ 先頭／末尾 ］に生じるアキ（空白, 字lアキ, 単語アキ）は除く。 `不可分な行内$ — 画像や`行内~塊$など — は、 装飾されない。 `装飾ng~box$の［ ~margin, ~border, ~padding ］は 常に飛ばされるが、 子孫~行内~boxの［ それら ］は 飛ばされない。 ◎ Underlines, overlines, and line-throughs are drawn only for non-replaced inline boxes, and are drawn across all text (including white space, letter spacing, and word spacing) except spacing (white space, letter spacing, and word spacing) at the beginning and end of a line. Atomic inlines, such as images and inline blocks, are not decorated. Margins, borders, and padding of the decorating box are always skipped, however the margins, border, and padding of descendant inline boxes are not.
注記： CSS 2.1 では［ ~margin, ~border, ~padding ］は常に飛ばすことが要求されている。 この~levelの既定では、 `装飾ng~box$の［ ~margin, ~border, ~padding ］のみが飛ばされる。 将来の CSS2.1 は、 この新たな既定に合致するように更新されるかもしれない。 また，~Level 4 では、［ 頭部／尾部 ］の空間を装飾する制御も期待されており， ~HTML `ins$e, `del$e 要素に既定で適用されることになる。 ◎ Note that CSS 2.1 required skipping margins, borders, and padding always. In this level, by default only the margins, borders, and padding of the decorating box are skipped. In the future CSS2.1 may be updated to match this new default. Also, control over decorating leading/trailing spaces is expected in Level 4, and will be applied by default to the HTML ins and del elements.
UAは、［ 下線／上線 ］が~glyph~inkに交叉する箇所では、 線が途切れるようにしてもヨイ — ~glyph外形線の両側に~~隙間が~~空くよう。 この挙動は，この ~Level 3 では制御できないが、 ~Level 4 にて更に定義されることになる。 ただし，打消線は、 連続的なままになるモノトスル。 ◎ UAs may interrupt underlines and overlines where the line would cross glyph ink and to some distance to either side of the glyph outline; this behavior is not controllable in this level, but will be further defined in Level 4. Line-throughs must remain continuous, however.
~Myanmar~textを通る `alphabetic$bL 下線は、 `alphabetic$bL 基底線の下に出る，結合~文字の［ ~descenderや縦方向~描線 ］の周りを飛ばすように引かれる。 ◎ An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline.
~UAは、［ 下線／上線 ］が~glyph境界で途切れるときには，［ その箇所の切り口の形状が~glyphの形状をナゾる ］ようにするべきである。 ◎ When the UA interrupts underlines or overlines at glyph boundaries, the shape of the line at that boundary should follow the shape of the glyph.
注記： この仕様は、［ ~glyphの “形状をナゾる” ための特定0の手法 ］を意図的に義務付けない — ~UAが［ 適切な措置の下で，美観や処理能の考慮点を取扱える ］ようにするため。 例えば~UAは、［ ~sizeが一定の閾値を下回るときには， 処理能の理由から線の末端形状を方形と見做す ］あるいは［ 末端形状に台形を利用して曲線を近似する ］こともできる — とりわけ、 線の装飾が細いときには。 美観について言えば、 ~UAは，［ ~glyph境界が線の太さの一部のみに交差するとき／傾きが水平に近いとき ］に何が起こるかも考慮するかもしれない — 曲線を正確にナゾることによる結果の下線は、 ~typographic的に見苦しい端切れにもなり得る。 ~glyphに囲込まれた区画の中に線を示すかどうかも、 また別の考慮になる。 ◎ Note, this specification intentionally does not mandate a particular method for “following the shape” of the glyph so that UAs can take appropriate measures to handle aesthetic and performance considerations. For example, a UA could assume square line endings below a certain size threshold for performance reasons; or use trapezoidal endings to approximate curves, especially on thinner line decorations. In terms of aesthetic considerations, the UA might also consider what happens when the glyph boundary intersects only part of the line thickness or is slanted close to the horizontal—following the curve exactly could result in typographically-awkward wisps of underline. Whether to show the line within enclosed areas of a glyph is yet another consideration.
例えば、 単語 “goal” の “g” を成す輪っか（下側の方）を突き抜く下線を~~考える。 輪っかの中に下線の太さ全体が見えるかどうかは、 下線の位置や太さに依存するであろう。 この例では、 輪っかで覆い~~隠された下線を 2 つの位置に示す。 図左の下線は、 “g” を成す輪っかの中央を通過し，輪っかの中を埋めるように下線の太さ全体が見える。 図右の下線は少し低めにあるため、 輪っかの中には太さの一部だけ見える。 ◎ 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.
子孫に対する`相対~位置決め$は、 それに適用されている~text装飾~すべてを，子孫の~textと一緒に移動させる — 相対~位置決めは、 その行l上の装飾の初期~位置の計算には影響しない。 同様に、［ `visibility$p ~prop, `text-shadow$p, ~filter, その他 ］の~graphicな変形nも， その~boxに適用される~text装飾~すべて — 先祖~boxから伝播される装飾も含む — に影響する （装飾線が［ `不可分な行内$ ／ `置換され$ない`行内~box$の［ ~margin／~border／~padding ］］を通るように描かれる事例でも、 装飾線は，`装飾ng~box$ではなく 影響される行内~boxに結付けられる。） ◎ Relatively positioning a descendant moves all text decorations applied to it along with the descendant’s text; it does not affect calculation of the decoration’s initial position on that line. The visibility property, text-shadow, filters, and other graphical transformations likewise also affect all text decorations applied to that box—including decorations propagated from an ancestor box—and do not affect the calculation of their initial positions or thicknesses. (In the case of line decorations drawn over an atomic inline or across the margins/borders/padding of a non-replaced inline box, they are analogously associated with the affected atomic inline / non-replaced inline box rather than with the decorating box.)
次の~stylesheetと文書片が与えられたとき： ◎ In the following style sheet and document fragment:
blockquote { text-decoration: underline; color: blue; }
em { display: block; }
cite { color: red; }
<blockquote> <p> <span> Help, help! <em> I am under a hat! </em> <cite> — GwieF </cite> </span> </p> </blockquote>
`blockquote^e 要素に下線を引くと， `span^e 要素を囲む匿名な行内~boxに伝播して、 その最初の~text "Help, help!" から下線が引かれる。 下線の色は、 `blockquote^e 要素から取り出される色（ `blue^v ）と同じになる。 `em^e 塊~内の~text "I am under a hat!" にも，下線が引かれる — その~textを囲う塊は、 `~flow内$にあり，下線が伝播するので。 ~~最後の行l `cite^e の~text色は， `red^v にされているが、 それでも，下線の色は匿名な`行内~box$【！行内~要素】と同じ `blue^v になる。 ◎ ...the underlining for the blockquote element is propagated to an anonymous inline box that surrounds the span element, causing the text "Help, help!" to be blue, with the blue underlining from the anonymous inline underneath it, the color being taken from the blockquote element. The <em>text</em> in the em block is also underlined, as it is in an in-flow block to which the underline is propagated. The final line of text is fuchsia, but the underline underneath it is still the blue underline from the anonymous inline element.
上の下線~例の見本~描画 ◎ Sample rendering of the above underline example
次の~stylesheet, 文書片においては： ◎ In the following style sheet and document fragment:
div {
color: black;
font-size: 48px;
text-decoration: underline;
text-shadow: blue 0px 50px 0px;
}
span {
font-size: 20px;
vertical-align: top;
text-shadow: green 0px 100px 0px;
}
<div>Help, help! <span>I am under a hat!</span></div>
`div^e は、 自身の下線（ `black^v ）用の`装飾ng~box$になる。 この下線は、 `div^e, `span^e 両方を通して途切れないよう描画される。 しかしながら，装飾線と違って、 `text-shadow^p は，~propとして継承される。 したがって、 `span^e 上の~text影（ `green^v ）は， `div^e 上の~text影（ `blue^v ）を上書きする。 その結果，これらの影が塗られるとき、 `div^e の下線の影は， `span^e 要素の境目で切り替わる。 ◎ ...the <div> is the decorating box for its underline (in black), which is rendered uninterrupted through both the <div> and the <span>. Unlike line decorations, however, `text-shadow` is inherited as a property; therefore the green text shadow on the <span> overrides the blue text shadow on the <div>. As a result, when the shadows are painted, the shadow of the <div>’s underline is disjoint across the two elements.
上の下線~例の見本~描画 ◎ Sample rendering of the above underline example
注記：
装飾線は、
継承ではなく~box~treeを通して伝播する。
したがって
`display$p: `contents^v
にされた要素に指定されても，子孫に対する効果はない。
◎
Note: Line decorations are propagated through the box tree, not through inheritance, and thus have no effect on descendants when specified on an element with display: contents.
2.1. ~text装飾~線： `text-decoration-line^p ~prop
◎名 `text-decoration-line@p ◎値 `none^v | [ `underline$v || `overline$v || `line-through$v || `blink$v ] ◎初 `none$v ◎適 すべての要素 ◎継 されない（ただし上の注釈文を見よ） ◎百 受容しない ◎算 指定された~keyword（たち） ◎順 文法に従う ◎ア 離散的 ◎表終要素に追加する装飾線を指定する／あるいは追加しないことを指定する。 各種~値の意味は： ◎ Specifies what line decorations, if any, are added to the element. Values have the following meanings:
- `none@v
- ~text装飾を生産することも, 妨げることもない。 ◎ Neither produces nor inhibits text decoration.
- `underline@v
- ~textの各~行lには、 下線が引かれる。 ◎ Each line of text is underlined.
- `overline@v
- ~textの各~行lには、 上線（すなわち，下線と反対~側）が引かれる。 ◎ Each line of text has a line over it (i.e. on the opposite side from an underline).
- `line-through@v
- ~textの各~行lには、 真中を通る線が引かれる。 ◎ Each line of text has a line through the middle.
- `blink@v
- ~textは点滅する （可視と不可視の間で交替する）。 適合~UAは、 単純に~textを点滅させなくしてもヨイ。 ~textを点滅させないのは WAI-UAAG の checkpoint 3.3 を満たす技法の一つであることに注意。 この値は、 `CSS-ANIMATIONS-1$r への支持を受けて非推奨にされた。 ◎ The text blinks (alternates between visible and invisible). Conforming user agents may simply not blink the text. Note that not blinking the text is one technique to satisfy checkpoint 3.3 of WAI-UAAG. This value is deprecated in favor of Animations [CSS-ANIMATIONS-1].
注記： `縦組み$においては、 `text-underline-position$p により，［ 下線, 上線 ］が引かれる側を切替えることもできる。 これは、［ 下線の位置が，言語に特有な選好に自動的に基づくようになる ］ことを許容する。 ◎ Note: In vertical writing modes, text-underline-position can cause the underline and overline to switch sides. This allows the position of underlines to key off of language-specific preferences automatically.
2.2. ~text装飾~style： `text-decoration-style^p ~prop
◎名 `text-decoration-style@p ◎値 `solid^v | `double^v | `dotted^v | `dashed^v | `wavy^v ◎初 `solid$v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 指定された~keyword ◎順 文法に従う ◎ア 離散的 ◎表終この~propは、 要素~上に指定された~text装飾により描かれる線（たち）の ~styleを指定する。 各種 値の意味は、 `wavy^v を除いて， `border-*-style$p ~prop `CSS-BACKGROUNDS-3$r 用の同じ名前の値と同じである。 `wavy^v は波線を指示する。 ◎ This property specifies the style of the line(s) drawn for text decoration specified on the element. Values have the same meaning as for the border-style properties [CSS-BACKGROUNDS-3]. wavy indicates a wavy line.
~text装飾の~styleは、 所与の要素から出自している すべての装飾に対し — 子孫~boxに異なる~styleが指定されたとしても — 同じに保たれるモノトスル。 ◎ The style of text decorations must remain the same on all decorations originating from a given element, even if descendant boxes have different specified styles.
2.3. ~text装飾~色： `text-decoration-color^p ~prop
◎名 `text-decoration-color@p ◎値 `color$t ◎初 `currentcolor$v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 `算出d色$ ◎順 文法に従う ◎ア 算出d値の型による ◎表終この~propは、 `text-decoration-line$p で要素~上に設定された ~text装飾（下線, 上線, 打消線）の色を指定する。 ◎ This property specifies the color of text decoration (underlines overlines, and line-throughs) set on the element with text-decoration-line.
~text装飾の色は、 所与の要素から出自しているすべての装飾に対し — 子孫~boxに異なる色が指定されたとしても — 同じに保たれるモノトスル。 ◎ The color of text decorations must remain the same on all decorations originating from a given element, even if descendant boxes have different specified colors.
2.4. ~text装飾： `text-decoration^p 略式~prop
◎名 `text-decoration@p ◎値 `text-decoration-line$tp || `text-decoration-style$tp || `text-decoration-color$tp ◎初 個々の~propを見よ ◎適 個々の~propを見よ ◎継 個々の~propを見よ ◎百 個々の~propを見よ ◎算 個々の~propを見よ ◎順 文法に従う ◎ア 個々の~propを見よ ◎表終この~propは、［ `text-decoration-line$p, `text-decoration-color$p, `text-decoration-style$p ］を一つの宣言でまとめて設定するための略式~propである。 省略された値は，その初期~値に設定される。 ◎ This property is a shorthand for setting text-decoration-line, text-decoration-color, and text-decoration-style in one declaration. Omitted values are set to their initial values.
注記： `text-decoration$p 宣言は、［ `text-decoration-color$p, `text-decoration-style$p ］どちらの値も省略されたなら， ~CSS~Level 1, 2 に後方-互換になる。 ◎ Note: A text-decoration declaration that omits both the text-decoration-color and text-decoration-style values is backwards-compatible with CSS Levels 1 and 2.
次の例による未訪問な~linkには、 CSS1／CSS2 ~UAにおいては，実線による `blue^v 色にされた下線が引かれ、 CSS3 ~UAにおいては，点線（小丸の並び）による `navy^v 色にされた下線が引かれる。 ◎ The following example underlines unvisited links with a solid blue underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.
:link {
color: blue;
text-decoration: underline;
text-decoration: navy dotted underline; /*
CSS1／CSS2 ~UA では 無視される
◎
Ignored in CSS1/CSS2 UAs
*/
}
注記： `text-underline-position$p ~propがこの~propから省かれているわけは、 それが内容に基づく［ 言語／書記体系 ］に依存する設定であり，［ （継承されない） `text-decoration$p 略式~propによる~style上の設定 ］とは独立に~cascadeして継承できるようにするためである。 ◎ Note: The shorthand purposefully omits the text-underline-position property, which is a language/writing-system–dependent setting that keys off the content, so that it can cascade and inherit independently from the (uninherited) stylistic settings of the text-decoration shorthand.
2.5. ~text下線の位置： `text-underline-position^p ~prop
◎名 `text-underline-position@p ◎値 `auto$v | [ `under$v || [ `left$v | `right$v ] ] ◎初 `auto$v ◎適 すべての要素 ◎継 される ◎百 受容しない ◎算 `算出d色$ ◎順 文法に従う ◎ア 離散的 ◎表終この~propは、 要素に指定された下線の位置を設定する （これは、 先祖~要素により指定される下線には影響しない）。 ［ `left$v ／ `right$v ］のみが指定された場合、 `auto$v も含意される。 ◎ This property sets the position of an underline specified on the element. (It does not affect underlines specified by ancestor elements.) If left or right is specified alone, auto is also implied.
次の例は、 現代の［ 中国語, 日本語, 韓国語 ］の~textを［ 横書き, 縦書き ］両~textにおいて，適切な下線~位置で~styleする。 ◎ The following example styles modern Chinese, Japanese, and Korean texts with the appropriate underline positions in both horizontal and vertical text:
: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;
}
各種~値の意味は： ◎ Values have the following meanings:
- `auto@v
- ~UAは、 下線の位置を決定する~algoとして何を利用してもヨイが， `alphabetic$bL 基底線の所かそれより下に引くモノトスル。 ◎ The user agent may use any algorithm to determine the underline’s position; however it must be placed at or under the alphabetic baseline.
- 注記： ~UAには、 既定の下線~位置は `alphabetic$bL 基底線になるべく近くすることが示唆される — “alphabetic” 下線が高過ぎて，下付文字（あるいは低くされた）~textに交叉したり, 漢字や~Tibetanなどの~Asian用字系の~glyph上を描くことになる場合は、 `under$v のときと同じく，下線を［ 低くズラすか, ~em~box辺に整列する ］方が適切になろう。 ◎ Note: It is suggested that the default underline position be close to the alphabetic baseline, unless that would either cross subscripted (or otherwise lowered) text or draw over glyphs from Asian scripts such as Han or Tibetan for which an alphabetic underline is too high: in such cases, shifting the underline lower or aligning to the em box edge as described for under may be more appropriate.
-
典型的な~Latin~fontにおける下線は， `alphabetic$bL 基底線の少しばかり下に位置され、 下線は，大多数の~Latin字lの下端との合間には隙間を残しつつ， 'p' の画線などの~descenderとは交叉する。 ◎ 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'.
典型的な “alphabetic” 下線は、 `alphabetic$bL 基底線の直下に位置する。 ◎ A typical “alphabetic” underline is positioned just below the alphabetic baseline - `under@v
- 下線は、 要素の~text内容の`下面$に位置される。 この事例では、 下線は通例的には~descenderと交叉しない （これは、 “`accounting^en”下線と呼ばれることもある）。 この値は、 `縦書き~mode$において特定0の側が選好されるならば［ `left$v ／ `right$v ］と組合せることもできる。 ◎ The underline is positioned under the element’s text content. In this case the underline usually does not cross the descenders. (This is sometimes called “accounting” underline.) This value can be combined with left or right if a particular side is preferred in vertical typographic modes.
-
典型的な~Latin~fontにおいては、 下線は， 'g' の下端などと交叉しないほど十分~下に引かれる。 ◎ In a typical Latin font, the underline is far enough below the text that it does not cross the bottom of a 'g'."
`text-underline-position$p: `under^v -
`text-underline-position$p は継承され, また `text-decoration$p 略式~propが それを設定し直すことはないので、 次の例は［ 文書が `under$v による下線を利用する ］ように切替える。 これは、 長く, 複雑な~descenderを伴う書記体系~用には，より適切になることもある。 また、 下付文字を多用する［ 数学／化学 ］~~分野の~text用にも，有用になることが多い。 ◎ Because text-underline-position inherits, and is not reset by the text-decoration shorthand, the following example switches the document to use under underlining, which can be more appropriate for writing systems with long, complicated descenders. It is also often useful for mathematical or chemical texts that use many subscripts.
:root { text-underline-position: under; } - 注記： 値 `under^v は、 下線が~glyphと競合しないことを保証するものではない — ~fontには、［ ~descender／発音区別符 ］が，~fontの~descent計量の下へ拡張するものもあるので。 ◎ Note: The under value does not guarantee that the underline will not conflict with glyphs, as some fonts have descenders or diacritics that extend below the font’s descent metrics.
- `left@v ／ `right@v
- `縦書き~mode$においては、 下線は，常に~textの［ 左端／右端 ］辺に整列されることを除いて， `under$v に対するときと同様に整列され、 上線は，その反対~側に整列される。 ◎ In vertical typographic modes, the underline is aligned as for under, except it is always aligned to the left edge of the text. If this causes the underline to be drawn on the "over" side of the text, then an overline also switches sides and is drawn on the "under" side. ◎ In vertical typographic modes, the underline is aligned as for under, except it is always aligned to the right edge of the text. If this causes the underline to be drawn on the "over" side of the text, then an overline also switches sides and is drawn on the "under" side.
日本語と~Latinが混在する縦書き~textでは、
`text-underline-position^p: `left^v
の下では，~textの左側に下線を引く。
◎
In mixed Japanese-Latin vertical text, 'text-underline-position: left' places the underline on the left side of the text.
日本語と~Latinが混在する縦書き~textでは、
`text-underline-position^p: `right^v
の下では，~textの右側に下線を引く。
◎
In mixed Japanese-Latin vertical text, 'text-underline-position: right' places the underline on the right side of the text.
この~levelにおいては、 装飾線の正確な［ 位置, 太さ ］は~UAにより定義される。 しかしながら，~UAは、 単独の`装飾ng~box$から導出される装飾~用には，各［ 下線／上線 ］用の［ 位置, 太さ ］を一定にするモノトスル。 ◎ The exact position and thickness of line decorations is UA-defined in this level. However, for underlines and overlines the UA must use a single thickness and position on each line for the decorations deriving from a single decorating box.
~font~sizeと縦-位置がまちまちになる下で描かれる単独の下線は、 1 本の線を成していなければならない。 ◎ A single underline drawn under varying font sizes and vertical positions must be a single line.
vs.装飾される各~textに適切な位置と太さを伴う，複数の線分を描くのは、 不正になる。 ◎ Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect.
注記： 装飾線は，~font~sizeや縦方向の整列がまちまちな要素にも~spanし得るので、 装飾線~用の最良な位置は，`装飾ng~box$により規定される理想的な位置になるとは限らない。 例えば，小さい~fontに合わせて位置される上線は、 要素が［ ~font-sizeが有意に大きい~text ］も包含する場合には，実質的に打消線になる。 下線の場合でも，~textが `alphabetic$bL 基底線に整列されていない場合には （例えば，縦書き植字~styleの既定では、 ~textは，その `central$bL 基底線により整列される `CSS-WRITING-MODES-4$r ）、 下線は，より~font-sizeが大きい子孫~textを切るように引かれることになる。 したがって、 ~UAによる子孫~内容の考慮は，~typographyをより良くする結果になる。 ◎ Note, since line decorations can span elements with varying font sizes and vertical alignments, the best position for a line decoration is not necessarily the ideal position dictated by the decorating box. For example, an overline positioned to a small font will effectively become a line-through if the element contains text in a significantly larger font-size. Even for underlines, if the text is not aligned to the alphabetic baseline (for example, in vertical typesetting styles, text is aligned by its central baseline by default [CSS-WRITING-MODES-4]) an underline will cut through descendant text of a larger font-size. UA consideration of descendant content will therefore result in better typography.
~UAは、 線の位置を，［ `vertical-align$p `CSS2$r に対する `baseline^v 以外の値によりズラされた ］あるいは［ `font-variant-position$p `CSS-FONTS-3$r を介して［ 下付文字／上付文字 ］にズラされた ］`装飾ng~box$たちの計量に合致するように調整するモノトスルが、 線の［ 位置, 太さ ］は，`装飾ng~box$の子孫の~styleに応じて`調整しない^emモノトスル。 これにより、［ 上付文字／下付文字 ］は（下線, 打消線0, 等々で）適正に装飾されるようなる一方で、 先祖による装飾の位置決めが［ それらの~styleにより歪められたり分断される ］のは防がれる。 ◎ UAs must adjust line positions to match the shifted metrics of decorating boxes shifted with vertical-align values other than baseline [CSS2] or subscripted/superscripted via font-variant-position [CSS-FONTS-3], but must not adjust the line position or thickness in response to descendants of a decorating box that are so styled. This allows superscripts and subscripts to be properly decorated (underlined, struck through, etc.) but prevents them from distorting or breaking the positioning of such decorations on their ancestors.
'1st' における上付文字 'st' だけに対する下線は，上付文字の直下に描かれる一方で、 ~text全体に対する下線は，全部的~sizeの~textに適切な位置に描かれる。 ◎ 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.
~font形式（~OpenTypeなど）には、 装飾線の適切な位置についての情報を提供できるものもある。 ~UAは、 適切になるときは，~fontによるそのような情報 （下線の太さや， “alphabetic” 下線の適切な位置など） を利用するべきである。 ◎ Some font formats (such as OpenType) can offer information about the appropriate position of a line decoration. The UA should use such information (such as the underline thickness, or appropriate alphabetic underline position) from the font wherever appropriate.
注記： ~OpenType~fontの計量は、 概して， “alphabetic” 下線の位置を与える。 事例によっては（とりわけ~CJK~fontにおいては），それは `under left^v 下線の位置を与える （この事例では、 ~fontの下線~計量は，概して~em~boxの下端~辺に触れる）。 ~UAは、 要求されてはいないが，不正な~font計量を正してもヨイ。 ◎ Note: Typically, OpenType font metrics give the position of an alphabetic underline; in some cases (especially in CJK fonts), it gives the position of a under left underline. (In this case, the font’s underline metrics typically touch the bottom edge of the em box). The UA may but is not required to correct for incorrect font metrics.
3. 圏点（ `emphasis mark^en ）
東Asian文書は、 伝統的に， ~text連なりを強調するとき，各~glyphの傍らに小さい記号を利用する。 例えば： ◎ East Asian documents traditionally use small symbols next to each glyph to emphasize a run of text. For example:
日本語において~textの傍らに現れる強勢の例 ◎ Example of emphasis in Japanese appearing over the text
そのような圏点0を~textに適用するときには、 `text-emphasis$p 略式~prop, および対応する下位prop［ `text-emphasis-style$p, `text-emphasis-color$p ］を利用できる。 別々に継承される `text-emphasis-position$p ~propは、 圏点の位置を~textに~~相対的に設定することを許容する。 ◎ The text-emphasis shorthand, and its text-emphasis-style and text-emphasis-color longhands, can be used to apply such marks to the text. The text-emphasis-position property, which inherits separately, allows setting the emphasis marks’ position with respect to the text.
3.1. 圏点~style： `text-emphasis-style^p ~prop
◎名 `text-emphasis-style@p ◎値 `none$v | [ [ `filled$v | `open$v ] || [ `dot$v | `circle$v | `double-circle$v | `triangle$v | `sesame$v ] ] | `string$vt ◎初 `none$v ◎適 ~text ◎継 される ◎百 受容しない ◎算 ~keyword `none^v ／ ~keywordの~pair（形状と塗潰すかどうかを表現する）／ 文字列 ◎ the keyword none, a pair of keywords representing the shape and fill, or a string ◎順 文法に従う ◎ア 離散的 ◎表終要素の~textに適用する圏点は、 この~propで与える。 各種~値の意味は： ◎ This property applies emphasis marks to the element’s text. Values have the following meanings:
- `none@v
- 圏点はない。 ◎ No emphasis marks.
- `filled@v
- 形状をベタ色で塗潰す。 ◎ The shape is filled with solid color.
- `open@v
- 形状を中空（縁取り）にする。 ◎ The shape is hollow.
- `dot@v
- 小さい丸を圏点0として表示する。 塗潰しの小丸は `2022^U ／ 縁取りの小丸は `25E6^U。 ◎ Display small circles as marks. The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'.
- `circle@v
- 大きい丸を圏点0として表示する。 塗潰しの丸は `25CF^U ／ 縁取りの丸は `25CB^U。 ◎ Display large circles as marks. The filled circle is U+25CF '●', and the open circle is U+25CB '○'.
- `double-circle@v
- 二重丸を圏点0として表示する。 塗潰しの二重丸は `25C9^U ／ 縁取りの二重丸は `25CE^U 。 Display double circles as marks. The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '~25CE'.
- `triangle@v
- 三角を圏点0として表示する。 塗潰しの三角は `25B2^U ／ 縁取りの三角は `25B3^U。 ◎ Display triangles as marks. The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'.
- `sesame@v
- ゴマを圏点0として表示する。 塗潰しのゴマは `FE45^U ／ 縁取りのゴマは `FE46^U。 ◎ Display sesames as marks. The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'.
- `string$t
- 所与の文字列を圏点0として表示する。 作者は、 この値に複数の`文字$（書記素~cluster）を指定するべきでない。 ~UAは、 そのような文字列を切落したり無視してもヨイ。 ◎ Display the given string as marks. Authors should not specify more than one character in <string>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.
形状~keywordが指定されつつ， `filled$v, `open$v のいずれも指定されていない場合は、 `filled$v と見做される。 ［ `filled$v ／ `open$v ］のみが指定されている場合の形状~keywordは、 `横書き~mode$の下では `circle$v に, `縦書き~mode$の下では `sesame$v に算出される。 ◎ If a shape keyword is specified but neither of filled nor open is specified, filled is assumed. If only filled or open is specified, the shape keyword computes to circle in horizontal typographic modes and sesame in vertical typographic modes.
圏点0は、 要素の~font設定群に加え， `ruby$v 特能も利用した上で、 ~size 50% に縮小して描かれるべきである。 これらの~glyphは，どの~fontも備えているとは限らず、 これらの符号位置による圏点に不適切な~sizeを利用する~fontもある。 よって~UAは、 任意選択で，圏点に適することが既知な~fontを利用しても, あるいは~~代用の圏点0を合成してもヨイ。 圏点0は、 `縦書き~mode$においては正立に保つモノトスル — ~CJK文字の様に，書字~modeに合致するよう回転されることはない。 `縦組み$における`横書き~mode$における圏点0の方位は、 この~levelでは未定義とする （が、 確たる利用事例が~~求められれば，将来の~levelで定義されるかもしれない）。 ◎ The marks should be drawn using the element’s font settings with the addition of the ruby feature and the size scaled down 50%. However, since not all fonts have all these glyphs, and some fonts use inappropriate sizes for emphasis marks in these code points, the UA may opt to use a font known to be good for emphasis marks, or the marks may instead be synthesized by the UA. Marks must remain upright in vertical typographic modes: like CJK characters, they do not rotate to match the writing mode. The orientation of marks in horizontal typographic modes of vertical writing modes is undefined in this level (but may be defined in a future level if definitive use cases arise).
注記： 圏点に適する~fontの一例には、 Adobe の~opensource~project, Kenten Generic OpenType Font が挙げられる。 これらは、 圏点~用に特別に設計されている。 ◎ Note: One example of good fonts for emphasis marks is Adobe’s open source project, Kenten Generic OpenType Font, which is specially designed for the emphasis marks.
圏点0は各`~typographic文字~単位$ごとに 1 個ずつ描かれる。 ただし、 次に挙げる`文字$には，圏点は描かれない： ◎ The marks are drawn once for each typographic character unit. However, emphasis marks are not drawn for:
- `単語~分離子$, または~Unicode分離子~class（ `Z*^uc ）に所属する`文字$ （ただし、 何らかの結合~文字と組合された~space用には，`圏点は描かれる^emことに注意。） 【 `Z*^uc の `*^uc は~wildcard。次の `P*^uc も同様。】 ◎ Word separators or other characters that belong to the Unicode separator classes (Z*). (But note that emphasis marks are drawn for a space that combines with any combining characters.)
- 約物 — 特定的には、 `~Unicode一般字種$ `P*^uc に所属していて，次に挙げるどの記号にも NFKD 正規化- `UAX15$r されないもの ⇒＃ `0023^U `NUMBER SIGN^cn, `0025^U `PERCENT SIGN^cn, `2030^U `PER MILLE SIGN^cn, `2031^U `PER TEN THOUSAND SIGN^cn, `066A^U `ARABIC PERCENT SIGN^cn, `0609^U `ARABIC-INDIC PER MILLE SIGN^cn, `060A^U `ARABIC-INDIC PER TEN THOUSAND SIGN^cn, `0026^U `AMPERSAND^cn, `204A^U `TIRONIAN SIGN ET^cn, `0040^U `COMMERCIAL AT^cn, `00A7^U `SECTION SIGN^cn, `00B6^U `PILCROW SIGN^cn, `204B^U `REVERSED PILCROW SIGN^cn, `2053^U `SWUNG DASH^cn, `303D^U `PART ALTERNATION MARK^cn ◎ Punctuation--specifically, any characters that belong to the Unicode P* general category and do not NFKD normalize [UAX15] to any of the following symbols: ◎ # 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
- ［ 制御~codeや未割当てな文字 ］用の~Unicode~class（ `Cc^uc, `Cf^uc, `Cn^uc ）に所属するもの。 ◎ Characters belonging to the Unicode classes for control codes and unassigned characters (Cc, Cf, Cn).
注記： どの文字に圏点0が付与されるかの制御は、 Level 4 にて追加されることになる。 （約物の~listも，さらに精緻化され得る — 特に~CJKでない約物。） ◎ Note: Control over which characters are marked will be added in Level 4. (The list of punctuation may also be further refined, particularly for non-CJK punctuation.)
3.2. 圏点の色： `text-emphasis-color^p ~prop
◎名 `text-emphasis-color@p ◎値 `color$t ◎初 `currentcolor$v ◎適 ~text ◎継 される ◎百 受容しない ◎算 `算出d色$ ◎順 文法に従う ◎ア 算出d値の型による ◎表終この~propは、 圏点の前景~色を指定する。 ◎ This property specifies the foreground color of the emphasis marks.
注記： `currentcolor$v ~keywordは、 それ自身に算出され，継承が遂行された後に【当の要素の】 `color$p ~propの値に解決される。 このことは、 `text-emphasis-color$p は，既定では~textの `color$p に合致することを意味する — `color$p が各~要素にわたって変化するときでも。 ◎ Note: currentcolor keyword computes to itself and is resolved to the value of color after inheritance is performed. This means text-emphasis-color by default matches the text color even as color changes across elements.
3.3. 圏点： `text-emphasis^p 略式~prop
◎名 `text-emphasis@p ◎値 `text-emphasis-style$tp || `text-emphasis-color$tp ◎初 個々の~propを見よ ◎適 個々の~propを見よ ◎継 個々の~propを見よ ◎百 個々の~propを見よ ◎算 個々の~propを見よ ◎順 文法に従う ◎ア 個々の~propを見よ ◎表終この~propは、［ `text-emphasis-style$p, `text-emphasis-color$p ］を一つの宣言で設定する略式~propである。 省略された値は、 それぞれの初期~値に設定される。 ◎ This property is a shorthand for setting text-emphasis-style and text-emphasis-color in one declaration. Omitted values are set to their initial values.
注記： この略式~propは、 `text-emphasis-position$p を設定し直すことはない。 その~~理由は、 同じ`内容~言語$の下では，文書~全体を通して［ 形状や色は概して変わる一方で，位置は一貫する ］ことが多いからである。 したがって、 位置は独立に継承されるべきである。 ◎ Note that text-emphasis-position is not reset in this shorthand. This is because typically the shape and color vary, but the position is consistent for a particular language throughout the document. Therefore the position should inherit independently.
3.4. 圏点の位置： `text-emphasis-position^p ~prop
◎名 `text-emphasis-position@p ◎値 [ `over$v | `under$v ] && [ `right$v | `left$v ]? ◎初 `over$v `right$v ◎適 ~text ◎継 される ◎百 受容しない ◎算 指定された~keyword（たち） ◎順 文法に従う ◎ア 離散的 ◎表終この~propは、 圏点がどこに描かれるかを述べる。 [ `right$v | `left$v ] ~~成分が省略された場合の既定は `right$v とする。 各種 値の意味は： ◎ This property describes where emphasis marks are drawn at. If [ right | left ] is omitted, it defaults to right. The values have following meanings:
- `over@v
- `横書き~mode$において圏点0たちを ~textの上面に描く。 ◎ Draw marks over the text in horizontal typographic modes.
- `under@v
- `横書き~mode$において圏点0たちを ~textの下面に描く。 ◎ Draw marks under the text in horizontal typographic modes.
- `right@v
- `縦書き~mode$において圏点0たちを ~textの右端に描く。 ◎ Draw marks to the right of the text in vertical typographic modes.
- `left@v
- `縦書き~mode$において圏点0たちを ~textの左端に描く。 ◎ Draw marks to the left of the text in vertical typographic modes.
圏点は、 各~文字に，~ruby注釈~textとして — 正確に， `text-emphasis-position$p により与えられる~ruby位置に, ~ruby整列は中央寄せにされて — アテガわれていたかのように描かれる。 この位置は、 下線や上線による装飾と競合することになる場合には，調整され得る／してもヨイことに注意。 ◎ Emphasis marks are drawn exactly as if each character was assigned the mark as its ruby annotation text with the ruby position given by text-emphasis-position and the ruby alignment as centered. Note that this position may be adjusted if it would conflict with underline or overline decorations.
行高に対する圏点の効果は、 ~ruby~textに対するときと同じである。 ◎ The effect of emphasis marks on the line height is the same as for ruby text.
圏点に選好される位置は、 `内容~言語$に依存する。 例えば、［ 日本語においては `over right^v ／ 中国語においては `under right^v ］が選好される。 次の規範的でない表tに［ 中国語／日本語 ］に選好される圏点の位置を要約する： ◎ Note, the preferred position of emphasis marks depends on the language. In Japanese for example, the preferred position is over right. In Chinese, on the other hand, the preferred position is under right. The informative table below summarizes the preferred emphasis mark positions for Chinese and Japanese:
| `内容~言語$ ◎ Language | 選好される位置 ◎ Preferred position | |
|---|---|---|
| 横書き ◎ Horizontal | 縦書き ◎ Vertical | |
| 日本語／韓国語／~Mongolian | `over$v
圏点は、 横書き日本語~textでは，強勢される各~文字の上面に現れる。 ◎ Emphasis marks appear over each emphasized character in horizontal Japanese text. | `right$v
圏点は、 縦書き日本語~textでは，強勢される各~文字の右に現れる。 ◎ Emphasis marks appear on the right of each emphasized character in vertical Japanese text. |
| 中国語 | `under$v
圏点は、 横書き簡体~中国語~textでは，強勢される各~文字の下に現れる。 ◎ Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text. | |
文字に適用される圏点は、 同じ位置に~rubyも描かれる場合には，~rubyの外側に配置される。 これには［ `自動で隠される$／空な ］`~ruby注釈$も含まれる。 ◎ If emphasis marks are applied to characters for which ruby is drawn in the same position as the emphasis mark, the emphasis marks are placed outside the ruby. This includes auto-hidden and empty ruby annotations.
この例では、 圏点は 4 個の文字に適用され，うち二つは~rubyを伴う。 小丸は、 ~rubyを伴わない文字に対しては，各~文字の上に置かれ （~rubyに整列される）、 ~rubyを伴う文字に対しては，~rubyの上に配置される。 ◎ 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.
~HTMLにおいては、 次の~style規則で，~rubyと圏点が競合するときに圏点を隠すこともできる： ◎ Some editors prefer to hide emphasis marks when they conflict with ruby. In HTML, this can be done with the following style rule:
ruby { text-emphasis: none; }
逆に~rubyの方を隠したいときは、 次の~patternで行える： ◎ Some other editors prefer to hide ruby when they conflict with emphasis marks. In HTML, this can be done with the following pattern:
em { text-emphasis: dot; } /*
`em^e 要素~用の `text-emphasis$p を設定する
◎
Set text-emphasis for <em> elements
*/
em rt { display: none; } /*
`em^e 要素の内側にある~rubyを隠す
◎
Hide ruby inside <em> elements
*/
4. ~textの影： `text-shadow^p ~prop
◎名 `text-shadow@p ◎値 `none^v | [ `color$t? && `length$t{2,3} ]# ◎初 `none$v ◎適 ~text ◎継 される ◎百 受容しない ◎算 ~keyword `none$v ／ ~list — ~listを成す各~itemは 3 個の絶対~長さと`算出d色$からなる ◎ either the keyword none or a list, each item consisting of three absolute lengths plus a computed color ◎順 文法に従う ◎ア `影~listとして$ ◎ as shadow list ◎表終この~propは、 ~commaで分離された~listを受容する — ~listを成す各~itemは、 要素の~textに適用する影~効果を与える。 各~値は、 `box-shadow$p `CSS-BACKGROUNDS-3$r に対するとき同様に解釈される （ただし、 影の拡幅~値と `inset$v ~keywordは許容されないことに注意）。 各~層は、 要素の［ ~text, すべての~text装飾 ］（を組成した結果）に影を付ける。 ◎ This property accepts a comma-separated list of shadow effects to be applied to the text of the element. Values are interpreted as for box-shadow [CSS-BACKGROUNDS-3]. (But note that spread values and the inset keyword are not allowed.) Each layer shadows the element’s text and all its text decorations (composited together).
~listを成す影~効果たちは、 最初の影が最上~層になるよう，手前から奥の順に適用される。 したがって，影たちが成す各~層は、 互いに重なることはあっても， ~text自体の上~層を成すように重ねられることは決してない。 影は、 要素の［ ~borderや背景 ］（もしあれば）と要素の［ ~textや~text装飾 ］の合間にある積層-~levelに塗るモノトスル。 ~UAは、 ~text影を隣接な要素 — 当の要素と同じ`積層~文脈$内の同じ積層-~levelに所属するそれら — 内の~textの上には塗らないようにするべきである （このことは、［ 各~影の正確な積層-~levelは、 当の要素が~borderや背景を有するかどうかに依存し得る ］ことを意味する — したがって、 ~text影を積層するときの正確な挙動は，~UAにより定義される）。 所与の影~層において，［ 各［ ~glyphや装飾 ］に対し独立に影を付ける ］のか［ ~textや装飾を平坦~化してから影を付ける ］のかは、 未定義である。 ◎ The shadow effects are applied front-to-back: the first shadow is on top. The shadows may thus overlay each other, but they never overlay the text itself. The shadow must be painted at a stack level between the element’s border and/or background (if present) and the elements text and text decoration. UAs should avoid painting text shadows over text in adjacent elements belonging to the same stack level and stacking context. (This may mean that the exact stack level of the shadows depends on whether the element has a border or background: the exact stacking behavior of text shadows is thus UA-defined.) It is undefined whether a given shadow layer shadows each glyph or decoration independently or if the text and/or decorations are flattened and then shadowed.
`box-shadow$p と違って、 ~text影は，影を伴う形状で切取られることはない 【~glyph外形線の内側に入る部分が切取られることはない？】 — ~textが半透明なら透過する。 `box-shadow$p と同様に、 ~text影は，［ ~layoutに波及する／ ~scroll~~処理を誘発する／ `~scroll可能な~overflow区画$の~sizeを増やす ］ことはない。 ◎ Unlike box-shadow, text shadows are not clipped to the shadowed shape and may show through if the text is partially-transparent. Like box-shadow, text shadows do not influence layout, and do not trigger scrolling or increase the size of the scrollable overflow area.
注記： ここに定義される影の塗ng順序は、 1998 年の CSS2 勧告 による定義の反対である。 ◎ Note: The painting order of shadows defined here is the opposite of that defined in the 1998 CSS2 Recommendation.
`text-shadow^p ~propは、［ `first-line$pe ／ `first-letter$pe ］疑似要素にも適用される。 ◎ The text-shadow property applies to both the ::first-line and ::first-letter pseudo-elements.
5. ~text装飾の塗ng
5.1. ~text装飾の塗ng順序
~text装飾は， `CSS2$r と同じく、 それが装飾する~textの直上または直下にある層に，次の順序で描かれる（最初が最下~層）： ◎ As in [CSS2], text decorations are drawn immediately over/under the text they decorate, in the following order (bottommost first):
- 影（ `text-shadow$p ） ◎ shadows (text-shadow)
- 下線（ `text-decoration$p ） ◎ underlines (text-decoration)
- 上線（ `text-decoration$p ） ◎ overlines (text-decoration)
- ~text ◎ text
- 圏点（ `text-emphasis$p ） ◎ emphasis marks (text-emphasis)
- 打消線（ `text-decoration$p ） ◎ line-through (text-decoration)
ここで、 `装飾線$が［ ~box装飾／`不可分な行内$ ］をまたぐように描かれる所では、 `有位置$でない内容の上, かつ有位置な子孫（ CSS2.1 Appendix E の層 #8 ）の直下にある層に描かれる。 ◎ Where line decorations are drawn across box decorations or atomic inlines, they are drawn over non-positioned content and just below any positioned descendants (immediately below layer #8 in CSS2.1 Appendix E).
5.2. ~text装飾の~overflow
`~box$の外側にはみ出た~text装飾は、 `~ink~overflow$と見なされ，`~scroll可能な~overflow区画$を拡張しない。 `css-overflow-3$r ◎ Text decorations that leak outside a box are considered ink overflow: they do not extend the scrollable overflow area. [css-overflow-3]
謝辞
この仕様は、 次の方々からの助力がなければ可能でなかった： ◎ This specification would not have been possible without the help from:＼
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~stylesheet
この付録は規範的でない。 これは，~UA開発者が既定の~stylesheetを実装する助けとして可用にされているが、 ~UA開発者は，これを無視しても変更してもかまわない。 ◎ This appendix is informative, and is to help UA developers to implement default stylesheet, but UA developers are free to ignore or change.
/* ~HTMLにおける代表的な~style付け ◎ 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; } /* ~text圏点の~ruby~textへの継承を不能化する： 圏点は、 基底~textのみに適用されるべきなので ◎ 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; } /* 上で `under^v に代えて `auto^v が（暗黙に）選ばれているのは、 内容~互換性の懸念に因る。 ◎ auto is chosen (implied) above instead of under due to content-compatibility concerns */
~~問題を見つけた, あるいは 追加すべき推奨や訂正があれば、 件名に [css-text-decor] を添えて www-style@w3.org 宛まで送信されたし。 ◎ If you find any issues, recommendations to add, or corrections, please send the information to www-style@w3.org with [css-text-decor] in the subject line.
`text-decoration-line$p に対する `blink^v 値は、 他の既存の~propでは 全部的には再現できないが，作者は 次の~CSSでよく似た効果を得られる： ◎ While text-decoration-line: blink can’t be fully reproduced with other existing properties, authors can achieve a very similar effect with the following CSS:
@keyframes blink {
0% {
visibility: hidden;
animation-timing-function: step-end;
}
25%, 100% {
visibility: visible;
}
}
blink {
animation: blink 1s infinite;
}
変更点
- 2019年 8月 13日 勧告候補 からの変更点 ◎ Changes since the August 2019 Candidate Recommendation ◎ Changes include:
- `text-shadow$p は、 `box-shadow$p の様に影~listとして~animateすることを明確化した。 （ `4375$issue ） ◎ Clarify that text-shadow animates as a shadow list like box-shadow. (Issue 4375)
- 適用対象が~textである~propについて明示的にした。 （ `5303$issue ） ◎ Be explicit about properties that apply to text. (Issue 5303)
- 編集上の細かな修正s。 ◎ Minor editorial fixes.
- 2018年 6月 勧告候補 からの変更点 （各~commentに対する処置集もある） ◎ Changes since the July 2018 Candidate Recommendation ◎ Changes include:
- ~text装飾~overflowは`~ink~overflow$であることを明確化した。 （ `3272$issue ） ◎ Clarified that text decoration overflow is ink overflow. (Issue 3272)
- 見本 `text-underline-position$p 規則~内の不整合を修正した。 （ `3441$issue ） ◎ Fixed inconsistencies in sample text-underline-position rules. (Issue 3441)
- 新たな規約に合致するよう， “算出d値” の行lを整理した。 ◎ Cleaned up “Computed value” lines to match new conventions. ◎ ↑↑A Disposition of Comments is available.
- 2013年 8月 勧告候補 からの有意な変更点 ◎ Changes since the August 2013 Candidate Recommendation ◎ Significant changes include:
- `text-decoration-skip$p は，大きな変更を可能にするため~Level 4 に先送りされた。 挙動~上の既定は注釈文にて定義した。 （ `1$issueCR, `22$issueCR, `26$issueCR ） ◎ Deferred text-decoration-skip to Level 4 to allow for major changes. Defined behavioral defaults in prose. (Issue 1, Issue 22, Issue 26)
- ~ink箇所を飛ばす特能は、 打消線には影響しないことを指定した。 （ `24$issueCR ） ◎ Specified that line-throughs are unaffected by ink-skipping feature. (Issue 24)
- ~inkが飛ばされるときは、 線の末端形状を~glyph形状に適合させることを推奨した。 （ `30$issueCR ） ◎ Recommended that when ink is skipped, line endings conform to the glyph shape. (Issue 30)
- `writing-mode$p ~propに追加された `sideways-lr$v, `sideways-rl$v 値を織り込むため、 書字~modeに基づく条件を，`~typographic~mode$に依存するように更新した。 これらの値の下での圏点の方位は未定義とした。 （ `10$issueCR, `20$issueCR ） ◎ Updated writing-mode–sensitive conditions to depend on typographic mode, to account for addition of sideways-lr and sideways-rl values to writing-mode property. Marked orientation of emphasis marks under sideways-lr and sideways-rl undefined. (Issue 10, Issue 20)
- `text-emphasis-position$p の [ `right^v | `left^v ] ~~成分は、 省略可能とし，既定は `right^v とした。 （ `17$issueCR ） ◎ Made [ right | left ] option of text-emphasis-position optional, defaulting to right. (Issue 17)
- `text-underline-position$p に `left^v ／ `right^v のみが指定されている場合は、 `under^v に代えて `auto^v を含意するようにした。 （ `18$issueCR ） ◎ Made text-underline-position imply auto instead of under when only left or right is specified. (Issue 18)
- ~text装飾は頭部／尾部の空間は飛ばすように変更した。 （ `6$issueCR ） ◎ Changed text decoration to skip leading and trailing spaces. (Issue 6)
- ~ruby注釈の位置は、 ~text装飾との競合-を避けるため，調整されてもヨイことを注記した。 （ `21$issueCR ） ◎ Noted that the positions of ruby annotations may be adjusted to avoid conflicts with text decorations. (Issue 21)
- `text-shadow$p の初期~値を `currentColor^v に変更した。 （ `28$issueCR ） ◎ Changed initial value of text-shadow to be currentColor. (Issue 28)
- `text-shadow$p の “算出d値” 欄における誤りを修正した。 （ `7$issueCR ） ◎ Fixed error in “Computed value” line for text-shadow. (Issue 7)
- `text-shadow$p 値の正準的~順序を，実装に合致するように修正した。 （ `35$issueCR ） ◎ Fixed canonical order of text-shadow values to match implementations. (Issue 35)
- ［ `自動で隠される$／空な ］`~ruby注釈$に関する圏点の位置決めを定義した。 （ `9$issueCR ） ◎ Defined positioning of emphasis marks with respect to auto-hidden and empty ruby annotations. (Issue 9) • If emphasis marks are applied to characters for which ruby is drawn in the same position as the emphasis mark, the emphasis marks are placed outside the ruby. This includes auto-hidden and empty ruby annotations.
- `text-emphasis^p は、 既定で約物を飛ばすようにした。 （ `16$issueCR ） ◎ Made text-emphasis skip punctuation by default. (Issue 16)
- 圏点の~fontに `ruby$v を適用する規則を追加した。 （ `13$issueCR ） ◎ Added rule to apply ruby to emphasis marks' font. (Issue 13)
- `text-emphasis-position$p ／ `text-underline-position$p 用の既定の~UA規則に対する各種［ 訂正と改善 ］。 （ `11$issueCR, `12$issueCR, `18$issueCR, `19$issueCR, `36$issueCR ） ◎ Various corrections and improvements to the default UA rules for text-emphasis-position and text-underline-position. (Issue 11, Issue 12, Issue 18, Issue 19, Issue 36)
~privacyの考慮点
この仕様に対し報告された，新たな~privacyの考慮点は、無い。 ◎ No new privacy considerations have been reported on this specification.
~securityの考慮点
この仕様に対し報告された，新たな~privacyの考慮点は、無い。 ◎ No new security considerations have been reported on this specification.