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

css-text-decor-3/Overview.html@45007c88f5c7 (annotated)

css-text-decor-3/Overview.html

Thu, 07 Feb 2013 22:55:02 -0800

author: L. David Baron <dbaron@dbaron.org>
date: Thu, 07 Feb 2013 22:55:02 -0800
changeset 7399: 45007c88f5c7
parent 7310: 13343cf8c42f
child 7548: bdb242da56bb
permissions: -rw-r--r--

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <html lang=en>
  <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
   <title>CSS Text Decoration Module Level 3</title>
   <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=dcterms.rights>
   <meta content="CSS Text Decoration Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
   <meta content=2013-02-08 name=dcterms.issued>
   <meta content="Elika J. Etemad" name=dcterms.creator>
   <meta content="Koji Ishii" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
   <meta content="http://www.w3.org/TR/2013/ED-css-text-decor-3-20130208/"
    name=dcterms.identifier>
   <link href="#contents" rel=contents><!--<link rel=index href="#index">-->
   <link href="../default.css" rel=stylesheet type="text/css">
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
    type="text/css">
  <body>
   <div class=head> <!--begin-logo-->
    <p><a href="http://www.w3.org/"><img alt=W3C height=48
     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
    <h1>CSS Text Decoration Module Level 3</h1>
    <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 February
 </h2>
    <dl>
     <dt>This version:</dt>
     <!--
     <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>
   -->
     <dd><a
      href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a>
     <dt>Latest version:
     <dd><a
      href="http://www.w3.org/TR/css-text-decor-3/">http://www.w3.org/TR/css-text-decor-3/</a>
     <dt>Latest editor's draft:
     <dd><a
      href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a>
     <dt>Previous version:
     <dd><a
      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>
     <dt>Issues List:
     <dd><a
      href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a>
     <dt>Discussion:
     <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>”
     <dt>Editors:
     <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>
      (Mozilla)
     <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a>
      (Rakuten, Inc.)
    </dl>
    <!--begin-copyright-->
    <p class=copyright><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
     rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
     href="http://www.csail.mit.edu/"><abbr
     title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
     href="http://www.ercim.eu/"><abbr
     title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
     <a href="http://www.keio.ac.jp/">Keio</a>, <a
     href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
     <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
     and <a
     href="http://www.w3.org/Consortium/Legal/copyright-documents">document
     use</a> rules apply.</p>
    <!--end-copyright-->
    <hr title="Separator for header">
   </div>
   <h2 class="no-num no-toc" id=abstract>Abstract</h2>
   <p>This module contains the features of CSS relating to text decoration,
    such as underlines, text shadows, and emphasis marks. <a
    href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the
    rendering of structured documents (such as HTML and XML) on screen, on
    paper, in speech, etc.
   <h2 class="no-num no-toc" id=status>Status of this document</h2>
   <p><em>This section describes the status of this document at the time of
    its publication. Other documents may supersede this document. A list of
    current W3C publications and the latest revision of this technical report
    can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
    index at http://www.w3.org/TR/.</a></em>
   <p>Publication as a Working Draft does not imply endorsement by the W3C
    Membership. This is a draft document and may be updated, replaced or
    obsoleted by other documents at any time. It is inappropriate to cite this
    document as other than work in progress.
   <p>This CSS module has been produced as a combined effort of the <a
    href="http://www.w3.org/International/Activity">W3C Internationalization
    Activity</a>, and the <a href="http://www.w3.org/Style/Activity">Style
    Activity</a> and is maintained by the <a
    href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also
    includes contributions made by participants in the <a
    href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a
    href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>).
   <p>This document was produced by a group operating under the <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
 W3C Patent Policy</a>. W3C maintains a <a
    href="http://www.w3.org/2004/01/pp-impl/32061/status"
    rel=disclosure>public list of any patent disclosures</a> made in
    connection with the deliverables of the group; that page also includes
    instructions for disclosing a patent. An individual who has actual
    knowledge of a patent which the individual believes contains <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
    Claim(s)</a> must disclose the information in accordance with <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
 of the W3C Patent Policy</a>.
   <p><strong>Feedback on this draft should be posted to the (<a
    href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
    mailing list <a
    href="mailto:www-style@w3.org">www-style@w3.org</a></strong> (see <a
    href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with
    <kbd>[text-decor-3]</kbd> in the subject line.</strong> You are strongly
    encouraged to complain if you see something stupid in this draft. The
    editors will do their best to respond to all feedback.
   <p>The following features are at risk and may be cut from the spec during
    its CR period if there are no (correct) implementations:
   <ul>
    <li>the ‘<a href="#text-decoration-skip"><code
     class=property>text-decoration-skip</code></a>’ property / ‘<code
     class=css>ink</code>’ value
    <li>the <a href="#line-position">line positioning rules</a>
   </ul>
   <p>This is a <strong>Last Call Working Draft</strong>. The deadline for
    comments is <strong>31 January 2013</strong>.
   <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
   <!--begin-toc-->
   <ul class=toc>
    <li><a href="#intro"><span class=secno>1. </span> Introduction</a>
     <ul class=toc>
      <li><a href="#placement"><span class=secno>1.1. </span> Module
       Interactions</a>
      <li><a href="#values"><span class=secno>1.2. </span> Values</a>
      <li><a href="#terms"><span class=secno>1.3. </span>Terminology</a>
     </ul>
    <li><a href="#line-decoration"><span class=secno>2. </span> Line
     Decoration: Underline, Overline, and Strike-Through</a>
     <ul class=toc>
      <li><a href="#text-decoration-line-property"><span class=secno>2.1.
       </span> Text Decoration Lines: the ‘<code
       class=property>text-decoration-line</code>’ property</a>
      <li><a href="#text-decoration-color-property"><span class=secno>2.2.
       </span> Text Decoration Color: the ‘<code
       class=property>text-decoration-color</code>’ property</a>
      <li><a href="#text-decoration-style-property"><span class=secno>2.3.
       </span> Text Decoration Style: the ‘<code
       class=property>text-decoration-style</code>’ property</a>
      <li><a href="#text-decoration-property"><span class=secno>2.4. </span>
       Text Decoration Shorthand: the ‘<code
       class=property>text-decoration</code>’ property</a>
      <li><a href="#text-decoration-skip-property"><span class=secno>2.5.
       </span> Text Decoration Line Continuity: the ‘<code
       class=property>text-decoration-skip</code>’ property</a>
      <li><a href="#text-underline-position-property"><span class=secno>2.6.
       </span> Text Underline Position: the ‘<code
       class=property>text-underline-position</code>’ property</a>
      <li><a href="#line-position"><span class=secno>2.7. </span> Determining
       the Position and Thickness of Line Decorations</a>
     </ul>
    <li><a href="#emphasis-marks"><span class=secno>3. </span> Emphasis
     Marks</a>
     <ul class=toc>
      <li><a href="#text-emphasis-style-property"><span class=secno>3.1.
       </span> Emphasis Mark Style: the ‘<code
       class=property>text-emphasis-style</code>’ property</a>
      <li><a href="#text-emphasis-color-property"><span class=secno>3.2.
       </span> Emphasis Mark Color: the ‘<code
       class=property>text-emphasis-color</code>’ property</a>
      <li><a href="#text-emphasis-property"><span class=secno>3.3. </span>
       Emphasis Mark Shorthand: the ‘<code
       class=property>text-emphasis</code>’ property</a>
      <li><a href="#text-emphasis-position-property"><span class=secno>3.4.
       </span> Emphasis Mark Position: the ‘<code
       class=property>text-emphasis-position</code>’ property</a>
     </ul>
    <li><a href="#text-shadow-property"><span class=secno>4. </span> Text
     Shadows: the ‘<code class=property>text-shadow</code>’ property</a>
    <li><a href="#conformance"><span class=secno>5. </span> Conformance</a>
     <ul class=toc>
      <li><a href="#conventions"><span class=secno>5.1. </span> Document
       Conventions</a>
      <li><a href="#conformance-classes"><span class=secno>5.2. </span>
       Conformance Classes</a>
      <li><a href="#partial"><span class=secno>5.3. </span> Partial
       Implementations</a>
      <li><a href="#experimental"><span class=secno>5.4. </span> Experimental
       Implementations</a>
      <li><a href="#testing"><span class=secno>5.5. </span>Non-Experimental
       Implementations</a>
      <li><a href="#cr-exit-criteria"><span class=secno>5.6. </span> CR Exit
       Criteria</a>
     </ul>
    <li class=no-num><a href="#acknowledgements"> Appendix A:
     Acknowledgements</a>
    <li class=no-num><a href="#appendix-b-references">Appendix B:
     References</a>
     <ul class=toc>
      <li class=no-num><a href="#normative-ref">Normative references</a>
      <li class=no-num><a href="#informative-ref">Informative references</a>
     </ul>
    <li class=no-num><a href="#changes">Appendix C: Changes</a>
     <ul class=toc>
      <li class=no-num><a href="#recent-changes"> Changes since the May 2012
       CSS Writing Modes Module Level 3 <abbr
       title="Working Draft">WD</abbr></a>
     </ul>
    <li class=no-num><a href="#default-stylesheet"> Appendix D: Default UA
     Stylesheet</a>
   </ul>
   <!--end-toc-->
   <h2 id=intro><span class=secno>1. </span> Introduction</h2>
   <p><em>This subsection is non-normative.</em>
   <p>This module covers text decoration, i.e. decorating the glyphs of the
    text once typeset according to font and typographic rules. (See <a
    href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> and <a
    href="#CSS3-FONTS" rel=biblioentry>[CSS3-FONTS]<!--{{CSS3-FONTS}}--></a>.)
    Such features are traditionally used not only for purely decorative
    purposes, but also in some cases to show emphasis, for honorifics, and to
    indicate editorial changes such as insertions, deletions, and
    misspellings.
   <p>CSS Levels 1 and 2 only defined very basic <a
    href="#line-decoration">line decorations</a> (underlines, overlines, and
    strike-throughs) appropriate to Western typographical traditions. Level 3
    of this module adds the ability to change the color, style, position, and
    continuity of these decorations, and also introduces <a
    href="#emphasis-marks">emphasis marks</a> (traditionally used in East
    Asian typography), and <a href="#text-shadow-property">shadows</a> (which
    were proposed then deferred from Level 2).
   <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
   <p>This module replaces and extends the text-decorating features defined in
    <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 16.
   <h3 id=values><span class=secno>1.2. </span> Values</h3>
   <p>This specification follows the <a
    href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
    definition conventions</a> from <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
    this specification are defined in CSS Level 2 Revision 1 <a
    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
    modules may expand the definitions of these value types: for example <a
    href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
    when combined with this module, expands the definition of the
    &lt;color&gt; value type as used in this specification.
   <p>In addition to the property-specific values listed in their definitions,
    all properties defined in this specification also accept the <a
    href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
    keyword as their property value. For readability it has not been repeated
    explicitly.
   <h3 id=terms><span class=secno>1.3. </span>Terminology</h3>
   <p>The terms <a
    href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn
    id=character>character</dfn></a>, <a
    href="http://www.w3.org/TR/css3-text/#letter"><dfn
    id=letter>letter</dfn></a>, and <a
    href="http://www.w3.org/TR/css3-text/#content-language"><dfn
    id=content-language>content language</dfn></a> as used in this
    specification are defined in <a href="#CSS3TEXT"
    rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>. Other terminology and
    concepts used in this specification are defined in <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a
    href="#CSS3-WRITING-MODES"
    rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>.
   <h2 id=line-decoration><span class=secno>2. </span> Line Decoration:
    Underline, Overline, and Strike-Through</h2>
   <p> The following properties describe line decorations that are added to
    the content of an element. When specified on or propagated to an inline
    box, that box becomes a <dfn id=decorating-box>decorating box</dfn> for
    that decoration, applying the decoration to all its fragments. The
    decoration is then further propagated to any in-flow block-level boxes
    that split the inline (see <a
    href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1
    section 9.2.1.1</a>). When specified on or propagated to a block container
    that establishes an inline formatting context, the decorations are
    propagated to an anonymous inline box that wraps all the in-flow
    inline-level children of the block container. When specified on or
    propagated to a ruby box, the decorations are propagated only to the ruby
    base. For all other box types, the decorations are propagated to all
    in-flow children.
   <p class=note> Note that text decorations are not propagated to any
    out-of-flow descendants, nor to the contents of atomic inline-level
    descendants such as inline blocks and inline tables. They are also not
    propagated to inline children of inline boxes, although the decoration is
    <em>applied</em> to such boxes.
   <p> By default underlines, overlines, and line-throughs are applied only to
    non-replaced inline boxes, and are drawn over all text (including white
    space, letter spacing, and word spacing). Atomic inlines, such as images,
    are not decorated. The ‘<a href="#text-decoration-skip"><code
    class=property>text-decoration-skip</code></a>’ property can be used to
    modify this behavior, for example allowing atomic inlines to be underlined
    or requiring that white space be skipped. Margins, borders, and padding of
    the <a href="#decorating-box"><i>decorating box</i></a> are always
    skipped.
   <p>Relatively positioning a descendant moves all text decorations applied
    to it along with the descendant's text; it does not affect calculation of
    the decoration's initial position on that line. The ‘<code
    class=property>visibility</code>’ property, ‘<a
    href="#text-shadow"><code class=property>text-shadow</code></a>’,
    filters, and other graphical transformations likewise affect text
    decorations as part of the text they're drawn on, even if the decorations
    were specified on an ancestor box.
   <div class=example>
    <p>In the following style sheet and document fragment:
    <pre>
 <!-- -->   blockquote { text-decoration: underline; color: blue; }
 <!-- -->   em { display: block; }
 <!-- -->   cite { color: fuchsia; }</pre>
    <pre>
 <!-- -->   &lt;blockquote&gt;
 <!-- -->    &lt;p&gt;
 <!-- -->     &lt;span&gt;
 <!-- -->      Help, help!
 <!-- -->      &lt;em&gt; I am under a hat! &lt;/em&gt;
 <!-- -->
 <!-- -->      &lt;cite&gt; —GwieF &lt;/cite&gt;
 <!-- -->     &lt;/span&gt;
 <!-- -->    &lt;/p&gt;
 <!-- -->   &lt;/blockquote&gt;</pre>
    <p>...the underlining for the blockquote element is propagated to an
     anonymous inline box that surrounds the span element, causing the text
     "Help, help!" to be blue, with the blue underlining from the anonymous
     inline underneath it, the color being taken from the blockquote element.
     The <code>&lt;em&gt;text&lt;/em&gt;</code> in the em block is also
     underlined, as it is in an in-flow block to which the underline is
     propagated. The final line of text is fuchsia, but the underline
     underneath it is still the blue underline from the anonymous inline
     element.
    <p><img alt="Sample rendering of the above underline example"
     src=underline-example.png>
    <p>This diagram shows the boxes involved in the example above. The rounded
     aqua line represents the anonymous inline element wrapping the inline
     contents of the paragraph element, the rounded blue line represents the
     span element, and the orange lines represent the blocks.
   </div>
   <h3 id=text-decoration-line-property><span class=secno>2.1. </span> Text
    Decoration Lines: the ‘<a href="#text-decoration-line"><code
    class=property>text-decoration-line</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=text-decoration-line>text-decoration-line</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>none | [ underline || overline || line-through || blink ]
     <tr>
      <th>Initial:
      <td>none
     <tr>
      <th>Applies to:
      <td>all elements
     <tr>
      <th>Inherited:
      <td>no (but see prose)
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>Specifies what line decorations, if any, are added to the element.
    Values have the following meanings:
   <dl>
    <dt><dfn id=none title="text-decoration-line:none">‘<code
     class=css>none</code>’</dfn>
    <dd>Neither produces nor inhibits text decoration.
    <dt><dfn id=underline>‘<code class=css>underline</code>’</dfn>
    <dd>Each line of text is underlined.
    <dt><dfn id=overline>‘<code class=css>overline</code>’</dfn>
    <dd>Each line of text has a line over it (i.e. on the opposite side from
     an underline).
    <dt><dfn id=line-through>‘<code class=css>line-through</code>’</dfn>
    <dd>Each line of text has a line through the middle.
    <dt><dfn id=blink>‘<code class=css>blink</code>’</dfn>
    <dd> The text blinks (alternates between visible and invisible).
     Conforming user agents may simply not blink the text. Note that not
     blinking the text is one technique to satisfy <a
     href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint
 .3 of WAI-UAAG</a>. This value is <strong>deprecated</strong> in favor
     of Animations <a href="#CSS3-ANIMATIONS"
     rel=biblioentry>[CSS3-ANIMATIONS]<!--{{CSS3-ANIMATIONS}}--></a>.
   </dl>
   <h3 id=text-decoration-color-property><span class=secno>2.2. </span> Text
    Decoration Color: the ‘<a href="#text-decoration-color"><code
    class=property>text-decoration-color</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=text-decoration-color>text-decoration-color</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td><a href="http://www.w3.org/TR/css3-color/#color0"><span
       class=value-inst-color>&lt;color&gt;</span></a>
     <tr>
      <th>Initial:
      <td><a
       href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
     <tr>
      <th>Applies to:
      <td>all elements
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>the computed color
     <tr>
      <th>Animatable:
      <td>as <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a>
   </table>
   <p>This property specifies the color of text decoration (underlines
    overlines, and line-throughs) set on the element with ‘<a
    href="#text-decoration-line"><code
    class=property>text-decoration-line</code></a>’.
   <p> The color of text decorations must remain the same on all decorations
    originating from a given element, even if descendant boxes have different
    specified colors.
   <h3 id=text-decoration-style-property><span class=secno>2.3. </span> Text
    Decoration Style: the ‘<a href="#text-decoration-style"><code
    class=property>text-decoration-style</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=text-decoration-style>text-decoration-style</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>solid | double | dotted | dashed | wavy
     <tr>
      <th>Initial:
      <td>solid
     <tr>
      <th>Applies to:
      <td>all elements
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>This property specifies the style of the line(s) drawn for text
    decoration specified on the element. Values have the same meaning as for
    the <a
    href="http://www.w3.org/TR/css3-background/#the-border-style">border-style
    properties</a> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. ‘<code
    class=css>wavy</code>’ indicates a wavy line.
   <p> The style of text decorations must remain the same on all decorations
    originating from a given element, even if descendant boxes have different
    specified styles.
   <h3 id=text-decoration-property><span class=secno>2.4. </span> Text
    Decoration Shorthand: the ‘<a href="#text-decoration"><code
    class=property>text-decoration</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=text-decoration>text-decoration</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td><var><a
       href="#text-decoration-line">&lt;text-decoration-line&gt;</a></var> ||
       <var><a
       href="#text-decoration-style">&lt;text-decoration-style&gt;</a></var>
       || <var><a
       href="#text-decoration-color">&lt;text-decoration-color&gt;</a></var>
     <tr>
      <th>Initial:
      <td>none
     <tr>
      <th>Applies to:
      <td>all elements
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>see individual properties
     <tr>
      <th>Animatable:
      <td>see individual properties
   </table>
   <p>This property is a shorthand for setting ‘<a
    href="#text-decoration-line"><code
    class=property>text-decoration-line</code></a>’, ‘<a
    href="#text-decoration-color"><code
    class=property>text-decoration-color</code></a>’, and ‘<a
    href="#text-decoration-style"><code
    class=property>text-decoration-style</code></a>’ in one declaration.
    Omitted values are set to their initial values. A ‘<a
    href="#text-decoration"><code class=property>text-decoration</code></a>’
    declaration that omits both the ‘<a href="#text-decoration-color"><code
    class=property>text-decoration-color</code></a>’ and ‘<a
    href="#text-decoration-style"><code
    class=property>text-decoration-style</code></a>’ values is
    backwards-compatible with CSS Levels 1 and 2.
   <div class=example>
    <p>The following example underlines unvisited links with a solid blue
     underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.
    <pre><code class=css>
 <!-- -->:link {
 <!-- -->    color: blue;
 <!-- -->    text-decoration: underline;
 <!-- -->    text-decoration: navy dotted underline; /* <a
     href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */
 <!-- -->}</code></pre>
   </div>
   <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text
    Decoration Line Continuity: the ‘<a href="#text-decoration-skip"><code
    class=property>text-decoration-skip</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=text-decoration-skip>text-decoration-skip</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>none | [ objects || spaces || ink || edges || box-decoration ]
     <tr>
      <th>Initial:
      <td>objects
     <tr>
      <th>Applies to:
      <td>all elements
     <tr>
      <th>Inherited:
      <td>yes
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>This property specifies what parts of the element's content any text
    decoration affecting the element must skip over. It controls all text
    decoration lines drawn by the element and also any text decoration lines
    drawn by its ancestors. Values have the following meanings:
   <dl>
    <dt><dfn id=none0 title="text-decoration-skip:none">‘<code
     class=css>none</code>’</dfn>
    <dd>Skip nothing: text-decoration is drawn for all text content and for
     inline replaced elements.
    <dt><dfn id=objects title="text-decoration-skip:objects">‘<code
     class=css>objects</code>’</dfn>
    <dd>Skip this element if it is an atomic inline (such as an image or
     inline-block).
    <dt><dfn id=spaces title="text-decoration-skip:spaces">‘<code
     class=css>spaces</code>’</dfn>
    <dd>Skip spaces: this includes space (U+0020) and tab (U+0009), as well as
     nbsp (U+00A0), ideographic space (U+3000), all fixed width spaces (such
     as U+2000–U+200A, U+202F and U+205F), plus any adjacent letter-spacing
     or word-spacing <a href="#CSS3TEXT"
     rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>.
     <p class=issue>Should this include visible characters like Ethiopic Word
      Space?
    <dt><dfn id=ink title="text-decoration-skip:ink">‘<code
     class=css>ink</code>’</dfn>
    <dd>Skip over where glyphs are drawn: interrupt the decoration line to let
     text show through where the text decoration would otherwise cross over a
     glyph. The UA may also skip a small distance to either side of the glyph
     outline.
    <dt><dfn id=edges title="text-decoration-skip:edges">‘<code
     class=css>edges</code>’</dfn>
    <dd>The UA should place the start and end of the line inwards from the
     content edge of the <i>decorating element</i> so that, e.g. two
     underlined elements side-by-side do not appear to have a single
     underline. (This is important in Chinese, where underlining is a form of
     punctuation.)
    <dt><dfn id=box-decoration
     title="text-decoration-skip:box-decoration">‘<code
     class=css>box-decoration</code>’</dfn>
    <dd> Skip over the box's margin, border, and padding areas. Note that this
     only has an effect on decorations imposed by an ancestor.
   </dl>
   <p class=note>Note that this property inherits and that descendant elements
    can have a different setting.
   <p class=note> Note that CSS 2.1 required skipping margins, borders, and
    padding always. In this level, by default only the margins, borders, and
    padding of the <i>decorating element</i> are skipped.
   <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text
    Underline Position: the ‘<a href="#text-underline-position"><code
    class=property>text-underline-position</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=text-underline-position>text-underline-position</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>auto | alphabetic | [ under || [ left | right ] ]
     <tr>
      <th>Initial:
      <td>auto
     <tr>
      <th>Applies to:
      <td>all elements
     <tr>
      <th>Inherited:
      <td>yes
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>This property sets the position of an underline specified on the same
    element: it does not affect underlines specified by ancestor elements.
    Values have the following meanings:
   <dl>
    <dt><dfn id=underline-auto title="text-underline-position: auto">‘<code
     class=css>auto</code>’</dfn>
    <dd>The user agent may use any algorithm to determine the underline's
     position; however it must be placed at or under the alphabetic baseline.
     <p class=note>It is suggested that the underline position be ‘<code
      class=css>alphabetic</code>’ unless it crosses either subscripted (or
      otherwise lowered) text, or it affects characters from Asian scripts
      such as Han or Tibetan, for which an alphabetic underline is too high:
      in such cases, aligning to the em box edge as described for ‘<code
      class=css>under left</code>’ is more appropriate.
    <dt><dfn id=underline-alphabetic
     title="text-underline-position: alphabetic">‘<code
     class=css>alphabetic</code>’</dfn>
    <dd>The underline is positioned relative to the alphabetic baseline. In
     this case the underline is likely to cross some descenders.
     <div class=figure>
      <p><img
       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'."
       src=underline-position-alphabetic.png
       title="text-underline-position: alphabetic">
      <p class=caption>‘<a href="#underline-alphabetic"><code
       class=css>text-underline-position: alphabetic</code></a>’
     </div>
    <dt><dfn id=underline-under
     title="text-underline-position: under">‘<code
     class=css>under</code>’</dfn>
    <dd>In horizontal writing modes, the underline is positioned relative to
     the under edge of the element's content box. In this case the underline
     usually does not cross the descenders. (This is sometimes called
     "accounting" underline.) If the underline affects descendants with a
     lower content edge, the user agent should shift the underline down
     further to the lowest underlined content box edge. The user agent may
     ignore elements with ‘<code class=css>vertical-align</code>’ values
     given as lengths, percentages, ‘<code class=css>top</code>’, or
     ‘<code class=css>bottom</code>’ when making this adjustment. (Note
     that images that are not affected by the underline per ‘<a
     href="#text-decoration-skip"><code
     class=property>text-decoration-skip</code></a>’ will not affect the
     position of the underline.)
     <div class=figure>
      <p><img
       alt="In a typical Latin font, the underline is far enough                  below the text that it does not cross the bottom of a 'g'."
       src=underline-position-under.png
       title="text-underline-position: under">
      <p class=caption>‘<a href="#underline-under"><code
       class=css>text-underline-position: under</code></a>’
     </div>
     <div class=example>
      <p>Because ‘<a href="#text-underline-position"><code
       class=property>text-underline-position</code></a>’ inherits, and is
       not reset by the ‘<a href="#text-decoration"><code
       class=property>text-decoration</code></a>’ shorthand, the following
       example switches the document to use ‘<code class=css>under</code>’
       underlining, which can be more appropriate for writing systems with
       long, complicated descenders. It is also often useful for mathematical
       or chemical texts that use many subscripts.
      <pre>:root { text-underline-position: under; }</pre>
     </div>
    <dt><dfn id=underline-left title="text-underline-position: left">‘<code
     class=css>left</code>’</dfn>
    <dd>In vertical writing modes, the underline is aligned as for ‘<code
     class=css>under</code>’, except it is always aligned to the left edge
     of the text. If this causes the underline to be drawn on the "over" side
     of the text, then an overline also switches sides and is drawn on the
     "under" side.
    <dt><dfn id=underline-right
     title="text-underline-position: right">‘<code
     class=css>right</code>’</dfn>
    <dd>In vertical writing modes, the underline is aligned as for ‘<code
     class=css>under</code>’, except it is always aligned to the right edge
     of the text. If this causes the underline to be drawn on the "over" side
     of the text, then an overline also switches sides and is drawn on the
     "under" side.
   </dl>
   <p>If ‘<code class=css>under</code>’ is specified alone, ‘<code
    class=css>left</code>’ is also implied. If ‘<code
    class=css>left</code>’ or ‘<code class=css>right</code>’ is
    specified alone, ‘<code class=css>under</code>’ is also implied.
   <div class=figure id=fig-text-underline-position>
    <table>
     <tbody>
      <tr>
       <td> <img
        alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left'                     places the underline on the left side of the text."
        src=underline-position-left.png title="text-underline-position: left">
       <td> <img
        alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right'                     places the underline on the right side of the text."
        src=underline-position-right.png
        title="text-underline-position: right">
      <tr>
       <td>‘<code class=css>left</code>’
       <td>‘<code class=css>right</code>’
    </table>
    <p class=caption>In vertical writing modes, the ‘<a
     href="#text-underline-position"><code
     class=property>text-underline-position</code></a>’ values ‘<code
     class=css>left</code>’ and ‘<code class=css>right</code>’ allow
     placing the underline on either side of the text. (In horizontal writing
     modes, both values are treated as ‘<code class=css>under</code>’.)
   </div>
   <div class=example>
    <p>The following example styles modern Chinese, Japanese, and Korean texts
     with the appropriate underline positions in both horizontal and vertical
     text:
    <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
 <!--   -->:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre>
   </div>
   <h3 id=line-position><span class=secno>2.7. </span> Determining the
    Position and Thickness of Line Decorations</h3>
   <p>In determining the position of text decoration lines, user agents must
    consider, per line box, the "ideal" positions of all fragments of in-flow
    inline descendants of the <a href="#decorating-box"><i>decorating
    box</i></a> on that line as follows (treating <a
    href="#underline-left"><i>over</i>-positioned underlines</a> as
    <i>over</i> lines and <a href="#underline-left"><i>under</i>-positioned
    overlines</a> as <i>under</i> lines):
   <dl>
    <dt><a
     href="http://dev.w3.org/csswg/css3-writing-modes/#over"><i>over</i></a>
     lines
    <dd> Align the line decoration with respect to the highest
     <!-- <i>text-over</i> baseline of the considered fragments. --> <a
     href="http://dev.w3.org/csswg/css3-writing-modes/#over"><i>over</i></a>
     edge of the considered fragments' EM boxes.
    <dt><a href="#underline-alphabetic"><i>alphabetic</i></a> underlines
    <dd> Calculate an average of the ideal underlining offsets (from their
     respective alphabetic baselines) of the considered fragments, assigning
     any inline with non-initial ‘<code
     class=property>vertical-align</code>’ the ideal offset of its parent.
     Align the line decoration to the lowest alphabetic baseline considered,
     with that calculated offset. (Alphabetic baselines can differ between
     ‘<code class=css>baseline</code>’-aligned boxes if the dominant
     baseline is non-alphabetic.)
    <dt>non-alphabetic <a
     href="http://dev.w3.org/csswg/css3-writing-modes/#under"><i>under</i></a>
     lines
    <dd> Position the line decoration with respect to the lowest
     <!-- <i>text-under</i> baseline of the considered fragments. --> <a
     href="http://dev.w3.org/csswg/css3-writing-modes/#under"><i>under</i></a>
     edge of the considered fragments' EM boxes.
    <dt>line-throughs
    <dd> For each set of considered fragments with the same ‘<code
     class=property>font-size</code>’, compute an ideal position averaged
     from their direct contents and font metrics, assigning any fragment with
     non-initial ‘<code class=property>vertical-align</code>’ the ideal
     position of its parent. Position the portion of the line across each
     decorated fragment at that fragment's ideal position. (Essentially, this
     performs the same sort of averaging as for alphabetic underlines, but
     recomputes the position when drawing across a descendant with a different
     computed ‘<code class=property>font-size</code>’. This ensures that
     the text remains effectively "crossed out" despite any font size
     changes.)
   </dl>
   <p> CSS does not define the thickness of line decorations. In determining
    the thickness of text decoration lines, user agents may consider the font
    sizes, faces, and weights of descendants to provide an appropriately
    averaged thickness.
   <div class=example>
    <p>The following figure shows the averaging for underline:
    <p><img
     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."
     height=105 src=underline-averaging.gif width=326>
    <p>In the three fragments of underlined text, the underline is drawn
     consecutively lower and thicker as the ratio of large text to small text
     increases.
    <p>Using the same example, a line-through would in the second fragment,
     instead of averaging the two font sizes, split the line-through into two
     segments:
    <p><img alt="" src=linethrough-averaging.gif>
    <p>In both cases, however, the superscript, due to the vertical-alignment
     shift, has no effect on the position of the line.
   </div>
   <div class=note>
    <p>In some cases (such as in OpenType) the font format can offer
     information about the appropriate position of an underline. Typically
     this information gives the position of an ‘<code
     class=css>alphabetic</code>’ underline; in some cases (especially in
     CJK fonts), it gives the position of a ‘<code class=css>under
     left</code>’ underline. (In this case, the font's underline metrics
     typically touch the bottom edge of the em box). The UA is encouraged to
     use information (such as the underline thickness, or appropriate
     alphabetic alignment) from the font wherever appropriate.
   </div>
   <h2 id=emphasis-marks><span class=secno>3. </span> Emphasis Marks</h2>
   <p>East Asian documents traditionally use small symbols next to each glyph
    to emphasize a run of text. For example:
   <div class=figure>
    <p> <img alt="Example of emphasis in Japanese appearing over the text"
     class=example height=28 src=text-emphasis-ja.gif width=225>
    <p class=caption>Accent emphasis (shown in blue for clarity) applied to
     Japanese text
   </div>
   <h3 id=text-emphasis-style-property><span class=secno>3.1. </span> Emphasis
    Mark Style: the ‘<a href="#text-emphasis-style"><code
    class=property>text-emphasis-style</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=text-emphasis-style>text-emphasis-style</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>none | [ [ filled | open ] || [ dot | circle | double-circle |
       triangle | sesame ] ] | <a class=noxref
       href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span
       class=value-inst-string>&lt;string&gt;</span></a>
     <tr>
      <th>Initial:
      <td>none
     <tr>
      <th>Applies to:
      <td>all elements
     <tr>
      <th>Inherited:
      <td>yes
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>‘<code class=property>none</code>’, a pair of keywords
       representing the shape and fill, or a string
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>This property applies emphasis marks to the element's text. Values have
    the following meanings:
   <dl>
    <dt><dfn id=none1 title="text-emphasis:none">‘<code
     class=css>none</code>’</dfn>
    <dd>No emphasis marks.
    <dt><dfn id=filled title="text-emphasis:filled">‘<code
     class=css>filled</code>’</dfn>
    <dd>The shape is filled with solid color.
    <dt><dfn id=open title="text-emphasis:open">‘<code
     class=css>open</code>’</dfn>
    <dd>The shape is hollow.
    <dt><dfn id=dot title="text-emphasis:dot">‘<code
     class=css>dot</code>’</dfn>
    <dd>Display small circles as marks. The filled dot is U+2022 ‘<code
     class=css>•</code>’, and the open dot is U+25E6 ‘<code
     class=css>◦</code>’.
    <dt><dfn id=circle title="text-emphasis:circle">‘<code
     class=css>circle</code>’</dfn>
    <dd>Display large circles as marks. The filled circle is U+25CF ‘<code
     class=css>●</code>’, and the open circle is U+25CB ‘<code
     class=css>○</code>’.
    <dt><dfn id=double-circle title="text-emphasis:double-circle">‘<code
     class=css>double-circle</code>’</dfn>
    <dd>Display double circles as marks. The filled double-circle is U+25C9
     ‘<code class=css>◉</code>’, and the open double-circle is U+25CE
     ‘<code class=css>◎</code>’.
    <dt><dfn id=triangle title="text-emphasis:triangle">‘<code
     class=css>triangle</code>’</dfn>
    <dd>Display triangles as marks. The filled triangle is U+25B2 ‘<code
     class=css>▲</code>’, and the open triangle is U+25B3 ‘<code
     class=css>△</code>’.
    <dt><dfn id=sesame title="text-emphasis:sesame">‘<code
     class=css>sesame</code>’</dfn>
    <dd>Display sesames as marks. The filled sesame is U+FE45 ‘<code
     class=css>﹅</code>’, and the open sesame is U+FE46 ‘<code
     class=css>﹆</code>’.
    <dt><dfn id=ltstringgt title="text-emphasis:sesame">‘<code
     class=css><var>&lt;string&gt;</var></code>’</dfn>
    <dd>Display the given string as marks. Authors should not specify more
     than one <a href="#character"><i>character</i></a> in &lt;string&gt;. The
     UA may truncate or ignore strings consisting of more than one grapheme
     cluster.
   </dl>
   <p>If a shape keyword is specified but neither of ‘<code
    class=css>filled</code>’ nor ‘<code class=css>open</code>’ is
    specified, ‘<code class=css>filled</code>’ is assumed. If only
    ‘<code class=css>filled</code>’ or ‘<code class=css>open</code>’
    is specified, the shape keyword computes to ‘<code
    class=css>circle</code>’ in horizontal writing mode and ‘<code
    class=css>sesame</code>’ in vertical writing mode.
   <p>The marks should be drawn using the element's font settings with its
    size scaled down to 50%. However, not all fonts have all these glyphs, and
    some fonts use inappropriate sizes for emphasis marks in these code
    points. The UA may opt to use a font known to be good for emphasis marks,
    or the marks may instead be synthesized by the UA. Marks must remain
    upright in vertical writing modes: like CJK characters, they do not rotate
    to match the writing mode.
   <p class=note> One example of good fonts for emphasis marks is Adobe's
    opensource project, <a
    href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic
    OpenType Font</a>, which is specially designed for the emphasis marks.
   <p>The marks are drawn once for each <a
    href="#character"><i>character</i></a>. However, emphasis marks are not
    drawn for characters that are:
   <ul>
    <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word
     separators</a> or that belong to the Unicode separator classes (Z*). (But
     note that emphasis marks <em>are</em> drawn for a space that combines
     with any combining characters.)
    <li>Characters belonging to the Unicode classes for control codes and
     unassigned characters (Cc, Cf, Cn).
   </ul>
   <p>If emphasis marks are drawn for characters for which ruby is drawn in
    the same position as the emphasis mark, the ruby should be stacked between
    the emphasis marks and the base text. In this case, the position of the
    emphasis marks for a given element should be determined as if all
    characters have ruby boxes of the same height as the highest ruby box in
    the element. If the UA is not capable of drawing ruby and emphasis marks
    on the same side, the UA may hide ruby and draw only emphasis marks.
   <div class=figure>
    <p><img
     alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them"
     height=50 src=text-emphasis-ruby.png width=134>
    <p class=caption>Emphasis marks applied to 4 characters, and ruby to 2 of
     them
   </div>
   <p class=note>A future level of CSS may define controls to specify what to
    do when emphasis marks and ruby text coincide.
   <h3 id=text-emphasis-color-property><span class=secno>3.2. </span> Emphasis
    Mark Color: the ‘<a href="#text-emphasis-color"><code
    class=property>text-emphasis-color</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=text-emphasis-color>text-emphasis-color</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>&lt;color&gt;
     <tr>
      <th>Initial:
      <td><a
       href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
     <tr>
      <th>Applies to:
      <td>all elements
     <tr>
      <th>Inherited:
      <td>yes
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>as <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a>
   </table>
   <p>This property specifies the foreground color of the emphasis marks.
   <p class=note> The <dfn id=currentcolor>‘<code
    class=css>currentcolor</code>’</dfn> keyword computes to itself and is
    resolved to the value of ‘<code class=property>color</code>’ after
    inheritance is performed. This means ‘<a
    href="#text-emphasis-color"><code
    class=property>text-emphasis-color</code></a>’ by default matches the
    text ‘<code class=property>color</code>’ even as ‘<code
    class=property>color</code>’ changes across elements.
   <h3 id=text-emphasis-property><span class=secno>3.3. </span> Emphasis Mark
    Shorthand: the ‘<a href="#text-emphasis"><code
    class=property>text-emphasis</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=text-emphasis>text-emphasis</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>‘<code class=css>&lt;<a
       href="#text-emphasis-style">text-emphasis-style</a>&gt;</code>’ ||
       ‘<code class=css>&lt;<a
       href="#text-emphasis-color">text-emphasis-color</a>&gt;</code>’
     <tr>
      <th>Initial:
      <td>see individual properties
     <tr>
      <th>Applies to:
      <td>all elements
     <tr>
      <th>Inherited:
      <td>yes
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>see individual properties
     <tr>
      <th>Animatable:
      <td>see individual properties
   </table>
   <p>This property is a shorthand for setting ‘<a
    href="#text-emphasis-style"><code
    class=property>text-emphasis-style</code></a>’ and ‘<a
    href="#text-emphasis-color"><code
    class=property>text-emphasis-color</code></a>’ in one declaration.
    Omitted values are set to their initial values.
   <p class=note>Note that ‘<a href="#text-emphasis-position"><code
    class=property>text-emphasis-position</code></a>’ is not reset in this
    shorthand. This is because typically the shape and color vary, but the
    position is consistent for a particular language throughout the document.
    Therefore the position should inherit independently.
   <h3 id=text-emphasis-position-property><span class=secno>3.4. </span>
    Emphasis Mark Position: the ‘<a href="#text-emphasis-position"><code
    class=property>text-emphasis-position</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=text-emphasis-position>text-emphasis-position</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>[ over | under ] && [ right | left ]
     <tr>
      <th>Initial:
      <td>over right
     <tr>
      <th>Applies to:
      <td>all elements
     <tr>
      <th>Inherited:
      <td>yes
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>This property describes where emphasis marks are drawn at. The values
    have following meanings:
   <dl>
    <dt><dfn id=over title="text-emphasis:over">‘<code
     class=css>over</code>’</dfn>
    <dd>Draw marks over the text in horizontal writing mode.
    <dt><dfn id=under title="text-emphasis:under">‘<code
     class=css>under</code>’</dfn>
    <dd>Draw marks under the text in horizontal writing mode.
    <dt><dfn id=right title="text-emphasis:right">‘<code
     class=css>right</code>’</dfn>
    <dd>Draw marks to the right of the text in vertical writing mode.
    <dt><dfn id=left title="text-emphasis:left">‘<code
     class=css>left</code>’</dfn>
    <dd>Draw marks to the left of the text in vertical writing mode.
   </dl>
   <p>Emphasis marks are drawn exactly as if each character was assigned the
    mark as its ruby annotation text with the ruby position given by ‘<a
    href="#text-emphasis-position"><code
    class=property>text-emphasis-position</code></a>’ and the ruby alignment
    as centered.
   <p>The effect of emphasis marks on the line height is the same as for ruby
    text.
   <div class=note>
    <p>Note, the preferred position of emphasis marks depends on the language.
     In Japanese for example, the preferred position is ‘<code
     class=css>over right</code>’. In Chinese, on the other hand, the
     preferred position is ‘<code class=css>under right</code>’. The
     informative table below summarizes the preferred emphasis mark positions
     for Chinese and Japanese:
    <table class=data>
     <caption>Preferred emphasis mark and ruby position</caption>
     <thead>
      <tr>
       <th rowspan=2 scope=col>Language
       <th colspan=2 scope=col>Preferred position
       <th colspan=2 rowspan=2 scope=col>Illustration
      <tr>
       <th>Horizontal
       <th>Vertical
     <tbody>
      <tr>
       <td scope=row>Japanese
       <td rowspan=2>over
       <td rowspan=2>right
       <td rowspan=2> <img
        alt="Emphasis marks appear over each emphasized character in horizontal Japanese text."
        height=28 src=text-emphasis-ja.gif
        title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"
        width=225>
       <td rowspan=3> <img
        alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text."
        height=89 src=text-emphasis-v.gif
        title="Emphasis applied on the right of a fragment of Japanese text"
        width=34>
      <tr>
       <td scope=row>Mongolian
      <tr>
       <td scope=row>Chinese
       <td>under
       <td>right
       <td> <img
        alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text."
        height=28 src=text-emphasis-zh.gif
        title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"
        width=133>
    </table>
   </div>
   <h2 id=text-shadow-property><span class=secno>4. </span> Text Shadows: the
    ‘<a href="#text-shadow"><code class=property>text-shadow</code></a>’
    property</h2>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=text-shadow>text-shadow</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>none | [ &lt;length>{2,3} && &lt;color>? ]#
     <tr>
      <th>Initial:
      <td>none
     <tr>
      <th>Applies to:
      <td>all elements
     <tr>
      <th>Inherited:
      <td>yes
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>a color plus three absolute &lt;length&gt;s
     <tr>
      <th>Animatable:
      <td>as <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-shadow-list">shadow
       list</a>
   </table>
   <p>This property accepts a comma-separated list of shadow effects to be
    applied to the text of the element. Values are interpreted as for <a
    href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code
    class=property>box-shadow</code>’</a> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. (But note that spread
    values are not allowed.) The shadow is applied to all of the element's
    text as well as any text decorations it specifies.
   <p>The shadow effects are applied front-to-back: the first shadow is on
    top. The shadows may thus overlay each other, but they never overlay the
    text itself. The shadow must be painted at a stack level between the
    element's border and/or background, if present, and the elements text and
    text decoration. UAs should avoid painting text shadows over text in
    adjacent elements belonging to the same stack level and stacking context.
    (This may mean that the exact stack level of the shadows depends on
    whether the element has a border or background: the exact stacking
    behavior of text shadows is thus UA-defined.)
   <p>Unlike ‘<code class=property>box-shadow</code>’, text shadows are
    not clipped to the shadowed shape and may show through if the text is
    partially-transparent. Like ‘<code class=property>box-shadow</code>’,
    text shadows do not influence layout, and do not trigger scrolling or
    increase the size of the scrollable area.
   <p class=note>The painting order of shadows defined here is the opposite of
    that defined in the 1998 <a
    href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2
    Recommendation</a>.
   <p>The ‘<a href="#text-shadow"><code class=css>text-shadow</code></a>’
    property applies to both the <code>::first-line</code> and
    <code>::first-letter</code> pseudo-elements.
   <h2 id=conformance><span class=secno>5. </span> Conformance</h2>
   <h3 id=conventions><span class=secno>5.1. </span> Document Conventions</h3>
   <p>Conformance requirements are expressed with a combination of descriptive
    assertions and RFC 2119 terminology. The key words “MUST”, “MUST
    NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
    “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
    normative parts of this document are to be interpreted as described in RFC
 . However, for readability, these words do not appear in all uppercase
    letters in this specification.
   <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a
    href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
   <p>Examples in this specification are introduced with the words “for
    example” or are set apart from the normative text with
    <code>class="example"</code>, like this:
   <div class=example>
    <p>This is an example of an informative example.
   </div>
   <p>Informative notes begin with the word “Note” and are set apart from
    the normative text with <code>class="note"</code>, like this:
   <p class=note>Note, this is an informative note.
   <h3 id=conformance-classes><span class=secno>5.2. </span> Conformance
    Classes</h3>
   <p>Conformance to CSS Text Level 3 is defined for three conformance
    classes:
   <dl>
    <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
     sheet</dfn>
    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
     style sheet</a>.
    <dt><dfn id=renderer>renderer</dfn>
    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
     that interprets the semantics of a style sheet and renders documents that
     use them.
    <dt><dfn id=authoring-tool>authoring tool</dfn>
    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
     that writes a style sheet.
   </dl>
   <p>A style sheet is conformant to CSS Text Level 3 if all of its
    declarations that use properties defined in this module have values that
    are valid according to the generic CSS grammar and the individual grammars
    of each property as given in this module.
   <p>A renderer is conformant to CSS Text Level 3 if, in addition to
    interpreting the style sheet as defined by the appropriate specifications,
    it supports all the features defined by CSS Text Level 3 by parsing them
    correctly and rendering the document accordingly. However, the inability
    of a UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not required to
    render color on a monochrome monitor.)
   <p>An authoring tool is conformant to CSS Text Level 3 if it writes style
    sheets that are syntactically correct according to the generic CSS grammar
    and the individual grammars of each feature in this module, and meet all
    other conformance requirements of style sheets as described in this
    module.
   <h3 id=partial><span class=secno>5.3. </span> Partial Implementations</h3>
   <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as
    invalid (and <a
    href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
    appropriate</a>) any at-rules, properties, property values, keywords, and
    other syntactic constructs for which they have no usable level of support.
    In particular, user agents <strong>must not</strong> selectively ignore
    unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid (as
    unsupported values must be), CSS requires that the entire declaration be
    ignored.
   <h3 id=experimental><span class=secno>5.4. </span> Experimental
    Implementations</h3>
   <p>To avoid clashes with future CSS features, the CSS2.1 specification
    reserves a <a
    href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
    syntax</a> for proprietary and experimental extensions to CSS.
   <p>Prior to a specification reaching the Candidate Recommendation stage in
    the W3C process, all implementations of a CSS feature are considered
    experimental. The CSS Working Group recommends that implementations use a
    vendor-prefixed syntax for such features, including those in W3C Working
    Drafts. This avoids incompatibilities with future changes in the draft.
   <h3 id=testing><span class=secno>5.5. </span>Non-Experimental
    Implementations</h3>
   <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementors should
    release an unprefixed implementation of any CR-level feature they can
    demonstrate to be correctly implemented according to spec.
   <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental CSS
    renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before releasing
    an unprefixed implementation of any CSS features. Testcases submitted to
    W3C are subject to review and correction by the CSS Working Group.
   <p>Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group's website at <a
    href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a
    href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
    mailing list.
   <h3 id=cr-exit-criteria><span class=secno>5.6. </span> CR Exit Criteria</h3>
   <p> For this specification to be advanced to Proposed Recommendation, there
    must be at least two independent, interoperable implementations of each
    feature. Each feature may be implemented by a different set of products,
    there is no requirement that all features be implemented by a single
    product. For the purposes of this criterion, we define the following
    terms:
   <dl>
    <dt>independent
    <dd>each implementation must be developed by a different party and cannot
     share, reuse, or derive from code used by another qualifying
     implementation. Sections of code that have no bearing on the
     implementation of this specification are exempt from this requirement.
    <dt>interoperable
    <dd>passing the respective test case(s) in the official CSS test suite,
     or, if the implementation is not a Web browser, an equivalent test. Every
     relevant test in the test suite should have an equivalent test created if
     such a user agent (UA) is to be used to claim interoperability. In
     addition if such a UA is to be used to claim interoperability, then there
     must one or more additional UAs which can also pass those equivalent
     tests in the same way for the purpose of interoperability. The equivalent
     tests must be made publicly available for the purposes of peer review.
    <dt>implementation
    <dd>a user agent which:
     <ol class=inline>
      <li>implements the specification.
      <li>is available to the general public. The implementation may be a
       shipping product or other publicly available version (i.e., beta
       version, preview release, or “nightly build”). Non-shipping product
       releases must have implemented the feature(s) for a period of at least
       one month in order to demonstrate stability.
      <li>is not experimental (i.e., a version specifically designed to pass
       the test suite and is not intended for normal usage going forward).
     </ol>
   </dl>
   <p>The specification will remain Candidate Recommendation for at least six
    months.
   <h2 class=no-num id=acknowledgements> Appendix A: Acknowledgements</h2>
   <p>This specification would not have been possible without the help from:
    Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett,
    Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye
    Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa,
    Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley,
    Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley,
    Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao
    Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi
    Yabe and Steve Zilles.
   <h2 class=no-num id=appendix-b-references>Appendix B: References</h2>
   <h3 class=no-num id=normative-ref>Normative references</h3>
   <!--begin-normative-->
   <!-- Sorted by label -->
   <dl class=bibliography>
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
    <dt id=CSS21>[CSS21]
    <dd>Bert Bos; et al. <a
     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
 . W3C Recommendation. URL: <a
     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
    </dd>
    <!---->
    <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
    <dd>Elika J. Etemad; Koji Ishii. <a
     href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS
     Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working
     Draft. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>
    </dd>
    <!---->
    <dt id=CSS3BG>[CSS3BG]
    <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
     href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
     Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
     Candidate Recommendation. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
    </dd>
    <!---->
    <dt id=CSS3TEXT>[CSS3TEXT]
    <dd>Elika J. Etemad; Koji Ishii. <a
     href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text
     Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in
     progress.) URL: <a
     href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>
    </dd>
    <!---->
    <dt id=RFC2119>[RFC2119]
    <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
     words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
     RFC 2119. URL: <a
     href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
    </dd>
    <!---->
   </dl>
   <!--end-normative-->
   <h3 class=no-num id=informative-ref>Informative references</h3>
   <!--begin-informative-->
   <!-- Sorted by label -->
   <dl class=bibliography>
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
    <dt id=CSS3-ANIMATIONS>[CSS3-ANIMATIONS]
    <dd>Dean Jackson; et al. <a
     href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/"><cite>CSS
     Animations.</cite></a> 3 April 2012. W3C Working Draft. (Work in
     progress.) URL: <a
     href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/">http://www.w3.org/TR/2012/WD-css3-animations-20120403/</a>
    </dd>
    <!---->
    <dt id=CSS3-FONTS>[CSS3-FONTS]
    <dd>John Daggett. <a
     href="http://www.w3.org/TR/2012/WD-css3-fonts-20121211/"><cite>CSS Fonts
     Module Level 3.</cite></a> 11 December 2012. W3C Working Draft. (Work in
     progress.) URL: <a
     href="http://www.w3.org/TR/2012/WD-css3-fonts-20121211/">http://www.w3.org/TR/2012/WD-css3-fonts-20121211/</a>
    </dd>
    <!---->
    <dt id=CSS3COLOR>[CSS3COLOR]
    <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
     href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
     Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
     href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
    </dd>
    <!---->
   </dl>
   <!--end-informative-->
   <h2 class=no-num id=changes>Appendix C: Changes</h2>
   <h3 class=no-num id=recent-changes> Changes since the <a
    href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">May 2012
    CSS Writing Modes Module Level 3 <abbr title="Working Draft">WD</abbr></a></h3>
   <p>Significant changes include:
   <ul>
    <li>Changed line decorations to not skip margins/padding/borders of
     descendents' inline boxes.
    <li>Clarified and corrected the definitions for <a
     href="#line-decoration">line decoration propagation</a>
    <li>Changed the definitions for averaging <a href="#line-position">line
     decoration positions</a> to better accommodate changes in font size.
    <li>Changed ‘<code class=css>above</code>’ and ‘<code
     class=css>below</code>’ values of ‘<a
     href="#text-emphasis-position"><code
     class=property>text-emphasis-position</code></a>’ and ‘<a
     href="#text-underline-position"><code
     class=property>text-underline-position</code></a>’ to ‘<code
     class=css>over</code>’ and ‘<code class=css>under</code>’ to match
     terminology in ‘<a href="#text-decoration-line"><code
     class=property>text-decoration-line</code></a>’.
    <li>Define interaction of ‘<a href="#text-shadow"><code
     class=property>text-shadow</code></a>’ and ‘<a
     href="#text-decoration"><code
     class=property>text-decoration</code></a>’.
   </ul>
   <h2 class=no-num id=default-stylesheet> Appendix D: Default UA Stylesheet</h2>
   <p> This appendix is informative, and is to help UA developers to implement
    default stylesheet, but UA developers are free to ignore or change.
   <div class=example>
    <pre><code class=css>
 <!-- -->s, strike, del {
 <!-- -->  text-decoration: line-through;
 <!-- -->}
 <!-- -->
 <!-- -->u, ins, :link, :visited {
 <!-- -->  text-decoration: underline;
 <!-- -->}
 <!-- -->
 <!-- -->abbr[title], acronym[title] {
 <!-- -->  text-decoration: dotted underline;
 <!-- -->}
 <!-- -->
 <!-- -->/* disable inheritance of text-emphasis marks to ruby text:
 <!-- -->  emphasis marks should only apply to base text */
 <!-- -->rt { text-emphasis: none; }
 <!-- -->
 <!-- -->:root:lang(zh), [lang|=zh] {
 <!-- -->/* default emphasis mark position is 'under right' for Chinese */
 <!-- -->  text-emphasis-position: under right;
 <!-- -->}
 <!-- -->
 <!-- -->:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] {
 <!-- -->/* default underline position is 'under right' for Japanese and Korean */
 <!-- -->  text-underline-position: under right;
 <!-- -->}
 <!-- -->
 <!-- -->:root:lang(zh), [lang|=zh] {
 <!-- -->/* default underline position is 'under left' for Chinese */
 <!-- -->  text-underline-position: under left;
 <!-- -->}
 <!-- -->
 <!-- -->blink {
 <!-- -->  text-decoration-line: blink;
 <!-- -->}
 </code></pre>
   </div>
   <p class=issue> If you find any issues, recommendations to add, or
    corrections, please send the information to <a
    href="mailto:www-style@w3.org">www-style@w3.org</a> with
    <kbd>[css-text-decor-3]</kbd> in the subject line.
   <div class=example>
    <p> While ‘<code class=css>text-decoration-line: blink</code>’ can't
     be fully reproduced with other existing properties, authors can achieve a
     very similar effect with the following CSS:
    <pre>
 <!-- -->@keyframes blink {
 <!-- -->  0% {
 <!-- -->    visibility: hidden;
 <!-- -->    animation-timing-function: step-end;
 <!-- -->  }
 <!-- -->  25%, 100% {
 <!-- -->    visibility: visible;
 <!-- -->  }
 <!-- -->}
 <!-- -->blink {
 <!-- -->  animation: blink 1s infinite;
 <!-- -->}</pre>
   </div>

Mercurial > drafts / annotate

css-text-decor-3/Overview.html@45007c88f5c7 (annotated)

css-text-decor-3/Overview.html