Thu, 07 Feb 2013 22:55:02 -0800
[css-text-decor-3] Add "Animatable:" lines to propdef tables, and change the Computed Value: line for the 'text-decoration' shorthand to "see individual properties".
The Animatable lines are as resolved in Tucson face-to-face at
2013-02-04 11:40:47 -0700, and edited by me per discussion starting at
2013-02-05 11:11:38 -0700.
fantasai@6997 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
fantasai@6658 | 2 | <html lang="en"> |
fantasai@6658 | 3 | <head> |
fantasai@6658 | 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
fantasai@7159 | 5 | <title>CSS Text Decoration Module Level 3</title> |
fantasai@6658 | 6 | <link rel=contents href="#contents"> |
bert@7024 | 7 | <!--<link rel=index href="#index">--> |
fantasai@6658 | 8 | <link rel="stylesheet" type="text/css" href="../default.css"> |
fantasai@6658 | 9 | <link rel="stylesheet" type="text/css" |
fantasai@6658 | 10 | href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> |
fantasai@6658 | 11 | |
fantasai@6658 | 12 | </head> |
fantasai@6658 | 13 | |
fantasai@6658 | 14 | <div class="head"> |
fantasai@6658 | 15 | <!--logo--> |
fantasai@6658 | 16 | |
fantasai@6658 | 17 | <h1>CSS Text Decoration Module Level 3</h1> |
fantasai@6658 | 18 | |
fantasai@6658 | 19 | <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> |
fantasai@6658 | 20 | <dl> |
fantasai@6658 | 21 | <dt>This version:</dt> |
fantasai@7155 | 22 | <!-- |
fantasai@7014 | 23 | <dd><a href="http://www.w3.org/TR/[YEAR]/WD-css-text-decor-3-[CDATE]/">http://www.w3.org/TR/[YEAR]/WD-css-text-decor-3-[CDATE]/</a></dd> |
fantasai@7155 | 24 | --> |
jackalmage@6895 | 25 | <dd><a href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a> |
fantasai@6658 | 26 | |
fantasai@6658 | 27 | <dt>Latest version:</dt> |
jackalmage@6895 | 28 | <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a></dd> |
jackalmage@6895 | 29 | |
fantasai@6658 | 30 | <dt>Latest editor's draft:</dt> |
jackalmage@6895 | 31 | <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a></dd> |
jackalmage@6895 | 32 | |
fantasai@6658 | 33 | <dt>Previous version:</dt> |
fantasai@6658 | 34 | <dd><a |
bert@7026 | 35 | href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/">http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/</a> |
fantasai@6658 | 36 | |
fantasai@6658 | 37 | <dt>Issues List:</dt> |
fantasai@6658 | 38 | <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> |
fantasai@6658 | 39 | |
fantasai@6658 | 40 | <dt>Discussion:</dt> |
fantasai@7286 | 41 | <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[text-decor-3] <var>… message topic …</var></kbd>” |
fantasai@6658 | 42 | |
fantasai@6658 | 43 | <dt>Editors:</dt> |
fantasai@6658 | 44 | <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Mozilla)</dd> |
fantasai@6658 | 45 | <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> (Rakuten, Inc.)</dd> |
fantasai@6658 | 46 | </dl> |
fantasai@6658 | 47 | |
fantasai@6658 | 48 | <!--copyright--> |
fantasai@6658 | 49 | |
fantasai@6658 | 50 | <hr title="Separator for header"> |
fantasai@6658 | 51 | </div> |
fantasai@6658 | 52 | |
fantasai@6658 | 53 | <h2 class="no-num no-toc" id="abstract">Abstract</h2> |
fantasai@6658 | 54 | |
fantasai@6658 | 55 | <p>This module contains the features of CSS relating to |
fantasai@6658 | 56 | text decoration, such as underlines, text shadows, and emphasis marks. |
fantasai@6658 | 57 | <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing |
fantasai@6658 | 58 | the rendering of structured documents (such as HTML and XML) on screen, on |
fantasai@6658 | 59 | paper, in speech, etc. |
fantasai@6658 | 60 | |
fantasai@6658 | 61 | <h2 class="no-num no-toc" id="status">Status of this document</h2> |
fantasai@6658 | 62 | |
fantasai@6658 | 63 | |
fantasai@6658 | 64 | <p><em>This section describes the status of this document at the time of |
fantasai@6658 | 65 | its publication. Other documents may supersede this document. A list of |
fantasai@6658 | 66 | current W3C publications and the latest revision of this technical report |
fantasai@6658 | 67 | can be found in the <a href="http://www.w3.org/TR/">W3C technical reports |
fantasai@6658 | 68 | index at http://www.w3.org/TR/.</a></em> |
fantasai@6658 | 69 | |
fantasai@6658 | 70 | <p>Publication as a Working Draft does not imply endorsement by the W3C |
fantasai@6658 | 71 | Membership. This is a draft document and may be updated, replaced or |
fantasai@6658 | 72 | obsoleted by other documents at any time. It is inappropriate to cite this |
fantasai@6658 | 73 | document as other than work in progress. |
fantasai@6658 | 74 | |
fantasai@6658 | 75 | <p>This CSS module has been produced as a combined effort of the <a |
fantasai@6658 | 76 | href="http://www.w3.org/International/Activity">W3C Internationalization Activity</a>, |
fantasai@6658 | 77 | and the <a href="http://www.w3.org/Style/Activity">Style Activity</a> and is maintained |
fantasai@6658 | 78 | by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also |
fantasai@6658 | 79 | includes contributions made by participants in the <a |
fantasai@6658 | 80 | href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a |
fantasai@6658 | 81 | href="http://cgi.w3.org/MemberAccess/AccessRequest">members |
fantasai@6658 | 82 | only</a>). |
fantasai@6658 | 83 | |
fantasai@6658 | 84 | <p>This document was produced by a group operating under the <a |
fantasai@6658 | 85 | href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February |
fantasai@6658 | 86 | 2004 W3C Patent Policy</a>. W3C maintains a <a |
fantasai@6658 | 87 | href="http://www.w3.org/2004/01/pp-impl/32061/status" |
fantasai@6658 | 88 | rel=disclosure>public list of any patent disclosures</a> made in |
fantasai@6658 | 89 | connection with the deliverables of the group; that page also includes |
fantasai@6658 | 90 | instructions for disclosing a patent. An individual who has actual |
fantasai@6658 | 91 | knowledge of a patent which the individual believes contains <a |
fantasai@6658 | 92 | href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential |
fantasai@6658 | 93 | Claim(s)</a> must disclose the information in accordance with <a |
fantasai@6658 | 94 | href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section |
fantasai@6658 | 95 | 6 of the W3C Patent Policy</a>.</p> |
fantasai@6658 | 96 | |
fantasai@6658 | 97 | <p><strong>Feedback on this draft should be posted to the |
fantasai@6658 | 98 | (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) |
fantasai@6658 | 99 | public mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a></strong> |
fantasai@6658 | 100 | (see <a href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with |
fantasai@7286 | 101 | <kbd>[text-decor-3]</kbd> in the subject line.</strong> |
fantasai@6658 | 102 | You are strongly encouraged to complain if you see something stupid |
fantasai@6658 | 103 | in this draft. The editors will do their best to respond to all feedback.</p> |
fantasai@6658 | 104 | |
fantasai@6658 | 105 | <p>The following features are at risk and may be cut from the spec during |
fantasai@6658 | 106 | its CR period if there are no (correct) implementations:</p> |
fantasai@6658 | 107 | <ul> |
fantasai@6658 | 108 | <li>the 'text-decoration-skip' property / ''ink'' value |
fantasai@7154 | 109 | <li>the <a href="#line-position">line positioning rules</a> |
fantasai@6658 | 110 | </ul> |
fantasai@7154 | 111 | |
fantasai@7154 | 112 | <p>This is a <strong>Last Call Working Draft</strong>. |
fantasai@7154 | 113 | The deadline for comments is <strong>31 January 2013</strong>. |
fantasai@7015 | 114 | |
kojiishi@6720 | 115 | <h2 class="no-num no-toc" id="contents"> |
kojiishi@6720 | 116 | Table of Contents</h2> |
kojiishi@6720 | 117 | |
kojiishi@6720 | 118 | <!--toc--> |
kojiishi@6720 | 119 | |
fantasai@6658 | 120 | <h2 id="intro"> |
fantasai@6658 | 121 | Introduction</h2> |
fantasai@6658 | 122 | |
fantasai@7153 | 123 | <p><em>This subsection is non-normative.</em> |
fantasai@7153 | 124 | |
fantasai@7153 | 125 | <p>This module covers text decoration, i.e. decorating the glyphs |
fantasai@7153 | 126 | of the text once typeset according to font and typographic rules. |
fantasai@7153 | 127 | (See [[CSS3TEXT]] and [[CSS3-FONTS]].) |
fantasai@7153 | 128 | Such features are traditionally used not only for purely decorative purposes, |
fantasai@7153 | 129 | but also in some cases to show emphasis, for honorifics, |
fantasai@7153 | 130 | and to indicate editorial changes such as insertions, deletions, and misspellings. |
fantasai@7153 | 131 | |
fantasai@7153 | 132 | <p>CSS Levels 1 and 2 only defined very basic <a href="#line-decoration">line decorations</a> |
fantasai@7153 | 133 | (underlines, overlines, and strike-throughs) |
fantasai@7153 | 134 | appropriate to Western typographical traditions. |
fantasai@7153 | 135 | Level 3 of this module adds the ability to change |
fantasai@7153 | 136 | the color, style, position, and continuity of these decorations, |
fantasai@7153 | 137 | and also introduces |
fantasai@7153 | 138 | <a href="#emphasis-marks">emphasis marks</a> (traditionally used in East Asian typography), |
fantasai@7153 | 139 | and <a href="#text-shadow-property">shadows</a> (which were proposed then deferred from Level 2). |
fantasai@6658 | 140 | |
fantasai@6658 | 141 | <h3 id="placement"> |
fantasai@6658 | 142 | Module Interactions</h3> |
fantasai@6658 | 143 | |
fantasai@6993 | 144 | <p>This module replaces and extends the text-decorating |
fantasai@6658 | 145 | features defined in [[!CSS21]] chapter 16. |
fantasai@6658 | 146 | |
fantasai@6658 | 147 | <h3 id="values"> |
fantasai@6658 | 148 | Values</h3> |
fantasai@6658 | 149 | |
fantasai@6658 | 150 | <p>This specification follows the |
fantasai@6658 | 151 | <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property |
fantasai@6658 | 152 | definition conventions</a> from [[!CSS21]]. Value types not defined in |
fantasai@6658 | 153 | this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. |
fantasai@6658 | 154 | Other CSS modules may expand the definitions of these value types: for |
fantasai@6658 | 155 | example [[CSS3COLOR]], when combined with this module, expands the |
fantasai@6658 | 156 | definition of the <color> value type as used in this specification.</p> |
fantasai@6658 | 157 | |
fantasai@6658 | 158 | <p>In addition to the property-specific values listed in their definitions, |
fantasai@6658 | 159 | all properties defined in this specification also accept the |
fantasai@6658 | 160 | <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> |
fantasai@6658 | 161 | keyword as their property value. For readability it has not been repeated |
fantasai@6658 | 162 | explicitly. |
fantasai@6658 | 163 | |
fantasai@6658 | 164 | <h3 id="terms">Terminology</h3> |
fantasai@6658 | 165 | |
fantasai@6658 | 166 | <p>The terms <a href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn>character</dfn></a>, |
fantasai@6658 | 167 | <a href="http://www.w3.org/TR/css3-text/#letter"><dfn>letter</dfn></a>, and |
fantasai@6658 | 168 | <a href="http://www.w3.org/TR/css3-text/#content-language"><dfn>content language</dfn></a> |
fantasai@6658 | 169 | as used in this specification are defined in [[!CSS3TEXT]]. |
fantasai@6658 | 170 | Other terminology and concepts used in this specification are defined |
fantasai@6658 | 171 | in [[!CSS21]] and [[!CSS3-WRITING-MODES]]. |
fantasai@6658 | 172 | |
fantasai@6658 | 173 | <h2 id="line-decoration"> |
fantasai@6658 | 174 | Line Decoration: Underline, Overline, and Strike-Through</h2> |
fantasai@6658 | 175 | |
jackalmage@6861 | 176 | <p> |
jackalmage@6861 | 177 | The following properties describe line decorations that are added to the content of an element. |
jackalmage@6861 | 178 | When specified on or propagated to an inline box, |
jackalmage@6861 | 179 | that box becomes a <dfn>decorating box</dfn> for that decoration, |
jackalmage@6861 | 180 | applying the decoration to all its fragments. |
jackalmage@6861 | 181 | The decoration is then further propagated to any in-flow block-level boxes that split the inline |
jackalmage@6861 | 182 | (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>). |
jackalmage@6861 | 183 | When specified on or propagated to a block container that establishes an inline formatting context, |
jackalmage@6861 | 184 | the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container. |
jackalmage@6861 | 185 | When specified on or propagated to a ruby box, |
jackalmage@6861 | 186 | the decorations are propagated only to the ruby base. |
jackalmage@6861 | 187 | For all other box types, |
jackalmage@6861 | 188 | the decorations are propagated to all in-flow children. |
fantasai@6658 | 189 | |
jackalmage@6861 | 190 | <p class="note"> |
jackalmage@6861 | 191 | Note that text decorations are not propagated to any out-of-flow descendants, |
jackalmage@6861 | 192 | nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. |
jackalmage@6861 | 193 | They are also not propagated to inline children of inline boxes, |
jackalmage@6861 | 194 | although the decoration is <em>applied</em> to such boxes. |
fantasai@6658 | 195 | |
jackalmage@6860 | 196 | <p> |
jackalmage@6860 | 197 | By default underlines, overlines, and line-throughs are applied only to non-replaced inline boxes, |
jackalmage@6860 | 198 | and are drawn over all text (including white space, letter spacing, and word spacing). |
jackalmage@6861 | 199 | Atomic inlines, such as images, are not decorated. |
jackalmage@6860 | 200 | The 'text-decoration-skip' property can be used to modify this behavior, |
jackalmage@6861 | 201 | for example allowing atomic inlines to be underlined |
jackalmage@6860 | 202 | or requiring that white space be skipped. |
jackalmage@6861 | 203 | Margins, borders, and padding of the <i>decorating box</i> are always skipped. |
fantasai@6658 | 204 | |
fantasai@6658 | 205 | <p>Relatively positioning a descendant moves all text decorations |
jackalmage@6861 | 206 | applied to it along with the descendant's text; it does not affect |
fantasai@6658 | 207 | calculation of the decoration's initial position on that line. |
jackalmage@6856 | 208 | The 'visibility' property, 'text-shadow', filters, and other graphical transformations |
fantasai@6658 | 209 | likewise affect text decorations as part of the text they're drawn on, |
jackalmage@6861 | 210 | even if the decorations were specified on an ancestor box. |
fantasai@6658 | 211 | |
fantasai@6658 | 212 | <div class="example"> |
fantasai@6658 | 213 | <p>In the following style sheet and document fragment:</p> |
jackalmage@6861 | 214 | <pre> |
fantasai@6658 | 215 | <!-- --> blockquote { text-decoration: underline; color: blue; } |
fantasai@6658 | 216 | <!-- --> em { display: block; } |
jackalmage@6861 | 217 | <!-- --> cite { color: fuchsia; }</pre> |
jackalmage@6861 | 218 | <pre> |
fantasai@6658 | 219 | <!-- --> <blockquote> |
fantasai@6658 | 220 | <!-- --> <p> |
fantasai@6658 | 221 | <!-- --> <span> |
fantasai@6658 | 222 | <!-- --> Help, help! |
fantasai@6658 | 223 | <!-- --> <em> I am under a hat! </em> |
fantasai@6658 | 224 | <!-- --> |
fantasai@6658 | 225 | <!-- --> <cite> —GwieF </cite> |
fantasai@6658 | 226 | <!-- --> </span> |
fantasai@6658 | 227 | <!-- --> </p> |
jackalmage@6861 | 228 | <!-- --> </blockquote></pre> |
fantasai@6658 | 229 | <p>...the underlining for the blockquote element is propagated to an |
jackalmage@6861 | 230 | anonymous inline box that surrounds the span element, causing |
fantasai@6658 | 231 | the text "Help, help!" to be blue, with the blue underlining from |
fantasai@6658 | 232 | the anonymous inline underneath it, the color being taken from the |
fantasai@6658 | 233 | blockquote element. The <code><em>text</em></code> |
fantasai@6658 | 234 | in the em block is also underlined, as it is in an in-flow block to |
fantasai@6658 | 235 | which the underline is propagated. The final line of text is fuchsia, |
fantasai@6658 | 236 | but the underline underneath it is still the blue underline from the |
fantasai@6658 | 237 | anonymous inline element.</p> |
fantasai@6658 | 238 | <p><img src="underline-example.png" alt="Sample rendering of the above underline example"></p> |
fantasai@6658 | 239 | <p>This diagram shows the boxes involved in the example above. The |
fantasai@6658 | 240 | rounded aqua line represents the anonymous inline element wrapping |
fantasai@6658 | 241 | the inline contents of the paragraph element, the rounded blue line |
fantasai@6658 | 242 | represents the span element, and the orange lines represent the |
fantasai@6658 | 243 | blocks.</p> |
fantasai@6658 | 244 | </div> |
fantasai@6658 | 245 | |
fantasai@6658 | 246 | <h3 id="text-decoration-line-property"> |
fantasai@6658 | 247 | Text Decoration Lines: the 'text-decoration-line' property</h3> |
fantasai@6658 | 248 | |
fantasai@6658 | 249 | <table class="propdef"> |
fantasai@6658 | 250 | <tr> |
fantasai@6658 | 251 | <th>Name: |
fantasai@6658 | 252 | <td><dfn>text-decoration-line</dfn> |
fantasai@6658 | 253 | <tr> |
fantasai@6658 | 254 | <th><a href="#values">Value</a>: |
jackalmage@6858 | 255 | <td>none | [ underline || overline || line-through || blink ] |
fantasai@6658 | 256 | |
fantasai@6658 | 257 | <tr> |
fantasai@6658 | 258 | <th>Initial: |
fantasai@6658 | 259 | <td>none |
fantasai@6658 | 260 | <tr> |
fantasai@6658 | 261 | <th>Applies to: |
fantasai@6658 | 262 | <td>all elements |
fantasai@6658 | 263 | <tr> |
fantasai@6658 | 264 | <th>Inherited: |
fantasai@6658 | 265 | <td>no (but see prose) |
fantasai@6658 | 266 | <tr> |
fantasai@6658 | 267 | <th>Percentages: |
fantasai@6658 | 268 | <td>N/A |
fantasai@6658 | 269 | <tr> |
fantasai@6658 | 270 | <th>Media: |
fantasai@6658 | 271 | <td>visual |
fantasai@6658 | 272 | <tr> |
fantasai@6658 | 273 | <th>Computed value: |
fantasai@6658 | 274 | <td>as specified |
dbaron@7399 | 275 | <tr> |
dbaron@7399 | 276 | <th>Animatable: |
dbaron@7399 | 277 | <td>no |
fantasai@6658 | 278 | </table> |
fantasai@6658 | 279 | |
fantasai@6658 | 280 | <p>Specifies what line decorations, if any, are added to the element. |
fantasai@6658 | 281 | Values have the following meanings:</p> |
fantasai@6658 | 282 | |
fantasai@6658 | 283 | <dl> |
fantasai@6658 | 284 | <dt><dfn title="text-decoration-line:none">''none''</dfn> |
fantasai@6658 | 285 | <dd>Neither produces nor inhibits text decoration. |
fantasai@6658 | 286 | <dt><dfn>''underline''</dfn> |
fantasai@6658 | 287 | <dd>Each line of text is underlined. |
fantasai@6658 | 288 | <dt><dfn>''overline''</dfn> |
fantasai@6993 | 289 | <dd>Each line of text has a line over it (i.e. on the opposite |
fantasai@6658 | 290 | side from an underline). |
fantasai@6658 | 291 | <dt><dfn>''line-through''</dfn> |
fantasai@6658 | 292 | <dd>Each line of text has a line through the middle. |
jackalmage@6858 | 293 | <dt><dfn>''blink''</dfn> |
jackalmage@6858 | 294 | <dd> |
jackalmage@6858 | 295 | The text blinks (alternates between visible and invisible). |
jackalmage@6858 | 296 | Conforming user agents may simply not blink the text. |
jackalmage@6858 | 297 | Note that not blinking the text is one technique to satisfy <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>. |
jackalmage@6858 | 298 | This value is <strong>deprecated</strong> in favor of Animations [[CSS3-ANIMATIONS]]. |
fantasai@6658 | 299 | </dl> |
fantasai@6658 | 300 | |
fantasai@6658 | 301 | <h3 id="text-decoration-color-property"> |
fantasai@6658 | 302 | Text Decoration Color: the 'text-decoration-color' property</h3> |
fantasai@6658 | 303 | |
fantasai@6658 | 304 | <table class="propdef"> |
fantasai@6658 | 305 | <tr> |
fantasai@6658 | 306 | <th>Name: |
fantasai@6658 | 307 | <td><dfn>text-decoration-color</dfn> |
fantasai@6658 | 308 | <tr> |
fantasai@6658 | 309 | <th><a href="#values">Value</a>: |
fantasai@6658 | 310 | <td><a href="http://www.w3.org/TR/css3-color/#color0"><span class="value-inst-color"><color></span></a> |
fantasai@6658 | 311 | |
fantasai@6658 | 312 | <tr> |
fantasai@6658 | 313 | <th>Initial: |
fantasai@6658 | 314 | <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> |
fantasai@6658 | 315 | <tr> |
fantasai@6658 | 316 | <th>Applies to: |
fantasai@6658 | 317 | <td>all elements |
fantasai@6658 | 318 | <tr> |
fantasai@6658 | 319 | <th>Inherited: |
fantasai@6658 | 320 | <td>no |
fantasai@6658 | 321 | <tr> |
fantasai@6658 | 322 | <th>Percentages: |
fantasai@6658 | 323 | <td>N/A |
fantasai@6658 | 324 | <tr> |
fantasai@6658 | 325 | <th>Media: |
fantasai@6658 | 326 | <td>visual |
fantasai@6658 | 327 | <tr> |
fantasai@6658 | 328 | <th>Computed value: |
fantasai@6658 | 329 | <td>the computed color |
dbaron@7399 | 330 | <tr> |
dbaron@7399 | 331 | <th>Animatable: |
dbaron@7399 | 332 | <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a> |
fantasai@6658 | 333 | </table> |
fantasai@6658 | 334 | |
fantasai@6658 | 335 | <p>This property specifies the color of text decoration (underlines |
fantasai@6658 | 336 | overlines, and line-throughs) set on the element with |
fantasai@6658 | 337 | 'text-decoration-line'.</p> |
fantasai@6658 | 338 | |
jackalmage@6862 | 339 | <p> |
jackalmage@6862 | 340 | The color of text decorations must remain the same on all decorations originating from a given element, |
jackalmage@6862 | 341 | even if descendant boxes have different specified colors. |
jackalmage@6862 | 342 | |
fantasai@6658 | 343 | <h3 id="text-decoration-style-property"> |
fantasai@6658 | 344 | Text Decoration Style: the 'text-decoration-style' property</h3> |
fantasai@6658 | 345 | |
fantasai@6658 | 346 | <table class="propdef"> |
fantasai@6658 | 347 | <tr> |
fantasai@6658 | 348 | <th>Name: |
fantasai@6658 | 349 | <td><dfn>text-decoration-style</dfn> |
fantasai@6658 | 350 | <tr> |
fantasai@6658 | 351 | <th><a href="#values">Value</a>: |
fantasai@6658 | 352 | <td>solid | double | dotted | dashed | wavy |
fantasai@6658 | 353 | |
fantasai@6658 | 354 | <tr> |
fantasai@6658 | 355 | <th>Initial: |
fantasai@6658 | 356 | <td>solid |
fantasai@6658 | 357 | <tr> |
fantasai@6658 | 358 | <th>Applies to: |
fantasai@6658 | 359 | <td>all elements |
fantasai@6658 | 360 | <tr> |
fantasai@6658 | 361 | <th>Inherited: |
fantasai@6658 | 362 | <td>no |
fantasai@6658 | 363 | <tr> |
fantasai@6658 | 364 | <th>Percentages: |
fantasai@6658 | 365 | <td>N/A |
fantasai@6658 | 366 | <tr> |
fantasai@6658 | 367 | <th>Media: |
fantasai@6658 | 368 | <td>visual |
fantasai@6658 | 369 | <tr> |
fantasai@6658 | 370 | <th>Computed value: |
fantasai@6658 | 371 | <td>as specified |
dbaron@7399 | 372 | <tr> |
dbaron@7399 | 373 | <th>Animatable: |
dbaron@7399 | 374 | <td>no |
fantasai@6658 | 375 | </table> |
fantasai@6658 | 376 | |
fantasai@6658 | 377 | <p>This property specifies the style of the line(s) drawn for |
fantasai@6658 | 378 | text decoration specified on the element. Values have the |
fantasai@6658 | 379 | same meaning as for the |
fantasai@6658 | 380 | <a href="http://www.w3.org/TR/css3-background/#the-border-style">border-style |
fantasai@6658 | 381 | properties</a> [[!CSS3BG]]. ''wavy'' indicates a wavy line.</p> |
fantasai@6658 | 382 | |
jackalmage@6862 | 383 | <p> |
jackalmage@6862 | 384 | The style of text decorations must remain the same on all decorations originating from a given element, |
jackalmage@6862 | 385 | even if descendant boxes have different specified styles. |
jackalmage@6862 | 386 | |
fantasai@6658 | 387 | <h3 id="text-decoration-property"> |
fantasai@6658 | 388 | Text Decoration Shorthand: the 'text-decoration' property</h3> |
fantasai@6658 | 389 | |
fantasai@6658 | 390 | <table class="propdef"> |
fantasai@6658 | 391 | <tr> |
fantasai@6658 | 392 | <th>Name: |
fantasai@6658 | 393 | <td><dfn>text-decoration</dfn> |
fantasai@6658 | 394 | <tr> |
fantasai@6658 | 395 | <th><a href="#values">Value</a>: |
fantasai@6658 | 396 | <td><var><a href="#text-decoration-line"><text-decoration-line></a></var> || |
fantasai@6658 | 397 | <var><a href="#text-decoration-style"><text-decoration-style></a></var> || |
jackalmage@6858 | 398 | <var><a href="#text-decoration-color"><text-decoration-color></a></var> |
fantasai@6658 | 399 | |
fantasai@6658 | 400 | <tr> |
fantasai@6658 | 401 | <th>Initial: |
fantasai@6658 | 402 | <td>none |
fantasai@6658 | 403 | <tr> |
fantasai@6658 | 404 | <th>Applies to: |
fantasai@6658 | 405 | <td>all elements |
fantasai@6658 | 406 | <tr> |
fantasai@6658 | 407 | <th>Inherited: |
fantasai@6658 | 408 | <td>no |
fantasai@6658 | 409 | <tr> |
fantasai@6658 | 410 | <th>Percentages: |
fantasai@6658 | 411 | <td>N/A |
fantasai@6658 | 412 | <tr> |
fantasai@6658 | 413 | <th>Media: |
fantasai@6658 | 414 | <td>visual |
fantasai@6658 | 415 | <tr> |
fantasai@6658 | 416 | <th>Computed value: |
dbaron@7399 | 417 | <td>see individual properties |
dbaron@7399 | 418 | <tr> |
dbaron@7399 | 419 | <th>Animatable: |
dbaron@7399 | 420 | <td>see individual properties |
fantasai@6658 | 421 | </table> |
fantasai@6658 | 422 | |
fantasai@6658 | 423 | <p>This property is a shorthand for setting 'text-decoration-line', |
fantasai@6658 | 424 | 'text-decoration-color', and 'text-decoration-style' in one declaration. |
fantasai@6658 | 425 | Omitted values are set to their initial values. A 'text-decoration' |
fantasai@6658 | 426 | declaration that omits both the 'text-decoration-color' |
fantasai@6658 | 427 | and 'text-decoration-style' values is backwards-compatible |
fantasai@6658 | 428 | with CSS Levels 1 and 2.</p> |
fantasai@6658 | 429 | |
fantasai@6658 | 430 | <div class="example"> |
fantasai@6658 | 431 | <p>The following example underlines unvisited links with a solid blue |
fantasai@6658 | 432 | underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p> |
fantasai@6658 | 433 | |
fantasai@6658 | 434 | <pre><code class="css"> |
fantasai@6658 | 435 | <!-- -->:link { |
fantasai@6658 | 436 | <!-- --> color: blue; |
fantasai@6658 | 437 | <!-- --> text-decoration: underline; |
fantasai@6658 | 438 | <!-- --> text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ |
fantasai@6658 | 439 | <!-- -->}</code></pre> |
fantasai@6658 | 440 | </div> |
fantasai@6658 | 441 | |
fantasai@6658 | 442 | <h3 id="text-decoration-skip-property"> |
fantasai@6658 | 443 | Text Decoration Line Continuity: the 'text-decoration-skip' property</h3> |
fantasai@6658 | 444 | |
fantasai@6658 | 445 | <table class="propdef"> |
fantasai@6658 | 446 | <tr> |
fantasai@6658 | 447 | <th>Name: |
fantasai@6658 | 448 | <td><dfn>text-decoration-skip</dfn> |
fantasai@6658 | 449 | <tr> |
fantasai@6658 | 450 | <th><a href="#values">Value</a>: |
jackalmage@6860 | 451 | <td>none | [ objects || spaces || ink || edges || box-decoration ] |
fantasai@6658 | 452 | |
fantasai@6658 | 453 | <tr> |
fantasai@6658 | 454 | <th>Initial: |
fantasai@6658 | 455 | <td>objects |
fantasai@6658 | 456 | <tr> |
fantasai@6658 | 457 | <th>Applies to: |
fantasai@6658 | 458 | <td>all elements |
fantasai@6658 | 459 | <tr> |
fantasai@6658 | 460 | <th>Inherited: |
fantasai@6658 | 461 | <td>yes |
fantasai@6658 | 462 | <tr> |
fantasai@6658 | 463 | <th>Percentages: |
fantasai@6658 | 464 | <td>N/A |
fantasai@6658 | 465 | <tr> |
fantasai@6658 | 466 | <th>Media: |
fantasai@6658 | 467 | <td>visual |
fantasai@6658 | 468 | <tr> |
fantasai@6658 | 469 | <th>Computed value: |
fantasai@6658 | 470 | <td>as specified |
dbaron@7399 | 471 | <tr> |
dbaron@7399 | 472 | <th>Animatable: |
dbaron@7399 | 473 | <td>no |
fantasai@6658 | 474 | </table> |
fantasai@6658 | 475 | |
fantasai@6658 | 476 | <p>This property specifies what parts of the element's content |
fantasai@6658 | 477 | any text decoration affecting the element must skip over. It |
fantasai@6658 | 478 | controls all text decoration lines drawn by the element |
fantasai@6658 | 479 | and also any text decoration lines drawn by its ancestors. |
fantasai@6658 | 480 | Values have the following meanings:</p> |
fantasai@6658 | 481 | |
fantasai@6658 | 482 | <dl> |
fantasai@6658 | 483 | <dt><dfn title="text-decoration-skip:none">''none''</dfn></dt> |
fantasai@6658 | 484 | <dd>Skip nothing: text-decoration is drawn for all text content |
fantasai@6658 | 485 | and for inline replaced elements.</dd> |
fantasai@6658 | 486 | <dt><dfn title="text-decoration-skip:objects">''objects''</dfn></dt> |
fantasai@6658 | 487 | <dd>Skip this element if it is an atomic inline (such as an |
fantasai@6658 | 488 | image or inline-block).</dd> |
fantasai@6658 | 489 | <dt><dfn title="text-decoration-skip:spaces">''spaces''</dfn></dt> |
fantasai@7310 | 490 | <dd>Skip spaces: |
fantasai@7291 | 491 | this includes space (U+0020) and tab (U+0009), |
fantasai@7291 | 492 | as well as nbsp (U+00A0), ideographic space (U+3000), |
fantasai@7310 | 493 | all fixed width spaces (such as U+2000–U+200A, U+202F and U+205F), |
fantasai@7292 | 494 | plus any adjacent letter-spacing or word-spacing [[!CSS3TEXT]]. |
fantasai@7291 | 495 | <p class="issue">Should this include visible characters like Ethiopic Word Space? |
fantasai@6658 | 496 | <dt><dfn title="text-decoration-skip:ink">''ink''</dfn></dt> |
fantasai@6658 | 497 | <dd>Skip over where glyphs are drawn: interrupt the decoration |
fantasai@6658 | 498 | line to let text show through where the text decoration would |
fantasai@6658 | 499 | otherwise cross over a glyph. The UA may also skip a small |
fantasai@6658 | 500 | distance to either side of the glyph outline.</dd> |
fantasai@6658 | 501 | <dt><dfn title="text-decoration-skip:edges">''edges''</dfn></dt> |
fantasai@6658 | 502 | <dd>The UA should place the start and end of the line inwards from |
jackalmage@6861 | 503 | the content edge of the <i>decorating element</i> so that, e.g. two |
fantasai@6658 | 504 | underlined elements side-by-side do not appear to have a single |
fantasai@6658 | 505 | underline. (This is important in Chinese, where underlining is a |
fantasai@6658 | 506 | form of punctuation.)</dd> |
jackalmage@6860 | 507 | <dt><dfn title="text-decoration-skip:box-decoration">''box-decoration''</dfn> |
jackalmage@6860 | 508 | <dd> |
jackalmage@6860 | 509 | Skip over the box's margin, border, and padding areas. |
jackalmage@6860 | 510 | Note that this only has an effect on decorations imposed by an ancestor. |
fantasai@6658 | 511 | </dl> |
fantasai@6658 | 512 | |
fantasai@6658 | 513 | <p class="note">Note that this property inherits and that descendant |
fantasai@6658 | 514 | elements can have a different setting.</p> |
fantasai@6658 | 515 | |
jackalmage@6860 | 516 | <p class='note'> |
jackalmage@6860 | 517 | Note that CSS 2.1 required skipping margins, borders, and padding always. |
jackalmage@6860 | 518 | In this level, by default only the margins, borders, and padding of the <i>decorating element</i> are skipped. |
jackalmage@6860 | 519 | |
jackalmage@6863 | 520 | <h3 id="text-underline-position-property"> |
jackalmage@6863 | 521 | Text Underline Position: the 'text-underline-position' property</h3> |
fantasai@6658 | 522 | |
fantasai@6658 | 523 | <table class="propdef"> |
fantasai@6658 | 524 | <tr> |
fantasai@6658 | 525 | <th>Name: |
fantasai@6658 | 526 | <td><dfn>text-underline-position</dfn> |
fantasai@6658 | 527 | <tr> |
fantasai@6658 | 528 | <th><a href="#values">Value</a>: |
fantasai@6993 | 529 | <td>auto | alphabetic | [ under || [ left | right ] ] |
fantasai@6658 | 530 | |
fantasai@6658 | 531 | <tr> |
fantasai@6658 | 532 | <th>Initial: |
fantasai@6658 | 533 | <td>auto |
fantasai@6658 | 534 | <tr> |
fantasai@6658 | 535 | <th>Applies to: |
fantasai@6658 | 536 | <td>all elements |
fantasai@6658 | 537 | <tr> |
fantasai@6658 | 538 | <th>Inherited: |
fantasai@6658 | 539 | <td>yes |
fantasai@6658 | 540 | <tr> |
fantasai@6658 | 541 | <th>Percentages: |
fantasai@6658 | 542 | <td>N/A |
fantasai@6658 | 543 | <tr> |
fantasai@6658 | 544 | <th>Media: |
fantasai@6658 | 545 | <td>visual |
fantasai@6658 | 546 | <tr> |
fantasai@6658 | 547 | <th>Computed value: |
fantasai@6658 | 548 | <td>as specified |
dbaron@7399 | 549 | <tr> |
dbaron@7399 | 550 | <th>Animatable: |
dbaron@7399 | 551 | <td>no |
fantasai@6658 | 552 | </table> |
fantasai@6658 | 553 | |
fantasai@6658 | 554 | <p>This property sets the position of an underline specified |
fantasai@6658 | 555 | on the same element: it does not affect underlines specified by |
fantasai@6658 | 556 | ancestor elements. Values have the following meanings:</p> |
fantasai@6658 | 557 | |
fantasai@6658 | 558 | <dl> |
fantasai@7117 | 559 | <dt><dfn id="underline-auto" title="text-underline-position: auto">''auto''</dfn></dt> |
fantasai@6658 | 560 | <dd>The user agent may use any algorithm to determine the |
fantasai@6993 | 561 | underline's position; however it must be placed at or under |
fantasai@6658 | 562 | the alphabetic baseline. |
fantasai@6658 | 563 | <p class="note">It is suggested that the underline position |
fantasai@6658 | 564 | be ''alphabetic'' unless it crosses either subscripted (or |
fantasai@6658 | 565 | otherwise lowered) text, or it affects characters from Asian |
fantasai@6658 | 566 | scripts such as Han or Tibetan, for which an alphabetic |
fantasai@6658 | 567 | underline is too high: in such cases, aligning to the em box |
fantasai@6993 | 568 | edge as described for ''under left'' is more appropriate. |
fantasai@7117 | 569 | <dt><dfn id="underline-alphabetic" title="text-underline-position: alphabetic">''alphabetic''</dfn></dt> |
fantasai@6658 | 570 | <dd>The underline is positioned relative to the alphabetic baseline. In |
fantasai@6658 | 571 | this case the underline is likely to cross some descenders. |
fantasai@6658 | 572 | <div class="figure"> |
fantasai@6658 | 573 | <p><img title="text-underline-position: alphabetic" |
fantasai@6658 | 574 | alt="In a typical Latin font, the underline is positioned slightly |
fantasai@6658 | 575 | below the alphabetic baseline, leaving a gap between the line |
fantasai@6658 | 576 | and the bottom of most Latin letters, but crossing through |
fantasai@6658 | 577 | descenders such as the stem of a 'p'." |
fantasai@6658 | 578 | src="underline-position-alphabetic.png" |
fantasai@6658 | 579 | > |
fantasai@6658 | 580 | <p class="caption">''text-underline-position: alphabetic''</p> |
fantasai@6658 | 581 | </div> |
fantasai@7117 | 582 | <dt><dfn id="underline-under" title="text-underline-position: under">''under''</dfn></dt> |
fantasai@6658 | 583 | <dd>In horizontal writing modes, the underline is positioned |
fantasai@6658 | 584 | relative to the under edge of the element's content box. |
fantasai@6658 | 585 | In this case the underline usually does not cross the descenders. |
fantasai@6658 | 586 | (This is sometimes called "accounting" underline.) |
fantasai@6658 | 587 | If the underline affects descendants with a lower content edge, |
fantasai@6658 | 588 | the user agent should shift the underline down further to the |
fantasai@6658 | 589 | lowest underlined content box edge. |
fantasai@6658 | 590 | The user agent may ignore elements with ''vertical-align'' |
fantasai@6658 | 591 | values given as lengths, percentages, ''top'', or ''bottom'' |
fantasai@6658 | 592 | when making this adjustment. |
fantasai@6658 | 593 | (Note that images that are not affected by the underline per |
fantasai@6658 | 594 | 'text-decoration-skip' will not affect the position of the |
fantasai@6658 | 595 | underline.) |
fantasai@6658 | 596 | <div class="figure"> |
fantasai@6993 | 597 | <p><img title="text-underline-position: under" |
fantasai@6658 | 598 | alt="In a typical Latin font, the underline is far enough |
fantasai@6658 | 599 | below the text that it does not cross the bottom of a 'g'." |
fantasai@6993 | 600 | src="underline-position-under.png" |
fantasai@6658 | 601 | > |
fantasai@6993 | 602 | <p class="caption">''text-underline-position: under''</p> |
fantasai@6658 | 603 | </div> |
fantasai@6658 | 604 | <div class="example"> |
fantasai@6658 | 605 | <p>Because 'text-underline-position' inherits, and is not reset |
fantasai@6658 | 606 | by the 'text-decoration' shorthand, the following example |
fantasai@6993 | 607 | switches the document to use ''under'' underlining, which can |
fantasai@6658 | 608 | be more appropriate for writing systems with long, complicated |
fantasai@6658 | 609 | descenders. It is also often useful for mathematical or chemical |
fantasai@6658 | 610 | texts that use many subscripts. |
fantasai@6993 | 611 | <pre>:root { text-underline-position: under; }</pre> |
fantasai@6658 | 612 | </div> |
fantasai@7117 | 613 | <dt><dfn id="underline-left" title="text-underline-position: left">''left''</dfn></dt> |
fantasai@6658 | 614 | <dd>In vertical writing modes, the underline is aligned as for |
fantasai@6993 | 615 | ''under'', except it is always aligned to the left edge of the text. |
fantasai@6993 | 616 | If this causes the underline to be drawn on the "over" side of |
fantasai@6993 | 617 | the text, then an overline also switches sides and is drawn on |
fantasai@6993 | 618 | the "under" side. |
fantasai@7117 | 619 | <dt><dfn id="underline-right" title="text-underline-position: right">''right''</dfn></dt> |
fantasai@6658 | 620 | <dd>In vertical writing modes, the underline is aligned as for |
fantasai@6993 | 621 | ''under'', except it is always aligned to the right edge of the text. |
fantasai@6658 | 622 | If this causes the underline to be drawn on the "over" side of |
fantasai@6658 | 623 | the text, then an overline also switches sides and is drawn on |
fantasai@6658 | 624 | the "under" side.</dd> |
fantasai@6658 | 625 | </dl> |
fantasai@6658 | 626 | |
fantasai@6993 | 627 | <p>If ''under'' is specified alone, ''left'' is also implied. |
fantasai@6993 | 628 | If ''left'' or ''right'' is specified alone, ''under'' is also |
fantasai@6658 | 629 | implied. |
fantasai@6658 | 630 | |
fantasai@6658 | 631 | <div class="figure" id="fig-text-underline-position"> |
fantasai@6658 | 632 | <table> |
fantasai@6658 | 633 | <tr> |
fantasai@6658 | 634 | <td> |
fantasai@6658 | 635 | <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' |
fantasai@6658 | 636 | places the underline on the left side of the text." |
fantasai@6658 | 637 | title="text-underline-position: left" |
fantasai@6658 | 638 | src="underline-position-left.png" |
fantasai@6658 | 639 | > |
fantasai@6658 | 640 | |
fantasai@6658 | 641 | <td> |
fantasai@6658 | 642 | <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' |
fantasai@6658 | 643 | places the underline on the right side of the text." |
fantasai@6658 | 644 | title="text-underline-position: right" |
fantasai@6658 | 645 | src="underline-position-right.png" |
fantasai@6658 | 646 | > |
fantasai@6658 | 647 | |
fantasai@6658 | 648 | <tr> |
fantasai@6658 | 649 | <td>''left'' |
fantasai@6658 | 650 | <td>''right'' |
fantasai@6658 | 651 | </table> |
fantasai@6658 | 652 | <p class="caption">In vertical writing modes, the 'text-underline-position' |
fantasai@6658 | 653 | values ''left'' and ''right'' allow placing the underline on either |
fantasai@6658 | 654 | side of the text. (In horizontal writing modes, both values are |
fantasai@6993 | 655 | treated as ''under''.)</p> |
fantasai@6658 | 656 | </div> |
fantasai@6658 | 657 | |
fantasai@6658 | 658 | <div class="example"> |
fantasai@6658 | 659 | <p>The following example styles modern Chinese, Japanese, and Korean |
fantasai@6658 | 660 | texts with the appropriate underline positions in both horizontal |
fantasai@6658 | 661 | and vertical text: |
fantasai@6993 | 662 | <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; } |
fantasai@6993 | 663 | <!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre> |
fantasai@6658 | 664 | </div> |
fantasai@6658 | 665 | |
fantasai@6996 | 666 | <h3 id="line-position"> |
fantasai@6996 | 667 | Determining the Position and Thickness of Line Decorations</h3> |
fantasai@6996 | 668 | |
fantasai@6996 | 669 | <p>In determining the position of text decoration lines, |
fantasai@7012 | 670 | user agents must consider, per line box, the "ideal" positions of all fragments |
fantasai@7012 | 671 | of in-flow inline descendants of the <i>decorating box</i> on that line |
fantasai@7117 | 672 | as follows |
fantasai@7117 | 673 | (treating <a href="#underline-left"><i>over</i>-positioned underlines</a> as <i>over</i> lines |
fantasai@7117 | 674 | and <a href="#underline-left"><i>under</i>-positioned overlines</a> as <i>under</i> lines): |
fantasai@6996 | 675 | |
fantasai@6996 | 676 | <dl> |
fantasai@7117 | 677 | <dt><a href="http://dev.w3.org/csswg/css3-writing-modes/#over"><i>over</i></a> lines |
fantasai@6996 | 678 | <dd> |
fantasai@7012 | 679 | Align the line decoration with respect to the highest |
fantasai@7117 | 680 | <!-- <i>text-over</i> baseline of the considered fragments. --> |
fantasai@7117 | 681 | <a href="http://dev.w3.org/csswg/css3-writing-modes/#over"><i>over</i></a> edge |
fantasai@7117 | 682 | of the considered fragments' EM boxes. |
fantasai@6996 | 683 | |
fantasai@7117 | 684 | <dt><a href="#underline-alphabetic"><i>alphabetic</i></a> underlines |
fantasai@6996 | 685 | <dd> |
fantasai@7013 | 686 | Calculate an average of the ideal underlining offsets |
fantasai@7013 | 687 | (from their respective alphabetic baselines) |
fantasai@7013 | 688 | of the considered fragments, |
fantasai@7013 | 689 | assigning any inline with non-initial 'vertical-align' the ideal offset of its parent. |
fantasai@7013 | 690 | Align the line decoration to the lowest alphabetic baseline considered, |
fantasai@7013 | 691 | with that calculated offset. |
fantasai@7013 | 692 | (Alphabetic baselines can differ between ''baseline''-aligned boxes if the dominant baseline is non-alphabetic.) |
fantasai@6996 | 693 | |
fantasai@7117 | 694 | <dt>non-alphabetic <a href="http://dev.w3.org/csswg/css3-writing-modes/#under"><i>under</i></a> lines |
fantasai@6996 | 695 | <dd> |
fantasai@7012 | 696 | Position the line decoration with respect to the lowest |
fantasai@7117 | 697 | <!-- <i>text-under</i> baseline of the considered fragments. --> |
fantasai@7117 | 698 | <a href="http://dev.w3.org/csswg/css3-writing-modes/#under"><i>under</i></a> edge |
fantasai@7117 | 699 | of the considered fragments' EM boxes. |
fantasai@6996 | 700 | |
fantasai@6996 | 701 | <dt>line-throughs |
fantasai@6996 | 702 | <dd> |
fantasai@7012 | 703 | For each set of considered fragments with the same 'font-size', |
fantasai@6996 | 704 | compute an ideal position averaged from their direct contents and font metrics, |
fantasai@7012 | 705 | assigning any fragment with non-initial 'vertical-align' the ideal position of its parent. |
fantasai@7012 | 706 | Position the portion of the line across each decorated fragment at that fragment's ideal position. |
fantasai@6996 | 707 | (Essentially, this performs the same sort of averaging as for alphabetic underlines, |
fantasai@7154 | 708 | but recomputes the position when drawing across a descendant with a different computed 'font-size'. |
fantasai@7154 | 709 | This ensures that the text remains effectively "crossed out" despite any font size changes.) |
fantasai@6996 | 710 | </dl> |
fantasai@6996 | 711 | |
fantasai@6996 | 712 | <p> |
fantasai@6996 | 713 | CSS does not define the thickness of line decorations. |
fantasai@6996 | 714 | In determining the thickness of text decoration lines, |
fantasai@6996 | 715 | user agents may consider the font sizes, faces, and weights of descendants |
fantasai@6996 | 716 | to provide an appropriately averaged thickness. |
fantasai@6996 | 717 | |
fantasai@6996 | 718 | <div class="example"> |
fantasai@6996 | 719 | <p>The following figure shows the averaging for underline: |
fantasai@6996 | 720 | <p><img alt="In the first rendering of the underlined text '1st a' |
fantasai@6996 | 721 | with 'st' as a superscript, both the '1st' and the 'a' |
fantasai@6996 | 722 | are rendered in a small font. In the second rendering, |
fantasai@6996 | 723 | the 'a' is rendered in a larger font. In the third, both |
fantasai@6996 | 724 | '1st' and 'a' are large." |
fantasai@6996 | 725 | height="105" src="underline-averaging.gif" width="326"> |
fantasai@6996 | 726 | <p>In the three fragments of underlined text, the underline is drawn |
fantasai@6996 | 727 | consecutively lower and thicker as the ratio of large text to small |
fantasai@6996 | 728 | text increases.</p> |
fantasai@7154 | 729 | <p>Using the same example, a line-through would in the second fragment, |
fantasai@7154 | 730 | instead of averaging the two font sizes, |
fantasai@7154 | 731 | split the line-through into two segments: |
fantasai@7154 | 732 | <p><img alt="" src="linethrough-averaging.gif"> |
fantasai@7154 | 733 | <p>In both cases, however, the superscript, due to the vertical-alignment shift, |
fantasai@7154 | 734 | has no effect on the position of the line. |
fantasai@6996 | 735 | </div> |
fantasai@6996 | 736 | |
fantasai@6658 | 737 | <div class="note"> |
fantasai@6658 | 738 | <p>In some cases (such as in OpenType) the font format can offer |
fantasai@6658 | 739 | information about the appropriate position of an underline. |
fantasai@6658 | 740 | Typically this information gives the position of an ''alphabetic'' |
fantasai@6658 | 741 | underline; in some cases (especially in CJK fonts), it gives |
fantasai@6993 | 742 | the position of a ''under left'' underline. (In this case, |
fantasai@6658 | 743 | the font's underline metrics typically touch the bottom edge |
fantasai@6658 | 744 | of the em box). |
fantasai@6658 | 745 | The UA is encouraged to use information (such as the underline |
fantasai@6658 | 746 | thickness, or appropriate alphabetic alignment) from the font |
fantasai@6658 | 747 | wherever appropriate. |
fantasai@6658 | 748 | </p> |
fantasai@6658 | 749 | </div> |
fantasai@6658 | 750 | |
jackalmage@6863 | 751 | <h2 id="emphasis-marks"> |
jackalmage@6863 | 752 | Emphasis Marks</h2> |
fantasai@6658 | 753 | |
fantasai@6658 | 754 | <p>East Asian documents traditionally use small symbols next to each glyph to emphasize |
fantasai@6658 | 755 | a run of text. For example:</p> |
fantasai@6658 | 756 | |
fantasai@6658 | 757 | <div class="figure"> |
fantasai@6658 | 758 | <p> |
fantasai@6993 | 759 | <img alt="Example of emphasis in Japanese appearing over the text" |
fantasai@6658 | 760 | class="example" src="text-emphasis-ja.gif" height="28" width="225"></p> |
fantasai@6658 | 761 | <p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text</p> |
fantasai@6658 | 762 | </div> |
fantasai@6658 | 763 | |
jackalmage@6863 | 764 | <h3 id="text-emphasis-style-property"> |
jackalmage@6863 | 765 | Emphasis Mark Style: the 'text-emphasis-style' property</h3> |
fantasai@6658 | 766 | |
fantasai@6658 | 767 | <table class="propdef"> |
fantasai@6658 | 768 | <tr> |
fantasai@6658 | 769 | <th>Name: |
fantasai@6658 | 770 | <td><dfn>text-emphasis-style</dfn> |
fantasai@6658 | 771 | <tr> |
fantasai@6658 | 772 | <th><a href="#values">Value</a>: |
fantasai@6658 | 773 | <td>none | |
fantasai@6658 | 774 | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | |
fantasai@6658 | 775 | <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span class="value-inst-string"><string></span></a> |
fantasai@6658 | 776 | |
fantasai@6658 | 777 | <tr> |
fantasai@6658 | 778 | <th>Initial: |
fantasai@6658 | 779 | <td>none |
fantasai@6658 | 780 | <tr> |
fantasai@6658 | 781 | <th>Applies to: |
fantasai@6658 | 782 | <td>all elements |
fantasai@6658 | 783 | <tr> |
fantasai@6658 | 784 | <th>Inherited: |
fantasai@6658 | 785 | <td>yes |
fantasai@6658 | 786 | <tr> |
fantasai@6658 | 787 | <th>Percentages: |
fantasai@6658 | 788 | <td>N/A |
fantasai@6658 | 789 | <tr> |
fantasai@6658 | 790 | <th>Media: |
fantasai@6658 | 791 | <td>visual |
fantasai@6658 | 792 | <tr> |
fantasai@6658 | 793 | <th>Computed value: |
fantasai@6658 | 794 | <td>'none', a pair of keywords representing the shape and fill, or |
fantasai@6658 | 795 | a string |
dbaron@7399 | 796 | <tr> |
dbaron@7399 | 797 | <th>Animatable: |
dbaron@7399 | 798 | <td>no |
fantasai@6658 | 799 | </table> |
fantasai@6658 | 800 | |
fantasai@6658 | 801 | <p>This property applies emphasis marks to the element's text. |
fantasai@6658 | 802 | Values have the following meanings:</p> |
fantasai@6658 | 803 | |
fantasai@6658 | 804 | <dl> |
fantasai@6658 | 805 | <dt><dfn title="text-emphasis:none">''none''</dfn></dt> |
fantasai@6658 | 806 | <dd>No emphasis marks.</dd> |
fantasai@6658 | 807 | <dt><dfn title="text-emphasis:filled">''filled''</dfn></dt> |
fantasai@6658 | 808 | <dd>The shape is filled with solid color.</dd> |
fantasai@6658 | 809 | <dt><dfn title="text-emphasis:open">''open''</dfn></dt> |
fantasai@6658 | 810 | <dd>The shape is hollow.</dd> |
fantasai@6658 | 811 | <dt><dfn title="text-emphasis:dot">''dot''</dfn></dt> |
fantasai@6658 | 812 | <dd>Display small circles as marks. |
fantasai@6658 | 813 | The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'.</dd> |
fantasai@6658 | 814 | <dt><dfn title="text-emphasis:circle">''circle''</dfn></dt> |
fantasai@6658 | 815 | <dd>Display large circles as marks. |
fantasai@6658 | 816 | The filled circle is U+25CF '●', and the open circle is U+25CB '○'.</dd> |
fantasai@6658 | 817 | <dt><dfn title="text-emphasis:double-circle">''double-circle''</dfn></dt> |
fantasai@6658 | 818 | <dd>Display double circles as marks. |
fantasai@6658 | 819 | The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'.</dd> |
fantasai@6658 | 820 | <dt><dfn title="text-emphasis:triangle">''triangle''</dfn></dt> |
fantasai@6658 | 821 | <dd>Display triangles as marks. |
fantasai@6658 | 822 | The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'.</dd> |
fantasai@6658 | 823 | <dt><dfn title="text-emphasis:sesame">''sesame''</dfn></dt> |
fantasai@6658 | 824 | <dd>Display sesames as marks. |
fantasai@6658 | 825 | The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'.</dd> |
fantasai@6658 | 826 | <dt><dfn title="text-emphasis:sesame">''<var><string></var>''</dfn></dt> |
fantasai@6658 | 827 | <dd>Display the given string as marks. |
fantasai@6658 | 828 | Authors should not specify more than one <i>character</i> in <string>. |
fantasai@6658 | 829 | The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd> |
fantasai@6658 | 830 | </dl> |
fantasai@6658 | 831 | |
fantasai@6658 | 832 | <p>If a shape keyword is specified but neither of ''filled'' nor ''open'' is |
fantasai@6658 | 833 | specified, ''filled'' is assumed. If only ''filled'' or ''open'' is specified, |
fantasai@6658 | 834 | the shape keyword computes to ''circle'' in horizontal writing mode and |
fantasai@6658 | 835 | ''sesame'' in vertical writing mode.</p> |
fantasai@6658 | 836 | |
fantasai@6658 | 837 | <p>The marks should be drawn using the element's font settings with its |
fantasai@6658 | 838 | size scaled down to 50%. However, not all fonts have all these glyphs, |
fantasai@6658 | 839 | and some fonts use inappropriate sizes for emphasis marks in these |
fantasai@6658 | 840 | code points. The UA may opt to use a font known to be good for |
fantasai@6658 | 841 | emphasis marks, or the marks may instead be synthesized by the UA. |
fantasai@6658 | 842 | Marks must remain upright in vertical writing modes: like CJK |
fantasai@6658 | 843 | characters, they do not rotate to match the writing mode.</p> |
fantasai@6658 | 844 | |
fantasai@6658 | 845 | <p class="note"> |
fantasai@6658 | 846 | One example of good fonts for emphasis marks is Adobe's opensource project, |
fantasai@6658 | 847 | <a href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic OpenType Font</a>, |
fantasai@6658 | 848 | which is specially designed for the emphasis marks. |
fantasai@6658 | 849 | </p> |
fantasai@6658 | 850 | |
fantasai@6658 | 851 | <p>The marks are drawn once for each <i>character</i>. However, |
fantasai@6658 | 852 | emphasis marks are not drawn for characters that are:</p> |
fantasai@6658 | 853 | <ul> |
fantasai@6658 | 854 | <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word separators</a> or that |
fantasai@6658 | 855 | belong to the Unicode separator classes (Z*). |
fantasai@6658 | 856 | (But note that emphasis marks <em>are</em> drawn for a space |
fantasai@6658 | 857 | that combines with any combining characters.)</li> |
fantasai@6658 | 858 | <li>Characters belonging to the Unicode classes for control codes |
fantasai@6658 | 859 | and unassigned characters (Cc, Cf, Cn).</li> |
fantasai@6658 | 860 | </ul> |
fantasai@6658 | 861 | |
fantasai@6658 | 862 | <p>If emphasis marks are drawn for characters |
fantasai@6658 | 863 | for which ruby is drawn in the same position as the emphasis mark, |
fantasai@6658 | 864 | the ruby should be stacked between the emphasis marks and the base text. |
fantasai@6658 | 865 | In this case, the position of the emphasis marks for a given element |
fantasai@6658 | 866 | should be determined as if all characters have ruby boxes |
fantasai@6658 | 867 | of the same height as the highest ruby box in the element. |
fantasai@6658 | 868 | If the UA is not capable of drawing ruby and emphasis marks on the same side, |
fantasai@6658 | 869 | the UA may hide ruby and draw only emphasis marks.</p> |
fantasai@6658 | 870 | <div class="figure"> |
fantasai@6658 | 871 | <p><img |
fantasai@6658 | 872 | alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" |
fantasai@6658 | 873 | src="text-emphasis-ruby.png" width="134" height="50"></p> |
fantasai@6658 | 874 | <p class="caption">Emphasis marks applied to 4 characters, and ruby to 2 of them</p> |
fantasai@6658 | 875 | </div> |
fantasai@6658 | 876 | |
fantasai@6658 | 877 | <p class="note">A future level of CSS may define controls to specify |
fantasai@6658 | 878 | what to do when emphasis marks and ruby text coincide.</p> |
fantasai@6658 | 879 | |
jackalmage@6863 | 880 | <h3 id="text-emphasis-color-property"> |
jackalmage@6863 | 881 | Emphasis Mark Color: the 'text-emphasis-color' property</h3> |
fantasai@6658 | 882 | |
fantasai@6658 | 883 | <table class="propdef"> |
fantasai@6658 | 884 | <tr> |
fantasai@6658 | 885 | <th>Name: |
fantasai@6658 | 886 | <td><dfn>text-emphasis-color</dfn> |
fantasai@6658 | 887 | <tr> |
fantasai@6658 | 888 | <th><a href="#values">Value</a>: |
fantasai@6658 | 889 | <td><color> |
fantasai@6658 | 890 | <tr> |
fantasai@6658 | 891 | <th>Initial: |
fantasai@6658 | 892 | <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> |
fantasai@6658 | 893 | <tr> |
fantasai@6658 | 894 | <th>Applies to: |
fantasai@6658 | 895 | <td>all elements |
fantasai@6658 | 896 | <tr> |
fantasai@6658 | 897 | <th>Inherited: |
fantasai@6658 | 898 | <td>yes |
fantasai@6658 | 899 | <tr> |
fantasai@6658 | 900 | <th>Percentages: |
fantasai@6658 | 901 | <td>N/A |
fantasai@6658 | 902 | <tr> |
fantasai@6658 | 903 | <th>Media: |
fantasai@6658 | 904 | <td>visual |
fantasai@6658 | 905 | <tr> |
fantasai@6658 | 906 | <th>Computed value: |
fantasai@6658 | 907 | <td>as specified |
dbaron@7399 | 908 | <tr> |
dbaron@7399 | 909 | <th>Animatable: |
dbaron@7399 | 910 | <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a> |
fantasai@6658 | 911 | </table> |
fantasai@6658 | 912 | |
fantasai@6658 | 913 | <p>This property specifies the foreground color of the emphasis marks.</p> |
fantasai@6658 | 914 | |
fantasai@6658 | 915 | <p class="note"> |
fantasai@7137 | 916 | The <dfn>''currentcolor''</dfn> keyword computes to itself |
fantasai@7137 | 917 | and is resolved to the value of 'color' after inheritance is performed. |
fantasai@7137 | 918 | This means 'text-emphasis-color' by default matches the text 'color' |
fantasai@7137 | 919 | even as 'color' changes across elements. |
fantasai@6658 | 920 | |
jackalmage@6863 | 921 | <h3 id="text-emphasis-property"> |
jackalmage@6863 | 922 | Emphasis Mark Shorthand: the 'text-emphasis' property</h3> |
fantasai@6658 | 923 | |
fantasai@6658 | 924 | <table class="propdef"> |
fantasai@6658 | 925 | <tr> |
fantasai@6658 | 926 | <th>Name: |
fantasai@6658 | 927 | <td><dfn>text-emphasis</dfn> |
fantasai@6658 | 928 | <tr> |
fantasai@6658 | 929 | <th><a href="#values">Value</a>: |
fantasai@6658 | 930 | <td>'<<a href="#text-emphasis-style">text-emphasis-style</a>>' || '<<a href="#text-emphasis-color">text-emphasis-color</a>>' |
fantasai@6658 | 931 | |
fantasai@6658 | 932 | <tr> |
fantasai@6658 | 933 | <th>Initial: |
fantasai@6658 | 934 | <td>see individual properties |
fantasai@6658 | 935 | <tr> |
fantasai@6658 | 936 | <th>Applies to: |
fantasai@6658 | 937 | <td>all elements |
fantasai@6658 | 938 | <tr> |
fantasai@6658 | 939 | <th>Inherited: |
fantasai@6658 | 940 | <td>yes |
fantasai@6658 | 941 | <tr> |
fantasai@6658 | 942 | <th>Percentages: |
fantasai@6658 | 943 | <td>N/A |
fantasai@6658 | 944 | <tr> |
fantasai@6658 | 945 | <th>Media: |
fantasai@6658 | 946 | <td>visual |
fantasai@6658 | 947 | <tr> |
fantasai@6658 | 948 | <th>Computed value: |
fantasai@6658 | 949 | <td>see individual properties |
dbaron@7399 | 950 | <tr> |
dbaron@7399 | 951 | <th>Animatable: |
dbaron@7399 | 952 | <td>see individual properties |
fantasai@6658 | 953 | </table> |
fantasai@6658 | 954 | |
fantasai@6658 | 955 | <p>This property is a shorthand for setting |
fantasai@6658 | 956 | 'text-emphasis-style' and 'text-emphasis-color' |
fantasai@6658 | 957 | in one declaration. |
fantasai@6658 | 958 | Omitted values are set to their initial values.</p> |
fantasai@6658 | 959 | |
fantasai@6658 | 960 | <p class="note">Note that 'text-emphasis-position' is not reset in this |
fantasai@6658 | 961 | shorthand. This is because typically the shape and color vary, but the |
fantasai@6658 | 962 | position is consistent for a particular language throughout the document. |
fantasai@6658 | 963 | Therefore the position should inherit independently.</p> |
fantasai@6658 | 964 | |
jackalmage@6863 | 965 | <h3 id="text-emphasis-position-property"> |
jackalmage@6863 | 966 | Emphasis Mark Position: the 'text-emphasis-position' property</h3> |
fantasai@6658 | 967 | |
fantasai@6658 | 968 | <table class="propdef"> |
fantasai@6658 | 969 | <tr> |
fantasai@6658 | 970 | <th>Name: |
fantasai@6658 | 971 | <td><dfn>text-emphasis-position</dfn> |
fantasai@6658 | 972 | <tr> |
fantasai@6658 | 973 | <th><a href="#values">Value</a>: |
fantasai@6993 | 974 | <td>[ over | under ] && [ right | left ] |
fantasai@6658 | 975 | |
fantasai@6658 | 976 | <tr> |
fantasai@6658 | 977 | <th>Initial: |
fantasai@6993 | 978 | <td>over right |
fantasai@6658 | 979 | <tr> |
fantasai@6658 | 980 | <th>Applies to: |
fantasai@6658 | 981 | <td>all elements |
fantasai@6658 | 982 | <tr> |
fantasai@6658 | 983 | <th>Inherited: |
fantasai@6658 | 984 | <td>yes |
fantasai@6658 | 985 | <tr> |
fantasai@6658 | 986 | <th>Percentages: |
fantasai@6658 | 987 | <td>N/A |
fantasai@6658 | 988 | <tr> |
fantasai@6658 | 989 | <th>Media: |
fantasai@6658 | 990 | <td>visual |
fantasai@6658 | 991 | <tr> |
fantasai@6658 | 992 | <th>Computed value: |
fantasai@6658 | 993 | <td>as specified |
dbaron@7399 | 994 | <tr> |
dbaron@7399 | 995 | <th>Animatable: |
dbaron@7399 | 996 | <td>no |
fantasai@6658 | 997 | </table> |
fantasai@6658 | 998 | |
fantasai@6658 | 999 | <p>This property describes where emphasis marks are drawn at. |
fantasai@6658 | 1000 | The values have following meanings:</p> |
fantasai@6658 | 1001 | |
fantasai@6658 | 1002 | <dl> |
fantasai@6993 | 1003 | <dt><dfn title="text-emphasis:over">''over''</dfn></dt> |
fantasai@6658 | 1004 | <dd>Draw marks over the text in horizontal writing mode.</dd> |
fantasai@6993 | 1005 | <dt><dfn title="text-emphasis:under">''under''</dfn></dt> |
fantasai@6658 | 1006 | <dd>Draw marks under the text in horizontal writing mode.</dd> |
fantasai@6658 | 1007 | <dt><dfn title="text-emphasis:right">''right''</dfn></dt> |
fantasai@6658 | 1008 | <dd>Draw marks to the right of the text in vertical writing mode.</dd> |
fantasai@6658 | 1009 | <dt><dfn title="text-emphasis:left">''left''</dfn></dt> |
fantasai@6658 | 1010 | <dd>Draw marks to the left of the text in vertical writing mode.</dd> |
fantasai@6658 | 1011 | </dl> |
fantasai@6658 | 1012 | |
fantasai@6658 | 1013 | <p>Emphasis marks are drawn exactly as if each character was |
fantasai@6658 | 1014 | assigned the mark as its ruby annotation text with the ruby position |
fantasai@6658 | 1015 | given by 'text-emphasis-position' and the ruby alignment as centered. |
fantasai@6658 | 1016 | |
fantasai@6658 | 1017 | <p>The effect of emphasis marks on the line height is the same as for |
fantasai@6658 | 1018 | ruby text.</p> |
fantasai@6658 | 1019 | |
fantasai@6658 | 1020 | <div class="note"> |
fantasai@6658 | 1021 | <p>Note, the preferred position of emphasis marks depends on the |
fantasai@6658 | 1022 | language. In Japanese for example, the preferred position is |
fantasai@6993 | 1023 | ''over right''. In Chinese, on the other hand, the preferred |
fantasai@6993 | 1024 | position is ''under right''. |
fantasai@6658 | 1025 | The informative table below summarizes the preferred |
fantasai@6658 | 1026 | emphasis mark positions for Chinese and Japanese:</p> |
fantasai@6658 | 1027 | |
fantasai@6658 | 1028 | <table class="data"> |
fantasai@6658 | 1029 | <caption>Preferred emphasis mark and ruby position</caption> |
fantasai@6658 | 1030 | <thead> |
fantasai@6658 | 1031 | <tr> |
fantasai@6658 | 1032 | <th scope="col" rowspan=2>Language |
fantasai@7162 | 1033 | <th scope="col" colspan=2>Preferred position |
fantasai@6658 | 1034 | <th scope="col" colspan=2 rowspan=2>Illustration |
fantasai@6658 | 1035 | <tr> |
fantasai@6658 | 1036 | <th>Horizontal |
fantasai@6658 | 1037 | <th>Vertical |
fantasai@6658 | 1038 | </thead> |
fantasai@6658 | 1039 | <tbody> |
fantasai@6658 | 1040 | <tr> |
fantasai@6658 | 1041 | <td scope="row">Japanese |
fantasai@7162 | 1042 | <td rowspan="2">over |
fantasai@7162 | 1043 | <td rowspan="2">right |
fantasai@7162 | 1044 | <td rowspan="2"> |
fantasai@6993 | 1045 | <img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." |
fantasai@6658 | 1046 | title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" |
fantasai@6658 | 1047 | src="text-emphasis-ja.gif" height="28" width="225"> |
fantasai@6658 | 1048 | |
fantasai@7162 | 1049 | <td rowspan="3"> |
fantasai@6658 | 1050 | <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." |
fantasai@6658 | 1051 | title="Emphasis applied on the right of a fragment of Japanese text" |
fantasai@6658 | 1052 | src="text-emphasis-v.gif" height="89" width="34"> |
fantasai@6658 | 1053 | |
fantasai@6658 | 1054 | <tr> |
fantasai@6658 | 1055 | <td scope="row">Mongolian |
fantasai@6658 | 1056 | <tr> |
fantasai@6658 | 1057 | <td scope="row">Chinese |
fantasai@6993 | 1058 | <td>under |
fantasai@6658 | 1059 | <td>right |
fantasai@6658 | 1060 | <td> |
fantasai@6658 | 1061 | <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." |
fantasai@6658 | 1062 | title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" |
fantasai@6658 | 1063 | src="text-emphasis-zh.gif" height="28" width="133"> |
fantasai@6658 | 1064 | </tbody> |
fantasai@6658 | 1065 | </table> |
fantasai@6658 | 1066 | </div> |
fantasai@6658 | 1067 | |
jackalmage@6863 | 1068 | <h2 id="text-shadow-property"> |
jackalmage@6863 | 1069 | Text Shadows: the 'text-shadow' property</h2> |
fantasai@6658 | 1070 | |
fantasai@6658 | 1071 | <table class="propdef"> |
fantasai@6658 | 1072 | <tr> |
fantasai@6658 | 1073 | <th>Name: |
fantasai@6658 | 1074 | <td><dfn>text-shadow</dfn> |
fantasai@6658 | 1075 | <tr> |
fantasai@6658 | 1076 | <th><a href="#values">Value</a>: |
fantasai@6658 | 1077 | <td>none | [ <length>{2,3} && <color>? ]# |
fantasai@6658 | 1078 | <tr> |
fantasai@6658 | 1079 | <th>Initial: |
fantasai@6658 | 1080 | <td>none |
fantasai@6658 | 1081 | <tr> |
fantasai@6658 | 1082 | <th>Applies to: |
fantasai@6658 | 1083 | <td>all elements |
fantasai@6658 | 1084 | <tr> |
fantasai@6658 | 1085 | <th>Inherited: |
fantasai@6658 | 1086 | <td>yes |
fantasai@6658 | 1087 | <tr> |
fantasai@6658 | 1088 | <th>Percentages: |
fantasai@6658 | 1089 | <td>N/A |
fantasai@6658 | 1090 | <tr> |
fantasai@6658 | 1091 | <th>Media: |
fantasai@6658 | 1092 | <td>visual |
fantasai@6658 | 1093 | <tr> |
fantasai@6658 | 1094 | <th>Computed value: |
fantasai@6658 | 1095 | <td>a color plus three absolute <length>s |
dbaron@7399 | 1096 | <tr> |
dbaron@7399 | 1097 | <th>Animatable: |
dbaron@7399 | 1098 | <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-shadow-list">shadow list</a> |
fantasai@6658 | 1099 | </table> |
fantasai@6658 | 1100 | |
fantasai@6658 | 1101 | <p>This property accepts a comma-separated list of shadow effects to |
fantasai@6658 | 1102 | be applied to the text of the element. Values are interpreted as for |
fantasai@6658 | 1103 | <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow'</a> |
fantasai@6658 | 1104 | [[!CSS3BG]]. (But note that spread values are not allowed.) |
fantasai@6658 | 1105 | The shadow is applied to all of the element's text as well as any |
fantasai@6658 | 1106 | text decorations it specifies. |
fantasai@6658 | 1107 | |
fantasai@6658 | 1108 | <p>The shadow effects are applied front-to-back: the first shadow is on |
fantasai@6658 | 1109 | top. The shadows may thus overlay each other, but they never overlay |
fantasai@6658 | 1110 | the text itself. The shadow must be painted at a stack level between |
fantasai@6658 | 1111 | the element's border and/or background, if present, and the elements |
fantasai@6658 | 1112 | text and text decoration. UAs should avoid painting text shadows over |
fantasai@6658 | 1113 | text in adjacent elements belonging to the same stack level and stacking |
fantasai@6658 | 1114 | context. (This may mean that the exact stack level of the shadows depends |
fantasai@6658 | 1115 | on whether the element has a border or background: the exact stacking |
fantasai@6658 | 1116 | behavior of text shadows is thus UA-defined.)</p> |
fantasai@6658 | 1117 | |
fantasai@6658 | 1118 | <p>Unlike 'box-shadow', text shadows are not clipped to the shadowed |
fantasai@6658 | 1119 | shape and may show through if the text is partially-transparent. |
fantasai@6658 | 1120 | Like 'box-shadow', text shadows do not influence layout, and do not |
fantasai@6658 | 1121 | trigger scrolling or increase the size of the scrollable area. |
fantasai@6658 | 1122 | |
fantasai@6658 | 1123 | <p class="note">The painting order of shadows defined here is the opposite |
fantasai@6658 | 1124 | of that defined in the 1998 |
fantasai@6658 | 1125 | <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.</p> |
fantasai@6658 | 1126 | |
fantasai@6658 | 1127 | <p>The ''text-shadow'' property applies to both the |
fantasai@6658 | 1128 | <code>::first-line</code> and <code>::first-letter</code> |
fantasai@6658 | 1129 | pseudo-elements.</p> |
fantasai@6658 | 1130 | |
fantasai@6658 | 1131 | <h2 id="conformance"> |
fantasai@6658 | 1132 | Conformance</h2> |
fantasai@6658 | 1133 | |
fantasai@6658 | 1134 | <h3 id="conventions"> |
fantasai@6658 | 1135 | Document Conventions</h3> |
fantasai@6658 | 1136 | |
fantasai@6658 | 1137 | <p>Conformance requirements are expressed with a combination of |
fantasai@6658 | 1138 | descriptive assertions and RFC 2119 terminology. The key words “MUST”, |
fantasai@6658 | 1139 | “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, |
fantasai@6658 | 1140 | “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this |
fantasai@6658 | 1141 | document are to be interpreted as described in RFC 2119. |
fantasai@6658 | 1142 | However, for readability, these words do not appear in all uppercase |
fantasai@6658 | 1143 | letters in this specification. |
fantasai@6658 | 1144 | |
fantasai@6658 | 1145 | <p>All of the text of this specification is normative except sections |
fantasai@6658 | 1146 | explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> |
fantasai@6658 | 1147 | |
fantasai@6658 | 1148 | <p>Examples in this specification are introduced with the words “for example” |
fantasai@6658 | 1149 | or are set apart from the normative text with <code>class="example"</code>, |
fantasai@6658 | 1150 | like this: |
fantasai@6658 | 1151 | |
fantasai@6658 | 1152 | <div class="example"> |
fantasai@6658 | 1153 | <p>This is an example of an informative example.</p> |
fantasai@6658 | 1154 | </div> |
fantasai@6658 | 1155 | |
fantasai@6658 | 1156 | <p>Informative notes begin with the word “Note” and are set apart from the |
fantasai@6658 | 1157 | normative text with <code>class="note"</code>, like this: |
fantasai@6658 | 1158 | |
fantasai@6658 | 1159 | <p class="note">Note, this is an informative note.</p> |
fantasai@6658 | 1160 | |
fantasai@6658 | 1161 | <h3 id="conformance-classes"> |
fantasai@6658 | 1162 | Conformance Classes</h3> |
fantasai@6658 | 1163 | |
fantasai@6658 | 1164 | <p>Conformance to CSS Text Level 3 |
fantasai@6658 | 1165 | is defined for three conformance classes: |
fantasai@6658 | 1166 | <dl> |
fantasai@6658 | 1167 | <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> |
fantasai@6658 | 1168 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS |
fantasai@6658 | 1169 | style sheet</a>. |
fantasai@6658 | 1170 | <dt><dfn>renderer</dfn></dt> |
fantasai@6658 | 1171 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> |
fantasai@6658 | 1172 | that interprets the semantics of a style sheet and renders |
fantasai@6658 | 1173 | documents that use them. |
fantasai@6658 | 1174 | <dt><dfn id="authoring-tool">authoring tool</dfn></dt> |
fantasai@6658 | 1175 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> |
fantasai@6658 | 1176 | that writes a style sheet. |
fantasai@6658 | 1177 | </dl> |
fantasai@6658 | 1178 | |
fantasai@6658 | 1179 | <p>A style sheet is conformant to CSS Text Level 3 |
fantasai@6658 | 1180 | if all of its declarations that use properties defined in this module |
fantasai@6658 | 1181 | have values that are valid according to the generic CSS grammar and the |
fantasai@6658 | 1182 | individual grammars of each property as given in this module. |
fantasai@6658 | 1183 | |
fantasai@6658 | 1184 | <p>A renderer is conformant to CSS Text Level 3 |
fantasai@6658 | 1185 | if, in addition to interpreting the style sheet as defined by the |
fantasai@6658 | 1186 | appropriate specifications, it supports all the features defined |
fantasai@6658 | 1187 | by CSS Text Level 3 by parsing them correctly |
fantasai@6658 | 1188 | and rendering the document accordingly. However, the inability of a |
fantasai@6658 | 1189 | UA to correctly render a document due to limitations of the device |
fantasai@6658 | 1190 | does not make the UA non-conformant. (For example, a UA is not |
fantasai@6658 | 1191 | required to render color on a monochrome monitor.) |
fantasai@6658 | 1192 | |
fantasai@6658 | 1193 | <p>An authoring tool is conformant to CSS Text Level 3 |
fantasai@6658 | 1194 | if it writes style sheets that are syntactically correct according to the |
fantasai@6658 | 1195 | generic CSS grammar and the individual grammars of each feature in |
fantasai@6658 | 1196 | this module, and meet all other conformance requirements of style sheets |
fantasai@6658 | 1197 | as described in this module. |
fantasai@6658 | 1198 | |
fantasai@6658 | 1199 | <h3 id="partial"> |
fantasai@6658 | 1200 | Partial Implementations</h3> |
fantasai@6658 | 1201 | |
fantasai@6658 | 1202 | <p>So that authors can exploit the forward-compatible parsing rules to |
fantasai@6658 | 1203 | assign fallback values, CSS renderers <strong>must</strong> |
fantasai@6658 | 1204 | treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore |
fantasai@6658 | 1205 | as appropriate</a>) any at-rules, properties, property values, keywords, |
fantasai@6658 | 1206 | and other syntactic constructs for which they have no usable level of |
fantasai@6658 | 1207 | support. In particular, user agents <strong>must not</strong> selectively |
fantasai@6658 | 1208 | ignore unsupported component values and honor supported values in a single |
fantasai@6658 | 1209 | multi-value property declaration: if any value is considered invalid |
fantasai@6658 | 1210 | (as unsupported values must be), CSS requires that the entire declaration |
fantasai@6658 | 1211 | be ignored.</p> |
fantasai@6658 | 1212 | |
fantasai@6658 | 1213 | <h3 id="experimental"> |
fantasai@6658 | 1214 | Experimental Implementations</h3> |
fantasai@6658 | 1215 | |
fantasai@6658 | 1216 | <p>To avoid clashes with future CSS features, the CSS2.1 specification |
fantasai@6658 | 1217 | reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed |
fantasai@6658 | 1218 | syntax</a> for proprietary and experimental extensions to CSS. |
fantasai@6658 | 1219 | |
fantasai@6658 | 1220 | <p>Prior to a specification reaching the Candidate Recommendation stage |
fantasai@6658 | 1221 | in the W3C process, all implementations of a CSS feature are considered |
fantasai@6658 | 1222 | experimental. The CSS Working Group recommends that implementations |
fantasai@6658 | 1223 | use a vendor-prefixed syntax for such features, including those in |
fantasai@6658 | 1224 | W3C Working Drafts. This avoids incompatibilities with future changes |
fantasai@6658 | 1225 | in the draft. |
fantasai@6658 | 1226 | </p> |
fantasai@6658 | 1227 | |
fantasai@6658 | 1228 | <h3 id="testing">Non-Experimental Implementations</h3> |
fantasai@6658 | 1229 | |
fantasai@6658 | 1230 | <p>Once a specification reaches the Candidate Recommendation stage, |
fantasai@6658 | 1231 | non-experimental implementations are possible, and implementors should |
fantasai@6658 | 1232 | release an unprefixed implementation of any CR-level feature they |
fantasai@6658 | 1233 | can demonstrate to be correctly implemented according to spec. |
fantasai@6658 | 1234 | |
fantasai@6658 | 1235 | <p>To establish and maintain the interoperability of CSS across |
fantasai@6658 | 1236 | implementations, the CSS Working Group requests that non-experimental |
fantasai@6658 | 1237 | CSS renderers submit an implementation report (and, if necessary, the |
fantasai@6658 | 1238 | testcases used for that implementation report) to the W3C before |
fantasai@6658 | 1239 | releasing an unprefixed implementation of any CSS features. Testcases |
fantasai@6658 | 1240 | submitted to W3C are subject to review and correction by the CSS |
fantasai@6658 | 1241 | Working Group. |
fantasai@6658 | 1242 | |
fantasai@6658 | 1243 | <p>Further information on submitting testcases and implementation reports |
fantasai@6658 | 1244 | can be found from on the CSS Working Group's website at |
fantasai@6658 | 1245 | <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. |
fantasai@6658 | 1246 | Questions should be directed to the |
fantasai@6658 | 1247 | <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> |
fantasai@6658 | 1248 | mailing list. |
fantasai@6658 | 1249 | |
fantasai@6658 | 1250 | <h3 id="cr-exit-criteria"> |
fantasai@6658 | 1251 | CR Exit Criteria</h3> |
fantasai@6658 | 1252 | |
fantasai@6658 | 1253 | <p> |
fantasai@6658 | 1254 | For this specification to be advanced to Proposed Recommendation, |
fantasai@6658 | 1255 | there must be at least two independent, interoperable implementations |
fantasai@6658 | 1256 | of each feature. Each feature may be implemented by a different set of |
fantasai@6658 | 1257 | products, there is no requirement that all features be implemented by |
fantasai@6658 | 1258 | a single product. For the purposes of this criterion, we define the |
fantasai@6658 | 1259 | following terms: |
fantasai@6658 | 1260 | |
fantasai@6658 | 1261 | <dl> |
fantasai@6658 | 1262 | <dt>independent <dd>each implementation must be developed by a |
fantasai@6658 | 1263 | different party and cannot share, reuse, or derive from code |
fantasai@6658 | 1264 | used by another qualifying implementation. Sections of code that |
fantasai@6658 | 1265 | have no bearing on the implementation of this specification are |
fantasai@6658 | 1266 | exempt from this requirement. |
fantasai@6658 | 1267 | |
fantasai@6658 | 1268 | <dt>interoperable <dd>passing the respective test case(s) in the |
fantasai@6658 | 1269 | official CSS test suite, or, if the implementation is not a Web |
fantasai@6658 | 1270 | browser, an equivalent test. Every relevant test in the test |
fantasai@6658 | 1271 | suite should have an equivalent test created if such a user |
fantasai@6658 | 1272 | agent (UA) is to be used to claim interoperability. In addition |
fantasai@6658 | 1273 | if such a UA is to be used to claim interoperability, then there |
fantasai@6658 | 1274 | must one or more additional UAs which can also pass those |
fantasai@6658 | 1275 | equivalent tests in the same way for the purpose of |
fantasai@6658 | 1276 | interoperability. The equivalent tests must be made publicly |
fantasai@6658 | 1277 | available for the purposes of peer review. |
fantasai@6658 | 1278 | |
fantasai@6658 | 1279 | <dt>implementation <dd>a user agent which: |
fantasai@6658 | 1280 | |
fantasai@6658 | 1281 | <ol class=inline> |
fantasai@6658 | 1282 | <li>implements the specification. |
fantasai@6658 | 1283 | |
fantasai@6658 | 1284 | <li>is available to the general public. The implementation may |
fantasai@6658 | 1285 | be a shipping product or other publicly available version |
fantasai@6658 | 1286 | (i.e., beta version, preview release, or “nightly build”). |
fantasai@6658 | 1287 | Non-shipping product releases must have implemented the |
fantasai@6658 | 1288 | feature(s) for a period of at least one month in order to |
fantasai@6658 | 1289 | demonstrate stability. |
fantasai@6658 | 1290 | |
fantasai@6658 | 1291 | <li>is not experimental (i.e., a version specifically designed |
fantasai@6658 | 1292 | to pass the test suite and is not intended for normal usage |
fantasai@6658 | 1293 | going forward). |
fantasai@6658 | 1294 | </ol> |
fantasai@6658 | 1295 | </dl> |
fantasai@6658 | 1296 | |
fantasai@6658 | 1297 | <p>The specification will remain Candidate Recommendation for at least |
fantasai@6658 | 1298 | six months. |
fantasai@6658 | 1299 | |
fantasai@6658 | 1300 | <h2 class="no-num" id="acknowledgements"> |
fantasai@6658 | 1301 | Appendix A: Acknowledgements</h2> |
fantasai@6658 | 1302 | |
fantasai@6658 | 1303 | <p>This specification would not have been possible without the help from: |
fantasai@6658 | 1304 | Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, |
fantasai@6658 | 1305 | Martin Dürst, |
fantasai@6658 | 1306 | Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian |
fantasai@6658 | 1307 | Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, |
fantasai@6658 | 1308 | Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, |
fantasai@6658 | 1309 | Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki, |
fantasai@6658 | 1310 | Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki, |
fantasai@6658 | 1311 | Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe |
fantasai@6658 | 1312 | and Steve Zilles.</p> |
fantasai@6658 | 1313 | |
fantasai@6658 | 1314 | <h2 class="no-num">Appendix B: References</h2> |
fantasai@6658 | 1315 | |
fantasai@6658 | 1316 | <h3 class="no-num" id="normative-ref">Normative references</h3> |
fantasai@6658 | 1317 | <!--normative--> |
fantasai@6658 | 1318 | |
fantasai@6658 | 1319 | <h3 class="no-num" id="informative-ref">Informative references</h3> |
fantasai@6658 | 1320 | <!--informative--> |
fantasai@6658 | 1321 | |
fantasai@6658 | 1322 | <h2 class="no-num" id="changes">Appendix C: |
fantasai@6658 | 1323 | Changes</h2> |
jackalmage@6858 | 1324 | |
fantasai@7011 | 1325 | <h3 class="no-num" id="recent-changes"> |
fantasai@7011 | 1326 | Changes since the <a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">May |
fantasai@7011 | 1327 | 2012 CSS Writing Modes Module Level 3 <abbr title="Working Draft">WD</abbr></a></h3> |
jackalmage@6858 | 1328 | |
fantasai@7011 | 1329 | <p>Significant changes include:</p> |
fantasai@7011 | 1330 | |
fantasai@7011 | 1331 | <ul> |
fantasai@7011 | 1332 | <li>Changed line decorations to not skip margins/padding/borders of descendents' inline boxes. |
fantasai@7011 | 1333 | <li>Clarified and corrected the definitions for <a href="#line-decoration">line decoration propagation</a> |
fantasai@7012 | 1334 | <li>Changed the definitions for averaging <a href="#line-position">line decoration positions</a> |
fantasai@7011 | 1335 | to better accommodate changes in font size. |
fantasai@7011 | 1336 | <li>Changed ''above'' and ''below'' values of 'text-emphasis-position' and 'text-underline-position' |
fantasai@7011 | 1337 | to ''over'' and ''under'' to match terminology in 'text-decoration-line'. |
fantasai@7011 | 1338 | <li>Define interaction of 'text-shadow' and 'text-decoration'. |
fantasai@7011 | 1339 | </ul> |
jackalmage@6858 | 1340 | |
jackalmage@6858 | 1341 | |
jackalmage@6858 | 1342 | <h2 class="no-num" id="default-stylesheet"> |
jackalmage@6858 | 1343 | Appendix D: Default UA Stylesheet</h2> |
jackalmage@6858 | 1344 | |
jackalmage@6858 | 1345 | <p> |
jackalmage@6858 | 1346 | This appendix is informative, |
jackalmage@6858 | 1347 | and is to help UA developers to implement default stylesheet, |
jackalmage@6858 | 1348 | but UA developers are free to ignore or change. |
jackalmage@6858 | 1349 | |
jackalmage@6858 | 1350 | <div class="example"> |
jackalmage@6858 | 1351 | <pre><code class="css"> |
jackalmage@6859 | 1352 | <!-- -->s, strike, del { |
jackalmage@6859 | 1353 | <!-- --> text-decoration: line-through; |
jackalmage@6859 | 1354 | <!-- -->} |
jackalmage@6859 | 1355 | <!-- --> |
jackalmage@6859 | 1356 | <!-- -->u, ins, :link, :visited { |
jackalmage@6859 | 1357 | <!-- --> text-decoration: underline; |
jackalmage@6859 | 1358 | <!-- -->} |
jackalmage@6859 | 1359 | <!-- --> |
jackalmage@6859 | 1360 | <!-- -->abbr[title], acronym[title] { |
jackalmage@6859 | 1361 | <!-- --> text-decoration: dotted underline; |
jackalmage@6859 | 1362 | <!-- -->} |
jackalmage@6859 | 1363 | <!-- --> |
jackalmage@6858 | 1364 | <!-- -->/* disable inheritance of text-emphasis marks to ruby text: |
jackalmage@6858 | 1365 | <!-- --> emphasis marks should only apply to base text */ |
jackalmage@6858 | 1366 | <!-- -->rt { text-emphasis: none; } |
jackalmage@6858 | 1367 | <!-- --> |
jackalmage@6858 | 1368 | <!-- -->:root:lang(zh), [lang|=zh] { |
fantasai@6993 | 1369 | <!-- -->/* default emphasis mark position is 'under right' for Chinese */ |
fantasai@6993 | 1370 | <!-- --> text-emphasis-position: under right; |
jackalmage@6858 | 1371 | <!-- -->} |
jackalmage@6858 | 1372 | <!-- --> |
jackalmage@6858 | 1373 | <!-- -->:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { |
fantasai@6993 | 1374 | <!-- -->/* default underline position is 'under right' for Japanese and Korean */ |
fantasai@6993 | 1375 | <!-- --> text-underline-position: under right; |
jackalmage@6858 | 1376 | <!-- -->} |
jackalmage@6858 | 1377 | <!-- --> |
jackalmage@6858 | 1378 | <!-- -->:root:lang(zh), [lang|=zh] { |
fantasai@6993 | 1379 | <!-- -->/* default underline position is 'under left' for Chinese */ |
fantasai@6993 | 1380 | <!-- --> text-underline-position: under left; |
jackalmage@6858 | 1381 | <!-- -->} |
jackalmage@6858 | 1382 | <!-- --> |
jackalmage@6858 | 1383 | <!-- -->blink { |
jackalmage@6858 | 1384 | <!-- --> text-decoration-line: blink; |
jackalmage@6858 | 1385 | <!-- -->} |
jackalmage@6858 | 1386 | </code></pre> |
jackalmage@6858 | 1387 | </div> |
jackalmage@6858 | 1388 | |
jackalmage@6858 | 1389 | <p class="issue"> |
jackalmage@6858 | 1390 | If you find any issues, recommendations to add, or corrections, |
jackalmage@6858 | 1391 | please send the information to <a href="mailto:www-style@w3.org">www-style@w3.org</a> |
fantasai@7014 | 1392 | with <kbd>[[SHORTNAME]]</kbd> in the subject line. |
jackalmage@6858 | 1393 | |
jackalmage@6858 | 1394 | <div class='example'> |
jackalmage@6858 | 1395 | <p> |
jackalmage@6858 | 1396 | While ''text-decoration-line: blink'' can't be fully reproduced with other existing properties, |
jackalmage@6858 | 1397 | authors can achieve a very similar effect with the following CSS: |
jackalmage@6858 | 1398 | |
jackalmage@6858 | 1399 | <pre> |
jackalmage@6858 | 1400 | <!-- -->@keyframes blink { |
jackalmage@6858 | 1401 | <!-- --> 0% { |
jackalmage@6858 | 1402 | <!-- --> visibility: hidden; |
jackalmage@6858 | 1403 | <!-- --> animation-timing-function: step-end; |
jackalmage@6858 | 1404 | <!-- --> } |
jackalmage@6858 | 1405 | <!-- --> 25%, 100% { |
jackalmage@6858 | 1406 | <!-- --> visibility: visible; |
jackalmage@6858 | 1407 | <!-- --> } |
jackalmage@6858 | 1408 | <!-- -->} |
jackalmage@6858 | 1409 | <!-- -->blink { |
jackalmage@6858 | 1410 | <!-- --> animation: blink 1s infinite; |
jackalmage@6858 | 1411 | <!-- -->}</pre> |
fantasai@6993 | 1412 | </div> |