- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 23 Jul 2011 02:03:37 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv32649
Modified Files:
Overview.html Overview.src.html
Log Message:
Added image-rendering:pixelated, updated the text of the other values to be more inclusive and mention downscaling.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.114
retrieving revision 1.115
diff -u -d -r1.114 -r1.115
--- Overview.html 7 Jul 2011 02:02:28 -0000 1.114
+++ Overview.html 23 Jul 2011 02:03:35 -0000 1.115
@@ -6,9 +6,13 @@
<title>CSS Image Values and Replaced Content Module Level 3</title>
<link href="http://dev.w3.org/csswg/default.css" rel=stylesheet
type="text/css">
- <link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel=stylesheet
+ <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
type="text/css">
+ <style type="text/css">
+ p { text-indent: 0 !important; margin: .5em 0; }
+ </style>
+
<body>
<div class=head> <!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48
@@ -16,28 +20,21 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 12 June
- 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 July 2011</h2>
<dl>
- <dt>This version:
+ <dt>Latest Version:
<dd><a
- href="http://www.w3.org/TR/2011/WD-css3-images-20110612/">http://www.w3.org/TR/2011/WD-css3-images-20110612/</a>
+ href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
- <dt>Latest version:
+ <dt>Latest Published Version:
<dd><a
href="http://www.w3.org/TR/css3-images/">http://www.w3.org/TR/css3-images/</a>
- <dt>Editor's draft:
-
- <dd><a
- href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
-
-
- <dt>Previous version:
+ <dt>Previous Version:
<dd><a
href="http://www.w3.org/TR/2011/WD-css3-images-20110217/">http://www.w3.org/TR/2011/WD-css3-images-20110217/</a>
@@ -45,7 +42,7 @@
<dd><a
href="http://www.w3.org/TR/2009/WD-css3-images-20090723/">http://www.w3.org/TR/2009/WD-css3-images-20090723/</a>
- <dt>Editors:
+ <dt>Editor:
<dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>
(Invited Expert)
@@ -90,42 +87,36 @@
<h2 class="no-num no-toc" id=status> Status of this document</h2>
<!--begin-status-->
- <p><em>This section describes the status of this document at the time of
- its publication. Other documents may supersede this document. A list of
- current W3C publications and the latest revision of this technical report
- can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
- index at http://www.w3.org/TR/.</a></em>
-
- <p>Publication as a Working Draft does not imply endorsement by the W3C
- Membership. This is a draft document and may be updated, replaced or
- obsoleted by other documents at any time. It is inappropriate to cite this
- document as other than work in progress.
+ <p>This is a public copy of the editors' draft. It is provided for
+ discussion only and may change at any moment. Its publication here does
+ not imply endorsement of its contents by W3C. Don't cite this document
+ other than as work in progress.
<p>The (<a
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
- mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
- <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
- for discussion of this specification. When sending e-mail, please put the
- text “css3-images” in the subject, preferably like this:
+ mailing list <a
+ href="mailto:www-style@w3.org?Subject=%5Bcss3-images%5D%20PUT%20SUBJECT%20HERE">
+ www-style@w3.org</a> (see <a
+ href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
+ discussion of this specification. When sending e-mail, please put the text
+ “css3-images” in the subject, preferably like this:
“[<!---->css3-images<!---->] <em>…summary of
comment…</em>”
- <p>This document was produced by the <a
- href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
- the <a href="http://www.w3.org/Style/">Style Activity</a>).
+ <p>This document was produced by the <a href="/Style/CSS/members">CSS
+ Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
<p>This document was produced by a group operating under the <a
- href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
- 2004 W3C Patent Policy</a>. W3C maintains a <a
- href="http://www.w3.org/2004/01/pp-impl/32061/status"
+ href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
+ Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
rel=disclosure>public list of any patent disclosures</a> made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains <a
- href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
+ href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
- href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
- 6 of the W3C Patent Policy</a>.</p>
+ href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
+ W3C Patent Policy</a>.</p>
<!--end-status-->
<!-- ====================================================================== -->
@@ -445,7 +436,7 @@
the SVG directly.</small></p>
</div>
- <p class=note>Note that a legacy UA that doesn't understand the media
+ <p class=note>Unfortunately, a UA that doesn't understand the media
fragments notation will ignore the fragment and simply display the
entirety of an image specified with ‘<code
class=css>url</code>’. However, since URLs with media fragment
@@ -699,8 +690,12 @@
These are commonly used for subtle shading in background images, buttons,
and many other things. The two functions described in this section allow
an author to specify such an image in a terse syntax, so that the UA can
- generate the image automatically when rendering the page. The syntax of a
- <a href="#ltgradient"><i><gradient></i></a> is:
+ generate the image automatically when rendering the page. Gradients are a
+ type of image, and can be used anywhere an image can, such as in the
+ ‘<code class=property>background-image</code>’ or ‘<code
+ class=property>list-style-image</code>’ properties. Gradients have
+ no <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>. The
+ syntax of a <a href="#ltgradient"><i><gradient></i></a> is:
<pre
class=prod><dfn id=ltgradient><gradient></dfn> = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]</pre>
@@ -712,10 +707,6 @@
href="#ltrepeating-radial-gradient"><i><repeating-radial-gradient></i></a>
are defined in their applicable sections below.
- <p>Gradients are a type of image, and can be used anywhere an image can,
- such as in the ‘<code class=property>background-image</code>’
- or ‘<code class=property>list-style-image</code>’ properties.
-
<div class=example>
<p>As with the other <a href="#ltimage"><i><image></i></a> types
defined in this specification, gradients can be used in any property that
@@ -729,19 +720,18 @@
</ul>
</div>
- <p>A gradient is drawn into a box with the dimensions of the <a
- href="#concrete-object-size"><i>concrete object size</i></a>. Elsewhere in
- this section this rectangle is simply called the "box".
-
- <p>A gradient has no <a href="#intrinsic-dimensions"><i>intrinsic
- dimensions</i></a>. This means that, for example, if you use a gradient in
- the ‘<code class=property>background-image</code>’ property
- (with ‘<code class=property>background-size</code>’ at the
- default value and ‘<code
- class=property>background-repeat</code>’ not equal to ‘<code
- class=property>round</code>’), the box will simply be the size of
- the background sizing area. Similarly, for a gradient used as a
- list-style-image, the box would be a 1em square.
+ <p class=note>In many places this section references a box, such as "the
+ box's top-left corner" or "the box's right side". In all of these
+ circumstances, the "box" refers to a rectangle with the dimensions of the
+ <a href="#concrete-object-size"><i>concrete object size</i></a>. A
+ gradient has no intrinsic dimensions. This means that, for example, if you
+ use a gradient in the ‘<code
+ class=property>background-image</code>’ property (with ‘<code
+ class=property>background-size</code>’ at the default value and
+ ‘<code class=property>background-repeat</code>’ not equal to
+ ‘<code class=property>round</code>’), the "box" will simply be
+ the size of the background sizing area. If you use a gradient in a
+ list-style-image, the "box" will be a 1em square.
<p class=issue>It has been suggested that several of the controls offered
by gradients are unnecessary. Repeating gradients could potentially be
@@ -1595,7 +1585,7 @@
href="#default-object-size"><i>default object size</i></a> equal to the
replaced element's used width and height.</p>
- <dt>scale-down <i class=issue>better name?</i>
+ <dt>scale-down <b class=issue>better name?</b>
<dd>
<p>Size the content as if ‘<code class=property>none</code>’
@@ -1939,7 +1929,7 @@
<tr>
<th>Value:
- <td>auto | crisp-edges
+ <td>auto | crisp-edges | pixelated
<tr>
<th>Initial:
@@ -1949,7 +1939,7 @@
<tr>
<th>Applies to:
- <td>images
+ <td>all elements
<tr>
<th>Inherited:
@@ -1980,19 +1970,51 @@
as follows:
<dl>
- <dt>auto
+ <dt><dfn id=auto title=image-rendering-auto>auto</dfn>
- <dd>The image should be scaled with an algorithm that maximizes the
- appearance of the image. In particular, scaling algorithms that
- ‘<code class=property>smooth</code>’ colors are acceptable,
- such as bilinear interpolation. This is intended for images such as
- photos.
+ <dd>
+ <p>The image should be scaled with an algorithm that maximizes the
+ appearance of the image, possibly smoothing colors or introducing minor
+ blur. This value is intended for use with photos and similar "real-life"
+ images.</p>
- <dt>crisp-edges
+ <p>For example, algorithms such as bilinear interpolation or lancosz
+ interpolation are acceptable. Lesser or greater algorithms may be used
+ as well; in high-load situations, user agents may choose to use a very
+ cheap algorithm such as nearest-neighbor, while in low-load situations
+ they may choose to use a very expensive and high-quality scaling
+ algorithm.</p>
- <dd>The image must be scaled with an algorithm that preserves contrast and
- edges in the image, and which does not smooth colors or introduce blur to
- the image in the process. This is intended for images such as pixel art.
+ <dt><dfn id=crisp-edges>crisp-edges</dfn>
+
+ <dd>
+ <p>The image should be scaled with an algorithm that preserves contrast
+ and edges in the image, and which does not smooth colors or introduce
+ blur to the image in the process. This is intended for images such as
+ pixel art, or diagrams with sharp, straight lines. When downscaling an
+ image, some color-smoothing is acceptable, but should not introduce
+ blurriness.</p>
+
+ <p>For example, when upscaling an image, algorithms such as
+ nearest-neighbor are acceptable, as are specialized pixel-art scaling
+ algorithms like EPX or <a
+ href="http://research.microsoft.com/en-us/um/people/kopf/pixelart/">the
+ algorithm described in this SIGGRAPH paper</a>. When downscaling an
+ image, algorithms such as nearest-neighbor or bilinear interpolation are
+ acceptable.</p>
+
+ <dt><dfn id=pixelated>pixelated</dfn>
+
+ <dd>
+ <p>The image should be scaled with an algorithm that preserves a
+ "pixelated" look. This is intended for images such as pixel art.</p>
+
+ <p>If the image is upscaled an integer multiple of its original size, it
+ must be scaled with the nearest-neighbor algorithm. When upscaled by any
+ other factor, nearest-neighbor is acceptable, as are other algorithms
+ that preserve a pixelated look. When downscaling an image, any algorithm
+ that preserves a pixelated look are acceptable, such as nearest-neighbor
+ or bilinear interpolation.</p>
</dl>
<p>This property does <em>not</em> dictate any particular scaling algorithm
@@ -2006,11 +2028,18 @@
scale images with nearest-neighbor interpolation by default, and switch to
EPX interpolation in low-load situations.
+ <p>This property must only have an effect on raster images. Vector images
+ can be upscaled or downscaled infinitely without losing detail, and thus
+ do not require any hints as to what details are important to preserve.
+
<p>This property previously accepted the values ‘<code
class=css>optimizeSpeed</code>’ and ‘<code
class=css>optimizeQuality</code>’. These are now deprecated; a user
agent may accept them as valid values, but must treat them as aliases for
- the ‘<code class=css>auto</code>’ value.</p>
+ the ‘<code class=css>auto</code>’ value.
+
+ <p class=issue>dbaron suggests that optimizeSpeed should instead alias to
+ crisp-edges.</p>
<!-- ====================================================================== -->
<h2 id=serialization><span class=secno>8. </span> Serialization</h2>
@@ -2358,59 +2387,61 @@
<ol>
<li>Convert both the start and end gradients to their explicit forms:
- <dl>
- <dt>For linear gradients:
+ </ol>
- <dd>
- <ul>
- <li>If the direction is specified as an <angle>, it is already in
- its explicit form.
+ <dl>
+ <dt>For linear gradients:
- <li>Otherwise, if the direction is specified as a single keyword,
- change ‘<code class=property>bottom</code>’ to
- ‘<code class=css>0deg</code>’, ‘<code
- class=property>left</code>’ to ‘<code
- class=css>90deg</code>’, ‘<code
- class=property>top</code>’ to ‘<code
- class=css>180deg</code>’, or ‘<code
- class=property>right</code>’ to ‘<code
- class=css>270deg</code>’.
+ <dd>
+ <ul>
+ <li>If the direction is specified as an <angle>, it is already in its
+ explicit form.
- <li>Otherwise, if the direction is specified as two keywords, change
- the direction to an <angle> in the following ranges that would
- produce an equivalent gradient: for ‘<code class=css>bottom
- left</code>’ or ‘<code class=css>left
- bottom</code>’, the angle must be between 0deg and 90deg; for
- ‘<code class=css>top left</code>’ or ‘<code
- class=css>left top</code>’, the angle must be between 90deg and
- 180deg; for ‘<code class=css>top right</code>’ or
- ‘<code class=css>right top</code>’, the angle must be
- between 180deg and 270deg; for ‘<code class=css>bottom
- right</code>’ or ‘<code class=css>right
- bottom</code>’, the angle must be between 270deg and 360deg.
+ <li>Otherwise, if the direction is specified as a single keyword, change
+ ‘<code class=property>bottom</code>’ to ‘<code
+ class=css>0deg</code>’, ‘<code
+ class=property>left</code>’ to ‘<code
+ class=css>90deg</code>’, ‘<code
+ class=property>top</code>’ to ‘<code
+ class=css>180deg</code>’, or ‘<code
+ class=property>right</code>’ to ‘<code
+ class=css>270deg</code>’.
- <li>If both the start and end gradients had their direction specified
- with keywords, and the absolute difference between the angles their
- directions mapped to is greater than 180deg, add 360deg to the
- direction of the gradient with the smaller angle. <span
- class=note>This ensures that a transition from, for example, "right"
- (270deg) to "bottom" (0deg) rotates the gradient a quarter-turn
- clockwise, as expected, rather than rotating three-quarters of a turn
- counter-clockwise.</span>
- </ul>
+ <li>Otherwise, if the direction is specified as two keywords, change the
+ direction to an <angle> in the following ranges that would produce
+ an equivalent gradient: for ‘<code class=css>bottom
+ left</code>’ or ‘<code class=css>left bottom</code>’,
+ the angle must be between 0deg and 90deg; for ‘<code
+ class=css>top left</code>’ or ‘<code class=css>left
+ top</code>’, the angle must be between 90deg and 180deg; for
+ ‘<code class=css>top right</code>’ or ‘<code
+ class=css>right top</code>’, the angle must be between 180deg and
+ 270deg; for ‘<code class=css>bottom right</code>’ or
+ ‘<code class=css>right bottom</code>’, the angle must be
+ between 270deg and 360deg.
+ </ul>
- <dt>For radial gradients:
+ <p>If both the start and end gradients had their direction specified with
+ keywords, and the absolute difference between the angles their
+ directions mapped to is greater than 180deg, add 360deg to the direction
+ of the gradient with the smaller angle. <span class=note>This ensures
+ that a transition from, for example, "right" (270deg) to "bottom" (0deg)
+ rotates the gradient a quarter-turn clockwise, as expected, rather than
+ rotating three-quarters of a turn counter-clockwise.</span></p>
- <dd>
- <ul>
- <li>If the size is specified as two <length>s or <percentage>s,
- it is already in its explicit form.
+ <dt>For radial gradients:
- <li>Otherwise, the size must be changed to a pair of <length>s that
- would produce an equivalent ending-shape.
- </ul>
- </dl>
+ <dd>
+ <ul>
+ <li>If the size is specified as two <length>s or <percentage>s, it
+ is already in its explicit form.
+
+ <li>Otherwise, the size must be changed to a pair of <length>s that
+ would produce an equivalent ending-shape.
+ </ul>
+ </dl>
+ <ul>
<li>Interpolate each component and color-stop of the gradients
independently. For linear gradients, the only component is the angle. For
radial gradients, the components are the horizontal and vertical position
@@ -2422,9 +2453,9 @@
start and end gradients are considered to be at the same index, and all
other color-stops following and preceding are indexed appropriately.
Then, for each pair of color-stops, interpolate the position and color
- independently.
- </ol>
- <!-- ====================================================================== -->
+ independently.</li>
+ <!-- ====================================================================== -->
+ </ul>
<h2 class=no-num id=changes>Changes Since the 17 February 2011 Working
Draft</h2>
@@ -2536,9 +2567,10 @@
<dd>
<ul>
<li>Changed the ‘<code
- class=property>optimize-contrast</code>’ value to ‘<code
- class=property>crisp-edges</code>’, and rewrote the description
- slightly to reduce confusion in what it does.
+ class=property>optimize-contrast</code>’ value to ‘<a
+ href="#crisp-edges"><code class=property>crisp-edges</code></a>’,
+ and rewrote the description slightly to reduce confusion in what it
+ does.
</ul>
<dt><a
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.120
retrieving revision 1.121
diff -u -d -r1.120 -r1.121
--- Overview.src.html 7 Jul 2011 02:02:29 -0000 1.120
+++ Overview.src.html 23 Jul 2011 02:03:35 -0000 1.121
@@ -1460,13 +1460,13 @@
<td><dfn>image-rendering</dfn>
<tr>
<th>Value:
- <td>auto | crisp-edges
+ <td>auto | crisp-edges | pixelated
<tr>
<th>Initial:
<td>auto
<tr>
<th>Applies to:
- <td>images
+ <td>all elements
<tr>
<th>Inherited:
<td>yes
@@ -1478,40 +1478,38 @@
<td>specified value
</table>
- <p>The 'image-rendering' property provides a hint to the user-agent about
- what aspects of an image are most important to preserve when the image is
- scaled, to aid the user-agent in the choice of an appropriate scaling algorithm.
- When specified on an element, it applies to all images given in properties
- for the element, such as background images, list-style images, or the content
- of replaced elements when they represent an image that must be scaled. The
- values of the 'image-rendering' property are interpreted as follows:</p>
+ <p>The 'image-rendering' property provides a hint to the user-agent about what aspects of an image are most important to preserve when the image is scaled, to aid the user-agent in the choice of an appropriate scaling algorithm. When specified on an element, it applies to all images given in properties for the element, such as background images, list-style images, or the content of replaced elements when they represent an image that must be scaled. The values of the 'image-rendering' property are interpreted as follows:</p>
<dl>
- <dt>auto</dt>
- <dd>The image should be scaled with an algorithm that maximizes the
- appearance of the image. In particular, scaling algorithms that 'smooth'
- colors are acceptable, such as bilinear interpolation. This is intended
- for images such as photos.</dd>
+ <dt><dfn title="image-rendering-auto">auto</dfn></dt>
+ <dd>
+ <p>The image should be scaled with an algorithm that maximizes the appearance of the image, possibly smoothing colors or introducing minor blur. This value is intended for use with photos and similar "real-life" images.</p>
+
+ <p>For example, algorithms such as bilinear interpolation or lancosz interpolation are acceptable. Lesser or greater algorithms may be used as well; in high-load situations, user agents may choose to use a very cheap algorithm such as nearest-neighbor, while in low-load situations they may choose to use a very expensive and high-quality scaling algorithm.</p>
+ </dd>
- <dt>crisp-edges</dt>
- <dd>The image must be scaled with an algorithm that preserves contrast
- and edges in the image, and which does not smooth colors or introduce
- blur to the image in the process. This is intended for images such as pixel
- art.</dd>
+ <dt><dfn>crisp-edges</dfn></dt>
+ <dd>
+ <p>The image should be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. This is intended for images such as pixel art, or diagrams with sharp, straight lines. When downscaling an image, some color-smoothing is acceptable, but should not introduce blurriness.</p>
+
+ <p>For example, when upscaling an image, algorithms such as nearest-neighbor are acceptable, as are specialized pixel-art scaling algorithms like EPX or <a href="http://research.microsoft.com/en-us/um/people/kopf/pixelart/">the algorithm described in this SIGGRAPH paper</a>. When downscaling an image, algorithms such as nearest-neighbor or bilinear interpolation are acceptable.</p>
+ </dd>
+
+ <dt><dfn>pixelated</dfn></dt>
+ <dd>
+ <p>The image should be scaled with an algorithm that preserves a "pixelated" look. This is intended for images such as pixel art.</p>
+
+ <p>If the image is upscaled an integer multiple of its original size, it must be scaled with the nearest-neighbor algorithm. When upscaled by any other factor, nearest-neighbor is acceptable, as are other algorithms that preserve a pixelated look. When downscaling an image, any algorithm that preserves a pixelated look are acceptable, such as nearest-neighbor or bilinear interpolation.</p>
+ </dd>
</dl>
- <p>This property does <em>not</em> dictate any particular scaling algorithm
- to be used. For example, with ''image-rendering:auto'', a user agent might
- scale images with bilinear interpolation by default, switch to nearest-neighbor
- interpolation in high-load situations, and switch to a high-quality scaling
- algorithm like Lanczos interpolation for static images that aren't moving
- or changing. Similarly, with ''image-rendering:crisp-edges'', a user
- agent might scale images with nearest-neighbor interpolation by default, and
- switch to EPX interpolation in low-load situations.</p>
+ <p>This property does <em>not</em> dictate any particular scaling algorithm to be used. For example, with ''image-rendering:auto'', a user agent might scale images with bilinear interpolation by default, switch to nearest-neighbor interpolation in high-load situations, and switch to a high-quality scaling algorithm like Lanczos interpolation for static images that aren't moving or changing. Similarly, with ''image-rendering:crisp-edges'', a user agent might scale images with nearest-neighbor interpolation by default, and switch to EPX interpolation in low-load situations.</p>
- <p>This property previously accepted the values ''optimizeSpeed'' and
- ''optimizeQuality''. These are now deprecated; a user agent may accept them
- as valid values, but must treat them as aliases for the ''auto'' value.</p>
+ <p>This property must only have an effect on raster images. Vector images can be upscaled or downscaled infinitely without losing detail, and thus do not require any hints as to what details are important to preserve.</p>
+
+ <p>This property previously accepted the values ''optimizeSpeed'' and ''optimizeQuality''. These are now deprecated; a user agent may accept them as valid values, but must treat them as aliases for the ''auto'' value.</p>
+
+ <p class=issue>dbaron suggests that optimizeSpeed should instead alias to crisp-edges.</p>
<!-- ====================================================================== -->
Received on Saturday, 23 July 2011 02:03:45 UTC