- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 30 Nov 2011 19:03:53 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images In directory hutz:/tmp/cvs-serv15944 Modified Files: Overview.html Overview.src.html Log Message: Minor editorial tweaks to update object-fit to current terminology, fix smartquotes that should be straight quotes, etc. Index: Overview.html =================================================================== RCS file: /sources/public/csswg/css3-images/Overview.html,v retrieving revision 1.221 retrieving revision 1.222 diff -u -d -r1.221 -r1.222 --- Overview.html 15 Nov 2011 23:58:08 -0000 1.221 +++ Overview.html 30 Nov 2011 19:03:51 -0000 1.222 @@ -35,12 +35,12 @@ <h1>CSS Image Values and Replaced Content Module Level 3</h1> - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 November + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 November 2011</h2> <dl> <dt>This Version:</dt> - <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20111115/">http://www.w3.org/TR/2011/WD-css3-images-20111115/</a>--> + <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20111130/">http://www.w3.org/TR/2011/WD-css3-images-20111130/</a>--> <dd><a href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a> @@ -225,8 +225,8 @@ <li><a href="#object-negotiation"><span class=secno>5.2. </span> CSS⇋Object Negotiation</a> - <li><a href="#default-sizing"><span class=secno>5.3. </span> Concrete - Object Size Resolution</a> + <li><a href="#default-sizing"><span class=secno>5.3. </span> Default + Concrete Object Size Resolution</a> <li><a href="#object-fit"><span class=secno>5.4. </span> Sizing Objects: the ‘<code class=property>object-fit</code>’ property</a> @@ -1527,7 +1527,7 @@ <h2 id=sizing><span class=secno>5. </span> Sizing Images and Objects in CSS</h2> - <p>Images used in CSS may come from a number of sources, from defined image + <p>Images used in CSS may come from a number of sources, from binary image formats (such as gif, jpeg, etc), dedicated markup formats (such as SVG), and CSS-specific formats (such as the linear-gradient() value type defined in this specification). As well, a document may contain many other types @@ -1551,26 +1551,28 @@ <p>An object's intrinsic dimensions are its preferred, natural width, height, and aspect ratio, if they exist. There can be an <dfn id=intrinsic-height>intrinsic height</dfn> and <dfn - id=intrinsic-width>intrinsic width</dfn>, defining a definite rectangle. - (Most bitmap images fall into this category.) There can be an <dfn - id=intrinsic-aspect-ratio>intrinsic aspect ratio</dfn> defining the - relation of the width to the height, but no definite size. (SVG images - designed to scale may fall into this category.) There can be just an - intrinsic height or width. Or there can be no intrinsic dimensions at - all, implying that the object has no preferred size or aspect ratio. - (Embedded documents are often assumed to have no intrinsic size, as are - CSS gradients, defined in this specification.)</p> + id=intrinsic-width>intrinsic width</dfn>, defining a definite rectangle + and an <a href="#intrinsic-aspect-ratio"><i>intrinsic aspect + ratio</i></a>. (Most bitmap images fall into this category.) There can + be only an <dfn id=intrinsic-aspect-ratio>intrinsic aspect ratio</dfn> + defining the relation of the width to the height, but no definite size. + (SVG images designed to scale may fall into this category.) There can be + just an intrinsic height or width. Or there can be no intrinsic + dimensions at all, implying that the object has no preferred size or + aspect ratio. (Embedded documents are often assumed to have no intrinsic + size, as are CSS gradients, defined in this specification.)</p> <p>If an object (such as an icon) has multiple sizes, then the largest - size is used. If it has multiple aspect ratios of that size (or of no - size), then the aspect ratio closest to the aspect ratio of the <a + size is taken as its intrinsic size. If it has multiple aspect ratios at + that size, or has multiple aspect ratios and no size, then the aspect + ratio closest to the aspect ratio of the <a href="#default-object-size"><i>default object size</i></a> is used.</p> <dt><dfn id=specified-size>specified size</dfn> <dd>The specified size of an object is given by CSS, such as through the - ‘<a href="#object-fit0"><code - class=property>object-fit</code></a>’ or ‘<code + ‘<code class=property>width</code>’ and ‘<code + class=property>height</code>’ or ‘<code class=property>background-size</code>’ properties. The specified size can be a definite width and height, a set of constraints, or a combination thereof. @@ -1600,8 +1602,7 @@ href="#default-object-size"><i>default object size</i></a> of properties and contexts that appear in CSS 2.1, plus ‘<code class=property>border-image</code>’ from CSS 3 Backgrounds & - Borders, as that module was stabilized before this one. Newer modules - that accept an ‘<a href="#ltimage"><code + Borders. Newer modules that accept an ‘<a href="#ltimage"><code class=css><image></code></a>’ component value in a new context must define the <a href="#default-object-size"><i>default object size</i></a> in that context.</p> @@ -1652,18 +1653,20 @@ <ol> <li>When an image or object is specified in a document, such as through a - url() value in a ‘<code - class=property>background-image</code>’ property or a @src - attribute on an <img> element, CSS queries the object for its <a - href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>. + ‘<code class=css>url()</code>’ value in a ‘<code + class=property>background-image</code>’ property or an + <code>src</code> attribute on an <code><img></code> element, CSS + queries the object for its <a href="#intrinsic-dimensions"><i>intrinsic + dimensions</i></a>. <li>Using the <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>, the <a href="#specified-size"><i>specified size</i></a>, and the <a href="#default-object-size"><i>default object size</i></a> for the context the image or object is used in, CSS then computes a <a href="#concrete-object-size"><i>concrete object - size</i></a> that defines the size and position of the region the object - will render in (specified in the following section). + size</i></a>. (See the <a href="#default-sizing">following section.) This + defines the size and position of the region the object will render + in.</a> <li>CSS asks the object to render itself at the <a href="#concrete-object-size"><i>concrete object size</i></a>. CSS does @@ -1681,8 +1684,8 @@ </ol> <!-- ====================================================================== --> - <h3 id=default-sizing><span class=secno>5.3. </span> Concrete Object Size - Resolution</h3> + <h3 id=default-sizing><span class=secno>5.3. </span> Default Concrete + Object Size Resolution</h3> <p>In the absence of more specific rules, an object's <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> are resolved @@ -1811,61 +1814,72 @@ contents of a replaced element should be scaled relative to the box established by its used height and width. It also enables scaling a replaced element's contents up to a specified maximum size or down to a - specified minimum size while preserving its aspect ratio. This property - never affects the size of the replaced element; it only affects the size - of the contents of the replaced element. + specified minimum size while preserving its aspect ratio. <p>Not all replaced elements can be scaled, but images typically can. - <p>If the replaced element's content do not have an intrinsic aspect ratio - (which may be derived from an intrinsic width and height), all of the - values for ‘<a href="#object-fit0"><code + <p>If the replaced element's content does not have an <a + href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>, all of + the values for ‘<a href="#object-fit0"><code class=property>object-fit</code></a>’ are treated as ‘<code - class=css>fill</code>’. Otherwise, the contents are scaled as - follows: + class=css>fill</code>’. Otherwise, the object is scaled as follows: <dl> <dt>fill <dd> - <p>Set the content's size to the <a + <p>Set the object's size to the <a href="#concrete-object-size"><i>concrete object size</i></a> obtained by - running the <i title=default-sizing>object sizing algorithm</i> with a - <a href="#specified-size"><i>specified size</i></a> and a <a + running the <a href=default-sizing>object sizing algorithm</a> with a <a + href="#specified-size"><i>specified size</i></a> and a <a href="#default-object-size"><i>default object size</i></a> equal to the replaced element's used width and height.</p> - <p>This will make the contents exactly fill the replaced element.</p> + <p>This will make the contents exactly fill the replaced element's box.</p> <dt>contain <dd> - <p>Determine the used ‘height’ and ‘width’ of the element as - usual, except if both ‘height’ and ‘width’ are ‘auto’, and - the used value of at least one of ‘max-width’ and ‘max-height’ - is not ‘none’, then compute the element's used width and used height - as though the intrinsic dimensions of the contents were infinitely large - numbers whose ratio is the actual intrinsic ratio of the contents.</p> + <p>Determine the used ‘<code class=property>height</code>’ + and ‘<code class=property>width</code>’ of the element as + usual, except: If both ‘<code class=property>height</code>’ + and ‘<code class=property>width</code>’ are ‘<code + class=css>auto</code>’, and the used value of at least one of + ‘<code class=property>max-width</code>’ and ‘<code + class=property>max-height</code>’ is not ‘<code + class=css>none</code>’, then compute the element's used width and + used height as though the intrinsic dimensions of the contents were + infinitely large numbers whose ratio is the actual intrinsic ratio of + the contents. This will proportionally scale the used width and height + up to the given maximum constraints.</p> - <p>Set the content's size to the largest width and height that has the - same aspect ratio as the content's intrinsic aspect ratio, and - additionally has neither width nor height larger than the replaced - element's used width and height, respectively.</p> + <p>Set the <a href="#concrete-object-size"><i>concrete object + size</i></a> to the largest width and height that has the same aspect + ratio as the object's intrinsic aspect ratio, and additionally has + neither width nor height larger than the replaced element's used width + and height, respectively.</p> <dt>cover <dd> - <p>Determine the used ‘height’ and ‘width’ of the element as - usual, except if both ‘height’ and ‘width’ are ‘auto’, and - the used value of at least one of ‘min-width’ and ‘min-height’ - is not ‘none’, then compute the element's used width and used height - as though the intrinsic dimensions of the contents were infinitely small - numbers whose ratio is the actual intrinsic ratio of the contents.</p> + <p>Determine the used ‘<code class=property>height</code>’ + and ‘<code class=property>width</code>’ of the element as + usual, except: If both ‘<code class=property>height</code>’ + and ‘<code class=property>width</code>’ are ‘<code + class=css>auto</code>’, and the used value of at least one of + ‘<code class=property>min-width</code>’ and ‘<code + class=property>min-height</code>’ is not ‘<code + class=css>none</code>’, then compute the element's used width and + used height as though the intrinsic dimensions of the contents were + infinitely small numbers whose ratio is the actual intrinsic ratio of + the contents. This will proportionally scale the used width and height + down to the given minimum constraints.</p> - <p>Set the content's size to the smallest width and height that has the - same aspect ratio as the content's intrinsic aspect ratio, and - additionally has neither width nor height smaller than the replaced - element's used width and height, respectively.</p> + <p>Set the <a href="#concrete-object-size"><i>concrete object + size</i></a> to the smallest width and height that has the same aspect + ratio as the object's intrinsic aspect ratio, and additionally has + neither width nor height smaller than the replaced element's used width + and height, respectively.</p> <dt>none @@ -1880,24 +1894,22 @@ <dt>scale-down <dd> - <p>Size the content as if ‘<code class=property>none</code>’ - or ‘<code class=property>contain</code>’ were specified, - whichever would result in a smaller size.</p> + <p>Size the content as if ‘<code class=css>none</code>’ or + ‘<code class=css>contain</code>’ were specified, whichever + would result in a smaller size.</p> - <p class=note>Note that both ‘<code - class=property>none</code>’ and ‘<code - class=property>contain</code>’ respect the content's intrinsic - aspect ratio, so the concept of "smaller" is well-defined.</p> + <p class=note>Note that both ‘<code class=css>none</code>’ + and ‘<code class=css>contain</code>’ respect the content's + intrinsic aspect ratio, so the concept of "smaller" is well-defined.</p> </dl> - <p>If the content does not completely fill the replaced element, the - unfilled space shows the replaced element's background. Replaced elements - always clip their contents, similar to the effects of ‘<code - class=css>overflow:hidden</code>’ on non-replaced elements, so any - content that would extend beyond the edges of the box are simply not - displayed. See the ‘<a href="#object-position0"><code + <p>If the content does not completely fill the replaced element's content + box, the unfilled space shows the replaced element's background. Since + replaced elements always clip their contents to the content box, the + content will never overflow. See the ‘<a + href="#object-position0"><code class=property>object-position</code></a>’ property for positioning - the object with respect to the element's box. + the object with respect to the content box. <div class=figure> <p><img alt="" src="img_scale.png" style="border: thin solid black;"></p> @@ -1914,7 +1926,7 @@ <p class=note>Note: the ‘<a href="#object-fit0"><code class=property>object-fit</code></a>’ property has similar semantics - to the fit attribute in <a href="#SMIL10" + to the <code>fit</code> attribute in <a href="#SMIL10" rel=biblioentry>[SMIL10]<!--{{SMIL10}}--></a>. <p class=note>Note: Per the <i title=object-negotiation>CSS⇋Object Index: Overview.src.html =================================================================== RCS file: /sources/public/csswg/css3-images/Overview.src.html,v retrieving revision 1.229 retrieving revision 1.230 diff -u -d -r1.229 -r1.230 --- Overview.src.html 15 Nov 2011 23:58:08 -0000 1.229 +++ Overview.src.html 30 Nov 2011 19:03:51 -0000 1.230 @@ -975,7 +975,7 @@ <h2 id="sizing"> Sizing Images and Objects in CSS</h2> - <p>Images used in CSS may come from a number of sources, from defined image + <p>Images used in CSS may come from a number of sources, from binary image formats (such as gif, jpeg, etc), dedicated markup formats (such as SVG), and CSS-specific formats (such as the linear-gradient() value type defined in this specification). As well, a document may contain many other types of objects, @@ -997,9 +997,10 @@ <dd> <p>An object's intrinsic dimensions are its preferred, natural width, height, and aspect ratio, if they exist. There can be an <dfn>intrinsic height</dfn> - and <dfn>intrinsic width</dfn>, defining a definite rectangle. (Most bitmap - images fall into this category.) There can be an <dfn>intrinsic aspect ratio</dfn> - defining the relation of the width to the height, but no definite size. + and <dfn>intrinsic width</dfn>, defining a definite rectangle and an + <i>intrinsic aspect ratio</i>. (Most bitmap images fall into this category.) + There can be only an <dfn>intrinsic aspect ratio</dfn> defining the + relation of the width to the height, but no definite size. (SVG images designed to scale may fall into this category.) There can be just an intrinsic height or width. Or there can be no intrinsic dimensions at all, implying that the object has no preferred size or aspect ratio. @@ -1007,15 +1008,16 @@ CSS gradients, defined in this specification.)</p> <p>If an object (such as an icon) has multiple sizes, then the largest - size is used. If it has multiple aspect ratios of that size (or of no - size), then the aspect ratio closest to the aspect ratio of the - <i>default object size</i> is used.</p> + size is taken as its intrinsic size. If it has multiple aspect ratios + at that size, or has multiple aspect ratios and no size, then the aspect + ratio closest to the aspect ratio of the <i>default object size</i> is used.</p> </dd> <dt><dfn>specified size</dfn></dt> <dd>The specified size of an object is given by CSS, such as through the - 'object-fit' or 'background-size' properties. The specified size can be a - definite width and height, a set of constraints, or a combination thereof.</dd> + 'width' and 'height' or 'background-size' properties. The specified size + can be a definite width and height, a set of constraints, or a combination + thereof.</dd> <dt><dfn>concrete object size</dfn></dt> <dd>The <i>concrete object size</i> is the result of transforming the <i>intrinsic dimensions</i> @@ -1030,7 +1032,11 @@ <i>intrinsic dimensions</i> and <i>specified size</i> are missing dimensions. It varies based on the context in which that the image is being laid out.</p> - <p>The following list defines the <i>default object size</i> of properties and contexts that appear in CSS 2.1, plus 'border-image' from CSS 3 Backgrounds & Borders, as that module was stabilized before this one. Newer modules that accept an ''<image>'' component value in a new context must define the <i>default object size</i> in that context.</p> + <p>The following list defines the <i>default object size</i> of properties + and contexts that appear in CSS 2.1, plus 'border-image' from CSS 3 + Backgrounds & Borders. + Newer modules that accept an ''<image>'' component value in a new + context must define the <i>default object size</i> in that context.</p> <dl> <dt>'background-image'</dt> @@ -1059,19 +1065,32 @@ <p>Objects in CSS are sized and rendered as follows:</p> <ol> - <li>When an image or object is specified in a document, such as through a url() value in a 'background-image' property or a @src attribute on an <img> element, CSS queries the object for its <i>intrinsic dimensions</i>.</li> + <li>When an image or object is specified in a document, such as through + a ''url()'' value in a 'background-image' property or an <code>src</code> + attribute on an <code><img></code> element, CSS queries the object + for its <i>intrinsic dimensions</i>.</li> - <li>Using the <i>intrinsic dimensions</i>, the <i>specified size</i>, and the <i>default object size</i> for the context the image or object is used in, CSS then computes a <i>concrete object size</i> that defines the size and position of the region the object will render in (specified in the following section).</li> + <li>Using the <i>intrinsic dimensions</i>, the <i>specified size</i>, + and the <i>default object size</i> for the context the image or object + is used in, CSS then computes a <i>concrete object size</i>. (See the + <a href="#default-sizing">following section.) This defines the size + and position of the region the object will render in.</li> - <li>CSS asks the object to render itself at the <i>concrete object size</i>. CSS does not define how objects render when the <i>concrete object size</i> is different from the object's <i>intrinsic dimensions</i>. The object may adjust itself to match the <i>concrete object size</i> in some way, or even render itself larger or smaller than the <i>concrete object size</i> to satisfy sizing constraints of its own.</li> + <li>CSS asks the object to render itself at the <i>concrete object size</i>. + CSS does not define how objects render when the <i>concrete object size</i> + is different from the object's <i>intrinsic dimensions</i>. The object + may adjust itself to match the <i>concrete object size</i> in some way, + or even render itself larger or smaller than the <i>concrete object size</i> + to satisfy sizing constraints of its own.</li> - <li>Unless otherwise specified by CSS, the object is then clipped to the <i>concrete object size</i>.</li> + <li>Unless otherwise specified by CSS, the object is then clipped to + the <i>concrete object size</i>.</li> </ol> <!-- ====================================================================== --> <h3 id="default-sizing"> -Concrete Object Size Resolution</h3> +Default Concrete Object Size Resolution</h3> <p>In the absence of more specific rules, an object's <i>intrinsic dimensions</i> are resolved to a <i>concrete object size</i> as @@ -1165,54 +1184,53 @@ <p>The 'object-fit' property specifies how the contents of a replaced element should be scaled relative to the box established by its used height and width. It also enables scaling a replaced element's contents up to a specified maximum - size or down to a specified minimum size while preserving its aspect ratio. - This property never affects the size of the replaced element; it only affects - the size of the contents of the replaced element.</p> + size or down to a specified minimum size while preserving its aspect ratio.</p> <p>Not all replaced elements can be scaled, but images typically can.</p> - <p>If the replaced element's content do not have an intrinsic aspect ratio - (which may be derived from an intrinsic width and height), all of the values - for 'object-fit' are treated as ''fill''. Otherwise, the contents are scaled - as follows:</p> + <p>If the replaced element's content does not have an <i>intrinsic aspect + ratio</i>, all of the values for 'object-fit' are treated as ''fill''. + Otherwise, the object is scaled as follows:</p> <dl> <dt>fill</dt> <dd> - <p>Set the content's size to the <i>concrete object size</i> obtained - by running the <i title=default-sizing>object sizing algorithm</i> with - a <i>specified size</i> and a <i>default object size</i> equal to the + <p>Set the object's size to the <i>concrete object size</i> obtained + by running the <a href="default-sizing">object sizing algorithm</a> with + a <i>specified size</i> and a <i>default object size</i> equal to the replaced element's used width and height.</p> - <p>This will make the contents exactly fill the replaced element.</p> + <p>This will make the contents exactly fill the replaced element's box.</p> </dd> <dt>contain</dt> <dd> - <p>Determine the used ‘height’ and ‘width’ of the element as usual, - except if both ‘height’ and ‘width’ are ‘auto’, and the used value of at - least one of ‘max-width’ and ‘max-height’ is not ‘none’, then compute + <p>Determine the used 'height' and 'width' of the element as usual, + except: If both 'height' and 'width' are ''auto'', and the used value of + at least one of 'max-width' and 'max-height' is not ''none'', then compute the element's used width and used height as though the intrinsic dimensions of the contents were infinitely large numbers whose ratio - is the actual intrinsic ratio of the contents.</p> + is the actual intrinsic ratio of the contents. This will proportionally + scale the used width and height up to the given maximum constraints.</p> - <p>Set the content's size to the largest width and height that has the - same aspect ratio as the content's intrinsic aspect ratio, and additionally - has neither width nor height larger than the replaced element's used - width and height, respectively.</p> + <p>Set the <i>concrete object size</i> to the largest width and height + that has the same aspect ratio as the object's intrinsic aspect ratio, + and additionally has neither width nor height larger than the replaced + element's used width and height, respectively.</p> </dd> <dt>cover</dt> <dd> - <p>Determine the used ‘height’ and ‘width’ of the element as usual, - except if both ‘height’ and ‘width’ are ‘auto’, and the used value of at - least one of ‘min-width’ and ‘min-height’ is not ‘none’, then compute + <p>Determine the used 'height' and 'width' of the element as usual, + except: If both 'height' and 'width' are ''auto'', and the used value of + at least one of 'min-width' and 'min-height' is not ''none'', then compute the element's used width and used height as though the intrinsic dimensions of the contents were infinitely small numbers whose ratio - is the actual intrinsic ratio of the contents.</p> + is the actual intrinsic ratio of the contents. This will proportionally + scale the used width and height down to the given minimum constraints.</p> - <p>Set the content's size to the smallest width and height that has - the same aspect ratio as the content's intrinsic aspect ratio, and + <p>Set the <i>concrete object size</i> to the smallest width and height + that has the same aspect ratio as the object's intrinsic aspect ratio, and additionally has neither width nor height smaller than the replaced element's used width and height, respectively.</p> </dd> @@ -1227,20 +1245,20 @@ <dt>scale-down</dt> <dd> - <p>Size the content as if 'none' or 'contain' were specified, whichever + <p>Size the content as if ''none'' or ''contain'' were specified, whichever would result in a smaller size.</p> - <p class=note>Note that both 'none' and 'contain' respect the content's + <p class=note>Note that both ''none'' and ''contain'' respect the content's intrinsic aspect ratio, so the concept of "smaller" is well-defined.</p> </dd> </dl> - <p>If the content does not completely fill the replaced element, the unfilled - space shows the replaced element's background. Replaced elements always clip - their contents, similar to the effects of ''overflow:hidden'' on non-replaced elements, - so any content that would extend beyond the edges of the box are simply not - displayed. See the 'object-position' property for positioning the object - with respect to the element's box.</p> + <p>If the content does not completely fill the replaced element's content box, + the unfilled space shows the replaced element's background. + Since replaced elements always clip their contents to the content box, the + content will never overflow. + See the 'object-position' property for positioning the object with respect to + the content box.</p> <div class="figure"> <p><img src="img_scale.png" style="border: thin solid black;" alt=""></p> @@ -1253,7 +1271,7 @@ </div> <p class="note">Note: the 'object-fit' property has similar semantics to - the fit attribute in [[SMIL10]].</p> + the <code>fit</code> attribute in [[SMIL10]].</p> <p class=note>Note: Per the <i title=object-negotiation>CSS⇋Object Negotiation</i> algorithm, the <i>concrete object size</i> (or, in this case, the size of the
Received on Wednesday, 30 November 2011 19:03:57 UTC