- From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 04 Feb 2009 10:09:36 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/spec In directory hutz:/tmp/cvs-serv6866 Modified Files: Overview.html Log Message: Filling in the rendering section: more margin and alignment presentational hints; fixing the infrastructure around this stuff. (whatwg r2750) Index: Overview.html =================================================================== RCS file: /sources/public/html5/spec/Overview.html,v retrieving revision 1.1919 retrieving revision 1.1920 diff -u -d -r1.1919 -r1.1920 --- Overview.html 4 Feb 2009 02:56:20 -0000 1.1919 +++ Overview.html 4 Feb 2009 10:09:34 -0000 1.1920 @@ -164,7 +164,7 @@ <li><a href=#signed-integers><span class=secno>2.4.3.2 </span>Signed integers</a></li> <li><a href=#real-numbers><span class=secno>2.4.3.3 </span>Real numbers</a></li> <li><a href=#ratios><span class=secno>2.4.3.4 </span>Ratios</a></li> - <li><a href=#percentages-and-dimensions><span class=secno>2.4.3.5 </span>Percentages and dimensions</a></li> + <li><a href=#percentages-and-dimensions><span class=secno>2.4.3.5 </span>Percentages and lengths</a></li> <li><a href=#lists-of-integers><span class=secno>2.4.3.6 </span>Lists of integers</a></ol></li> <li><a href=#dates-and-times><span class=secno>2.4.4 </span>Dates and times</a> <ol> @@ -2124,9 +2124,87 @@ <li>Return <var title="">number</var>.</li> - </ol><h5 id=percentages-and-dimensions><span class=secno>2.4.3.5 </span>Percentages and dimensions</h5><p class=XXX><dfn id=rules-for-parsing-dimension-values>rules for parsing dimension values</dfn> (only - used by height/width on img, embed, object — lengths in css - pixels or percentages)<h5 id=lists-of-integers><span class=secno>2.4.3.6 </span>Lists of integers</h5><p>A <dfn id=valid-list-of-integers>valid list of integers</dfn> is a number of <a href=#valid-integer title="valid integer">valid integers</a> separated by U+002C + </ol><h5 id=percentages-and-dimensions><span class=secno>2.4.3.5 </span>Percentages and lengths</h5><p>A string is a <dfn id=valid-dimension-value>valid dimension value</dfn> if it consists of + a character in the range U+0031 DIGIT ONE (1) to U+0039 DIGIT NINE + (9), optionally followed by zero of more characters in the range + U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), optionally followed + by a U+002E FULL STOP character (.) and one of more characters in + the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and + optionally suffixed by a U+0025 PERCENT SIGN character (%).<p>A <a href=#valid-dimension-value>valid dimension value</a> represents the number that + is represented in base ten by that string of digits, optionally with + a fractional component. If the U+0025 PERCENT SIGN is present, then + the dimension is a percentage; otherwise, it is a length.<p class=note>For historical reasons, percentanges and lengths + less than 1.0 cannot be represented as <a href=#valid-dimension-value title="valid dimension + value">valid dimension values</a>.<p>The <dfn id=rules-for-parsing-dimension-values>rules for parsing dimension values</dfn> are as given in + the following algorithm. When invoked, the steps must be followed in + the order given, aborting at the first step that returns a + value. This algorithm will either return a number greater than or + equal to 1.0, or an error; if a number is returned, then it is + further categorised as either a percentage or a length.<ol><li><p>Let <var title="">input</var> be the string being + parsed.</li> + + <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the + string.</li> + + <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li> + + <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li> + + <li><p>If the next character is a U+002B PLUS SIGN character (+), + advance <var title="">position</var> to the next character.</li> + + <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are + U+0030 DIGIT ZERO (0) characters, and discard them.</li> + + <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li> + + <li><p>If the next character is not one of U+0031 DIGIT ONE (1) + .. U+0039 DIGIT NINE (9), then return an error.</li> + + <!-- Ok. At this point we know we have a number. It might have + trailing garbage which we'll ignore, but it's a number, and we + won't return an error. --> + + <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range + U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the + resulting sequence as a base-ten integer. Let <var title="">value</var> be that number.</li> + + <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return <var title="">value</var> as an + integer.</li> + + <li> + + <p>If the next character is a U+002E FULL STOP character (.):</p> + + <ol><li><p>Advance <var title="">position</var> to the next + character.</li> + + <li><p>If the next character is not one of U+0030 DIGIT ZERO (0) + .. U+0039 DIGIT NINE (9), then return <var title="">value</var> + as an integer.</li> + + <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range + U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). Let <var title="">length</var> be the number of characters collected. Let + <var title="">fraction</var> be the result of interpreting the + collected characters as a base-ten integer, and then dividing + that number by <span title="">10<sup title=""><var title="">length</var></sup></span>.</li> + + <li><p>Increment <var title="">value</var> by <var title="">fraction</var>.</li> + + </ol></li> + + <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are + U+0030 DIGIT ZERO (0) characters, and discard them.</li> + + <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return <var title="">value</var> as a + length.</li> + + <li><p>If the next character is a U+0025 PERCENT SIGN character + (%), return <var title="">value</var> as a percentage.</li> + + <li><p>Return <var title="">value</var> as a length.</li> + + </ol><h5 id=lists-of-integers><span class=secno>2.4.3.6 </span>Lists of integers</h5><p>A <dfn id=valid-list-of-integers>valid list of integers</dfn> is a number of <a href=#valid-integer title="valid integer">valid integers</a> separated by U+002C COMMA characters, with no other characters (e.g. no <a href=#space-character title="space character">space characters</a>). In addition, there might be restrictions on the number of integers that can be given, or on the range of values allowed.<p>The <dfn id=rules-for-parsing-a-list-of-integers>rules for parsing a list of integers</dfn> are as @@ -46012,13 +46090,29 @@ datalist, eventsource, head, input[type=hidden], link, menu[type=context], meta, noembed, noframes, param, script, source, style, title { display: none; }</pre><p>This hides all the elements that do not represent anything - visible.<h3 id=simple-defaults><span class=secno>10.3 </span>Simple defaults</h3><h4 id=introduction-9><span class=secno>10.3.1 </span>Introduction</h4><p>The CSS rules given in these subsections are expected to be used - as the defaults for all documents that contain <a href=#html-elements>HTML - elements</a> when presented in visual media.<p>Rules regarding left and right margins are given here as + visible.<h3 id=simple-defaults><span class=secno>10.3 </span>Simple defaults</h3><h4 id=introduction-9><span class=secno>10.3.1 </span>Introduction</h4><p>The CSS rules given in these subsections are, unless otherwise + specified, expected to be used as part of the user-agent level style + sheet defaults for all documents that contain <a href=#html-elements>HTML + elements</a>.<p>Some rules are intended for the author-level zero-specificity + presentational hints part of the CSS cascade; these are explicitly + called out as <dfn id=presentational-hints>presentational hints</dfn>.<p>Rules regarding left and right margins are given here as appropriate for elements whose 'direction' property is 'ltr', and are expected to be flipped around on elements whose 'direction' property is 'rtl'.<p class=XXX>Please send feedback if you can accurately describe - rules required by legacy content.<h4 id=display-types><span class=secno>10.3.2 </span>Display types</h4><pre class=css>@namespace url(http://www.w3.org/1999/xhtml); + rules required by legacy content.<p>When the text below says that an attribute <var title="">attribute</var> on an element <var title="">element</var> + <dfn id=maps-to-the-pixel-length-property>maps to the pixel length property</dfn> (or properties) <var title="">properties</var>, it means that if <var title="">element</var> has an attribute <var title="">attribute</var> set, and parsing that attribute's value + using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> + doesn't generate an error, then the user agent is expected to use + the parsed value as a pixel length for a <a href=#presentational-hints title="presentational + hints">presentational hint</a> for <var title="">property</var>.<p>When the text below says that an attribute <var title="">attribute</var> on an element <var title="">element</var> + <dfn id=maps-to-the-dimension-property>maps to the dimension property</dfn> (or properties) <var title="">properties</var>, it means that if <var title="">element</var> has an attribute <var title="">attribute</var> set, and parsing that attribute's value + using the <a href=#rules-for-parsing-dimension-values>rules for parsing dimension values</a> doesn't + generate an error, then the user agent is expected to use the parsed + dimension as the value for a <a href=#presentational-hints title="presentational + hints">presentational hint</a> for <var title="">property</var>, + with the value given as a pixel length if the dimension was an + integer, and with the value given as a percentage if the dimension + was a percentage.<h4 id=display-types><span class=secno>10.3.2 </span>Display types</h4><pre class=css>@namespace url(http://www.w3.org/1999/xhtml); address, article, aside, blockquote, body, center, dd, dialog, dir, div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, @@ -46069,24 +46163,13 @@ h6 { margin-left: 2.33em; margin-right; 2.33em; } table { border-spacing: 2px; border-collapse: separate; } -td, th { padding: 1px; }</pre><p>In <a href=#quirks-mode>quirks mode</a>, the following rules are also - expected to apply:<pre class=css>@namespace url(http://www.w3.org/1999/xhtml); -form { margin-bottom: 1em; } -img[align=left] { margin-right: 3px; } -img[align=right] { margin-left: 3px; }</pre><p>When a <code>Document</code> is in <a href=#quirks-mode>quirks mode</a>, - margins on <a href=#html-elements>HTML elements</a> that collapse with the top or - bottom of the initial containing block are expected to be collapsed - to zero.</p><hr><p>For a <code><a href=#the-body-element>body</a></code> element, the 'margin-top', - 'margin-right', 'margin-bottom', and 'margin-left' properties are - expected to be set by presentational hints from a variety of source, - given in the table below in precedence order. If one of the - attributes listed is present, then the first such attribute's value - is expected to be parsed using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing - non-negative integers</a>; if this does not result in an error, - then the parsed value is expected to be used as a pixel length for - the corresponding property. If no attribute is found, or if the - attribute's value cannot be parsed successfully, then a default - value of 8px is expected to be used.</p><!-- XXX so, uh, about the cross-site-styling hole below... --><table><thead><tr><th>Property +td, th { padding: 1px; }</pre><p>For each property in the table below, given a <code><a href=#the-body-element>body</a></code> + element, the first attribute that exists <a href=#maps-to-the-pixel-length-property>maps to the pixel + length property</a> on the <code><a href=#the-body-element>body</a></code> element. If none of + the attributes for a property are found, or if the value of the + attribute that was found cannot be parsed successfully, then a + default value of 8px is expected to be used for that property + instead.</p><!-- XXX so, uh, about the cross-site-styling hole below... --><table><thead><tr><th>Property <th>Source <tbody><tr><td rowspan=3>'margin-top' <td><code><a href=#the-body-element>body</a></code> element's <code title=attr-body-marginheight>marginheight</code> attribute @@ -46111,20 +46194,117 @@ <code><a href=#the-iframe-element>iframe</a></code> element, then the the <dfn id=container-frame-element>container frame element</dfn> of the <code><a href=#the-body-element>body</a></code> element is that <code>frame</code> or <code><a href=#the-iframe-element>iframe</a></code> element. Otherwise, there - is no <a href=#container-frame-element>container frame element</a>.</p><hr><p class=XXX>...tables...</p><!-- cellspacing, cellpadding, height, width* (int/%; *width=0 => width:auto); <table hspace/vspace> (int); <table cols>; <table border> (border => border=1); --><!-- td/th width height: 0=>auto; %=>%; n=>px --><!-- col width=int/% span=n --><!-- tbody/thead/tfoot height=int/% (ignore %?) --><!-- tr height=int/% --><h4 id=alignment><span class=secno>10.3.4 </span>Alignment</h4><pre class=css>@namespace url(http://www.w3.org/1999/xhtml); + is no <a href=#container-frame-element>container frame element</a>.</p><hr><p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-cellspacing>cellspacing</code> attribute + <a href=#maps-to-the-pixel-length-property>maps to the pixel length property</a> 'border-spacing' on the + element.<p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-cellpadding>cellpadding</code> attribute <a href=#maps-to-the-pixel-length-property title="maps to the pixel length property">maps to the pixel length + properties</a> 'padding-top', 'padding-right', 'padding-bottom', + and 'padding-left' of any <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> + elements that have corresponding <a href=#concept-cell title=concept-cell>cells</a> in the <a href=#concept-table title=concept-table>table</a> corresponding to the + <code><a href=#the-table-element>table</a></code> element.<p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-hspace>hspace</code> attribute <a href=#maps-to-the-pixel-length-property title="maps + to the pixel length property">maps to the pixel length properties</a> + 'margin-left' and 'margin-right' on the <code><a href=#the-table-element>table</a></code> + element.<p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-vspace>vspace</code> attribute <a href=#maps-to-the-pixel-length-property title="maps + to the pixel length property">maps to the pixel length properties</a> + 'margin-top' and 'margin-bottom' on the <code><a href=#the-table-element>table</a></code> + element.<p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-height>height</code> attribute <a href=#maps-to-the-dimension-property>maps to the + dimension property</a> 'height' on the <code><a href=#the-table-element>table</a></code> + element.<p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-width>width</code> attribute <a href=#maps-to-the-dimension-property>maps to the + dimension property</a> 'width' on the <code><a href=#the-table-element>table</a></code> + element.<p>The <code><a href=#the-col-element>col</a></code> element's <code title=attr-col-width>width</code> attribute <a href=#maps-to-the-dimension-property>maps to the + dimension property</a> 'width' on the <code><a href=#the-col-element>col</a></code> + element.<p>The <code><a href=#the-tr-element>tr</a></code> element's <code title=attr-tr-height>height</code> attribute <a href=#maps-to-the-dimension-property>maps to the + dimension property</a> 'height' on the <code><a href=#the-tr-element>tr</a></code> + element.<p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements' <code title=attr-tdth-height>height</code> attributes <a href=#maps-to-the-dimension-property title="maps + to the dimension property">map to the dimension property</a> 'height' + on the element.<p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements' <code title=attr-tdth-height>height</code> attributes <a href=#maps-to-the-dimension-property title="maps + to the dimension property">map to the dimension property</a> 'height' + on the element.<p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements' <code title=attr-tdth-width>width</code> attributes <a href=#maps-to-the-dimension-property title="maps + to the dimension property">map to the dimension property</a> 'width' + on the element.</p><hr><p>In <a href=#quirks-mode>quirks mode</a>, the following rules are also + expected to apply:<pre class=css>@namespace url(http://www.w3.org/1999/xhtml); +form { margin-bottom: 1em; } +img[align=left] { margin-right: 3px; } +img[align=right] { margin-left: 3px; }</pre><p>When a <code>Document</code> is in <a href=#quirks-mode>quirks mode</a>, + margins on <a href=#html-elements>HTML elements</a> that collapse with the top or + bottom of the initial containing block are expected to be collapsed + to zero.<h4 id=alignment><span class=secno>10.3.4 </span>Alignment</h4><pre class=css>@namespace url(http://www.w3.org/1999/xhtml); thead, tbody, tfoot, table > tr { vertical-align: middle; } tr, td, th { vertical-align: inherit; } sub { vertical-align: sub; } sup { vertical-align: super; } +th { text-align: center; }</pre><hr><p>The following rules are also expected to apply, as + <a href=#presentational-hints>presentational hints</a>:<pre class=css>@namespace url(http://www.w3.org/1999/xhtml); table[align=left], img[align=left] { float: left; } table[align=right], img[align=right] { float: right; } -th { text-align: center; }</pre><p>The <code><a href=#center>center</a></code> and <code><a href=#the-caption-element>caption</a></code> elements are - expected to center text within themselves, as if they had their - 'text-align' property set to 'center', and to center blocks and - tables within them, as their descendants had their horizontal - margins set to 'auto'.</p><!-- XXX <div/h1-h6/p align="left|right|center/middle|justify"> --><hr><p class=XXX>...tables...</p><!-- table align="left|right|center/abscenter/absmiddle/middle|char|justify" --><!-- caption align="left|right|top|bottom" caption-side --><!-- tr/td/th/col/tbody/thead/tfoot align="left|right|center/absmiddle|char|justify" --><!-- tr/td/th/col/tbody/thead/tfoot valign="top|middle|bottom|baseline" --><!-- tr/td/th/col/tbody/thead/tfoot ch=? charoff=n>0 --><h4 id=fonts-and-colors><span class=secno>10.3.5 </span>Fonts and colors</h4><pre class=css>@namespace url(http://www.w3.org/1999/xhtml); +table[align=center], table[align=abscenter], +table[align=abdmiddle], table[align=middle] { + margin-left: auto; margin-right: auto; +} + +caption[align=bottom] { caption-side: bottom; } +p[align=left], h1[align=left], h2[align=left], h3[align=left], +h4[align=left], h5[align=left], h6[align=left] { + text-align: left; +} +p[align=right], h1[align=right], h2[align=right], h3[align=right], +h4[align=right], h5[align=right], h6[align=right] { + text-align: right; +} +p[align=center], h1[align=center], h2[align=center], h3[align=center], +h4[align=center], h5[align=center], h6[align=center] { + text-align: center; +} +p[align=justify], h1[align=justify], h2[align=justify], h3[align=justify], +h4[align=justify], h5[align=justify], h6[align=justify] { + text-align: justify; +} +col[valign=top], thead[valign=top], tbody[valign=top], +tfoot[valign=top], tr[valign=top], td[valign=top], th[valign=top] { + vertial-align: top; +} +col[valign=middle], thead[valign=middle], tbody[valign=middle], +tfoot[valign=middle], tr[valign=middle], td[valign=middle], th[valign=middle] { + vertial-align: middle; +} +col[valign=bottom], thead[valign=bottom], tbody[valign=bottom], +tfoot[valign=bottom], tr[valign=bottom], td[valign=bottom], th[valign=bottom] { + vertial-align: bottom; +} +col[valign=baseline], thead[valign=baseline], tbody[valign=baseline], +tfoot[valign=baseline], tr[valign=baseline], td[valign=baseline], th[valign=baseline] { + vertial-align: baseline; +}</pre><p>The <code><a href=#center>center</a></code> element, the <code><a href=#the-caption-element>caption</a></code> element + unless specified otherwise below, and the <code><a href=#the-div-element>div</a></code> element + when its <code title=attr-div-align>align</code> attribute's value + is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string + "<code title="">center</code>", are expected to center text within + themselves, as if they had their 'text-align' property set to + 'center' in a <a href=#presentational-hints title="presentational hints">presentational + hint</a>, and to center blocks and tables within them, as if + their descendants had their 'margin-left' and 'margin-right' + properties set to 'auto' in <a href=#presentational-hints>presentational hints</a>.<p>The <code><a href=#the-div-element>div</a></code>, <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-thead-element>thead</a></code>, + <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>, + <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements, when they have an + <code title=attr-align>align</code> attribute whose value is an + <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">left</code>" or "<code title="">justify</code>", are + expected to left-align text within themselves, as if they had their + 'text-align' property set to 'left' in a <a href=#presentational-hints title="presentational + hints">presentational hint</a>, and to left-align blocks and + tables within them, as if their descendants had their 'margin-right' + property set to 'auto' in <a href=#presentational-hints>presentational hints</a>.<p>The <code><a href=#the-div-element>div</a></code>, <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-thead-element>thead</a></code>, + <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>, + <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements, when they have an + <code title=attr-align>align</code> attribute whose value is an + <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">right</code>", are expected to right-align text within + themselves, as if they had their 'text-align' property set to + 'right' in a <a href=#presentational-hints title="presentational hints">presentational + hint</a>, and to right-align blocks and tables within them, as if + their descendants had their 'margin-left' property set to 'auto' in + <a href=#presentational-hints>presentational hints</a>.<p>In all these cases, the effect on descendants is expected to only + extend to descendants that do not themselves have an applicable + <code title=attr-align>align</code> attribute.<h4 id=fonts-and-colors><span class=secno>10.3.5 </span>Fonts and colors</h4><pre class=css>@namespace url(http://www.w3.org/1999/xhtml); address, cite, dfn, em, i, var { font-style: italic; } b, strong, th { font-weight: bold; } @@ -46214,7 +46394,7 @@ [dir=ltr] { direction: lrt; unicode-bidi: embed; } bdo[dir] { unicode-bidi: bidi-override; }</pre><p>In addition, rules setting the 'quotes' property appropriately for the locales and languages understood by the user are expected to - be present.</p><!-- XXX <ol>/<ul> type (1|a|A|i|I|disc|circle/round|square), start (n); <li> type (A|a|I|i|1|disc|circle/round|square), value (n) --><hr><p class=XXX>...tables...</p><!-- table: rules/layout/frames --><h4 id=resetting-rules-for-inherited-properties><span class=secno>10.3.7 </span>Resetting rules for inherited properties</h4><p>The following rules are also expected to be in play, resetting + be present.</p><!-- XXX <ol>/<ul> type (1|a|A|i|I|disc|circle/round|square), start (n); <li> type (A|a|I|i|1|disc|circle/round|square), value (n) --><hr><p class=XXX>...tables...</p><!-- table: rules/layout/frames; <table border> (border => border=1); --><h4 id=resetting-rules-for-inherited-properties><span class=secno>10.3.7 </span>Resetting rules for inherited properties</h4><p>The following rules are also expected to be in play, resetting certain properties to block inheritance by default.<pre class=css>@namespace url(http://www.w3.org/1999/xhtml); table { text-indent: initial; }</pre><p>In <a href=#quirks-mode>quirks mode</a>, the following rules are also expected to apply:<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
Received on Wednesday, 4 February 2009 10:09:46 UTC