Skip to content

Commit

Permalink
[giow] (0) Update the srcset='' algorithm to fix bugs; add more non-n…
Browse files Browse the repository at this point in the history 
…ormative material; unrelated CLDR update

Affected topics: HTML

git-svn-id: http://svn.whatwg.org/webapps@7225 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Aug 7, 2012
1 parent 1b6651e commit 6ac696d
Show file tree
Hide file tree
Showing 3 changed files with 371 additions and 49 deletions.
142 changes: 123 additions & 19 deletions complete.html
View file
Expand Up @@ -246,7 +246,7 @@

<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 2 August 2012</h2>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 7 August 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
Expand Down Expand Up @@ -555,7 +555,8 @@ <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 2 August 2012</h2
<li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.1.1.11 </span>An image not intended for the user</a></li>
<li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
<li><a href=#guidance-for-markup-generators><span class=secno>4.8.1.1.13 </span>Guidance for markup generators</a></li>
<li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
<li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</a></ol></li>
<li><a href=#adaptive-images><span class=secno>4.8.1.2 </span>Adaptive images</a></ol></li>
<li><a href=#the-iframe-element><span class=secno>4.8.2 </span>The <code>iframe</code> element</a></li>
<li><a href=#the-embed-element><span class=secno>4.8.3 </span>The <code>embed</code> element</a></li>
<li><a href=#the-object-element><span class=secno>4.8.4 </span>The <code>object</code> element</a></li>
Expand Down Expand Up @@ -24127,6 +24128,8 @@ <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code><
in <var title="">input</var> (skipping past the U+002C COMMA
character (,) separating this candidate from the next).</li>

<li><p>Return to the step labeled <i>splitting loop</i>.</li>

<li><p><i>Descriptor parser</i>: Let <var title="">candidates</var>
be an initially empty ordered list of <a href=#url title=URL>URLs</a>
each with an associated pixel density, and optionally an associated
Expand Down Expand Up @@ -24270,31 +24273,29 @@ <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code><
the viewport. <a href=#refsCSS>[CSS]</a></li>

<li><p>If there are any entries in <var title="">candidates</var>
that have an associated width that is greater than <var title="">max width</var>, then remove them, unless that would
that have an associated width that is less than <var title="">max width</var>, then remove them, unless that would
remove all the entries, in which case remove only the entries whose
associated width is greater than the smallest such width.</li>
associated width is less than the greatest such width.</li>

<li><p>If there are any entries in <var title="">candidates</var>
that have an associated height that is greater than <var title="">max height</var>, then remove them, unless that would
that have an associated height that is less than <var title="">max height</var>, then remove them, unless that would
remove all the entries, in which case remove only the entries whose
associated height is greater than the smallest such
height.</li>
associated height is less than the greatest such height.</li>

<li><p>If there are any entries in <var title="">candidates</var>
that have an associated pixel density that is less than a
user-agent-defined value giving the nominal pixel density of the
display, then remove them, unless that would remove all the
entries, in which case remove only the entries whose associated
pixel density is less than the greatest such pixel
density.</li>
pixel density is less than the greatest such pixel density.</li>

<li><p>Remove all the entries in <var title="">candidates</var>
that have an associated width that is less than the greatest such
width.</li>
that have an associated width that is greater than the smallest
such width.</li>

<li><p>Remove all the entries in <var title="">candidates</var>
that have an associated height that is less than the greatest such
height.</li>
that have an associated height that is greater than the smallest
such height.</li>

<li><p>Remove all the entries in <var title="">candidates</var>
that have an associated pixel density that is greater than the
Expand Down Expand Up @@ -25662,6 +25663,109 @@ <h6 id=guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Gui
</ul></div>


<h5 id=adaptive-images><span class=secno>4.8.1.2 </span>Adaptive images</h5>

<p><i>This section is non-normative.</i></p>

<p>CSS and media queries can be used to construct graphical page
layouts that adapt dynamically to the user's environment, in
particular to different viewport dimensions and pixel densities. For
content, however, CSS does not help; instead, we have the
<code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute. This section walks
through a sample case showing how to use this attribute.</p>

<p>Consider a situation where on wide screens (wider than 600 CSS
pixels) a 300&times;150 image named <code title="">a-rectangle.png</code> is to be used, but on smaller
screens (600 CSS pixels and less), a smaller 100&times;100 image
called <code title="">a-square.png</code> is to be used. The markup
for this would look like this:</p>

<pre>&lt;figure&gt;
&lt;img src="a-rectangle.png" srcset="a-square.png 600w"
alt="Barney Frank wears a suit and glasses."&gt;
&lt;figcaption&gt;Barney Frank, 2011&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

<p class=note>For details on what to put in the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute, see the earlier
sections.</p>

<p>The problem with this is that the user agent does not necessarily
know what dimensions to use for the image when the image is loading.
To avoid the layout having to be reflowed multiple times as the page
is loading, CSS and CSS media queries can be used to provide the
dimensions:</p>

<pre>&lt;figure&gt;
&lt;style scoped&gt;
#a { width: 300px; height: 150px; }
@media all and (max-width: 600px) { #a { width: 100px; height: 100px; } }
&lt;/style&gt;
&lt;img src="a-rectangle.png" srcset="a-square.png 600w" id="a"
alt="Barney Frank wears a suit and glasses."&gt;
&lt;figcaption&gt;Barney Frank, 2011&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

<p>Alternatively, the <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and
<code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes can be used
to provide the width for legacy user agents, using CSS just for the
user agents that support <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>:</p>

<pre>&lt;figure&gt;
&lt;style scoped media="all and (max-width: 600px)"&gt;
#a { width: 100px; height: 100px; }
&lt;/style&gt;
&lt;img src="a-rectangle.png" width="300" height="100"
srcset="a-square.png 600w" id=a
alt="Barney Frank wears a suit and glasses."&gt;
&lt;figcaption&gt;Barney Frank, 2011&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

<hr><p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute is used
with the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, which
gives the URL of the image to use for legacy user agents that do not
support the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute.
This leads to a question of which image to provide in the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>

<p>The answer that results in the least duplication is to provide
the image suitable for an infinite width and infinite height
viewport with a pixel density of 1 CSS pixel per device pixel:</p>

<pre>&lt;img src="pear-desktop.jpeg" srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w"
alt="The pear is juicy."&gt;</pre>

<p>However, if legacy mobile user agents are more important, one can
list all three images in the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, overriding the
<code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute entirely. To do
this, the widest image has to have the pixel density descriptor
instead of the width, since there is no way to specify an infinite
width explicitly:</p>

<pre>&lt;img src="pear-mobile.jpeg"
srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
alt="The pear is juicy."&gt;</pre>

<p>Since at this point the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
attribute is actually being ignored entirely by <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>-supporting user agents, the
<code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute can default to any
image, including one that is neither the smallest nor biggest:</p>

<pre>&lt;img src="pear-tablet.jpeg"
srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
alt="The pear is juicy."&gt;</pre>

<hr><p>The dimensions in the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>
attribute are the maximum (viewport) dimensions that an image is
intended for. It is possible to think of the numbers as minimums,
though... if the images are listed in order, then the minimum for an
image is the dimension given for the previous image. This example
attempts to demonstrate this by using the file names to show the
minimum values for each image:</p>

<pre>&lt;img src="pear-tablet.jpeg"
srcset="pear-min0.jpeg 720w, pear-min721.jpeg 1280w, pear-min1281.jpeg 1x"
alt="The pear is juicy."&gt;</pre>



<h4 id=the-iframe-element><span class=secno>4.8.2 </span>The <dfn><code>iframe</code></dfn> element</h4>

Expand Down Expand Up @@ -96552,7 +96656,7 @@ <h4 id=quotes><span class=secno>14.3.6 </span>Quotes</h4>
:root:lang(cgg), :not(:lang(cgg)) &gt; :lang(cgg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(chr), :not(:lang(chr)) &gt; :lang(chr) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(cs), :not(:lang(cs)) &gt; :lang(cs) { quotes: '\201e' '\201c' '\201a' '\2018' } /* &bdquo; &ldquo; &sbquo; &lsquo; */
:root:lang(da), :not(:lang(da)) &gt; :lang(da) { quotes: '\00bb' '\00ab' '\203a' '\2039' } /* &raquo; &laquo; &rsaquo; &lsaquo; */
:root:lang(da), :not(:lang(da)) &gt; :lang(da) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(dav), :not(:lang(dav)) &gt; :lang(dav) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(de), :not(:lang(de)) &gt; :lang(de) { quotes: '\201e' '\201c' '\201a' '\2018' } /* &bdquo; &ldquo; &sbquo; &lsquo; */
:root:lang(de-CH), :not(:lang(de-CH)) &gt; :lang(de-CH) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* &laquo; &raquo; &lsaquo; &rsaquo; */
Expand All @@ -96564,22 +96668,22 @@ <h4 id=quotes><span class=secno>14.3.6 </span>Quotes</h4>
:root:lang(ee), :not(:lang(ee)) &gt; :lang(ee) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(el), :not(:lang(el)) &gt; :lang(el) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* &laquo; &raquo; &ldquo; &rdquo; */
:root:lang(en), :not(:lang(en)) &gt; :lang(en) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(en-GB), :not(:lang(en-GB)) &gt; :lang(en-GB) { quotes: '\2018' '\2019' '\201c' '\201d' } /* &lsquo; &rsquo; &ldquo; &rdquo; */
:root:lang(en-GB), :not(:lang(en-GB)) &gt; :lang(en-GB) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(es), :not(:lang(es)) &gt; :lang(es) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* &ldquo; &rdquo; &laquo; &raquo; */
:root:lang(et), :not(:lang(et)) &gt; :lang(et) { quotes: '\201e' '\201c' '\201a' '\2018' } /* &bdquo; &ldquo; &sbquo; &lsquo; */
:root:lang(eu), :not(:lang(eu)) &gt; :lang(eu) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* &ldquo; &rdquo; &laquo; &raquo; */
:root:lang(ewo), :not(:lang(ewo)) &gt; :lang(ewo) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* &laquo; &raquo; &ldquo; &rdquo; */
:root:lang(fa), :not(:lang(fa)) &gt; :lang(fa) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* &laquo; &raquo; &lsaquo; &rsaquo; */
:root:lang(ff), :not(:lang(ff)) &gt; :lang(ff) { quotes: '\201e' '\201d' '\201a' '\2019' } /* &bdquo; &rdquo; &sbquo; &rsquo; */
:root:lang(fi), :not(:lang(fi)) &gt; :lang(fi) { quotes: '\201d' '\201d' '\2019' '\2019' } /* &rdquo; &rdquo; &rsquo; &rsquo; */
:root:lang(fr), :not(:lang(fr)) &gt; :lang(fr) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* &ldquo; &rdquo; &laquo; &raquo; */
:root:lang(fr), :not(:lang(fr)) &gt; :lang(fr) { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* &laquo; &raquo; &laquo; &raquo; */
:root:lang(fr-CA), :not(:lang(fr-CA)) &gt; :lang(fr-CA) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* &laquo; &raquo; &lsaquo; &rsaquo; */
:root:lang(fr-CH), :not(:lang(fr-CH)) &gt; :lang(fr-CH) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* &laquo; &raquo; &lsaquo; &rsaquo; */
:root:lang(gsw), :not(:lang(gsw)) &gt; :lang(gsw) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* &laquo; &raquo; &lsaquo; &rsaquo; */
:root:lang(gu), :not(:lang(gu)) &gt; :lang(gu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(guz), :not(:lang(guz)) &gt; :lang(guz) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(ha), :not(:lang(ha)) &gt; :lang(ha) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(he), :not(:lang(he)) &gt; :lang(he) { quotes: '\201c' '\201d' '\0027' '\0027' } /* &ldquo; &rdquo; ' ' */
:root:lang(he), :not(:lang(he)) &gt; :lang(he) { quotes: '\0022' '\0022' '\0027' '\0027' } /* " " ' ' */
:root:lang(hi), :not(:lang(hi)) &gt; :lang(hi) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(hr), :not(:lang(hr)) &gt; :lang(hr) { quotes: '\201e' '\201c' '\201a' '\2018' } /* &bdquo; &ldquo; &sbquo; &lsquo; */
:root:lang(hu), :not(:lang(hu)) &gt; :lang(hu) { quotes: '\201e' '\201d' '\00bb' '\00ab' } /* &bdquo; &rdquo; &raquo; &laquo; */
Expand All @@ -96604,11 +96708,11 @@ <h4 id=quotes><span class=secno>14.3.6 </span>Quotes</h4>
:root:lang(lg), :not(:lang(lg)) &gt; :lang(lg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(ln), :not(:lang(ln)) &gt; :lang(ln) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(lo), :not(:lang(lo)) &gt; :lang(lo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(lt), :not(:lang(lt)) &gt; :lang(lt) { quotes: '\201e' '\201c' '\201a' '\2018' } /* &bdquo; &ldquo; &sbquo; &lsquo; */
:root:lang(lt), :not(:lang(lt)) &gt; :lang(lt) { quotes: '\201e' '\201c' '\201e' '\201c' } /* &bdquo; &ldquo; &bdquo; &ldquo; */
:root:lang(lu), :not(:lang(lu)) &gt; :lang(lu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(luo), :not(:lang(luo)) &gt; :lang(luo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(luy), :not(:lang(luy)) &gt; :lang(luy) { quotes: '\201e' '\201c' '\201a' '\2018' } /* &bdquo; &ldquo; &sbquo; &lsquo; */
:root:lang(lv), :not(:lang(lv)) &gt; :lang(lv) { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* &laquo; &raquo; &bdquo; &ldquo; */
:root:lang(lv), :not(:lang(lv)) &gt; :lang(lv) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(mas), :not(:lang(mas)) &gt; :lang(mas) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(mer), :not(:lang(mer)) &gt; :lang(mer) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
:root:lang(mfe), :not(:lang(mfe)) &gt; :lang(mfe) { quotes: '\201c' '\201d' '\2018' '\2019' } /* &ldquo; &rdquo; &lsquo; &rsquo; */
Expand Down

0 comments on commit 6ac696d

Please sign in to comment.