8000 Editorial fixups · simonwuelker/csswg-drafts@a8741cd · GitHub
Skip to content

Commit a8741cd

Browse files
committed
Editorial fixups
1 parent a1c43ee commit a8741cd

2 files changed

Lines changed: 76 additions & 42 deletions

File tree

css3-images/Overview.html

Lines changed: 57 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
content="text/html; charset=utf-8" http-equiv=Content-Type>
66

77
<title>CSS Image Values and Replaced Content Module Level 3</title>
8-
<link href="../css-module/default.css" rel=stylesheet type="text/css">
8+
<link href="../default.css" rel=stylesheet type="text/css">
99
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
1010
type="text/css">
1111

@@ -16,15 +16,14 @@
1616

1717
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
1818

19-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 December
20-
2011</h2>
19+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 January 2012</h2>
2120

2221
<dl>
2322
<dt>This Version:
2423

2524
<dd><a
2625
href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
27-
<!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20111213/">http://www.w3.org/TR/2011/WD-css3-images-20111213/</a>-->
26+
<!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120104/">http://www.w3.org/TR/2012/WD-css3-images-20120104/</a>-->
2827

2928

3029
<dt>Latest Version:
@@ -52,6 +51,19 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 December
5251
<dd><a
5352
href="http://www.w3.org/TR/2009/WD-css3-images-20090723/">http://www.w3.org/TR/2009/WD-css3-images-20090723/</a>
5453

54+
<dt>Issues List:
55+
56+
<dd><a
57+
href="http://www.w3.org/Style/CSS/Tracker/products/27">http://www.w3.org/Style/CSS/Tracker/products/27</a>
58+
59+
60+
<dt>Discussion List:
61+
62+
<dd><a
63+
href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
64+
with subject line &ldquo;<kbd>[css3-images] <var>&hellip; message topic
65+
&hellip;</var></kbd>&rdquo;
66+
5567
<dt>Editors:
5668

5769
<dd class=vcard> <a class="url fn"
@@ -65,7 +77,7 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 December
6577
<!--begin-copyright-->
6678
<p class=copyright><a
6779
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
68-
rel=license>Copyright</a> &copy; 2011 <a
80+
rel=license>Copyright</a> &copy; 2012 <a
6981
href="http://www.w3.org/"><acronym
7082
title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
7183
href="http://www.csail.mit.edu/"><acronym
@@ -171,27 +183,31 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
171183
<ul class=toc>
172184
<li><a href="#url"><span class=secno>3.1. </span> Image References and
173185
Image Slices: the &lsquo;<code class=css>url()</code>&rsquo;
174-
function</a>
186+
notation</a>
175187

176188
<li><a href="#image-notation"><span class=secno>3.2. </span> Image
177189
Fallbacks and Annotations: the &lsquo;<code
178-
class=css>image()</code>&rsquo; function</a>
190+
class=css>image()</code>&rsquo; notation</a>
179191

180192
<li><a href="#element-reference"><span class=secno>3.3. </span> Using
181193
Elements as Images: the &lsquo;<code class=css>element()</code>&rsquo;
182-
function</a>
194+
notation</a>
183195
</ul>
184196

185197
<li><a href="#gradients"><span class=secno>4. </span> Gradients</a>
186198
<ul class=toc>
187199
<li><a href="#linear-gradients"><span class=secno>4.1. </span> Linear
188-
Gradients</a>
200+
Gradients: the &lsquo;<code class=css>linear-gradient()</code>&rsquo;
201+
notation</a>
189202

190203
<li><a href="#radial-gradients"><span class=secno>4.2. </span> Radial
191-
Gradients</a>
204+
Gradients: the &lsquo;<code class=css>radial-gradient()</code>&rsquo;
205+
notation</a>
192206

193207
<li><a href="#repeating-gradients"><span class=secno>4.3. </span>
194-
Repeating Gradients</a>
208+
Repeating Gradients: the &lsquo;<code
209+
class=css>repeating-linear-gradient()</code>&rsquo; and &lsquo;<code
210+
class=css>repeating-radial-gradient() F39E </code>&rsquo; notations</a>
195211

196212
<li><a href="#color-stop-syntax"><span class=secno>4.4. </span> Gradient
197213
Color-Stops</a>
@@ -363,7 +379,10 @@ <h2 id=resolution-units><span class=secno>2. </span> Resolution Units: the
363379

364380
<h2 id=image><span class=secno>3. </span> Image Values: the &lt;image> type</h2>
365381

366-
<p>The &lt;image> value type denotes a 2D image. It is defined as
382+
<p>The &lt;image> value type denotes a 2D image. It represents either a <a
383+
href="#url">url reference</a>, <a href="#image-notation">image
384+
notation</a>, <a href="#element-reference">element reference</a>, or <a
385+
href="#gradients">gradient notation</a>. Syntactically it is defined as
367386

368387
<pre class=prod><dfn id=ltimage>&lt;image></dfn> = <i>&lt;url></i> | <a
369388
href="#ltimage-list"><i>&lt;image-list></i></a> | <a
@@ -379,7 +398,7 @@ <h2 id=image><span class=secno>3. </span> Image Values: the &lt;image> type</h2>
379398

380399

381400
<h3 id=url><span class=secno>3.1. </span> Image References and Image
382-
Slices: the &lsquo;<code class=css>url()</code>&rsquo; function</h3>
401+
Slices: the &lsquo;<code class=css>url()</code>&rsquo; notation</h3>
383402

384403
<p>The simplest way to indicate an image is to reference an image file by
385404
URL. This is done with the <a
@@ -436,7 +455,7 @@ <h3 id=url><span class=secno>3.1. </span> Image References and Image
436455
<!-- ====================================================================== -->
437456

438457
<h3 id=image-notation><span class=secno>3.2. </span> Image Fallbacks and
439-
Annotations: the &lsquo;<code class=css>image()</code>&rsquo; function</h3>
458+
Annotations: the &lsquo;<code class=css>image()</code>&rsquo; notation</h3>
440459

441460
<p>The &lsquo;<code class=css>image()</code>&rsquo; function allows an
442461
author to specify an image with fallback images to be used if the original
@@ -454,10 +473,10 @@ <h3 id=image-notation><span class=secno>3.2. </span> Image Fallbacks and
454473
<p>The &lsquo;<code class=css>image()</code>&rsquo; notation is defined as:
455474

456475

457-
<pre class=prod><dfn id=ltimage-list>&lt;image-list></dfn> =
458-
image( [ &lt;image-decl> , ]* [ &lt;image-decl> | &lt;color> ] )
459-
460-
&lt;image-decl> = &lt;string> [ ltr | rtl ]?</pre>
476+
<pre class=prod><dfn
477+
id=ltimage-list>&lt;image-list></dfn> = image( [ &lt;image-decl> , ]* [ &lt;image-decl> | &lt;color> ] )
478+
<dfn
479+
id=ltimage-decl>&lt;image-decl></dfn> = &lt;string> [ ltr | rtl ]?</pre>
461480

462481
<p>Each <code>&lt;string></code> must represent a <a
463482
href="http://dev.w3.org/csswg/css3-values/#urls">URL</a>.
@@ -526,10 +545,11 @@ <h3 id=image-notation><span class=secno>3.2. </span> Image Fallbacks and
526545
<p>Along with each URL, the author may specify a directionality, similar to
527546
adding a <code>dir</code> attribute to an element in HTML. The image
528547
represented by the function takes on the directionality of the used URL.
529-
If a directional image is used on or in an element with opposite
530-
directionality, the image must be flipped in the inline direction (as if
531-
it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline
532-
direction is the X axis).
548+
If a directional image is used on or in an element with opposite <a
549+
href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>,
550+
the image must be flipped in the inline direction (as if it was
551+
transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is
552+
the X axis).
533553

534554
<div class=example>
535555
<p>A list may use an arrow for a bullet that points into the content. If
@@ -557,7 +577,7 @@ <h3 id=image-notation><span class=secno>3.2. </span> Image Fallbacks and
557577
<!-- ====================================================================== -->
558578

559579
<h3 id=element-reference><span class=secno>3.3. </span> Using Elements as
560-
Images: the &lsquo;<code class=css>element()</code>&rsquo; function</h3>
580+
Images: the &lsquo;<code class=css>element()</code>&rsquo; notation</h3>
561581

562582
<p>The &lsquo;<code class=css>element()</code>&rsquo; function allows an
563583
author to use an element in the document as an image. As the referenced
@@ -855,7 +875,8 @@ <h2 id=gradients><span class=secno>4. </span> Gradients</h2>
855875
<!-- ====================================================================== -->
856876

857877

858-
<h3 id=linear-gradients><span class=secno>4.1. </span> Linear Gradients</h3>
878+
<h3 id=linear-gradients><span class=secno>4.1. </span> Linear Gradients:
879+
the &lsquo;<code class=css>linear-gradient()</code>&rsquo; notation</h3>
859880

860881
<p>A linear gradient is created by specifying a gradient-line and then
861882
several colors placed along that line. The image is constructed by
@@ -1008,7 +1029,8 @@ <h4 class=no-toc id=linear-gradient-examples><span class=secno>4.1.2.
10081029
</div>
10091030
<!-- ====================================================================== -->
10101031

1011-
<h3 id=radial-gradients><span class=secno>4.2. </span> Radial Gradients</h3>
1032+
<h3 id=radial-gradients><span class=secno>4.2. </span> Radial Gradients:
1033+
the &lsquo;<code class=css>radial-gradient()</code>&rsquo; notation</h3>
10121034

10131035
<p>In a radial gradient, rather than colors smoothly fading from one side
10141036
of the <a href="#gradient-box"><i>gradient box</i></a> to the other as
@@ -1294,7 +1316,9 @@ <h4 class=no-toc id=radial-gradient-examples><span class=secno>4.2.4.
12941316
<!-- ====================================================================== -->
12951317

12961318
<h3 id=repeating-gradients><span class=secno>4.3. </span> Repeating
1297-
Gradients</h3>
1319+
Gradients: the &lsquo;<code
1320+
class=css>repeating-linear-gradient()</code>&rsquo; and &lsquo;<code
1321+
class=css>repeating-radial-gradient()</code>&rsquo; notations</h3>
12981322

12991323
<p>In addition to the &lsquo;<code
13001324
class=css>linear-gradient()</code>&rsquo; and &lsquo;<code
@@ -2521,10 +2545,10 @@ <h3 class=no-num id=normative-references>Normative references</h3>
25212545
<dt id=MEDIA-FRAGS>[MEDIA-FRAGS]
25222546

25232547
<dd>Rapha&#235;l Troncy; et al. <a
2524-
href="http://www.w3.org/TR/2011/WD-media-frags-20110317"><cite>Media
2525-
Fragments URI 1.0.</cite></a> 17 March 2011. W3C Working Draft. (Work in
2526-
progress.) URL: <a
2527-
href="http://www.w3.org/TR/2011/WD-media-frags-20110317">http://www.w3.org/TR/2011/WD-media-frags-20110317</a>
2548+
href="http://www.w3.org/TR/2011/CR-media-frags-20111201/"><cite>Media
2549+
Fragments URI 1.0.</cite></a> 1 December 2011. W3C Candidate
2550+
Recommendation. (Work in progress.) URL: <a
2551+
href="http://www.w3.org/TR/2011/CR-media-frags-20111201/">http://www.w3.org/TR/2011/CR-media-frags-20111201/</a>
25282552
</dd>
25292553
<!---->
25302554

@@ -2697,6 +2721,9 @@ <h2 class=no-num id=index>Index</h2>
26972721
<li>&lt;image>, <a href="#ltimage"
26982722
title="&lt;image>"><strong>3.</strong></a>
26992723

2724+
<li>&lt;image-decl>, <a href="#ltimage-decl"
2725+
title="&lt;image-decl>"><strong>3.2.</strong></a>
2726+
27002727
<li>&lt;image-list>, <a href="#ltimage-list"
27012728
title="&lt;image-list>"><strong>3.2.</strong></a>
27022729

css3-images/Overview.src.html

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
3030
<dd><a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/">http://www.w3.org/TR/2011/WD-css3-images-20110217/</a></dd>
3131
<dd><a href="http://www.w3.org/TR/2009/WD-css3-images-20090723/">http://www.w3.org/TR/2009/WD-css3-images-20090723/</a></dd>
3232

33+
<dt>Issues List:</dt>
34+
<dd><a href="http://www.w3.org/Style/CSS/Tracker/products/27">http://www.w3.org/Style/CSS/Tracker/products/27</a>
35+
36+
<dt>Discussion List:</dt>
37+
<dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line &ldquo;<kbd>[[SHORTNAME]] <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
38+
3339
<dt>Editors:</dt>
3440
<dd class='vcard'>
3541
<a class='url fn' href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (<span class='org'>Mozilla</span>)</dd>
@@ -136,7 +142,10 @@ <h2 id='resolution-units'>
136142
<h2 id="image">
137143
Image Values: the &lt;image> type</h2>
138144

139-
<p>The &lt;image> value type denotes a 2D image. It is defined as
145+
<p>The &lt;image> value type denotes a 2D image. It represents either a
146+
<a href="#url">url reference</a>, <a href="#image-notation">image notation</a>,
147+
<a href="#element-reference">element reference</a>, or <a href="#gradients">gradient notation</a>.
148+
Syntactically it is defined as
140149

141150
<pre class="prod"><dfn>&lt;image></dfn> = <i>&lt;url></i> | <i>&lt;image-list></i> | <i>&lt;element-reference></i> | <i>&lt;gradient></i></pre>
142151

@@ -146,7 +155,7 @@ <h2 id="image">
146155
<!-- ====================================================================== -->
147156

148157
<h3 id="url">
149-
Image References and Image Slices: the ''url()'' function</h3>
158+
Image References and Image Slices: the ''url()'' notation</h3>
150159

151160
<p>The simplest way to indicate an image is to reference an image file by URL. This is done with the <a href="http://www.w3.org/TR/CSS21/syndata.html#uri">''url()'' notation</a>, defined in [[!CSS21]].
152161

@@ -194,7 +203,7 @@ <h3 id="url">
194203
<!-- ====================================================================== -->
195204

196205
<h3 id="image-notation">
197-
Image Fallbacks and Annotations: the ''image()'' function</h3>
206+
Image Fallbacks and Annotations: the ''image()'' notation</h3>
198207

199208
<p>The ''image()'' function allows an author to specify an image with fallback images to be used if the original image can't be decoded or is a type that the browser doesn't recognize. Additionally, the author can specify a color as an ultimate fallback to be used when none of the images can be.</p>
200209

@@ -205,10 +214,8 @@ <h3 id="image-notation">
205214

206215
<p>The ''image()'' notation is defined as:
207216

208-
<pre class='prod'><dfn>&lt;image-list></dfn> =
209-
image( [ &lt;image-decl> , ]* [ &lt;image-decl> | &lt;color> ] )
210-
211-
&lt;image-decl> = &lt;string> [ ltr | rtl ]?</pre>
217+
<pre class='prod'><dfn>&lt;image-list></dfn> = image( [ &lt;image-decl> , ]* [ &lt;image-decl> | &lt;color> ] )
218+
<dfn>&lt;image-decl></dfn> = &lt;string> [ ltr | rtl ]?</pre>
212219

213220
<p>Each <code>&lt;string></code> must represent a <a href="http://dev.w3.org/csswg/css3-values/#urls">URL</a>.</p>
214221

@@ -244,7 +251,7 @@ <h3 id="image-notation">
244251
<p>In the above, the background is the image "bg-image.png", overlaid with partially-transparent blue.
245252
</div>
246253

247-
<p>Along with each URL, the author may specify a directionality, similar to adding a <code>dir</code> attribute to an element in HTML. The image represented by the function takes on the directionality of the used URL. If a directional image is used on or in an element with opposite directionality, the image must be flipped in the inline direction (as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis).</p>
254+
<p>Along with each URL, the author may specify a directionality, similar to adding a <code>dir</code> attribute to an element in HTML. The image represented by the function takes on the directionality of the used URL. If a directional image is used on or in an element with opposite <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>, the image must be flipped in the inline direction (as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis).</p>
248255

249256
<div class='example'>
250257
<p>A list may use an arrow for a bullet that points into the content. If the list can contain both LTR and RTL text, though, the bullet may be on the left or the right, and an image designed to point into the text on one side will point out of the text on the other side. This can be fixed with code like:</p>
@@ -267,7 +274,7 @@ <h3 id="image-notation">
267274
<!-- ====================================================================== -->
268275

269276
<h3 id='element-reference'>
270-
Using Elements as Images: the ''element()'' function</h3>
277+
Using Elements as Images: the ''element()'' notation</h3>
271278

272279
<p>The ''element()'' function allows an author to use an element in the document as an image. As the referenced element changes appearance, the image changes as well. This can be used, for example, to create live previews of the next/previous slide in a slideshow, or to reference a canvas element for a fancy generated gradient or even an animated background. The syntax for ''element()'' is:</p>
273280

@@ -486,7 +493,7 @@ <h2 id="gradients">
486493
<!-- ====================================================================== -->
487494

488495
<h3 id='linear-gradients'>
489-
Linear Gradients</h3>
9E08 496+
Linear Gradients: the ''linear-gradient()'' notation</h3>
490497

491498
<p>A linear gradient is created by specifying a gradient-line and then several
492499
colors placed along that line. The image is constructed by creating an
@@ -605,7 +612,7 @@ <h4 class='no-toc' id='linear-gradient-examples'>
605612
<!-- ====================================================================== -->
606613

607614
<h3 id='radial-gradients'>
608-
Radial Gradients</h3>
615+
Radial Gradients: the ''radial-gradient()'' notation</h3>
609616

610617
<p>In a radial gradient, rather than colors smoothly fading from one side
611618
of the <i>gradient box</i> to the other as with linear gradients, they instead emerge from
@@ -802,7 +809,7 @@ <h4 class='no-toc' id='radial-gradient-examples'>
802809
<!-- ====================================================================== -->
803810

804811
<h3 id='repeating-gradients'>
805-
Repeating Gradients</h3>
812+
Repeating Gradients: the ''repeating-linear-gradient()'' and ''repeating-radial-gradient()'' notations</h3>
806813

807814
<p>In addition to the ''linear-gradient()'' and ''radial-gradient()'' functions,
808815
this specification defines ''repeating-linear-gradient()'' and

0 commit comments

Comments
 (0)