css-text-decor-4/Overview.bs

<pre class='metadata'>
Title: CSS Text Decoration Module Level 4
Shortname: css-text-decor
Level: 4
Status: ED
Work Status: Exploring
Group: csswg
ED: https://drafts.csswg.org/css-text-decor-4/
TR: https://www.w3.org/TR/css-text-decor-4/
Previous Version: https://www.w3.org/TR/2020/WD-css-text-decor-4-20200506/
Issue Tracking: Tracker http://www.w3.org/Style/CSS/Tracker/products/10
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Koji Ishii, Google, kojiishi@gmail.com, w3cid 45369
Abstract: This module contains the features of CSS relating to text decoration, such as underlines, text shadows, and emphasis marks.
</pre>

<pre class="link-defaults">
spec:css-text-3; type:dfn; text:character
spec:fill-stroke-3; type:property;
    text: fill
    text: stroke
</pre>

<h2 id="intro">
Introduction</h2>

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

	This module covers text decoration, i.e. decorating the glyphs
	of the text once typeset according to font and typographic rules.
	(See [[CSS-TEXT-3]] and [[CSS-FONTS-3]].)
	Such features are traditionally used not only for purely decorative purposes,
	but also in some cases to show emphasis, for honorifics,
	and to indicate editorial changes such as insertions, deletions, and misspellings.

	CSS 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 added the ability to change
	the color, style, position, and continuity of these decorations,
	and also introduced
	<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).
	Level 4 introduces additional controls over these decorations.

<h3 id="placement">
Module Interactions</h3>

	This module replaces and extends the text-decorating
	features defined in [[CSS-TEXT-DECOR-3]].

	All of the properties in this module
	can be applied to the ''::first-line'' and ''::first-letter'' [=pseudo-elements=].

<h3 id="values">
Value Definitions</h3>

	This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
	using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].
	Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].
	Combination with other CSS modules may expand the definitions of these value types.

	In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a>CSS-wide keywords</a> as their property value.
	For readability they have not been repeated explicitly.

<h3 id="terms">Terminology</h3>

	The terms [=typographic character unit=] (<dfn>character</dfn>),
	[=typographic letter unit=] ([=letter=]),
	and [=content language=]
	as used in this specification are defined in [[!CSS-TEXT-3]].
	Other terminology and concepts used in this specification are defined
	in [[!CSS2]] and [[!CSS-WRITING-MODES-4]].


<h2 id="line-decoration">
Line Decoration: Underline, Overline, and Strike-Through</h2>


	The following properties describe line decorations that are added to the content of an element.
	When specified on or propagated to an <a>inline box</a>,
	that <a>box</a> becomes a <dfn>decorating box</dfn> for that decoration,
	applying the decoration to all its <a>box fragments</a>.
	The decoration is then further propagated to any <a>in-flow</a> <a>block-level</a> boxes that split the inline
	(see <a href="https://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 <a>block container</a> that establishes an <a>inline formatting context</a>,
	the decorations are propagated to an <a>anonymous</a> inline box that wraps all the <a>in-flow</a> <a>inline-level</a> children of the <a>block container</a>.
	When specified on or propagated to a <a>ruby container</a>,
	the decorations are propagated only to the <a>ruby base</a>.
	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 <a>out-of-flow</a> 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.


	Underlines, overlines, and line-throughs are drawn only for <a>non-replaced</a> <a>inline boxes</a>,
	and are drawn across all text (including white space, letter spacing, and word spacing)
	except spacing (white space, letter spacing, and word spacing) at the beginning and end of a line.
	<a>Atomic inlines</a>, such as images and inline blocks, are not decorated.
	Margins, borders, and padding of the [=decorating box=] are always skipped,
	however the margins, border, and padding of descendant <a>inline boxes</a> are not.

	<p class='note'>
		Note that CSS 2.1 required skipping margins, borders, and padding always.
		In Level 3 and beyond, by default
		only the margins, borders, and padding of the [=decorating box=]
		are skipped.
		In the future CSS2.1 may be updated to match this new default.

	[=Relatively positioning=] a descendant moves all text decorations
	applied to it along with the descendant's text; it does not affect
	calculation of the decoration's initial position on that line.
	The 'visibility' property, 'text-shadow', filters, and other graphical transformations
	likewise also affect all text decorations applied to that box--
	including decorations propagated from an ancestor box--
	and do not affect the calculation of their initial positions or thicknesses.
	(In the case of line decorations drawn over an [=atomic inline=]
	or across the margins/borders/padding of a [=non-replaced=] [=inline box=],
	they are analogously associated with the affected atomic inline / non-replaced inline box
	rather than with the [=decorating box=].)

	<div class="example">
		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; &mdash;GwieF &lt;/cite&gt;
		    &lt;/span&gt;
		   &lt;/p&gt;
		  &lt;/blockquote&gt;
		</pre>
		...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.
		<img src="images/underline-example.png" alt="Sample rendering of the above underline example">
		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>
	<div class="example">
		In the following style sheet and document fragment:
		<pre>
		  div { color: black; font-size: 48px; text-decoration: underline; text-shadow: blue 0px 50px 0px; }
		  span { font-size: 20px; vertical-align: top; text-shadow: green 0px 100px 0px; }
		</pre>
		<pre>
                  &lt;div&gt;Help, help! &lt;span&gt;I am under a hat!&lt;/span&gt;&lt;/div&gt;
		</pre>
		...the &lt;div&gt; is the [=decorating box=] for its underline (in black),
		which is rendered uninterrupted through both the &lt;div&gt; and the &lt;span&gt;.
		Unlike line decorations, however,
		`text-shadow` is inherited as a property;
		therefore the green text shadow on the &lt;span&gt;
		overrides the blue text shadow on the &lt;div&gt;.
		As a result, when the shadows are painted,
		the shadow of the &lt;div&gt;’s underline is disjoint across the two elements.
		<img src="images/underline-example-2.png" alt="Sample rendering of the above underline example">
	</div>

	Note: Line decorations are propagated through the box tree,
	not through inheritance,
	and thus have no effect on descendants
	when specified on an element with ''display: contents''.


<h3 id="text-decoration-line-property">
Text Decoration Lines: the 'text-decoration-line' property</h3>

	<pre class="propdef">
	Name: text-decoration-line
	Value: none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error
	Initial: none
	Applies to: all elements
	Inherited: no (but see prose, above)
	Computed value: specified keyword(s)
	Animation type: discrete
	</pre>

	This property,
	which is a <a>sub-property</a> of the 'text-decoration' shorthand,
	specifies what line decorations, if any, are added by the element.
	Values other than ''text-decoration-line''
	cause the element to originate the indicated text decorations,
	and to apply and propagate it as described [[#line-decoration|above]].

	Note: Unless it is desired for the color, style, and thickness of the lines
	to be set by declarations lower in the [=cascade=],
	it is safer to use the 'text-decoration' [=shorthand=]
	instead of this [=longhand=].

	Values have the following meanings:

	<dl dfn-type=value dfn-for=text-decoration-line>
		<dt><dfn>none</dfn>
		<dd>
			Neither produces nor inhibits text decoration.

		<dt><dfn>underline</dfn>
		<dd>
			Each line of text is underlined.

		<dt><dfn>overline</dfn>
		<dd>
			Each line of text has a line over it
			(i.e. on the opposite side from an underline).

		<dt><dfn>line-through</dfn>
		<dd>
			Each line of text has a line through the middle.

		<dt><dfn>blink</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="https://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.
			This value is <strong>deprecated</strong>
			in favor of Animations [[CSS3-ANIMATIONS]].

		<dt><dfn>spelling-error</dfn>
		<dd>
			This value indicates the type of text decoration
			used by the user agent to highlight spelling mistakes.
			Its appearance is UA-defined,
			and may be platform-dependent.
			<span class=note>It is often rendered as a red wavy underline.</span>

		<dt><dfn>grammar-error</dfn>
		<dd>
			This value indicates the type of text decoration
			used by the user agent to highlight grammar mistakes.
			Its appearance is UA defined,
			and may be platform-dependent.
			<span class=note>It is often rendered as a green wavy underline.</span>
	</dl>

	Note: In <a>vertical writing modes</a>,
	'text-underline-position' can cause the underline and overline to switch sides.
	This allows the position of underlines to key off of language-specific preferences
	automatically.

	When ''spelling-error'' or ''grammar-error'' apply,
	the user agent <em>must</em> disregard
	the other <a>sub-properties</a> of 'text-decoration',
	as well any other properties typically affecting the appearance of line decorations
	(such as 'text-underline-position', 'color', 'stroke', or 'fill')
	when rendering these decorations.
	However,
	the user agent may take into account the 'accent-color' property.

<h3 id="text-decoration-style-property">
Text Decoration Style: the 'text-decoration-style' property</h3>

	<pre class="propdef">
	Name: text-decoration-style
	Value: solid | double | dotted | dashed | wavy
	Initial: solid
	Applies to: all elements
	Inherited: no
	Computed value: specified keyword
	Animation type: discrete
	</pre>

	This property,
	which is a <a>sub-property</a> of the 'text-decoration' shorthand,
	sets the line-drawing style of underlines, overlines, and line-throughs
	specified on the element with 'text-decoration-line',
	and affects all decorations originating from this element
	even if descendant boxes specify a different style.

	Values have the same meaning as for the
	<a href="https://www.w3.org/TR/css-backgrounds-3/#the-border-style">border-style properties</a> [[!CSS-BACKGROUNDS-3]].
	<dfn value for=text-decoration-style>wavy</dfn> indicates a wavy line.

<h3 id="text-decoration-color-property">
Text Decoration Color: the 'text-decoration-color' property</h3>

	<pre class="propdef">
	Name: text-decoration-color
	Value: <<color>>
	Initial: currentcolor
	Applies to: all elements
	Inherited: no
	Computed value: computed color
	Animation type: by computed value type
	</pre>

	This property,
	which is a <a>sub-property</a> of the 'text-decoration' shorthand,
	sets the color of underlines, overlines, and line-throughs
	specified on the element with 'text-decoration-line',
	and affects all decorations originating from this element
	even if descendant boxes specify a different color.

<h3 id="text-decoration-thickness-property" oldids="text-decoration-width-property">
Text Decoration Line Thickness: the 'text-decoration-thickness' property</h3>

	<pre class="propdef">
	Name: text-decoration-thickness
	Value: auto | from-font | <<length-percentage>>
	Initial: auto
	Applies to: all elements
	Inherited: no
	Percentages: N/A
	Computed value: as specified, with <<length-percentage>> values computed
	Animation type: by computed value
	</pre>

	This property,
	which is a <a>sub-property</a> of the 'text-decoration' shorthand,
	sets the stroke thickness of underlines, overlines, and line-throughs
	specified on the element with 'text-decoration-line',
	and affects all decorations originating from this element
	even if descendant boxes specify a different thickness.

	Values have the following meanings:

	<dl dfn-for=text-decoration-thickness dfn-type=value>
		<dt><dfn>auto</dfn>
		<dd>
			The UA chooses an appropriate thickness for text decoration lines;
			see below.

		<dt><dfn>from-font</dfn>
		<dd>
			If the <a>first available font</a> has
			metrics indicating a preferred underline width,
			use that width,
			otherwise behaves as ''text-decoration-thickness/auto''.

		<dt><dfn><<length-percentage>></dfn>
		<dd>
			A length value specifies the thickness of text decoration lines as a fixed length.
			
			Note: A length will inherit as a fixed value,
			and will not scale with the font.

			A percentage value specifies the thickness of text decoration lines as a percentage of ''1em''.

			Note: A percentage will inherit as a relative value,
			and will therefore scale with changes in the font as it inherits.

			The UA should round the actual value to the nearest integer device pixel,
			and ensure it is at least one device pixel.
	</dl>

<h4 id="text-decoration-thickness">
Automatic Thickness of Text Decoration Lines</h4>

	Some font formats (such as OpenType) can offer information
	about the appropriate thickness of a line decoration.
	The UA should use such font-based information
	when choosing ''text-decoration-thickness/auto'' line thicknesses
	wherever appropriate.

<h3 id="line-position">
Determining the Position and Thickness of Line Decorations</h3>

	Issue: This section is copied over from early drafts of Text Decoration Level 3.
	It is still under review, and needs integration with 'text-underline-offset' and 'text-decoration-thickness'.

	Since line decorations can span elements with varying font sizes and
	vertical alignments, the best position for a line decoration is not
	necessarily the ideal position dictated by the <a>decorating box</a>.
	Instead, it's calculated, per line, from all text decorated by the <a>decorating box</a> on that line,
	the <dfn>considered text</dfn>.
	However, descendants of the <a>decorating box</a>
	that are skipped due to 'text-decoration-skip',
	descendant inlines with ''text-decoration-skip: ink'',
	and any descendants that do not participate in the <a>decorating box</a>’s inline formatting context
	are excluded from the set of <a>considered text</a>.

	The line decoration positions are then calculated
	per line
	as follows
	(treating <a>over</a>-positioned underlines</a> as <a>over</a> lines
	and <a>under</a>-positioned overlines</a> as <a>under</a> lines):

	<dl>
		<dt><a>over</a> lines
		<dd>
			Align the line decoration with respect to the highest
			<a>over</a> EM-box edge
			of the <a>considered text</a>.

		<dt>alphabetic underlines
		<dd>
			The alphabetic underline position is calculated by taking
			the ideal offset (from the alphabetic baseline) of each run of <a>considered text</a>,
			averaging those, and then using the lowest alphabetic baseline to actually position the line.
			(Alphabetic baselines can differ between ''vertical-align/baseline''-aligned boxes
			 if the dominant baseline is non-alphabetic.)
			To prevent superscripts and subscripts from throwing this position off-kilter,
			an inline with a non-initial computed 'vertical-align'
			is treated as having the ideal underline position of its parent.

		<dt>non-alphabetic <a>under</a> lines
		<dd>
			Position the line decoration with respect to the lowest
			<a>under</a> EM-box edge
			of the <a>considered text</a>.

		<dt>line-throughs
		<dd>
			Line-throughs essentially use the same sort of averaging as for alphabetic underlines,
			but recompute the position when drawing across a descendant with a different computed 'font-size'.
			(This ensures that the text remains effectively “crossed out” despite any font size changes.)
			For each run of <a>considered text</a> with the same 'font-size',
			compute an ideal position averaged from its font metrics.
			To prevent superscripts and subscripts from throwing this position off-kilter,
			an inline with a non-initial computed 'vertical-align'
			is treated as having the ideal underline position of its parent.
			Position the portion of the line across each decorated fragment at that position.

			<p class='issue'>
				For simplicity, line-throughs should draw over each element at that element's preferred/averaged position.
				This can produce some undesirable jumpiness,
				but there doesn't appear to be any way to avoid that which is correct in all instances,
				and all attempts are worryingly complex.
				What position should line-throughs adopt over elements that have a different font-size,
				but no <a>considered text</a>?
	</dl>

	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">
		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="images/underline-averaging.gif" width="326">

		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="images/linethrough-averaging.gif">

		In both cases, however, the superscript, due to the vertical-alignment shift,
		has no effect on the position of the line.
	</div>

<h3 id="text-decoration-property">
Text Decoration Shorthand: the 'text-decoration' property</h3>

	<pre class="propdef shorthand">
	Name: text-decoration
	Value: <<'text-decoration-line'>> || <<'text-decoration-thickness'>> || <<'text-decoration-style'>> || <<'text-decoration-color'>>
	</pre>

	This property is a shorthand for setting
	'text-decoration-line',
	'text-decoration-thickness',
	'text-decoration-style',
	and 'text-decoration-color'
	in one declaration.
	Omitted values are set to their initial values.

	<div class="example">
		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>
			:link {
			  color: blue;
			  text-decoration: underline;
			  text-decoration: navy dotted underline; /* <a href="https://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */
			}
		</pre>
	</div>

	Note: The shorthand purposefully omits the 'text-underline-position' property,
	which is a language/writing-system–dependent setting that keys off the content,
	so that it can cascade and inherit independently
	from the (uninherited) stylistic settings of the 'text-decoration' shorthand.


<h3 id="text-underline-position-property">
Text Underline Position: the 'text-underline-position' property</h3>

	<pre class="propdef">
	Name: text-underline-position
	Value: auto | [ from-font | under ] || [ left | right ]
	Initial: auto
	Applies to: all elements
	Inherited: yes
	Computed value: specified keyword(s)
	Animation type: discrete
	</pre>

	This property,
	which is <em>not</em> a <a>sub-property</a> of the 'text-decoration' shorthand,
	sets the position of an underline with respect to the text,
	and defines its [=zero position=] for further adjustment by 'text-underline-offset'.
	It affects all decorations originating from this element,
	even if descendant boxes specify a different position.
	It does not affect underlines specified by ancestor elements.

	<div class="example">
		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>

	If ''text-underline-position/left'' or ''text-underline-position/right'' is specified alone,
	''text-underline-position/auto'' is also implied.
	Values have the following meanings:

	<dl dfn-type=value dfn-for=text-underline-position>
		<dt><dfn id="underline-auto">auto</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.

			Note: It is suggested that the default underline position
			be close to the alphabetic baseline,
			unless that would either cross subscripted (or otherwise lowered) text
			or draw over glyphs from Asian scripts such as Han or Tibetan
			for which an alphabetic underline is too high:
			in such cases, shifting the underline lower
			or aligning to the em box edge as described for ''text-underline-position/under''
			may be more appropriate.

			<div class="figure">
				<img title="text-underline-position: alphabetic"
				    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="images/underline-position-alphabetic.png" >
				<p class="caption">A typical “alphabetic” underline is positioned just below the alphabetic baseline
			</div>

		<dt><dfn>from-font</dfn>
		<dd>
			If the <a>first available font</a> has
			metrics indicating a preferred underline offset,
			use that offset,
			otherwise behaves as ''text-underline-offset/auto''.

		<dt><dfn id="underline-under">under</dfn>
		<dd>
			The underline is positioned [=under=] the element's text content.
			In this case the underline usually does not cross the descenders.
			(This is sometimes called “accounting” underline.)
			This value can be combined with ''text-underline-position/left'' or ''text-underline-position/right''
			if a particular side is preferred in vertical <a>typographic modes</a>.
			<div class="figure">
			  <img title="text-underline-position: under"
			      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="images/underline-position-under.png">
			  <p class="caption">''text-underline-position: under''
			</div>
			<div class="example">
				Because 'text-underline-position' inherits, and is not reset
				by the 'text-decoration' shorthand, the following example
				switches the document to use ''text-underline-position/under'' underlining, which can
				be more appropriate for writing systems  with long, complicated
				descenders. It is also often useful for mathematical or chemical
				texts that use many subscripts.

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

			Note: The ''text-decoration/under'' value does not guarantee
			that the underline will not conflict with glyphs,
			as some fonts have descenders or diacritics
			that extend below the font’s descent metrics.

		<dt><dfn id="underline-left">left</dfn>
		<dd>
			In vertical <a>typographic modes</a>, the underline is aligned as for
			''text-underline-position/under'', except it is always aligned to the left edge of the text.
			If this causes the underline to be drawn on the "over" side of
			the text, then an overline also switches sides and is drawn on
			the "under" side.

		<dt><dfn id="underline-right">right</dfn>
		<dd>
			In vertical <a>typographic modes</a>, the underline is aligned as for
			''text-underline-position/under'', except it is always aligned to the right edge of the text.
			If this causes the underline to be drawn on the "over" side of
			the text, then an overline also switches sides and is drawn on
			the "under" side.
	</dl>

	<div class="figure" id="fig-text-underline-position">
		<table>
			<tr>
				<td>
					<img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left'
					          places the underline on the left side of the text."
					     title="text-underline-position: left"
					     src="images/underline-position-left.png">

				<td>
					<img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right'
					          places the underline on the right side of the text."
					     title="text-underline-position: right"
					     src="images/underline-position-right.png">

			<tr>
				<td>''text-underline-position/left''
				<td>''text-underline-position/right''
		</table>
		<p class="caption">In vertical <a>typographic modes</a>, the 'text-underline-position'
			values ''text-underline-position/left'' and ''text-underline-position/right'' allow placing the underline on either
			side of the text. (In horizontal <a>typographic modes</a>, both values are
			treated as ''text-underline-position/auto''.)
	</div>

<h3 id="underline-offset">
Text Underline Offset: the 'text-underline-offset' property</h3>

	<pre class="propdef">
	Name: text-underline-offset
	Value: auto | <<length-percentage>>
	Initial: auto
	Applies to: all elements
	Inherited: yes
	Percentages: N/A
	Computed value: as specified, with <<length-percentage>> values computed
	Animation type: by computed value
	</pre>

	This property,
	which is <em>not</em> a <a>sub-property</a> of the 'text-decoration' shorthand,
	sets the offset of underlines from their [=zero position=].
	Positive offsets represent distances outward from the text;
	negative offsets inward.
	It affects all decorations originating from this element,
	even if descendant boxes specify a different position.
	It does not affect underlines specified by ancestor elements.

	Values have the following meanings:

	<dl dfn-for=text-underline-offset dfn-type=value>
		<dt><dfn>auto</dfn>
		<dd>
			<p>The UA chooses an appropriate offset for underlines.

			However, this offset must be zero
			if the computed value of 'text-underline-position' is ''text-underline-position/from-font''
			and the UA was able to extract an appropriate metric to use
			from the font.

		<dt><dfn><<length-percentage>></dfn>
		<dd>
			<p>A length value specifies the offset of underlines as a fixed length.

			Note: A length will inherit as a fixed value,
			and will not scale with the font.

			A percentage value specifies the offset of underlines as a percentage of ''1em''.

			Note: A percentage will inherit as a relative value,
			and will therefore scale with changes in the font as it inherits.
	</dl>

	When the value of the 'text-decoration-line' property is either
	''spelling-error'' or ''grammar-error'',
	the UA must ignore the value of 'text-underline-position'.

<h4 id="line-offset-zero">
Underline Offset Origin (Zero Position)</h4>

	The <dfn lt="underline zero position" local-lt="zero position">zero position</dfn> of the underline
	depends on the value of 'text-underline-position'
	as detailed below.

	<table class="data">
		<caption>Interaction of 'text-underline-position' and 'text-underline-offset'
		<thead>
			<tr>
				<th>'text-underline-position'
				<th>Zero Position
				<th>Positive Direction
		<tbody>
			<tr>
				<td>''text-underline-position/auto''
				<td>alphabetic baseline
				<td><a>under</a>
			<tr>
				<td>''text-underline-position/from-font''
				<td>position specified by the font metrics, falling back to alphabetic baseline
				<td><a>under</a>
			<tr>
				<td>''text-underline-position/under''
				<td>text-under edge
				<td><a>under</a>
			<tr>
				<td>''text-underline-position/left''
				<td>text-under (left) edge
				<td><a>under</a>
			<tr>
				<td>''text-underline-position/right''
				<td>text-over (right) edge
				<td><a>over</a>
	</table>

	The underline is aligned to the outside of the specified position
	(extending its thickness in the positive direction only).

	Any automatic adjustments made to accommodate descendant content are maintained;
	the 'text-underline-offset' is in addition to those.

<h4 id="line-auto-offset">
Using Font Metrics for Automatic Positioning</h4>

	Some font formats (such as OpenType) can offer information
	about the appropriate position of a line decoration.
	The UA should use such font-based information
	in its choice of ''text-underline-offset/auto'' offset
	wherever appropriate,
	and must use such information
	when ''text-underline-position/from-font'' is specified for 'text-underline-position'.

	Note: Typically, OpenType font metrics give the position
	of an ''text-underline-position/alphabetic'' underline;
	in some cases (especially in CJK fonts),
	it gives the position of a ''under left'' underline.
	(In this case, the font's underline metrics typically
	touch the bottom edge of the em box).
	The UA may but is not required to correct for incorrect font metrics.

<h3 id="text-line-constancy">
Text Decoration Line Uniformity</h3>

	The exact position and thickness of line decorations
	depends on the values of
	'text-underline-position', 'text-underline-offset', and 'text-decoration-thickness'
	as defined above,
	and is otherwise UA-defined.
	However, for underlines and overlines
	the UA must use a single thickness and position on each line
	for the decorations deriving from a single [=decorating box=].

	<div class="figure">
		<img src="images/underline-single.png"
		        alt="A single underline drawn under varying font sizes and vertical positions must be a single line.">
		   vs.
		   <img src="images/underline-broken.png"
		        alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect.">
		<p class="caption">Correct and incorrect rendering of <code>&lt;u>A&lt;sup>B&lt;/sup>&lt;big>C&lt;/big>D&lt;/u></code>
	</div>

	<div class="note">
		Note, since line decorations can span elements with varying font sizes and
		vertical alignments, the best position for a line decoration is not
		necessarily the ideal position dictated by the [=decorating box=].
		For example, an overline positioned to a small font
		will effectively become a line-through if the element contains text in a significantly larger font-size.
		Even for underlines, if the text is not aligned to the alphabetic baseline
		(for example, in vertical typesetting styles,
		text is aligned by its central baseline by default [[CSS-WRITING-MODES-4]])
		an underline will cut through descendant text of a larger font-size.
		UA consideration of descendant content will therefore result in better typography.

		<div class="figure">
		  <img src="images/leftline-cross.png" alt="">
		     <img src="images/leftline-under.png" alt="">
		  <p class="caption">
		    Due to the central baseline alignment of vertical text,
		    a left-side underline on small vertical text will cut through the text
		    of a child with a larger font size.
		    The underline is not allowed to be broken,
		    but adjusting its position further to the left
		    properly accommodates all of the underlined text.
		</div>
	</div>

	UAs <em>must</em> adjust line positions
	to match the shifted metrics of [=decorating boxes=] shifted
	with 'vertical-align' values other than ''vertical-align/baseline'' [[!CSS2]]
	or subscripted/superscripted via 'font-variant-position' [[!CSS-FONTS-3]],
	but <em>must not</em> adjust the line position or thickness
	in response to descendants of a [=decorating box=] that are so styled
	(even though it <em>may</em> adjust the position
	to accommodate descendants that are not so styled,
	such as those merely typeset in a different font size as noted above).
	This allows superscripts and subscripts to be properly decorated
	(underlined, struck through, etc.)
	but prevents them from distorting or breaking the positioning of such decorations on their ancestors.

	<div class="figure">
		<img src="images/underline-superscript.png"
		        alt="An underline for just the superscript 'st' in '1st' is drawn just below the superscript,
		             whereas an underline for the entire text is drawn at the appropriate position for full-size text.">
		<p class="caption">Example of underline applied to <abbr title="element with 'vertical-align' or 'font-variant-position' applied">superscripted text</abbr>
		                   vs. underline applied to <abbr title="element containing an element with 'vertical-align' or 'font-variant-position' applied">text containing a superscript</abbr>
		<!-- illustration code, for future alterations
		  <!DOCTYPE html>
		  <style>html { font: 2em Sawasdee; } big { font-size: 2em; }</style>
		  <u><span>A<sup>B</sup><big>C</big>D</span></u>
		  <u>A</u><sup><u>B</u></sup><big><u>C</u></big><u>D</u>
		  <u style='font-weight: bold'>1<sup><u>st</u></sup></u>
		-->
	</div>


<h4 id="text-decoration-skip-inset-property">
Text Decoration Line Trimming and Extension: the 'text-decoration-trim' property</h4>

	<pre class="propdef">
	Name: text-decoration-trim
	Value: <<length>>{1,2} | auto
	Initial: 0
	Applies to: all elements
	Inherited: no
	Percentages: N/A
	Computed value: specified keyword or absolute length
	Animation type: by computed value
	</pre>

	This property adjusts the start and end points of line decorations,
	allowing the author to shorten, lengthen, or shift the decoration
	with respect to the text.
	It controls all text decoration lines drawn by this [=decorating box=],
	but not any text decoration lines drawn by its ancestors.
	If two component values are given,
	the first applies to the [=start=] and the second to the [=end=].
	Values have the following meanings:

	<dl dfn-type=value dfn-for=text-decoration-skip-inset>
		<dt><dfn><<length>></dfn></dt>
		<dd>
			Inset (positive) or outset (negative)
			the start/end of the affected line decorations.

			<div class="example">
				<p>The following example offsets an extra thick underline
				1em endwards with respect to the text
				<pre>
					h1 {
						text-decoration: underline 0.3em rgba(36,148,187,0.25);
						text-decoration-trim: 1em -1em;
					}
				</pre>
			</div>

		<dt><dfn>auto</dfn></dt>
		<dd>
			The UA chooses a trim amount that ensures that
			if two identical underlined elements appear side-by-side
			they do not appear to have a single underline.
			(This is important in Chinese, where underlining is a form of punctuation.)

			<div class="figure">
				<p><img title="text-decoration-skip-inset: auto"
				        alt="An underline below a series of Chinese characters has a gap between two adjacent underlining elements."
				        src="images/decoration-skip-inset.png">
				<p class="caption">''text-decoration-skip-inset: auto'' for <code>&lt;u>石井&lt;/u>&lt;u>艾俐俐&lt;/u></code>
</p>
			</div>
	</dl>

	Text decoration trimming is subject to 'box-decoration-break':
	* for ''box-decoration-break/slice'' (the default)
		trimming is only applied to the [=start=] edge of the first fragment
		and the [=end=] edge of the last fragment,
		and may accumulate to other fragments if the amount of the trim
		is more than the length of the fragment.
		<!-- Percentages are relative to the total length of the [=decorating box=]. -->
	* for ''box-decoration-break/clone''
		trimming is applied to each fragment independently.
		<!-- and percentages are relative to the length of that fragment individually -->

<h3 id="text-decoration-skipping">
Text Decoration Line Continuity: the 'text-decoration-skip' shorthand and its sub-properties</h3>

	Issue: The CSSWG resolved to be split skipping functionality into individual properties
	along the lines of 'text-decoration-skip-ink',
	to improve its cascading behavior.
	See <a href="https://github.com/w3c/csswg-drafts/issues/843">discussion</a>
	and <a href="https://lists.w3.org/Archives/Public/www-style/2017Feb/0049.html">resolution</a>.
	This section is a rough draft and has not yet been vetted by the CSSWG

	<pre class="propdef">
	Name: text-decoration-skip
	Value: none | auto
	Initial: See individual properties
	Applies to: all elements
	Inherited: yes
	Percentages: N/A
	Computed value: See individual properties
	Animation type: discrete
	</pre>

	The 'text-decoration-skip' property and its sub-properties
	('text-decoration-skip-self',
	'text-decoration-skip-box',
	'text-decoration-skip-inset',
	'text-decoration-skip-spaces',
	'text-decoration-skip-ink')
	control interruptions in line decorations
	for which the element or an ancestor is the [=decorating box=].
	The <dfn value for=text-decoration-skip>none</dfn> value
	sets all sub-properties to ''text-decoration-skip/none'',
	and the <dfn value for=text-decoration-skip>auto</dfn> value
	sets all sub-properties to their initial values.

	ISSUE: Is this ''text-decoration-skip/none'' definition Web-compatible?
	Do we also need to add an <css>ink</css> value for Web-compat?

	<p class="note">Note that these properties inherit
	and that descendant elements can have a different setting.</p>

    The following addition is made to the default UA stylesheet for HTML:
	<pre><code class="lang-css">
		ins, del { text-decoration-skip: none; }
	</code></pre>

	When the value of the 'text-decoration-line' property is either
	''spelling-error'' or ''grammar-error'',
	the UA may ignore any or all of these properties.

<h4 id="text-decoration-skip-self-property">
Skipping Spaces: the 'text-decoration-skip-self' property</h4>

	<pre class="propdef">
	Name: text-decoration-skip-self
	Value: auto | skip-all | [ skip-underline || skip-overline || skip-line-through ] | no-skip
	Initial: auto
	Applies to: all elements
	Inherited: no
	Percentages: N/A
	Computed value: specified keyword(s) except for ''text-decoration-skip-self/skip-all'', see below
	Animation type: discrete
	</pre>

	This property specifies whether
	any text decoration lines drawn by its ancestors
	are propagated to or drawn across the element.
	Values have the following meanings:</p>

	<dl dfn-type=value dfn-for=text-decoration-skip-self>
		<dt><dfn>auto</dfn></dt>
		<dd>
			Skip this element (its entire margin box) if it is an atomic inline
			(such as an image or inline-block).

		<dt><dfn>skip-all</dfn></dt>
		<dd>
			Skip this element (its entire margin box) unconditionally.
			Don't draw across it,
			don't propagate to it.

		<dt><dfn>skip-underline</dfn></dt>
		<dd>
			Skip this element (its entire margin box) unconditionally
			when drawing ancestor underlines.

		<dt><dfn>skip-overline</dfn></dt>
		<dd>
			Skip this element (its entire margin box) unconditionally
			when drawing ancestor overlines.

		<dt><dfn>skip-line-through</dfn></dt>
		<dd>
			Skip this element (its entire margin box) unconditionally
			when drawing ancestor line-throughs.

		<dt><dfn>no-skip</dfn></dt>
		<dd>
			Line decorations from ancestor [=decorating boxes=]
			are applied to this box unconditionally:
			drawn across it as if it were text if it is an [=atomic inline=],
			or propagated to it according to the usual rules if it is not.
	</dl>

	Note: The ''text-decoration-skip-self/no-skip'' value is provided
	to treat images as text when that is necessary,
	for example when representing glyphs that are not encoded in Unicode.

	The ''text-decoration-skip-self/skip-all'' keyword [=computed value|computes=]
	to ''skip-underline skip-overline skip-line-through''.
	Note, however, that this combination will <a href="https://www.w3.org/TR/cssom/#serializing-css-values">serialize</a>
	as ''text-decoration-skip-self/skip-all'' (shortest serialization).

<h4 id="text-decoration-skip-box-property">
Skipping Spaces: the 'text-decoration-skip-box' property</h4>

	<pre class="propdef">
	Name: text-decoration-skip-box
	Value: none | all
	Initial: none
	Applies to: all elements
	Inherited: yes
	Percentages: N/A
	Computed value: specified keyword(s)
	Animation type: discrete
	</pre>

	Issue: The CSSWG resolved to split 'text-decoration-skip' into sub-properties,
	but this value set has not yet been vetted by the CSSWG.

	This property specifies what parts of the element's box area
	any text decoration affecting the element must skip over.
	It controls only text decoration lines drawn by its ancestors.
	Values have the following meanings:</p>

	<dl dfn-type=value dfn-for=text-decoration-skip-box>
		<dt><dfn>none</dfn></dt>
		<dd>
			Skip nothing: line decorations from ancestor [=decorating boxes=]
			are drawn from margin edge to margin edge.

		<dt><dfn>all</dfn>
		<dd>
			When drawing text decoration lines applied to an ancestor [=decorating box=],
			skip over the box's own margin, border, and padding areas
			and only draw line decorations within its content area.

			This value only has an effect for decorations imposed by an ancestor;
			a <a>decorating box</a> never draws over its own box decoration.
	</dl>

<h4 id="text-decoration-skip-spaces-property">
Skipping Spaces: the 'text-decoration-skip-spaces' property</h4>

	<pre class="propdef">
	Name: text-decoration-skip-spaces
	Value: none | all | [ start || end ]
	Initial: start end
	Applies to: all elements
	Inherited: yes
	Percentages: N/A
	Computed value: specified keyword(s)
	Animation type: discrete
	</pre>

	ISSUE: Should the initial value be ''text-decoration-skip-spaces/none'' for Web-compat?
	If not, INS and DEL at least should be assigned ''text-decoration-skip-spaces/none'' in the UA default stylesheet.
	See also <a href="https://github.com/w3c/csswg-drafts/issues/4653">Issue 4653</a>.

	This property specifies whether text decoration skips any spaces.
	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:</p>

	<dl dfn-type=value dfn-for=text-decoration-skip-spaces>
		<dt><dfn>none</dfn></dt>
		<dd>
			[=Spacers=] are not skipped.
			They are decorated just like any other character.

		<dt><dfn>all</dfn></dt>
		<dd>
			Skip all [=spacers=]
			and all <a spec=css-text>word separators</a>
			plus any adjacent 'letter-spacing' or 'word-spacing'.

		<dt><dfn>start</dfn></dt>
		<dd>
			Skip all [=spacers=],
			plus any adjacent 'letter-spacing' or 'word-spacing',
			when located at the start of the line.

		<dt><dfn>end</dfn></dt>
		<dd>
			Skip all [=spacers=],
			plus any adjacent 'letter-spacing' or 'word-spacing',
			when located at the end of the line.
	</dl>

	For the purpose of this property,
	a <dfn>spacer</dfn> is
	any <a>typographic character unit</a> from [=Unicode General Category=] <code>Zs</code>
	except U+202F NARROW NO-BREAK SPACE.

<h4 id="text-decoration-skip-ink-property">
Skipping Glyphs: the 'text-decoration-skip-ink' property</h4>

	<pre class="propdef">
	Name: text-decoration-skip-ink
	Value: auto | none | all
	Initial: ''auto''
	Applies to: all elements
	Inherited: yes
	Percentages: N/A
	Computed value: specified keyword
	Animation type: discrete
	</pre>

	This property controls how overlines and underlines are drawn
	when they cross over a glyph.
	It affects all decorations originating from this element
	even if descendant boxes specify a different style.

	When enabled, decoration lines skip over where glyphs are drawn:
	interrupt the decoration line to let the shape of the text show through
	where the text decoration would otherwise cross over a glyph.
	The UA must also skip a small distance to either side of the glyph outline.

	<div class="figure">
		<img title="Skipping Descenders When Drawing an Underline"
		     alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline."
		     src="images/decoration-skip-ink.png">
		<p class="caption">Skipping Glyph Ink
	</div>

	<div class="issue">
		Ideographic scripts do not want to skip when ''text-decoration-skip-ink/auto''.
		How can we define this behavior?
		Are there more scripts wanting not to skip?
		Need some normative text describe how ''text-decoration-skip-ink/auto'' works.
		See
		<a href="https://lists.w3.org/Archives/Public/www-style/2017Feb/0069.html">telcon minutes</a>,
		<a href="https://github.com/w3c/alreq/issues/86">alreq#86</a>,
		<a href="https://github.com/w3c/csswg-drafts/issues/1288">csswg#1288</a>
	</div>

	This property only applies to overlines and underlines;
	line-throughs are always continuous.

	<dl>
		<dt><dfn value for="text-decoration-skip-ink">auto</dfn></dt>
		<dd>
			UAs <em>may</em> interrupt underlines and overlines
			where the line would cross glyph ink
			and to some distance to either side of the glyph outline.
			UAs <em>should</em> consider the script of the text (see note below)
			when determining whether to apply ink-skipping behavior to a given
			range of content.

		<dt><dfn value for="text-decoration-skip-ink">all</dfn></dt>
		<dd>
			UAs <em>must</em> interrupt underlines and overlines
			where the line would cross glyph ink
			and to some distance to either side of the glyph outline.

		<dt><dfn value for="text-decoration-skip-ink">none</dfn></dt>
		<dd>
			UA <em>must</em> draw continuous underlines and overlines,
			without interruptions when they cross over a glyph.
	</dl>

	<div class="note">
        Note: Implementation experience shows that ink-skipping behavior often
        produces undesirable results when underlined text includes ideographic characters,
        as the underline position (depending on the font and user agent involved)
        often clashes with almost all the glyphs,
        such that only occasional fragments of the line remain to be rendered.

        In principle, this could be resolved by authors using
        ''text-underline-position: under'' (or possibly 'text-underline-offset')
        to move the underline to a lower position that does not clash with the glyphs,
        but this is not always feasible, even if the user agent supports these properties
        and the author is aware of their potential.
        In particular, when a page contains arbitrary user-generated content,
        the author responsible for the design may not know whether CJK content will be present.
        And with mixed-script content,
        an underline position designed to work well for CJK content
        may look bad if the majority of the text is non-CJK.

        Therefore, when ''text-decoration-skip-ink/auto'' is in effect,
        a UA that implements ink-skipping <em>should</em> refrain from doing so in CJK contexts.
        (Authors who <em>do</em> want ink-skipping applied to CJK content can use
        the ''text-decoration-skip-ink/always'' value to explicitly request this.)

        Primarily, this means <em>not</em> applying ink-skipping for characters whose
        Unicode <a href="http://unicode.org/Public/UCD/latest/ucd/Scripts.txt">Script property</a>
        is any of the CJK scripts Han, Hiragana, Katakana, Bopomofo, or Hangul,
        or for characters whose Script property is Inherited or Common,
        and whose <a href="http://unicode.org/Public/UCD/latest/ucd/ScriptExtensions.txt">ScriptExtensions property</a>
        includes one or more of the CJK scripts.

        In addition, characters with a Unicode script property of Common and Inherited
        (primarily generic punctuation and symbols) need to be considered,
        as these may be used as part of a run of CJK-script content,
        and it is desirable to treat all text within a given script run in a consistent way.
        Therefore, the UA <em>should</em> resolve the text into script runs
        as described in the <a href="https://www.unicode.org/reports/tr24/#Usage_Model">“Implementation Notes”</a>
        of [[!UAX24]] “Unicode Script Property”, in particular subsections 5.1 and 5.2.
        After applying the heuristics described there (or a similar analysis of scripts),
        the UA <em>should</em> disable ink-skipping for all ranges of text
        that are determined to be in a CJK script.

        Issue: Are there other (non-CJK) scripts where it would be preferable
        to disable ink-skipping by default
        (when ''text-decoration-skip-ink/auto'' is in effect)?
        Perhaps Yi? Arabic?
        (See also discussion in <a href="https://github.com/w3c/csswg-drafts/issues/1288">Issue 1288</a>.)
    </div>

<h4 id="ink-skip-shape">
Shaping Interruptions</h4>

	When the UA interrupts underlines or overlines at glyph boundaries,
	the shape of the line at that boundary should
	follow the shape of the glyph.

	<div class="note">
		Note, this specification intentionally does not mandate a particular method
		for “following the shape” of the glyph
		so that UAs can take appropriate measures to handle
		aesthetic and performance considerations.
		For example,
		a UA could assume square line endings below a certain size threshold
		for performance reasons;
		or use trapezoidal endings to approximate curves,
		especially on thinner line decorations.
		In terms of aesthetic considerations,
		the UA might also consider what happens when the glyph boundary
		intersects only part of the line thickness
		or is slanted close to the horizontal--
		following the curve exactly
		could result in typographically-awkward wisps of underline.
		Whether to show the line within enclosed areas of a glyph is yet
		another consideration.

		<div class="figure">
			<img title="Wispy Leftovers of a Masked-Out Underline"
			       alt="Take, for example, the word “goal” with an underline striking through the bottom loop of the “g”.
			            Depending on the position and thickness of the underline,
			            we might see the entire thickness of the underline, or only part of it within the “g”.
			            This example shows a masked-out underline in two positions.
			            In the left pair the underline passes through the center of the bowl of the “g”:
			            the full thickness of the underline shows through the center,
			            filling it.
			            In the right pair the underline is slightly lower,
			            and thus the portion of the underline within the “g” can only show a partial thickness."
			       src="images/skip-ink-wisp.png">
			<p class="caption">
			Hiding the portion of the underline within the bowl gives a cleaner look to the type,
			while the curved ends of the underline outside it
			suggest the continuity of the underline through the letter
			by hugging its outer contour.
		</div>

	</div>

<h2 id="emphasis-marks">
Additional Controls for Emphasis Marks</h2>

	East Asian documents traditionally use small symbols next to each glyph to emphasize
	a run of text. For example:

	<div class="figure">
		<img alt="Example of emphasis in Japanese appearing over the text"
		     src="images/text-emphasis-ja.png" height="39" width="208">
		<p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text
	</div>

	The 'text-emphasis' shorthand, and its 'text-emphasis-style' and 'text-emphasis-color' longhands,
	can be used to apply such marks to the text.
	The 'text-emphasis-position' property, which inherits separately,
	allows setting the emphasis marks’ position with respect to the text.

	Issue: See also <a href="https://github.com/w3c/csswg-drafts/issues/1892">issue about continuity in size/position</a>.

<h3 id="text-emphasis-style-property">
Emphasis Mark Style: the 'text-emphasis-style' property</h3>

	<pre class="propdef">
	Name: text-emphasis-style
	Value: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <<string>>
	Initial: none
	Applies to: text
	Inherited: yes
	Computed value: the keyword ''text-emphasis-style/none'', a pair of keywords representing the shape and fill, or a string
	Animation type: discrete
	</pre>

	This property applies emphasis marks to the element's text.
	Values have the following meanings:

	<dl dfn-type=value dfn-for=text-emphasis-style>
		<dt><dfn>none</dfn>
		<dd>No emphasis marks.

		<dt><dfn>filled</dfn>
		<dd>The shape is filled with solid color.

		<dt><dfn value for="text-text-emphasis">open</dfn>
		<dd>The shape is hollow.

		<dt><dfn>dot</dfn>
		<dd>Display small circles as marks.
			The filled dot is U+2022 '&#x2022;', and the open dot is U+25E6 '&#x25e6;'.

		<dt><dfn>circle</dfn>
		<dd>Display large circles as marks.
		    The filled circle is U+25CF '&#x25cf;', and the open circle is U+25CB '&#x25cb;'.

		<dt><dfn>double-circle</dfn>
		<dd>Display double circles as marks.
		    The filled double-circle is U+25C9 '&#x25c9;', and the open double-circle is U+25CE '&#x25ce;'.

		<dt><dfn>triangle</dfn>
		<dd>Display triangles as marks.
		    The filled triangle is U+25B2 '&#x25b2;', and the open triangle is U+25B3 '&#x25b3;'.

		<dt><dfn>sesame</dfn>
		<dd>Display sesames as marks.
		    The filled sesame is U+FE45 '&#xfe45;', and the open sesame is U+FE46 '&#xfe46;'.

		<dt><dfn><<string>></dfn>
		<dd>Display the given string as marks.
		    Authors should not specify more than one [=character=] in &lt;string&gt;.
		    The UA may truncate or ignore strings consisting of more than one grapheme cluster.
	</dl>

	If a shape keyword is specified but neither of ''filled'' nor ''open'' is
	specified, ''filled'' is assumed. If only ''filled'' or ''open'' is specified,
	the shape keyword computes to ''text-emphasis-style/circle'' in horizontal <a>typographic modes</a> and
	''sesame'' in vertical <a>typographic modes</a>.

	The marks should be drawn using the element's font settings
	with the addition of the ''font-variant-east-asian/ruby'' feature
	and the size scaled down 50%.
	However, since not all fonts have all these glyphs,
	and some fonts use inappropriate sizes for emphasis marks in these code points,
	the UA may opt to use a font known to be good for emphasis marks,
	or the marks may instead be synthesized by the UA.
	Marks must remain upright in vertical <a>typographic modes</a>:
	like CJK characters, they do not rotate to match the writing mode.
	The orientation of marks in horizontal <a>typographic modes</a> of vertical <a>writing modes</a>
	is undefined in this level
	(but may be defined in a future level if definitive use cases arise).

	Note: One example of good fonts for emphasis marks is Adobe's open source
	<a href="https://github.com/adobe-fonts/kenten-generic">Kenten Generic OpenType Font</a>,
	which is specially designed for the emphasis marks.


	The marks are drawn once for each <a>typographic character unit</a>.
	However, emphasis marks are <em>not</em> drawn for:

	<ul>
		<li><a href="https://www.w3.org/TR/css-text-3/#word-separator">Word separators</a>
			or other <a>characters</a> 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>Punctuation--specifically,
			any <a>characters</a> that belong to the
			Unicode P* <a>general category</a> and
			do not <code>NFKD</code> normalize [[!UAX15]] to
			any of the following symbols:
			<table class="data">
				<tr><td>#	<td>U+0023	<td>NUMBER SIGN
				<tr><td>%	<td>U+0025	<td>PERCENT SIGN
				<tr><td>‰	<td>U+2030	<td>PER MILLE SIGN
				<tr><td>‱	<td>U+2031	<td>PER TEN THOUSAND SIGN
				<tr><td>٪	<td>U+066A	<td>ARABIC PERCENT SIGN
				<tr><td>؉	<td>U+0609	<td>ARABIC-INDIC PER MILLE SIGN
				<tr><td>؊	<td>U+060A	<td>ARABIC-INDIC PER TEN THOUSAND SIGN
				<tr><td>&	<td>U+0026	<td>AMPERSAND
				<tr><td>⁊	<td>U+204A	<td>TIRONIAN SIGN ET
				<tr><td>@	<td>U+0040	<td>COMMERCIAL AT
				<tr><td>§	<td>U+00A7	<td>SECTION SIGN
				<tr><td>¶	<td>U+00B6	<td>PILCROW SIGN
				<tr><td>⁋	<td>U+204B	<td>REVERSED PILCROW SIGN
				<tr><td>⁓	<td>U+2053	<td>SWUNG DASH
				<tr><td>〽	<td>U+303D	<td>PART ALTERNATION MARK
			</table>

		<li>Characters belonging to the Unicode classes for control codes
			and unassigned characters (Cc, Cf, Cn).
	</ul>

	Note: Control over which characters are marked will be added in Level 4.
	(The list of punctuation may also be further refined,
	particularly for non-CJK punctuation.)


<h3 id="text-emphasis-color-property">
Emphasis Mark Color: the 'text-emphasis-color' property</h3>

	<pre class="propdef">
	Name: text-emphasis-color
	Value: <<color>>
	Initial: currentcolor
	Applies to: text
	Inherited: yes
	Computed value: computed color
	Animation type: by computed value type
	</pre>

	This property specifies the foreground color of the emphasis marks.

	Note: ''currentcolor'' keyword computes to itself
	and is resolved to the value of 'color' after inheritance is performed.
	This means 'text-emphasis-color' by default matches the text 'color'
	even as 'color' changes across elements.

<h3 id="text-emphasis-property">
Emphasis Mark Shorthand: the 'text-emphasis' property</h3>

	<pre class="propdef shorthand">
	Name: text-emphasis
	Value: <<'text-emphasis-style'>> || <<'text-emphasis-color'>>
	</pre>

	This property is a shorthand for setting
	'text-emphasis-style' and 'text-emphasis-color'
	in one declaration.
	Omitted values are set to their initial values.

	<p class="note">Note that 'text-emphasis-position' is not reset in this
	shorthand. This is because typically the shape and color vary, but the
	position is consistent for a particular language throughout the document.
	Therefore the position should inherit independently.

<h3 id="text-emphasis-position-property">
Emphasis Mark Position: the 'text-emphasis-position' property</h3>

	<pre class="propdef">
	Name: text-emphasis-position
	Value: [ over | under ] && [ right | left ]?
	Initial: over right
	Applies to: text
	Inherited: yes
	Computed value: specified keyword(s)
	Animation type: discrete
	</pre>

	This property describes where emphasis marks are drawn at.
	If ''[ right | left ]'' is omitted, it defaults to ''text-emphasis-position/right''.
	The values have following meanings:

	<dl dfn-type=value dfn-for=text-emphasis-position>
		<dt><dfn>over</dfn>
		<dd>Draw marks over the text in horizontal <a>typographic modes</a>.

		<dt><dfn>under</dfn>
		<dd>Draw marks under the text in horizontal <a>typographic modes</a>.

		<dt><dfn>right</dfn>
		<dd>Draw marks to the right of the text in vertical <a>typographic modes</a>.

		<dt><dfn>left</dfn>
		<dd>Draw marks to the left of the text in vertical <a>typographic modes</a>.
	</dl>

	Emphasis marks are drawn exactly as if each character was
	assigned the mark as its ruby annotation text with the ruby position
	given by 'text-emphasis-position' and the ruby alignment as centered.
	Note that this position may be adjusted if it would conflict
	with underline or overline decorations.

	The effect of emphasis marks on the line height is the same as for
	ruby text.

	<div class="note">
		Note, the preferred position of emphasis marks depends on the
		language. In Japanese for example, the preferred position is
		''over right''. In Chinese, on the other hand, the preferred
		position is ''under right''.
		The informative table below summarizes the preferred
		emphasis mark positions for Chinese and Japanese:

		<table class="data">
			<caption>Preferred emphasis mark and ruby position</caption>
			<thead>
				<tr>
					<th scope="col" rowspan=2>Language
					<th scope="col" colspan=2>Preferred position
					<th scope="col" colspan=2 rowspan=2>Illustration
				<tr>
					<th>Horizontal
					<th>Vertical
			</thead>
			<tbody>
				<tr>
					<th scope="row">Japanese
					<td rowspan="3">over
					<td rowspan="3">right
					<td rowspan="3">
						<img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text."
						     title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"
						     src="images/text-emphasis-ja.png" height="39" width="209">

					<td rowspan="4">
						<img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text."
						     title="Emphasis applied on the right of a fragment of Japanese text"
						     src="images/text-emphasis-v.gif" height="79" width="34">
				<tr>
					<th scope="row">Korean
				<tr>
					<th scope="row">Mongolian
				<tr>
					<th scope="row">Chinese
					<td>under
					<td>right
					<td>
						<img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text."
						     title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"
						     src="images/text-emphasis-zh.png" height="39" width="140">
			</tbody>
		</table>
	</div>

	If emphasis marks are applied to characters
	for which ruby is drawn in the same position as the emphasis mark,
	the emphasis marks are placed outside the ruby.
	This includes <a href="https://www.w3.org/TR/css-ruby-1/#autohide">auto-hidden</a>
	and empty <a>ruby annotations</a>.

	<div class="figure">
		<img
		  alt="In this example, emphasis marks are applied to 4 characters, two of which have ruby.
		       The dots are placed above each character (aligned with the ruby) for the bare characters,
		       and above the ruby text for the annotated characters."
		  src="images/text-emphasis-ruby.png" width="134" height="50">
		<p class="caption">Emphasis marks applied to 4 characters, with ruby also on 2 of them
	</div>

	<div class="example">
		Some editors prefer to hide emphasis marks when they conflict with ruby.
		In HTML, this can be done with the following style rule:
		<pre>ruby { text-emphasis: none; }</pre>
		Some other editors prefer to hide ruby when they conflict with emphasis marks.
		In HTML, this can be done with the following pattern:
		<pre>
			em { text-emphasis: dot; } /* Set text-emphasis for &lt;em> elements */
			em rt { display: none; }   /* Hide ruby inside &lt;em> elements */
		</pre>
	</div>

<h3 id="text-emphasis-skip">
Emphasis Mark Skip: the 'text-emphasis-skip' property</h3>

	<p class="issue">This section is under brainstorming.
	It's also not yet clear if this property is needed quite yet, despite differences in desired behavior among publications.

	<pre class="propdef">
	Name: text-emphasis-skip
	Value: spaces || punctuation || symbols || narrow
	Initial: spaces punctuation
	Applies to: text
	Inherited: yes
	Percentages: N/A
	Computed value: specified keyword(s)
	Animation type: discrete
	</pre>

	This property describes for which characters marks are drawn.
	The values have following meanings:

	<dl dfn-type=value dfn-for=text-emphasis-skip>
		<dt><dfn>spaces</dfn>
		<dd>
			Skip <a href="https://www.w3.org/TR/css-text/#word-separator">word separators</a> or other <a>characters</a>
			belonging to the Unicode separator category (Z*).
			(But note that emphasis marks <em>are</em> drawn for a space
			 that combines with any combining characters.)

		<dt><dfn>punctuation</dfn>
		<dd>
			Skip punctuation.
			Punctuation in this definition includes characters belonging to
			the Unicode P* category
			that are not defined as ''symbols'' (see below).

		<dt><dfn>symbols</dfn>
		<dd>Skip symbols.
			Symbols in this definition includes
			all <a>typographic character units</a> belonging to
			the Unicode S* <a>general category</a>
			as well as any which are <code>NFKD</code>-equivalent [[!UAX15]]
			to the following <a>characters</a> from the Unicode Po category:

			<table class="data">
				<tr><td>#	<td>U+0023	<td>NUMBER SIGN
				<tr><td>%	<td>U+0025	<td>PERCENT SIGN
				<tr><td>‰	<td>U+2030	<td>PER MILLE SIGN
				<tr><td>‱	<td>U+2031	<td>PER TEN THOUSAND SIGN
				<tr><td>٪	<td>U+066A	<td>ARABIC PERCENT SIGN
				<tr><td>؉	<td>U+0609	<td>ARABIC-INDIC PER MILLE SIGN
				<tr><td>؊	<td>U+060A	<td>ARABIC-INDIC PER TEN THOUSAND SIGN
				<tr><td>&	<td>U+0026	<td>AMPERSAND
				<tr><td>⁊	<td>U+204A	<td>TIRONIAN SIGN E[[
				<tr><td>@	<td>U+0040	<td>COMMERCIAL AT
				<tr><td>§	<td>U+00A7	<td>SECTION SIGN
				<tr><td>¶	<td>U+00B6	<td>PILCROW SIGN
				<tr><td>⁋	<td>U+204B	<td>REVERSED PILCROW SIGN
				<tr><td>⁓	<td>U+2053	<td>SWUNG DASH
				<tr><td>〽️	<td>U+303D	<td>PART ALTERNATION MARK
			</table>

		<dt><dfn>narrow</dfn>
		<dd>Skip characters where the <code>East_Asian_Width</code> property [[!UAX11]]
			of the Unicode database [[!UAX44]] is not F (Fullwidth) or W (Wide).
	</dl>

	Characters belonging to the Unicode classes for control codes
	and unassigned characters (Cc, Cf, Cn) are skipped
	regardless of the value of this property.

	<p class="issue">This syntax requires UA to implement drawing marks for spaces.
	Is there any use case for doing so?
	If not, should we modify the syntax not to allow drawing marks for spaces?

	Issue: See also <a href="https://github.com/w3c/csswg-drafts/issues/839">discussion of the initial value</a>.

<!--

Some notes from Koji :

	Here's what Kobayashi-sensei and I've got.

	We have categorized to:
	1. Controls
	2. Spaces
	3. Connectors
	4. Symbols
	5. Delimiters

	>From these groups, his recommendation is not to put emphasis marks to any of these by default, including symbols.

	1 is C* except Co as we discussed, and 2 is Z*. These are easy.

	3: Connectors are Pc and Pd, plus U+30FB KATAKANA MIDDLE DOT. They are used to "connect", rather than "delimit".

	4: Symbols include more than we have in the spec; #, &, %, @, $, ...

	5: Delimiters are comma, full-stops, parenthesis, etc.; they're used to "delimit".

	Category Po is tough one, as I expected (and you might as well I guess :). By looking at his examples, it has 3, 4, and 5, all mixed.

	Here're options I came up:

	OPTION 1: Categorize every code point of Po (there are 402) into 3, 4, and 5, and list them up in the spec.
	OPTION 2: UAX #29 Text Segmentation: Sentence=Close|ATerm|SContinue|STerm are 5, in addition to Ps, Pe, Pi, Pf, and other Po are 4.
	OPTION 3: More simplified; just make all Po as 4: Symbols. It includes full-stops for instance which is not ideal, but simple. Either way, default is ok (if we make symbols to skip by default as Kobayashi-sensei suggested.)

	My preference is OPTION 2, I'm ok with 3. I don't like 1. What do you think?

	U+30FB still cannot be handled, so we could make it as the only exception, but I think just ignoring it is also acceptable (authors still can specify "keep-symbol" to put emphasis marks on them.)

	Three more things I'd like to have your opinions:
	1. Name of value for "connectors": connectors, dashes, hyphens?
	2. What do you think to skip-narrow by default? I have no idea how common emphasis marks for Tibetan is, but his definition includes skip-narrow.
	3. If we take Kobayashi-sensei's list, skip-symbols is also default, so most values other than skip-narrow is "keep-*". Maybe we should change property name?

	I'm copying all Sentence=Close|ATerm|SContinue|STerm for your reference, but you can play with the spreadsheet either on Windows Live or Google docs if you'd like:
	http://cid-1dfc0a803975458e.office.live.com/edit.aspx/.Public/Unicode.xlsx
	https://spreadsheets.google.com/ccc?key=0Ai2NamWX-WptdGpGZW9BdkhnVkVTTXFpMzhQTEloZ2c

	0021	EXCLAMATION MARK	Po	STerm
	0022	QUOTATION MARK	Po	Close
	0027	APOSTROPHE	Po	Close
	0028	LEFT PARENTHESIS	Ps	Close
	0029	RIGHT PARENTHESIS	Pe	Close
	002C	COMMA	Po	SContinue
	002D	HYPHEN-MINUS	Pd	SContinue
	002E	FULL STOP	Po	ATerm
	003A	COLON	Po	SContinue
	003F	QUESTION MARK	Po	STerm
	005B	LEFT SQUARE BRACKET	Ps	Close
	005D	RIGHT SQUARE BRACKET	Pe	Close
	007B	LEFT CURLY BRACKET	Ps	Close
	007D	RIGHT CURLY BRACKET	Pe	Close
	00AB	LEFT-POINTING DOUBLE ANGLE QUOTATION MARK	Pi	Close
	00BB	RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK	Pf	Close
	055C	ARMENIAN EXCLAMATION MARK	Po	STerm
	055D	ARMENIAN COMMA	Po	SContinue
	055E	ARMENIAN QUESTION MARK	Po	STerm
	0589	ARMENIAN FULL STOP	Po	STerm
	060C	ARABIC COMMA	Po	SContinue
	060D	ARABIC DATE SEPARATOR	Po	SContinue
	061F	ARABIC QUESTION MARK	Po	STerm
	06D4	ARABIC FULL STOP	Po	STerm
	0700	SYRIAC END OF PARAGRAPH	Po	STerm
	0701	SYRIAC SUPRALINEAR FULL STOP	Po	STerm
	0702	SYRIAC SUBLINEAR FULL STOP	Po	STerm
	07F8	NKO COMMA	Po	SContinue
	07F9	NKO EXCLAMATION MARK	Po	STerm
	0964	DEVANAGARI DANDA	Po	STerm
	0965	DEVANAGARI DOUBLE DANDA	Po	STerm
	0F3A	TIBETAN MARK GUG RTAGS GYON	Ps	Close
	0F3B	TIBETAN MARK GUG RTAGS GYAS	Pe	Close
	0F3C	TIBETAN MARK ANG KHANG GYON	Ps	Close
	0F3D	TIBETAN MARK ANG KHANG GYAS	Pe	Close
	104A	MYANMAR SIGN LITTLE SECTION	Po	STerm
	104B	MYANMAR SIGN SECTION	Po	STerm
	1362	ETHIOPIC FULL STOP	Po	STerm
	1367	ETHIOPIC QUESTION MARK	Po	STerm
	1368	ETHIOPIC PARAGRAPH SEPARATOR	Po	STerm
	166E	CANADIAN SYLLABICS FULL STOP	Po	STerm
	169B	OGHAM FEATHER MARK	Ps	Close
	169C	OGHAM REVERSED FEATHER MARK	Pe	Close
	1735	PHILIPPINE SINGLE PUNCTUATION	Po	STerm
	1736	PHILIPPINE DOUBLE PUNCTUATION	Po	STerm
	1802	MONGOLIAN COMMA	Po	SContinue
	1803	MONGOLIAN FULL STOP	Po	STerm
	1808	MONGOLIAN MANCHU COMMA	Po	SContinue
	1809	MONGOLIAN MANCHU FULL STOP	Po	STerm
	1944	LIMBU EXCLAMATION MARK	Po	STerm
	1945	LIMBU QUESTION MARK	Po	STerm
	1AA8	TAI THAM SIGN KAAN	Po	STerm
	1AA9	TAI THAM SIGN KAANKUU	Po	STerm
	1AAA	TAI THAM SIGN SATKAAN	Po	STerm
	1AAB	TAI THAM SIGN SATKAANKUU	Po	STerm
	1B5A	BALINESE PANTI	Po	STerm
	1B5B	BALINESE PAMADA	Po	STerm
	1B5E	BALINESE CARIK SIKI	Po	STerm
	1B5F	BALINESE CARIK PAREREN	Po	STerm
	1C3B	LEPCHA PUNCTUATION TA-ROL	Po	STerm
	1C3C	LEPCHA PUNCTUATION NYET THYOOM TA-ROL	Po	STerm
	1C7E	OL CHIKI PUNCTUATION MUCAAD	Po	STerm
	1C7F	OL CHIKI PUNCTUATION DOUBLE MUCAAD	Po	STerm
	2013	EN DASH	Pd	SContinue
	2014	EM DASH	Pd	SContinue
	2018	LEFT SINGLE QUOTATION MARK	Pi	Close
	2019	RIGHT SINGLE QUOTATION MARK	Pf	Close
	201A	SINGLE LOW-9 QUOTATION MARK	Ps	Close
	201B	SINGLE HIGH-REVERSED-9 QUOTATION MARK	Pi	Close
	201C	LEFT DOUBLE QUOTATION MARK	Pi	Close
	201D	RIGHT DOUBLE QUOTATION MARK	Pf	Close
	201E	DOUBLE LOW-9 QUOTATION MARK	Ps	Close
	201F	DOUBLE HIGH-REVERSED-9 QUOTATION MARK	Pi	Close
	2024	ONE DOT LEADER	Po	ATerm
	2039	SINGLE LEFT-POINTING ANGLE QUOTATION MARK	Pi	Close
	203A	SINGLE RIGHT-POINTING ANGLE QUOTATION MARK	Pf	Close
	203C	DOUBLE EXCLAMATION MARK	Po	STerm
	203D	INTERROBANG	Po	STerm
	2045	LEFT SQUARE BRACKET WITH QUILL	Ps	Close
	2046	RIGHT SQUARE BRACKET WITH QUILL	Pe	Close
	2047	DOUBLE QUESTION MARK	Po	STerm
	2048	QUESTION EXCLAMATION MARK	Po	STerm
	2049	EXCLAMATION QUESTION MARK	Po	STerm
	207D	SUPERSCRIPT LEFT PARENTHESIS	Ps	Close
	207E	SUPERSCRIPT RIGHT PARENTHESIS	Pe	Close
	208D	SUBSCRIPT LEFT PARENTHESIS	Ps	Close
	208E	SUBSCRIPT RIGHT PARENTHESIS	Pe	Close
	2329	LEFT-POINTING ANGLE BRACKET	Ps	Close
	232A	RIGHT-POINTING ANGLE BRACKET	Pe	Close
	275B	HEAVY SINGLE TURNED COMMA QUOTATION MARK ORNAMENT	So	Close
	275C	HEAVY SINGLE COMMA QUOTATION MARK ORNAMENT	So	Close
	275D	HEAVY DOUBLE TURNED COMMA QUOTATION MARK ORNAMENT	So	Close
	275E	HEAVY DOUBLE COMMA QUOTATION MARK ORNAMENT	So	Close
	2768	MEDIUM LEFT PARENTHESIS ORNAMENT	Ps	Close
	2769	MEDIUM RIGHT PARENTHESIS ORNAMENT	Pe	Close
	276A	MEDIUM FLATTENED LEFT PARENTHESIS ORNAMENT	Ps	Close
	276B	MEDIUM FLATTENED RIGHT PARENTHESIS ORNAMENT	Pe	Close
	276C	MEDIUM LEFT-POINTING ANGLE BRACKET ORNAMENT	Ps	Close
	276D	MEDIUM RIGHT-POINTING ANGLE BRACKET ORNAMENT	Pe	Close
	276E	HEAVY LEFT-POINTING ANGLE QUOTATION MARK ORNAMENT	Ps	Close
	276F	HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT	Pe	Close
	2770	HEAVY LEFT-POINTING ANGLE BRACKET ORNAMENT	Ps	Close
	2771	HEAVY RIGHT-POINTING ANGLE BRACKET ORNAMENT	Pe	Close
	2772	LIGHT LEFT TORTOISE SHELL BRACKET ORNAMENT	Ps	Close
	2773	LIGHT RIGHT TORTOISE SHELL BRACKET ORNAMENT	Pe	Close
	2774	MEDIUM LEFT CURLY BRACKET ORNAMENT	Ps	Close
	2775	MEDIUM RIGHT CURLY BRACKET ORNAMENT	Pe	Close
	27C5	LEFT S-SHAPED BAG DELIMITER	Ps	Close
	27C6	RIGHT S-SHAPED BAG DELIMITER	Pe	Close
	27E6	MATHEMATICAL LEFT WHITE SQUARE BRACKET	Ps	Close
	27E7	MATHEMATICAL RIGHT WHITE SQUARE BRACKET	Pe	Close
	27E8	MATHEMATICAL LEFT ANGLE BRACKET	Ps	Close
	27E9	MATHEMATICAL RIGHT ANGLE BRACKET	Pe	Close
	27EA	MATHEMATICAL LEFT DOUBLE ANGLE BRACKET	Ps	Close
	27EB	MATHEMATICAL RIGHT DOUBLE ANGLE BRACKET	Pe	Close
	27EC	MATHEMATICAL LEFT WHITE TORTOISE SHELL BRACKET	Ps	Close
	27ED	MATHEMATICAL RIGHT WHITE TORTOISE SHELL BRACKET	Pe	Close
	27EE	MATHEMATICAL LEFT FLATTENED PARENTHESIS	Ps	Close
	27EF	MATHEMATICAL RIGHT FLATTENED PARENTHESIS	Pe	Close
	2983	LEFT WHITE CURLY BRACKET	Ps	Close
	2984	RIGHT WHITE CURLY BRACKET	Pe	Close
	2985	LEFT WHITE PARENTHESIS	Ps	Close
	2986	RIGHT WHITE PARENTHESIS	Pe	Close
	2987	Z NOTATION LEFT IMAGE BRACKET	Ps	Close
	2988	Z NOTATION RIGHT IMAGE BRACKET	Pe	Close
	2989	Z NOTATION LEFT BINDING BRACKET	Ps	Close
	298A	Z NOTATION RIGHT BINDING BRACKET	Pe	Close
	298B	LEFT SQUARE BRACKET WITH UNDERBAR	Ps	Close
	298C	RIGHT SQUARE BRACKET WITH UNDERBAR	Pe	Close
	298D	LEFT SQUARE BRACKET WITH TICK IN TOP CORNER	Ps	Close
	298E	RIGHT SQUARE BRACKET WITH TICK IN BOTTOM CORNER	Pe	Close
	298F	LEFT SQUARE BRACKET WITH TICK IN BOTTOM CORNER	Ps	Close
	2990	RIGHT SQUARE BRACKET WITH TICK IN TOP CORNER	Pe	Close
	2991	LEFT ANGLE BRACKET WITH DOT	Ps	Close
	2992	RIGHT ANGLE BRACKET WITH DOT	Pe	Close
	2993	LEFT ARC LESS-THAN BRACKET	Ps	Close
	2994	RIGHT ARC GREATER-THAN BRACKET	Pe	Close
	2995	DOUBLE LEFT ARC GREATER-THAN BRACKET	Ps	Close
	2996	DOUBLE RIGHT ARC LESS-THAN BRACKET	Pe	Close
	2997	LEFT BLACK TORTOISE SHELL BRACKET	Ps	Close
	2998	RIGHT BLACK TORTOISE SHELL BRACKET	Pe	Close
	29D8	LEFT WIGGLY FENCE	Ps	Close
	29D9	RIGHT WIGGLY FENCE	Pe	Close
	29DA	LEFT DOUBLE WIGGLY FENCE	Ps	Close
	29DB	RIGHT DOUBLE WIGGLY FENCE	Pe	Close
	29FC	LEFT-POINTING CURVED ANGLE BRACKET	Ps	Close
	29FD	RIGHT-POINTING CURVED ANGLE BRACKET	Pe	Close
	2E00	RIGHT ANGLE SUBSTITUTION MARKER	Po	Close
	2E01	RIGHT ANGLE DOTTED SUBSTITUTION MARKER	Po	Close
	2E02	LEFT SUBSTITUTION BRACKET	Pi	Close
	2E03	RIGHT SUBSTITUTION BRACKET	Pf	Close
	2E04	LEFT DOTTED SUBSTITUTION BRACKET	Pi	Close
	2E05	RIGHT DOTTED SUBSTITUTION BRACKET	Pf	Close
	2E06	RAISED INTERPOLATION MARKER	Po	Close
	2E07	RAISED DOTTED INTERPOLATION MARKER	Po	Close
	2E08	DOTTED TRANSPOSITION MARKER	Po	Close
	2E09	LEFT TRANSPOSITION BRACKET	Pi	Close
	2E0A	RIGHT TRANSPOSITION BRACKET	Pf	Close
	2E0B	RAISED SQUARE	Po	Close
	2E0C	LEFT RAISED OMISSION BRACKET	Pi	Close
	2E0D	RIGHT RAISED OMISSION BRACKET	Pf	Close
	2E1C	LEFT LOW PARAPHRASE BRACKET	Pi	Close
	2E1D	RIGHT LOW PARAPHRASE BRACKET	Pf	Close
	2E20	LEFT VERTICAL BAR WITH QUILL	Pi	Close
	2E21	RIGHT VERTICAL BAR WITH QUILL	Pf	Close
	2E22	TOP LEFT HALF BRACKET	Ps	Close
	2E23	TOP RIGHT HALF BRACKET	Pe	Close
	2E24	BOTTOM LEFT HALF BRACKET	Ps	Close
	2E25	BOTTOM RIGHT HALF BRACKET	Pe	Close
	2E26	LEFT SIDEWAYS U BRACKET	Ps	Close
	2E27	RIGHT SIDEWAYS U BRACKET	Pe	Close
	2E28	LEFT DOUBLE PARENTHESIS	Ps	Close
	2E29	RIGHT DOUBLE PARENTHESIS	Pe	Close
	2E2E	REVERSED QUESTION MARK	Po	STerm
	3001	IDEOGRAPHIC COMMA	Po	SContinue
	3002	IDEOGRAPHIC FULL STOP	Po	STerm
	3008	LEFT ANGLE BRACKET	Ps	Close
	3009	RIGHT ANGLE BRACKET	Pe	Close
	300A	LEFT DOUBLE ANGLE BRACKET	Ps	Close
	300B	RIGHT DOUBLE ANGLE BRACKET	Pe	Close
	300C	LEFT CORNER BRACKET	Ps	Close
	300D	RIGHT CORNER BRACKET	Pe	Close
	300E	LEFT WHITE CORNER BRACKET	Ps	Close
	300F	RIGHT WHITE CORNER BRACKET	Pe	Close
	3010	LEFT BLACK LENTICULAR BRACKET	Ps	Close
	3011	RIGHT BLACK LENTICULAR BRACKET	Pe	Close
	3014	LEFT TORTOISE SHELL BRACKET	Ps	Close
	3015	RIGHT TORTOISE SHELL BRACKET	Pe	Close
	3016	LEFT WHITE LENTICULAR BRACKET	Ps	Close
	3017	RIGHT WHITE LENTICULAR BRACKET	Pe	Close
	3018	LEFT WHITE TORTOISE SHELL BRACKET	Ps	Close
	3019	RIGHT WHITE TORTOISE SHELL BRACKET	Pe	Close
	301A	LEFT WHITE SQUARE BRACKET	Ps	Close
	301B	RIGHT WHITE SQUARE BRACKET	Pe	Close
	301D	REVERSED DOUBLE PRIME QUOTATION MARK	Ps	Close
	301E	DOUBLE PRIME QUOTATION MARK	Pe	Close
	301F	LOW DOUBLE PRIME QUOTATION MARK	Pe	Close
	A4FF	LISU PUNCTUATION FULL STOP	Po	STerm
	A60E	VAI FULL STOP	Po	STerm
	A60F	VAI QUESTION MARK	Po	STerm
	A6F3	BAMUM FULL STOP	Po	STerm
	A6F7	BAMUM QUESTION MARK	Po	STerm
	A876	PHAGS-PA MARK SHAD	Po	STerm
	A877	PHAGS-PA MARK DOUBLE SHAD	Po	STerm
	A8CE	SAURASHTRA DANDA	Po	STerm
	A8CF	SAURASHTRA DOUBLE DANDA	Po	STerm
	A92F	KAYAH LI SIGN SHYA	Po	STerm
	A9C8	JAVANESE PADA LINGSA	Po	STerm
	A9C9	JAVANESE PADA LUNGSI	Po	STerm
	AA5D	CHAM PUNCTUATION DANDA	Po	STerm
	AA5E	CHAM PUNCTUATION DOUBLE DANDA	Po	STerm
	AA5F	CHAM PUNCTUATION TRIPLE DANDA	Po	STerm
	ABEB	MEETEI MAYEK CHEIKHEI	Po	STerm
	FD3E	ORNATE LEFT PARENTHESIS	Ps	Close
	FD3F	ORNATE RIGHT PARENTHESIS	Pe	Close
	FE10	PRESENTATION FORM FOR VERTICAL COMMA	Po	SContinue
	FE11	PRESENTATION FORM FOR VERTICAL IDEOGRAPHIC COMMA	Po	SContinue
	FE13	PRESENTATION FORM FOR VERTICAL COLON	Po	SContinue
	FE17	PRESENTATION FORM FOR VERTICAL LEFT WHITE LENTICULAR BRACKET	Ps	Close
	FE18	PRESENTATION FORM FOR VERTICAL RIGHT WHITE LENTICULAR BRAKCET	Pe	Close
	FE31	PRESENTATION FORM FOR VERTICAL EM DASH	Pd	SContinue
	FE32	PRESENTATION FORM FOR VERTICAL EN DASH	Pd	SContinue
	FE35	PRESENTATION FORM FOR VERTICAL LEFT PARENTHESIS	Ps	Close
	FE36	PRESENTATION FORM FOR VERTICAL RIGHT PARENTHESIS	Pe	Close
	FE37	PRESENTATION FORM FOR VERTICAL LEFT CURLY BRACKET	Ps	Close
	FE38	PRESENTATION FORM FOR VERTICAL RIGHT CURLY BRACKET	Pe	Close
	FE39	PRESENTATION FORM FOR VERTICAL LEFT TORTOISE SHELL BRACKET	Ps	Close
	FE3A	PRESENTATION FORM FOR VERTICAL RIGHT TORTOISE SHELL BRACKET	Pe	Close
	FE3B	PRESENTATION FORM FOR VERTICAL LEFT BLACK LENTICULAR BRACKET	Ps	Close
	FE3C	PRESENTATION FORM FOR VERTICAL RIGHT BLACK LENTICULAR BRACKET	Pe	Close
	FE3D	PRESENTATION FORM FOR VERTICAL LEFT DOUBLE ANGLE BRACKET	Ps	Close
	FE3E	PRESENTATION FORM FOR VERTICAL RIGHT DOUBLE ANGLE BRACKET	Pe	Close
	FE3F	PRESENTATION FORM FOR VERTICAL LEFT ANGLE BRACKET	Ps	Close
	FE40	PRESENTATION FORM FOR VERTICAL RIGHT ANGLE BRACKET	Pe	Close
	FE41	PRESENTATION FORM FOR VERTICAL LEFT CORNER BRACKET	Ps	Close
	FE42	PRESENTATION FORM FOR VERTICAL RIGHT CORNER BRACKET	Pe	Close
	FE43	PRESENTATION FORM FOR VERTICAL LEFT WHITE CORNER BRACKET	Ps	Close
	FE44	PRESENTATION FORM FOR VERTICAL RIGHT WHITE CORNER BRACKET	Pe	Close
	FE47	PRESENTATION FORM FOR VERTICAL LEFT SQUARE BRACKET	Ps	Close
	FE48	PRESENTATION FORM FOR VERTICAL RIGHT SQUARE BRACKET	Pe	Close
	FE50	SMALL COMMA	Po	SContinue
	FE51	SMALL IDEOGRAPHIC COMMA	Po	SContinue
	FE52	SMALL FULL STOP	Po	ATerm
	FE55	SMALL COLON	Po	SContinue
	FE56	SMALL QUESTION MARK	Po	STerm
	FE57	SMALL EXCLAMATION MARK	Po	STerm
	FE58	SMALL EM DASH	Pd	SContinue
	FE59	SMALL LEFT PARENTHESIS	Ps	Close
	FE5A	SMALL RIGHT PARENTHESIS	Pe	Close
	FE5B	SMALL LEFT CURLY BRACKET	Ps	Close
	FE5C	SMALL RIGHT CURLY BRACKET	Pe	Close
	FE5D	SMALL LEFT TORTOISE SHELL BRACKET	Ps	Close
	FE5E	SMALL RIGHT TORTOISE SHELL BRACKET	Pe	Close
	FE63	SMALL HYPHEN-MINUS	Pd	SContinue
	FF01	FULLWIDTH EXCLAMATION MARK	Po	STerm
	FF08	FULLWIDTH LEFT PARENTHESIS	Ps	Close
	FF09	FULLWIDTH RIGHT PARENTHESIS	Pe	Close
	FF0C	FULLWIDTH COMMA	Po	SContinue
	FF0D	FULLWIDTH HYPHEN-MINUS	Pd	SContinue
	FF0E	FULLWIDTH FULL STOP	Po	ATerm
	FF1A	FULLWIDTH COLON	Po	SContinue
	FF1F	FULLWIDTH QUESTION MARK	Po	STerm
	FF3B	FULLWIDTH LEFT SQUARE BRACKET	Ps	Close
	FF3D	FULLWIDTH RIGHT SQUARE BRACKET	Pe	Close
	FF5B	FULLWIDTH LEFT CURLY BRACKET	Ps	Close
	FF5D	FULLWIDTH RIGHT CURLY BRACKET	Pe	Close
	FF5F	FULLWIDTH LEFT WHITE PARENTHESIS	Ps	Close
	FF60	FULLWIDTH RIGHT WHITE PARENTHESIS	Pe	Close
	FF61	HALFWIDTH IDEOGRAPHIC FULL STOP	Po	STerm
	FF62	HALFWIDTH LEFT CORNER BRACKET	Ps	Close
	FF63	HALFWIDTH RIGHT CORNER BRACKET	Pe	Close
	FF64	HALFWIDTH IDEOGRAPHIC COMMA	Po	SContinue
	10A56	KHAROSHTHI PUNCTUATION DANDA	Po	STerm
	10A57	KHAROSHTHI PUNCTUATION DOUBLE DANDA	Po	STerm
	11047	BRAHMI DANDA	Po	STerm
	11048	BRAHMI DOUBLE DANDA	Po	STerm
	110BE	KAITHI SECTION MARK	Po	STerm
	110BF	KAITHI DOUBLE SECTION MARK	Po	STerm
	110C0	KAITHI DANDA	Po	STerm
	110C1	KAITHI DOUBLE DANDA	Po	STerm

-->

<h2 id="text-shadow-property">
Text Shadows: the 'text-shadow' property</h2>

	<pre class="propdef">
	Name: text-shadow
	Value: none | <<shadow>>#
	Initial: none
	Applies to: text
	Inherited: yes
	Computed value: either the keyword ''box-shadow/none'' or
		a list, each item consisting of four absolute lengths
		plus a computed color
		and optionally also an ''text-shadow/inset'' keyword
	Animation type: <a href="https://www.w3.org/TR/web-animations-1/#animating-shadow-lists">as shadow list</a>
	</pre>

	This property accepts a comma-separated list of shadow effects
	to be applied to the text of the element.
	Values are interpreted as for 'box-shadow' [[!CSS-BACKGROUNDS-3]].
	Each layer shadows the element's text and all its text decorations
	(composited together).
	The shadow effects are applied front-to-back:
	the first shadow is on top.
	The shadows may thus overlay each other.

	Unlike 'box-shadow',
	the <a spec=css-backgrounds-3>spread distance</a>
	is strictly interpreted as outset distance
	from any point of the glyph outline,
	and therefore, similar to the blur radius,
	creates rounded, rather than sharp, corners.
	Negative spread values are invalid.

	ISSUE(7250): Leave corner shaping undefined?

	<dfn>Outer text shadows</dfn>
	(specified without the ''box-shadow/inset'' keyword)
	shadow the text--
	including any text stroke [[!FILL-STROKE-3]]--
	as if it were cut and raised above the surrounding canvas.
	Unlike 'box-shadow',
	outer text shadows are not clipped to the shadowed shape
	and may show through if the text is partially-transparent.

	<dfn>Inner text shadows</dfn>
	(specified with the ''box-shadow/inset'' keyword)
	shadow the canvas--
	and any text stroke [[!FILL-STROKE-3]]--
	as if the text were cut and dropped below the surrounding canvas.
	They are therefore only drawn within the inner edge of the stroke.

	[=Outer text shadows=] must be painted at a stack level
	between the element's border/background (if present)
	and the elements text and text decoration.
	[=Inner text shadows=] must be painted
	over the text and its decorations.
	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.)

	ISSUE(7251): Stacking relationship to stroke?

	Like 'box-shadow', text shadows do not influence layout,
	and do not trigger scrolling
	or increase the size of the <a>scrollable overflow region</a>.

	The ''text-shadow'' property applies to both the
	<code>::first-line</code> and <code>::first-letter</code>
	pseudo-elements.

<h2 id="painting">
Painting Text Decorations</h2>

<h3 id="painting-order">
Painting Order of Text Decorations</h3>

	As in [[!CSS2]], text decorations are drawn immediately over/under the text they decorate,
	in the following order (bottommost first):

	<ul>
		<li>shadows ('text-shadow')
		<li>underlines ('text-decoration')
		<li>overlines ('text-decoration')
		<li>text
		<li>emphasis marks ('text-emphasis')
		<li>line-through ('text-decoration')
	</ul>


	Where line decorations are drawn across box decorations or atomic inlines,
	they are drawn over non-positioned content and just below any positioned descendants
	(immediately below layer #8 in CSS2.1 Appendix E).

<h3 id="overflow">
Overflow of Text Decorations</h3>

	Text decorations that leak outside a <a>box</a>
	are considered <a>ink overflow</a>:
	they do not extend the <a>scrollable overflow region</a>.
	[[css-overflow-3]]

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

	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="default-stylesheet">
Appendix B: Default UA Stylesheet</h2>


	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">
		  /* typical styling of HTML */
		  blink {
		    text-decoration-line: blink;
		  }
		  s, strike, del {
		    text-decoration: line-through;
		  }
		  u, ins, :link, :visited {
		    text-decoration: underline;
		  }
		  abbr[title], acronym[title] {
		    text-decoration: dotted underline;
		  }

		  /* disable inheritance of text-emphasis marks to ruby text:
		    emphasis marks should only apply to base text */
		  rt { text-emphasis: none; }

		  /* set language-appropriate default emphasis mark position */
		  :root:lang(zh), [lang|=zh] { text-emphasis-position: under right; }
		  [lang|=ja], [lang|=ko]     { text-emphasis-position: over right; }

		  /* set language-appropriate default underline position */
		  :root:lang(ja), [lang|=ja],
		  :root:lang(mn), [lang|=mn],
		  :root:lang(ko), [lang|=ko] { text-underline-position: right; }
		  :root:lang(zh), [lang|=zh] { text-underline-position: left;  }
		  /* auto is chosen (implied) above instead of under
		     due to content-compatibility concerns */
		</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]</kbd> in the subject line.

	<div class='example'>
		While ''text-decoration-line: blink'' can't be fully reproduced with other existing properties,
		authors can achieve a very similar effect with the following CSS:

		<pre>
			@keyframes blink {
			  0% {
			    visibility: hidden;
			    animation-timing-function: step-end;
			  }
			  25%, 100% {
			    visibility: visible;
			  }
			}
			blink {
			  animation: blink 1s infinite;
			}
		</pre>
	</div>

<h2 class="no-num" id="changes">Appendix C:
Changes</h2>

<h3 class="no-num" id="changes-2022">
Changes since the 4 May 2022 Working Draft</h3>

	Significant changes since the
	<a href="https://www.w3.org/TR/2022/WD-css-text-decor-4-20220504/">4 May 2022 Working Draft</a>:
	<ul>
		<li>Redesigned 'text-decoration-skip-self'.
			(<a href="https://github.com/w3c/csswg-drafts/issues/2885">Issue 2885</a>)
		<li>Replaced <css>text-decoration-skip-edges</css> with 'text-decoration-trim'.
			(<a href="https://github.com/w3c/csswg-drafts/issues/4557">Issue 4557</a>)
		<li>Redefined [=spacers=] for 'text-decoration-skip-spaces' to reference [=Unicode General Category=] <code>Zs</code>
			and to only additionally include word separators when skipping all spaces.
			(<a href="https://github.com/w3c/csswg-drafts/issues/5249">Issue 5249</a>)
		<li>Disallowed ''grammar-error'' and ''spelling-error'' from being influenced by
			the other <a>sub-properties</a> of 'text-decoration',
			as well any other properties typically affecting the appearance of line decorations.
		<li>Fixed errors in Computed Value lines.
			(<a href="https://github.com/w3c/csswg-drafts/issues/10044">Issue 10044</a>)
		<li>Miscellaneous minor clarifications.
	</ul>

<h3 class="no-num" id="changes-2020">
Changes since the 6 May 2020 Working Draft</h3>

	Significant changes since the
	<a href="https://www.w3.org/TR/2020/WD-css-text-decor-4-20200506/">6 May 2020 Working Draft</a>:

	<ul>
		<li>Added <a spec=css-backgrounds-3>spread distance</a> and ''box-shadow/inset'' to 'text-shadow'.
			(<a href="https://github.com/w3c/csswg-drafts/issues/6074">Issue 6074</a>,
			 <a href="https://github.com/w3c/csswg-drafts/issues/6971">Issue 6971</a>)
		<li>Clarified that 'text-decoration-skip-ink' affects only decorations initiated by the element.
			(<a href="https://github.com/w3c/csswg-drafts/issues/2817">Issue 2817</a>)
		<li>Explicitly noted properties applying to text in “Applies to” line.
			(<a href="https://github.com/w3c/csswg-drafts/issues/5303">Issue 5303</a>)
	</ul>

<h3 class="no-num" id="additions-l3">
Additions Since Level 3</h3>

	The following features have been added since <a href="https://www.w3.org/TR/css-text-decor-3/">Level 3</a>:

	<ul>
		<li>Added ''spelling-error'' and ''grammar-error'' values to 'text-decoration-line'.
		<li>Added 'text-decoration-thickness' and 'text-underline-offset' properties.
		<li>Added ''text-underline-position/from-font'' value to 'text-underline-position'.
		<li>Drafted 'text-decoration-skip' property and its longhands.
		<li>Drafted 'text-emphasis-skip' property.
		<li>Added <a spec=css-backgrounds-3>spread distance</a> and ''box-shadow/inset'' to 'text-shadow'.
	</ul>


<h2 class=no-num id=privacy>Privacy Considerations</h2>

No new privacy considerations have been reported on this specification.

<h2 class=no-num id=security>Security Considerations</h2>

No new security considerations have been reported on this specification.