- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 19 Apr 2011 19:45:10 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv31608
Modified Files:
Overview.src.html
Log Message:
Actually commit the changes from last night, rewriting the image() section.
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.80
retrieving revision 1.81
diff -u -d -r1.80 -r1.81
--- Overview.src.html 13 Apr 2011 23:26:42 -0000 1.80
+++ Overview.src.html 19 Apr 2011 19:45:08 -0000 1.81
@@ -197,48 +197,62 @@
<!-- ====================================================================== -->
<h3 id="image-notation">
-Image Fallbacks: the ''image()'' notation</h3>
+Image Annotations: the ''image()'' notation</h3>
- <p>The ''image()'' notation allows an author to specify multiple images,
- each one a fallback for the previous. The UA must use only the first image
- that it can load and display. The syntax for ''image()'' is defined as
+ <p>The ''image()'' notation allows an author to tag an image with a few types
+ of useful processing instructions which can affect the rendering of the image.
+ The author can specify the desired resolution the image should be rendered at,
+ declare the directionality of an image so that it can be automatically be
+ reversed if used in text with a different directionality, or declare fallback
+ images to be used if the original image can't be decoded or is a type that the
+ browser doesn't recognize.</p>
- <pre class="prod"><dfn><image-list></dfn> =
-image( [ <image-decl> , ]* [ <image-decl> | <color> | <element-reference> | <image-combination> | <gradient> ] )</pre>
+ <pre class='prod'><dfn><image-list></dfn> =
+ image( [ <image-decl> , ]* [ <image-decl> | <color> | <image> ] )</pre>
- <p>where <image-decl> is given by
+ <p>where <image-decl> is given by:</p>
- <pre class="prod"><dfn><image-decl></dfn> =
-[ <string> | <url-token> ] [ snap? && <resolution> ]?</pre>
+ <pre class='prod'><dfn><image-decl></dfn> =
+ [ <string> | <url> ] [ snap? && <resolution> ]? [ ltr | rtl ]?
- <p><url-token> is given as <code>[!#$%&*-~]|{nonascii}|{escape}</code>
- (i.e. the contents of ''url()'') using the productions in the
- <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">CSS2.1 tokenization</a>.
- <strong>The <url-token> must not contain unescaped brackets, commas,
- white space characters, single quotes (') or double quotes (");
- if it does the ''image()'' containing it is invalid.</strong>
+ <p>Each <i><image-decl></i> represents an external image. If a <string>
+ is provided, it represents the same image that it would if the the string
+ were given to the ''url()'' function.</p>
- <p>Each string or url-token represents the URI of an image. If a resolution
- is given, then the image must be rendered at the specified resolution. If the
- ''snap'' keyword is also specified, and the image is a raster image, then the
- image must be rendered at the resolution closest to the specified resolution
- that would result in no pixel rounding. <span class="issue">I don't think
- "no pixel rounding" is the right terminology here... basically we want to
- avoid blurry images.</span></p>
+ <p>If a <resolution> is given, the image must be rendered at that resolution.
+ <span class='note'>Recall that the default resolution of images is ''1dppx'',
+ so that one image pixel corresponds to one CSS ''px'' unit.</span> If the
+ ''snap'' keyword is also specified, and the specified resolution would make
+ one image pixel larger than one device pixel, the image must be rendered at
+ the specified resolution, rounded to the nearest value that would map one image
+ pixel to an integer number of device pixels; if the specified resolution would
+ make one image pixel smaller than one device pixel, the image must be rendered
+ at the specified resolution, rounded to the nearest value that would map an
+ integer number of image pixels to one device pixel.</p>
- <p>The final argument may be a color or generated image, to serve as an
- ultimate fallback if none of the preceeding <i><image-decl></i>s can be used.
- If it is a color, the <i><image-list></i> must represent a single-color
- image of that color with no <i>intrinsic dimensions</i>.</p>
+ <p>If a directional keyword (''ltr'' or ''rtl'') is given, the image itself
+ gains that directionality. If the image is used in a property on an element
+ with opposite directionality, is must be rendered horizontally flipped (in the
+ image's own coordinate space).</p>
+
+ <p>Multiple arguments can be given, in which case the function represents
+ the first <image-decl> representing an image that the browser can successfully
+ load and display. The final argument can be a <color> or other type of
+ <image to serve as ultimate fallback if none of the preceding <image-decl>s
+ can be used. If the final argument is a <color>, it represents a solid-color
+ image of the given color with no <i>intrinsic dimensions</i>.
<div class="example">
- <p>For example, the rule below would tell the UA to load ''wavy.svg'' if
+ <p>The rule below would tell the UA to load ''wavy.svg'' if
it can; failing that to load ''wavy.png'' and display it at 150dpi;
failing that to display ''wavy.gif''; and finally, if none of the images
can be loaded and displayed, to use the color ''blue'' to create a
- dimensionless background image.</p>
+ dimensionless background image. For example, the browser may not understand
+ how to render SVG images, the PNG may be malformed, and the GIF may not
+ exist on the server, so requesting it returns an HTML 404 page instead of
+ an image.</p>
- <pre>background-image: image(wavy.svg, 'wavy.png' 150dpi, "wavy.gif", blue);</pre>
+ <pre>background-image: image(url(wavy.svg), 'wavy.png' 150dpi, "wavy.gif", blue);</pre>
<p>The 'background-image' property specifies that dimensionless images
must stretch to cover the entire background positioning area
Received on Tuesday, 19 April 2011 19:45:12 UTC