13 Rendering
User agents are not required to present HTML documents in any
particular way. However, this section provides a set of suggestions
for rendering HTML documents that, if followed, are likely to lead
to a user experience that closely resembles the experience intended
by the documents' authors. So as to avoid confusion regarding the
normativity of this section, RFC2119 terms have not been used.
Instead, the term "expected" is used to indicate behavior that will
lead to this experience. For the purposes of conformance for user
agents designated as supporting the suggested
default rendering, the term "expected" in this section has the
same conformance implications as the RFC2119-defined term
"must".
13.1 Introduction
In general, user agents are expected to support CSS, and many of
the suggestions in this section are expressed in CSS terms. User
agents that use other presentation mechanisms can derive their
expected behavior by translating from the CSS rules given in this
section.
In the absence of style-layer rules to the contrary (e.g. author
style sheets), user agents are expected to render an element so that
it conveys to the user the meaning that the element
represents, as described by this specification.
The suggestions in this section generally assume a visual output
medium with a resolution of 96dpi or greater, but HTML is intended
to apply to multiple media (it is a media-independent
language). User agent implementors are encouraged to adapt the
suggestions in this section to their target media.
An element is being rendered if it is in a
Document, either its parent node is itself
being rendered or it is the Document node,
and it is not explicitly excluded from the rendering using either:
- the CSS 'display' property's 'none' value, or
- the 'visibility' property's 'collapse' value unless it is being treated as equivalent to the 'hidden' value, or
- some equivalent in other styling languages.
Just being off-screen does not mean the element is
not being rendered. The presence of the hidden attribute normally means the
element is not being rendered, though this might be
overridden by the style sheets.
User agents that do not honor author-level CSS style sheets are
nonetheless expected to act as if they applied the CSS rules given
in these sections in a manner consistent with this specification and
the relevant CSS and Unicode specifications. [CSS] [UNICODE] [BIDI]
This is especially important for issues relating to
the 'display', 'unicode-bidi', and 'direction' properties.
13.2 The CSS user agent style sheet and presentational hints
The CSS rules given in these subsections are, except where
otherwise specified, expected to be used as part of the user-agent
level style sheet defaults for all documents that contain HTML
elements.
Some rules are intended for the author-level zero-specificity
presentational hints part of the CSS cascade; these are explicitly
called out as presentational hints.
Some of the 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'. These are marked "LTR-specific".
These markings only affect the handling of attribute
values, not attribute names or element names.
When the text below says that an attribute attribute on an element element
maps to the pixel length property (or properties) properties, it means that if element has an attribute attribute set, and parsing that attribute's value
using the rules for parsing non-negative integers
doesn't generate an error, then the user agent is expected to use
the parsed value as a pixel length for a presentational hint for properties.
When the text below says that an attribute attribute on an element element
maps to the dimension property (or properties) properties, it means that if element has an attribute attribute set, and parsing that attribute's value
using the rules for parsing dimension values doesn't
generate an error, then the user agent is expected to use the parsed
dimension as the value for a presentational hint for properties, 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.
When a user agent is to align descendants of a node,
the user agent is expected to align only those descendants that have
both their 'margin-left' and 'margin-right' properties computing to
a value other than 'auto', that are over-constrained and that have
one of those two margins with a used value forced to a greater
value, and that do not themselves have an applicable align attribute. When multiple elements
are to align a particular
descendant, the most deeply nested such element is expected to
override the others. Aligned elements are expected to be aligned by
having the used values of their left and right margins be set
accordingly.
13.3 Non-replaced elements
13.3.1 Hidden elements
@namespace url(http://www.w3.org/1999/xhtml);
[hidden], area, base, basefont, command, datalist, head,
input[type=hidden i], link, menu[type=context i], meta, noembed, noframes,
param, rp, script, source, style, track, title {
display: none;
}
The user agent is expected to force the 'display' property of
noscript elements for whom scripting is enabled to compute to
'none', irrespective of CSS rules.
13.3.2 The page
@namespace url(http://www.w3.org/1999/xhtml);
html, body { display: block; }
For each property in the table below, given a body
element, the first attribute that exists maps to the pixel
length property on the body 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, if the
body element's Document's browsing
context does not have its seamless browsing context
flag set, a default value of 8px is expected to be used for
that property instead.
If the body element's Document's
browsing context is a nested browsing
context, and the browsing context container of
that nested browsing context is a frame or
iframe element, then the container frame
element of the body element is that
frame or iframe element. Otherwise, there
is no container frame element.
The above requirements imply that a page can
change the margins of another page (including one from another
origin) using, for example, an
iframe. This is potentially a security risk, as it
might in some cases allow an attack to contrive a situation in which
a page is rendered not as the author intended, possibly for the
purposes of phishing or otherwise misleading the user.
If the Document has a root element, and
the Document's browsing context is a
nested browsing context, and the browsing context
container of that nested browsing context is a
frame or iframe element, and that element
has a scrolling
attribute, then the user agent is expected to compare the value of
the attribute in an ASCII case-insensitive manner to
the values in the first column of the following table, and if one of
them matches, then the user agent is expected to treat that
attribute as a presentational
hint for the aforementioned root element's 'overflow'
property, setting it to the value given in the corresponding cell on
the same row in the second column:
| Attribute value
| 'overflow' value
|
on
| 'scroll'
|
scroll
| 'scroll'
|
yes
| 'scroll'
|
off
| 'hidden'
|
noscroll
| 'hidden'
|
no
| 'hidden'
|
auto
| 'auto'
|
When a Document is in quirks mode,
vertical margins on HTML elements at the top or bottom
of body elements are expected to be collapsed to
zero.
When a body element has a background attribute set to a
non-empty value, the new value is expected to be resolved relative to the element, and
if this is successful, the user agent is expected to treat the
attribute as a presentational
hint setting the element's 'background-image' property to the
resulting absolute URL.
When a body element has a bgcolor attribute set, the new
value is expected to be parsed using the rules for parsing a
legacy color value, and if that does not return an error, the
user agent is expected to treat the attribute as a presentational hint setting the
element's 'background-color' property to the resulting color.
When a body element has a text attribute, its value is expected
to be parsed using the rules for parsing a legacy color
value, and if that does not return an error, the user
agent is expected to treat the attribute as a presentational hint setting the
element's 'color' property to the resulting color.
When a body element has a link attribute, its value is expected
to be parsed using the rules for parsing a legacy color
value, and if that does not return an error, the user agent
is expected to treat the attribute as a presentational hint setting the 'color' property of
any element in the Document matching the ':link'
pseudo-class to the resulting color.
When a body element has a vlink attribute, its value is
expected to be parsed using the rules for parsing a legacy
color value, and if that does not return an error, the user
agent is expected to treat the attribute as a presentational hint setting the
'color' property of any element in the Document
matching the ':visited' pseudo-class to the resulting color.
When a body element has a alink attribute, its value is
expected to be parsed using the rules for parsing a legacy
color value, and if that does not return an error, the user
agent is expected to treat the attribute as a presentational hint setting the
'color' property of any element in the Document
matching the ':active' pseudo-class and either the ':link'
pseudo-class or the ':visited' pseudo-class to the resulting
color.
13.3.3 Flow content
@namespace url(http://www.w3.org/1999/xhtml);
address, blockquote, center, div, figure, figcaption, footer, form,
header, hr, legend, listing, p, plaintext, pre, summary, xmp {
display: block;
}
blockquote, figure, listing, p, plaintext, pre, xmp {
margin-top: 1em; margin-bottom: 1em;
}
blockquote, figure { margin-left: 40px; margin-right: 40px; }
address { font-style: italic; }
listing, plaintext, pre, xmp {
font-family: monospace; white-space: pre;
}
dialog:not([open]) { display: none; }
dialog {
position: absolute;
left: 0; right: 0;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;
}
dialog::backdrop { background: rgba(0,0,0,0.1); }
The following rules are also expected to apply, as
presentational hints:
@namespace url(http://www.w3.org/1999/xhtml);
pre[wrap] { white-space: pre-wrap; }
In quirks mode, the following rules are also
expected to apply:
@namespace url(http://www.w3.org/1999/xhtml);
form { margin-bottom: 1em; }
The center element, and the div element
when it has an align attribute
whose value is an ASCII case-insensitive match for
either the string "center" or the string
"middle", are expected to center text within
themselves, as if they had their 'text-align' property set to
'center' in a presentational
hint, and to align descendants to the
center.
The div element, when it has an align attribute whose value is an
ASCII case-insensitive match for the string "left", is expected to left-align text within itself,
as if it had its 'text-align' property set to 'left' in a presentational hint, and to
align descendants to the left.
The div element, when it has an align attribute whose value is an
ASCII case-insensitive match for the string "right", is expected to right-align text within
itself, as if it had its 'text-align' property set to 'right' in a
presentational hint, and
to align descendants to the right.
The div element, when it has an align attribute whose value is an
ASCII case-insensitive match for the string "justify", is expected to full-justify text within
itself, as if it had its 'text-align' property set to 'justify' in a
presentational hint, and
to align descendants to the left.
13.3.4 Phrasing content
The rule for b and
strong elements below might change (to 'bolder' instead
of 'bold'). See W3C bug
12154. Implementation feedback is desired.
@namespace url(http://www.w3.org/1999/xhtml);
cite, dfn, em, i, var { font-style: italic; }
b, strong { font-weight: bold; }
code, kbd, samp, tt { font-family: monospace; }
big { font-size: larger; }
small { font-size: smaller; }
sub { vertical-align: sub; }
sup { vertical-align: super; }
sub, sup { line-height: normal; font-size: smaller; }
ruby { display: ruby; }
rt { display: ruby-text; }
:link { color: #0000EE; }
:visited { color: #551A8B; }
:link, :visited { text-decoration: underline; }
a:link[rel~=help], a:visited[rel~=help],
area:link[rel~=help], area:visited[rel~=help] { cursor: help; }
:focus { outline: auto; }
mark { background: yellow; color: black; } /* this color is just a suggestion and can be changed based on implementation feedback */
abbr[title], acronym[title] { text-decoration: dotted underline; }
ins, u { text-decoration: underline; }
del, s, strike { text-decoration: line-through; }
blink { text-decoration: blink; }
q::before { content: open-quote; }
q::after { content: close-quote; }
br { content: '\A'; white-space: pre; }
nobr { white-space: nowrap; }
wbr { content: '\200B'; }
nobr wbr { white-space: normal; }
The following rules are also expected to apply, as
presentational hints:
@namespace url(http://www.w3.org/1999/xhtml);
br[clear=left i] { clear: left; }
br[clear=right i] { clear: right; }
br[clear=all i], br[clear=both i] { clear: both; }
For the purposes of the CSS ruby model, runs of children of
ruby elements that are not rt or
rp elements are expected to be wrapped in anonymous
boxes whose 'display' property has the value 'ruby-base'. [CSSRUBY]
User agents that do not support correct ruby rendering are
expected to render parentheses around the text of rt
elements in the absence of rp elements.
User agents are expected to
support the 'clear' property on inline elements (in order to render
br elements with clear attributes) in the manner
described in the non-normative note to this effect in CSS2.1.
The initial value for the 'color' property is expected to be
black. The initial value for the 'background-color' property is
expected to be 'transparent'. The canvas' background is expected to
be white.
When a font element has a color attribute, its value is
expected to be parsed using the rules for parsing a legacy
color value, and if that does not return an error, the user
agent is expected to treat the attribute as a presentational hint setting the
element's 'color' property to the resulting color.
When a font element has a face attribute, the user agent is
expected to treat the attribute as a presentational hint setting the element's
'font-family' property to the attribute's value.
When a font element has a size attribute, the user agent is
expected to use the following steps to treat the attribute as a
presentational hint
setting the element's 'font-size' property:
Let input be the attribute's
value.
Let position be a pointer into input, initially pointing at the start of the
string.
Skip whitespace.
If position is past the end of input, there is no presentational hint. Abort these steps.
If the character at position is a U+002B
PLUS SIGN character (+), then let mode be
relative-plus, and advance position to
the next character. Otherwise, if the character at position is a U+002D HYPHEN-MINUS character (-),
then let mode be relative-minus, and
advance position to the next
character. Otherwise, let mode be
absolute.
Collect a sequence of characters in the range
U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and let the
resulting sequence be digits.
If digits is the empty string, there is
no presentational
hint. Abort these steps.
Interpret digits as a base-ten
integer. Let value be the resulting
number.
-
If mode is relative-plus, then
increment value by 3. If mode is relative-minus, then let value be the result of subtracting value from 3.
If value is greater than 7, let it be
7.
If value is less than 1, let it be
1.
-
Set 'font-size' to the keyword corresponding to the value of
value according to the following table:
| value
| 'font-size' keyword
| Notes
|
| 1
| x-small
|
|
| 2
| small
|
|
| 3
| medium
|
|
| 4
| large
|
|
| 5
| x-large
|
|
| 6
| xx-large
|
|
| 7
| xxx-large
| see below
|
The 'xxx-large' value is a non-CSS value used here to
indicate a font size 50% larger than 'xx-large'.
13.3.5 Bidirectional text
@namespace url(http://www.w3.org/1999/xhtml);
:dir(ltr) { direction: ltr; }
:dir(rtl) { direction: rtl; }
address, blockquote, center, div, figure, figcaption, footer, form,
header, hr, legend, listing, p, plaintext, pre, summary, xmp, article,
aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section, table, caption,
colgroup, col, thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu,
ol, ul, li {
unicode-bidi: isolate;
}
:matches([dir=ltr i], [dir=rtl i], [dir=auto i]):not(address):not(blockquote
):not(center):not(div):not(figure):not(figcaption):not(footer):not(form
):not(header):not(hr):not(legend):not(listing):not(p):not(plaintext):not(pre
):not(summary):not(xmp):not(article):not(aside):not(h1):not(h2):not(h3):not(h4
):not(h5):not(h6):not(hgroup):not(nav):not(section):not(table):not(caption
):not(colgroup):not(col):not(thead):not(tbody):not(tfoot):not(tr):not(td
):not(th):not(dir):not(dd):not(dl):not(dt):not(menu):not(ol):not(ul):not(li) {
unicode-bidi: embed;
}
bdi, bdi:matches([dir=ltr i], [dir=rtl i]),
output, output:matches([dir=ltr i], [dir=rtl i]),
[dir=auto i] {
unicode-bidi: isolate;
}
bdo, bdo:matches([dir=ltr i], [dir=rtl i]) { unicode-bidi: bidi-override; }
bdo[dir=auto i] { unicode-bidi: bidi-override isolate; }
textarea[dir=auto i], pre[dir=auto i] { unicode-bidi: plaintext; }
13.3.6 Quotes
This block is automatically generated from the Unicode Common
Locale Data Repository. [CLDR]
User agents are expected to use either the block below (which
will be regularly updated) or to automatically generate their own
copy directly from the source material. The language codes are
derived from the CLDR file names. The quotes are derived from the
delimiter blocks, with fallback handled as
specified in the CLDR documentation.
@namespace url(http://www.w3.org/1999/xhtml);
13.3.7 Sections and headings
@namespace url(http://www.w3.org/1999/xhtml);
article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
display: block;
}
h1 { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
h3 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
h4 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
h5 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
h6 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }
The article, aside, nav,
and section elements are expected to affect the margins
and font size of h1 elements, based on the nesting
depth. If x is a selector that matches elements
that are either article, aside,
nav, or section elements, then the
following rules capture what is expected:
@namespace url(http://www.w3.org/1999/xhtml);
x h1 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; }
x x h1 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
x x x h1 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
13.3.8 Lists
@namespace url(http://www.w3.org/1999/xhtml);
dir, dd, dl, dt, menu, ol, ul { display: block; }
li { display: list-item; }
dir, dl, menu, ol, ul { margin-top: 1em; margin-bottom: 1em; }
dir dir, dir dl, dir menu, dir ol, dir ul,
dl dir, dl dl, dl menu, dl ol, dl ul,
menu dir, menu dl, menu menu, menu ol, menu ul,
ol dir, ol dl, ol menu, ol ol, ol ul,
ul dir, ul dl, ul menu, ul ol, ul ul {
margin-top: 0; margin-bottom: 0;
}
dd { margin-left: 40px; } /* LTR-specific: use 'margin-right' for rtl elements */
dir, menu, ol, ul { padding-left: 40px; } /* LTR-specific: use 'padding-right' for rtl elements */
ol { list-style-type: decimal; }
dir, menu, ul { list-style-type: disc; }
dir dl, dir menu, dir ul,
menu dl, menu menu, menu ul,
ol dl, ol menu, ol ul,
ul dl, ul menu, ul ul {
list-style-type: circle;
}
dir dir dl, dir dir menu, dir dir ul,
dir menu dl, dir menu menu, dir menu ul,
dir ol dl, dir ol menu, dir ol ul,
dir ul dl, dir ul menu, dir ul ul,
menu dir dl, menu dir menu, menu dir ul,
menu menu dl, menu menu menu, menu menu ul,
menu ol dl, menu ol menu, menu ol ul,
menu ul dl, menu ul menu, menu ul ul,
ol dir dl, ol dir menu, ol dir ul,
ol menu dl, ol menu menu, ol menu ul,
ol ol dl, ol ol menu, ol ol ul,
ol ul dl, ol ul menu, ol ul ul,
ul dir dl, ul dir menu, ul dir ul,
ul menu dl, ul menu menu, ul menu ul,
ul ol dl, ul ol menu, ul ol ul,
ul ul dl, ul ul menu, ul ul ul {
list-style-type: square;
}
The following rules are also expected to apply, as
presentational hints:
@namespace url(http://www.w3.org/1999/xhtml);
ol[type=1], li[type=1] { list-style-type: decimal; }
ol[type=a], li[type=a] { list-style-type: lower-alpha; }
ol[type=A], li[type=A] { list-style-type: upper-alpha; }
ol[type=i], li[type=i] { list-style-type: lower-roman; }
ol[type=I], li[type=I] { list-style-type: upper-roman; }
ul[type=disc i], li[type=disc i] { list-style-type: disc; }
ul[type=circle i], li[type=circle i] { list-style-type: circle; }
ul[type=square i], li[type=square i] { list-style-type: square; }
When rendering li elements, user agents are expected
to use the ordinal value of the li element
to render the counter in the list item marker.
13.3.9 Tables
@namespace url(http://www.w3.org/1999/xhtml);
table { display: table; }
caption { display: table-caption; }
colgroup, colgroup[hidden] { display: table-column-group; }
col, col[hidden] { display: table-column; }
thead, thead[hidden] { display: table-header-group; }
tbody, tbody[hidden] { display: table-row-group; }
tfoot, tfoot[hidden] { display: table-footer-group; }
tr, tr[hidden] { display: table-row; }
td, th, td[hidden], th[hidden] { display: table-cell; }
colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
tfoot[hidden], tr[hidden], td[hidden], th[hidden] {
visibility: collapse;
}
table {
border-spacing: 2px;
border-collapse: separate;
text-indent: initial;
}
td, th { padding: 1px; }
th { font-weight: bold; }
thead, tbody, tfoot, table > tr { vertical-align: middle; }
tr, td, th { vertical-align: inherit; }
table, td, th { border-color: gray; }
thead, tbody, tfoot, tr { border-color: inherit; }
table[rules=none i], table[rules=groups i], table[rules=rows i],
table[rules=cols i], table[rules=all i], table[frame=void i],
table[frame=above i], table[frame=below i], table[frame=hsides i],
table[frame=lhs i], table[frame=rhs i], table[frame=vsides i],
table[frame=box i], table[frame=border i],
table[rules=none i] > tr > td, table[rules=none i] > tr > th,
table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
table[rules=all i] > tr > td, table[rules=all i] > tr > th,
table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th,
table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th,
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
border-color: black;
}
The following rules are also expected to apply, as
presentational hints:
@namespace url(http://www.w3.org/1999/xhtml);
table[align=left i] { float: left; }
table[align=right i] { float: right; }
table[align=center i] { margin-left: auto; margin-right: auto; }
thead[align=absmiddle i], tbody[align=absmiddle i], tfoot[align=absmiddle i],
tr[align=absmiddle i], td[align=absmiddle i], th[align=absmiddle i] {
text-align: center;
}
caption[align=bottom i] { caption-side: bottom; }
p[align=left i], h1[align=left i], h2[align=left i], h3[align=left i],
h4[align=left i], h5[align=left i], h6[align=left i] {
text-align: left;
}
p[align=right i], h1[align=right i], h2[align=right i], h3[align=right i],
h4[align=right i], h5[align=right i], h6[align=right i] {
text-align: right;
}
p[align=center i], h1[align=center i], h2[align=center i], h3[align=center i],
h4[align=center i], h5[align=center i], h6[align=center i] {
text-align: center;
}
p[align=justify i], h1[align=justify i], h2[align=justify i], h3[align=justify i],
h4[align=justify i], h5[align=justify i], h6[align=justify i] {
text-align: justify;
}
thead[valign=top i], tbody[valign=top i], tfoot[valign=top i],
tr[valign=top i], td[valign=top i], th[valign=top i] {
vertical-align: top;
}
thead[valign=middle i], tbody[valign=middle i], tfoot[valign=middle i],
tr[valign=middle i], td[valign=middle i], th[valign=middle i] {
vertical-align: middle;
}
thead[valign=bottom i], tbody[valign=bottom i], tfoot[valign=bottom i],
tr[valign=bottom i], td[valign=bottom i], th[valign=bottom i] {
vertical-align: bottom;
}
thead[valign=baseline i], tbody[valign=baseline i], tfoot[valign=baseline i],
tr[valign=baseline i], td[valign=baseline i], th[valign=baseline i] {
vertical-align: baseline;
}
td[nowrap], th[nowrap] { white-space: nowrap; }
table[rules=none i], table[rules=groups i], table[rules=rows i],
table[rules=cols i], table[rules=all i] {
border-style: hidden;
border-collapse: collapse;
}
table[border] { border-style: outset; } /* only if border is not equivalent to zero */
table[frame=void i] { border-style: hidden; }
table[frame=above i] { border-style: outset hidden hidden hidden; }
table[frame=below i] { border-style: hidden hidden outset hidden; }
table[frame=hsides i] { border-style: outset hidden outset hidden; }
table[frame=lhs i] { border-style: hidden hidden hidden outset; }
table[frame=rhs i] { border-style: hidden outset hidden hidden; }
table[frame=vsides i] { border-style: hidden outset; }
table[frame=box i], table[frame=border i] { border-style: outset; }
table[border] > tr > td, table[border] > tr > th,
table[border] > thead > tr > td, table[border] > thead > tr > th,
table[border] > tbody > tr > td, table[border] > tbody > tr > th,
table[border] > tfoot > tr > td, table[border] > tfoot > tr > th {
/* only if border is not equivalent to zero */
border-width: 1px;
border-style: inset;
}
table[rules=none i] > tr > td, table[rules=none i] > tr > th,
table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th {
border-width: 1px;
border-style: none;
}
table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th {
border-width: 1px;
border-style: none solid;
}
table[rules=all i] > tr > td, table[rules=all i] > tr > th,
table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
border-width: 1px;
border-style: solid;
}
table[rules=groups i] > colgroup {
border-left-width: 1px;
border-left-style: solid;
border-right-width: 1px;
border-right-style: solid;
}
table[rules=groups i] > thead,
table[rules=groups i] > tbody,
table[rules=groups i] > tfoot {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
}
table[rules=rows i] > tr, table[rules=rows i] > thead > tr,
table[rules=rows i] > tbody > tr, table[rules=rows i] > tfoot > tr {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
}
In quirks mode, the following rules are also
expected to apply:
@namespace url(http://www.w3.org/1999/xhtml);
table {
font-weight: initial;
font-style: initial;
font-variant: initial;
font-size: initial;
line-height: initial;
white-space: initial;
text-align: initial;
}
For the purposes of the CSS table model, the col
element is expected to be treated as if it was present as many times
as its span attribute specifies.
For the purposes of the CSS table model, the
colgroup element, if it contains no col
element, is expected to be treated as if it had as many such
children as its span
attribute specifies.
For the purposes of the CSS table model, the colspan and rowspan attributes on
td and th elements are expected to provide the
special knowledge regarding cells spanning rows and
columns.
In HTML documents, the user agent is expected to
force the 'display' property of form elements that are
children of table, thead,
tbody, tfoot, or tr elements
to compute to 'none', irrespective of CSS rules.
The table element's cellspacing attribute
maps to the pixel length property 'border-spacing' on the
element.
The table element's cellpadding attribute maps to the pixel length
properties 'padding-top', 'padding-right', 'padding-bottom',
and 'padding-left' of any td and th
elements that have corresponding cells in the table corresponding to the
table element.
The table element's hspace attribute maps to the dimension properties
'margin-left' and 'margin-right' on the table
element.
The table element's vspace attribute maps to the dimension properties
'margin-top' and 'margin-bottom' on the table
element.
The table element's height attribute maps to the
dimension property 'height' on the table
element.
The table element's width attribute maps to the
dimension property 'width' on the table
element.
The col element's width attribute maps to the
dimension property 'width' on the col
element.
The tr element's height attribute maps to the
dimension property 'height' on the tr
element.
The td and th elements' height attributes map to the dimension property 'height'
on the element.
The td and th elements' width attributes map to the dimension property 'width'
on the element.
When a Document is in quirks mode,
vertical margins on HTML elements at the top or bottom
of td or th elements are expected to be
collapsed to zero.
The caption element unless specified otherwise
below, and the thead, tbody,
tfoot, tr, td, and
th elements when they have an align attribute whose value is an
ASCII case-insensitive match for either the string
"center" or the string "middle", are expected to center text within
themselves, as if they had their 'text-align' property set to
'center' in a presentational
hint, and to align descendants to the
center.
The caption, thead, tbody,
tfoot, tr, td, and
th elements, when they have an align attribute whose value is an
ASCII case-insensitive match for the string "left", are expected to left-align text within
themselves, as if they had their 'text-align' property set to 'left'
in a presentational hint,
and to align descendants to the left.
The caption, thead, tbody,
tfoot, tr, td, and
th elements, when they have an align attribute whose value is an
ASCII case-insensitive match for the string "right", are expected to right-align text within
themselves, as if they had their 'text-align' property set to
'right' in a presentational
hint, and to align descendants to the right.
The caption, thead, tbody,
tfoot, tr, td, and
th elements, when they have an align attribute whose value is an
ASCII case-insensitive match for the string "justify", are expected to full-justify text within
themselves, as if they had their 'text-align' property set to
'justify' in a presentational
hint, and to align descendants to the left.
User agents are expected to have a rule in their user agent
stylesheet that matches th elements that have a parent
node whose computed value for the 'text-align' property is its
initial value, whose declaration block consists of just a single
declaration that sets the 'text-align' property to the value
'center'.
When a table, thead,
tbody, tfoot, tr,
td, or th element has a background attribute set to a
non-empty value, the new value is expected to be resolved relative to the element, and
if this is successful, the user agent is expected to treat the
attribute as a presentational
hint setting the element's 'background-image' property to the
resulting absolute URL.
When a table, thead,
tbody, tfoot, tr,
td, or th element has a bgcolor attribute set, the new value is expected to
be parsed using the rules for parsing a legacy color
value, and if that does not return an error, the user agent
is expected to treat the attribute as a presentational hint setting the element's
'background-color' property to the resulting color.
When a table element has a bordercolor attribute, its
value is expected to be parsed using the rules for parsing a
legacy color value, and if that does not return an error, the
user agent is expected to treat the attribute as a presentational hint setting the
element's 'border-top-color', 'border-right-color',
'border-bottom-color', and 'border-right-color' properties to the
resulting color.
The table element's border attribute maps to the pixel length
properties 'border-top-width', 'border-right-width',
'border-bottom-width', 'border-left-width' on the element. If the
attribute is present but parsing the attribute's value using the
rules for parsing non-negative integers generates an
error, a default value of 1px is expected to be used for that
property instead.
Rules marked "only if border is
not equivalent to zero" in the CSS block above is expected to
only be applied if the border
attribute mentioned in the selectors for the rule is not only
present but, when parsed using the rules for parsing
non-negative integers, is also found to have a value other
than zero or to generate an error.
In quirks mode, a td element or a
th element that has a nowrap attribute but also has a
width attribute whose value,
when parsed using the rules for parsing dimension
values, is found to be a length (not an error or a number
classified as a percentage), is expected to have a presentational hint setting the
element's 'white-space' property to 'normal', overriding the rule in
the CSS block above that sets it to 'nowrap'.
@namespace url(http://www.w3.org/1999/xhtml);
input, select, option, optgroup, button, textarea, keygen {
text-indent: initial;
}
textarea { white-space: pre-wrap; }
In quirks mode, the following rules are also
expected to apply:
@namespace url(http://www.w3.org/1999/xhtml);
input { box-sizing: border-box; }
Each kind of form control is also given a specific default
binding, as described in subsequent sections, which implements the
look and feel of the control.
13.3.11 The hr element
@namespace url(http://www.w3.org/1999/xhtml);
hr { color: gray; border-style: inset; border-width: 1px; margin: 0.5em auto; }
The following rules are also expected to apply, as
presentational hints:
@namespace url(http://www.w3.org/1999/xhtml);
hr[align=left] { margin-left: 0; margin-right: auto; }
hr[align=right] { margin-left: auto; margin-right: 0; }
hr[align=center] { margin-left: auto; margin-right: auto; }
hr[color], hr[noshade] { border-style: solid; }
If an hr element has either a color attribute or a noshade attribute, and furthermore
also has a size attribute, and
parsing that attribute's value using the rules for parsing
non-negative integers doesn't generate an error, then the
user agent is expected to use the parsed value divided by two as a
pixel length for presentational hints for the properties
'border-top-width', 'border-right-width', 'border-bottom-width', and
'border-left-width' on the element.
Otherwise, if an hr element has neither a color attribute nor a noshade attribute, but does have a
size attribute, and parsing that
attribute's value using the rules for parsing non-negative
integers doesn't generate an error, then: if the parsed value
is one, then the user agent is expected to use the attribute as a
presentational hint
setting the element's 'border-bottom-width' to 0; otherwise, if the
parsed value is greater than one, then the user agent is expected to
use the parsed value minus two as a pixel length for
presentational hints for the 'height' property on the
element.
The width attribute on an
hr element maps to the dimension property
'width' on the element.
When an hr element has a color attribute, its value is expected
to be parsed using the rules for parsing a legacy color
value, and if that does not return an error, the user agent
is expected to treat the attribute as a presentational hint setting the element's 'color'
property to the resulting color.
13.3.12 The fieldset element
@namespace url(http://www.w3.org/1999/xhtml);
fieldset {
margin-left: 2px; margin-right: 2px;
border: groove 2px ThreeDFace;
padding: 0.35em 0.625em 0.75em;
}
The fieldset element is expected to establish a new
block formatting context.
If the fieldset element has a child that matches the
conditions in the list below, then the first such child is the
fieldset element's rendered legend:
- The child is a
legend element.
- The child is not out-of-flow (e.g. not absolutely positioned or floated).
- The child is generating a box (e.g. it is not 'display:none').
A fieldset element's rendered legend,
if any, is expected to be rendered over the top border edge of the
fieldset element as a 'block' box (overriding any
explicit 'display' value). In the absence of an explicit width, the
box should shrink-wrap. If the legend element in
question has an align
attribute, and its value is an ASCII case-insensitive
match for one of the strings in the first column of the following
table, then the legend is expected to be rendered
horizontally aligned over the border edge in the position given in
the corresponding cell on the same row in the second column. If the
attribute is absent or has a value that doesn't match any of the
cases in the table, then the position is expected to be on the right
if the 'direction' property on this element has a computed value of
'rtl', and on the left otherwise.
| Attribute value
| Alignment position
|
left
| On the left
|
right
| On the right
|
center
| In the middle
|
13.4 Replaced elements
13.4.1 Embedded content
The embed, iframe, and
video elements are expected to be treated as replaced
elements.
A canvas element that represents
embedded content is expected to be treated as a
replaced element. Other canvas elements are expected to
be treated as ordinary elements in the rendering model.
An object element that represents an
image, plugin, or nested browsing context is expected
to be treated as a replaced element. Other object
elements are expected to be treated as ordinary elements in the
rendering model.
An applet element that represents a
plugin is expected to be treated as a replaced
element. Other applet elements are expected to be
treated as ordinary elements in the rendering model.
The audio element, when it is exposing a user interface, is
expected to be treated as a replaced element about one line high, as
wide as is necessary to expose the user agent's user interface
features. When an audio element is not exposing a user
interface, the user agent is expected to force its 'display'
property to compute to 'none', irrespective of CSS rules.
Whether a video element is exposing a user interface is not
expected to affect the size of the rendering; controls are expected
to be overlaid above the page content without causing any layout
changes, and are expected to disappear when the user does not need
them.
When a video element represents a poster frame or
frame of video, the poster frame or frame of video is expected to be
rendered at the largest size that maintains the aspect ratio of that
poster frame or frame of video without being taller or wider than
the video element itself, and is expected to be
centered in the video element.
Any subtitles or captions are expected to be overlayed directly
on top of their video element, as defined by the
relevant rendering rules; for WebVTT, those are the
WebVTT cue text rendering rules. [WEBVTT]
When the user agent starts exposing a user interface for a
video element, the user agent should run the rules
for updating the text track rendering of each of the text tracks in the video
element's list of text tracks that are showing or showing by default (e.g., for text tracks based on
WebVTT, the rules for updating the display of
WebVTT text tracks). [WEBVTT]
Resizing video and canvas
elements does not interrupt video playback or clear the canvas.
The following CSS rules are expected to apply:
@namespace url(http://www.w3.org/1999/xhtml);
iframe:not([seamless]) { border: 2px inset; }
iframe[seamless] { display: block; }
video { object-fit: contain; }
When the element is wider than it is tall, the element is
expected to be depicted as a horizontal progress bar, with the start
on the right and the end on the left if the 'direction' property on
this element has a computed value of 'rtl', and with the start on
the left and the end on the right otherwise. When the element is
taller than it is wide, it is expected to depicted as a vertical
progress bar, with the lowest value on the bottom. When the element
is square, it is expected to be depicted as a direction-independent
progress widget (e.g. a circular progress ring).