10. 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".

10.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.

10.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.

10.3 Non-replaced elements

10.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;}embed[hidden] { display: inline; height: 0; width: 0; }

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.

10.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:

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.

10.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.

10.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]

When a particular part of a ruby has more than one annotation, the annotations should be distributed on both sides of the base text so as to minimize the stacking of ruby annotations on one side.

When it becomes possible to do so, the preceding requirement will be updated to be expressed in terms of CSS ruby. (Currently, CSS ruby does not handle nested ruby elements or multiple sequential rt elements, which is how this semantic is expressed.)

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, known as the rules for parsing a legacy font size, to treat the attribute as a presentational hint setting the element's 'font-size' property:

1. Let input be the attribute's value.

2. Let position be a pointer into input, initially pointing at the start of the string.

3. Skip whitespace.

4. If position is past the end of input, there is no presentational hint. Abort these steps.

5. If the character at position is a "+" (U+002B) character, then let mode be relative-plus, and advance position to the next character. Otherwise, if the character at position is a "-" (U+002D) character, then let mode be relative-minus, and advance position to the next character. Otherwise, let mode be absolute.

6. Collect a sequence of characters that are ASCII digits, and let the resulting sequence be digits.

7. If digits is the empty string, there is no presentational hint. Abort these steps.

8. Interpret digits as a base-ten integer. Let value be the resulting number.

9. 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.

10. If value is greater than 7, let it be 7.

11. If value is less than 1, let it be 1.

12. 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'.

10.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: isolate-override; }textarea[dir=auto i], pre[dir=auto i] { unicode-bidi: plaintext; }

10.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);:root { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(af),   :not(:lang(af)) > :lang(af) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(agq),  :not(:lang(agq)) > :lang(agq)   { quotes: '\201e' '\201d' '\201a' '\2019' } /* „ ” ‚ ’ */:root:lang(ak),   :not(:lang(ak)) > :lang(ak) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(am),   :not(:lang(am)) > :lang(am) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */:root:lang(ar),   :not(:lang(ar)) > :lang(ar) { quotes: '\201d' '\201c' '\2019' '\2018' } /* ” “ ’ ‘ */:root:lang(asa),  :not(:lang(asa)) > :lang(asa)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(az-Cyrl),  :not(:lang(az-Cyrl)) > :lang(az-Cyrl)   { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */:root:lang(bas),  :not(:lang(bas)) > :lang(bas)   { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */:root:lang(bem),  :not(:lang(bem)) > :lang(bem)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(bez),  :not(:lang(bez)) > :lang(bez)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(bg),   :not(:lang(bg)) > :lang(bg) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(bm),   :not(:lang(bm)) > :lang(bm) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */:root:lang(bn),   :not(:lang(bn)) > :lang(bn) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(br),   :not(:lang(br)) > :lang(br) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */:root:lang(brx),  :not(:lang(brx)) > :lang(brx)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(bs-Cyrl),  :not(:lang(bs-Cyrl)) > :lang(bs-Cyrl)   { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(ca),   :not(:lang(ca)) > :lang(ca) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* “ ” « » */:root:lang(cgg),  :not(:lang(cgg)) > :lang(cgg)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(chr),  :not(:lang(chr)) > :lang(chr)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(cs),   :not(:lang(cs)) > :lang(cs) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(da),   :not(:lang(da)) > :lang(da) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(dav),  :not(:lang(dav)) > :lang(dav)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(de),   :not(:lang(de)) > :lang(de) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(de-CH), :not(:lang(de-CH)) > :lang(de-CH)   { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */:root:lang(dje),  :not(:lang(dje)) > :lang(dje)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(dua),  :not(:lang(dua)) > :lang(dua)   { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */:root:lang(dyo),  :not(:lang(dyo)) > :lang(dyo)   { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */:root:lang(dz),   :not(:lang(dz)) > :lang(dz) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ebu),  :not(:lang(ebu)) > :lang(ebu)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ee),   :not(:lang(ee)) > :lang(ee) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(el),   :not(:lang(el)) > :lang(el) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */:root:lang(en),   :not(:lang(en)) > :lang(en) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(es),   :not(:lang(es)) > :lang(es) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* “ ” « » */:root:lang(et),   :not(:lang(et)) > :lang(et) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(eu),   :not(:lang(eu)) > :lang(eu) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* “ ” « » */:root:lang(ewo),  :not(:lang(ewo)) > :lang(ewo)   { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */:root:lang(fa),   :not(:lang(fa)) > :lang(fa) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */:root:lang(ff),   :not(:lang(ff)) > :lang(ff) { quotes: '\201e' '\201d' '\201a' '\2019' } /* „ ” ‚ ’ */:root:lang(fi),   :not(:lang(fi)) > :lang(fi) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */:root:lang(fr),   :not(:lang(fr)) > :lang(fr) { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */:root:lang(fr-CA), :not(:lang(fr-CA)) > :lang(fr-CA)   { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */:root:lang(fr-CH), :not(:lang(fr-CH)) > :lang(fr-CH)   { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */:root:lang(gsw),  :not(:lang(gsw)) > :lang(gsw)   { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */:root:lang(gu),   :not(:lang(gu)) > :lang(gu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(guz),  :not(:lang(guz)) > :lang(guz)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ha),   :not(:lang(ha)) > :lang(ha) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(he),   :not(:lang(he)) > :lang(he) { quotes: '\0022' '\0022' '\0027' '\0027' } /* " " ' ' */:root:lang(hi),   :not(:lang(hi)) > :lang(hi) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(hr),   :not(:lang(hr)) > :lang(hr) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(hu),   :not(:lang(hu)) > :lang(hu) { quotes: '\201e' '\201d' '\00bb' '\00ab' } /* „ ” » « */:root:lang(id),   :not(:lang(id)) > :lang(id) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ig),   :not(:lang(ig)) > :lang(ig) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(it),   :not(:lang(it)) > :lang(it) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */:root:lang(ja),   :not(:lang(ja)) > :lang(ja) { quotes: '\300c' '\300d' '\300e' '\300f' } /* 「 」 『 』 */:root:lang(jgo),  :not(:lang(jgo)) > :lang(jgo)   { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */:root:lang(jmc),  :not(:lang(jmc)) > :lang(jmc)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(kab),  :not(:lang(kab)) > :lang(kab)   { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */:root:lang(kam),  :not(:lang(kam)) > :lang(kam)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(kde),  :not(:lang(kde)) > :lang(kde)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(kea),  :not(:lang(kea)) > :lang(kea)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(khq),  :not(:lang(khq)) > :lang(khq)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ki),   :not(:lang(ki)) > :lang(ki) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(kkj),  :not(:lang(kkj)) > :lang(kkj)   { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */:root:lang(kln),  :not(:lang(kln)) > :lang(kln)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(km),   :not(:lang(km)) > :lang(km) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(kn),   :not(:lang(kn)) > :lang(kn) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ko),   :not(:lang(ko)) > :lang(ko) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ksb),  :not(:lang(ksb)) > :lang(ksb)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ksf),  :not(:lang(ksf)) > :lang(ksf)   { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */:root:lang(lag),  :not(:lang(lag)) > :lang(lag)   { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */:root:lang(lg),   :not(:lang(lg)) > :lang(lg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ln),   :not(:lang(ln)) > :lang(ln) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(lo),   :not(:lang(lo)) > :lang(lo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(lt),   :not(:lang(lt)) > :lang(lt) { quotes: '\201e' '\201c' '\201e' '\201c' } /* „ “ „ “ */:root:lang(lu),   :not(:lang(lu)) > :lang(lu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(luo),  :not(:lang(luo)) > :lang(luo)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(luy),  :not(:lang(luy)) > :lang(luy)   { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(lv),   :not(:lang(lv)) > :lang(lv) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(mas),  :not(:lang(mas)) > :lang(mas)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(mer),  :not(:lang(mer)) > :lang(mer)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(mfe),  :not(:lang(mfe)) > :lang(mfe)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(mg),   :not(:lang(mg)) > :lang(mg) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */:root:lang(mgo),  :not(:lang(mgo)) > :lang(mgo)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(mk),   :not(:lang(mk)) > :lang(mk) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(ml),   :not(:lang(ml)) > :lang(ml) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(mr),   :not(:lang(mr)) > :lang(mr) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ms),   :not(:lang(ms)) > :lang(ms) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(mua),  :not(:lang(mua)) > :lang(mua)   { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */:root:lang(my),   :not(:lang(my)) > :lang(my) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(naq),  :not(:lang(naq)) > :lang(naq)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(nb),   :not(:lang(nb)) > :lang(nb) { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */:root:lang(nd),   :not(:lang(nd)) > :lang(nd) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(nl),   :not(:lang(nl)) > :lang(nl) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(nmg),  :not(:lang(nmg)) > :lang(nmg)   { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */:root:lang(nn),   :not(:lang(nn)) > :lang(nn) { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */:root:lang(nnh),  :not(:lang(nnh)) > :lang(nnh)   { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */:root:lang(nus),  :not(:lang(nus)) > :lang(nus)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(nyn),  :not(:lang(nyn)) > :lang(nyn)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(pl),   :not(:lang(pl)) > :lang(pl) { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */:root:lang(pt),   :not(:lang(pt)) > :lang(pt) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(pt-PT), :not(:lang(pt-PT)) > :lang(pt-PT)   { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */:root:lang(rn),   :not(:lang(rn)) > :lang(rn) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */:root:lang(ro),   :not(:lang(ro)) > :lang(ro) { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */:root:lang(rof),  :not(:lang(rof)) > :lang(rof)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ru),   :not(:lang(ru)) > :lang(ru) { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */:root:lang(rw),   :not(:lang(rw)) > :lang(rw) { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */:root:lang(rwk),  :not(:lang(rwk)) > :lang(rwk)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(saq),  :not(:lang(saq)) > :lang(saq)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(sbp),  :not(:lang(sbp)) > :lang(sbp)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(seh),  :not(:lang(seh)) > :lang(seh)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ses),  :not(:lang(ses)) > :lang(ses)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(sg),   :not(:lang(sg)) > :lang(sg) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */:root:lang(shi),  :not(:lang(shi)) > :lang(shi)   { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */:root:lang(shi-Latn), :not(:lang(shi-Latn)) > :lang(shi-Latn) { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */:root:lang(si),   :not(:lang(si)) > :lang(si) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(sk),   :not(:lang(sk)) > :lang(sk) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(sl),   :not(:lang(sl)) > :lang(sl) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(sn),   :not(:lang(sn)) > :lang(sn) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */:root:lang(so),   :not(:lang(so)) > :lang(so) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(sq),   :not(:lang(sq)) > :lang(sq) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(sr),   :not(:lang(sr)) > :lang(sr) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(sr-Latn),  :not(:lang(sr-Latn)) > :lang(sr-Latn)   { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */:root:lang(sv),   :not(:lang(sv)) > :lang(sv) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */:root:lang(sw),   :not(:lang(sw)) > :lang(sw) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(swc),  :not(:lang(swc)) > :lang(swc)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ta),   :not(:lang(ta)) > :lang(ta) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(te),   :not(:lang(te)) > :lang(te) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(teo),  :not(:lang(teo)) > :lang(teo)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(th),   :not(:lang(th)) > :lang(th) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(ti-ER), :not(:lang(ti-ER)) > :lang(ti-ER)   { quotes: '\2018' '\2019' '\201c' '\201d' } /* ‘ ’ “ ” */:root:lang(to),   :not(:lang(to)) > :lang(to) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(tr),   :not(:lang(tr)) > :lang(tr) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(twq),  :not(:lang(twq)) > :lang(twq)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(tzm),  :not(:lang(tzm)) > :lang(tzm)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(uk),   :not(:lang(uk)) > :lang(uk) { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */:root:lang(ur),   :not(:lang(ur)) > :lang(ur) { quotes: '\201d' '\201c' '\2019' '\2018' } /* ” “ ’ ‘ */:root:lang(vai),  :not(:lang(vai)) > :lang(vai)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(vai-Latn), :not(:lang(vai-Latn)) > :lang(vai-Latn) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(vi),   :not(:lang(vi)) > :lang(vi) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(vun),  :not(:lang(vun)) > :lang(vun)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(xh),   :not(:lang(xh)) > :lang(xh) { quotes: '\2018' '\2019' '\201c' '\201d' } /* ‘ ’ “ ” */:root:lang(xog),  :not(:lang(xog)) > :lang(xog)   { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(yav),  :not(:lang(yav)) > :lang(yav)   { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */:root:lang(yo),   :not(:lang(yo)) > :lang(yo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(zh),   :not(:lang(zh)) > :lang(zh) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */:root:lang(zh-Hant),  :not(:lang(zh-Hant)) > :lang(zh-Hant)   { quotes: '\300c' '\300d' '\300e' '\300f' } /* 「 」 『 』 */:root:lang(zu),   :not(:lang(zu)) > :lang(zu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */

10.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; }

10.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, non-CSS user agents are expected to use the ordinal value of the li element to render the counter in the list item marker.

This specification does not yet define the CSS-specific rules for rendering li elements, because CSS doesn't yet provide sufficient hooks for this purpose.

10.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 {  box-sizing: border-box;  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'.

10.3.10 Form controls

@namespace url(http://www.w3.org/1999/xhtml);input, select, option, optgroup, button, textarea, keygen {  text-indent: initial;}textarea { white-space: pre-wrap; }input[type="radio"], input[type="checkbox"], input[type="reset"], input[type="button"],input[type="submit"], select, button {  box-sizing: border-box;}

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.

10.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.

10.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.

10.4 Replaced elements

10.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 (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; }

@namespace url(http://www.w3.org/1999/xhtml);img[align=left i] { margin-right: 3px; }img[align=right i] { margin-left: 3px; }

@namespace url(http://www.w3.org/1999/xhtml);iframe[frameborder=0], iframe[frameborder=no i] { border: none; }applet[align=left i], embed[align=left i], iframe[align=left i],img[align=left i], input[type=image i][align=left i], object[align=left i] {  float: left;}applet[align=right i], embed[align=right i], iframe[align=right i],img[align=right i], input[type=image i][align=right i], object[align=right i] {  float: right;}applet[align=top i], embed[align=top i], iframe[align=top i],img[align=top i], input[type=image i][align=top i], object[align=top i] {  vertical-align: top;}applet[align=baseline i], embed[align=baseline i], iframe[align=baseline i],img[align=baseline i], input[type=image i][align=baseline i], object[align=baseline i] {  vertical-align: baseline;}applet[align=texttop i], embed[align=texttop i], iframe[align=texttop i],img[align=texttop i], input[type=image i][align=texttop i], object[align=texttop i] {  vertical-align: text-top;}applet[align=absmiddle i], embed[align=absmiddle i], iframe[align=absmiddle i],img[align=absmiddle i], input[type=image i][align=absmiddle i], object[align=absmiddle i],applet[align=abscenter i], embed[align=abscenter i], iframe[align=abscenter i],img[align=abscenter i], input[type=image i][align=abscenter i], object[align=abscenter i] {  vertical-align: middle;}applet[align=bottom i], embed[align=bottom i], iframe[align=bottom i],img[align=bottom i], input[type=image i][align=bottom i],object[align=bottom i] {  vertical-align: bottom;}