- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 19 Apr 2011 20:09:45 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv3375
Modified Files:
Overview.html
Log Message:
Dang it, let's submit the actual generated copy.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.77
retrieving revision 1.78
diff -u -d -r1.77 -r1.78
--- Overview.html 19 Apr 2011 01:15:21 -0000 1.77
+++ Overview.html 19 Apr 2011 20:09:43 -0000 1.78
@@ -134,7 +134,7 @@
notation</a>
<li><a href="#image-notation"><span class=secno>4.2. </span> Image
- Fallbacks: the ‘<code class=css>image()</code>’
+ Annotations: the ‘<code class=css>image()</code>’
notation</a>
<li><a href="#element-reference"><span class=secno>4.3. </span> Using
@@ -390,56 +390,73 @@
</div>
<!-- ====================================================================== -->
- <h3 id=image-notation><span class=secno>4.2. </span> Image Fallbacks: the
+ <h3 id=image-notation><span class=secno>4.2. </span> Image Annotations: the
‘<code class=css>image()</code>’ notation</h3>
<p>The ‘<code class=css>image()</code>’ 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 ‘<code class=css>image()</code>’ is defined as
+ 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.
<pre class=prod><dfn id=ltimage-list><image-list></dfn> =
-image( [ <image-decl> , ]* [ <image-decl> | <color> | <element-reference> | <image-combination> | <gradient> ] )</pre>
+ image( [ <image-decl> , ]* [ <image-decl> | <color> | <image> ] )</pre>
- <p>where <image-decl> is given by
+ <p>where <image-decl> is given by:
<pre class=prod><dfn id=ltimage-decl><image-decl></dfn> =
-[ <string> | <url-token> ] [ snap? && <resolution> ]?</pre>
+ [ <string> | <url> ] [ snap? && <resolution> ]? [ ltr | rtl ]?
+
+ </pre>
- <p><url-token> is given as
- <code>[!#$%&*-~]|{nonascii}|{escape}</code> (i.e. the contents of
- ‘<code class=css>url()</code>’) 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 ‘<code
- class=css>image()</code>’ containing it is invalid.</strong>
+ <p>Each <a href="#ltimage-decl"><i><image-decl></i></a> 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 ‘<code
+ class=css>url()</code>’ function.
- <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 ‘<code class=css>snap</code>’ 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>If a <resolution> is given, the image must be rendered at that
+ resolution. <span class=note>Recall that the default resolution of images
+ is ‘<code class=css>1dppx</code>’, so that one image pixel
+ corresponds to one CSS ‘<code class=css>px</code>’
+ unit.</span> If the ‘<code class=css>snap</code>’ 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>The final argument may be a color or generated image, to serve as an
- ultimate fallback if none of the preceeding <a
- href="#ltimage-decl"><i><image-decl></i></a>s can be used. If it is a
- color, the <a href="#ltimage-list"><i><image-list></i></a> must
- represent a single-color image of that color with no <a
- href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>.
+ <p>If a directional keyword (‘<code class=css>ltr</code>’ or
+ ‘<code class=css>rtl</code>’) 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>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
+ <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>.
<div class=example>
- <p>For example, the rule below would tell the UA to load ‘<code
+ <p>The rule below would tell the UA to load ‘<code
class=css>wavy.svg</code>’ if it can; failing that to load
‘<code class=css>wavy.png</code>’ and display it at 150dpi;
failing that to display ‘<code class=css>wavy.gif</code>’;
and finally, if none of the images can be loaded and displayed, to use
the color ‘<code class=css>blue</code>’ 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 ‘<code class=property>background-image</code>’ property
specifies that dimensionless images must stretch to cover the entire
Received on Tuesday, 19 April 2011 20:09:47 UTC