- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 04 Aug 2011 00:14:59 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv26827
Modified Files:
Overview.html Overview.src.html
Log Message:
Re-added image-orientation and image-resolution, marked the "snap" keyword on image-resolution as at-risk.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.122
retrieving revision 1.123
diff -u -d -r1.122 -r1.123
--- Overview.html 3 Aug 2011 23:41:19 -0000 1.122
+++ Overview.html 4 Aug 2011 00:14:56 -0000 1.123
@@ -16,13 +16,13 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 August 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 August 2011</h2>
<dl>
<dt>This version:
<dd><a
- href="http://www.w3.org/TR/2011/ED-css3-images-20110803/">http://www.w3.org/TR/2011/ED-css3-images-20110803/</a>
+ href="http://www.w3.org/TR/2011/ED-css3-images-20110804/">http://www.w3.org/TR/2011/ED-css3-images-20110804/</a>
<dt>Latest version:
@@ -188,6 +188,18 @@
class=property>object-position</code>’ property</a>
</ul>
+ <li><a href="#image-processing"><span class=secno>7. </span> Image
+ Processing</a>
+ <ul class=toc>
+ <li><a href="#image-resolution"><span class=secno>7.1. </span>
+ Overriding Image Resolutions: the ‘<code
+ class=property>image-resolution</code>’ property</a>
+
+ <li><a href="#image-orientation"><span class=secno>7.2. </span>
+ Orienting an Image on the Page: the ‘<code
+ class=property>image-orientation</code>’ property</a>
+ </ul>
+
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
<li class=no-num><a href="#references">References</a>
@@ -307,10 +319,10 @@
<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
- ‘<code class=property>image-resolution</code>’ 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>
+ ‘<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 {
@@ -339,6 +351,7 @@
class=property>cursor</code>’ properties <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<!-- ====================================================================== -->
+ <!-- ====================================================================== -->
<h3 id=url><span class=secno>4.1. </span> Image References and Image
@@ -1537,6 +1550,229 @@
class=property>image-position</code>’ in their stylesheets.</p>
<!-- ====================================================================== -->
+ <h2 id=image-processing><span class=secno>7. </span> Image Processing</h2>
+
+ <h3 id=image-resolution><span class=secno>7.1. </span> Overriding Image
+ Resolutions: the ‘<a href="#image-resolution0"><code
+ class=property>image-resolution</code></a>’ property</h3>
+
+ <p>The <i>image resolution</i> is defined as the number of image pixels per
+ unit length, e.g., pixels per inch. Some image formats can record
+ information about the resolution of images. This information can be
+ helpful when determining the actual size of the image in the formatting
+ process. However, the information can also be wrong, in which case it
+ should be ignored. By default, CSS assumes a resolution of one image pixel
+ per CSS ‘<code class=css>px</code>’ unit; however, the
+ ‘<a href="#image-resolution0"><code
+ class=property>image-resolution</code></a>’ property allows using
+ some other resolution.
+
+ <table class=propdef>
+ <tbody>
+ <tr>
+ <th>Name:
+
+ <td><dfn id=image-resolution0>image-resolution</dfn>
+
+ <tr>
+ <th>Value:
+
+ <td>[from-image || <resolution>] snap?
+
+ <tr>
+ <th>Initial:
+
+ <td>1dppx
+
+ <tr>
+ <th>Applies to:
+
+ <td>all elements
+
+ <tr>
+ <th>Inherited:
+
+ <td>yes
+
+ <tr>
+ <th>Media:
+
+ <td>visual
+
+ <tr>
+ <th>Computed value:
+
+ <td>specified value
+ </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:
+
+ <dl>
+ <dt>from-image
+
+ <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).
+
+ <dt><resolution>
+
+ <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.
+
+ <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.
+ </dl>
+
+ <p>This property must have no effect on vector images, as vector images do
+ not have a concept of "resolution".
+
+ <p class=note>Note that for all images other than the contents of replaced
+ elements, the ‘<code class=css>image()</code>’ function may be
+ used to override the resolution set here.
+
+ <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
+ class=css>px</code>’ unit.</p>
+
+ <pre class=css>img { image-resolution: 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>
+
+ <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>
+
+ <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>
+ </div>
+ <!-- ====================================================================== -->
+
+ <h3 id=image-orientation><span class=secno>7.2. </span> Orienting an Image
+ on the Page: the ‘<a href="#image-orientation0"><code
+ class=property>image-orientation</code></a>’ property</h3>
+
+ <p>Images from camera phones, digital cameras or scanners may be encoded
+ sideways. For example, the first row of image data may represent the
+ leftmost or rightmost column of image pixels. Furthermore, often such
+ devices have limited resources, and do not have the capability to rotate
+ the image into an upright orientation. However, this type of device may
+ have internal knowledge or can accept input from its user as to the
+ rotational correction to perform.
+
+ <p>The image-orientation property provides a way to specify an
+ "out-of-band" rotation to be applied to image source data. This facility
+ is not intended to specify layout transformations such as arbitrary
+ rotation or flipping the image in the horizontal or vertical direction. It
+ is not needed to correctly orient an image when printing in landscape
+ versus portrait orientation, as that rotation is done as part of layout.
+ It should only be used to correct incorrectly-oriented images.
+
+ <table class=propdef>
+ <tbody>
+ <tr>
+ <th>Name:
+
+ <td><dfn id=image-orientation0>image-orientation</dfn>
+
+ <tr>
+ <th>Value:
+
+ <td><angle>
+
+ <tr>
+ <th>Initial:
+
+ <td>0deg
+
+ <tr>
+ <th>Applies to:
+
+ <td>images
+
+ <tr>
+ <th>Inherited:
+
+ <td>no
+
+ <tr>
+ <th>Media:
+
+ <td>visual
+
+ <tr>
+ <th>Computed value:
+
+ <td>specified value, rounded and normalized (see text)
+ </table>
+
+ <p>‘<a href="#image-orientation0"><code
+ class=property>image-orientation</code></a>’ specifies an orthogonal
+ rotation to be applied to an image before it is laid out. CSS layout
+ processing applies to the image <em>after</em> rotation. This implies, for
+ example:
+
+ <ul>
+ <li>The intrinsic height and width are derived from the rotated rather
+ than the original image dimensions;
+
+ <li>The height (width) property applies to the vertical (horizontal)
+ dimension of the image, <em>after</em> rotation.
+ </ul>
+
+ <p>Positive values cause the image to be rotated to the right (in a
+ clockwise direction), while negative values cause a rotation to the left.
+ The computed value of the property is calculated by rounding the specified
+ angle to the nearest quarter-turn (90deg, 100grad, .25turn, etc.),
+ rounding away from 0 (that is, 45deg is rounded to 90deg, while -45deg is
+ rounded to -90deg), then moduloing the value by 1 turn (360deg, 400grad,
+ etc.).
+
+ <div class=example>
+ <p>The following example rotates the image 90 degrees clockwise:</p>
+
+ <pre>
+img.ninety { image-orientation: 90deg }
+...
+<img class="ninety" src=... />
+ </pre>
+
+ <p>The same effect could be achieved with, for example, an angle of
+ -270deg or 450deg.</p>
+ </div>
+ <!-- ====================================================================== -->
+
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
<h2 class=no-num id=references>References</h2>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.129
retrieving revision 1.130
diff -u -d -r1.129 -r1.130
--- Overview.src.html 3 Aug 2011 23:41:19 -0000 1.129
+++ Overview.src.html 4 Aug 2011 00:14:57 -0000 1.130
@@ -64,9 +64,11 @@
<p>The following features are at risk:</p>
<ol>
- <li>The element() function</li>
+ <li>The <a href="#element-reference">element() function</a></li>
- <li>The "none" and "scale-down" values for object-fit</li>
+ <li>The "none" and "scale-down" values for 'object-fit'</li>
+
+ <li>The "snap" keyword for 'image-resolution'
</ol>
<!-- ====================================================================== -->
@@ -1156,6 +1158,177 @@
<!-- ====================================================================== -->
+<h2 id="image-processing">
+Image Processing</h2>
+
+<h3 id="image-resolution">
+Overriding Image Resolutions: the 'image-resolution' property</h3>
+
+ <p>The <i>image resolution</i> is defined as the number of image
+ pixels per unit length, e.g., pixels per inch. Some image formats can
+ record information about the resolution of images. This information
+ can be helpful when determining the actual size of the image in the
+ formatting process. However, the information can also be wrong, in
+ which case it should be ignored. By default, CSS assumes a resolution
+ of one image pixel per CSS ''px'' unit; however, the 'image-resolution'
+ property allows using some other resolution.
+
+ <table class="propdef">
+ <tr>
+ <th>Name:
+ <td><dfn>image-resolution</dfn>
+ <tr>
+ <th>Value:
+ <td>[from-image || <resolution>] snap?
+ <tr>
+ <th>Initial:
+ <td>1dppx
+ <tr>
+ <th>Applies to:
+ <td>all elements
+ <tr>
+ <th>Inherited:
+ <td>yes
+ <tr>
+ <th>Media:
+ <td>visual
+ <tr>
+ <th>Computed value:
+ <td>specified value
+ </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>
+
+ <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>
+
+ <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>
+ </dl>
+
+ <p>This property must have no effect on vector images, as vector images
+ do not have a concept of "resolution".</p>
+
+ <p class='note'>Note that for all images other than the contents of replaced
+ elements, the ''image()'' function may be used to override the resolution set
+ here.</p>
+
+ <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
+ ''px'' unit.</p>
+
+ <pre class=css>img { image-resolution: 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>
+
+ <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>
+
+ <pre>img { image-resolution: 300dpi snap; }
+ </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>
+ </div>
+
+<!-- ====================================================================== -->
+
+<h3 id="image-orientation">
+Orienting an Image on the Page: the 'image-orientation' property</h3>
+
+ <p>Images from camera phones, digital cameras or scanners may be encoded sideways.
+ For example, the first row of image data may represent the leftmost or
+ rightmost column of image pixels. Furthermore, often such devices have limited
+ resources, and do not have the capability to rotate the image into an upright
+ orientation. However, this type of device may have internal knowledge or can
+ accept input from its user as to the rotational correction to perform.</p>
+
+ <p>The image-orientation property provides a way to specify an "out-of-band"
+ rotation to be applied to image source data. This facility is not intended to
+ specify layout transformations such as arbitrary rotation or flipping the image
+ in the horizontal or vertical direction. It is not needed to correctly orient
+ an image when printing in landscape versus portrait orientation, as that
+ rotation is done as part of layout. It should only be used to correct
+ incorrectly-oriented images.</p>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:
+ <td><dfn>image-orientation</dfn>
+ <tr>
+ <th>Value:
+ <td><angle>
+ <tr>
+ <th>Initial:
+ <td>0deg
+ <tr>
+ <th>Applies to:
+ <td>images
+ <tr>
+ <th>Inherited:
+ <td>no
+ <tr>
+ <th>Media:
+ <td>visual
+ <tr>
+ <th>Computed value:
+ <td>specified value, rounded and normalized (see text)
+ </table>
+
+ <p>'image-orientation' specifies an orthogonal rotation to be applied to an image
+ before it is laid out. CSS layout processing applies to the image <em>after</em>
+ rotation. This implies, for example:</p>
+
+ <ul>
+ <li>The intrinsic height and width are derived from the rotated rather than the
+ original image dimensions;</li>
+
+ <li>The height (width) property applies to the vertical (horizontal) dimension
+ of the image, <em>after</em> rotation.</li>
+ </ul>
+
+ <p>Positive values cause the image to be rotated to the right (in a clockwise
+ direction), while negative values cause a rotation to the left. The computed
+ value of the property is calculated by rounding the specified angle to the
+ nearest quarter-turn (90deg, 100grad, .25turn, etc.), rounding away from 0
+ (that is, 45deg is rounded to 90deg, while -45deg is rounded to -90deg), then
+ moduloing the value by 1 turn (360deg, 400grad, etc.).</p>
+
+ <div class="example">
+ <p>The following example rotates the image 90 degrees clockwise:</p>
+
+ <pre>
+img.ninety { image-orientation: 90deg }
+...
+<img class="ninety" src=... />
+ </pre>
+
+ <p>The same effect could be achieved with, for example, an angle of -270deg
+ or 450deg.</p>
+ </div>
+
+<!-- ====================================================================== -->
+
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
<h2 class="no-num" id="references">References</h2>
Received on Thursday, 4 August 2011 00:15:00 UTC