8000 csswg-drafts/css-text-decor-4/Overview.bs at 36ad83e3b0f6212870ce884ef9a691ae1ed95638 · w3c/csswg-drafts · GitHub
Skip to content

Overview.bs

Latest commit

 

History

History
1210 lines (1043 loc) · 42 KB

Overview.bs

File metadata and controls

1210 lines (1043 loc) · 42 KB
<h1>CSS Text Decoration Module Level 4</h1>
<pre class='metadata'>
Shortname: css-text-decor
Level: 4
Status: UD
Work Status: Exploring
Group: csswg
ED: https://drafts.csswg.org/css-text-decor-4/
TR: https://www.w3.org/TR/css-text-decor-4/
!Issue Tracking: <a href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a>
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact
Editor: Koji Ishii, Invited Expert, kojiishi@gluesoft.co.jp
Abstract: This module contains the features of CSS relating to text decoration, such as underlines, text shadows, and emphasis marks.
Link Defaults: css-color-3 (property) color, css-break-3 (dfn) fragment
Ignored Terms: svg shape, svg shapes, invalid, repeatable list, simple list, valid image
</pre>
Issue: This is just a place to keep ideas at the moment.
It has no status at W3C and has not yet been discussed by the CSSWG.
<h2 id=intro>Things To Include Here</h2>
In addition to all of the features in Level 3, a completed initial draft of this module will include:
<ul>
<li>text-shadow with spread
<li>a text-decoration-offset property
<li>a text-line-width property
</ul>
<!--
████████ ████ ██ ██
██ ██ ██ ██
██ ██ ██ ██
██████ ██ ██ ██
██ ██ ██ ██
██ ██ ██ ██
██ ████ ████████ ████████
-->
Text Fills {#text-fills}
========================
A <dfn>text fill</dfn> paints within the glyph outlines of the box’s text.
Similar to backgrounds [[CSS3BG]], <a>text fills</a> can be a solid color ('fill-color') and/or an image pattern ('fill-image' etc.).
Advisement: It is strongly recommended to use the 'fill' shorthand when setting <a>text fills</a>.
The individual longhands should only be used when it's needed to alter one individual aspect.
Issue: Add a <css>box-break</css> property that is a shorthand for 'box-decoration-break', 'fill-break', and 'stroke-break'?
## Fill Color: the 'fill-color' property ## {#fill-color}
<pre class="propdef">
Name: fill-color
Value: <<color>>
Initial: currentColor
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: N/A
Media: visual
Computed value: the computed color
Animatable: as color
</pre>
This property sets the fill color of an element.
This color is drawn behind any fill images.
Advisement: It's recommended that authors use the 'color' property to set the color of text,
rather than 'fill-color'.
Unlike 'background-color',
the fill color must only be drawn if the final layer of 'fill-image'
is <css>none</css> or an <a>invalid image</a>.
If it's a <a>valid image</a>,
the fill color must not be drawn.
Note: This is required to match the legacy behavior of SVG's 'fill' property,
which built in a "fallback color" to the single-layer image syntax.
In CSS this is better achieved with the ''image()'' function,
which makes fallback explicit.
## Fill Image Sources: the 'fill-image' property ## {#fill-image}
<pre class="propdef">
Name: fill-image
Value: [ none | <<image>> ]#
Initial: none
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified, with URLs made absolute
Animatable: as repeatable list of images
</pre>
This property sets the fill images of an element.
Values are interpreted identically to 'background-image',
mutatis mutandi.
## Fill Positioning Area: the 'fill-origin' property ## {#fill-origin}
<pre class="propdef">
Name: fill-origin
Value: match-parent | fill-box | stroke-box | content-box | padding-box | border-box
Initial: match-parent
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: No
</pre>
This property specifies the coordinate system of the <a>text fill</a>,
setting the <dfn export>text fill positioning area</dfn>.
Values have the following meanings:
<dl dfn-for="fill-origin" dfn-type="value">
<dt><dfn>match-parent</dfn>
<dd>
Use the same <a>text fill positioning area</a> as the parent.
If it has no parent, use the <a>initial containing block</a>.
<dt><dfn>content-box</dfn>
<dt><dfn>padding-box</dfn>
<dt><dfn>border-box</dfn>
<dd>
Use the box’s own content-box/padding-box/border-box as the <a>text fill positioning area</a>.
For <a>SVG shapes</a>,
''fill-origin/content-box'' and ''fill-origin/padding-box'' are treated as ''fill-origin/fill-box'',
while ''fill-origin/border-box'' is treated as ''fill-origin/stroke-box''.
<dt><dfn>fill-box</dfn>
<dd>
Use the bounding box of the box’s text.
<dt><dfn>stroke-box</dfn>
Use the bounding box of the box's text's stroke outlines.
</dl>
The SVG UA style sheet is amended to include the following rules:
<pre class="lang-css">
svg:svg {
fill-origin: content-box;
}
svg:g {
fill-origin: match-parent !important;
/* &lt;g> elements don't have a coordinate space of their own,
so they can't declare ''fill-origin/content-box''. */
}
</pre>
The <dfn export>text fill painting area</dfn> is identical to the <a>text fill positioning area</a>.
When painting,
the fill color/images are intersected with the glyph areas of the affected text,
or the fill geometry of the affected <a>SVG shape</a>.
Issue: SVG paint servers carry around their own originator information in *Units attributes,
but maybe SVGWG can add a new value that makes them pay attention to the CSS originator.
## Fragmented Fills: the 'fill-break' property ## {#fill-break}
<pre class="propdef">
Name: fill-break
Value: bounding-box | slice | clone
Initial: bounding-box
Applies to: all elements
Inherited: yes?
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: No
</pre>
This property specifies how the geometry of a <a>fragmented</a> box is treated for <a>text fills</a>.
Values have the following meanings: COPY FROM FRAGMENTATION
## Fill Opacity: the 'fill-opacity' property ## {#fill-opacity}
<pre class="propdef">
Name: fill-opacity
Value: <<'opacity'>>
Initial: 1
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: N/A
Media: visual
Computed value: the computed color
Animatable: as color
</pre>
## Tiling Fill Images: the 'fill-repeat' property ## {#fill-repeat}
<pre class='propdef'>
Name: fill-repeat
Value: <<repeat-style>>#
Initial: repeat
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: n/a
Media: visual
Computed value: A list, each item consisting of: two keywords, one per dimension
Animatable: no
</pre>
Specifies how text fill images are tiled and they have been sized and positioned.
Values are interpreted identically to 'background-repeat',
mutatis mutandi.
## Positioning Fill Images: the 'fill-position' property ## {#fill-position}
<pre class='propdef'>
Name: fill-position
Value: <<position>>#
Initial: 0% 0%
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: n/a
Media: visual
Computed value: A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
Animatable: as <a>repeatable list</a> of <a>simple list</a> of length, percentage, or calc
</pre>
If fill images have been specified,
this property specifies their initial position
(after any resizing)
within their corresponding <a>text fill positioning area</a>.
Values are interpreted identically to 'background-position',
mutatis mutandi.
## Sizing Fill Images: the 'fill-size' property ## {#fill-size}
<pre class='propdef'>
Name: fill-size
Value: <<bg-size>>#
Initial: auto
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: n/a
Media: visual
Computed value: as specified, but with lengths made absolute and omitted ''background-size/auto'' keywords filled in
Animatable: as <a>repeatable list</a> of <a>simple list</a> of length, percentage, or calc
</pre>
Specifies the size of the fill images.
Values are interpreted identically to 'background-size',
mutatis mutandi.
## Fill Shorthand: the 'fill' property ## {#fill-shorthand}
<pre class="propdef">
Name: fill
Value: <'background'> with modifications
Initial: See individual properties
Applies to: See individual properties
Inherited: See individual properties
Percentages: N/A
Media: visual
Computed value: See individual properties
Animatable: See individual properties
</pre>
This property is a <a>shorthand</a> that sets all of
'fill-color',
'fill-image',
'fill-repeat',
ETC
in one declaration.
Omitted values are set to their initial value,
except that an omitted 'fill-color' is set to ''transparent'',
and an omitted 'fill-origin' is set to ''fill-origin/content-box''.
Issue: What should be the default value for fill-origin when set via this shorthand?
content-box or fill-box?
Issue: See 'stroke' for discussion of SVG's image/color fallback syntax.
## Layering Multiple Fill Images ## {#fill-layering}
The fill of a box can have multiple layers.
The number of layers is determined by the number of comma-separated values for the 'fill-image' property.
A value of ''fill-image/none'' still creates a layer.
List-valued properties interact exactly as for background images,
defined in [[css-backgrounds-3#layering]].
<!--
██████ ████████ ████████ ███████ ██ ██ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ██ ████████ ██ ██ █████ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ██ ██ ██ ███████ ██ ██ ████████
-->
Text Outlines {#text-outlines}
==============================
A <dfn>text stroke</dfn> draws a border along the glyph outlines of the box’s text.
The resulting area can be filled similar to the <a>text fill</a> area.
<a>Text strokes</a> can be a solid color ('stroke-color') and/or an image pattern ('stroke-image' etc.).
Advisement: It is strongly recommended to use the 'stroke' shorthand when setting <a>text strokes</a>.
The individual longhands should only be used when it's needed to alter one individual aspect.
By default, <a>text strokes</a> are drawn on top of <a>text fills</a>.
In SVG text or <a>SVG shapes</a>,
the drawing order is controlled by the 'paint-order' property.
Issue: Should 'paint-order' apply to non-SVG text too?
Stroke Geometry {#stroke-geometry}
----------------------------------
### Stroke Thickness: the 'stroke-width' property ### {#stroke-width}
<pre class="propdef">
Name: stroke-width
Value: <<length-percentage>>
Initial: 1px
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: N/A
Media: visual
Computed value: the computed color
Animatable: as color
</pre>
### Stroke Positioning: the 'stroke-align' property ### {#stroke-align}
<pre class="propdef">
Name: stroke-align
Value: center | inset | outset
Initial: center
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: no
</pre>
### Stroke Corner Shapes: the 'stroke-linejoin' property ### {#stroke-linejoin}
<pre class="propdef">
Name: stroke-linejoin
Value: miter | round | bevel
Initial: miter
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: no
</pre>
### Stroke Corner Limits: the 'stroke-miterlimit' property ### {#stroke-miterlimit}
<pre class="propdef">
Name: stroke-miterlimit
Value: <<number>>
Initial: 4
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: N/A
Media: visual
Computed value: a number
Animatable: no
</pre>
This property converts miter joins to bevels when the angle is too small
(since the apparent "size" of a miter join--
the distance between the inner and outer corner--
approaches infinity as the angle decreases).
This property only has an effect if 'stroke-linejoin' is set to ''miter''.
Values have the following meanings:
<dl dfn-for="stroke-miterlimit">
<dt><dfn><<number>></dfn>
<dd>
The limit on the ratio of the miter diagonal to the 'stroke-width':
when the limit is exceeded,
the join is converted from a miter to a bevel.
Values less than 1 are invalid (and make the declaration <a>invalid</a>).
<dt><dfn><<angle>></dfn>
<dd>
The limit on the angle of the miter:
line joins less than this angle are converted from a miter to a bevel.
</dl>
Issue: Should we add angles as described above?
The miterlimit number has physical justification,
but it's difficult to understand without experimentation.
Issue: Should the computed value be always a number, or should it be number or angle?
(They are perfectly equivalent except in syntax.)
Dashed Strokes {#stroke-dashes}
-------------------------------
### Stroke End Shapes: the 'stroke-linecap' property ### {#stroke-linecap}
<pre class="propdef">
Name: stroke-linecap
Value: butt | round | square
Initial: butt
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: no
</pre>
### Stroke Dash Patterns: the 'stroke-dasharray' property ### {#stroke-dasharray}
<pre class="propdef">
Name: stroke-dasharray
Value: none | <<length-percentage>>+
Initial: none
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: relative to the length of the stroked path
Media: visual
Computed value: as specified
Animatable: as repeated list of length, percentage or calc
</pre>
This property controls the pattern of dashes and gaps used to stroke paths.
<dl dfn-for="stroke-dasharray" dfn-type="value">
<dt><dfn>none</dfn>
<dd>
No dashing: the stroke is drawn continuously.
<dt><dfn><<length-percentage>>+</dfn>
<dd>
Each <<length-percentage>> value represents a distance of the next dash or gap
(beginning with the first dash)
of the stroke.
The pattern repeats over the length of the stroke.
Negative values are invalid.
If all values are zero, it is treated as ''stroke-dasharray/none''.
</dl>
Issue: SVG allows comma separation. Do we need to allow this in CSS for back-compat? (Please say no.)
### Stroke Dash Start Position: the 'stroke-dashoffset' property ### {#stroke-dashoffset}
<pre class="propdef">
Name: stroke-dashoffset
Value: <<length-percentage>>
Initial: 0
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: relative to the length of the stroked path
Media: visual
Computed value: as specified
Animatable: as repeated list of integers
</pre>
This property specifies the distance into the dash pattern to start dashing.
Values can be negative.
Stroke Painting {#stroke-paint}
-------------------------------
### Stroke Color: the 'stroke-color' property ### {#stroke-color}
<pre class="propdef">
Name: stroke-color
Value: <<color>>
Initial: transparent
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: N/A
Media: visual
Computed value: the computed color
Animatable: as color
</pre>
### Stroke Image Sources: the 'stroke-image' property ### {#stroke-image}
<pre class="propdef">
Name: stroke-image
Value: [ none | <<image>> ]#
Initial: none
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: ?
Percentages: N/A
Media: visual
Computed value: as specified, with URLs made absolute
Animatable: as repeatable list of images
</pre>
### Stroke Positioning Area: the 'stroke-origin' property ### {#stroke-origin}
<pre class="propdef">
Name: stroke-origin
Value: match-parent | content-box
Initial: auto
Applies to: all elements
Inherited: ?
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: No
</pre>
This property specifies the coordinate system of the <a>text stroke</a>,
setting the <dfn export>text stroke positioning area</dfn>.
Values have the following meanings:
<dl dfn-for="stroke-origin" dfn-type="value">
<dt><dfn>match-parent</dfn>
<dd>
Use the same <a>text stroke positioning area</a> as the parent.
If it has no parent, use the <a>initial containing block</a>.
<dt><dfn>content-box</dfn>
<dd>
Use the box’s own content-box as the <a>text stroke positioning area</a>.
</dl>
The <dfn export>text stroke painting area</dfn> is identical to the <a>text stroke positioning area</a>.
When painting,
the stroke color/images are intersected with the stroked outlines of the affected text,
or the stroke geometry of the affected <a>SVG shape</a>.
### Fragmented Strokes: the 'stroke-break' property ### {#stroke-break}
<pre class="propdef">
Name: stroke-break
Value: bounding-box | slice | clone
Initial: bounding-box
Applies to: all elements
Inherited: ?
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: No
</pre>
This property specifies how the geometry of a <a>fragmented</a> box is treated for <a>text strokes</a>.
Values have the following meanings: COPY FROM FRAGMENTATION
### Stroke Opacity: the 'stroke-opacity' property ### {#stroke-opacity}
<pre class="propdef">
Name: stroke-opacity
Value: <<'opacity'>>
Initial: 1
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: N/A
Media: visual
Computed value: the computed color
Animatable: as color
</pre>
### Tiling Stroke Images: the 'stroke-repeat' property ### {#stroke-repeat}
<pre class='propdef'>
Name: stroke-repeat
Value: <<repeat-style>>#
Initial: repeat
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: n/a
Media: visual
Computed value: A list, each item consisting of: two keywords, one per dimension
Animatable: no
</pre>
Specifies how stroke fill images are tiled and they have been sized and positioned.
Values are interpreted identically to 'background-repeat',
mutatis mutandi.
### Positioning Stroke Images: the 'stroke-position' property ### {#stroke-position}
<pre class='propdef'>
Name: stroke-position
Value: <<position>>#
Initial: 0% 0%
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: n/a
Media: visual
Computed value: A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
Animatable: as <a>repeatable list</a> of <a>simple list</a> of length, percentage, or calc
</pre>
If stroke images have been specified,
this property specifies their initial position
(after any resizing)
within their corresponding <a>text stroke positioning area</a>.
Values are interpreted identically to 'background-position',
mutatis mutandi.
### Sizing Stroke Images: the 'stroke-size' property ### {#stroke-size}
<pre class='propdef'>
Name: stroke-size
Value: <<bg-size>>#
Initial: auto
Applies to: inline boxes and <a>SVG shapes</a>
Inherited: yes
Percentages: n/a
Media: visual
Computed value: as specified, but with lengths made absolute and omitted ''background-size/auto'' keywords filled in
Animatable: as <a>repeatable list</a> of <a>simple list</a> of length, percentage, or calc
</pre>
Specifies the size of the stroke images.
Values are interpreted identically to 'background-size',
mutatis mutandi.
### Stroke Shorthand: the 'stroke' property ### {#stroke-shorthand}
<pre class="propdef">
Name: stroke
Value: <'background'> with modifications
Initial: See individual properties
Applies to: See individual properties
Inherited: See individual properties
Percentages: N/A
Media: visual
Computed value: See individual properties
Animatable: See individual properties
</pre>
Issue: SVG has special color fallback syntax--
a color following an image is only drawn if the image fails.
This conflicts with our desire to match 'background',
because ''stroke: url(#foo) red;'' does *not* fill with red and then draw #foo.
Compromise: stroke-color is a fallback color,
but both ''stroke-image/none'' and <a>invalid images</a> trigger the fallback.
So ''stroke: url(#foo) red;'' will only draw the red if there is no #foo (like SVG),
but ''stroke: url(#foo), red'' (equivalent to ''none red'' on the last layer)
will draw the red <em>and</em> the #foo (like 'background').
This property is a <a>shorthand</a> that sets all of
'stroke-color',
'stroke-image',
'stroke-repeat',
ETC
in one declaration.
Omitted values are set to their initial value,
except that an omitted 'stroke-color' is set to ''transparent'',
and an omitted 'stroke-origin' is set to ''stroke-origin/content-box''.
Issue: See issue in 'fill' about the value that 'fill-origin' gets reset to.
## Layering Multiple Stroke Images ## {#stroke-layering}
The stroke of a box can have multiple layers.
The number of layers is determined by the number of comma-separated values for the 'stroke-image' property.
A value of ''stroke-image/none'' still creates a layer.
List-valued properties interact exactly as for background images,
defined in [[css-backgrounds-3#layering]].
## Perfect-World Syntax ## {#perfect-world}
The 'stroke-*' properties and values from SVG inherit SVG's somewhat incoherent naming schemes.
We'd name them differently if they were being designed today.
We should see how much we can move toward this,
perhaps with alias/shorthands.
<table class=data>
<colgroup span=1></colgroup>
<colgroup span=1></colgroup>
<thead>
<tr>
<th>Old Syntax
<th>New Syntax
<tbody>
<tr>
<td>stroke
<td>stroke-paint
<tr>
<td>
<td>'stroke' shorthand
<tr>
<td>stroke-alignment
<td>stroke-align: inset | outset | center
<tr>
<td>stroke-opacity
<td>no change
<tr>
<td>stroke-width
<td>no change
<tr>
<td>stroke-linecap
<td>stroke-cap: none | round | square
<tr>
<td>stroke-linejoin
<td>stroke-corner-shape: bevel | round | [ arc | miter ] [ bevel | round ]?
<tr>
<td>stroke-miterlimit
<td>stroke-corner-limit
<tr>
<td>stroke-dasharray
<td>stroke-dash-array
<tr>
<td>stroke-dashoffset
<td>stroke-dash-offset
<tr>
<td>stroke-dashcorner
<td>stroke-dash-corner
<tr>
<td>stroke-dashadjust
<td>stroke-dash-justify: none | [ stretch | compress ] || [ dashes | gaps ]
<tr>
<td>
<td>stroke-dash shorthand
</table>
<h2 id=extend>Extentions to L3 features</h2>
<h3 id="text-decoration-skip-property">
Text Decoration Line Continuity: the 'text-decoration-skip' property</h3>
This specification extends the 'text-decoration-skip' property
present in level 3
by adding the ''trailing-spaces'' value.
<pre class="propdef">
Name: text-decoration-skip
Value: ''none'' | [ ''objects'' || [ ''spaces'' | [ ''leading-spaces'' || ''trailing-space'' ] ] || ''ink'' || ''edges'' || ''box-decoration'' ]
Initial: objects leading-spaces trailing-spaces
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: no
</pre>
Note: The initial value is different
from the one specified at the previous level,
which was only ''text-decoration-skip: objects''.
Issue: The initial value is quite verbose,
which makes it inconvenient to set the property
to the initial value plus something else.
We should make this easier to specify.
Issue: Add final level 3 content
<dl dfn-type=value dfn-for=text-decoration-skip>
<dt><dfn>none</dfn></dt>
<dt><dfn>objects</dfn></dt>
<dt><dfn>spaces</dfn></dt>
<dt><dfn>ink</dfn></dt>
<dt><dfn>edges</dfn></dt>
<dt><dfn>box-decoration</dfn>
<dd>
Issue: Add final level 3 content
<dt><dfn>leading-spaces</dfn></dt>
<dd>Skip all spacing,
i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>
plus any adjacent 'letter-spacing' or 'word-spacing',
when located at the start of the line.
<dt><dfn>trailing-spaces</dfn></dt>
<dd>Skip all spacing,
i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>
plus any adjacent 'letter-spacing' or 'word-spacing',
when located at the end of the line.
</dl>
The following addition are made to the default UA stylesheet for HTML:
<pre><code class="lang-css">
ins, del { text-decoration-skip: none; }
</code></pre>
<h2 id=temp>Rescued L3 Brainstorming: Ignore For Now</h2>
<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.
<table class="propdef">
<tbody>
<tr>
<th>Name:</th>
<td><dfn>text-emphasis-skip</dfn></td>
</tr>
<tr>
<th>Value:</th>
<td>spaces ||
punctuation ||
symbols ||
narrow
</td>
</tr>
<tr>
<th>Initial:</th>
<td>spaces
</tr>
<tr>
<th>Applies to:</th>
<td>all elements</td>
</tr>
<tr>
<th>Inherited:</th>
<td>yes</td>
</tr>
<tr>
<th>Percentages:</th>
<td>N/A</td>
</tr>
<tr>
<th>Media:</th>
<td>visual</td>
</tr>
<tr>
<th>Computed&#160;value:</th>
<td>as specified</td>
</tr>
</tbody>
</table>
This property describes for which characters marks are drawn.
The values have following meanings:
<dl for=text-emphasis-skip type=value>
<dt><dfn>spaces</dfn>
<dd>
Skip <a href="https://www.w3.org/TR/css-text/#word-separator">Word separators</a> or characters
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 Pc, Pd, Ps, Pe, Pi, or Pf categories.
It also includes characters where the Unicode category is Po and
the Sentence_Break property [[!UAX29]] of the Unicode database
[[!UAX44]] is ATerm, Close, SContinue, or STerm.
<dt><dfn>symbols</dfn>
<dd>Skip symbols.
Symbols in this definition includes characters belonging to
the Unicode S* category.
It also includes the Unicode Po category
that are not defined as ''<a>punctuation</a>'' above.
<dt><dfn>narrow</dfn>
<dd>Skip characters where the East_Asian_Width 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?
<!--
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?
8534 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
View remainder of file in raw view