- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 23 May 2011 19:51:37 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv21110
Modified Files:
Overview.html Overview.src.html
Log Message:
Expanded the <resolution> section to actually talk about what the unit means.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.98
retrieving revision 1.99
diff -u -d -r1.98 -r1.99
--- Overview.html 23 May 2011 19:20:13 -0000 1.98
+++ Overview.html 23 May 2011 19:51:35 -0000 1.99
@@ -342,8 +342,37 @@
<dd>dots per ‘<code class=css>px</code>’ unit
</dl>
- <p class=note>The default resolution of raster images in CSS is
- ‘<code class=css>1dppx</code>’.</p>
+ <p>The <resolution> unit represents the size of a single "dot" of an
+ image. For raster images, a dot is an image pixel. For vector images, a
+ dot is a pixel in the outermost coordinate space of the image. A
+ <resolution> defines 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.
+ <span class=note>The default resolution of raster images in CSS is
+ ‘<code class=css>1dppx</code>’, which is equivalent to
+ ‘<code class=css>96dpi</code>’.</span>
+
+ <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>
+
+ <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>
<!-- ====================================================================== -->
<h2 id=image><span class=secno>4. </span> Image Values: the <image>
@@ -463,7 +492,7 @@
<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, it must be mirrored in the inline dimension when
+ opposite directionality, is must be mirrored in the inline dimension when
rendered.
<p>Multiple arguments can be given separated by commas, in which case the
@@ -514,8 +543,8 @@
slide in a slideshow. The syntax for ‘<code
class=css>element()</code>’ is defined as:
- <pre class=prod><dfn id=ltelement-reference><element-reference></dfn> =
- element( [<id-selector> | <identifier> ] )</pre>
+ <pre
+ class=prod><dfn id=ltelement-reference><element-reference></dfn> = element( [<id-selector> | <identifier> ] )</pre>
<p>where <id-selector> is an ID selector <a href="#SELECT"
rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, and <identifier> is an
@@ -540,14 +569,14 @@
<p>If the ‘<code class=css>element()</code>’ function refers to
an element, then it represents an image with width and height equal to the
- width and height of the bounding box of the border boxes of the referenced
- element. The image must be constructed by rendering the referenced element
- and its descendants at the same size that the element would be in its
- document, over an infinite transparent black background, positioned so
- that the edges of the margin box of the element is flush with the edges of
- the image. <span class=note>If the element has decorations or descendants
- that extend outside the margin box, these will be clipped to the margin
- box in the generated image by default. ‘<code
+ width and height of the margin box of the referenced element. The image
+ must be constructed by rendering the referenced element and its
+ descendants at the same size that the element would be in its document,
+ over an infinite transparent black background, positioned so that the
+ edges of the margin box of the element is flush with the edges of the
+ image. <span class=note>If the element has decorations or descendants that
+ extend outside the margin box, these will be clipped to the margin box in
+ the generated image by default. ‘<code
class=css>background-repeat:extend</code>’ may allow the author to
override this behavior so that decorations and descendants outside the
margin box are still painted.</span> If the referenced element or an
@@ -566,22 +595,7 @@
regeneration process. That is, the image must look identical to the
referenced element, modulo rasterization quality.
- <p class=note>While the decision is up to the host language, it is intended
- that element() can validly refer to some types of elements that are
- associated with the document but not descendants of the root element. For
- example, in HTML the <img>, <video>, and <canvas> elements all
- have a reasonable notion of what it means to "be rendered" without being
- part of a document, and so they can be created with Javascript, associated
- with a <a href="#css-element-reference-identifier"><i>CSS Element
- Reference Identifier</i></a>, and used in element() without being appended
- to the document.
-
<div class=example> TODO: copy an example from the MozHacks article</div>
-
- <p class=issue>Moz's implementation allows directly referencing SVG paint
- servers. This doesn't come for free - do we want to spec it out? I want to
- be able to use SVG paint servers *somehow*. I'm not sure if this is quite
- the place to do it, though.</p>
<!-- ====================================================================== -->
<h4 class="no-num no-toc" id=element-cycles> Detecting and Resolving
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.102
retrieving revision 1.103
diff -u -d -r1.102 -r1.103
--- Overview.src.html 23 May 2011 19:20:13 -0000 1.102
+++ Overview.src.html 23 May 2011 19:51:35 -0000 1.103
@@ -149,7 +149,29 @@
<dd>dots per ''px'' unit</dd>
</dl>
- <p class="note">The default resolution of raster images in CSS is ''1dppx''.</p>
+ <p>The <resolution> unit represents the size of a single "dot" of an image. For raster images,
+ a dot is an image pixel. For vector images, a dot is a pixel in the outermost coordinate space of
+ the image. A <resolution> defines how many of these dots fit in a CSS 'in', 'cm', or 'px' so that
+ images can be sized accordingly. <span class='note'>The default resolution of raster images in
+ CSS is ''1dppx'', which is equivalent to ''96dpi''.</span></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>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>
<!-- ====================================================================== -->
Received on Monday, 23 May 2011 19:51:39 UTC