- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 17 Aug 2011 00:34:01 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css4-images
In directory hutz:/tmp/cvs-serv23507
Modified Files:
Overview.src.html
Log Message:
Update with plans for new stuff.
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css4-images/Overview.src.html,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- Overview.src.html 2 Aug 2011 22:20:45 -0000 1.1
+++ Overview.src.html 17 Aug 2011 00:33:59 -0000 1.2
@@ -110,8 +110,15 @@
keyword as their property value. For readability it has not been repeated
explicitly.</p>
-<h2>
-Stuff I'm Pulling From Images 3</h2>
+<h2>Planned Features</h2>
+
+<ol>
+ <li>Logical keywords for specifying linear gradient direction.</li>
+
+ <li>Conical gradients</li>
+</ol>
+
+<h2>Stuff I'm Pulling From Images 3</h2>
@@ -120,6 +127,8 @@
<h3 id="image-notation">
Image Annotations and Fallbacks: the ''image()'' notation</h3>
+ <p class=issue>I've put the bare image() function with fallback functionality only back into Images 3. The resolution and direction keywords are still intended to show up here in Images 4.</p>
+
<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
and to declare fallback images to be used if the original image can't be
@@ -238,171 +247,7 @@
<!-- ====================================================================== -->
-<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>
- <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><resolution></dt>
- <dd>The value sets the resolution of the image. In combination with
- ''from-image'', the specified resolution is only used if the image
- does not have a resolution.</dd>
-
- <dt>from-image</dt>
- <dd>The UA must look for the resolution in the image itself. If the
- image does not have a resolution, the specified <resolution>
- value is used, or ''1dppx'' if none is given.</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>
- </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>
<!-- ====================================================================== -->
Received on Wednesday, 17 August 2011 00:34:06 UTC