[css-text-decor-4] [css-text-decor] Initial draft of fill/stroke complete.

Author: tabatkins

css-text-decor-4/Overview.bs

@@ -12,7 +12,8 @@ TR: http://www.w3.org/TR/css-text-decor-4/
 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
+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.
@@ -24,18 +25,10 @@ It has no status at W3C and has not yet been discussed by the CSSWG.
 
 	<ul>
 		<li>text-shadow with spread
-		<li>fill/stroke on text
 		<li>a text-decoration-offset property
 		<li>a text-line-width property
 	</ul>
 
-fill/stroke {#fill-stroke}
------------
-
-* turn fill/stroke into shorthands, add fill-color/stroke-color. SVGWG says this is probably okay; only problem is if people style with real properties and put, for example, stroke-width before stroke. Who does that? Nobody, that's who.
-* Need to know what element originates the coordinate space. Idea: add a fill-originator:yes/no property, which defines the element that give the coordinate space for the fill/stroke. 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.  Most of the time you won't set this property; the shorthand will do it automatically for you.
-* Need to expand on the box-decoration-break model.  "box decorations" is a term covering all of them: need longhands for background-break, fill-break, border-break, stroke-break.  (The current "slice" value isn't what SVG does.)
-
 
 <!--
 ████████ ████ ██       ██
@@ -47,15 +40,17 @@ fill/stroke {#fill-stroke}
 ██       ████ ████████ ████████
 -->
 
-Text Fills {#text-fill}
-=======================
+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">
@@ -70,6 +65,23 @@ Text Fills {#text-fill}
 		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">
@@ -84,6 +96,10 @@ Text Fills {#text-fill}
 		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">
@@ -98,7 +114,8 @@ Text Fills {#text-fill}
 		Animatable: No
 	</pre>
 
-	This property specifies the coordinate system of the <a>text fill</a>.
+	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">
@@ -113,8 +130,8 @@ Text Fills {#text-fill}
 		<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>,
-			''content-box'' and ''padding-box'' are treated as ''fill-box'',
-			while ''border-box'' is treated as ''stroke-box''.
+			''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>
@@ -137,6 +154,14 @@ Text Fills {#text-fill}
 	}
 	</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">
@@ -169,6 +194,63 @@ Text Fills {#text-fill}
 		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">
@@ -187,15 +269,26 @@ Text Fills {#text-fill}
 	  'fill-color',
 	  'fill-image',
 	  'fill-repeat',
-	  'fill-attachment',
 	  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-attachment' is set to ''self''.
+	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]].
+
 <!--
  ██████  ████████ ████████   ███████  ██    ██ ████████
 ██    ██    ██    ██     ██ ██     ██ ██   ██  ██
@@ -206,8 +299,8 @@ Text Fills {#text-fill}
  ██████     ██    ██     ██  ███████  ██    ██ ████████
 -->
 
-Text Stroking {#text-stroke}
-============================
+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.
@@ -216,6 +309,12 @@ Text Stroking {#text-stroke}
 	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}
 ----------------------------------
 
@@ -233,10 +332,10 @@ Stroke Geometry {#stroke-geometry}
 		Animatable: as color
 	</pre>
 
-### Stroke Positioning: the 'stroke-position' property ### {#stroke-position}
+### Stroke Positioning: the 'stroke-align' property ### {#stroke-align}
 
 	<pre class="propdef">
-		Name: stroke-position
+		Name: stroke-align
 		Value: center | inset | outset
 		Initial: center
 		Applies to: inline boxes and <a>SVG shapes</a>
@@ -419,7 +518,8 @@ Stroke Painting {#stroke-paint}
 		Animatable: No
 	</pre>
 
-	This property specifies the coordinate system of the <a>text stroke</a>.
+	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">
@@ -433,6 +533,11 @@ Stroke Painting {#stroke-paint}
 			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">
@@ -465,6 +570,63 @@ Stroke Painting {#stroke-paint}
 		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">
@@ -493,12 +655,22 @@ Stroke Painting {#stroke-paint}
 	  'stroke-color',
 	  'stroke-image',
 	  'stroke-repeat',
-	  'stroke-attachment',
 	  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-attachment' is set to ''self''.
+	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]].
 
 
 
@@ -979,3 +1151,8 @@ Some notes from Koji :
 	110C1	KAITHI DOUBLE DANDA	Po	STerm
 
 -->
+
+Privacy and Security Considerations {#priv-sec}
+===============================================
+
+This specification introduces no new privacy or security considerations.