drafts: css-text-decor-3/Overview.html@45007c88f5c7

[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.

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

     3 <html lang=en>

     4  <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">

     5   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>

     6   <title>CSS Text Decoration Module Level 3</title>

     8   <link href="http://purl.org/dc/terms/" rel=schema.dcterms>

     9   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"

    10    rel=dcterms.rights>

    11   <meta content="CSS Text Decoration Module Level 3" name=dcterms.title>

    12   <meta content=text name=dcterms.type>

    13   <meta content=2013-02-08 name=dcterms.issued>

    14   <meta content="Elika J. Etemad" name=dcterms.creator>

    15   <meta content="Koji Ishii" name=dcterms.creator>

    16   <meta content=W3C name=dcterms.publisher>

    17   <meta content="http://www.w3.org/TR/2013/ED-css-text-decor-3-20130208/"

    18    name=dcterms.identifier>

    19   <link href="#contents" rel=contents><!--<link rel=index href="#index">-->

    21   <link href="../default.css" rel=stylesheet type="text/css">

    22   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet

    23    type="text/css">

    25  <body>

    26   <div class=head> <!--begin-logo-->

    27    <p><a href="http://www.w3.org/"><img alt=W3C height=48

    28     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

    30    <h1>CSS Text Decoration Module Level 3</h1>

    32    <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 February

    33     2013</h2>

    35    <dl>

    36     <dt>This version:</dt>

    37     <!--

    38     <dd><a href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130208/">http://www.w3.org/TR/2013/WD-css-text-decor-3-20130208/</a></dd>

    39   -->

    41     <dd><a

    42      href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a>

    44     <dt>Latest version:

    46     <dd><a

    47      href="http://www.w3.org/TR/css-text-decor-3/">http://www.w3.org/TR/css-text-decor-3/</a>

    49     <dt>Latest editor's draft:

    51     <dd><a

    52      href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a>

    54     <dt>Previous version:

    56     <dd><a

    57      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>

    59     <dt>Issues List:

    61     <dd><a

    62      href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a>

    64     <dt>Discussion:

    66     <dd><a

    67      href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>

    68      with subject line “<kbd>[text-decor-3] <var>… message topic

    69      …</var></kbd>”

    71     <dt>Editors:

    73     <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>

    74      (Mozilla)

    76     <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a>

    77      (Rakuten, Inc.)

    78    </dl>

    79    <!--begin-copyright-->

    80    <p class=copyright><a

    81     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"

    82     rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr

    83     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a

    84     href="http://www.csail.mit.edu/"><abbr

    85     title="Massachusetts Institute of Technology">MIT</abbr></a>, <a

    86     href="http://www.ercim.eu/"><abbr

    87     title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,

    88     <a href="http://www.keio.ac.jp/">Keio</a>, <a

    89     href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a

    90     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,

    91     <a

    92     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>

    93     and <a

    94     href="http://www.w3.org/Consortium/Legal/copyright-documents">document

    95     use</a> rules apply.</p>

    96    <!--end-copyright-->

    97    <hr title="Separator for header">

    98   </div>

   100   <h2 class="no-num no-toc" id=abstract>Abstract</h2>

   102   <p>This module contains the features of CSS relating to text decoration,

   103    such as underlines, text shadows, and emphasis marks. <a

   104    href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the

   105    rendering of structured documents (such as HTML and XML) on screen, on

   106    paper, in speech, etc.

   108   <h2 class="no-num no-toc" id=status>Status of this document</h2>

   110   <p><em>This section describes the status of this document at the time of

   111    its publication. Other documents may supersede this document. A list of

   112    current W3C publications and the latest revision of this technical report

   113    can be found in the <a href="http://www.w3.org/TR/">W3C technical reports

   114    index at http://www.w3.org/TR/.</a></em>

   116   <p>Publication as a Working Draft does not imply endorsement by the W3C

   117    Membership. This is a draft document and may be updated, replaced or

   118    obsoleted by other documents at any time. It is inappropriate to cite this

   119    document as other than work in progress.

   121   <p>This CSS module has been produced as a combined effort of the <a

   122    href="http://www.w3.org/International/Activity">W3C Internationalization

   123    Activity</a>, and the <a href="http://www.w3.org/Style/Activity">Style

   124    Activity</a> and is maintained by the <a

   125    href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also

   126    includes contributions made by participants in the <a

   127    href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a

   128    href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>).

   130   <p>This document was produced by a group operating under the <a

   131    href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February

   132    2004 W3C Patent Policy</a>. W3C maintains a <a

   133    href="http://www.w3.org/2004/01/pp-impl/32061/status"

   134    rel=disclosure>public list of any patent disclosures</a> made in

   135    connection with the deliverables of the group; that page also includes

   136    instructions for disclosing a patent. An individual who has actual

   137    knowledge of a patent which the individual believes contains <a

   138    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential

   139    Claim(s)</a> must disclose the information in accordance with <a

   140    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section

   141    6 of the W3C Patent Policy</a>.

   143   <p><strong>Feedback on this draft should be posted to the (<a

   144    href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public

   145    mailing list <a

   146    href="mailto:www-style@w3.org">www-style@w3.org</a></strong> (see <a

   147    href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with

   148    <kbd>[text-decor-3]</kbd> in the subject line.</strong> You are strongly

   149    encouraged to complain if you see something stupid in this draft. The

   150    editors will do their best to respond to all feedback.

   152   <p>The following features are at risk and may be cut from the spec during

   153    its CR period if there are no (correct) implementations:

   155   <ul>

   156    <li>the ‘<a href="#text-decoration-skip"><code

   157     class=property>text-decoration-skip</code></a>’ property / ‘<code

   158     class=css>ink</code>’ value

   160    <li>the <a href="#line-position">line positioning rules</a>

   161   </ul>

   163   <p>This is a <strong>Last Call Working Draft</strong>. The deadline for

   164    comments is <strong>31 January 2013</strong>.

   166   <h2 class="no-num no-toc" id=contents> Table of Contents</h2>

   167   <!--begin-toc-->

   169   <ul class=toc>

   170    <li><a href="#intro"><span class=secno>1. </span> Introduction</a>

   171     <ul class=toc>

   172      <li><a href="#placement"><span class=secno>1.1. </span> Module

   173       Interactions</a>

   175      <li><a href="#values"><span class=secno>1.2. </span> Values</a>

   177      <li><a href="#terms"><span class=secno>1.3. </span>Terminology</a>

   178     </ul>

   180    <li><a href="#line-decoration"><span class=secno>2. </span> Line

   181     Decoration: Underline, Overline, and Strike-Through</a>

   182     <ul class=toc>

   183      <li><a href="#text-decoration-line-property"><span class=secno>2.1.

   184       </span> Text Decoration Lines: the ‘<code

   185       class=property>text-decoration-line</code>’ property</a>

   187      <li><a href="#text-decoration-color-property"><span class=secno>2.2.

   188       </span> Text Decoration Color: the ‘<code

   189       class=property>text-decoration-color</code>’ property</a>

   191      <li><a href="#text-decoration-style-property"><span class=secno>2.3.

   192       </span> Text Decoration Style: the ‘<code

   193       class=property>text-decoration-style</code>’ property</a>

   195      <li><a href="#text-decoration-property"><span class=secno>2.4. </span>

   196       Text Decoration Shorthand: the ‘<code

   197       class=property>text-decoration</code>’ property</a>

   199      <li><a href="#text-decoration-skip-property"><span class=secno>2.5.

   200       </span> Text Decoration Line Continuity: the ‘<code

   201       class=property>text-decoration-skip</code>’ property</a>

   203      <li><a href="#text-underline-position-property"><span class=secno>2.6.

   204       </span> Text Underline Position: the ‘<code

   205       class=property>text-underline-position</code>’ property</a>

   207      <li><a href="#line-position"><span class=secno>2.7. </span> Determining

   208       the Position and Thickness of Line Decorations</a>

   209     </ul>

   211    <li><a href="#emphasis-marks"><span class=secno>3. </span> Emphasis

   212     Marks</a>

   213     <ul class=toc>

   214      <li><a href="#text-emphasis-style-property"><span class=secno>3.1.

   215       </span> Emphasis Mark Style: the ‘<code

   216       class=property>text-emphasis-style</code>’ property</a>

   218      <li><a href="#text-emphasis-color-property"><span class=secno>3.2.

   219       </span> Emphasis Mark Color: the ‘<code

   220       class=property>text-emphasis-color</code>’ property</a>

   222      <li><a href="#text-emphasis-property"><span class=secno>3.3. </span>

   223       Emphasis Mark Shorthand: the ‘<code

   224       class=property>text-emphasis</code>’ property</a>

   226      <li><a href="#text-emphasis-position-property"><span class=secno>3.4.

   227       </span> Emphasis Mark Position: the ‘<code

   228       class=property>text-emphasis-position</code>’ property</a>

   229     </ul>

   231    <li><a href="#text-shadow-property"><span class=secno>4. </span> Text

   232     Shadows: the ‘<code class=property>text-shadow</code>’ property</a>

   234    <li><a href="#conformance"><span class=secno>5. </span> Conformance</a>

   235     <ul class=toc>

   236      <li><a href="#conventions"><span class=secno>5.1. </span> Document

   237       Conventions</a>

   239      <li><a href="#conformance-classes"><span class=secno>5.2. </span>

   240       Conformance Classes</a>

   242      <li><a href="#partial"><span class=secno>5.3. </span> Partial

   243       Implementations</a>

   245      <li><a href="#experimental"><span class=secno>5.4. </span> Experimental

   246       Implementations</a>

   248      <li><a href="#testing"><span class=secno>5.5. </span>Non-Experimental

   249       Implementations</a>

   251      <li><a href="#cr-exit-criteria"><span class=secno>5.6. </span> CR Exit

   252       Criteria</a>

   253     </ul>

   255    <li class=no-num><a href="#acknowledgements"> Appendix A:

   256     Acknowledgements</a>

   258    <li class=no-num><a href="#appendix-b-references">Appendix B:

   259     References</a>

   260     <ul class=toc>

   261      <li class=no-num><a href="#normative-ref">Normative references</a>

   263      <li class=no-num><a href="#informative-ref">Informative references</a>

   264     </ul>

   266    <li class=no-num><a href="#changes">Appendix C: Changes</a>

   267     <ul class=toc>

   268      <li class=no-num><a href="#recent-changes"> Changes since the May 2012

   269       CSS Writing Modes Module Level 3 <abbr

   270       title="Working Draft">WD</abbr></a>

   271     </ul>

   273    <li class=no-num><a href="#default-stylesheet"> Appendix D: Default UA

   274     Stylesheet</a>

   275   </ul>

   276   <!--end-toc-->

   278   <h2 id=intro><span class=secno>1. </span> Introduction</h2>

   280   <p><em>This subsection is non-normative.</em>

   282   <p>This module covers text decoration, i.e. decorating the glyphs of the

   283    text once typeset according to font and typographic rules. (See <a

   284    href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> and <a

   285    href="#CSS3-FONTS" rel=biblioentry>[CSS3-FONTS]<!--{{CSS3-FONTS}}--></a>.)

   286    Such features are traditionally used not only for purely decorative

   287    purposes, but also in some cases to show emphasis, for honorifics, and to

   288    indicate editorial changes such as insertions, deletions, and

   289    misspellings.

   291   <p>CSS Levels 1 and 2 only defined very basic <a

   292    href="#line-decoration">line decorations</a> (underlines, overlines, and

   293    strike-throughs) appropriate to Western typographical traditions. Level 3

   294    of this module adds the ability to change the color, style, position, and

   295    continuity of these decorations, and also introduces <a

   296    href="#emphasis-marks">emphasis marks</a> (traditionally used in East

   297    Asian typography), and <a href="#text-shadow-property">shadows</a> (which

   298    were proposed then deferred from Level 2).

   300   <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>

   302   <p>This module replaces and extends the text-decorating features defined in

   303    <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 16.

   305   <h3 id=values><span class=secno>1.2. </span> Values</h3>

   307   <p>This specification follows the <a

   308    href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property

   309    definition conventions</a> from <a href="#CSS21"

   310    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in

   311    this specification are defined in CSS Level 2 Revision 1 <a

   312    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS

   313    modules may expand the definitions of these value types: for example <a

   314    href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,

   315    when combined with this module, expands the definition of the

   316    &lt;color&gt; value type as used in this specification.

   318   <p>In addition to the property-specific values listed in their definitions,

   319    all properties defined in this specification also accept the <a

   320    href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>

   321    keyword as their property value. For readability it has not been repeated

   322    explicitly.

   324   <h3 id=terms><span class=secno>1.3. </span>Terminology</h3>

   326   <p>The terms <a

   327    href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn

   328    id=character>character</dfn></a>, <a

   329    href="http://www.w3.org/TR/css3-text/#letter"><dfn

   330    id=letter>letter</dfn></a>, and <a

   331    href="http://www.w3.org/TR/css3-text/#content-language"><dfn

   332    id=content-language>content language</dfn></a> as used in this

   333    specification are defined in <a href="#CSS3TEXT"

   334    rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>. Other terminology and

   335    concepts used in this specification are defined in <a href="#CSS21"

   336    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a

   337    href="#CSS3-WRITING-MODES"

   338    rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>.

   340   <h2 id=line-decoration><span class=secno>2. </span> Line Decoration:

   341    Underline, Overline, and Strike-Through</h2>

   343   <p> The following properties describe line decorations that are added to

   344    the content of an element. When specified on or propagated to an inline

   345    box, that box becomes a <dfn id=decorating-box>decorating box</dfn> for

   346    that decoration, applying the decoration to all its fragments. The

   347    decoration is then further propagated to any in-flow block-level boxes

   348    that split the inline (see <a

   349    href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1

   350    section 9.2.1.1</a>). When specified on or propagated to a block container

   351    that establishes an inline formatting context, the decorations are

   352    propagated to an anonymous inline box that wraps all the in-flow

   353    inline-level children of the block container. When specified on or

   354    propagated to a ruby box, the decorations are propagated only to the ruby

   355    base. For all other box types, the decorations are propagated to all

   356    in-flow children.

   358   <p class=note> Note that text decorations are not propagated to any

   359    out-of-flow descendants, nor to the contents of atomic inline-level

   360    descendants such as inline blocks and inline tables. They are also not

   361    propagated to inline children of inline boxes, although the decoration is

   362    <em>applied</em> to such boxes.

   364   <p> By default underlines, overlines, and line-throughs are applied only to

   365    non-replaced inline boxes, and are drawn over all text (including white

   366    space, letter spacing, and word spacing). Atomic inlines, such as images,

   367    are not decorated. The ‘<a href="#text-decoration-skip"><code

   368    class=property>text-decoration-skip</code></a>’ property can be used to

   369    modify this behavior, for example allowing atomic inlines to be underlined

   370    or requiring that white space be skipped. Margins, borders, and padding of

   371    the <a href="#decorating-box"><i>decorating box</i></a> are always

   372    skipped.

   374   <p>Relatively positioning a descendant moves all text decorations applied

   375    to it along with the descendant's text; it does not affect calculation of

   376    the decoration's initial position on that line. The ‘<code

   377    class=property>visibility</code>’ property, ‘<a

   378    href="#text-shadow"><code class=property>text-shadow</code></a>’,

   379    filters, and other graphical transformations likewise affect text

   380    decorations as part of the text they're drawn on, even if the decorations

   381    were specified on an ancestor box.

   383   <div class=example>

   384    <p>In the following style sheet and document fragment:

   386    <pre>

   387 <!-- -->   blockquote { text-decoration: underline; color: blue; }

   388 <!-- -->   em { display: block; }

   389 <!-- -->   cite { color: fuchsia; }</pre>

   391    <pre>

   392 <!-- -->   &lt;blockquote&gt;

   393 <!-- -->    &lt;p&gt;

   394 <!-- -->     &lt;span&gt;

   395 <!-- -->      Help, help!

   396 <!-- -->      &lt;em&gt; I am under a hat! &lt;/em&gt;

   397 <!-- -->

   398 <!-- -->      &lt;cite&gt; —GwieF &lt;/cite&gt;

   399 <!-- -->     &lt;/span&gt;

   400 <!-- -->    &lt;/p&gt;

   401 <!-- -->   &lt;/blockquote&gt;</pre>

   403    <p>...the underlining for the blockquote element is propagated to an

   404     anonymous inline box that surrounds the span element, causing the text

   405     "Help, help!" to be blue, with the blue underlining from the anonymous

   406     inline underneath it, the color being taken from the blockquote element.

   407     The <code>&lt;em&gt;text&lt;/em&gt;</code> in the em block is also

   408     underlined, as it is in an in-flow block to which the underline is

   409     propagated. The final line of text is fuchsia, but the underline

   410     underneath it is still the blue underline from the anonymous inline

   411     element.

   413    <p><img alt="Sample rendering of the above underline example"

   414     src=underline-example.png>

   416    <p>This diagram shows the boxes involved in the example above. The rounded

   417     aqua line represents the anonymous inline element wrapping the inline

   418     contents of the paragraph element, the rounded blue line represents the

   419     span element, and the orange lines represent the blocks.

   420   </div>

   422   <h3 id=text-decoration-line-property><span class=secno>2.1. </span> Text

   423    Decoration Lines: the ‘<a href="#text-decoration-line"><code

   424    class=property>text-decoration-line</code></a>’ property</h3>

   426   <table class=propdef>

   427    <tbody>

   428     <tr>

   429      <th>Name:

   431      <td><dfn id=text-decoration-line>text-decoration-line</dfn>

   433     <tr>

   434      <th><a href="#values">Value</a>:

   436      <td>none | [ underline || overline || line-through || blink ]

   438     <tr>

   439      <th>Initial:

   441      <td>none

   443     <tr>

   444      <th>Applies to:

   446      <td>all elements

   448     <tr>

   449      <th>Inherited:

   451      <td>no (but see prose)

   453     <tr>

   454      <th>Percentages:

   456      <td>N/A

   458     <tr>

   459      <th>Media:

   461      <td>visual

   463     <tr>

   464      <th>Computed value:

   466      <td>as specified

   468     <tr>

   469      <th>Animatable:

   471      <td>no

   472   </table>

   474   <p>Specifies what line decorations, if any, are added to the element.

   475    Values have the following meanings:

   477   <dl>

   478    <dt><dfn id=none title="text-decoration-line:none">‘<code

   479     class=css>none</code>’</dfn>

   481    <dd>Neither produces nor inhibits text decoration.

   483    <dt><dfn id=underline>‘<code class=css>underline</code>’</dfn>

   485    <dd>Each line of text is underlined.

   487    <dt><dfn id=overline>‘<code class=css>overline</code>’</dfn>

   489    <dd>Each line of text has a line over it (i.e. on the opposite side from

   490     an underline).

   492    <dt><dfn id=line-through>‘<code class=css>line-through</code>’</dfn>

   494    <dd>Each line of text has a line through the middle.

   496    <dt><dfn id=blink>‘<code class=css>blink</code>’</dfn>

   498    <dd> The text blinks (alternates between visible and invisible).

   499     Conforming user agents may simply not blink the text. Note that not

   500     blinking the text is one technique to satisfy <a

   501     href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint

   502     3.3 of WAI-UAAG</a>. This value is <strong>deprecated</strong> in favor

   503     of Animations <a href="#CSS3-ANIMATIONS"

   504     rel=biblioentry>[CSS3-ANIMATIONS]<!--{{CSS3-ANIMATIONS}}--></a>.

   505   </dl>

   507   <h3 id=text-decoration-color-property><span class=secno>2.2. </span> Text

   508    Decoration Color: the ‘<a href="#text-decoration-color"><code

   509    class=property>text-decoration-color</code></a>’ property</h3>

   511   <table class=propdef>

   512    <tbody>

   513     <tr>

   514      <th>Name:

   516      <td><dfn id=text-decoration-color>text-decoration-color</dfn>

   518     <tr>

   519      <th><a href="#values">Value</a>:

   521      <td><a href="http://www.w3.org/TR/css3-color/#color0"><span

   522       class=value-inst-color>&lt;color&gt;</span></a>

   524     <tr>

   525      <th>Initial:

   527      <td><a

   528       href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>

   530     <tr>

   531      <th>Applies to:

   533      <td>all elements

   535     <tr>

   536      <th>Inherited:

   538      <td>no

   540     <tr>

   541      <th>Percentages:

   543      <td>N/A

   545     <tr>

   546      <th>Media:

   548      <td>visual

   550     <tr>

   551      <th>Computed value:

   553      <td>the computed color

   555     <tr>

   556      <th>Animatable:

   558      <td>as <a

   559       href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a>

   560   </table>

   562   <p>This property specifies the color of text decoration (underlines

   563    overlines, and line-throughs) set on the element with ‘<a

   564    href="#text-decoration-line"><code

   565    class=property>text-decoration-line</code></a>’.

   567   <p> The color of text decorations must remain the same on all decorations

   568    originating from a given element, even if descendant boxes have different

   569    specified colors.

   571   <h3 id=text-decoration-style-property><span class=secno>2.3. </span> Text

   572    Decoration Style: the ‘<a href="#text-decoration-style"><code

   573    class=property>text-decoration-style</code></a>’ property</h3>

   575   <table class=propdef>

   576    <tbody>

   577     <tr>

   578      <th>Name:

   580      <td><dfn id=text-decoration-style>text-decoration-style</dfn>

   582     <tr>

   583      <th><a href="#values">Value</a>:

   585      <td>solid | double | dotted | dashed | wavy

   587     <tr>

   588      <th>Initial:

   590      <td>solid

   592     <tr>

   593      <th>Applies to:

   595      <td>all elements

   597     <tr>

   598      <th>Inherited:

   600      <td>no

   602     <tr>

   603      <th>Percentages:

   605      <td>N/A

   607     <tr>

   608      <th>Media:

   610      <td>visual

   612     <tr>

   613      <th>Computed value:

   615      <td>as specified

   617     <tr>

   618      <th>Animatable:

   620      <td>no

   621   </table>

   623   <p>This property specifies the style of the line(s) drawn for text

   624    decoration specified on the element. Values have the same meaning as for

   625    the <a

   626    href="http://www.w3.org/TR/css3-background/#the-border-style">border-style

   627    properties</a> <a href="#CSS3BG"

   628    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. ‘<code

   629    class=css>wavy</code>’ indicates a wavy line.

   631   <p> The style of text decorations must remain the same on all decorations

   632    originating from a given element, even if descendant boxes have different

   633    specified styles.

   635   <h3 id=text-decoration-property><span class=secno>2.4. </span> Text

   636    Decoration Shorthand: the ‘<a href="#text-decoration"><code

   637    class=property>text-decoration</code></a>’ property</h3>

   639   <table class=propdef>

   640    <tbody>

   641     <tr>

   642      <th>Name:

   644      <td><dfn id=text-decoration>text-decoration</dfn>

   646     <tr>

   647      <th><a href="#values">Value</a>:

   649      <td><var><a

   650       href="#text-decoration-line">&lt;text-decoration-line&gt;</a></var> ||

   651       <var><a

   652       href="#text-decoration-style">&lt;text-decoration-style&gt;</a></var>

   653       || <var><a

   654       href="#text-decoration-color">&lt;text-decoration-color&gt;</a></var>

   656     <tr>

   657      <th>Initial:

   659      <td>none

   661     <tr>

   662      <th>Applies to:

   664      <td>all elements

   666     <tr>

   667      <th>Inherited:

   669      <td>no

   671     <tr>

   672      <th>Percentages:

   674      <td>N/A

   676     <tr>

   677      <th>Media:

   679      <td>visual

   681     <tr>

   682      <th>Computed value:

   684      <td>see individual properties

   686     <tr>

   687      <th>Animatable:

   689      <td>see individual properties

   690   </table>

   692   <p>This property is a shorthand for setting ‘<a

   693    href="#text-decoration-line"><code

   694    class=property>text-decoration-line</code></a>’, ‘<a

   695    href="#text-decoration-color"><code

   696    class=property>text-decoration-color</code></a>’, and ‘<a

   697    href="#text-decoration-style"><code

   698    class=property>text-decoration-style</code></a>’ in one declaration.

   699    Omitted values are set to their initial values. A ‘<a

   700    href="#text-decoration"><code class=property>text-decoration</code></a>’

   701    declaration that omits both the ‘<a href="#text-decoration-color"><code

   702    class=property>text-decoration-color</code></a>’ and ‘<a

   703    href="#text-decoration-style"><code

   704    class=property>text-decoration-style</code></a>’ values is

   705    backwards-compatible with CSS Levels 1 and 2.

   707   <div class=example>

   708    <p>The following example underlines unvisited links with a solid blue

   709     underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.

   711    <pre><code class=css>

   712 <!-- -->:link {

   713 <!-- -->    color: blue;

   714 <!-- -->    text-decoration: underline;

   715 <!-- -->    text-decoration: navy dotted underline; /* <a

   716     href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */

   717 <!-- -->}</code></pre>

   718   </div>

   720   <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text

   721    Decoration Line Continuity: the ‘<a href="#text-decoration-skip"><code

   722    class=property>text-decoration-skip</code></a>’ property</h3>

   724   <table class=propdef>

   725    <tbody>

   726     <tr>

   727      <th>Name:

   729      <td><dfn id=text-decoration-skip>text-decoration-skip</dfn>

   731     <tr>

   732      <th><a href="#values">Value</a>:

   734      <td>none | [ objects || spaces || ink || edges || box-decoration ]

   736     <tr>

   737      <th>Initial:

   739      <td>objects

   741     <tr>

   742      <th>Applies to:

   744      <td>all elements

   746     <tr>

   747      <th>Inherited:

   749      <td>yes

   751     <tr>

   752      <th>Percentages:

   754      <td>N/A

   756     <tr>

   757      <th>Media:

   759      <td>visual

   761     <tr>

   762      <th>Computed value:

   764      <td>as specified

   766     <tr>

   767      <th>Animatable:

   769      <td>no

   770   </table>

   772   <p>This property specifies what parts of the element's content any text

   773    decoration affecting the element must skip over. It controls all text

   774    decoration lines drawn by the element and also any text decoration lines

   775    drawn by its ancestors. Values have the following meanings:

   777   <dl>

   778    <dt><dfn id=none0 title="text-decoration-skip:none">‘<code

   779     class=css>none</code>’</dfn>

   781    <dd>Skip nothing: text-decoration is drawn for all text content and for

   782     inline replaced elements.

   784    <dt><dfn id=objects title="text-decoration-skip:objects">‘<code

   785     class=css>objects</code>’</dfn>

   787    <dd>Skip this element if it is an atomic inline (such as an image or

   788     inline-block).

   790    <dt><dfn id=spaces title="text-decoration-skip:spaces">‘<code

   791     class=css>spaces</code>’</dfn>

   793    <dd>Skip spaces: this includes space (U+0020) and tab (U+0009), as well as

   794     nbsp (U+00A0), ideographic space (U+3000), all fixed width spaces (such

   795     as U+2000–U+200A, U+202F and U+205F), plus any adjacent letter-spacing

   796     or word-spacing <a href="#CSS3TEXT"

   797     rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>.

   798     <p class=issue>Should this include visible characters like Ethiopic Word

   799      Space?

   801    <dt><dfn id=ink title="text-decoration-skip:ink">‘<code

   802     class=css>ink</code>’</dfn>

   804    <dd>Skip over where glyphs are drawn: interrupt the decoration line to let

   805     text show through where the text decoration would otherwise cross over a

   806     glyph. The UA may also skip a small distance to either side of the glyph

   807     outline.

   809    <dt><dfn id=edges title="text-decoration-skip:edges">‘<code

   810     class=css>edges</code>’</dfn>

   812    <dd>The UA should place the start and end of the line inwards from the

   813     content edge of the <i>decorating element</i> so that, e.g. two

   814     underlined elements side-by-side do not appear to have a single

   815     underline. (This is important in Chinese, where underlining is a form of

   816     punctuation.)

   818    <dt><dfn id=box-decoration

   819     title="text-decoration-skip:box-decoration">‘<code

   820     class=css>box-decoration</code>’</dfn>

   822    <dd> Skip over the box's margin, border, and padding areas. Note that this

   823     only has an effect on decorations imposed by an ancestor.

   824   </dl>

   826   <p class=note>Note that this property inherits and that descendant elements

   827    can have a different setting.

   829   <p class=note> Note that CSS 2.1 required skipping margins, borders, and

   830    padding always. In this level, by default only the margins, borders, and

   831    padding of the <i>decorating element</i> are skipped.

   833   <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text

   834    Underline Position: the ‘<a href="#text-underline-position"><code

   835    class=property>text-underline-position</code></a>’ property</h3>

   837   <table class=propdef>

   838    <tbody>

   839     <tr>

   840      <th>Name:

   842      <td><dfn id=text-underline-position>text-underline-position</dfn>

   844     <tr>

   845      <th><a href="#values">Value</a>:

   847      <td>auto | alphabetic | [ under || [ left | right ] ]

   849     <tr>

   850      <th>Initial:

   852      <td>auto

   854     <tr>

   855      <th>Applies to:

   857      <td>all elements

   859     <tr>

   860      <th>Inherited:

   862      <td>yes

   864     <tr>

   865      <th>Percentages:

   867      <td>N/A

   869     <tr>

   870      <th>Media:

   872      <td>visual

   874     <tr>

   875      <th>Computed value:

   877      <td>as specified

   879     <tr>

   880      <th>Animatable:

   882      <td>no

   883   </table>

   885   <p>This property sets the position of an underline specified on the same

   886    element: it does not affect underlines specified by ancestor elements.

   887    Values have the following meanings:

   889   <dl>

   890    <dt><dfn id=underline-auto title="text-underline-position: auto">‘<code

   891     class=css>auto</code>’</dfn>

   893    <dd>The user agent may use any algorithm to determine the underline's

   894     position; however it must be placed at or under the alphabetic baseline.

   895     <p class=note>It is suggested that the underline position be ‘<code

   896      class=css>alphabetic</code>’ unless it crosses either subscripted (or

   897      otherwise lowered) text, or it affects characters from Asian scripts

   898      such as Han or Tibetan, for which an alphabetic underline is too high:

   899      in such cases, aligning to the em box edge as described for ‘<code

   900      class=css>under left</code>’ is more appropriate.

   902    <dt><dfn id=underline-alphabetic

   903     title="text-underline-position: alphabetic">‘<code

   904     class=css>alphabetic</code>’</dfn>

   906    <dd>The underline is positioned relative to the alphabetic baseline. In

   907     this case the underline is likely to cross some descenders.

   908     <div class=figure>

   909      <p><img

   910       alt="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'."

   911       src=underline-position-alphabetic.png

   912       title="text-underline-position: alphabetic">

   914      <p class=caption>‘<a href="#underline-alphabetic"><code

   915       class=css>text-underline-position: alphabetic</code></a>’

   916     </div>

   918    <dt><dfn id=underline-under

   919     title="text-underline-position: under">‘<code

   920     class=css>under</code>’</dfn>

   922    <dd>In horizontal writing modes, the underline is positioned relative to

   923     the under edge of the element's content box. In this case the underline

   924     usually does not cross the descenders. (This is sometimes called

   925     "accounting" underline.) If the underline affects descendants with a

   926     lower content edge, the user agent should shift the underline down

   927     further to the lowest underlined content box edge. The user agent may

   928     ignore elements with ‘<code class=css>vertical-align</code>’ values

   929     given as lengths, percentages, ‘<code class=css>top</code>’, or

   930     ‘<code class=css>bottom</code>’ when making this adjustment. (Note

   931     that images that are not affected by the underline per ‘<a

   932     href="#text-decoration-skip"><code

   933     class=property>text-decoration-skip</code></a>’ will not affect the

   934     position of the underline.)

   935     <div class=figure>

   936      <p><img

   937       alt="In a typical Latin font, the underline is far enough                  below the text that it does not cross the bottom of a 'g'."

   938       src=underline-position-under.png

   939       title="text-underline-position: under">

   941      <p class=caption>‘<a href="#underline-under"><code

   942       class=css>text-underline-position: under</code></a>’

   943     </div>

   945     <div class=example>

   946      <p>Because ‘<a href="#text-underline-position"><code

   947       class=property>text-underline-position</code></a>’ inherits, and is

   948       not reset by the ‘<a href="#text-decoration"><code

   949       class=property>text-decoration</code></a>’ shorthand, the following

   950       example switches the document to use ‘<code class=css>under</code>’

   951       underlining, which can be more appropriate for writing systems with

   952       long, complicated descenders. It is also often useful for mathematical

   953       or chemical texts that use many subscripts.

   955      <pre>:root { text-underline-position: under; }</pre>

   956     </div>

   958    <dt><dfn id=underline-left title="text-underline-position: left">‘<code

   959     class=css>left</code>’</dfn>

   961    <dd>In vertical writing modes, the underline is aligned as for ‘<code

   962     class=css>under</code>’, except it is always aligned to the left edge

   963     of the text. If this causes the underline to be drawn on the "over" side

   964     of the text, then an overline also switches sides and is drawn on the

   965     "under" side.

   967    <dt><dfn id=underline-right

   968     title="text-underline-position: right">‘<code

   969     class=css>right</code>’</dfn>

   971    <dd>In vertical writing modes, the underline is aligned as for ‘<code

   972     class=css>under</code>’, except it is always aligned to the right edge

   973     of the text. If this causes the underline to be drawn on the "over" side

   974     of the text, then an overline also switches sides and is drawn on the

   975     "under" side.

   976   </dl>

   978   <p>If ‘<code class=css>under</code>’ is specified alone, ‘<code

   979    class=css>left</code>’ is also implied. If ‘<code

   980    class=css>left</code>’ or ‘<code class=css>right</code>’ is

   981    specified alone, ‘<code class=css>under</code>’ is also implied.

   983   <div class=figure id=fig-text-underline-position>

   984    <table>

   985     <tbody>

   986      <tr>

   987       <td> <img

   988        alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left'                     places the underline on the left side of the text."

   989        src=underline-position-left.png title="text-underline-position: left">

   991       <td> <img

   992        alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right'                     places the underline on the right side of the text."

   993        src=underline-position-right.png

   994        title="text-underline-position: right">

   996      <tr>

   997       <td>‘<code class=css>left</code>’

   999       <td>‘<code class=css>right</code>’

  1000    </table>

  1002    <p class=caption>In vertical writing modes, the ‘<a

  1003     href="#text-underline-position"><code

  1004     class=property>text-underline-position</code></a>’ values ‘<code

  1005     class=css>left</code>’ and ‘<code class=css>right</code>’ allow

  1006     placing the underline on either side of the text. (In horizontal writing

  1007     modes, both values are treated as ‘<code class=css>under</code>’.)

  1008   </div>

  1010   <div class=example>

  1011    <p>The following example styles modern Chinese, Japanese, and Korean texts

  1012     with the appropriate underline positions in both horizontal and vertical

  1013     text:

  1015    <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }

  1016 <!--   -->:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre>

  1017   </div>

  1019   <h3 id=line-position><span class=secno>2.7. </span> Determining the

  1020    Position and Thickness of Line Decorations</h3>

  1022   <p>In determining the position of text decoration lines, user agents must

  1023    consider, per line box, the "ideal" positions of all fragments of in-flow

  1024    inline descendants of the <a href="#decorating-box"><i>decorating

  1025    box</i></a> on that line as follows (treating <a

  1026    href="#underline-left"><i>over</i>-positioned underlines</a> as

  1027    <i>over</i> lines and <a href="#underline-left"><i>under</i>-positioned

  1028    overlines</a> as <i>under</i> lines):

  1030   <dl>

  1031    <dt><a

  1032     href="http://dev.w3.org/csswg/css3-writing-modes/#over"><i>over</i></a>

  1033     lines

  1035    <dd> Align the line decoration with respect to the highest

  1036     <!-- <i>text-over</i> baseline of the considered fragments. --> <a

  1037     href="http://dev.w3.org/csswg/css3-writing-modes/#over"><i>over</i></a>

  1038     edge of the considered fragments' EM boxes.

  1040    <dt><a href="#underline-alphabetic"><i>alphabetic</i></a> underlines

  1042    <dd> Calculate an average of the ideal underlining offsets (from their

  1043     respective alphabetic baselines) of the considered fragments, assigning

  1044     any inline with non-initial ‘<code

  1045     class=property>vertical-align</code>’ the ideal offset of its parent.

  1046     Align the line decoration to the lowest alphabetic baseline considered,

  1047     with that calculated offset. (Alphabetic baselines can differ between

  1048     ‘<code class=css>baseline</code>’-aligned boxes if the dominant

  1049     baseline is non-alphabetic.)

  1051    <dt>non-alphabetic <a

  1052     href="http://dev.w3.org/csswg/css3-writing-modes/#under"><i>under</i></a>

  1053     lines

  1055    <dd> Position the line decoration with respect to the lowest

  1056     <!-- <i>text-under</i> baseline of the considered fragments. --> <a

  1057     href="http://dev.w3.org/csswg/css3-writing-modes/#under"><i>under</i></a>

  1058     edge of the considered fragments' EM boxes.

  1060    <dt>line-throughs

  1062    <dd> For each set of considered fragments with the same ‘<code

  1063     class=property>font-size</code>’, compute an ideal position averaged

  1064     from their direct contents and font metrics, assigning any fragment with

  1065     non-initial ‘<code class=property>vertical-align</code>’ the ideal

  1066     position of its parent. Position the portion of the line across each

  1067     decorated fragment at that fragment's ideal position. (Essentially, this

  1068     performs the same sort of averaging as for alphabetic underlines, but

  1069     recomputes the position when drawing across a descendant with a different

  1070     computed ‘<code class=property>font-size</code>’. This ensures that

  1071     the text remains effectively "crossed out" despite any font size

  1072     changes.)

  1073   </dl>

  1075   <p> CSS does not define the thickness of line decorations. In determining

  1076    the thickness of text decoration lines, user agents may consider the font

  1077    sizes, faces, and weights of descendants to provide an appropriately

  1078    averaged thickness.

  1080   <div class=example>

  1081    <p>The following figure shows the averaging for underline:

  1083    <p><img

  1084     alt="In the first rendering of the underlined text '1st a'                  with 'st' as a superscript, both the '1st' and the 'a'                  are rendered in a small font. In the second rendering,                  the 'a' is rendered in a larger font. In the third, both                  '1st' and 'a' are large."

  1085     height=105 src=underline-averaging.gif width=326>

  1087    <p>In the three fragments of underlined text, the underline is drawn

  1088     consecutively lower and thicker as the ratio of large text to small text

  1089     increases.

  1091    <p>Using the same example, a line-through would in the second fragment,

  1092     instead of averaging the two font sizes, split the line-through into two

  1093     segments:

  1095    <p><img alt="" src=linethrough-averaging.gif>

  1097    <p>In both cases, however, the superscript, due to the vertical-alignment

  1098     shift, has no effect on the position of the line.

  1099   </div>

  1101   <div class=note>

  1102    <p>In some cases (such as in OpenType) the font format can offer

  1103     information about the appropriate position of an underline. Typically

  1104     this information gives the position of an ‘<code

  1105     class=css>alphabetic</code>’ underline; in some cases (especially in

  1106     CJK fonts), it gives the position of a ‘<code class=css>under

  1107     left</code>’ underline. (In this case, the font's underline metrics

  1108     typically touch the bottom edge of the em box). The UA is encouraged to

  1109     use information (such as the underline thickness, or appropriate

  1110     alphabetic alignment) from the font wherever appropriate.

  1111   </div>

  1113   <h2 id=emphasis-marks><span class=secno>3. </span> Emphasis Marks</h2>

  1115   <p>East Asian documents traditionally use small symbols next to each glyph

  1116    to emphasize a run of text. For example:

  1118   <div class=figure>

  1119    <p> <img alt="Example of emphasis in Japanese appearing over the text"

  1120     class=example height=28 src=text-emphasis-ja.gif width=225>

  1122    <p class=caption>Accent emphasis (shown in blue for clarity) applied to

  1123     Japanese text

  1124   </div>

  1126   <h3 id=text-emphasis-style-property><span class=secno>3.1. </span> Emphasis

  1127    Mark Style: the ‘<a href="#text-emphasis-style"><code

  1128    class=property>text-emphasis-style</code></a>’ property</h3>

  1130   <table class=propdef>

  1131    <tbody>

  1132     <tr>

  1133      <th>Name:

  1135      <td><dfn id=text-emphasis-style>text-emphasis-style</dfn>

  1137     <tr>

  1138      <th><a href="#values">Value</a>:

  1140      <td>none | [ [ filled | open ] || [ dot | circle | double-circle |

  1141       triangle | sesame ] ] | <a class=noxref

  1142       href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span

  1143       class=value-inst-string>&lt;string&gt;</span></a>

  1145     <tr>

  1146      <th>Initial:

  1148      <td>none

  1150     <tr>

  1151      <th>Applies to:

  1153      <td>all elements

  1155     <tr>

  1156      <th>Inherited:

  1158      <td>yes

  1160     <tr>

  1161      <th>Percentages:

  1163      <td>N/A

  1165     <tr>

  1166      <th>Media:

  1168      <td>visual

  1170     <tr>

  1171      <th>Computed value:

  1173      <td>‘<code class=property>none</code>’, a pair of keywords

  1174       representing the shape and fill, or a string

  1176     <tr>

  1177      <th>Animatable:

  1179      <td>no

  1180   </table>

  1182   <p>This property applies emphasis marks to the element's text. Values have

  1183    the following meanings:

  1185   <dl>

  1186    <dt><dfn id=none1 title="text-emphasis:none">‘<code

  1187     class=css>none</code>’</dfn>

  1189    <dd>No emphasis marks.

  1191    <dt><dfn id=filled title="text-emphasis:filled">‘<code

  1192     class=css>filled</code>’</dfn>

  1194    <dd>The shape is filled with solid color.

  1196    <dt><dfn id=open title="text-emphasis:open">‘<code

  1197     class=css>open</code>’</dfn>

  1199    <dd>The shape is hollow.

  1201    <dt><dfn id=dot title="text-emphasis:dot">‘<code

  1202     class=css>dot</code>’</dfn>

  1204    <dd>Display small circles as marks. The filled dot is U+2022 ‘<code

  1205     class=css>•</code>’, and the open dot is U+25E6 ‘<code

  1206     class=css>◦</code>’.

  1208    <dt><dfn id=circle title="text-emphasis:circle">‘<code

  1209     class=css>circle</code>’</dfn>

  1211    <dd>Display large circles as marks. The filled circle is U+25CF ‘<code

  1212     class=css>●</code>’, and the open circle is U+25CB ‘<code

  1213     class=css>○</code>’.

  1215    <dt><dfn id=double-circle title="text-emphasis:double-circle">‘<code

  1216     class=css>double-circle</code>’</dfn>

  1218    <dd>Display double circles as marks. The filled double-circle is U+25C9

  1219     ‘<code class=css>◉</code>’, and the open double-circle is U+25CE

  1220     ‘<code class=css>◎</code>’.

  1222    <dt><dfn id=triangle title="text-emphasis:triangle">‘<code

  1223     class=css>triangle</code>’</dfn>

  1225    <dd>Display triangles as marks. The filled triangle is U+25B2 ‘<code

  1226     class=css>▲</code>’, and the open triangle is U+25B3 ‘<code

  1227     class=css>△</code>’.

  1229    <dt><dfn id=sesame title="text-emphasis:sesame">‘<code

  1230     class=css>sesame</code>’</dfn>

  1232    <dd>Display sesames as marks. The filled sesame is U+FE45 ‘<code

  1233     class=css>﹅</code>’, and the open sesame is U+FE46 ‘<code

  1234     class=css>﹆</code>’.

  1236    <dt><dfn id=ltstringgt title="text-emphasis:sesame">‘<code

  1237     class=css><var>&lt;string&gt;</var></code>’</dfn>

  1239    <dd>Display the given string as marks. Authors should not specify more

  1240     than one <a href="#character"><i>character</i></a> in &lt;string&gt;. The

  1241     UA may truncate or ignore strings consisting of more than one grapheme

  1242     cluster.

  1243   </dl>

  1245   <p>If a shape keyword is specified but neither of ‘<code

  1246    class=css>filled</code>’ nor ‘<code class=css>open</code>’ is

  1247    specified, ‘<code class=css>filled</code>’ is assumed. If only

  1248    ‘<code class=css>filled</code>’ or ‘<code class=css>open</code>’

  1249    is specified, the shape keyword computes to ‘<code

  1250    class=css>circle</code>’ in horizontal writing mode and ‘<code

  1251    class=css>sesame</code>’ in vertical writing mode.

  1253   <p>The marks should be drawn using the element's font settings with its

  1254    size scaled down to 50%. However, not all fonts have all these glyphs, and

  1255    some fonts use inappropriate sizes for emphasis marks in these code

  1256    points. The UA may opt to use a font known to be good for emphasis marks,

  1257    or the marks may instead be synthesized by the UA. Marks must remain

  1258    upright in vertical writing modes: like CJK characters, they do not rotate

  1259    to match the writing mode.

  1261   <p class=note> One example of good fonts for emphasis marks is Adobe's

  1262    opensource project, <a

  1263    href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic

  1264    OpenType Font</a>, which is specially designed for the emphasis marks.

  1266   <p>The marks are drawn once for each <a

  1267    href="#character"><i>character</i></a>. However, emphasis marks are not

  1268    drawn for characters that are:

  1270   <ul>

  1271    <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word

  1272     separators</a> or that belong to the Unicode separator classes (Z*). (But

  1273     note that emphasis marks <em>are</em> drawn for a space that combines

  1274     with any combining characters.)

  1276    <li>Characters belonging to the Unicode classes for control codes and

  1277     unassigned characters (Cc, Cf, Cn).

  1278   </ul>

  1280   <p>If emphasis marks are drawn for characters for which ruby is drawn in

  1281    the same position as the emphasis mark, the ruby should be stacked between

  1282    the emphasis marks and the base text. In this case, the position of the

  1283    emphasis marks for a given element should be determined as if all

  1284    characters have ruby boxes of the same height as the highest ruby box in

  1285    the element. If the UA is not capable of drawing ruby and emphasis marks

  1286    on the same side, the UA may hide ruby and draw only emphasis marks.

  1288   <div class=figure>

  1289    <p><img

  1290     alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them"

  1291     height=50 src=text-emphasis-ruby.png width=134>

  1293    <p class=caption>Emphasis marks applied to 4 characters, and ruby to 2 of

  1294     them

  1295   </div>

  1297   <p class=note>A future level of CSS may define controls to specify what to

  1298    do when emphasis marks and ruby text coincide.

  1300   <h3 id=text-emphasis-color-property><span class=secno>3.2. </span> Emphasis

  1301    Mark Color: the ‘<a href="#text-emphasis-color"><code

  1302    class=property>text-emphasis-color</code></a>’ property</h3>

  1304   <table class=propdef>

  1305    <tbody>

  1306     <tr>

  1307      <th>Name:

  1309      <td><dfn id=text-emphasis-color>text-emphasis-color</dfn>

  1311     <tr>

  1312      <th><a href="#values">Value</a>:

  1314      <td>&lt;color&gt;

  1316     <tr>

  1317      <th>Initial:

  1319      <td><a

  1320       href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>

  1322     <tr>

  1323      <th>Applies to:

  1325      <td>all elements

  1327     <tr>

  1328      <th>Inherited:

  1330      <td>yes

  1332     <tr>

  1333      <th>Percentages:

  1335      <td>N/A

  1337     <tr>

  1338      <th>Media:

  1340      <td>visual

  1342     <tr>

  1343      <th>Computed value:

  1345      <td>as specified

  1347     <tr>

  1348      <th>Animatable:

  1350      <td>as <a

  1351       href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a>

  1352   </table>

  1354   <p>This property specifies the foreground color of the emphasis marks.

  1356   <p class=note> The <dfn id=currentcolor>‘<code

  1357    class=css>currentcolor</code>’</dfn> keyword computes to itself and is

  1358    resolved to the value of ‘<code class=property>color</code>’ after

  1359    inheritance is performed. This means ‘<a

  1360    href="#text-emphasis-color"><code

  1361    class=property>text-emphasis-color</code></a>’ by default matches the

  1362    text ‘<code class=property>color</code>’ even as ‘<code

  1363    class=property>color</code>’ changes across elements.

  1365   <h3 id=text-emphasis-property><span class=secno>3.3. </span> Emphasis Mark

  1366    Shorthand: the ‘<a href="#text-emphasis"><code

  1367    class=property>text-emphasis</code></a>’ property</h3>

  1369   <table class=propdef>

  1370    <tbody>

  1371     <tr>

  1372      <th>Name:

  1374      <td><dfn id=text-emphasis>text-emphasis</dfn>

  1376     <tr>

  1377      <th><a href="#values">Value</a>:

  1379      <td>‘<code class=css>&lt;<a

  1380       href="#text-emphasis-style">text-emphasis-style</a>&gt;</code>’ ||

  1381       ‘<code class=css>&lt;<a

  1382       href="#text-emphasis-color">text-emphasis-color</a>&gt;</code>’

  1384     <tr>

  1385      <th>Initial:

  1387      <td>see individual properties

  1389     <tr>

  1390      <th>Applies to:

  1392      <td>all elements

  1394     <tr>

  1395      <th>Inherited:

  1397      <td>yes

  1399     <tr>

  1400      <th>Percentages:

  1402      <td>N/A

  1404     <tr>

  1405      <th>Media:

  1407      <td>visual

  1409     <tr>

  1410      <th>Computed value:

  1412      <td>see individual properties

  1414     <tr>

  1415      <th>Animatable:

  1417      <td>see individual properties

  1418   </table>

  1420   <p>This property is a shorthand for setting ‘<a

  1421    href="#text-emphasis-style"><code

  1422    class=property>text-emphasis-style</code></a>’ and ‘<a

  1423    href="#text-emphasis-color"><code

  1424    class=property>text-emphasis-color</code></a>’ in one declaration.

  1425    Omitted values are set to their initial values.

  1427   <p class=note>Note that ‘<a href="#text-emphasis-position"><code

  1428    class=property>text-emphasis-position</code></a>’ is not reset in this

  1429    shorthand. This is because typically the shape and color vary, but the

  1430    position is consistent for a particular language throughout the document.

  1431    Therefore the position should inherit independently.

  1433   <h3 id=text-emphasis-position-property><span class=secno>3.4. </span>

  1434    Emphasis Mark Position: the ‘<a href="#text-emphasis-position"><code

  1435    class=property>text-emphasis-position</code></a>’ property</h3>

  1437   <table class=propdef>

  1438    <tbody>

  1439     <tr>

  1440      <th>Name:

  1442      <td><dfn id=text-emphasis-position>text-emphasis-position</dfn>

  1444     <tr>

  1445      <th><a href="#values">Value</a>:

  1447      <td>[ over | under ] && [ right | left ]

  1449     <tr>

  1450      <th>Initial:

  1452      <td>over right

  1454     <tr>

  1455      <th>Applies to:

  1457      <td>all elements

  1459     <tr>

  1460      <th>Inherited:

  1462      <td>yes

  1464     <tr>

  1465      <th>Percentages:

  1467      <td>N/A

  1469     <tr>

  1470      <th>Media:

  1472      <td>visual

  1474     <tr>

  1475      <th>Computed value:

  1477      <td>as specified

  1479     <tr>

  1480      <th>Animatable:

  1482      <td>no

  1483   </table>

  1485   <p>This property describes where emphasis marks are drawn at. The values

  1486    have following meanings:

  1488   <dl>

  1489    <dt><dfn id=over title="text-emphasis:over">‘<code

  1490     class=css>over</code>’</dfn>

  1492    <dd>Draw marks over the text in horizontal writing mode.

  1494    <dt><dfn id=under title="text-emphasis:under">‘<code

  1495     class=css>under</code>’</dfn>

  1497    <dd>Draw marks under the text in horizontal writing mode.

  1499    <dt><dfn id=right title="text-emphasis:right">‘<code

  1500     class=css>right</code>’</dfn>

  1502    <dd>Draw marks to the right of the text in vertical writing mode.

  1504    <dt><dfn id=left title="text-emphasis:left">‘<code

  1505     class=css>left</code>’</dfn>

  1507    <dd>Draw marks to the left of the text in vertical writing mode.

  1508   </dl>

  1510   <p>Emphasis marks are drawn exactly as if each character was assigned the

  1511    mark as its ruby annotation text with the ruby position given by ‘<a

  1512    href="#text-emphasis-position"><code

  1513    class=property>text-emphasis-position</code></a>’ and the ruby alignment

  1514    as centered.

  1516   <p>The effect of emphasis marks on the line height is the same as for ruby

  1517    text.

  1519   <div class=note>

  1520    <p>Note, the preferred position of emphasis marks depends on the language.

  1521     In Japanese for example, the preferred position is ‘<code

  1522     class=css>over right</code>’. In Chinese, on the other hand, the

  1523     preferred position is ‘<code class=css>under right</code>’. The

  1524     informative table below summarizes the preferred emphasis mark positions

  1525     for Chinese and Japanese:

  1527    <table class=data>

  1528     <caption>Preferred emphasis mark and ruby position</caption>

  1530     <thead>

  1531      <tr>

  1532       <th rowspan=2 scope=col>Language

  1534       <th colspan=2 scope=col>Preferred position

  1536       <th colspan=2 rowspan=2 scope=col>Illustration

  1538      <tr>

  1539       <th>Horizontal

  1541       <th>Vertical

  1543     <tbody>

  1544      <tr>

  1545       <td scope=row>Japanese

  1547       <td rowspan=2>over

  1549       <td rowspan=2>right

  1551       <td rowspan=2> <img

  1552        alt="Emphasis marks appear over each emphasized character in horizontal Japanese text."

  1553        height=28 src=text-emphasis-ja.gif

  1554        title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"

  1555        width=225>

  1557       <td rowspan=3> <img

  1558        alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text."

  1559        height=89 src=text-emphasis-v.gif

  1560        title="Emphasis applied on the right of a fragment of Japanese text"

  1561        width=34>

  1563      <tr>

  1564       <td scope=row>Mongolian

  1566      <tr>

  1567       <td scope=row>Chinese

  1569       <td>under

  1571       <td>right

  1573       <td> <img

  1574        alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text."

  1575        height=28 src=text-emphasis-zh.gif

  1576        title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"

  1577        width=133>

  1578    </table>

  1579   </div>

  1581   <h2 id=text-shadow-property><span class=secno>4. </span> Text Shadows: the

  1582    ‘<a href="#text-shadow"><code class=property>text-shadow</code></a>’

  1583    property</h2>

  1585   <table class=propdef>

  1586    <tbody>

  1587     <tr>

  1588      <th>Name:

  1590      <td><dfn id=text-shadow>text-shadow</dfn>

  1592     <tr>

  1593      <th><a href="#values">Value</a>:

  1595      <td>none | [ &lt;length>{2,3} && &lt;color>? ]#

  1597     <tr>

  1598      <th>Initial:

  1600      <td>none

  1602     <tr>

  1603      <th>Applies to:

  1605      <td>all elements

  1607     <tr>

  1608      <th>Inherited:

  1610      <td>yes

  1612     <tr>

  1613      <th>Percentages:

  1615      <td>N/A

  1617     <tr>

  1618      <th>Media:

  1620      <td>visual

  1622     <tr>

  1623      <th>Computed value:

  1625      <td>a color plus three absolute &lt;length&gt;s

  1627     <tr>

  1628      <th>Animatable:

  1630      <td>as <a

  1631       href="http://dev.w3.org/csswg/css3-transitions/#animtype-shadow-list">shadow

  1632       list</a>

  1633   </table>

  1635   <p>This property accepts a comma-separated list of shadow effects to be

  1636    applied to the text of the element. Values are interpreted as for <a

  1637    href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code

  1638    class=property>box-shadow</code>’</a> <a href="#CSS3BG"

  1639    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. (But note that spread

  1640    values are not allowed.) The shadow is applied to all of the element's

  1641    text as well as any text decorations it specifies.

  1643   <p>The shadow effects are applied front-to-back: the first shadow is on

  1644    top. The shadows may thus overlay each other, but they never overlay the

  1645    text itself. The shadow must be painted at a stack level between the

  1646    element's border and/or background, if present, and the elements text and

  1647    text decoration. UAs should avoid painting text shadows over text in

  1648    adjacent elements belonging to the same stack level and stacking context.

  1649    (This may mean that the exact stack level of the shadows depends on

  1650    whether the element has a border or background: the exact stacking

  1651    behavior of text shadows is thus UA-defined.)

  1653   <p>Unlike ‘<code class=property>box-shadow</code>’, text shadows are

  1654    not clipped to the shadowed shape and may show through if the text is

  1655    partially-transparent. Like ‘<code class=property>box-shadow</code>’,

  1656    text shadows do not influence layout, and do not trigger scrolling or

  1657    increase the size of the scrollable area.

  1659   <p class=note>The painting order of shadows defined here is the opposite of

  1660    that defined in the 1998 <a

  1661    href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2

  1662    Recommendation</a>.

  1664   <p>The ‘<a href="#text-shadow"><code class=css>text-shadow</code></a>’

  1665    property applies to both the <code>::first-line</code> and

  1666    <code>::first-letter</code> pseudo-elements.

  1668   <h2 id=conformance><span class=secno>5. </span> Conformance</h2>

  1670   <h3 id=conventions><span class=secno>5.1. </span> Document Conventions</h3>

  1672   <p>Conformance requirements are expressed with a combination of descriptive

  1673    assertions and RFC 2119 terminology. The key words “MUST”, “MUST

  1674    NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,

  1675    “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the

  1676    normative parts of this document are to be interpreted as described in RFC

  1677    2119. However, for readability, these words do not appear in all uppercase

  1678    letters in this specification.

  1680   <p>All of the text of this specification is normative except sections

  1681    explicitly marked as non-normative, examples, and notes. <a

  1682    href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>

  1684   <p>Examples in this specification are introduced with the words “for

  1685    example” or are set apart from the normative text with

  1686    <code>class="example"</code>, like this:

  1688   <div class=example>

  1689    <p>This is an example of an informative example.

  1690   </div>

  1692   <p>Informative notes begin with the word “Note” and are set apart from

  1693    the normative text with <code>class="note"</code>, like this:

  1695   <p class=note>Note, this is an informative note.

  1697   <h3 id=conformance-classes><span class=secno>5.2. </span> Conformance

  1698    Classes</h3>

  1700   <p>Conformance to CSS Text Level 3 is defined for three conformance

  1701    classes:

  1703   <dl>

  1704    <dt><dfn id=style-sheet title="style sheet!!as conformance class">style

  1705     sheet</dfn>

  1707    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS

  1708     style sheet</a>.

  1710    <dt><dfn id=renderer>renderer</dfn>

  1712    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>

  1713     that interprets the semantics of a style sheet and renders documents that

  1714     use them.

  1716    <dt><dfn id=authoring-tool>authoring tool</dfn>

  1718    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>

  1719     that writes a style sheet.

  1720   </dl>

  1722   <p>A style sheet is conformant to CSS Text Level 3 if all of its

  1723    declarations that use properties defined in this module have values that

  1724    are valid according to the generic CSS grammar and the individual grammars

  1725    of each property as given in this module.

  1727   <p>A renderer is conformant to CSS Text Level 3 if, in addition to

  1728    interpreting the style sheet as defined by the appropriate specifications,

  1729    it supports all the features defined by CSS Text Level 3 by parsing them

  1730    correctly and rendering the document accordingly. However, the inability

  1731    of a UA to correctly render a document due to limitations of the device

  1732    does not make the UA non-conformant. (For example, a UA is not required to

  1733    render color on a monochrome monitor.)

  1735   <p>An authoring tool is conformant to CSS Text Level 3 if it writes style

  1736    sheets that are syntactically correct according to the generic CSS grammar

  1737    and the individual grammars of each feature in this module, and meet all

  1738    other conformance requirements of style sheets as described in this

  1739    module.

  1741   <h3 id=partial><span class=secno>5.3. </span> Partial Implementations</h3>

  1743   <p>So that authors can exploit the forward-compatible parsing rules to

  1744    assign fallback values, CSS renderers <strong>must</strong> treat as

  1745    invalid (and <a

  1746    href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as

  1747    appropriate</a>) any at-rules, properties, property values, keywords, and

  1748    other syntactic constructs for which they have no usable level of support.

  1749    In particular, user agents <strong>must not</strong> selectively ignore

  1750    unsupported component values and honor supported values in a single

  1751    multi-value property declaration: if any value is considered invalid (as

  1752    unsupported values must be), CSS requires that the entire declaration be

  1753    ignored.

  1755   <h3 id=experimental><span class=secno>5.4. </span> Experimental

  1756    Implementations</h3>

  1758   <p>To avoid clashes with future CSS features, the CSS2.1 specification

  1759    reserves a <a

  1760    href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed

  1761    syntax</a> for proprietary and experimental extensions to CSS.

  1763   <p>Prior to a specification reaching the Candidate Recommendation stage in

  1764    the W3C process, all implementations of a CSS feature are considered

  1765    experimental. The CSS Working Group recommends that implementations use a

  1766    vendor-prefixed syntax for such features, including those in W3C Working

  1767    Drafts. This avoids incompatibilities with future changes in the draft.

  1769   <h3 id=testing><span class=secno>5.5. </span>Non-Experimental

  1770    Implementations</h3>

  1772   <p>Once a specification reaches the Candidate Recommendation stage,

  1773    non-experimental implementations are possible, and implementors should

  1774    release an unprefixed implementation of any CR-level feature they can

  1775    demonstrate to be correctly implemented according to spec.

  1777   <p>To establish and maintain the interoperability of CSS across

  1778    implementations, the CSS Working Group requests that non-experimental CSS

  1779    renderers submit an implementation report (and, if necessary, the

  1780    testcases used for that implementation report) to the W3C before releasing

  1781    an unprefixed implementation of any CSS features. Testcases submitted to

  1782    W3C are subject to review and correction by the CSS Working Group.

  1784   <p>Further information on submitting testcases and implementation reports

  1785    can be found from on the CSS Working Group's website at <a

  1786    href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.

  1787    Questions should be directed to the <a

  1788    href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>

  1789    mailing list.

  1791   <h3 id=cr-exit-criteria><span class=secno>5.6. </span> CR Exit Criteria</h3>

  1793   <p> For this specification to be advanced to Proposed Recommendation, there

  1794    must be at least two independent, interoperable implementations of each

  1795    feature. Each feature may be implemented by a different set of products,

  1796    there is no requirement that all features be implemented by a single

  1797    product. For the purposes of this criterion, we define the following

  1798    terms:

  1800   <dl>

  1801    <dt>independent

  1803    <dd>each implementation must be developed by a different party and cannot

  1804     share, reuse, or derive from code used by another qualifying

  1805     implementation. Sections of code that have no bearing on the

  1806     implementation of this specification are exempt from this requirement.

  1808    <dt>interoperable

  1810    <dd>passing the respective test case(s) in the official CSS test suite,

  1811     or, if the implementation is not a Web browser, an equivalent test. Every

  1812     relevant test in the test suite should have an equivalent test created if

  1813     such a user agent (UA) is to be used to claim interoperability. In

  1814     addition if such a UA is to be used to claim interoperability, then there

  1815     must one or more additional UAs which can also pass those equivalent

  1816     tests in the same way for the purpose of interoperability. The equivalent

  1817     tests must be made publicly available for the purposes of peer review.

  1819    <dt>implementation

  1821    <dd>a user agent which:

  1822     <ol class=inline>

  1823      <li>implements the specification.

  1825      <li>is available to the general public. The implementation may be a

  1826       shipping product or other publicly available version (i.e., beta

  1827       version, preview release, or “nightly build”). Non-shipping product

  1828       releases must have implemented the feature(s) for a period of at least

  1829       one month in order to demonstrate stability.

  1831      <li>is not experimental (i.e., a version specifically designed to pass

  1832       the test suite and is not intended for normal usage going forward).

  1833     </ol>

  1834   </dl>

  1836   <p>The specification will remain Candidate Recommendation for at least six

  1837    months.

  1839   <h2 class=no-num id=acknowledgements> Appendix A: Acknowledgements</h2>

  1841   <p>This specification would not have been possible without the help from:

  1842    Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett,

  1843    Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye

  1844    Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa,

  1845    Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley,

  1846    Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley,

  1847    Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao

  1848    Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi

  1849    Yabe and Steve Zilles.

  1851   <h2 class=no-num id=appendix-b-references>Appendix B: References</h2>

  1853   <h3 class=no-num id=normative-ref>Normative references</h3>

  1854   <!--begin-normative-->

  1855   <!-- Sorted by label -->

  1857   <dl class=bibliography>

  1858    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->

  1859     <!---->

  1861    <dt id=CSS21>[CSS21]

  1863    <dd>Bert Bos; et al. <a

  1864     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style

  1865     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June

  1866     2011. W3C Recommendation. URL: <a

  1867     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>

  1868    </dd>

  1869    <!---->

  1871    <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]

  1873    <dd>Elika J. Etemad; Koji Ishii. <a

  1874     href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS

  1875     Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working

  1876     Draft. (Work in progress.) URL: <a

  1877     href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>

  1878    </dd>

  1879    <!---->

  1881    <dt id=CSS3BG>[CSS3BG]

  1883    <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a

  1884     href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS

  1885     Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C

  1886     Candidate Recommendation. (Work in progress.) URL: <a

  1887     href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>

  1888    </dd>

  1889    <!---->

  1891    <dt id=CSS3TEXT>[CSS3TEXT]

  1893    <dd>Elika J. Etemad; Koji Ishii. <a

  1894     href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text

  1895     Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in

  1896     progress.) URL: <a

  1897     href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>

  1898    </dd>

  1899    <!---->

  1901    <dt id=RFC2119>[RFC2119]

  1903    <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key

  1904     words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet

  1905     RFC 2119. URL: <a

  1906     href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>

  1907    </dd>

  1908    <!---->

  1909   </dl>

  1910   <!--end-normative-->

  1912   <h3 class=no-num id=informative-ref>Informative references</h3>

  1913   <!--begin-informative-->

  1914   <!-- Sorted by label -->

  1916   <dl class=bibliography>

  1917    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->

  1918     <!---->

  1920    <dt id=CSS3-ANIMATIONS>[CSS3-ANIMATIONS]

  1922    <dd>Dean Jackson; et al. <a

  1923     href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/"><cite>CSS

  1924     Animations.</cite></a> 3 April 2012. W3C Working Draft. (Work in

  1925     progress.) URL: <a

  1926     href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/">http://www.w3.org/TR/2012/WD-css3-animations-20120403/</a>

  1927    </dd>

  1928    <!---->

  1930    <dt id=CSS3-FONTS>[CSS3-FONTS]

  1932    <dd>John Daggett. <a

  1933     href="http://www.w3.org/TR/2012/WD-css3-fonts-20121211/"><cite>CSS Fonts

  1934     Module Level 3.</cite></a> 11 December 2012. W3C Working Draft. (Work in

  1935     progress.) URL: <a

  1936     href="http://www.w3.org/TR/2012/WD-css3-fonts-20121211/">http://www.w3.org/TR/2012/WD-css3-fonts-20121211/</a>

  1937    </dd>

  1938    <!---->

  1940    <dt id=CSS3COLOR>[CSS3COLOR]

  1942    <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a

  1943     href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color

  1944     Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a

  1945     href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>

  1946    </dd>

  1947    <!---->

  1948   </dl>

  1949   <!--end-informative-->

  1951   <h2 class=no-num id=changes>Appendix C: Changes</h2>

  1953   <h3 class=no-num id=recent-changes> Changes since the <a

  1954    href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">May 2012

  1955    CSS Writing Modes Module Level 3 <abbr title="Working Draft">WD</abbr></a></h3>

  1957   <p>Significant changes include:

  1959   <ul>

  1960    <li>Changed line decorations to not skip margins/padding/borders of

  1961     descendents' inline boxes.

  1963    <li>Clarified and corrected the definitions for <a

  1964     href="#line-decoration">line decoration propagation</a>

  1966    <li>Changed the definitions for averaging <a href="#line-position">line

  1967     decoration positions</a> to better accommodate changes in font size.

  1969    <li>Changed ‘<code class=css>above</code>’ and ‘<code

  1970     class=css>below</code>’ values of ‘<a

  1971     href="#text-emphasis-position"><code

  1972     class=property>text-emphasis-position</code></a>’ and ‘<a

  1973     href="#text-underline-position"><code

  1974     class=property>text-underline-position</code></a>’ to ‘<code

  1975     class=css>over</code>’ and ‘<code class=css>under</code>’ to match

  1976     terminology in ‘<a href="#text-decoration-line"><code

  1977     class=property>text-decoration-line</code></a>’.

  1979    <li>Define interaction of ‘<a href="#text-shadow"><code

  1980     class=property>text-shadow</code></a>’ and ‘<a

  1981     href="#text-decoration"><code

  1982     class=property>text-decoration</code></a>’.

  1983   </ul>

  1985   <h2 class=no-num id=default-stylesheet> Appendix D: Default UA Stylesheet</h2>

  1987   <p> This appendix is informative, and is to help UA developers to implement

  1988    default stylesheet, but UA developers are free to ignore or change.

  1990   <div class=example>

  1991    <pre><code class=css>

  1992 <!-- -->s, strike, del {

  1993 <!-- -->  text-decoration: line-through;

  1994 <!-- -->}

  1995 <!-- -->

  1996 <!-- -->u, ins, :link, :visited {

  1997 <!-- -->  text-decoration: underline;

  1998 <!-- -->}

  1999 <!-- -->

  2000 <!-- -->abbr[title], acronym[title] {

  2001 <!-- -->  text-decoration: dotted underline;

  2002 <!-- -->}

  2003 <!-- -->

  2004 <!-- -->/* disable inheritance of text-emphasis marks to ruby text:

  2005 <!-- -->  emphasis marks should only apply to base text */

  2006 <!-- -->rt { text-emphasis: none; }

  2007 <!-- -->

  2008 <!-- -->:root:lang(zh), [lang|=zh] {

  2009 <!-- -->/* default emphasis mark position is 'under right' for Chinese */

  2010 <!-- -->  text-emphasis-position: under right;

  2011 <!-- -->}

  2012 <!-- -->

  2013 <!-- -->:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] {

  2014 <!-- -->/* default underline position is 'under right' for Japanese and Korean */

  2015 <!-- -->  text-underline-position: under right;

  2016 <!-- -->}

  2017 <!-- -->

  2018 <!-- -->:root:lang(zh), [lang|=zh] {

  2019 <!-- -->/* default underline position is 'under left' for Chinese */

  2020 <!-- -->  text-underline-position: under left;

  2021 <!-- -->}

  2022 <!-- -->

  2023 <!-- -->blink {

  2024 <!-- -->  text-decoration-line: blink;

  2025 <!-- -->}

  2026 </code></pre>

  2027   </div>

  2029   <p class=issue> If you find any issues, recommendations to add, or

  2030    corrections, please send the information to <a

  2031    href="mailto:www-style@w3.org">www-style@w3.org</a> with

  2032    <kbd>[css-text-decor-3]</kbd> in the subject line.

  2034   <div class=example>

  2035    <p> While ‘<code class=css>text-decoration-line: blink</code>’ can't

  2036     be fully reproduced with other existing properties, authors can achieve a

  2037     very similar effect with the following CSS:

  2039    <pre>

  2040 <!-- -->@keyframes blink {

  2041 <!-- -->  0% {

  2042 <!-- -->    visibility: hidden;

  2043 <!-- -->    animation-timing-function: step-end;

  2044 <!-- -->  }

  2045 <!-- -->  25%, 100% {

  2046 <!-- -->    visibility: visible;

  2047 <!-- -->  }

  2048 <!-- -->}

  2049 <!-- -->blink {

  2050 <!-- -->  animation: blink 1s infinite;

  2051 <!-- -->}</pre>

  2052   </div>

Mercurial > drafts / file revision

css-text-decor-3/Overview.html@45007c88f5c7

css-text-decor-3/Overview.html