- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 15 Nov 2011 23:08:45 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv10113
Modified Files:
Overview.html Overview.src.html
Log Message:
Rewrite image-resolution to talk about 'intrinsic resolution' rather than requiring the UA to render at a particular resolution, since that's wrong any time the image isn't intrinsically sized
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.218
retrieving revision 1.219
diff -u -d -r1.218 -r1.219
--- Overview.html 15 Nov 2011 04:16:01 -0000 1.218
+++ Overview.html 15 Nov 2011 23:08:42 -0000 1.219
@@ -357,41 +357,23 @@
<dd>dots per ‘<code class=css>px</code>’ unit
</dl>
- <p>The <resolution> unit represents the size of a single "dot" of an
- image. For raster images, a dot is an image pixel. A <resolution>
- defines how many of these dots fit in a CSS ‘<code
- class=property>in</code>’, ‘<code
+ <p>The <resolution> unit represents the size of a single "dot" in a
+ graphical representation by indicating how many of these dots fit in a CSS
+ ‘<code class=property>in</code>’, ‘<code
class=property>cm</code>’, or ‘<code
- class=property>px</code>’ so that images can be sized accordingly.
- The default resolution of raster images in CSS is ‘<code
- class=css>1dppx</code>’, which is equivalent to ‘<code
- class=css>96dpi</code>’. The concept of "resolution" does not apply
- to vector image formats like SVG; generally, this means that any attempt
- to change the resolution of a vector image is simply meaningless.
- Individual uses of the <resolution> value define precisely what effects
- they have on raster and vector images.
-
- <div class=example>
- <p>Printers tend to have substantially higher resolution than computer
- monitors; due to this, an image that looks fine on the screen may look
- pixellated when printed out. A <resolution> may be used in the
- ‘<a href="#image-resolution0"><code
- class=property>image-resolution</code></a>’ property to embed a
- high-resolution image into the document that maintains an appropriate
- size, ensuring attractive display both on screen and on paper:</p>
-
- <pre class=css><code>
-img.high-res {
- image-resolution: 300dpi;
-}</code></pre>
+ class=property>px</code>’. For uses, see e.g. the ‘<code
+ class=css>resolution</code>’ media query in [[MEDIQUERIES]] or the
+ ‘<a href="#image-resolution0"><code
+ class=property>image-resolution</code></a>’ property defined below.
- <p>With this set, an image meant to be 5 inches wide that was saved at
- 300dpi will actually display as 5 inches wide; without this set, the
- image would display as approximately 15.6 inches wide since the image is
- 15000 image pixels across, and by default there are 96 image pixels per
- inch.</p>
- </div>
- <!-- ====================================================================== -->
+ <p class=note>Note that due to the 1:96 fixed ratio of CSS ‘<code
+ class=css>in</code>’ to CSS ‘<code class=css>px</code>’,
+ ‘<code class=css>1dppx</code>’ is equivalent to ‘<code
+ class=css>96dpi</code>’. This corresponds to the default resolution
+ of images displayed in CSS: see ‘<code
+ class=property>image-reslution</code>’.
+ <!-- ====================================================================== -->
+
<h2 id=image><span class=secno>3. </span> Image Values: the <image> type</h2>
@@ -2043,7 +2025,7 @@
<tr>
<th>Value:
- <td>[from-image || <resolution>] snap?
+ <td>[from-image || <resolution>] && snap?
<tr>
<th>Initial:
@@ -2068,56 +2050,86 @@
<tr>
<th>Computed value:
- <td>specified value
+ <td>as specified, except with <resolution> possibly altered by
+ computing for ‘<code class=css>snap</code>’ (see below)
</table>
<p>The ‘<a href="#image-resolution0"><code
class=property>image-resolution</code></a>’ property specifies the
- resolution of all images used in or on the element: images in content
- (e.g. replaced elements and generated content), background images, list
- markers, etc. Values have the following meanings:
+ intrinsic resolution of all raster images used in or on the element. (As
+ vector formats such as SVG do not have an intrinsic resolution, this
+ property has no effect on vector images.) The <dfn
+ id=intrinsic-resolution>intrinsic resolution</dfn> of an image is used to
+ determine the image's <i>intrinsic size</i>. Affected images include
+ images in the element's content (e.g. replaced elements and/or generated
+ content), background images,list markers, etc. Values have the following
+ meanings:
<dl>
- <dt>from-image
+ <dt><resolution>
- <dd>The image must be rendered at the image's native resolution. If the
- image does not have a native resolution or the UA cannot determine it,
- the image must instead be rendered at the specified resolution (see the
- following value). If a resolution is not specified, the image must be
- rendered at ‘<code class=css>1dppx</code>’ (the default
- resolution).
+ <dd>Specifies the intrinsic resolution explicitly.
- <dt><resolution>
+ <dt>from-image
- <dd>If the "from-image" keyword is not specified, or it is specified and
- the native resolution cannot be determined, the image must be rendered at
- the specified resolution.
+ <dd>The image's intrinsic resolution is taken as that specified by the
+ image format. If the image does not specify its own resolution, the
+ explicitly specified resolution is used (if given), else it defaults to
+ ‘<code class=css>1ddpx</code>’.
<dt>snap
- <dd>If the "snap" keyword is provided, and the specified resolution is
- such that one image pixel would be 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. Otherwise, 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.
+ <dd>If the "snap" keyword is provided, the computed ‘<a
+ href="#ltresolution"><code class=css><resolution></code></a>’
+ (if any) is the specified resolution rounded to the nearest value that
+ would map one image pixel to an integer number of device pixels. If the
+ resolution is taken from the image, then the used intrinsic resolution is
+ the image's native resolution similarly adjusted.
</dl>
- <p>This property must have no effect on vector images, as vector images do
- not have a concept of "resolution".
+ <div class=example>
+ <p>Printers tend to have substantially higher resolution than computer
+ monitors; due to this, an image that looks fine on the screen may look
+ pixellated when printed out. The ‘<a
+ href="#image-resolution0"><code
+ class=property>image-resolution</code></a>’ property can be used to
+ embed a high-resolution image into the document and maintain an
+ appropriate size, ensuring attractive display both on screen and on
+ paper:</p>
+
+ <pre class=css><code>
+img.high-res {
+ image-resolution: 300dpi;
+}</code></pre>
+
+ <p>With this set, an image meant to be 5 inches wide at 300dpi will
+ actually display as 5in wide; without this set, the image would display
+ as approximately 15.6in wide since the image is 15000 image pixels
+ across, and by default CSS displays 96 image pixels per inch.</p>
+ </div>
<div class=example>
- <p>This rule specifies that the UA should use the image resolution found
- in the image itself, falling back to 1 image pixel per CSS ‘<code
+ <p>Some image formats can encode the image resolution into the image data.
+ This rule specifies that the UA should use the image resolution found in
+ the image itself, falling back to 1 image pixel per CSS ‘<code
class=css>px</code>’ unit.</p>
<pre class=css>img { image-resolution: from-image }</pre>
+
+ <p>These rules both specify that the UA should use the image resolution
+ found in the image itself, but if the image has no resolution, the
+ resolution is set to 300dpi instead of the default ‘<code
+ class=css>1dppx</code>’.</p>
+
+ <pre>
+img { image-resolution: from-image 300dpi }
+img { image-resolution: 300dpi from-image }
+ </pre>
</div>
<div class=example>
- <p>Using this rule, the image resolution is set to 300dpi and the
- resolution in the image, if any, is ignored.</p>
+ <p>Using this rule, the image resolution is set to 300dpi. (The resolution
+ in the image, if any, is ignored.)</p>
<pre>img { image-resolution: 300dpi }</pre>
@@ -2126,17 +2138,15 @@
map to 1 device pixel):</p>
<pre>img { image-resolution: 300dpi snap; }</pre>
- </div>
- <div class=example>
- <p>These rules both specify that the UA should use the image resolution
- found in the image itself. If the image has no resolution, the resolution
- is set to 300dpi.</p>
+ <p>The ‘<code class=css>snap</code>’ keyword can also be used
+ when the resolution is taken from the image. In this rule:
- <pre>
-img { image-resolution: from-image 300dpi }
-img { image-resolution: 300dpi from-image }
- </pre>
+ <pre>img { image-resolution: snap from-image; }</pre>
+
+ <p>An image declaring itself as 300dpi will, in the situation above,
+ display at 288dpi (3 image pixels per device pixel) whereas an image
+ declaring 72dpi will render at 96dpi (1 image pixel per device pixel).
</div>
<!-- ====================================================================== -->
@@ -2606,6 +2616,9 @@
<li>intrinsic height, <a href="#intrinsic-height"
title="intrinsic height"><strong>5.1.</strong></a>
+ <li>intrinsic resolution, <a href="#intrinsic-resolution"
+ title="intrinsic resolution"><strong>6.1.</strong></a>
+
<li>intrinsic width, <a href="#intrinsic-width"
title="intrinsic width"><strong>5.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.226
retrieving revision 1.227
diff -u -d -r1.226 -r1.227
--- Overview.src.html 15 Nov 2011 04:16:01 -0000 1.226
+++ Overview.src.html 15 Nov 2011 23:08:43 -0000 1.227
@@ -140,31 +140,15 @@
<dd>dots per ''px'' unit</dd>
</dl>
- <p>The <resolution> unit represents the size of a single "dot" of an image. For raster images,
- a dot is an image pixel. A <resolution> defines how many of these dots fit in a CSS 'in', 'cm', or 'px' so that
- images can be sized accordingly. The default resolution of raster images in CSS is ''1dppx'',
- which is equivalent to ''96dpi''. The concept of "resolution" does not apply to vector image
- formats like SVG; generally, this means that any attempt to change the resolution of a vector
- image is simply meaningless. Individual uses of the <resolution> value define precisely
- what effects they have on raster and vector images.</p>
-
- <div class='example'>
- <p>Printers tend to have substantially higher resolution than computer monitors; due to this,
- an image that looks fine on the screen may look pixellated when printed out. A
- <resolution> may be used in the 'image-resolution' property to embed a high-resolution
- image into the document that maintains an appropriate size, ensuring attractive display
- both on screen and on paper:</p>
-
- <pre class='css'><code>
-img.high-res {
- image-resolution: 300dpi;
-}</code></pre>
+ <p>The <resolution> unit represents the size of a single "dot" in a
+ graphical representation by indicating how many of these dots fit in a
+ CSS 'in', 'cm', or 'px'.
+ For uses, see e.g. the ''resolution'' media query in [[MEDIQUERIES]]
+ or the 'image-resolution' property defined below.
- <p>With this set, an image meant to be 5 inches wide that was saved at 300dpi will actually
- display as 5 inches wide; without this set, the image would display as approximately 15.6 inches
- wide since the image is 15000 image pixels across, and by default there are 96 image pixels per
- inch.</p>
- </div>
+ <p class="note">Note that due to the 1:96 fixed ratio of CSS ''in'' to
+ CSS ''px'', ''1dppx'' is equivalent to ''96dpi''. This corresponds to
+ the default resolution of images displayed in CSS: see 'image-reslution'.
<!-- ====================================================================== -->
@@ -1342,7 +1326,7 @@
<tbody>
<tr>
<th>Value:
- <td>[from-image || <resolution>] snap?
+ <td>[from-image || <resolution>] && snap?
<tr>
<th>Initial:
<td>1dppx
@@ -1357,59 +1341,97 @@
<td>visual
<tr>
<th>Computed value:
- <td>specified value
+ <td>as specified, except with <resolution> possibly altered
+ by computing for ''snap'' (see below)
</table>
- <p>The 'image-resolution' property specifies the resolution of all images used
- in or on the element: images in content (e.g. replaced elements and generated
- content), background images, list markers, etc. Values have the following
- meanings:</p>
+ <p>The 'image-resolution' property specifies the intrinsic resolution of all
+ raster images used in or on the element. (As vector formats such as SVG do
+ not have an intrinsic resolution, this property has no effect on vector
+ images.) The <dfn>intrinsic resolution</dfn> of an image is used to determine
+ the image's <i>intrinsic size</i>. Affected images include images in the
+ element's content (e.g. replaced elements and/or generated content),
+ background images,list markers, etc.
+ Values have the following meanings:</p>
<dl>
- <dt>from-image</dt>
- <dd>The image must be rendered at the image's native resolution. If the image does not have a native resolution or the UA cannot determine it, the image must instead be rendered at the specified resolution (see the following value). If a resolution is not specified, the image must be rendered at ''1dppx'' (the default resolution).</dd>
-
<dt><resolution></dt>
- <dd>If the "from-image" keyword is not specified, or it is specified and the native resolution cannot be determined, the image must be rendered at the specified resolution.</dd>
+ <dd>Specifies the intrinsic resolution explicitly.</dd>
+
+ <dt>from-image</dt>
+ <dd>The image's intrinsic resolution is taken as that specified by the
+ image format. If the image does not specify its own resolution, the
+ explicitly specified resolution is used (if given), else it defaults to
+ ''1ddpx''.</dd>
<dt>snap</dt>
- <dd>If the "snap" keyword is provided, and the specified resolution is such that one image pixel would be 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. Otherwise, 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.</dd>
+ <dd>If the "snap" keyword is provided, the computed ''<resolution>''
+ (if any) is the specified resolution rounded to the nearest value that
+ would map one image pixel to an integer number of device pixels.
+ If the resolution is taken from the image, then the used intrinsic
+ resolution is the image's native resolution similarly adjusted.</dd>
</dl>
- <p>This property must have no effect on vector images, as vector images
- do not have a concept of "resolution".</p>
+ <div class='example'>
+ <p>Printers tend to have substantially higher resolution than computer
+ monitors; due to this, an image that looks fine on the screen may look
+ pixellated when printed out.
+ The 'image-resolution' property can be used to embed a high-resolution
+ image into the document and maintain an appropriate size, ensuring
+ attractive display both on screen and on paper:</p>
+
+ <pre class='css'><code>
+img.high-res {
+ image-resolution: 300dpi;
+}</code></pre>
+
+ <p>With this set, an image meant to be 5 inches wide at 300dpi will actually
+ display as 5in wide; without this set, the image would display as approximately 15.6in
+ wide since the image is 15000 image pixels across, and by default CSS displays 96 image pixels per
+ inch.</p>
+ </div>
+
<div class="example">
- <p>This rule specifies that the UA should use the image resolution
+ <p>Some image formats can encode the image resolution into the image data.
+ This rule specifies that the UA should use the image resolution
found in the image itself, falling back to 1 image pixel per CSS
''px'' unit.</p>
<pre class=css>img { image-resolution: from-image }</pre>
+
+ <p>These rules both specify that the UA should use the image resolution
+ found in the image itself, but if the image has no resolution, the
+ resolution is set to 300dpi instead of the default ''1dppx''.</p>
+
+ <pre>
+img { image-resolution: from-image 300dpi }
+img { image-resolution: 300dpi from-image }
+ </pre>
+
</div>
<div class="example">
- <p>Using this rule, the image resolution is set to 300dpi and the
- resolution in the image, if any, is ignored.</p>
+ <p>Using this rule, the image resolution is set to 300dpi. (The
+ resolution in the image, if any, is ignored.)</p>
<pre>img { image-resolution: 300dpi }</pre>
- <p>This rule, on the other hand, if used when the screen's resolution is 96dpi, would instead render the image at 288dpi (so that 3 image pixels map to 1 device pixel):</p>
+ <p>This rule, on the other hand, if used when the screen's resolution
+ is 96dpi, would instead render the image at 288dpi (so that 3 image
+ pixels map to 1 device pixel):</p>
<pre>img { image-resolution: 300dpi snap; }</pre>
- </div>
-
- <div class="example">
- <p>These rules both specify that the UA should use the image resolution
- found in the image itself. If the image has no resolution, the
- resolution is set to 300dpi.</p>
-
- <pre>
-img { image-resolution: from-image 300dpi }
-img { image-resolution: 300dpi from-image }
- </pre>
+ <p>The ''snap'' keyword can also be used when the resolution is taken
+ from the image. In this rule:
+ <pre>img { image-resolution: snap from-image; }</pre>
+ <p>An image declaring itself as 300dpi will, in the situation above,
+ display at 288dpi (3 image pixels per device pixel) whereas an image
+ declaring 72dpi will render at 96dpi (1 image pixel per device pixel).
</div>
+
<!-- ====================================================================== -->
<h3 id="image-orientation">
Received on Tuesday, 15 November 2011 23:08:48 UTC