You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3572 lines
226 KiB
3572 lines
226 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html lang="en-US-x-Hixie" ><head><title>10 Rendering — HTML5 </title><style type="text/css">
|
|
pre { margin-left: 2em; white-space: pre-wrap; }
|
|
h2 { margin: 3em 0 1em 0; }
|
|
h3 { margin: 2.5em 0 1em 0; }
|
|
h4 { margin: 2.5em 0 0.75em 0; }
|
|
h5, h6 { margin: 2.5em 0 1em; }
|
|
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
|
|
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
|
|
p { margin: 1em 0; }
|
|
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
|
|
dl, dd { margin-top: 0; margin-bottom: 0; }
|
|
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
|
|
dt + dt { margin-top: 0; }
|
|
dd dt { margin-top: 0.25em; margin-bottom: 0; }
|
|
dd p { margin-top: 0; }
|
|
dd dl + p { margin-top: 1em; }
|
|
dd table + p { margin-top: 1em; }
|
|
p + * > li, dd li { margin: 1em 0; }
|
|
dt, dfn { font-weight: bold; font-style: normal; }
|
|
dt dfn { font-style: italic; }
|
|
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
|
|
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
|
|
pre em { font-weight: bolder; font-style: normal; }
|
|
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
|
|
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
|
|
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
|
|
table thead, table tbody { border-bottom: solid; }
|
|
table tbody th:first-child { border-left: solid; }
|
|
table tbody th { text-align: left; }
|
|
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
|
|
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
|
|
|
|
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
|
|
.matrix, .matrix td { border: none; text-align: right; }
|
|
.matrix { margin-left: 2em; }
|
|
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
|
|
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
|
|
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
|
|
|
|
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
|
|
img.extra { float: right; }
|
|
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
|
|
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
|
|
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
|
|
pre.css:first-line { color: #AAAA50; }
|
|
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
|
|
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
|
|
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
|
|
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
|
|
dl.domintro dd p { margin: 0.5em 0; }
|
|
dl.switch { padding-left: 2em; }
|
|
dl.switch > dt { text-indent: -1.5em; }
|
|
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
|
|
dl.triple { padding: 0 0 0 1em; }
|
|
dl.triple dt, dl.triple dd { margin: 0; display: inline }
|
|
dl.triple dt:after { content: ':'; }
|
|
dl.triple dd:after { content: '\A'; white-space: pre; }
|
|
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
|
|
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
|
|
a .diff-new { border-bottom: 1px blue solid; }
|
|
|
|
h2 { page-break-before: always; }
|
|
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
|
|
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
|
|
|
|
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
|
|
li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }
|
|
|
|
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
|
|
div.head p { margin: 0; }
|
|
div.head h1 { margin: 0; }
|
|
div.head .logo { float: right; margin: 0 1em; }
|
|
div.head .logo img { border: none } /* remove border from top image */
|
|
div.head dl { margin: 1em 0; }
|
|
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
|
|
|
|
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
|
|
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
|
|
body > .toc > li > * { margin-bottom: 0.5em; }
|
|
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
|
|
.toc, .toc li { list-style: none; }
|
|
|
|
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
|
|
.brief li { margin: 0; padding: 0; }
|
|
.brief li p { margin: 0; padding: 0; }
|
|
|
|
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
|
|
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
|
|
.category-list li { display: inline; }
|
|
.category-list li:not(:last-child)::after { content: ', '; }
|
|
.category-list li > span, .category-list li > a { text-transform: lowercase; }
|
|
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
|
|
|
|
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
|
|
.XXX > :first-child { margin-top: 0; }
|
|
p .XXX { line-height: 3em; }
|
|
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
|
|
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
|
|
.annotation :link, .annotation :visited { color: inherit; }
|
|
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
|
|
.annotation span { border: none ! important; }
|
|
.note { color: green; background: transparent; font-family: sans-serif; }
|
|
.warning { color: red; background: transparent; }
|
|
.note, .warning { font-weight: bolder; font-style: italic; }
|
|
p.note, div.note { padding: 0.5em 2em; }
|
|
span.note { padding: 0 2em; }
|
|
.note p:first-child, .warning p:first-child { margin-top: 0; }
|
|
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
|
|
.warning:before { font-style: normal; }
|
|
p.note:before { content: 'Note: '; }
|
|
p.warning:before { content: '\26A0 Warning! '; }
|
|
|
|
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
|
|
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
|
|
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
|
|
.bookkeeping dt { margin: 0.5em 2em 0; }
|
|
.bookkeeping dd { margin: 0 3em 0.5em; }
|
|
|
|
h4 { position: relative; z-index: 3; }
|
|
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
|
|
.element {
|
|
background: #EEEEFF;
|
|
color: black;
|
|
margin: 0 0 1em 0.15em;
|
|
padding: 0 1em 0.25em 0.75em;
|
|
border-left: solid #9999FF 0.25em;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.element:before {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: -1.15em;
|
|
height: 2em;
|
|
width: 0.9em;
|
|
background: #EEEEFF;
|
|
content: ' ';
|
|
border-style: none none solid solid;
|
|
border-color: #9999FF;
|
|
border-width: 0.25em;
|
|
}
|
|
|
|
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
|
|
td > .example:only-child { margin: 0 0 0 0.1em; }
|
|
|
|
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
|
|
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
|
|
ul.domTree li li { list-style: none; }
|
|
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
|
|
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
|
|
ul.domTree span { font-style: italic; font-family: serif; }
|
|
ul.domTree .t1 code { color: purple; font-weight: bold; }
|
|
ul.domTree .t2 { font-style: normal; font-family: monospace; }
|
|
ul.domTree .t2 .name { color: black; font-weight: bold; }
|
|
ul.domTree .t2 .value { color: blue; font-weight: normal; }
|
|
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
|
|
ul.domTree .t7 code, .domTree .t8 code { color: green; }
|
|
ul.domTree .t10 code { color: teal; }
|
|
|
|
body.dfnEnabled dfn { cursor: pointer; }
|
|
.dfnPanel {
|
|
display: inline;
|
|
position: absolute;
|
|
z-index: 10;
|
|
height: auto;
|
|
width: auto;
|
|
padding: 0.5em 0.75em;
|
|
font: small sans-serif, Droid Sans Fallback;
|
|
background: #DDDDDD;
|
|
color: black;
|
|
border: outset 0.2em;
|
|
}
|
|
.dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
|
|
.dfnPanel :link, .dfnPanel :visited { color: black; }
|
|
.dfnPanel p { font-weight: bolder; }
|
|
.dfnPanel * + p { margin-top: 0.25em; }
|
|
.dfnPanel li { list-style-position: inside; }
|
|
|
|
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
|
|
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
|
|
#configUI p label { display: block; }
|
|
#configUI #updateUI, #configUI .loginUI { text-align: center; }
|
|
#configUI input[type=button] { display: block; margin: auto; }
|
|
|
|
fieldset { margin: 1em; padding: 0.5em 1em; }
|
|
fieldset > legend + * { margin-top: 0; }
|
|
fieldset > :last-child { margin-bottom: 0; }
|
|
fieldset p { margin: 0.5em 0; }
|
|
|
|
.stability {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0; right: 0;
|
|
margin: 0 auto 0 auto !important;
|
|
z-index: 1000;
|
|
width: 50%;
|
|
background: maroon; color: yellow;
|
|
-webkit-border-radius: 1em 1em 0 0;
|
|
-moz-border-radius: 1em 1em 0 0;
|
|
border-radius: 1em 1em 0 0;
|
|
-moz-box-shadow: 0 0 1em #500;
|
|
-webkit-box-shadow: 0 0 1em #500;
|
|
box-shadow: 0 0 1em red;
|
|
padding: 0.5em 1em;
|
|
text-align: center;
|
|
}
|
|
.stability strong {
|
|
display: block;
|
|
}
|
|
.stability input {
|
|
appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black;
|
|
position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center;
|
|
}
|
|
.stability input:hover {
|
|
color: white;
|
|
text-shadow: 0 0 2px black;
|
|
}
|
|
.stability input:active {
|
|
padding: 0.3em 0.45em 0.2em 0.55em;
|
|
}
|
|
.stability :link, .stability :visited,
|
|
.stability :link:hover, .stability :visited:hover {
|
|
background: transparent;
|
|
color: white;
|
|
}
|
|
|
|
</style><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation
|
|
requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><style type="text/css">
|
|
|
|
.applies thead th > * { display: block; }
|
|
.applies thead code { display: block; }
|
|
.applies tbody th { whitespace: nowrap; }
|
|
.applies td { text-align: center; }
|
|
.applies .yes { background: yellow; }
|
|
|
|
.matrix, .matrix td { border: hidden; text-align: right; }
|
|
.matrix { margin-left: 2em; }
|
|
|
|
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
|
|
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
|
|
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
|
|
|
|
td.eg { border-width: thin; text-align: center; }
|
|
|
|
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
|
|
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
|
|
#table-example-1 caption { padding-bottom: 0.5em; }
|
|
#table-example-1 thead, #table-example-1 tbody { border: none; }
|
|
#table-example-1 th, #table-example-1 td { border: solid thin; }
|
|
#table-example-1 th { font-weight: normal; }
|
|
#table-example-1 td { border-style: none solid; vertical-align: top; }
|
|
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
|
|
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
|
|
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
|
|
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
|
|
#table-example-1 tbody td:first-child::after { content: leader(". "); }
|
|
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
|
|
#table-example-1 tbody td:first-child + td { width: 10em; }
|
|
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
|
|
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
|
|
|
|
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
|
|
.apple-table-examples * { font-family: "Times", serif; }
|
|
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
|
|
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
|
|
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
|
|
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
|
|
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
|
|
.apple-table-examples td { text-align: right; vertical-align: top; }
|
|
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
|
|
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
|
|
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
|
|
.apple-table-examples sup { line-height: 0; }
|
|
|
|
.details-example img { vertical-align: top; }
|
|
|
|
#base64-table {
|
|
white-space: nowrap;
|
|
font-size: 0.6em;
|
|
column-width: 6em;
|
|
column-count: 5;
|
|
column-gap: 1em;
|
|
-moz-column-width: 6em;
|
|
-moz-column-count: 5;
|
|
-moz-column-gap: 1em;
|
|
-webkit-column-width: 6em;
|
|
-webkit-column-count: 5;
|
|
-webkit-column-gap: 1em;
|
|
}
|
|
#base64-table thead { display: none; }
|
|
#base64-table * { border: none; }
|
|
#base64-table tbody td:first-child:after { content: ':'; }
|
|
#base64-table tbody td:last-child { text-align: right; }
|
|
|
|
#named-character-references-table {
|
|
white-space: nowrap;
|
|
font-size: 0.6em;
|
|
column-width: 30em;
|
|
column-gap: 1em;
|
|
-moz-column-width: 30em;
|
|
-moz-column-gap: 1em;
|
|
-webkit-column-width: 30em;
|
|
-webkit-column-gap: 1em;
|
|
}
|
|
#named-character-references-table > table > tbody > tr > td:first-child + td,
|
|
#named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
|
|
#named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
|
|
#named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }
|
|
|
|
.glyph.control { color: red; }
|
|
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-weight: bold;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-style: italic;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
|
|
}
|
|
|
|
</style><style type="text/css">
|
|
.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
|
|
</style><script type="text/javascript">
|
|
function getCookie(name) {
|
|
var params = location.search.substr(1).split("&");
|
|
for (var index = 0; index < params.length; index++) {
|
|
if (params[index] == name)
|
|
return "1";
|
|
var data = params[index].split("=");
|
|
if (data[0] == name)
|
|
return unescape(data[1]);
|
|
}
|
|
var cookies = document.cookie.split("; ");
|
|
for (var index = 0; index < cookies.length; index++) {
|
|
var data = cookies[index].split("=");
|
|
if (data[0] == name)
|
|
return unescape(data[1]);
|
|
}
|
|
return null;
|
|
}
|
|
</script>
|
|
<script src="link-fixup.js" type="text/javascript"></script>
|
|
<link href="style.css" rel="stylesheet"><link href="the-xhtml-syntax.html" title="9 The XHTML syntax" rel="prev">
|
|
<link href="spec.html#contents" title="Table of contents" rel="index">
|
|
<link href="obsolete.html" title="11 Obsolete features" rel="next">
|
|
</head><body><div class="head" id="head">
|
|
<div id="multipage-common">
|
|
<p class="stability" id="wip"><strong>This is a work in
|
|
progress!</strong> For the latest updates from the HTML WG, possibly
|
|
including important bug fixes, please look at the <a href="http://dev.w3.org/html5/spec/Overview.html">editor's draft</a> instead.
|
|
There may also be a more
|
|
<a href="http://www.w3.org/TR/html5">up-to-date Working Draft</a>
|
|
with changes based on resolution of Last Call issues.
|
|
<input onclick="closeWarning(this.parentNode)" type="button" value="╳⃝"></p>
|
|
<script type="text/javascript">
|
|
function closeWarning(element) {
|
|
element.parentNode.removeChild(element);
|
|
var date = new Date();
|
|
date.setDate(date.getDate()+4);
|
|
document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString();
|
|
}
|
|
if (getCookie('hide-obsolescence-warning') == '1')
|
|
setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000);
|
|
</script></div>
|
|
|
|
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
|
|
|
|
<h1>HTML5</h1>
|
|
</div><div>
|
|
<a href="the-xhtml-syntax.html" class="prev">9 The XHTML syntax</a> –
|
|
<a href="spec.html#contents">Table of contents</a> –
|
|
<a href="obsolete.html" class="next">11 Obsolete features</a>
|
|
<ol class="toc"><li><a href="rendering.html#rendering"><span class="secno">10 </span>Rendering</a>
|
|
<ol><li><a href="rendering.html#introduction-8"><span class="secno">10.1 </span>Introduction</a></li><li><a href="rendering.html#the-css-user-agent-style-sheet-and-presentational-hints"><span class="secno">10.2 </span>The CSS user agent style sheet and presentational hints</a>
|
|
<ol><li><a href="rendering.html#introduction-9"><span class="secno">10.2.1 </span>Introduction</a></li><li><a href="rendering.html#display-types"><span class="secno">10.2.2 </span>Display types</a></li><li><a href="rendering.html#margins-and-padding"><span class="secno">10.2.3 </span>Margins and padding</a></li><li><a href="rendering.html#alignment"><span class="secno">10.2.4 </span>Alignment</a></li><li><a href="rendering.html#fonts-and-colors"><span class="secno">10.2.5 </span>Fonts and colors</a></li><li><a href="rendering.html#punctuation-and-decorations"><span class="secno">10.2.6 </span>Punctuation and decorations</a></li><li><a href="rendering.html#resetting-rules-for-inherited-properties"><span class="secno">10.2.7 </span>Resetting rules for inherited properties</a></li><li><a href="rendering.html#the-hr-element-0"><span class="secno">10.2.8 </span>The <code>hr</code> element</a></li><li><a href="rendering.html#the-fieldset-element-0"><span class="secno">10.2.9 </span>The <code>fieldset</code> element</a></li></ol></li><li><a href="rendering.html#replaced-elements"><span class="secno">10.3 </span>Replaced elements</a>
|
|
<ol><li><a href="rendering.html#embedded-content-2"><span class="secno">10.3.1 </span>Embedded content</a></li><li><a href="rendering.html#timed-text-tracks-0"><span class="secno">10.3.2 </span>Timed text tracks</a>
|
|
<ol><li><a href="rendering.html#webvtt-cue-text-rendering-rules"><span class="secno">10.3.2.1 </span>WebVTT cue text rendering rules</a></li><li><a href="rendering.html#applying-css-properties-to-webvtt-node-objects"><span class="secno">10.3.2.2 </span>Applying CSS properties to <span title="WebVTT Node Object">WebVTT Node Objects</span></a></li><li><a href="rendering.html#css-extensions"><span class="secno">10.3.2.3 </span>CSS extensions</a>
|
|
<ol><li><a href="rendering.html#the-::cue-pseudo-element"><span class="secno">10.3.2.3.1 </span>The '::cue' pseudo-element</a></li><li><a href="rendering.html#the-:past-and-:future-pseudo-classes"><span class="secno">10.3.2.3.2 </span>The ':past' and ':future' pseudo-classes</a></li></ol></li></ol></li><li><a href="rendering.html#images"><span class="secno">10.3.3 </span>Images</a></li><li><a href="rendering.html#attributes-for-embedded-content-and-images"><span class="secno">10.3.4 </span>Attributes for embedded content and images</a></li><li><a href="rendering.html#image-maps-0"><span class="secno">10.3.5 </span>Image maps</a></li><li><a href="rendering.html#toolbars-0"><span class="secno">10.3.6 </span>Toolbars</a></li></ol></li><li><a href="rendering.html#bindings"><span class="secno">10.4 </span>Bindings</a>
|
|
<ol><li><a href="rendering.html#introduction-10"><span class="secno">10.4.1 </span>Introduction</a></li><li><a href="rendering.html#the-button-element-0"><span class="secno">10.4.2 </span>The <code>button</code> element</a></li><li><a href="rendering.html#the-details-element-0"><span class="secno">10.4.3 </span>The <code>details</code> element</a></li><li><a href="rendering.html#the-input-element-as-a-text-entry-widget"><span class="secno">10.4.4 </span>The <code>input</code> element as a text entry widget</a></li><li><a href="rendering.html#the-input-element-as-domain-specific-widgets"><span class="secno">10.4.5 </span>The <code>input</code> element as domain-specific widgets</a></li><li><a href="rendering.html#the-input-element-as-a-range-control"><span class="secno">10.4.6 </span>The <code>input</code> element as a range control</a></li><li><a href="rendering.html#the-input-element-as-a-color-well"><span class="secno">10.4.7 </span>The <code>input</code> element as a color well</a></li><li><a href="rendering.html#the-input-element-as-a-checkbox-and-radio-button-widgets"><span class="secno">10.4.8 </span>The <code>input</code> element as a checkbox and radio button widgets</a></li><li><a href="rendering.html#the-input-element-as-a-file-upload-control"><span class="secno">10.4.9 </span>The <code>input</code> element as a file upload control</a></li><li><a href="rendering.html#the-input-element-as-a-button"><span class="secno">10.4.10 </span>The <code>input</code> element as a button</a></li><li><a href="rendering.html#the-marquee-element-0"><span class="secno">10.4.11 </span>The <code>marquee</code> element</a></li><li><a href="rendering.html#the-meter-element-0"><span class="secno">10.4.12 </span>The <code>meter</code> element</a></li><li><a href="rendering.html#the-progress-element-0"><span class="secno">10.4.13 </span>The <code>progress</code> element</a></li><li><a href="rendering.html#the-select-element-0"><span class="secno">10.4.14 </span>The <code>select</code> element</a></li><li><a href="rendering.html#the-textarea-element-0"><span class="secno">10.4.15 </span>The <code>textarea</code> element</a></li><li><a href="rendering.html#the-keygen-element-0"><span class="secno">10.4.16 </span>The <code>keygen</code> element</a></li><li><a href="rendering.html#the-time-element-0"><span class="secno">10.4.17 </span>The <code>time</code> element</a></li></ol></li><li><a href="rendering.html#frames-and-framesets"><span class="secno">10.5 </span>Frames and framesets</a></li><li><a href="rendering.html#interactive-media"><span class="secno">10.6 </span>Interactive media</a>
|
|
<ol><li><a href="rendering.html#links-forms-and-navigation"><span class="secno">10.6.1 </span>Links, forms, and navigation</a></li><li><a href="rendering.html#the-title-attribute-0"><span class="secno">10.6.2 </span>The <code title="attr-title">title</code> attribute</a></li><li><a href="rendering.html#editing-hosts"><span class="secno">10.6.3 </span>Editing hosts</a></li><li><a href="rendering.html#text-rendered-in-native-user-interfaces"><span class="secno">10.6.4 </span>Text rendered in native user interfaces</a></li></ol></li><li><a href="rendering.html#print-media"><span class="secno">10.7 </span>Print media</a></li></ol></li></ol></div>
|
|
|
|
<div class="impl">
|
|
|
|
<h2 id="rendering"><span class="secno">10 </span>Rendering</h2>
|
|
|
|
<p><i>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 <a href="infrastructure.html#renderingUA">supporting the suggested
|
|
default rendering</a>, the term "expected" in this section has the
|
|
same conformance implications as the RFC2119-defined term
|
|
"must".</i></p>
|
|
|
|
|
|
<h3 id="introduction-8"><span class="secno">10.1 </span>Introduction</h3>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>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
|
|
<dfn id="represents">represents</dfn>, as described by this specification.</p>
|
|
|
|
<p>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 <i>media-independent</i>
|
|
language). User agent implementors are encouraged to adapt the
|
|
suggestions in this section to their target media.</p>
|
|
|
|
<hr><p>An element is <dfn id="being-rendered">being rendered</dfn> if it is <a href="infrastructure.html#in-a-document">in a
|
|
<code>Document</code></a>, either its parent node is itself
|
|
<a href="#being-rendered">being rendered</a> or it is the <code><a href="infrastructure.html#document">Document</a></code> node,
|
|
and it is not explicitly excluded from the rendering using either:</p>
|
|
<ul class="brief"><li>the CSS 'display' property's 'none' value, or</li>
|
|
<li>the 'visibility' property's 'collapse' value unless it is being treated as equivalent to the 'hidden' value, or</li>
|
|
<li>some equivalent in other styling languages.</li>
|
|
</ul><p class="note">Just being off-screen does not mean the element is
|
|
not <a href="#being-rendered">being rendered</a>. The presence of the <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute normally means the
|
|
element is not <a href="#being-rendered">being rendered</a>, though this might be
|
|
overridden by the style sheets.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h3 id="the-css-user-agent-style-sheet-and-presentational-hints"><span class="secno">10.2 </span>The CSS user agent style sheet and presentational hints</h3>
|
|
|
|
<h4 id="introduction-9"><span class="secno">10.2.1 </span>Introduction</h4>
|
|
|
|
<p>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 <a href="infrastructure.html#html-elements">HTML
|
|
elements</a>.</p>
|
|
|
|
<p>Some rules are intended for the author-level zero-specificity
|
|
presentational hints part of the CSS cascade; these are explicitly
|
|
called out as <dfn id="presentational-hints">presentational hints</dfn>.</p>
|
|
|
|
<p>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 "<dfn id="ltr-specific">LTR-specific</dfn>".</p>
|
|
<p id="case-insensitive-selector-exception">Similarly, for the
|
|
purpose of the rules marked "case-insensitive", user agents are
|
|
expected to use <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> matching of
|
|
attribute values rather than case-sensitive matching, even for
|
|
attributes in XHTML documents.</p>
|
|
|
|
<p class="note">These markings only affect the handling of attribute
|
|
<em>values</em>, not attribute names or element names.</p>
|
|
|
|
<hr><p>When the text below says that an attribute <var title="">attribute</var> on an element <var title="">element</var>
|
|
<dfn id="maps-to-the-pixel-length-property">maps to the pixel length property</dfn> (or properties) <var title="">properties</var>, it means that if <var title="">element</var> has an attribute <var title="">attribute</var> set, and parsing that attribute's value
|
|
using the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a>
|
|
doesn't generate an error, then the user agent is expected to use
|
|
the parsed value as a pixel length for a <a href="#presentational-hints" title="presentational
|
|
hints">presentational hint</a> for <var title="">properties</var>.</p>
|
|
|
|
<p>When the text below says that an attribute <var title="">attribute</var> on an element <var title="">element</var>
|
|
<dfn id="maps-to-the-dimension-property">maps to the dimension property</dfn> (or properties) <var title="">properties</var>, it means that if <var title="">element</var> has an attribute <var title="">attribute</var> set, and parsing that attribute's value
|
|
using the <a href="common-microsyntaxes.html#rules-for-parsing-dimension-values">rules for parsing dimension values</a> doesn't
|
|
generate an error, then the user agent is expected to use the parsed
|
|
dimension as the value for a <a href="#presentational-hints" title="presentational
|
|
hints">presentational hint</a> for <var title="">properties</var>, with the value given as a pixel length if
|
|
the dimension was an integer, and with the value given as a
|
|
percentage if the dimension was a percentage.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="display-types"><span class="secno">10.2.2 </span>Display types</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
[hidden], area, base, basefont, command, datalist, head,
|
|
input[type=hidden], link, menu[type=context], meta, noembed, noframes,
|
|
param, rp, script, source, style, track, title { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
display: none;
|
|
}
|
|
|
|
address, article, aside, blockquote, body, center, dd, dir, div, dl,
|
|
dt, figure, figcaption, footer, form, h1, h2, h3, h4, h5, h6, header,
|
|
hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
|
|
section, summary, ul, xmp { display: block; unicode-bidi: isolate; }
|
|
|
|
table { display: table; unicode-bidi: isolate; }
|
|
caption { display: table-caption; unicode-bidi: isolate; }
|
|
colgroup, colgroup[hidden] { display: table-column-group; unicode-bidi: isolate; }
|
|
col, col[hidden] { display: table-column; unicode-bidi: isolate; }
|
|
thead, thead[hidden] { display: table-header-group; unicode-bidi: isolate; }
|
|
tbody, tbody[hidden] { display: table-row-group; unicode-bidi: isolate; }
|
|
tfoot, tfoot[hidden] { display: table-footer-group; unicode-bidi: isolate; }
|
|
tr, tr[hidden] { display: table-row; unicode-bidi: isolate; }
|
|
td, th, td[hidden], th[hidden] { display: table-cell; unicode-bidi: isolate; }
|
|
|
|
colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
|
|
tfoot[hidden], tr[hidden], td[hidden], th[hidden] {
|
|
visibility: collapse;
|
|
}
|
|
|
|
li { display: list-item; unicode-bidi: isolate; }
|
|
|
|
ruby { display: ruby; }
|
|
rt { display: ruby-text; }</pre>
|
|
|
|
|
|
|
|
<p>For the purposes of the CSS table model, the <code><a href="tabular-data.html#the-col-element">col</a></code>
|
|
element is expected to be treated as if it was present as many times
|
|
as its <code title="attr-col-span"><a href="tabular-data.html#attr-col-span">span</a></code> attribute <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers" title="rules for parsing non-negative
|
|
integers">specifies</a>.</p>
|
|
|
|
<p>For the purposes of the CSS table model, the
|
|
<code><a href="tabular-data.html#the-colgroup-element">colgroup</a></code> element, if it contains no <code><a href="tabular-data.html#the-col-element">col</a></code>
|
|
element, is expected to be treated as if it had as many such
|
|
children as its <code title="attr-colgroup-span"><a href="tabular-data.html#attr-colgroup-span">span</a></code>
|
|
attribute <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers" title="rules for parsing non-negative
|
|
integers">specifies</a>.</p>
|
|
|
|
<p>For the purposes of the CSS table model, the <code title="attr-tdth-colspan"><a href="tabular-data.html#attr-tdth-colspan">colspan</a></code> and <code title="attr-tdth-rowspan"><a href="tabular-data.html#attr-tdth-rowspan">rowspan</a></code> attributes on
|
|
<code><a href="tabular-data.html#the-td-element">td</a></code> and <code><a href="tabular-data.html#the-th-element">th</a></code> elements are expected to <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers" title="rules for parsing non-negative integers">provide</a> the
|
|
<i>special knowledge</i> regarding cells spanning rows and
|
|
columns.</p>
|
|
|
|
<p>For the purposes of the CSS ruby model, runs of children of
|
|
<code><a href="text-level-semantics.html#the-ruby-element">ruby</a></code> elements that are not <code><a href="text-level-semantics.html#the-rt-element">rt</a></code> or
|
|
<code><a href="text-level-semantics.html#the-rp-element">rp</a></code> elements are expected to be wrapped in anonymous
|
|
boxes whose 'display' property has the value 'ruby-base'. <a href="references.html#refsCSSRUBY">[CSSRUBY]</a></p>
|
|
|
|
<p>User agents that do not support correct ruby rendering are
|
|
expected to render parentheses around the text of <code><a href="text-level-semantics.html#the-rt-element">rt</a></code>
|
|
elements in the absence of <code><a href="text-level-semantics.html#the-rp-element">rp</a></code> elements.</p>
|
|
|
|
<p>The user agent is expected to hide <code><a href="scripting-1.html#the-noscript-element">noscript</a></code> elements
|
|
for whom <a href="webappapis.html#concept-n-script" title="concept-n-script">scripting is enabled</a>,
|
|
irrespective of CSS rules.</p>
|
|
|
|
<p>In <a href="dom.html#html-documents">HTML documents</a>, the user agent is expected to
|
|
hide <code><a href="forms.html#the-form-element">form</a></code> elements that are children of
|
|
<code><a href="tabular-data.html#the-table-element">table</a></code>, <code><a href="tabular-data.html#the-thead-element">thead</a></code>, <code><a href="tabular-data.html#the-tbody-element">tbody</a></code>,
|
|
<code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code>, or <code><a href="tabular-data.html#the-tr-element">tr</a></code> elements, irrespective of CSS
|
|
rules.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="margins-and-padding"><span class="secno">10.2.3 </span>Margins and padding</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
blockquote, dir, dl, figure, listing, menu, ol, p, plaintext,
|
|
pre, ul, xmp {
|
|
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;
|
|
}
|
|
|
|
h1 { margin-top: 0.67em; margin-bottom: 0.67em; }
|
|
h2 { margin-top: 0.83em; margin-bottom: 0.83em; }
|
|
h3 { margin-top: 1.00em; margin-bottom: 1.00em; }
|
|
h4 { margin-top: 1.33em; margin-bottom: 1.33em; }
|
|
h5 { margin-top: 1.67em; margin-bottom: 1.67em; }
|
|
h6 { margin-top: 2.33em; margin-bottom: 2.33em; }
|
|
|
|
dd { margin-left: 40px; } /* <a href="#ltr-specific">LTR-specific</a>: use 'margin-right' for rtl elements */
|
|
dir, menu, ol, ul { padding-left: 40px; } /* <a href="#ltr-specific">LTR-specific</a>: use 'padding-right' for rtl elements */
|
|
blockquote, figure { margin-left: 40px; margin-right: 40px; }
|
|
|
|
table { border-spacing: 2px; border-collapse: separate; }
|
|
td, th { padding: 1px; }</pre>
|
|
|
|
<p>The <code><a href="sections.html#the-article-element">article</a></code>, <code><a href="sections.html#the-aside-element">aside</a></code>, <code><a href="sections.html#the-nav-element">nav</a></code>,
|
|
and <code><a href="sections.html#the-section-element">section</a></code> elements are expected to affect the margins
|
|
of <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> elements, based on the nesting depth. If <var title="">x</var> is a selector that matches elements that are either
|
|
<code><a href="sections.html#the-article-element">article</a></code>, <code><a href="sections.html#the-aside-element">aside</a></code>, <code><a href="sections.html#the-nav-element">nav</a></code>, or
|
|
<code><a href="sections.html#the-section-element">section</a></code> elements, then the following rules capture what
|
|
is expected:</p>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
<var title="">x</var> h1 { margin-top: 0.83em; margin-bottom: 0.83em; }
|
|
<var title="">x</var> <var title="">x</var> h1 { margin-top: 1.00em; margin-bottom: 1.00em; }
|
|
<var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.33em; margin-bottom: 1.33em; }
|
|
<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.67em; margin-bottom: 1.67em; }
|
|
<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 2.33em; margin-bottom: 2.33em; }</pre>
|
|
|
|
<hr><p>For each property in the table below, given a <code><a href="sections.html#the-body-element">body</a></code>
|
|
element, the first attribute that exists <a href="#maps-to-the-pixel-length-property">maps to the pixel
|
|
length property</a> on the <code><a href="sections.html#the-body-element">body</a></code> element. If none of
|
|
the attributes for a property are found, or if the value of the
|
|
attribute that was found cannot be parsed successfully, then a
|
|
default value of 8px is expected to be used for that property
|
|
instead.</p>
|
|
|
|
<table><thead><tr><th>Property
|
|
</th><th>Source
|
|
</th></tr></thead><tbody><tr><td rowspan="3">'margin-top'
|
|
</td><td><code><a href="sections.html#the-body-element">body</a></code> element's <code title="attr-body-marginheight"><a href="obsolete.html#attr-body-marginheight">marginheight</a></code> attribute
|
|
</td></tr><tr><td>The <code><a href="sections.html#the-body-element">body</a></code> element's <a href="#container-frame-element">container frame element</a>'s <code title="attr-iframe-marginheight"><a href="obsolete.html#attr-iframe-marginheight">marginheight</a></code> attribute
|
|
</td></tr><tr><td><code><a href="sections.html#the-body-element">body</a></code> element's <code title="attr-body-topmargin">topmargin</code> attribute
|
|
</td></tr></tbody><tbody><tr><td rowspan="3">'margin-right'
|
|
</td><td><code><a href="sections.html#the-body-element">body</a></code> element's <code title="attr-body-marginwidth"><a href="obsolete.html#attr-body-marginwidth">marginwidth</a></code> attribute
|
|
</td></tr><tr><td>The <code><a href="sections.html#the-body-element">body</a></code> element's <a href="#container-frame-element">container frame element</a>'s <code title="attr-iframe-marginwidth"><a href="obsolete.html#attr-iframe-marginwidth">marginwidth</a></code> attribute
|
|
</td></tr><tr><td><code><a href="sections.html#the-body-element">body</a></code> element's <code title="attr-body-rightmargin">rightmargin</code> attribute
|
|
</td></tr></tbody><tbody><tr><td rowspan="3">'margin-bottom'
|
|
</td><td><code><a href="sections.html#the-body-element">body</a></code> element's <code title="attr-body-marginheight"><a href="obsolete.html#attr-body-marginheight">marginheight</a></code> attribute
|
|
</td></tr><tr><td>The <code><a href="sections.html#the-body-element">body</a></code> element's <a href="#container-frame-element">container frame element</a>'s <code title="attr-iframe-marginheight"><a href="obsolete.html#attr-iframe-marginheight">marginheight</a></code> attribute
|
|
</td></tr><tr><td><code><a href="sections.html#the-body-element">body</a></code> element's <code title="attr-body-bottommargin">bottommargin</code> attribute
|
|
</td></tr></tbody><tbody><tr><td rowspan="3">'margin-left'
|
|
</td><td><code><a href="sections.html#the-body-element">body</a></code> element's <code title="attr-body-marginwidth"><a href="obsolete.html#attr-body-marginwidth">marginwidth</a></code> attribute
|
|
</td></tr><tr><td>The <code><a href="sections.html#the-body-element">body</a></code> element's <a href="#container-frame-element">container frame element</a>'s <code title="attr-iframe-marginwidth"><a href="obsolete.html#attr-iframe-marginwidth">marginwidth</a></code> attribute
|
|
</td></tr><tr><td><code><a href="sections.html#the-body-element">body</a></code> element's <code title="attr-body-leftmargin">leftmargin</code> attribute
|
|
</td></tr></tbody></table><p>If the <code><a href="sections.html#the-body-element">body</a></code> element's <code><a href="infrastructure.html#document">Document</a></code>'s
|
|
<a href="browsers.html#browsing-context">browsing context</a> is a <a href="browsers.html#nested-browsing-context">nested browsing
|
|
context</a>, and the <a href="browsers.html#browsing-context-container">browsing context container</a> of
|
|
that <a href="browsers.html#nested-browsing-context">nested browsing context</a> is a <code><a href="obsolete.html#frame">frame</a></code> or
|
|
<code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code> element, then the <dfn id="container-frame-element">container frame
|
|
element</dfn> of the <code><a href="sections.html#the-body-element">body</a></code> element is that
|
|
<code><a href="obsolete.html#frame">frame</a></code> or <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code> element. Otherwise, there
|
|
is no <a href="#container-frame-element">container frame element</a>.</p>
|
|
|
|
<p class="warning">The above requirements imply that a page can
|
|
change the margins of another page (including one from another
|
|
<a href="origin-0.html#origin">origin</a>) using, for example, an
|
|
<code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>. 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.</p>
|
|
|
|
<hr><p>If the <code><a href="infrastructure.html#document">Document</a></code> has a <a href="infrastructure.html#root-element">root element</a>, and
|
|
the <code><a href="infrastructure.html#document">Document</a></code>'s <a href="browsers.html#browsing-context">browsing context</a> is a
|
|
<a href="browsers.html#nested-browsing-context">nested browsing context</a>, and the <a href="browsers.html#browsing-context-container">browsing context
|
|
container</a> of that <a href="browsers.html#nested-browsing-context">nested browsing context</a> is a
|
|
<code><a href="obsolete.html#frame">frame</a></code> or <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code> element, and that element
|
|
has a <code title="attr-frames-scrolling">scrolling</code>
|
|
attribute, then the user agent is expected to compare the value of
|
|
the attribute in an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> 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 <a href="#presentational-hints" title="presentational hints">presentational
|
|
hint</a> 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:</p>
|
|
|
|
<table><thead><tr><th> Attribute value
|
|
</th><th> 'overflow' value
|
|
</th></tr></thead><tbody><tr><td><code title="">on</code>
|
|
</td><td>'scroll'
|
|
</td></tr><tr><td><code title="">scroll</code>
|
|
</td><td>'scroll'
|
|
</td></tr><tr><td><code title="">yes</code>
|
|
</td><td>'scroll'
|
|
</td></tr><tr><td><code title="">off</code>
|
|
</td><td>'hidden'
|
|
</td></tr><tr><td><code title="">noscroll</code>
|
|
</td><td>'hidden'
|
|
</td></tr><tr><td><code title="">no</code>
|
|
</td><td>'hidden'
|
|
</td></tr><tr><td><code title="">auto</code>
|
|
</td><td>'auto'
|
|
</td></tr></tbody></table><hr><p>The <code><a href="tabular-data.html#the-table-element">table</a></code> element's <code title="attr-table-cellspacing"><a href="obsolete.html#attr-table-cellspacing">cellspacing</a></code> attribute
|
|
<a href="#maps-to-the-pixel-length-property">maps to the pixel length property</a> 'border-spacing' on the
|
|
element.</p>
|
|
|
|
<p>The <code><a href="tabular-data.html#the-table-element">table</a></code> element's <code title="attr-table-cellpadding"><a href="obsolete.html#attr-table-cellpadding">cellpadding</a></code> attribute <a href="#maps-to-the-pixel-length-property" title="maps to the pixel length property">maps to the pixel length
|
|
properties</a> 'padding-top', 'padding-right', 'padding-bottom',
|
|
and 'padding-left' of any <code><a href="tabular-data.html#the-td-element">td</a></code> and <code><a href="tabular-data.html#the-th-element">th</a></code>
|
|
elements that have corresponding <a href="tabular-data.html#concept-cell" title="concept-cell">cells</a> in the <a href="tabular-data.html#concept-table" title="concept-table">table</a> corresponding to the
|
|
<code><a href="tabular-data.html#the-table-element">table</a></code> element.</p>
|
|
|
|
<p>The <code><a href="tabular-data.html#the-table-element">table</a></code> element's <code title="attr-table-hspace">hspace</code> attribute <a href="#maps-to-the-dimension-property" title="maps
|
|
to the dimension property">maps to the dimension properties</a>
|
|
'margin-left' and 'margin-right' on the <code><a href="tabular-data.html#the-table-element">table</a></code>
|
|
element.</p>
|
|
|
|
<p>The <code><a href="tabular-data.html#the-table-element">table</a></code> element's <code title="attr-table-vspace">vspace</code> attribute <a href="#maps-to-the-dimension-property" title="maps
|
|
to the dimension property">maps to the dimension properties</a>
|
|
'margin-top' and 'margin-bottom' on the <code><a href="tabular-data.html#the-table-element">table</a></code>
|
|
element.</p>
|
|
|
|
<p>The <code><a href="tabular-data.html#the-table-element">table</a></code> element's <code title="attr-table-height">height</code> attribute <a href="#maps-to-the-dimension-property">maps to the
|
|
dimension property</a> 'height' on the <code><a href="tabular-data.html#the-table-element">table</a></code>
|
|
element.</p>
|
|
|
|
<p>The <code><a href="tabular-data.html#the-table-element">table</a></code> element's <code title="attr-table-width"><a href="obsolete.html#attr-table-width">width</a></code> attribute <a href="#maps-to-the-dimension-property">maps to the
|
|
dimension property</a> 'width' on the <code><a href="tabular-data.html#the-table-element">table</a></code>
|
|
element.</p>
|
|
|
|
<p>The <code><a href="tabular-data.html#the-col-element">col</a></code> element's <code title="attr-col-width"><a href="obsolete.html#attr-col-width">width</a></code> attribute <a href="#maps-to-the-dimension-property">maps to the
|
|
dimension property</a> 'width' on the <code><a href="tabular-data.html#the-col-element">col</a></code>
|
|
element.</p>
|
|
|
|
<p>The <code><a href="tabular-data.html#the-tr-element">tr</a></code> element's <code title="attr-tr-height">height</code> attribute <a href="#maps-to-the-dimension-property">maps to the
|
|
dimension property</a> 'height' on the <code><a href="tabular-data.html#the-tr-element">tr</a></code>
|
|
element.</p>
|
|
|
|
<p>The <code><a href="tabular-data.html#the-td-element">td</a></code> and <code><a href="tabular-data.html#the-th-element">th</a></code> elements' <code title="attr-tdth-height"><a href="obsolete.html#attr-tdth-height">height</a></code> attributes <a href="#maps-to-the-dimension-property" title="maps
|
|
to the dimension property">map to the dimension property</a> 'height'
|
|
on the element.</p>
|
|
|
|
<p>The <code><a href="tabular-data.html#the-td-element">td</a></code> and <code><a href="tabular-data.html#the-th-element">th</a></code> elements' <code title="attr-tdth-width"><a href="obsolete.html#attr-tdth-width">width</a></code> attributes <a href="#maps-to-the-dimension-property" title="maps
|
|
to the dimension property">map to the dimension property</a> 'width'
|
|
on the element.</p>
|
|
|
|
<hr><p>In <a href="dom.html#quirks-mode">quirks mode</a>, the following rules are also
|
|
expected to apply:</p>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
form { margin-bottom: 1em; }</pre>
|
|
|
|
<p>When a <code><a href="infrastructure.html#document">Document</a></code> is in <a href="dom.html#quirks-mode">quirks mode</a>,
|
|
margins on <a href="infrastructure.html#html-elements">HTML elements</a> at the top or bottom of
|
|
<code><a href="sections.html#the-body-element">body</a></code>, <code><a href="tabular-data.html#the-td-element">td</a></code>, or <code><a href="tabular-data.html#the-th-element">th</a></code> elements are
|
|
expected to be collapsed to zero.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="alignment"><span class="secno">10.2.4 </span>Alignment</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
thead, tbody, tfoot, table > tr { vertical-align: middle; }
|
|
tr, td, th { vertical-align: inherit; }
|
|
sub { vertical-align: sub; }
|
|
sup { vertical-align: super; }</pre>
|
|
|
|
<hr><p>The following rules are also expected to apply, as
|
|
<a href="#presentational-hints">presentational hints</a>:</p>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
table[align=left] { float: left; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
table[align=right] { float: right; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
table[align=center], table[align=abscenter],
|
|
table[align=absmiddle], table[align=middle] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
margin-left: auto; margin-right: auto;
|
|
}
|
|
thead[align=absmiddle], tbody[align=absmiddle], tfoot[align=absmiddle],
|
|
tr[align=absmiddle], td[align=absmiddle], th[align=absmiddle] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
text-align: center;
|
|
}
|
|
|
|
caption[align=bottom] { caption-side: bottom; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
p[align=left], h1[align=left], h2[align=left], h3[align=left],
|
|
h4[align=left], h5[align=left], h6[align=left] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
text-align: left;
|
|
}
|
|
p[align=right], h1[align=right], h2[align=right], h3[align=right],
|
|
h4[align=right], h5[align=right], h6[align=right] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
text-align: right;
|
|
}
|
|
p[align=center], h1[align=center], h2[align=center], h3[align=center],
|
|
h4[align=center], h5[align=center], h6[align=center] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
text-align: center;
|
|
}
|
|
p[align=justify], h1[align=justify], h2[align=justify], h3[align=justify],
|
|
h4[align=justify], h5[align=justify], h6[align=justify] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
text-align: justify;
|
|
}
|
|
thead[valign=top], tbody[valign=top], tfoot[valign=top],
|
|
tr[valign=top], td[valign=top], th[valign=top] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
vertical-align: top;
|
|
}
|
|
thead[valign=middle], tbody[valign=middle], tfoot[valign=middle],
|
|
tr[valign=middle], td[valign=middle], th[valign=middle] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
vertical-align: middle;
|
|
}
|
|
thead[valign=bottom], tbody[valign=bottom], tfoot[valign=bottom],
|
|
tr[valign=bottom], td[valign=bottom], th[valign=bottom] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
vertical-align: bottom;
|
|
}
|
|
thead[valign=baseline], tbody[valign=baseline], tfoot[valign=baseline],
|
|
tr[valign=baseline], td[valign=baseline], th[valign=baseline] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
vertical-align: baseline;
|
|
}</pre>
|
|
|
|
<p>The <code><a href="obsolete.html#center">center</a></code> element, the <code><a href="tabular-data.html#the-caption-element">caption</a></code> element
|
|
unless specified otherwise below, and the <code><a href="grouping-content.html#the-div-element">div</a></code>,
|
|
<code><a href="tabular-data.html#the-thead-element">thead</a></code>, <code><a href="tabular-data.html#the-tbody-element">tbody</a></code>, <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code>,
|
|
<code><a href="tabular-data.html#the-tr-element">tr</a></code>, <code><a href="tabular-data.html#the-td-element">td</a></code>, and <code><a href="tabular-data.html#the-th-element">th</a></code> elements when
|
|
they have an <code title="attr-div-align"><a href="obsolete.html#attr-div-align">align</a></code> attribute
|
|
whose value is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for
|
|
either the string "<code title="">center</code>" or the string
|
|
"<code title="">middle</code>", are expected to center text within
|
|
themselves, as if they had their 'text-align' property set to
|
|
'center' in a <a href="#presentational-hints" title="presentational hints">presentational
|
|
hint</a>, and to <a href="#align-descendants">align descendants</a> to the
|
|
center.</p>
|
|
|
|
<p>The <code><a href="grouping-content.html#the-div-element">div</a></code>, <code><a href="tabular-data.html#the-caption-element">caption</a></code>, <code><a href="tabular-data.html#the-thead-element">thead</a></code>,
|
|
<code><a href="tabular-data.html#the-tbody-element">tbody</a></code>, <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code>, <code><a href="tabular-data.html#the-tr-element">tr</a></code>,
|
|
<code><a href="tabular-data.html#the-td-element">td</a></code>, and <code><a href="tabular-data.html#the-th-element">th</a></code> elements, when they have an
|
|
<code title="attr-align">align</code> attribute whose value is an
|
|
<a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">left</code>", are expected to left-align text within
|
|
themselves, as if they had their 'text-align' property set to 'left'
|
|
in a <a href="#presentational-hints" title="presentational hints">presentational hint</a>,
|
|
and to <a href="#align-descendants">align descendants</a> to the left.</p>
|
|
|
|
<p>The <code><a href="grouping-content.html#the-div-element">div</a></code>, <code><a href="tabular-data.html#the-caption-element">caption</a></code>, <code><a href="tabular-data.html#the-thead-element">thead</a></code>,
|
|
<code><a href="tabular-data.html#the-tbody-element">tbody</a></code>, <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code>, <code><a href="tabular-data.html#the-tr-element">tr</a></code>,
|
|
<code><a href="tabular-data.html#the-td-element">td</a></code>, and <code><a href="tabular-data.html#the-th-element">th</a></code> elements, when they have an
|
|
<code title="attr-align">align</code> attribute whose value is an
|
|
<a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">right</code>", are expected to right-align text within
|
|
themselves, as if they had their 'text-align' property set to
|
|
'right' in a <a href="#presentational-hints" title="presentational hints">presentational
|
|
hint</a>, and to <a href="#align-descendants">align descendants</a> to the right.</p>
|
|
|
|
<p>The <code><a href="grouping-content.html#the-div-element">div</a></code>, <code><a href="tabular-data.html#the-caption-element">caption</a></code>, <code><a href="tabular-data.html#the-thead-element">thead</a></code>,
|
|
<code><a href="tabular-data.html#the-tbody-element">tbody</a></code>, <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code>, <code><a href="tabular-data.html#the-tr-element">tr</a></code>,
|
|
<code><a href="tabular-data.html#the-td-element">td</a></code>, and <code><a href="tabular-data.html#the-th-element">th</a></code> elements, when they have an
|
|
<code title="attr-align">align</code> attribute whose value is an
|
|
<a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">justify</code>", are expected to full-justify text within
|
|
themselves, as if they had their 'text-align' property set to
|
|
'justify' in a <a href="#presentational-hints" title="presentational hints">presentational
|
|
hint</a>, and to <a href="#align-descendants">align descendants</a> to the left.</p>
|
|
|
|
<p>When a user agent is to <dfn id="align-descendants">align descendants</dfn> 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 <code title="attr-align">align</code> attribute. When multiple elements
|
|
are to <a href="#align-descendants" title="align descendants">align</a> a particular
|
|
descendant, the most deeply nested such element is expected to
|
|
override the others.</p>
|
|
|
|
<p>User agents are expected to have a rule in their user agent
|
|
stylesheet that matches <code><a href="tabular-data.html#the-th-element">th</a></code> 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'.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="fonts-and-colors"><span class="secno">10.2.5 </span>Fonts and colors</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
address, cite, dfn, em, i, var { font-style: italic; }
|
|
b, strong, th { font-weight: bold; }
|
|
code, kbd, listing, plaintext, pre, samp, tt, xmp { font-family: monospace; }
|
|
h1 { font-size: 2.00em; font-weight: bold; }
|
|
h2 { font-size: 1.50em; font-weight: bold; }
|
|
h3 { font-size: 1.17em; font-weight: bold; }
|
|
h4 { font-size: 1.00em; font-weight: bold; }
|
|
h5 { font-size: 0.83em; font-weight: bold; }
|
|
h6 { font-size: 0.67em; font-weight: bold; }
|
|
big { font-size: larger; }
|
|
small, sub, sup { font-size: smaller; }
|
|
sub, sup { line-height: normal; }
|
|
|
|
:link { color: blue; }
|
|
:visited { color: purple; }
|
|
mark { background: yellow; color: black; }
|
|
|
|
table, td, th { border-color: gray; }
|
|
thead, tbody, tfoot, tr { border-color: inherit; }
|
|
table[rules=none], table[rules=groups], table[rules=rows],
|
|
table[rules=cols], table[rules=all], table[frame=void],
|
|
table[frame=above], table[frame=below], table[frame=hsides],
|
|
table[frame=lhs], table[frame=rhs], table[frame=vsides],
|
|
table[frame=box], table[frame=border],
|
|
table[rules=none] > tr > td, table[rules=none] > tr > th,
|
|
table[rules=groups] > tr > td, table[rules=groups] > tr > th,
|
|
table[rules=rows] > tr > td, table[rules=rows] > tr > th,
|
|
table[rules=cols] > tr > td, table[rules=cols] > tr > th,
|
|
table[rules=all] > tr > td, table[rules=all] > tr > th,
|
|
table[rules=none] > thead > tr > td, table[rules=none] > thead > tr > th,
|
|
table[rules=groups] > thead > tr > td, table[rules=groups] > thead > tr > th,
|
|
table[rules=rows] > thead > tr > td, table[rules=rows] > thead > tr > th,
|
|
table[rules=cols] > thead > tr > td, table[rules=cols] > thead > tr > th,
|
|
table[rules=all] > thead > tr > td, table[rules=all] > thead > tr > th,
|
|
table[rules=none] > tbody > tr > td, table[rules=none] > tbody > tr > th,
|
|
table[rules=groups] > tbody > tr > td, table[rules=groups] > tbody > tr > th,
|
|
table[rules=rows] > tbody > tr > td, table[rules=rows] > tbody > tr > th,
|
|
table[rules=cols] > tbody > tr > td, table[rules=cols] > tbody > tr > th,
|
|
table[rules=all] > tbody > tr > td, table[rules=all] > tbody > tr > th,
|
|
table[rules=none] > tfoot > tr > td, table[rules=none] > tfoot > tr > th,
|
|
table[rules=groups] > tfoot > tr > td, table[rules=groups] > tfoot > tr > th,
|
|
table[rules=rows] > tfoot > tr > td, table[rules=rows] > tfoot > tr > th,
|
|
table[rules=cols] > tfoot > tr > td, table[rules=cols] > tfoot > tr > th,
|
|
table[rules=all] > tfoot > tr > td, table[rules=all] > tfoot > tr > th { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
border-color: black;
|
|
}</pre>
|
|
|
|
<hr><p>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.</p>
|
|
|
|
<hr><p>The <code><a href="sections.html#the-article-element">article</a></code>, <code><a href="sections.html#the-aside-element">aside</a></code>, <code><a href="sections.html#the-nav-element">nav</a></code>,
|
|
and <code><a href="sections.html#the-section-element">section</a></code> elements are expected to affect the font
|
|
size of <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> elements, based on the nesting depth. If
|
|
<var title="">x</var> is a selector that matches elements that are
|
|
either <code><a href="sections.html#the-article-element">article</a></code>, <code><a href="sections.html#the-aside-element">aside</a></code>, <code><a href="sections.html#the-nav-element">nav</a></code>,
|
|
or <code><a href="sections.html#the-section-element">section</a></code> elements, then the following rules capture
|
|
what is expected:</p>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
<var title="">x</var> h1 { font-size: 1.50em; }
|
|
<var title="">x</var> <var title="">x</var> h1 { font-size: 1.17em; }
|
|
<var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { font-size: 1.00em; }
|
|
<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { font-size: 0.83em; }
|
|
<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { font-size: 0.67em; }</pre>
|
|
|
|
<hr><p>When a <code><a href="sections.html#the-body-element">body</a></code>, <code><a href="tabular-data.html#the-table-element">table</a></code>, <code><a href="tabular-data.html#the-thead-element">thead</a></code>,
|
|
<code><a href="tabular-data.html#the-tbody-element">tbody</a></code>, <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code>, <code><a href="tabular-data.html#the-tr-element">tr</a></code>,
|
|
<code><a href="tabular-data.html#the-td-element">td</a></code>, or <code><a href="tabular-data.html#the-th-element">th</a></code> element has a <code title="attr-background"><a href="obsolete.html#attr-background">background</a></code> attribute set to a
|
|
non-empty value, the new value is expected to be <a href="urls.html#resolve-a-url" title="resolve a url">resolved</a> relative to the element, and
|
|
if this is successful, the user agent is expected to treat the
|
|
attribute as a <a href="#presentational-hints" title="presentational hints">presentational
|
|
hint</a> setting the element's 'background-image' property to the
|
|
resulting <a href="urls.html#absolute-url">absolute URL</a>.</p>
|
|
|
|
<p>When a <code><a href="sections.html#the-body-element">body</a></code>, <code><a href="tabular-data.html#the-table-element">table</a></code>, <code><a href="tabular-data.html#the-thead-element">thead</a></code>,
|
|
<code><a href="tabular-data.html#the-tbody-element">tbody</a></code>, <code><a href="tabular-data.html#the-tfoot-element">tfoot</a></code>, <code><a href="tabular-data.html#the-tr-element">tr</a></code>,
|
|
<code><a href="tabular-data.html#the-td-element">td</a></code>, or <code><a href="tabular-data.html#the-th-element">th</a></code> element has a <code title="">bgcolor</code> attribute set, the new value is expected to
|
|
be parsed using the <a href="common-microsyntaxes.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy color
|
|
value</a>, and if that does not return an error, the user agent
|
|
is expected to treat the attribute as a <a href="#presentational-hints" title="presentational
|
|
hints">presentational hint</a> setting the element's
|
|
'background-color' property to the resulting color.</p>
|
|
|
|
<p>When a <code><a href="sections.html#the-body-element">body</a></code> element has a <code title="attr-body-text"><a href="obsolete.html#attr-body-text">text</a></code> attribute, its value is expected
|
|
to be parsed using the <a href="common-microsyntaxes.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy color
|
|
value</a>, and if that does not return an error, the user
|
|
agent is expected to treat the attribute as a <a href="#presentational-hints" title="presentational hints">presentational hint</a> setting the
|
|
element's 'color' property to the resulting color.</p>
|
|
|
|
<p>When a <code><a href="sections.html#the-body-element">body</a></code> element has a <code title="attr-body-link"><a href="obsolete.html#attr-body-link">link</a></code> attribute, its value is expected
|
|
to be parsed using the <a href="common-microsyntaxes.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy color
|
|
value</a>, and if that does not return an error, the user agent
|
|
is expected to treat the attribute as a <a href="#presentational-hints" title="presentational
|
|
hints">presentational hint</a> setting the 'color' property of
|
|
any element in the <code><a href="infrastructure.html#document">Document</a></code> matching the ':link'
|
|
pseudo-class to the resulting color.</p>
|
|
|
|
<p>When a <code><a href="sections.html#the-body-element">body</a></code> element has a <code title="attr-body-vlink"><a href="obsolete.html#attr-body-vlink">vlink</a></code> attribute, its value is
|
|
expected to be parsed using the <a href="common-microsyntaxes.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy
|
|
color value</a>, and if that does not return an error, the user
|
|
agent is expected to treat the attribute as a <a href="#presentational-hints" title="presentational hints">presentational hint</a> setting the
|
|
'color' property of any element in the <code><a href="infrastructure.html#document">Document</a></code>
|
|
matching the ':visited' pseudo-class to the resulting color.</p>
|
|
|
|
<p>When a <code><a href="sections.html#the-body-element">body</a></code> element has a <code title="attr-body-alink"><a href="obsolete.html#attr-body-alink">alink</a></code> attribute, its value is
|
|
expected to be parsed using the <a href="common-microsyntaxes.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy
|
|
color value</a>, and if that does not return an error, the user
|
|
agent is expected to treat the attribute as a <a href="#presentational-hints" title="presentational hints">presentational hint</a> setting the
|
|
'color' property of any element in the <code><a href="infrastructure.html#document">Document</a></code>
|
|
matching the ':active' pseudo-class and either the ':link'
|
|
pseudo-class or the ':visited' pseudo-class to the resulting
|
|
color.</p>
|
|
|
|
<p>When a <code><a href="tabular-data.html#the-table-element">table</a></code> element has a <code title="attr-table-bordercolor">bordercolor</code> attribute, its
|
|
value is expected to be parsed using the <a href="common-microsyntaxes.html#rules-for-parsing-a-legacy-color-value">rules for parsing a
|
|
legacy color value</a>, and if that does not return an error, the
|
|
user agent is expected to treat the attribute as a <a href="#presentational-hints" title="presentational hints">presentational hint</a> setting the
|
|
element's 'border-top-color', 'border-right-color',
|
|
'border-bottom-color', and 'border-right-color' properties to the
|
|
resulting color.</p>
|
|
|
|
<hr><p>When a <code><a href="obsolete.html#font">font</a></code> element has a <code title="attr-font-color">color</code> attribute, its value is
|
|
expected to be parsed using the <a href="common-microsyntaxes.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy
|
|
color value</a>, and if that does not return an error, the user
|
|
agent is expected to treat the attribute as a <a href="#presentational-hints" title="presentational hints">presentational hint</a> setting the
|
|
element's 'color' property to the resulting color.</p>
|
|
|
|
<p>When a <code><a href="obsolete.html#font">font</a></code> element has a <code title="attr-font-face">face</code> attribute, the user agent is
|
|
expected to treat the attribute as a <a href="#presentational-hints" title="presentational
|
|
hints">presentational hint</a> setting the element's
|
|
'font-family' property to the attribute's value.</p>
|
|
|
|
|
|
<p>When a <code><a href="obsolete.html#font">font</a></code> element has a <code title="attr-font-size">size</code> attribute, the user agent is
|
|
expected to use the following steps to treat the attribute as a
|
|
<a href="#presentational-hints" title="presentational hints">presentational hint</a>
|
|
setting the element's 'font-size' property:</p>
|
|
|
|
<ol><li><p>Let <var title="">input</var> be the attribute's
|
|
value.</p></li>
|
|
|
|
<li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
|
|
string.</p></li>
|
|
|
|
<li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>
|
|
|
|
<li><p>If <var title="">position</var> is past the end of <var title="">input</var>, there is no <a href="#presentational-hints" title="presentational
|
|
hints">presentational hint</a>. Abort these steps.</p></li>
|
|
|
|
<li><p>If the character at <var title="">position</var> is a U+002B
|
|
PLUS SIGN character (+), then let <var title="">mode</var> be
|
|
<i>relative-plus</i>, and advance <var title="">position</var> to
|
|
the next character. Otherwise, if the character at <var title="">position</var> is a U+002D HYPHEN-MINUS character (-),
|
|
then let <var title="">mode</var> be <i>relative-minus</i>, and
|
|
advance <var title="">position</var> to the next
|
|
character. Otherwise, let <var title="">mode</var> be
|
|
<i>absolute</i>.</p></li>
|
|
|
|
<li><p><a href="common-microsyntaxes.html#collect-a-sequence-of-characters">Collect a sequence of characters</a> in the range
|
|
U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and let the
|
|
resulting sequence be <var title="">digits</var>.</p></li>
|
|
|
|
<li><p>If <var title="">digits</var> is the empty string, there is
|
|
no <a href="#presentational-hints" title="presentational hints">presentational
|
|
hint</a>. Abort these steps.</p></li>
|
|
|
|
<li><p>Interpret <var title="">digits</var> as a base-ten
|
|
integer. Let <var title="">value</var> be the resulting
|
|
number.</p></li>
|
|
|
|
<li>
|
|
|
|
|
|
|
|
<p>If <var title="">mode</var> is <i>relative-plus</i>, then
|
|
increment <var title="">value</var> by 3. If <var title="">mode</var> is <i>relative-minus</i>, then let <var title="">value</var> be the result of subtracting <var title="">value</var> from 3.</p>
|
|
|
|
</li>
|
|
|
|
<li><p>If <var title="">value</var> is greater than 7, let it be
|
|
7.</p></li>
|
|
|
|
<li><p>If <var title="">value</var> is less than 1, let it be
|
|
1.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>Set 'font-size' to the keyword corresponding to the value of
|
|
<var title="">value</var> according to the following table:</p>
|
|
|
|
<table><thead><tr><th><var title="">value</var>
|
|
</th><th>'font-size' keyword
|
|
</th><th>Notes
|
|
</th></tr></thead><tbody><tr><td>1
|
|
</td><td>xx-small
|
|
</td><td>
|
|
</td></tr><tr><td>2
|
|
</td><td>small
|
|
</td><td>
|
|
</td></tr><tr><td>3
|
|
</td><td>medium
|
|
</td><td>
|
|
</td></tr><tr><td>4
|
|
</td><td>large
|
|
</td><td>
|
|
</td></tr><tr><td>5
|
|
</td><td>x-large
|
|
</td><td>
|
|
</td></tr><tr><td>6
|
|
</td><td>xx-large
|
|
</td><td>
|
|
</td></tr><tr><td>7
|
|
</td><td>xxx-large
|
|
</td><td><i>see below</i>
|
|
</td></tr></tbody></table><p>The 'xxx-large' value is a non-CSS value used here to
|
|
indicate a font size one "step" larger than 'xx-large'.</p>
|
|
|
|
</li>
|
|
|
|
</ol></div><div class="impl">
|
|
|
|
<h4 id="punctuation-and-decorations"><span class="secno">10.2.6 </span>Punctuation and decorations</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
:link, :visited, ins, u { text-decoration: underline; }
|
|
abbr[title], acronym[title] { text-decoration: dotted underline; }
|
|
del, s, strike { text-decoration: line-through; }
|
|
blink { text-decoration: blink; }
|
|
|
|
:focus { outline: auto; }
|
|
|
|
q:before { content: open-quote; }
|
|
q:after { content: close-quote; }
|
|
|
|
br { content: '\A'; white-space: pre; }
|
|
|
|
nobr { white-space: nowrap; }
|
|
listing, plaintext, pre, xmp { white-space: pre; }
|
|
textarea { white-space: pre-wrap; }
|
|
|
|
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;
|
|
}
|
|
|
|
table { border-style: outset; }
|
|
td, th { border-style: inset; }
|
|
|
|
:ltr { direction: ltr; }
|
|
:rtl { direction: rtl; }
|
|
[dir] { unicode-bidi: embed; }
|
|
bdi, output, [dir=auto] { unicode-bidi: isolate; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
bdo, bdo[dir] { unicode-bidi: bidi-override; }
|
|
bdo[dir=auto] { unicode-bidi: bidi-override isolate; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
textarea[dir=auto], pre[dir=auto] { unicode-bidi: plaintext; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */</pre>
|
|
|
|
<p>Rules setting the 'quotes' property appropriately for the locales
|
|
and languages understood by the user are expected to be present.</p>
|
|
|
|
<p>User agents are expected to
|
|
support the 'clear' property on inline elements (in order to render
|
|
<code><a href="text-level-semantics.html#the-br-element">br</a></code> elements with <code title="attr-br-clear"><a href="obsolete.html#attr-br-clear">clear</a></code> attributes) in the manner
|
|
described in the non-normative note to this effect in CSS2.1.</p>
|
|
|
|
|
|
<hr><p id="decohints">The following rules are also expected to apply, as
|
|
<a href="#presentational-hints">presentational hints</a>:</p>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
td[nowrap], th[nowrap] { white-space: nowrap; }
|
|
pre[wrap] { white-space: pre-wrap; }
|
|
|
|
br[clear=left] { clear: left; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
br[clear=right] { clear: right; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
br[clear=all], br[clear=both] { clear: both; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
|
|
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], li[type=disc] { list-style-type: disc; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
ul[type=circle], li[type=circle] { list-style-type: circle; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
ul[type=square], li[type=square] { list-style-type: square; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
|
|
table[rules=none], table[rules=groups], table[rules=rows],
|
|
table[rules=cols], table[rules=all] {
|
|
border-style: none;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table[frame=void] { border-style: hidden hidden hidden hidden; }
|
|
table[frame=above] { border-style: solid hidden hidden hidden; }
|
|
table[frame=below] { border-style: hidden hidden solid hidden; }
|
|
table[frame=hsides] { border-style: solid hidden solid hidden; }
|
|
table[frame=lhs] { border-style: hidden hidden hidden solid; }
|
|
table[frame=rhs] { border-style: hidden solid hidden hidden; }
|
|
table[frame=vsides] { border-style: hidden solid hidden solid; }
|
|
table[frame=box],
|
|
table[frame=border] { border-style: solid solid solid solid; }
|
|
|
|
table[rules=none] > tr > td, table[rules=none] > tr > th,
|
|
table[rules=none] > thead > tr > td, table[rules=none] > thead > tr > th,
|
|
table[rules=none] > tbody > tr > td, table[rules=none] > tbody > tr > th,
|
|
table[rules=none] > tfoot > tr > td, table[rules=none] > tfoot > tr > th,
|
|
table[rules=groups] > tr > td, table[rules=groups] > tr > th,
|
|
table[rules=groups] > thead > tr > td, table[rules=groups] > thead > tr > th,
|
|
table[rules=groups] > tbody > tr > td, table[rules=groups] > tbody > tr > th,
|
|
table[rules=groups] > tfoot > tr > td, table[rules=groups] > tfoot > tr > th,
|
|
table[rules=rows] > tr > td, table[rules=rows] > tr > th,
|
|
table[rules=rows] > thead > tr > td, table[rules=rows] > thead > tr > th,
|
|
table[rules=rows] > tbody > tr > td, table[rules=rows] > tbody > tr > th,
|
|
table[rules=rows] > tfoot > tr > td, table[rules=rows] > tfoot > tr > th {
|
|
border-style: none;
|
|
}
|
|
|
|
table[rules=groups] > colgroup, table[rules=groups] > thead,
|
|
table[rules=groups] > tbody, table[rules=groups] > tfoot {
|
|
border-style: solid;
|
|
}
|
|
|
|
table[rules=rows] > tr, table[rules=rows] > thead > tr,
|
|
table[rules=rows] > tbody > tr, table[rules=rows] > tfoot > tr {
|
|
border-style: solid;
|
|
}
|
|
|
|
table[rules=cols] > tr > td, table[rules=cols] > tr > th,
|
|
table[rules=cols] > thead > tr > td, table[rules=cols] > thead > tr > th,
|
|
table[rules=cols] > tbody > tr > td, table[rules=cols] > tbody > tr > th,
|
|
table[rules=cols] > tfoot > tr > td, table[rules=cols] > tfoot > tr > th {
|
|
border-style: none solid none solid;
|
|
}
|
|
|
|
table[rules=all] > tr > td, table[rules=all] > tr > th,
|
|
table[rules=all] > thead > tr > td, table[rules=all] > thead > tr > th,
|
|
table[rules=all] > tbody > tr > td, table[rules=all] > tbody > tr > th,
|
|
table[rules=all] > tfoot > tr > td, table[rules=all] > tfoot > tr > th {
|
|
border-style: solid;
|
|
}
|
|
|
|
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 {
|
|
border-width: 1px;
|
|
}</pre>
|
|
|
|
<p>When rendering <code><a href="grouping-content.html#the-li-element">li</a></code> elements, user agents are expected
|
|
to use the <a href="grouping-content.html#ordinal-value">ordinal value</a> of the <code><a href="grouping-content.html#the-li-element">li</a></code> element
|
|
to render the counter in the list item marker.</p>
|
|
|
|
<p>The <code><a href="tabular-data.html#the-table-element">table</a></code> element's <code title="attr-table-border"><a href="tabular-data.html#attr-table-border">border</a></code> attribute <a href="#maps-to-the-pixel-length-property" title="maps
|
|
to the pixel length property">maps to the pixel length
|
|
properties</a> '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
|
|
<a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> generates an
|
|
error, a default value of 1px is expected to be used for that
|
|
property instead.</p>
|
|
|
|
<p>The <code><a href="text-level-semantics.html#the-wbr-element">wbr</a></code> element is expected to override the
|
|
'white-space' property and always provide a line-breaking
|
|
opportunity.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="resetting-rules-for-inherited-properties"><span class="secno">10.2.7 </span>Resetting rules for inherited properties</h4>
|
|
|
|
<p>The following rules are also expected to be in play, resetting
|
|
certain properties to block inheritance by default.</p>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
table, input, select, option, optgroup, button, textarea, keygen {
|
|
text-indent: initial;
|
|
}</pre>
|
|
|
|
|
|
<p>In <a href="dom.html#quirks-mode">quirks mode</a>, the following rules are also
|
|
expected to apply:</p>
|
|
|
|
<pre class="css">@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;
|
|
}
|
|
|
|
input { box-sizing: border-box; }</pre>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-hr-element-0"><span class="secno">10.2.8 </span>The <code><a href="grouping-content.html#the-hr-element">hr</a></code> element</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
hr { color: gray; border-style: inset; border-width: 1px; margin: 0.5em auto; }</pre>
|
|
|
|
<p>The following rules are also expected to apply, as
|
|
<a href="#presentational-hints">presentational hints</a>:</p>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
hr[align=left] { margin-left: 0; margin-right: auto; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
hr[align=right] { margin-left: auto; margin-right: 0; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
hr[align=center] { margin-left: auto; margin-right: auto; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
hr[color], hr[noshade] { border-style: solid; }</pre>
|
|
|
|
<p>If an <code><a href="grouping-content.html#the-hr-element">hr</a></code> element has either a <code title="attr-hr-color"><a href="obsolete.html#attr-hr-color">color</a></code> attribute or a <code title="attr-hr-noshade"><a href="obsolete.html#attr-hr-noshade">noshade</a></code> attribute, and furthermore
|
|
also has a <code title="attr-hr-size"><a href="obsolete.html#attr-hr-size">size</a></code> attribute, and
|
|
parsing that attribute's value using the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing
|
|
non-negative integers</a> doesn't generate an error, then the
|
|
user agent is expected to use the parsed value divided by two as a
|
|
pixel length for <a href="#presentational-hints">presentational hints</a> for the properties
|
|
'border-top-width', 'border-right-width', 'border-bottom-width', and
|
|
'border-left-width' on the element.</p>
|
|
|
|
<p>Otherwise, if an <code><a href="grouping-content.html#the-hr-element">hr</a></code> element has neither a <code title="attr-hr-color"><a href="obsolete.html#attr-hr-color">color</a></code> attribute nor a <code title="attr-hr-noshade"><a href="obsolete.html#attr-hr-noshade">noshade</a></code> attribute, but does have a
|
|
<code title="attr-hr-size"><a href="obsolete.html#attr-hr-size">size</a></code> attribute, and parsing that
|
|
attribute's value using the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative
|
|
integers</a> doesn't generate an error, then: if the parsed value
|
|
is one, then the user agent is expected to use the attribute as a
|
|
<a href="#presentational-hints" title="presentational hints">presentational hint</a>
|
|
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
|
|
<a href="#presentational-hints">presentational hints</a> for the 'height' property on the
|
|
element.</p>
|
|
|
|
<p>The <code title="attr-hr-width"><a href="obsolete.html#attr-hr-width">width</a></code> attribute on an
|
|
<code><a href="grouping-content.html#the-hr-element">hr</a></code> element <a href="#maps-to-the-dimension-property">maps to the dimension property</a>
|
|
'width' on the element.</p>
|
|
|
|
<p>When an <code><a href="grouping-content.html#the-hr-element">hr</a></code> element has a <code title="attr-hr-color"><a href="obsolete.html#attr-hr-color">color</a></code> attribute, its value is expected
|
|
to be parsed using the <a href="common-microsyntaxes.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy color
|
|
value</a>, and if that does not return an error, the user agent
|
|
is expected to treat the attribute as a <a href="#presentational-hints" title="presentational
|
|
hints">presentational hint</a> setting the element's 'color'
|
|
property to the resulting color.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-fieldset-element-0"><span class="secno">10.2.9 </span>The <code><a href="forms.html#the-fieldset-element">fieldset</a></code> element</h4>
|
|
|
|
<pre class="css">@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;
|
|
}</pre>
|
|
|
|
<p>The <code><a href="forms.html#the-fieldset-element">fieldset</a></code> element is expected to establish a new
|
|
block formatting context.</p>
|
|
|
|
<p>If the <code><a href="forms.html#the-fieldset-element">fieldset</a></code> element has a child that matches the
|
|
conditions in the list below, then the first such child is the
|
|
<code><a href="forms.html#the-fieldset-element">fieldset</a></code> element's <dfn id="rendered-legend">rendered legend</dfn>:</p>
|
|
|
|
<ul class="brief"><li>The child is a <code><a href="forms.html#the-legend-element">legend</a></code> element.</li>
|
|
|
|
<li>The child is not out-of-flow (e.g. not absolutely positioned or floated).</li>
|
|
|
|
<li>The child is generating a box (e.g. it is not 'display:none').</li>
|
|
|
|
</ul><p>A <code><a href="forms.html#the-fieldset-element">fieldset</a></code> element's <a href="#rendered-legend">rendered legend</a>,
|
|
if any, is expected to be rendered over the top border edge of the
|
|
<code><a href="forms.html#the-fieldset-element">fieldset</a></code> element as a 'block' box (overriding any
|
|
explicit 'display' value). In the absence of an explicit width, the
|
|
box should shrink-wrap. If the <code><a href="forms.html#the-legend-element">legend</a></code> element in
|
|
question has an <code title="attr-legend-align"><a href="obsolete.html#attr-legend-align">align</a></code>
|
|
attribute, and its value is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a>
|
|
match for one of the strings in the first column of the following
|
|
table, then the <code><a href="forms.html#the-legend-element">legend</a></code> 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.</p>
|
|
|
|
<table><thead><tr><th>Attribute value
|
|
</th><th>Alignment position
|
|
</th></tr></thead><tbody><tr><td><code title="">left</code>
|
|
</td><td>On the left
|
|
</td></tr><tr><td><code title="">right</code>
|
|
</td><td>On the right
|
|
</td></tr><tr><td><code title="">center</code>
|
|
</td><td>In the middle
|
|
</td></tr></tbody></table></div><div class="impl">
|
|
|
|
<h3 id="replaced-elements"><span class="secno">10.3 </span>Replaced elements</h3>
|
|
|
|
<h4 id="embedded-content-2"><span class="secno">10.3.1 </span>Embedded content</h4>
|
|
|
|
<p>The <code><a href="the-iframe-element.html#the-embed-element">embed</a></code>, <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>, and
|
|
<code><a href="the-iframe-element.html#the-video-element">video</a></code> elements are expected to be treated as replaced
|
|
elements.</p>
|
|
|
|
<p>A <code><a href="the-canvas-element.html#the-canvas-element">canvas</a></code> element that <a href="#represents">represents</a>
|
|
<a href="content-models.html#embedded-content">embedded content</a> is expected to be treated as a
|
|
replaced element. Other <code><a href="the-canvas-element.html#the-canvas-element">canvas</a></code> elements are expected to
|
|
be treated as ordinary elements in the rendering model.</p>
|
|
|
|
<p>An <code><a href="the-iframe-element.html#the-object-element">object</a></code> element that <a href="#represents">represents</a> an
|
|
image, plugin, or <a href="browsers.html#nested-browsing-context">nested browsing context</a> is expected
|
|
to be treated as a replaced element. Other <code><a href="the-iframe-element.html#the-object-element">object</a></code>
|
|
elements are expected to be treated as ordinary elements in the
|
|
rendering model.</p>
|
|
|
|
<p>An <code><a href="obsolete.html#the-applet-element">applet</a></code> element that <a href="#represents">represents</a> a
|
|
<a href="infrastructure.html#plugin">plugin</a> is expected to be treated as a replaced
|
|
element. Other <code><a href="obsolete.html#the-applet-element">applet</a></code> elements are expected to be
|
|
treated as ordinary elements in the rendering model.</p>
|
|
|
|
<p>The <code><a href="the-iframe-element.html#the-audio-element">audio</a></code> element, when it is <a href="the-iframe-element.html#expose-a-user-interface-to-the-user" title="expose a
|
|
user interface to the user">exposing a user interface</a>, 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 <code><a href="the-iframe-element.html#the-audio-element">audio</a></code> element is not <a href="the-iframe-element.html#expose-a-user-interface-to-the-user" title="expose a user interface to the user">exposing a user
|
|
interface</a>, the user agent is expected to hide it,
|
|
irrespective of CSS rules.</p>
|
|
|
|
<p>Whether a <code><a href="the-iframe-element.html#the-video-element">video</a></code> element is <a href="the-iframe-element.html#expose-a-user-interface-to-the-user" title="expose a
|
|
user interface to the user">exposing a user interface</a> is not
|
|
expected to affect the size of the rendering; controls are expected
|
|
to be overlaid with the page content without causing any layout
|
|
changes, and are expected to disappear when the user does not need
|
|
them.</p>
|
|
|
|
<p>When a <code><a href="the-iframe-element.html#the-video-element">video</a></code> 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 <code><a href="the-iframe-element.html#the-video-element">video</a></code> element itself, and is expected to be
|
|
centered in the <code><a href="the-iframe-element.html#the-video-element">video</a></code> element.</p>
|
|
|
|
<p>Any subtitles or captions are expected to be overlayed directly
|
|
on top of their <code><a href="the-iframe-element.html#the-video-element">video</a></code> element, as defined by the
|
|
relevant rendering rules; for <span>WebVTT</span>, those are the
|
|
<a href="#webvtt-cue-text-rendering-rules">WebVTT cue text rendering rules</a> defined below.</p>
|
|
|
|
<p>When the user agent starts <a href="the-iframe-element.html#expose-a-user-interface-to-the-user" title="expose a user interface
|
|
to the user">exposing a user interface</a> for a
|
|
<code><a href="the-iframe-element.html#the-video-element">video</a></code> element, the user agent should run the <a href="the-iframe-element.html#rules-for-updating-the-text-track-rendering">rules
|
|
for updating the text track rendering</a> of each of the <a href="the-iframe-element.html#text-track" title="text track">text tracks</a> in the <code><a href="the-iframe-element.html#the-video-element">video</a></code>
|
|
element's <a href="the-iframe-element.html#list-of-text-tracks">list of text tracks</a> that are <a href="the-iframe-element.html#text-track-showing" title="text track showing">showing</a> or <a href="the-iframe-element.html#text-track-showing-by-default" title="text
|
|
track showing by default">showing by default</a> (e.g., for <a href="the-iframe-element.html#text-track" title="text track">text tracks</a> based on
|
|
<span>WebVTT</span>, the <a href="#rules-for-updating-the-display-of-webvtt-text-tracks">rules for updating the display of
|
|
WebVTT text tracks</a>).</p>
|
|
|
|
<p class="note">Resizing <code><a href="the-iframe-element.html#the-video-element">video</a></code> and <code><a href="the-canvas-element.html#the-canvas-element">canvas</a></code>
|
|
elements does not interrupt video playback or clear the canvas.</p>
|
|
|
|
<hr><p>The following CSS rules are expected to apply:</p>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
iframe:not([seamless]) { border: 2px inset; }
|
|
<span id="video-object-fit">video { object-fit: contain; }</span></pre>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="timed-text-tracks-0"><span class="secno">10.3.2 </span>Timed text tracks</h4>
|
|
|
|
<p class="note">This section is intended to be moved to its own CSS
|
|
module once an editor is found to run with it.</p>
|
|
|
|
|
|
|
|
<h5 id="webvtt-cue-text-rendering-rules"><span class="secno">10.3.2.1 </span><dfn>WebVTT cue text rendering rules</dfn></h5>
|
|
|
|
<p>The <dfn id="rules-for-updating-the-display-of-webvtt-text-tracks">rules for updating the display of WebVTT text
|
|
tracks</dfn> render the <a href="the-iframe-element.html#text-track" title="text track">text
|
|
tracks</a> of a <a href="the-iframe-element.html#media-element">media element</a> (specifically, a
|
|
<code><a href="the-iframe-element.html#the-video-element">video</a></code> element), or of another playback mechanism, by
|
|
applying the steps below. All the <a href="the-iframe-element.html#text-track" title="text track">text
|
|
tracks</a> that use these rules for a given <a href="the-iframe-element.html#media-element">media
|
|
element</a>, or other playback mechanism, are rendered together,
|
|
to avoid overlapping subtitles from multiple tracks.</p>
|
|
|
|
<p>The output of the steps below is a set of CSS boxes that covers
|
|
the rendering area of the <a href="the-iframe-element.html#media-element">media element</a> or other
|
|
playback mechanism, which user agents are expected to render in a
|
|
manner suiting the user.</p>
|
|
|
|
<p>The rules are as follows:</p>
|
|
|
|
<ol><li><p>If the <a href="the-iframe-element.html#media-element">media element</a> is an <code><a href="the-iframe-element.html#the-audio-element">audio</a></code>
|
|
element, or is another playback mechanism with no rendering area,
|
|
abort these steps. There is nothing to render.</p></li>
|
|
|
|
<li><p>Let <var title="">video</var> be the <a href="the-iframe-element.html#media-element">media
|
|
element</a> or other playback mechanism.</p></li>
|
|
|
|
<li><p>Let <var title="">output</var> be an empty list of
|
|
absolutely positioned CSS block boxes.</p></li>
|
|
|
|
<li><p>If the user agent is <a href="the-iframe-element.html#expose-a-user-interface-to-the-user" title="expose a user interface to
|
|
the user">exposing a user interface</a> for <var title="">video</var>, add to <var title="">output</var> one or more
|
|
completely transparent positioned CSS block boxes that cover the
|
|
same region as the user interface.</p>
|
|
|
|
</li><li><p>If the last time these rules were run, the user agent was
|
|
not <a href="the-iframe-element.html#expose-a-user-interface-to-the-user" title="expose a user interface to the user">exposing a
|
|
user interface</a> for <var title="">video</var>, but now it is,
|
|
let <var title="">reset</var> be true. Otherwise, let <var title="">reset</var> be false.</p>
|
|
|
|
</li><li><p>Let <var title="">tracks</var> be the subset of <var title="">video</var>'s <a href="the-iframe-element.html#list-of-text-tracks">list of text tracks</a> that have
|
|
as their <a href="the-iframe-element.html#rules-for-updating-the-text-track-rendering">rules for updating the text track rendering</a>
|
|
these <a href="#rules-for-updating-the-display-of-webvtt-text-tracks">rules for updating the display of WebVTT text
|
|
tracks</a>, and whose <a href="the-iframe-element.html#text-track-mode">text track mode</a> is <a href="the-iframe-element.html#text-track-showing" title="text track showing">showing</a> or <a href="the-iframe-element.html#text-track-showing-by-default" title="text
|
|
track showing by default">showing by default</a>.</p></li>
|
|
|
|
<li><p>Let <var title="">cues</var> be an empty list of <a href="the-iframe-element.html#text-track-cue" title="text track cue">text track cues</a>.</p></li>
|
|
|
|
<li><p>For each track <var title="">track</var> in <var title="">tracks</var>, append to <var title="">cues</var> all the
|
|
<a href="the-iframe-element.html#text-track-cue" title="text track cue">cues</a> from <var title="">track</var>'s <a href="the-iframe-element.html#text-track-list-of-cues" title="text track list of cues">list
|
|
of cues</a> that have their <a href="the-iframe-element.html#text-track-cue-active-flag">text track cue active
|
|
flag</a> set.</p></li>
|
|
|
|
<li><p>If <var title="">reset</var> is false, then, for each
|
|
<a href="the-iframe-element.html#text-track-cue">text track cue</a> <var title="">cue</var> in <var title="">cues</var>: if <var title="">cue</var>'s <a href="the-iframe-element.html#text-track-cue-display-state">text track
|
|
cue display state</a> has a set of CSS boxes, then add those
|
|
boxes to <var title="">output</var>, and remove <var title="">cue</var> from <var title="">cues</var>.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>For each <a href="the-iframe-element.html#text-track-cue">text track cue</a> <var title="">cue</var>
|
|
in <var title="">cues</var> that has not yet had corresponding CSS
|
|
boxes added to <var title="">output</var>, in <a href="the-iframe-element.html#text-track-cue-order">text track
|
|
cue order</a>, run the following substeps:</p>
|
|
|
|
<ol><li><p>Let <var title="">nodes</var> be the <span>list of WebVTT
|
|
Node Objects</span> obtained by applying the <span>WebVTT cue
|
|
text parsing rules</span> to the <var title="">cue</var>'s
|
|
<a href="the-iframe-element.html#text-track-cue-text">text track cue text</a>.</p>
|
|
|
|
</li><li>
|
|
|
|
<p>Apply the Unicode Bidirectional Algorithm's Paragraph Level
|
|
steps to <var title="">nodes</var> using the following
|
|
constraints, to determine the <i>paragraph embedding level</i>
|
|
of the cue: <a href="references.html#refsBIDI">[BIDI]</a></p>
|
|
|
|
<ul><li><var title="">nodes</var> represents a single paragraph.</li>
|
|
|
|
<li>The paragraph's text consists of the concatenation of the
|
|
values of each <span>WebVTT Text Object</span> in <var title="">nodes</var>, in a pre-order, depth-first traversal,
|
|
excluding <span title="WebVTT Ruby Text Object">WebVTT Ruby
|
|
Text Objects</span> and their descendants.</li>
|
|
|
|
</ul></li>
|
|
|
|
<li>
|
|
|
|
<p>If the <i>paragraph embedding level</i> determined in the
|
|
previous step is even (the <i>paragraph direction</i> is
|
|
left-to-right), let <var title="">direction</var> be 'ltr',
|
|
otherwise, let it be 'rtl'.</p>
|
|
|
|
</li>
|
|
|
|
<li><p>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is
|
|
<a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing
|
|
direction">horizontal</a>, then let <var title="">block-flow</var> be 'tb'. Otherwise, if the <a href="the-iframe-element.html#text-track-cue-writing-direction">text
|
|
track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-left-writing-direction" title="text track
|
|
cue vertical growing left writing direction">vertical growing
|
|
left</a>, then let <var title="">block-flow</var> be
|
|
'lr'. Otherwise, the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing
|
|
direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-right-writing-direction" title="text track cue vertical growing
|
|
right writing direction">vertical growing right</a>; let <var title="">block-flow</var> be 'rl'.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>Determine the value of <var title="">maximum size</var> for
|
|
<var title="">cue</var> as per the appropriate rules from the
|
|
following list:</p>
|
|
|
|
<dl class="switch"><dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>,
|
|
and <var title="">direction</var> is 'ltr'</dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>,
|
|
and <var title="">direction</var> is 'rtl'</dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-left-writing-direction" title="text track cue vertical growing left writing direction">vertical growing left</a>,
|
|
and the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span></dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-right-writing-direction" title="text track cue vertical growing right writing direction">vertical growing right</a>,
|
|
and the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span></dt>
|
|
<dd>
|
|
<p>Let <var title="">maximum size</var> be the <span>text track cue text position</span> subtracted from 100.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>,
|
|
and <var title="">direction</var> is 'ltr'</dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>,
|
|
and <var title="">direction</var> is 'rtl'</dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-left-writing-direction" title="text track cue vertical growing left writing direction">vertical growing left</a>,
|
|
and the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span></dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-right-writing-direction" title="text track cue vertical growing right writing direction">vertical growing right</a>,
|
|
and the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span></dt>
|
|
<dd>
|
|
<p>Let <var title="">maximum size</var> be the <span>text track cue text position</span>.</p>
|
|
</dd>
|
|
|
|
<dt>If the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span>,
|
|
the <span>text track cue text position</span> is less than or equal to 50</dt>
|
|
<dd>
|
|
<p>Let <var title="">maximum size</var> be the <span>text track cue text position</span> multiplied by two.</p>
|
|
</dd>
|
|
|
|
<dt>If the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span>,
|
|
the <span>text track cue text position</span> is greater than 50</dt>
|
|
<dd>
|
|
<p>Let <var title="">maximum size</var> be the result of subtracting <span>text track cue text position</span> from 100 and then multiplying the result by two.</p>
|
|
</dd>
|
|
|
|
</dl></li>
|
|
|
|
<li><p>If the <a href="the-iframe-element.html#text-track-cue-size">text track cue size</a> is less than <var title="">maximum size</var>, then let <var title="">size</var> be
|
|
<a href="the-iframe-element.html#text-track-cue-size">text track cue size</a>. Otherwise, let <var title="">size</var> be <var title="">maximum size</var>.</p></li>
|
|
|
|
<li><p>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is
|
|
<a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing
|
|
direction">horizontal</a>, then let <var title="">width</var>
|
|
be '<var title="">size</var> vw' and <var title="">height</var> be 'auto'. Otherwise, let <var title="">width</var> be 'auto' and <var title="">height</var> be
|
|
'<var title="">size</var> vh'. (These are CSS values used
|
|
by the next section to set CSS properties for the rendering; 'vw'
|
|
and 'vh' are CSS units.) <a href="references.html#refsCSSVALUES">[CSSVALUES]</a></p></li>
|
|
|
|
<li>
|
|
|
|
<p>Determine the value of <var title="">x-position</var> or <var title="">y-position</var> for <var title="">cue</var> as per the
|
|
appropriate rules from the following list:</p>
|
|
|
|
<dl class="switch"><dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>,
|
|
and <var title="">direction</var> is 'ltr'</dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>,
|
|
and <var title="">direction</var> is 'rtl'</dt>
|
|
<dd>
|
|
<p>Let <var title="">x-position</var> be the <span>text track cue text position</span>.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>,
|
|
and <var title="">direction</var> is 'ltr'</dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>,
|
|
and <var title="">direction</var> is 'rtl'</dt>
|
|
<dd>
|
|
<p>Let <var title="">x-position</var> be the <span>text track cue text position</span> subtracted from 100.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-left-writing-direction" title="text track cue vertical growing left writing direction">vertical growing left</a>,
|
|
and the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span></dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-right-writing-direction" title="text track cue vertical growing right writing direction">vertical growing right</a>,
|
|
and the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span></dt>
|
|
<dd>
|
|
<p>Let <var title="">y-position</var> be the <span>text track cue text position</span>.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-left-writing-direction" title="text track cue vertical growing left writing direction">vertical growing left</a>,
|
|
and the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span></dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-right-writing-direction" title="text track cue vertical growing right writing direction">vertical growing right</a>,
|
|
and the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span></dt>
|
|
<dd>
|
|
<p>Let <var title="">y-position</var> be the <span>text track cue text position</span> subtracted from 100.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span>,
|
|
and <var title="">direction</var> is 'ltr'</dt>
|
|
<dd>
|
|
<p>Let <var title="">x-position</var> be the <span>text track cue text position</span> minus half of <var title="">size</var>.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span>,
|
|
and <var title="">direction</var> is 'rtl'</dt>
|
|
<dd>
|
|
<p>Let <var title="">x-position-reverse</var> be the <span>text track cue text position</span> minus half of <var title="">size</var>.</p>
|
|
<p>Let <var title="">x-position</var> be <var title="">x-position-reverse</var> subtracted from 100.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-left-writing-direction" title="text track cue vertical growing left writing direction">vertical growing left</a>,
|
|
and the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span></dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-right-writing-direction" title="text track cue vertical growing right writing direction">vertical growing right</a>,
|
|
and the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span></dt>
|
|
<dd>
|
|
<p>Let <var title="">y-position</var> be the <span>text track cue text position</span> minus half of <var title="">size</var>.</p>
|
|
</dd>
|
|
|
|
</dl></li>
|
|
|
|
<li>
|
|
|
|
<p>Determine the value of whichever of <var title="">x-position</var> or <var title="">y-position</var> is
|
|
not yet calculated for <var title="">cue</var> as per the
|
|
appropriate rules from the following list:</p>
|
|
|
|
<dl class="switch"><dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
and the <span>text track cue snap-to-lines flag</span> is set</dt>
|
|
<dd>
|
|
<p>Let <var title="">y-position</var> be zero.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
and the <span>text track cue snap-to-lines flag</span> is not set</dt>
|
|
<dd>
|
|
<p>Let <var title="">y-position</var> be the <span>text track cue line position</span>.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-left-writing-direction" title="text track cue vertical growing left writing direction">vertical growing left</a>,
|
|
and the <span>text track cue snap-to-lines flag</span> is set</dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-right-writing-direction" title="text track cue vertical growing right writing direction">vertical growing right</a>,
|
|
and the <span>text track cue snap-to-lines flag</span> is set</dt>
|
|
<dd>
|
|
<p>Let <var title="">x-position</var> be zero.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-left-writing-direction" title="text track cue vertical growing left writing direction">vertical growing left</a>,
|
|
and the <span>text track cue snap-to-lines flag</span> is not set</dt>
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-right-writing-direction" title="text track cue vertical growing right writing direction">vertical growing right</a>,
|
|
and the <span>text track cue snap-to-lines flag</span> is not set</dt>
|
|
<dd>
|
|
<p>Let <var title="">x-position</var> be the <span>text track cue line position</span>.</p>
|
|
</dd>
|
|
|
|
</dl></li>
|
|
|
|
<li><p>Let <var title="">left</var> be '<var title="">x-position</var> vw' and <var title="">top</var>
|
|
be '<var title="">y-position</var> vh'. (These again are
|
|
CSS values used by the next section to set CSS properties for the
|
|
rendering; 'vw' and 'vh' are CSS units.) <a href="references.html#refsCSSVALUES">[CSSVALUES]</a></p></li>
|
|
|
|
<li>
|
|
|
|
<p>Apply the terms of the CSS specifications to <var title="">nodes</var> within the following constraints, thus
|
|
obtaining a set of CSS boxes positioned relative to an initial
|
|
containing block: <a href="references.html#refsCSS">[CSS]</a></p>
|
|
|
|
<ul><li><p>The <i>document tree</i> is the tree of <span title="WebVTT Node Object">WebVTT Node Objects</span> rooted at
|
|
<var title="">nodes</var>.</p></li>
|
|
|
|
<li><p>For the purposes of processing by the CSS specification,
|
|
<span title="WebVTT Internal Node Object">WebVTT Internal Node
|
|
Objects</span> are equivalent to elements with the same
|
|
contents.</p></li>
|
|
|
|
<li>For the purposes of processing by the CSS
|
|
specification, <span title="WebVTT Text Object">WebVTT Text
|
|
Objects</span> are equivalent to text nodes.</li>
|
|
|
|
<li>No style sheets are associated with <var title="">nodes</var>. (The nodes are subsequently restyled
|
|
using style sheets after their boxes are generated, as
|
|
described below.)</li>
|
|
|
|
<li>The children of the <var title="">nodes</var> must be
|
|
wrapped in an anonymous box whose 'display' property has the
|
|
value 'inline'. This is the <dfn id="webvtt-cue-background-box">WebVTT cue background
|
|
box</dfn>.</li>
|
|
|
|
<li>Runs of children of <span title="WebVTT Ruby Object">WebVTT
|
|
Ruby Objects</span> that are not <span title="WebVTT Ruby Text
|
|
Object">WebVTT Ruby Text Objects</span> must be wrapped in
|
|
anonymous boxes whose 'display' property has the value
|
|
'ruby-base'. <a href="references.html#refsCSSRUBY">[CSSRUBY]</a></li>
|
|
|
|
<li>Properties on <span title="WebVTT Node Object">WebVTT Node
|
|
Objects</span> have their values set as defined in the next
|
|
section. (That section uses some of the variables whose values
|
|
were calculated earlier in this algorithm.)</li>
|
|
|
|
<li>Text runs must be wrapped at the edge of their containing
|
|
blocks, regardless of the value of the 'white-space' property,
|
|
even if doing so requires splitting a word where there is no
|
|
line breaking opportunity.</li>
|
|
|
|
<li>The viewport (and initial containing block) is
|
|
<var title="">video</var>'s rendering area.</li>
|
|
|
|
</ul><p>Let <var title="">boxes</var> be the boxes generated as
|
|
descendants of the initial containing block, along with their
|
|
positions.</p>
|
|
|
|
</li>
|
|
|
|
<li><p>If there are no line boxes in <var title="">boxes</var>,
|
|
skip the remainder of these substeps for <var title="">cue</var>. The cue is ignored.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>Adjust the positions of <var title="">boxes</var> according
|
|
to the appropriate steps from the following list:</p>
|
|
|
|
<dl class="switch"><dt>If <var title="">cue</var>'s <span>text track cue snap-to-lines flag</span> is set</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Many of the steps in this algorithm vary according to the
|
|
<a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a>. Steps labeled
|
|
"<strong>Horizontal</strong>" must be followed only when the
|
|
<a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing
|
|
direction">horizontal</a>, steps labeled
|
|
"<strong>Vertical</strong>" must be followed when the
|
|
<a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is either <a href="the-iframe-element.html#text-track-cue-vertical-growing-left-writing-direction" title="text track cue vertical growing left writing
|
|
direction">vertical growing left</a> or <a href="the-iframe-element.html#text-track-cue-vertical-growing-right-writing-direction" title="text
|
|
track cue vertical growing right writing direction">vertical
|
|
growing right</a>, steps labeled "<strong>Vertical Growing
|
|
Left</strong>" must be followed only when the <a href="the-iframe-element.html#text-track-cue-writing-direction">text
|
|
track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-left-writing-direction" title="text track
|
|
cue vertical growing left writing direction">vertical growing
|
|
left</a>, and steps labeled "<strong>Vertical Growing
|
|
Right</strong>" must be followed only when the <a href="the-iframe-element.html#text-track-cue-writing-direction">text
|
|
track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-right-writing-direction" title="text track
|
|
cue vertical growing right writing direction">vertical growing
|
|
right</a>.</p>
|
|
|
|
<ol><li>
|
|
|
|
<p><strong>Horizontal</strong>: Let <var title="">step</var>
|
|
be the height of the first line box in <var title="">boxes</var>.</p>
|
|
|
|
<p><strong>Vertical</strong>: Let <var title="">step</var>
|
|
be the width of the first line box in <var title="">boxes</var>.</p>
|
|
|
|
</li>
|
|
|
|
<li><p>If <var title="">step</var> is zero, then jump to the
|
|
step labeled <i>done positioning</i> below.</p></li>
|
|
|
|
<li><p>Let <var title="">line position</var> be the
|
|
<span>text track cue line position</span>.</p></li>
|
|
|
|
<li><p><strong>Vertical Growing Left</strong>: Add one to
|
|
<var title="">line position</var> then negate it.</p></li>
|
|
|
|
<li><p>Let <var title="">position</var> be the result of
|
|
multiplying <var title="">step</var> and <var title="">line
|
|
position</var>.</p></li>
|
|
|
|
<li><p><strong>Vertical Growing Left</strong>: Decrease <var title="">position</var> by the width of the bounding box of
|
|
the boxes in <var title="">boxes</var>, then increase <var title="">position</var> by <var title="">step</var>.</p></li>
|
|
|
|
<li>
|
|
|
|
<p><strong>Horizontal</strong>: If <var title="">line
|
|
position</var> is less than zero then increase <var title="">position</var> by the height of the <var title="">video</var>'s rendering area, and negate <var title="">step</var> (so its value is now minus the height of
|
|
the first line box in <var title="">boxes</var>).</p>
|
|
|
|
<p><strong>Vertical</strong>: If <var title="">line
|
|
position</var> is less than zero then increase <var title="">position</var> by the width of the <var title="">video</var>'s rendering area, and negate <var title="">step</var>.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p><strong>Horizontal</strong>: Move all the boxes in <var title="">boxes</var> down by the distance given by <var title="">position</var>.</p>
|
|
|
|
<p><strong>Vertical</strong>: Move all the boxes in <var title="">boxes</var> right by the distance given by <var title="">position</var>.</p>
|
|
|
|
</li>
|
|
|
|
<li><p><i>Default</i>: Remember the position of all the boxes in
|
|
<var title="">boxes</var> as their <var title="">default
|
|
position</var>.</p></li>
|
|
|
|
<li><p>Let <var title="">switched</var> be false.</p></li>
|
|
|
|
<li><p><i>Step loop</i>: If none of the boxes in <var title="">boxes</var> would overlap any of the boxes in <var title="">output</var>, and all the boxes in <var title="">output</var> are within the <var title="">video</var>'s rendering area, then jump to the step
|
|
labeled <i>done positioning</i> below.</p></li>
|
|
|
|
<li>
|
|
|
|
<p><strong>Horizontal</strong>: If <var title="">step</var>
|
|
is negative and the top of the first line box in <var title="">boxes</var> is now above the top of the <var title="">video</var>'s rendering area, or if <var title="">step</var> is positive and the bottom of the first
|
|
line box in <var title="">boxes</var> is now below the
|
|
bottom of the <var title="">video</var>'s rendering area,
|
|
jump to the step labeled <i>switch direction</i>.</p>
|
|
|
|
<p><strong>Vertical</strong>: If <var title="">step</var> is
|
|
negative and the left edge of the first line box in <var title="">boxes</var> is now to the left of the left edge of
|
|
the <var title="">video</var>'s rendering area, or if <var title="">step</var> is positive and the right edge of the
|
|
first line box in <var title="">boxes</var> is now to the
|
|
right of the right edge of the <var title="">video</var>'s
|
|
rendering area, jump to the step labeled <i>switch
|
|
direction</i>.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p><strong>Horizontal</strong>: Move all the boxes in <var title="">boxes</var> down by the distance given by <var title="">step</var>. (If <var title="">step</var> is
|
|
negative, then this will actually result in an upwards
|
|
movement of the boxes in absolute terms.)</p>
|
|
|
|
<p><strong>Vertical</strong>: Move all the boxes in <var title="">boxes</var> right by the distance given by <var title="">step</var>. (If <var title="">step</var> is
|
|
negative, then this will actually result in a leftwards
|
|
movement of the boxes in absolute terms.)</p>
|
|
|
|
</li>
|
|
|
|
<li><p>Jump back to the step labeled <i>step
|
|
loop</i>.</p></li>
|
|
|
|
<li><p><i>Switch direction</i>: Move all the boxes in <var title="">boxes</var> back to their <var title="">default
|
|
position</var> as determined in the step above labeled
|
|
<i>default</i>.</p></li>
|
|
|
|
<li><p>If <var title="">switched</var> is true, jump to the step
|
|
labeled <i>done positioning</i> below.</p></li>
|
|
|
|
<li><p>Negate <var title="">step</var>.</p></li>
|
|
|
|
<li><p>Set <var title="">switched</var> to true.</p></li>
|
|
|
|
<li><p>Jump back to the step labeled <i>step
|
|
loop</i>.</p></li>
|
|
|
|
</ol></dd>
|
|
|
|
<dt>If <var title="">cue</var>'s <span>text track cue snap-to-lines flag</span> is not set</dt>
|
|
<dd>
|
|
|
|
<ol><li>
|
|
|
|
<p>Set up <var title="">x</var> and <var title="">y</var> as
|
|
follows:</p>
|
|
|
|
<dl class="switch"><dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
and <var title="">direction</var> is 'ltr'</dt>
|
|
<dd>
|
|
<p>Let <var title="">x</var> be a percentage given by the
|
|
<span>text track cue text position</span>, and let <var title="">y</var> be a percentage given by the <span>text
|
|
track cue line position</span>.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</a>,
|
|
and <var title="">direction</var> is 'rtl'</dt>
|
|
<dd>
|
|
<p>Let <var title="">x</var> be a percentage given by the
|
|
<span>text track cue text position</span> subtracted from
|
|
100, and let <var title="">y</var> be a percentage given
|
|
by the <span>text track cue line position</span>.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-left-writing-direction" title="text track cue vertical growing left writing direction">vertical growing left</a></dt>
|
|
<dd>
|
|
<p>Let <var title="">x</var> be a percentage given by the
|
|
<span>text track cue line position</span> subtracted from
|
|
100, and let <var title="">y</var> be a percentage given
|
|
by the <span>text track cue text position</span>.</p>
|
|
</dd>
|
|
|
|
<dt>If the <a href="the-iframe-element.html#text-track-cue-writing-direction">text track cue writing direction</a> is <a href="the-iframe-element.html#text-track-cue-vertical-growing-right-writing-direction" title="text track cue vertical growing right writing direction">vertical growing right</a></dt>
|
|
<dd>
|
|
<p>Let <var title="">x</var> be a percentage given by the
|
|
<span>text track cue line position</span>, and let <var title="">y</var> be a percentage given by the <span>text
|
|
track cue text position</span>.</p>
|
|
</dd>
|
|
|
|
</dl></li>
|
|
|
|
<li><p>Position the boxes in <var title="">boxes</var> such
|
|
that the point <var title="">x</var>% along the width of the
|
|
bounding box of the boxes in <var title="">boxes</var> is
|
|
<var title="">x</var>% of the way across the width of the
|
|
<var title="">video</var>'s rendering area, and the point
|
|
<var title="">y</var>% along the height of the bounding box
|
|
of the boxes in <var title="">boxes</var> is <var title="">y</var>% of the way across the height of the <var title="">video</var>'s rendering area, while maintaining the
|
|
relative positions of the boxes in <var title="">boxes</var>
|
|
to each other.</p></li>
|
|
|
|
<li><p>If none of the boxes in <var title="">boxes</var>
|
|
would overlap any of the boxes in <var title="">output</var>,
|
|
and all the boxes in <var title="">output</var> are within
|
|
the <var title="">video</var>'s rendering area, then jump to
|
|
the step labeled <i>done positioning</i> below.</p></li>
|
|
|
|
<li><p>If there is a position to which the boxes in <var title="">boxes</var> can be moved while maintaining the
|
|
relative positions of the boxes in <var title="">boxes</var>
|
|
to each other such that none of the boxes in <var title="">boxes</var> would overlap any of the boxes in <var title="">output</var>, and all the boxes in <var title="">output</var> would be within the <var title="">video</var>'s rendering area, then move the boxes in
|
|
<var title="">boxes</var> to the closest such position to
|
|
their current position, and then jump to the step labeled
|
|
<i>done positioning</i> below. If there are multiple such
|
|
positions that are equidistant from their current position,
|
|
use the highest one amongst them; if there are several at
|
|
that height, then use the leftmost one amongst them.</p></li>
|
|
|
|
<li><p>Otherwise, jump to the step labeled <i>done
|
|
positioning</i> below. (The boxes will unfortunately
|
|
overlap.)</p></li>
|
|
|
|
</ol></dd>
|
|
|
|
</dl></li>
|
|
|
|
<li><p><i>Done positioning</i>: If there are any line boxes in
|
|
the (possibly now repositioned) <var title="">boxes</var> that do
|
|
not completely fit inside <var title="">video</var>'s rendering
|
|
area, remove those offending line boxes from <var title="">boxes</var>.</p></li>
|
|
|
|
<li><p>Let <var title="">cue</var>'s <a href="the-iframe-element.html#text-track-cue-display-state">text track cue
|
|
display state</a> have the CSS boxes in <var title="">boxes</var>.</p></li>
|
|
|
|
<li><p>Add the CSS boxes in <var title="">boxes</var> to <var title="">output</var>.</p></li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p>Return <var title="">output</var>.</p></li>
|
|
|
|
</ol><h5 id="applying-css-properties-to-webvtt-node-objects"><span class="secno">10.3.2.2 </span>Applying CSS properties to <span title="WebVTT Node Object">WebVTT Node Objects</span></h5>
|
|
|
|
<p>When following the <a href="#rules-for-updating-the-display-of-webvtt-text-tracks">rules for updating the display of WebVTT
|
|
text tracks</a>, user agents must set properties of <span title="WebVTT Node Object">WebVTT Node Objects</span> as defined in
|
|
this section. <a href="references.html#refsCSS">[CSS]</a></p>
|
|
|
|
<p>On the (root) <span>List of WebVTT Node Objects</span>, the
|
|
'position' property must be set to 'absolute', the 'direction'
|
|
property must be set to <var title="">direction</var>, the
|
|
'block-flow' property must be set to <var title="">block-flow</var>,
|
|
the 'top' property must be set to <var title="">top</var>, the
|
|
'left' property must be set to <var title="">left</var>, the 'width'
|
|
property must be set to <var title="">width</var>, and the 'height'
|
|
property must be set to <var title="">height</var>, where <var title="">direction</var>, <var title="">block-flow</var>, <var title="">top</var>, <var title="">left</var>, <var title="">width</var>, and <var title="">height</var> are the values
|
|
with those names determined by the <a href="#rules-for-updating-the-display-of-webvtt-text-tracks">rules for updating the
|
|
display of WebVTT text tracks</a> for the <a href="the-iframe-element.html#text-track-cue">text track
|
|
cue</a> from whose <a href="the-iframe-element.html#text-track-cue-text" title="text track cue text">text</a>
|
|
the <span>List of WebVTT Node Objects</span> was constructed.</p>
|
|
|
|
<p>The 'font' shorthand property on the (root) <span>List of WebVTT
|
|
Node Objects</span> must be set to '0.1vh sans-serif'. <a href="references.html#refsCSSRUBY">[CSSRUBY]</a> <a href="references.html#refsCSSVALUES">[CSSVALUES]</a></p>
|
|
|
|
<p>The 'color' property on the (root) <span>List of WebVTT Node
|
|
Objects</span> must be set to 'rgba(255,255,255,0)'. <a href="references.html#refsCSSCOLOR">[CSSCOLOR]</a></p>
|
|
|
|
<p>The 'background' shorthand property on the <a href="#webvtt-cue-background-box">WebVTT cue
|
|
background box</a> must be set to 'rgba(0,0,0,0.8)'. <a href="references.html#refsCSSCOLOR">[CSSCOLOR]</a></p>
|
|
|
|
<p>A text outline or stroke may also be set on the (root) <span>List
|
|
of WebVTT Node Objects</span>, if supported.</p>
|
|
<p>The 'font-style' property on <span title="WebVTT Italic
|
|
Object">WebVTT Italic Objects</span> must be set to 'italic'.</p>
|
|
|
|
<p>The 'font-weight' property on <span title="WebVTT Bold
|
|
Object">WebVTT Bold Objects</span> must be set to 'bold'.</p>
|
|
|
|
<p>The 'text-decoration' property on <span title="WebVTT Underline
|
|
Object">WebVTT Underline Objects</span> must be set to 'underline'.</p>
|
|
|
|
<p>The 'display' property on <span title="WebVTT Ruby Object">WebVTT
|
|
Ruby Objects</span> must be set to 'ruby'. <a href="references.html#refsCSSRUBY">[CSSRUBY]</a></p>
|
|
|
|
<p>The 'display' property on <span title="WebVTT Ruby Text
|
|
Object">WebVTT Ruby Text Objects</span> must be set to
|
|
'ruby-text'. <a href="references.html#refsCSSRUBY">[CSSRUBY]</a></p>
|
|
|
|
<p>If there are style sheets that apply to the <a href="the-iframe-element.html#media-element">media
|
|
element</a> or other playback mechanism, then they must be
|
|
interpreted as defined in the next section.</p>
|
|
|
|
<p>All other non-inherited properties must be set to their initial
|
|
values; inherited properties on the root <span>List of WebVTT Node
|
|
Objects</span> must inherit their values from the <a href="the-iframe-element.html#media-element">media
|
|
element</a> for which the <a href="the-iframe-element.html#text-track-cue">text track cue</a> is being
|
|
rendered, if any. If there is no <a href="the-iframe-element.html#media-element">media element</a> (i.e. if
|
|
the <a href="the-iframe-element.html#text-track">text track</a> is being rendered for another media
|
|
playback mechanism), then inherited properties on the root
|
|
<span>List of WebVTT Node Objects</span> must take their initial
|
|
values.</p>
|
|
|
|
|
|
<h5 id="css-extensions"><span class="secno">10.3.2.3 </span>CSS extensions</h5>
|
|
|
|
<p>When a user agent is rendering one or more <a href="the-iframe-element.html#text-track-cue" title="text
|
|
track cue">text track cues</a> according to the <a href="#webvtt-cue-text-rendering-rules">WebVTT cue
|
|
text rendering rules</a>, <span title="WebVTT Node Object">WebVTT
|
|
Node Objects</span> in the <span>list of WebVTT Node Objects</span>
|
|
used in the rendering can be matched by certain pseudo-selectors as
|
|
defined below. These selectors can begin or stop matching individual
|
|
<span title="WebVTT Node Object">WebVTT Node Objects</span> while a
|
|
<a href="the-iframe-element.html#text-track-cue" title="text track cue">cue</a> is being rendered, even in
|
|
between applications of the <a href="#webvtt-cue-text-rendering-rules">WebVTT cue text rendering
|
|
rules</a> (which are only run when the set of active cues
|
|
changes). User agents that support the pseudo-element described
|
|
below must dynamically update renderings accordingly.</p>
|
|
|
|
<p>Pseudo-elements apply to elements that are matched by
|
|
selectors. For the purpose of this section, that element is the
|
|
<i>matched element</i>. The pseudo-elements defined in the following
|
|
sections affect the styling of parts of <a href="the-iframe-element.html#text-track-cue" title="text track
|
|
cue">text track cues</a> that are being rendered for the
|
|
<i>matched element</i>.</p>
|
|
|
|
<p class="note">If the <i>matched element</i> is not a
|
|
<code><a href="the-iframe-element.html#the-video-element">video</a></code> element, the pseudo-elements defined below won't
|
|
have any effect according to this specification.</p>
|
|
|
|
<p>A CSS user agent that implements the <a href="the-iframe-element.html#text-track" title="text
|
|
track">text tracks</a> model must implement the '::cue' and
|
|
'::cue(<var title="">selector</var>)' pseudo-elements, and the
|
|
':past' and ':future' pseudo-classes.</p>
|
|
|
|
|
|
<h6 id="the-::cue-pseudo-element"><span class="secno">10.3.2.3.1 </span>The '::cue' pseudo-element</h6>
|
|
|
|
<p>The '<dfn id="pseudo-cue" title="pseudo-cue">::cue</dfn>' pseudo-element (with no
|
|
argument) matches any <span>List of WebVTT Node Objects</span>
|
|
constructed for the <i>matched element</i>, with the exception that
|
|
the properties corresponding to the 'background' shorthand must be
|
|
applied to the <a href="#webvtt-cue-background-box">WebVTT cue background box</a> rather than
|
|
the <span>List of WebVTT Node Objects</span>.</p>
|
|
|
|
<p>The following properties apply to the '::cue' pseudo-element with
|
|
no argument; other properties set on the pseudo-element must be
|
|
ignored:</p>
|
|
|
|
<ul class="brief"><li>'color'</li>
|
|
<li>'text-shadow'</li>
|
|
<li>'text-outline'</li>
|
|
<li>the properties corresponding to the 'background' shorthand</li>
|
|
<li>the properties corresponding to the 'outline' shorthand</li>
|
|
<li>the properties corresponding to the 'font' shorthand, including 'line-height'</li>
|
|
|
|
</ul><p>The '<dfn id="pseudo-cue-selector" title="pseudo-cue-selector">::cue(<var title="">selector</var>)</dfn>' pseudo-element with an argument must
|
|
have an argument that consists of a group of selectors. It matches
|
|
any <span>WebVTT Internal Node Object</span> constructed for the
|
|
<i>matched element</i> that also matches the given group of
|
|
selectors, with the nodes being treated as follows:</p>
|
|
|
|
<ul><li><p>The <i>document tree</i> against which the selectors are
|
|
matched is the tree of <span title="WebVTT Node Object">WebVTT Node
|
|
Objects</span> rooted at the <span>list of WebVTT Node
|
|
Objects</span> for the cue.</p></li>
|
|
|
|
<li><p><span title="WebVTT Internal Node Object">WebVTT Internal
|
|
Node Objects</span> are elements in the tree.</p></li>
|
|
|
|
<li><span title="WebVTT Leaf Node Object">WebVTT Leaf Node
|
|
Objects</span> cannot be matched.</li>
|
|
|
|
<li>
|
|
|
|
<p>For the purposes of element type selectors, the names of <span title="WebVTT Internal Node Object">WebVTT Internal Node
|
|
Objects</span> are as given by the following table, where objects
|
|
having the concrete class given in a cell in the first column have
|
|
the name given by the second column of the same row:</p>
|
|
|
|
<table><thead><tr><th>Concrete class
|
|
</th><th>Name
|
|
|
|
</th></tr></thead><tbody><tr><td><span title="WebVTT Class Object">WebVTT Class Objects</span>
|
|
</td><td><code title="">c</code>
|
|
|
|
</td></tr><tr><td><span title="WebVTT Italic Object">WebVTT Italic Objects</span>
|
|
</td><td><code title="">i</code>
|
|
|
|
</td></tr><tr><td><span title="WebVTT Bold Object">WebVTT Bold Objects</span>
|
|
</td><td><code title="">b</code>
|
|
|
|
</td></tr><tr><td><span title="WebVTT Underline Object">WebVTT Underline Objects</span>
|
|
</td><td><code title="">u</code>
|
|
|
|
</td></tr><tr><td><span title="WebVTT Ruby Object">WebVTT Ruby Objects</span>
|
|
</td><td><code title="">ruby</code>
|
|
|
|
</td></tr><tr><td><span title="WebVTT Ruby Text Object">WebVTT Ruby Text Objects</span>
|
|
</td><td><code title="">rt</code>
|
|
|
|
</td></tr><tr><td><span title="WebVTT Voice Object">WebVTT Voice Objects</span>
|
|
</td><td><code title="">v</code>
|
|
|
|
</td></tr><tr><td>Other elements (specifically, <span title="List of WebVTT Node Objects">Lists of WebVTT Node Objects</span>)
|
|
</td><td>No explicit name.
|
|
|
|
</td></tr></tbody></table></li>
|
|
|
|
<li><p>For the purposes of element type and universal selectors,
|
|
<span title="WebVTT Internal Node Object">WebVTT Internal Node
|
|
Objects</span> are considered as being in the namespace expressed
|
|
as the empty string.</p></li>
|
|
|
|
<li><p>For the purposes of attribute selector matching, <span title="WebVTT Internal Node Object">WebVTT Internal Node
|
|
Objects</span> have no attributes, except for <span title="WebVTT Voice Object">WebVTT Voice Objects</span>, which
|
|
have a single attribute named "<code title="">voice</code>"
|
|
whose value is the value of the <span>WebVTT Voice
|
|
Object</span>.</p></li>
|
|
|
|
<li><p>For the purposes of class selector matching, <span title="WebVTT Internal Node Object">WebVTT Internal Node
|
|
Objects</span> have the classes described as the <span>WebVTT
|
|
Node Object's applicable classes</span>.</p></li>
|
|
</ul><p>The following properties apply to the '::cue()' pseudo-element
|
|
with an argument:</p>
|
|
|
|
<ul class="brief"><li>'color'</li>
|
|
<li>'text-shadow'</li>
|
|
<li>'text-outline'</li>
|
|
<li>the properties corresponding to the 'background' shorthand</li>
|
|
<li>the properties corresponding to the 'outline' shorthand</li>
|
|
<li>properties relating to the transition and animation features</li>
|
|
|
|
|
|
</ul><p>The following properties apply to the '::cue()' pseudo-element
|
|
with an argument when the selector does not contain the ':past' and
|
|
':future' pseudo-classes:</p>
|
|
|
|
<ul class="brief"><li>the properties corresponding to the 'font' shorthand, including 'line-height'</li>
|
|
|
|
</ul><p>Properties that do not apply must be ignored.</p>
|
|
|
|
<p>As a special exception, the properties corresponding to the
|
|
'background' shorthand, when they would have been applied to the
|
|
<span>List of WebVTT Node Objects</span>, must instead be applied to
|
|
the <a href="#webvtt-cue-background-box">WebVTT cue background box</a>.</p>
|
|
|
|
|
|
<h6 id="the-:past-and-:future-pseudo-classes"><span class="secno">10.3.2.3.2 </span>The ':past' and ':future' pseudo-classes</h6>
|
|
|
|
<p>The <dfn id="past-pseudo-class" title="past-pseudo-class">':past'</dfn> and <dfn id="future-pseudo-class" title="future-pseudo-class">':future'</dfn> pseudo-classes only
|
|
match <span title="WebVTT Node Object">WebVTT Node Objects</span>.</p>
|
|
|
|
<p>The ':past' pseudo-class only matches <span title="WebVTT Node
|
|
Object">WebVTT Node Objects</span> that are <i><a href="#in-the-past">in the past</a></i>.</p>
|
|
|
|
<p>A <span>WebVTT Node Object</span> <var title="">c</var> is
|
|
<dfn id="in-the-past">in the past</dfn> if, in a pre-order, depth-first traversal of
|
|
the <a href="the-iframe-element.html#text-track-cue">text track cue</a>'s <span>List of WebVTT Node
|
|
Objects</span>, there exists a <span>WebVTT Timestamp Object</span>
|
|
whose value is less than the <a href="the-iframe-element.html#current-playback-position">current playback position</a>
|
|
of the <a href="the-iframe-element.html#media-element">media element</a> that is the <i>matched
|
|
element</i>, entirely after the <span>WebVTT Node Object</span> <var title="">c</var>.</p>
|
|
|
|
<p>The ':future' pseudo-class only matches <span title="WebVTT Node
|
|
Object">WebVTT Node Objects</span> that are <i><a href="#in-the-future">in the future</a></i>.</p>
|
|
|
|
<p>A <span>WebVTT Node Object</span> <var title="">c</var> is
|
|
<dfn id="in-the-future">in the future</dfn> if, in a pre-order, depth-first traversal
|
|
of the <a href="the-iframe-element.html#text-track-cue">text track cue</a>'s <span>List of WebVTT Node
|
|
Objects</span>, there exists a <span>WebVTT Timestamp Object</span>
|
|
whose value is greater than the <a href="the-iframe-element.html#current-playback-position">current playback
|
|
position</a> of the <a href="the-iframe-element.html#media-element">media element</a> that is the
|
|
<i>matched element</i>, entirely before the <span>WebVTT Node
|
|
Object</span> <var title="">c</var>.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="images"><span class="secno">10.3.3 </span>Images</h4>
|
|
|
|
<p>When an <code><a href="embedded-content-1.html#the-img-element">img</a></code> element or an <code><a href="the-input-element.html#the-input-element">input</a></code> element
|
|
when its <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in
|
|
the <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a> state
|
|
<a href="#represents">represents</a> an image, it is expected to be treated as a
|
|
replaced element.</p>
|
|
|
|
<p>When an <code><a href="embedded-content-1.html#the-img-element">img</a></code> element or an <code><a href="the-input-element.html#the-input-element">input</a></code> element
|
|
when its <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in
|
|
the <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a> state
|
|
does not <a href="#represents" title="represents">represent</a> an image, but the
|
|
element already has intrinsic dimensions (e.g. from the
|
|
<a href="the-map-element.html#dimension-attributes">dimension attributes</a> or CSS rules), and either the user
|
|
agent has reason to believe that the image will become <i title="img-available">available</i>
|
|
and be rendered in due course or the <code><a href="infrastructure.html#document">Document</a></code> is in
|
|
<a href="dom.html#quirks-mode">quirks mode</a>, the element is expected to be treated as a
|
|
replaced element whose content is the text that the element
|
|
represents, if any, optionally alongside an icon indicating that the
|
|
image is being obtained. For <code><a href="the-input-element.html#the-input-element">input</a></code> elements, the text
|
|
is expected to appear button-like to indicate that the element is a
|
|
<a href="forms.html#concept-button" title="concept-button">button</a>.</p>
|
|
|
|
<p>When an <code><a href="embedded-content-1.html#the-img-element">img</a></code> element <a href="#represents">represents</a> some
|
|
text and the user agent does not expect this to change, the element
|
|
is expected to be treated as an inline element whose content is the
|
|
text, optionally with an icon indicating that an image is
|
|
missing.</p>
|
|
|
|
<p>When an <code><a href="embedded-content-1.html#the-img-element">img</a></code> element <a href="#represents">represents</a> nothing
|
|
and the user agent does not expect this to change, the element is
|
|
expected to not be rendered at all.</p>
|
|
|
|
<p>When an <code><a href="embedded-content-1.html#the-img-element">img</a></code> element might be a key part of the
|
|
content, but neither the image nor any kind of alternative text is
|
|
available, and the user agent does not expect this to change, the
|
|
element is expected to be treated as an inline element whose content
|
|
is an icon indicating that an image is missing.</p>
|
|
<p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a> state does not
|
|
<a href="#represents" title="represents">represent</a> an image and the user
|
|
agent does not expect this to change, the element is expected to be
|
|
treated as a replaced element consisting of a button whose content
|
|
is the element's alternative text. The intrinsic dimensions of the
|
|
button are expected to be about one line in height and whatever
|
|
width is necessary to render the text on one line.</p>
|
|
|
|
<p>The icons mentioned above are expected to be relatively small so
|
|
as not to disrupt most text but be easily clickable. In a visual
|
|
environment, for instance, icons could be 16 pixels by 16 pixels
|
|
square, or 1em by 1em if the images are scalable. In an audio
|
|
environment, the icon could be a short bleep. The icons are intended
|
|
to indicate to the user that they can be used to get to whatever
|
|
options the UA provides for images, and, where appropriate, are
|
|
expected to provide access to the context menu that would have come
|
|
up if the user interacted with the actual image.</p>
|
|
|
|
<hr><p>All animated images with the same <a href="urls.html#absolute-url">absolute URL</a> and
|
|
the same image data are expected to be rendered synchronized to the
|
|
same timeline as a group, with the timeline starting at the time of
|
|
the most recent addition to the group.</p>
|
|
|
|
<p class="note">In other words, the animation loop of an animated
|
|
image is restarted each time another image with the same
|
|
<a href="urls.html#absolute-url">absolute URL</a> and image data begins to animate, e.g.
|
|
after being inserted into the document.</p>
|
|
|
|
<hr><p>The following CSS rules are expected to apply when the
|
|
<code><a href="infrastructure.html#document">Document</a></code> is in <a href="dom.html#quirks-mode">quirks mode</a>:</p>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
img[align=left] { margin-right: 3px; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
img[align=right] { margin-left: 3px; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */</pre>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="attributes-for-embedded-content-and-images"><span class="secno">10.3.4 </span>Attributes for embedded content and images</h4>
|
|
|
|
<p>The following CSS rules are expected to apply as
|
|
<a href="#presentational-hints">presentational hints</a>:</p>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
iframe[frameborder=0], iframe[frameborder=no] { border: none; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
|
|
applet[align=left], embed[align=left], iframe[align=left],
|
|
img[align=left], input[type=image][align=left], object[align=left] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
float: left;
|
|
}
|
|
|
|
applet[align=right], embed[align=right], iframe[align=right],
|
|
img[align=right], input[type=image][align=right], object[align=right] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
float: right;
|
|
}
|
|
|
|
applet[align=top], embed[align=top], iframe[align=top],
|
|
img[align=top], input[type=image][align=top], object[align=top] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
vertical-align: top;
|
|
}
|
|
|
|
applet[align=baseline], embed[align=baseline], iframe[align=baseline],
|
|
img[align=baseline], input[type=image][align=baseline], object[align=baseline] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
applet[align=texttop], embed[align=texttop], iframe[align=texttop],
|
|
img[align=texttop], input[type=image][align=texttop], object[align=texttop] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
applet[align=absmiddle], embed[align=absmiddle], iframe[align=absmiddle],
|
|
img[align=absmiddle], input[type=image][align=absmiddle], object[align=absmiddle],
|
|
applet[align=abscenter], embed[align=abscenter], iframe[align=abscenter],
|
|
img[align=abscenter], input[type=image][align=abscenter], object[align=abscenter] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
vertical-align: middle;
|
|
}
|
|
|
|
applet[align=bottom], embed[align=bottom], iframe[align=bottom],
|
|
img[align=bottom], input[type=image][align=bottom],
|
|
object[align=bottom] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
vertical-align: bottom;
|
|
}</pre>
|
|
|
|
<p>When an <code><a href="obsolete.html#the-applet-element">applet</a></code>, <code><a href="the-iframe-element.html#the-embed-element">embed</a></code>,
|
|
<code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>, <code><a href="embedded-content-1.html#the-img-element">img</a></code>, or <code><a href="the-iframe-element.html#the-object-element">object</a></code>
|
|
element, or an <code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a> state, has an
|
|
<code title="attr-dim-align">align</code> attribute whose value is
|
|
an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">center</code>" or the string "<code title="">middle</code>", the user agent is expected to act as if the
|
|
element's 'vertical-align' property was set to a value that aligns
|
|
the vertical middle of the element with the parent element's
|
|
baseline.</p>
|
|
|
|
<p>The <code title="attr-dim-hspace">hspace</code> attribute of
|
|
<code><a href="obsolete.html#the-applet-element">applet</a></code>, <code><a href="the-iframe-element.html#the-embed-element">embed</a></code>, <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>,
|
|
<code><a href="embedded-content-1.html#the-img-element">img</a></code>, or <code><a href="the-iframe-element.html#the-object-element">object</a></code> elements, and
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> elements with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a> state, <a href="#maps-to-the-dimension-property" title="maps to the dimension property">maps to the dimension
|
|
properties</a> 'margin-left' and 'margin-right' on the
|
|
element.</p>
|
|
|
|
<p>The <code title="attr-dim-vspace">vspace</code> attribute of
|
|
<code><a href="obsolete.html#the-applet-element">applet</a></code>, <code><a href="the-iframe-element.html#the-embed-element">embed</a></code>, <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>,
|
|
<code><a href="embedded-content-1.html#the-img-element">img</a></code>, or <code><a href="the-iframe-element.html#the-object-element">object</a></code> elements, and
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> elements with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a> state, <a href="#maps-to-the-dimension-property" title="maps to the dimension property">maps to the dimension
|
|
properties</a> 'margin-top' and 'margin-bottom' on the
|
|
element.</p>
|
|
|
|
<p>When an <code><a href="embedded-content-1.html#the-img-element">img</a></code> element, <code><a href="the-iframe-element.html#the-object-element">object</a></code> element, or
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a> state is contained
|
|
within a <a href="links.html#hyperlink">hyperlink</a> and has a <code title="attr-dim-border">border</code> attribute whose value, when
|
|
parsed using the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative
|
|
integers</a>, is found to be a number greater than zero, the user
|
|
agent is expected to use the parsed value for eight
|
|
<a href="#presentational-hints">presentational hints</a>: four setting the parsed value as
|
|
a pixel length for the element's 'border-top-width',
|
|
'border-right-width', 'border-bottom-width', and 'border-left-width'
|
|
properties, and four setting the element's 'border-top-style',
|
|
'border-right-style', 'border-bottom-style', and 'border-left-style'
|
|
properties to the value 'solid'.</p>
|
|
|
|
<p id="dimRendering">The <code title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>
|
|
and <code title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code> attributes on
|
|
<code><a href="obsolete.html#the-applet-element">applet</a></code>, <code><a href="the-iframe-element.html#the-embed-element">embed</a></code>, <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>,
|
|
<code><a href="embedded-content-1.html#the-img-element">img</a></code>, <code><a href="the-iframe-element.html#the-object-element">object</a></code> or <code><a href="the-iframe-element.html#the-video-element">video</a></code>
|
|
elements, and <code><a href="the-input-element.html#the-input-element">input</a></code> elements with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a> state, <a href="#maps-to-the-dimension-property" title="maps to the dimension property">map to the dimension
|
|
properties</a> 'width' and 'height' on the element
|
|
respectively.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="image-maps-0"><span class="secno">10.3.5 </span>Image maps</h4>
|
|
|
|
<p>Shapes on an <a href="the-map-element.html#image-map">image map</a> are expected to act, for the
|
|
purpose of the CSS cascade, as elements independent of the original
|
|
<code><a href="the-map-element.html#the-area-element">area</a></code> element that happen to match the same style rules
|
|
but inherit from the <code><a href="embedded-content-1.html#the-img-element">img</a></code> or <code><a href="the-iframe-element.html#the-object-element">object</a></code>
|
|
element.</p>
|
|
|
|
<p>For the purposes of the rendering, only the 'cursor' property is
|
|
expected to have any effect on the shape.</p>
|
|
|
|
<p class="example">Thus, for example, if an <code><a href="the-map-element.html#the-area-element">area</a></code>
|
|
element has a <code title="attr-style"><a href="elements.html#the-style-attribute">style</a></code> attribute that
|
|
sets the 'cursor' property to 'help', then when the user designates
|
|
that shape, the cursor would change to a Help cursor.</p>
|
|
|
|
<p class="example">Similarly, if an <code><a href="the-map-element.html#the-area-element">area</a></code> element had a
|
|
CSS rule that set its 'cursor' property to 'inherit' (or if no rule
|
|
setting the 'cursor' property matched the element at all), the
|
|
shape's cursor would be inherited from the <code><a href="embedded-content-1.html#the-img-element">img</a></code> or
|
|
<code><a href="the-iframe-element.html#the-object-element">object</a></code> element of the <a href="the-map-element.html#image-map">image map</a>, not from
|
|
the parent of the <code><a href="the-map-element.html#the-area-element">area</a></code> element.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="toolbars-0"><span class="secno">10.3.6 </span>Toolbars</h4>
|
|
|
|
<p>When a <code><a href="interactive-elements.html#the-menu-element">menu</a></code> element's <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute is in the <a href="interactive-elements.html#toolbar-state" title="toolbar state">toolbar</a> state, the element is
|
|
expected to be treated as a replaced element with a height about two
|
|
lines high and a width derived from the contents of the element.</p>
|
|
|
|
<p>The element is expected to have, by default, the appearance of a
|
|
toolbar on the user agent's platform. It is expected to contain the
|
|
menu that is <a href="interactive-elements.html#building-menus-and-toolbars" title="building menus and toolbars">built</a>
|
|
from the element.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h3 id="bindings"><span class="secno">10.4 </span>Bindings</h3>
|
|
|
|
<h4 id="introduction-10"><span class="secno">10.4.1 </span>Introduction</h4>
|
|
|
|
<p>A number of elements have their rendering defined in terms of the
|
|
'binding' property. <a href="references.html#refsBECSS">[BECSS]</a></p>
|
|
|
|
<p>The CSS snippets below set the 'binding' property to a
|
|
user-agent-defined value, represented below by keywords like <code title=""><i title="">button</i></code>. The rules then described for
|
|
these bindings are only expected to apply if the element's 'binding'
|
|
property has not been overridden (e.g. by the author) to have
|
|
another value.</p>
|
|
|
|
<p>Exactly how the bindings are implemented is not specified by this
|
|
specification. User agents are encouraged to make their bindings set
|
|
the 'appearance' CSS property appropriately to achieve
|
|
platform-native appearances for widgets, and are expected to
|
|
implement any relevant animations, etc, that are appropriate for the
|
|
platform. <a href="references.html#refsCSSUI">[CSSUI]</a></p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-button-element-0"><span class="secno">10.4.2 </span>The <code><a href="the-button-element.html#the-button-element">button</a></code> element</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
button { binding: <i title="">button</i>; }</pre>
|
|
|
|
<p>When the <i title="">button</i> binding applies to a
|
|
<code><a href="the-button-element.html#the-button-element">button</a></code> element, the element is expected to render as an
|
|
'inline-block' box rendered as a button whose contents are the
|
|
contents of the element.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-details-element-0"><span class="secno">10.4.3 </span>The <code><a href="interactive-elements.html#the-details-element">details</a></code> element</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
details { binding: <i title="">details</i>; }</pre>
|
|
|
|
<p>When the <i title="">details</i> binding applies to a
|
|
<code><a href="interactive-elements.html#the-details-element">details</a></code> element, the element is expected to render as a
|
|
'block' box with its 'padding-left' property set to '40px' for
|
|
left-to-right elements (<a href="#ltr-specific">LTR-specific</a>) and with its
|
|
'padding-right' property set to '40px' for right-to-left
|
|
elements. The element's shadow tree is expected to take the
|
|
element's first child <code><a href="interactive-elements.html#the-summary-element">summary</a></code> element, if any, and
|
|
place it in a first 'block' box container, and then take the
|
|
element's remaining descendants, if any, and place them in a second
|
|
'block' box container.</p>
|
|
|
|
<p>The first container is expected to contain at least one line box,
|
|
and that line box is expected to contain a disclosure widget
|
|
(typically a triangle), horizontally positioned within the left
|
|
padding of the <code><a href="interactive-elements.html#the-details-element">details</a></code> element. That widget is expected
|
|
to allow the user to request that the details be shown or
|
|
hidden.</p>
|
|
|
|
<p>The second container is expected to have its 'overflow' property
|
|
set to 'hidden'. When the <code><a href="interactive-elements.html#the-details-element">details</a></code> element does not have
|
|
an <code title="attr-details-open"><a href="interactive-elements.html#attr-details-open">open</a></code> attribute, this
|
|
second container is expected to be removed from the rendering.</p>
|
|
|
|
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-input-element-as-a-text-entry-widget"><span class="secno">10.4.4 </span>The <code><a href="the-input-element.html#the-input-element">input</a></code> element as a text entry widget</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
input { binding: <i title="">input-textfield</i>; }
|
|
input[type=password] { binding: <i title="">input-password</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
/* later rules override this for other values of type="" */</pre>
|
|
|
|
<p>When the <i title="">input-textfield</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="states-of-the-type-attribute.html#text-state-and-search-state" title="attr-input-type-text">Text</a>, <a href="states-of-the-type-attribute.html#text-state-and-search-state" title="attr-input-type-search">Search</a>, <a href="states-of-the-type-attribute.html#telephone-state" title="attr-input-type-tel">Telephone</a>, <a href="states-of-the-type-attribute.html#url-state" title="attr-input-type-url">URL</a>, or <a href="states-of-the-type-attribute.html#e-mail-state" title="attr-input-type-email">E-mail</a> state, the element is
|
|
expected to render as an 'inline-block' box rendered as a text
|
|
field.</p>
|
|
|
|
<p>When the <i title="">input-password</i> binding applies, to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="states-of-the-type-attribute.html#password-state" title="attr-input-type-password">Password</a> state, the element
|
|
is expected to render as an 'inline-block' box rendered as a text
|
|
field whose contents are obscured.</p>
|
|
|
|
<p>If an <code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in one of the above
|
|
states has a <code title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code> attribute,
|
|
and parsing that attribute's value using the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing
|
|
non-negative integers</a> doesn't generate an error, then the
|
|
user agent is expected to use the attribute as a <a href="#presentational-hints" title="presentational hints">presentational hint</a> for the
|
|
'width' property on the element, with the value obtained from
|
|
applying the <a href="#converting-a-character-width-to-pixels">converting a character width to pixels</a>
|
|
algorithm to the value of the attribute.</p>
|
|
|
|
<p>If an <code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in one of the above
|
|
states does <em>not</em> have a <code title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code> attribute, then the user agent
|
|
is expected to act as if it had a user-agent-level style sheet rule
|
|
setting the 'width' property on the element to the value obtained
|
|
from applying the <a href="#converting-a-character-width-to-pixels">converting a character width to
|
|
pixels</a> algorithm to the number 20.</p>
|
|
|
|
<p>The <dfn id="converting-a-character-width-to-pixels">converting a character width to pixels</dfn> algorithm
|
|
returns <span title="">(<var title="">size</var>-1)×<var title="">avg</var> + <var title="">max</var></span>, where
|
|
<var title="">size</var> is the character width to convert, <var title="">avg</var> is the average character width of the primary
|
|
font for the element for which the algorithm is being run, in
|
|
pixels, and <var title="">max</var> is the maximum character width
|
|
of that same font, also in pixels. (The element's 'letter-spacing'
|
|
property does not affect the result.)</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-input-element-as-domain-specific-widgets"><span class="secno">10.4.5 </span>The <code><a href="the-input-element.html#the-input-element">input</a></code> element as domain-specific widgets</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
input[type=datetime] { binding: <i title="">input-datetime</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
input[type=date] { binding: <i title="">input-date</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
input[type=month] { binding: <i title="">input-month</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
input[type=week] { binding: <i title="">input-week</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
input[type=time] { binding: <i title="">input-time</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
input[type=datetime-local] { binding: <i title="">input-datetime-local</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
input[type=number] { binding: <i title="">input-number</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */</pre>
|
|
|
|
<p>When the <i title="">input-datetime</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="states-of-the-type-attribute.html#date-and-time-state" title="attr-input-type-datetime">Date and Time</a> state, the
|
|
element is expected to render as an 'inline-block' box depicting a
|
|
Date and Time control.</p>
|
|
|
|
<p>When the <i title="">input-date</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="states-of-the-type-attribute.html#date-state" title="attr-input-type-date">Date</a> state, the element is
|
|
expected to render as an 'inline-block' box depicting a Date
|
|
control.</p>
|
|
|
|
<p>When the <i title="">input-month</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="states-of-the-type-attribute.html#month-state" title="attr-input-type-month">Month</a> state, the element is
|
|
expected to render as an 'inline-block' box depicting a Month
|
|
control.</p>
|
|
|
|
<p>When the <i title="">input-week</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="states-of-the-type-attribute.html#week-state" title="attr-input-type-week">Week</a> state, the element is
|
|
expected to render as an 'inline-block' box depicting a Week
|
|
control.</p>
|
|
|
|
<p>When the <i title="">input-time</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="states-of-the-type-attribute.html#time-state" title="attr-input-type-time">Time</a> state, the element is
|
|
expected to render as an 'inline-block' box depicting a Time
|
|
control.</p>
|
|
|
|
<p>When the <i title="">input-datetime-local</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="states-of-the-type-attribute.html#local-date-and-time-state" title="attr-input-type-datetime-local">Local Date and Time</a>
|
|
state, the element is expected to render as an 'inline-block' box
|
|
depicting a Local Date and Time control.</p>
|
|
|
|
<p>When the <i title="">input-number</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="number-state.html#number-state" title="attr-input-type-number">Number</a> state, the element is
|
|
expected to render as an 'inline-block' box depicting a Number
|
|
control.</p>
|
|
|
|
<p>These controls are all expected to be about one line high, and
|
|
about as wide as necessary to show the widest possible value.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-input-element-as-a-range-control"><span class="secno">10.4.6 </span>The <code><a href="the-input-element.html#the-input-element">input</a></code> element as a range control</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
input[type=range] { binding: <i title="">input-range</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */</pre>
|
|
|
|
<p>When the <i title="">input-range</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="number-state.html#range-state" title="attr-input-type-range">Range</a> state, the element is
|
|
expected to render as an 'inline-block' box depicting a slider
|
|
control.</p>
|
|
|
|
<p>When the control is wider than it is tall (or square), the
|
|
control is expected to be a horizontal slider, with the lowest value
|
|
on the right if the 'direction' property on this element has a
|
|
computed value of 'rtl', and on the left otherwise. When the control
|
|
is taller than it is wide, it is expected to be a vertical slider,
|
|
with the lowest value on the bottom.</p>
|
|
|
|
<p>Predefined suggested values (provided by the <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code> attribute) are expected to be
|
|
shown as tick marks on the slider, which the slider can snap to.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-input-element-as-a-color-well"><span class="secno">10.4.7 </span>The <code><a href="the-input-element.html#the-input-element">input</a></code> element as a color well</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
input[type=color] { binding: <i title="">input-color</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */</pre>
|
|
|
|
<p>When the <i title="">input-color</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="number-state.html#color-state" title="attr-input-type-color">Color</a> state, the element is
|
|
expected to render as an 'inline-block' box depicting a color well,
|
|
which, when activated, provides the user with a color picker (e.g. a
|
|
color wheel or color palette) from which the color can be
|
|
changed.</p>
|
|
|
|
<p>Predefined suggested values (provided by the <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code> attribute) are expected to be
|
|
shown in the color picker interface, not on the color well
|
|
itself.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-input-element-as-a-checkbox-and-radio-button-widgets"><span class="secno">10.4.8 </span>The <code><a href="the-input-element.html#the-input-element">input</a></code> element as a checkbox and radio button widgets</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
input[type=checkbox] { binding: <i title="">input-checkbox</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
input[type=radio] { binding: <i title="">input-radio</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */</pre>
|
|
|
|
<p>When the <i title="">input-checkbox</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="number-state.html#checkbox-state" title="attr-input-type-checkbox">Checkbox</a> state, the element
|
|
is expected to render as an 'inline-block' box containing a single
|
|
checkbox control, with no label.</p>
|
|
|
|
<p>When the <i title="">input-radio</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="number-state.html#radio-button-state" title="attr-input-type-radio">Radio Button</a> state, the element
|
|
is expected to render as an 'inline-block' box containing a single
|
|
radio button control, with no label.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-input-element-as-a-file-upload-control"><span class="secno">10.4.9 </span>The <code><a href="the-input-element.html#the-input-element">input</a></code> element as a file upload control</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
input[type=file] { binding: <i title="">input-file</i>; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */</pre>
|
|
|
|
<p>When the <i title="">input-file</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="number-state.html#file-upload-state" title="attr-input-type-file">File Upload</a> state, the element
|
|
is expected to render as an 'inline-block' box containing a span of
|
|
text giving the filename(s) of the <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>, if
|
|
any, followed by a button that, when activated, provides the user
|
|
with a file picker from which the selection can be changed.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-input-element-as-a-button"><span class="secno">10.4.10 </span>The <code><a href="the-input-element.html#the-input-element">input</a></code> element as a button</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
input[type=submit], input[type=reset], input[type=button] { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
|
|
binding: <i title="">input-button</i>;
|
|
}</pre>
|
|
|
|
<p>When the <i title="">input-button</i> binding applies to an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="number-state.html#submit-button-state" title="attr-input-type-submit">Submit Button</a>, <a href="number-state.html#reset-button-state" title="attr-input-type-reset">Reset Button</a>, or <a href="number-state.html#button-state" title="attr-input-type-button">Button</a> state, the element is
|
|
expected to render as an 'inline-block' box rendered as a button,
|
|
about one line high, containing the contents of the element's <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if any, or text
|
|
derived from the element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code>
|
|
attribute in a user-agent-defined (and probably locale-specific)
|
|
fashion, if not.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-marquee-element-0"><span class="secno">10.4.11 </span>The <code><a href="obsolete.html#the-marquee-element">marquee</a></code> element</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
marquee { binding: <i title="">marquee</i>; }</pre>
|
|
|
|
<p>When the <i title="">marquee</i> binding applies to a
|
|
<code><a href="obsolete.html#the-marquee-element">marquee</a></code> element, while the element is <a href="obsolete.html#concept-marquee-on" title="concept-marquee-on">turned on</a>, the element is expected
|
|
to render in an animated fashion according to its attributes as
|
|
follows:</p>
|
|
|
|
<dl><dt>If the element's <code title="attr-marquee-behavior"><a href="obsolete.html#attr-marquee-behavior">behavior</a></code> attribute is in the
|
|
<a href="obsolete.html#attr-marquee-behavior-scroll" title="attr-marquee-behavior-scroll">scroll</a> state</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Slide the contents of the element in the direction described by
|
|
the <code title="attr-marquee-direction"><a href="obsolete.html#attr-marquee-direction">direction</a></code>
|
|
attribute as defined below, such that it begins off the start side
|
|
of the <code><a href="obsolete.html#the-marquee-element">marquee</a></code>, and ends flush with the inner end
|
|
side.</p>
|
|
|
|
<p class="example">For example, if the <code title="attr-marquee-direction"><a href="obsolete.html#attr-marquee-direction">direction</a></code> attribute is <a href="obsolete.html#attr-marquee-direction-left" title="attr-marquee-direction-left">left</a> (the default),
|
|
then the contents would start such that their left edge are off
|
|
the side of the right edge of the <code><a href="obsolete.html#the-marquee-element">marquee</a></code>'s content
|
|
area, and the contents would then slide up to the point where the
|
|
left edge of the contents are flush with the left inner edge of
|
|
the <code><a href="obsolete.html#the-marquee-element">marquee</a></code>'s content area.</p>
|
|
|
|
<p>Once the animation has ended, the user agent is expected to
|
|
<a href="obsolete.html#increment-the-marquee-current-loop-index">increment the marquee current loop index</a>. If the
|
|
element is still <a href="obsolete.html#concept-marquee-on" title="concept-marquee-on">turned on</a>
|
|
after this, then the user agent is expected to restart the
|
|
animation.</p>
|
|
|
|
</dd>
|
|
|
|
<dt>If the element's <code title="attr-marquee-behavior"><a href="obsolete.html#attr-marquee-behavior">behavior</a></code> attribute is in the
|
|
<a href="obsolete.html#attr-marquee-behavior-slide" title="attr-marquee-behavior-slide">slide</a> state</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Slide the contents of the element in the direction described by
|
|
the <code title="attr-marquee-direction"><a href="obsolete.html#attr-marquee-direction">direction</a></code>
|
|
attribute as defined below, such that it begins off the start side
|
|
of the <code><a href="obsolete.html#the-marquee-element">marquee</a></code>, and ends off the end side of the
|
|
<code><a href="obsolete.html#the-marquee-element">marquee</a></code>.</p>
|
|
|
|
<p class="example">For example, if the <code title="attr-marquee-direction"><a href="obsolete.html#attr-marquee-direction">direction</a></code> attribute is <a href="obsolete.html#attr-marquee-direction-left" title="attr-marquee-direction-left">left</a> (the default),
|
|
then the contents would start such that their left edge are off
|
|
the side of the right edge of the <code><a href="obsolete.html#the-marquee-element">marquee</a></code>'s content
|
|
area, and the contents would then slide up to the point where the
|
|
<em>right</em> edge of the contents are flush with the left inner
|
|
edge of the <code><a href="obsolete.html#the-marquee-element">marquee</a></code>'s content area.</p>
|
|
|
|
<p>Once the animation has ended, the user agent is expected to
|
|
<a href="obsolete.html#increment-the-marquee-current-loop-index">increment the marquee current loop index</a>. If the
|
|
element is still <a href="obsolete.html#concept-marquee-on" title="concept-marquee-on">turned on</a>
|
|
after this, then the user agent is expected to restart the
|
|
animation.</p>
|
|
|
|
</dd>
|
|
|
|
<dt>If the element's <code title="attr-marquee-behavior"><a href="obsolete.html#attr-marquee-behavior">behavior</a></code> attribute is in the
|
|
<a href="obsolete.html#attr-marquee-behavior-alternate" title="attr-marquee-behavior-alternate">alternate</a>
|
|
state</dt>
|
|
|
|
<dd>
|
|
|
|
<p>When the <a href="obsolete.html#marquee-current-loop-index">marquee current loop index</a> is even (or
|
|
zero), slide the contents of the element in the direction
|
|
described by the <code title="attr-marquee-direction"><a href="obsolete.html#attr-marquee-direction">direction</a></code> attribute as
|
|
defined below, such that it begins flush with the start side of
|
|
the <code><a href="obsolete.html#the-marquee-element">marquee</a></code>, and ends flush with the end side of the
|
|
<code><a href="obsolete.html#the-marquee-element">marquee</a></code>.</p>
|
|
|
|
<p>When the <a href="obsolete.html#marquee-current-loop-index">marquee current loop index</a> is odd, slide
|
|
the contents of the element in the opposite direction than that
|
|
described by the <code title="attr-marquee-direction"><a href="obsolete.html#attr-marquee-direction">direction</a></code> attribute as
|
|
defined below, such that it begins flush with the end side of the
|
|
<code><a href="obsolete.html#the-marquee-element">marquee</a></code>, and ends flush with the start side of the
|
|
<code><a href="obsolete.html#the-marquee-element">marquee</a></code>.</p>
|
|
|
|
<p class="example">For example, if the <code title="attr-marquee-direction"><a href="obsolete.html#attr-marquee-direction">direction</a></code> attribute is <a href="obsolete.html#attr-marquee-direction-left" title="attr-marquee-direction-left">left</a> (the default),
|
|
then the contents would with their right edge flush with the right
|
|
inner edge of the <code><a href="obsolete.html#the-marquee-element">marquee</a></code>'s content area, and the
|
|
contents would then slide up to the point where the <em>left</em>
|
|
edge of the contents are flush with the left inner edge of the
|
|
<code><a href="obsolete.html#the-marquee-element">marquee</a></code>'s content area.</p>
|
|
|
|
<p>Once the animation has ended, the user agent is expected to
|
|
<a href="obsolete.html#increment-the-marquee-current-loop-index">increment the marquee current loop index</a>. If the
|
|
element is still <a href="obsolete.html#concept-marquee-on" title="concept-marquee-on">turned on</a>
|
|
after this, then the user agent is expected to continue the
|
|
animation.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><p>The <code title="attr-marquee-direction"><a href="obsolete.html#attr-marquee-direction">direction</a></code>
|
|
attribute has the meanings described in the following table:</p>
|
|
|
|
<table><thead><tr><th><code title="attr-marquee-direction"><a href="obsolete.html#attr-marquee-direction">direction</a></code> attribute state
|
|
</th><th>Direction of animation
|
|
</th><th>Start edge
|
|
</th><th>End edge
|
|
</th><th>Opposite direction
|
|
</th></tr></thead><tbody><tr><td><a href="obsolete.html#attr-marquee-direction-left" title="attr-marquee-direction-left">left</a>
|
|
</td><td>← Right to left
|
|
</td><td>Right
|
|
</td><td>Left
|
|
</td><td>→ Left to Right
|
|
</td></tr><tr><td><a href="obsolete.html#attr-marquee-direction-right" title="attr-marquee-direction-right">right</a>
|
|
</td><td>→ Left to Right
|
|
</td><td>Left
|
|
</td><td>Right
|
|
</td><td>← Right to left
|
|
</td></tr><tr><td><a href="obsolete.html#attr-marquee-direction-up" title="attr-marquee-direction-up">up</a>
|
|
</td><td>↑ Up (Bottom to Top)
|
|
</td><td>Bottom
|
|
</td><td>Top
|
|
</td><td>↓ Down (Top to Bottom)
|
|
</td></tr><tr><td><a href="obsolete.html#attr-marquee-direction-down" title="attr-marquee-direction-down">down</a>
|
|
</td><td>↓ Down (Top to Bottom)
|
|
</td><td>Top
|
|
</td><td>Bottom
|
|
</td><td>↑ Up (Bottom to Top)
|
|
</td></tr></tbody></table><p>In any case, the animation should proceed such that there is a
|
|
delay given by the <a href="obsolete.html#marquee-scroll-interval">marquee scroll interval</a> between each
|
|
frame, and such that the content moves at most the distance given by
|
|
the <a href="obsolete.html#marquee-scroll-distance">marquee scroll distance</a> with each frame.</p>
|
|
|
|
<p>When a <code><a href="obsolete.html#the-marquee-element">marquee</a></code> element has a <code title="attr-marquee-bgcolor">bgcolor</code> attribute set, the value
|
|
is expected to be parsed using the <a href="common-microsyntaxes.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy
|
|
color value</a>, and if that does not return an error, the user
|
|
agent is expected to treat the attribute as a <a href="#presentational-hints" title="presentational hints">presentational hint</a> setting the
|
|
element's 'background-color' property to the resulting color.</p>
|
|
|
|
<p>The <code title="attr-marquee-width">width</code> and <code title="attr-marquee-height">height</code> attributes on a
|
|
<code><a href="obsolete.html#the-marquee-element">marquee</a></code> element <a href="#maps-to-the-dimension-property" title="maps to the dimension
|
|
property">map to the dimension properties</a> 'width' and
|
|
'height' on the element respectively.</p>
|
|
|
|
<p>The intrinsic height of a <code><a href="obsolete.html#the-marquee-element">marquee</a></code> element with its
|
|
<code title="attr-marquee-direction"><a href="obsolete.html#attr-marquee-direction">direction</a></code> attribute in
|
|
the <a href="obsolete.html#attr-marquee-direction-up" title="attr-marquee-direction-up">up</a> or <a href="obsolete.html#attr-marquee-direction-down" title="attr-marquee-direction-down">down</a> states is 200 CSS
|
|
pixels.</p>
|
|
|
|
<p>The <code title="attr-marquee-vspace">vspace</code> attribute of
|
|
a <code><a href="obsolete.html#the-marquee-element">marquee</a></code> element <a href="#maps-to-the-dimension-property" title="maps to the dimension
|
|
property">maps to the dimension properties</a> 'margin-top' and
|
|
'margin-bottom' on the element. The <code title="attr-marquee-hspace">hspace</code> attribute of a
|
|
<code><a href="obsolete.html#the-marquee-element">marquee</a></code> element <a href="#maps-to-the-dimension-property" title="maps to the dimension
|
|
property">maps to the dimension properties</a> 'margin-left' and
|
|
'margin-right' on the element.</p>
|
|
|
|
<p>The 'overflow' property on the <code><a href="obsolete.html#the-marquee-element">marquee</a></code> element is
|
|
expected to be ignored; overflow is expected to always be
|
|
hidden.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-meter-element-0"><span class="secno">10.4.12 </span>The <code><a href="the-button-element.html#the-meter-element">meter</a></code> element</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
meter { binding: <i title="">meter</i>; }</pre>
|
|
|
|
<p>When the <i title="">meter</i> binding applies to a
|
|
<code><a href="the-button-element.html#the-meter-element">meter</a></code> element, the element is expected to render as an
|
|
'inline-block' box with a 'height' of '1em' and a 'width' of '5em',
|
|
a 'vertical-align' of '-0.2em', and with its contents depicting a
|
|
gauge.</p>
|
|
|
|
<p>When the element is wider than it is tall (or square), the
|
|
depiction is expected to be of a horizontal gauge, with the minimum
|
|
value on the right if the 'direction' property on this element has a
|
|
computed value of 'rtl', and on the left otherwise. When the element
|
|
is taller than it is wide, it is expected to depict a vertical
|
|
gauge, with the minimum value on the bottom.</p>
|
|
|
|
<p>User agents are expected to use a presentation consistent with
|
|
platform conventions for gauges, if any.</p>
|
|
|
|
<p class="note">Requirements for what must be depicted in the gauge
|
|
are included in the definition of the <code><a href="the-button-element.html#the-meter-element">meter</a></code>
|
|
element.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-progress-element-0"><span class="secno">10.4.13 </span>The <code><a href="the-button-element.html#the-progress-element">progress</a></code> element</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
progress { binding: <i title="">progress</i>; }</pre>
|
|
|
|
<p>When the <i title="">progress</i> binding applies to a
|
|
<code><a href="the-button-element.html#the-progress-element">progress</a></code> element, the element is expected to render as
|
|
an 'inline-block' box with a 'height' of '1em' and a 'width' of
|
|
'10em', and a 'vertical-align' of '-0.2em'.</p>
|
|
|
|
|
|
|
|
<p> <img alt="" class="extra" src="sample-progress.png">
|
|
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).</p>
|
|
|
|
<p>User agents are expected to use a presentation consistent with
|
|
platform conventions for progress bars. In particular, user agents
|
|
are expected to use different presentations for determinate and
|
|
indeterminate progress bars. User agents are also expected to vary
|
|
the presentation based on the dimensions of the element.</p>
|
|
|
|
<p class="example">For example, on some platforms for showing
|
|
indeterminate progress there is an asynchronous progress indicator
|
|
with square dimensions, which could be used when the element is
|
|
square, and an indeterminate progress bar, which could be used when
|
|
the element is wide.</p>
|
|
|
|
<p class="note">Requirements for how to determine if the progress
|
|
bar is determinate or indeterminate, and what progress a determinate
|
|
progress bar is to show, are included in the definition of the
|
|
<code><a href="the-button-element.html#the-progress-element">progress</a></code> element.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-select-element-0"><span class="secno">10.4.14 </span>The <code><a href="the-button-element.html#the-select-element">select</a></code> element</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
select { binding: <i title="">select</i>; }</pre>
|
|
|
|
<p>When the <i title="">select</i> binding applies to a
|
|
<code><a href="the-button-element.html#the-select-element">select</a></code> element whose <code title="attr-select-multiple"><a href="the-button-element.html#attr-select-multiple">multiple</a></code> attribute is present,
|
|
the element is expected to render as a multi-select list box.</p>
|
|
|
|
<p>When the <i title="">select</i> binding applies to a
|
|
<code><a href="the-button-element.html#the-select-element">select</a></code> element whose <code title="attr-select-multiple"><a href="the-button-element.html#attr-select-multiple">multiple</a></code> attribute is absent,
|
|
and the element's <a href="the-button-element.html#concept-select-size" title="concept-select-size">display
|
|
size</a> is greater than 1, the element is expected to render as
|
|
a single-select list box.</p>
|
|
|
|
<p>When the element renders as a list box, it is expected to render
|
|
as an 'inline-block' box whose 'height' is the height necessary to
|
|
contain as many rows for items as given by the element's <a href="the-button-element.html#concept-select-size" title="concept-select-size">display size</a>, or four rows if the
|
|
attribute is absent, and whose 'width' is the <a href="#width-of-the-select-s-labels">width of the
|
|
<code>select</code>'s labels</a> plus the width of a
|
|
scrollbar.</p>
|
|
|
|
<p>When the <i title="">select</i> binding applies to a
|
|
<code><a href="the-button-element.html#the-select-element">select</a></code> element whose <code title="attr-select-multiple"><a href="the-button-element.html#attr-select-multiple">multiple</a></code> attribute is absent,
|
|
and the element's <a href="the-button-element.html#concept-select-size" title="concept-select-size">display
|
|
size</a> is 1, the element is expected to render as a one-line
|
|
drop down box whose width is the <a href="#width-of-the-select-s-labels">width of the
|
|
<code>select</code>'s labels</a>.</p>
|
|
|
|
<p>In either case (list box or drop-down box), the element's items
|
|
are expected to be the element's <a href="the-button-element.html#concept-select-option-list" title="concept-select-option-list">list of options</a>, with the
|
|
element's <code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code> element children providing headers
|
|
for groups of options where applicable.</p>
|
|
|
|
<p>An <code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code> element is expected to be rendered by
|
|
displaying the element's <code title="attr-optgroup-label"><a href="the-button-element.html#attr-optgroup-label">label</a></code> attribute.</p>
|
|
|
|
<p>An <code><a href="the-button-element.html#the-option-element">option</a></code> element is expected to be rendered by
|
|
displaying the element's <code title="concept-option-label"><a href="the-button-element.html#concept-option-label">label</a></code>, indented under its
|
|
<code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code> element if it has one.</p>
|
|
|
|
<p>The <dfn id="width-of-the-select-s-labels">width of the <code>select</code>'s labels</dfn> is the
|
|
wider of the width necessary to render the widest
|
|
<code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code>, and the width necessary to render the widest
|
|
<code><a href="the-button-element.html#the-option-element">option</a></code> element in the element's <a href="the-button-element.html#concept-select-option-list" title="concept-select-option-list">list of options</a> (including
|
|
its indent, if any).</p>
|
|
|
|
<p>If a <code><a href="the-button-element.html#the-select-element">select</a></code> element contains a <a href="the-button-element.html#placeholder-label-option">placeholder
|
|
label option</a>, the user agent is expected to render that
|
|
<code><a href="the-button-element.html#the-option-element">option</a></code> in a manner that conveys that it is a label,
|
|
rather than a valid option of the control. This can include
|
|
preventing the <a href="the-button-element.html#placeholder-label-option">placeholder label option</a> from being
|
|
explicitly selected by the user. When the <a href="the-button-element.html#placeholder-label-option">placeholder label
|
|
option</a>'s <a href="the-button-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> is true, the
|
|
control is expected to be displayed in a fashion that indicates that
|
|
no valid option is currently selected.</p>
|
|
|
|
<p>User agents are expected to render the labels in a
|
|
<code><a href="the-button-element.html#the-select-element">select</a></code> in such a manner that any alignment remains
|
|
consistent whether the label is being displayed as part of the page
|
|
or in a menu control.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-textarea-element-0"><span class="secno">10.4.15 </span>The <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> element</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
textarea { binding: <i title="">textarea</i>; white-space: pre-wrap; }</pre>
|
|
|
|
<p>When the <i title="">textarea</i> binding applies to a
|
|
<code><a href="the-button-element.html#the-textarea-element">textarea</a></code> element, the element is expected to render as
|
|
an 'inline-block' box rendered as a multiline text field.</p>
|
|
|
|
<p>If the element has a <code title="attr-textarea-cols"><a href="the-button-element.html#attr-textarea-cols">cols</a></code>
|
|
attribute, and parsing that attribute's value using the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules
|
|
for parsing non-negative integers</a> doesn't generate an error,
|
|
then the user agent is expected to use the attribute as a <a href="#presentational-hints" title="presentational hints">presentational hint</a> for the
|
|
'width' property on the element, with the value being the
|
|
<a href="#textarea-effective-width">textarea effective width</a> (as defined below). Otherwise,
|
|
the user agent is expected to act as if it had a user-agent-level
|
|
style sheet rule setting the 'width' property on the element to the
|
|
<a href="#textarea-effective-width">textarea effective width</a>.</p>
|
|
|
|
<p>The <dfn id="textarea-effective-width">textarea effective width</dfn> of a
|
|
<code><a href="the-button-element.html#the-textarea-element">textarea</a></code> element is <span><var title="">size</var>×<var title="">avg</var> + <var title="">sbw</var></span>, where <var title="">size</var> is the
|
|
element's <a href="the-button-element.html#attr-textarea-cols-value" title="attr-textarea-cols-value">character
|
|
width</a>, <var title="">avg</var> is the average character width
|
|
of the primary font of the element, in CSS pixels, and <var title="">sbw</var> is the width of a scroll bar, in CSS pixels. (The
|
|
element's 'letter-spacing' property does not affect the result.)</p>
|
|
|
|
<p>If the element has a <code title="attr-textarea-rows"><a href="the-button-element.html#attr-textarea-rows">rows</a></code>
|
|
attribute, and parsing that attribute's value using the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules
|
|
for parsing non-negative integers</a> doesn't generate an error,
|
|
then the user agent is expected to use the attribute as a <a href="#presentational-hints" title="presentational hints">presentational hint</a> for the
|
|
'height' property on the element, with the value being the
|
|
<a href="#textarea-effective-height">textarea effective height</a> (as defined
|
|
below). Otherwise, the user agent is expected to act as if it had a
|
|
user-agent-level style sheet rule setting the 'height' property on
|
|
the element to the <a href="#textarea-effective-height">textarea effective height</a>.</p>
|
|
|
|
<p>The <dfn id="textarea-effective-height">textarea effective height</dfn> of a
|
|
<code><a href="the-button-element.html#the-textarea-element">textarea</a></code> element is the height in CSS pixels of the
|
|
number of lines specified the element's <a href="the-button-element.html#attr-textarea-rows-value" title="attr-textarea-rows-value">character height</a>, plus the
|
|
height of a scrollbar in CSS pixels.</p>
|
|
|
|
<p>User agents are expected to apply the 'white-space' CSS property
|
|
to <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> elements. For historical reasons, if the
|
|
element has a <code title="attr-textarea-wrap"><a href="the-button-element.html#attr-textarea-wrap">wrap</a></code> attribute
|
|
whose value is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the
|
|
string "<code title="attr-textarea-wrap-off">off</code>", then the
|
|
user agent is expected to treat the attribute as a <a href="#presentational-hints" title="presentational hints">presentational hint</a> setting the
|
|
element's 'white-space' property to 'pre'.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-keygen-element-0"><span class="secno">10.4.16 </span>The <code><a href="the-button-element.html#the-keygen-element">keygen</a></code> element</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
keygen { binding: <i title="">keygen</i>; }</pre>
|
|
|
|
<p>When the <i title="">keygen</i> binding applies to a
|
|
<code><a href="the-button-element.html#the-keygen-element">keygen</a></code> element, the element is expected to render as an
|
|
'inline-block' box containing a user interface to configure the key
|
|
pair to be generated.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h4 id="the-time-element-0"><span class="secno">10.4.17 </span>The <code><a href="text-level-semantics.html#the-time-element">time</a></code> element</h4>
|
|
|
|
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
|
|
|
|
time[datetime] { binding: <i title="">time</i>; }</pre>
|
|
|
|
<p>When the <i title="">time</i> binding applies to a
|
|
<code><a href="text-level-semantics.html#the-time-element">time</a></code> element, the element is expected to render as if
|
|
it contained text conveying the <a href="text-level-semantics.html#concept-time-date" title="concept-time-date">date</a> (if known), <a href="text-level-semantics.html#concept-time-time" title="concept-time-time">time</a> (if known), and <a href="text-level-semantics.html#concept-time-timezone" title="concept-time-timezone">time-zone offset</a> (if known)
|
|
represented by the element, in the fashion most convenient for the
|
|
user.</p>
|
|
|
|
|
|
|
|
</div><div class="impl">
|
|
|
|
<h3 id="frames-and-framesets"><span class="secno">10.5 </span>Frames and framesets</h3>
|
|
|
|
<p>When an <code><a href="semantics.html#the-html-element">html</a></code> element's second child element is a
|
|
<code><a href="obsolete.html#frameset">frameset</a></code> element, the user agent is expected to render
|
|
the <code><a href="obsolete.html#frameset">frameset</a></code> element as described below across the
|
|
surface of the viewport, instead of applying the usual CSS rendering
|
|
rules.</p>
|
|
|
|
<p>When rendering a <code><a href="obsolete.html#frameset">frameset</a></code> on a surface, the user
|
|
agent is expected to use the following layout algorithm:</p>
|
|
|
|
<ol><li>
|
|
|
|
<p>The <var title="">cols</var> and <var title="">rows</var>
|
|
variables are lists of zero or more pairs consisting of a number
|
|
and a unit, the unit being one of <i>percentage</i>,
|
|
<i>relative</i>, and <i>absolute</i>.</p>
|
|
|
|
<p>Use the <a href="common-microsyntaxes.html#rules-for-parsing-a-list-of-dimensions">rules for parsing a list of dimensions</a> to
|
|
parse the value of the element's <code title="attr-frameset-cols">cols</code> attribute, if there is
|
|
one. Let <var title="">cols</var> be the result, or an empty list
|
|
if there is no such attribute.</p>
|
|
|
|
<p>Use the <a href="common-microsyntaxes.html#rules-for-parsing-a-list-of-dimensions">rules for parsing a list of dimensions</a> to
|
|
parse the value of the element's <code title="attr-frameset-rows">rows</code> attribute, if there is
|
|
one. Let <var title="">rows</var> be the result, or an empty list
|
|
if there is no such attribute.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>For any of the entries in <var title="">cols</var> or <var title="">rows</var> that have the number zero and the unit
|
|
<i>relative</i>, change the entry's number to one.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>If <var title="">cols</var> has no entries, then add a single
|
|
entry consisting of the value 1 and the unit <i>relative</i> to
|
|
<var title="">cols</var>.</p>
|
|
|
|
<p>If <var title="">rows</var> has no entries, then add a single
|
|
entry consisting of the value 1 and the unit <i>relative</i> to
|
|
<var title="">rows</var>.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>Invoke the algorithm defined below to <a href="#convert-a-list-of-dimensions-to-a-list-of-pixel-values">convert a list of
|
|
dimensions to a list of pixel values</a> using <var title="">cols</var> as the input list, and the width of the
|
|
surface that the <code><a href="obsolete.html#frameset">frameset</a></code> is being rendered into, in
|
|
CSS pixels, as the input dimension. Let <var title="">sized
|
|
cols</var> be the resulting list.</p>
|
|
|
|
<p>Invoke the algorithm defined below to <a href="#convert-a-list-of-dimensions-to-a-list-of-pixel-values">convert a list of
|
|
dimensions to a list of pixel values</a> using <var title="">rows</var> as the input list, and the height of the
|
|
surface that the <code><a href="obsolete.html#frameset">frameset</a></code> is being rendered into, in
|
|
CSS pixels, as the input dimension. Let <var title="">sized
|
|
rows</var> be the resulting list.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>Split the surface into a grid of <span title=""><var title="">w</var>×<var title="">h</var></span> rectangles,
|
|
where <var title="">w</var> is the number of entries in <var title="">sized cols</var> and <var title="">h</var> is the number
|
|
of entries in <var title="">sized rows</var>.</p>
|
|
|
|
<p>Size the columns so that each column in the grid is as many CSS
|
|
pixels wide as the corresponding entry in the <var title="">sized
|
|
cols</var> list.</p>
|
|
|
|
<p>Size the rows so that each row in the grid is as many CSS
|
|
pixels high as the corresponding entry in the <var title="">sized
|
|
rows</var> list.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>Let <var title="">children</var> be the list of
|
|
<code><a href="obsolete.html#frame">frame</a></code> and <code><a href="obsolete.html#frameset">frameset</a></code> elements that are
|
|
children of the <code><a href="obsolete.html#frameset">frameset</a></code> element for which the
|
|
algorithm was invoked.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>For each row of the grid of rectangles created in the previous
|
|
step, from top to bottom, run these substeps:</p>
|
|
|
|
<ol><li>
|
|
|
|
<p>For each rectangle in the row, from left to right, run these
|
|
substeps:</p>
|
|
|
|
<ol><li>
|
|
|
|
<p>If there are any elements left in <var title="">children</var>, take the first element in the list,
|
|
and assign it to the rectangle.</p>
|
|
|
|
<p>If this is a <code><a href="obsolete.html#frameset">frameset</a></code> element, then recurse
|
|
the entire <code><a href="obsolete.html#frameset">frameset</a></code> layout algorithm for that
|
|
<code><a href="obsolete.html#frameset">frameset</a></code> element, with the rectangle as the
|
|
surface.</p>
|
|
|
|
<p>Otherwise, it is a <code><a href="obsolete.html#frame">frame</a></code> element; create a
|
|
<a href="browsers.html#nested-browsing-context">nested browsing context</a> sized to fit the
|
|
rectangle.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>If there are any elements left in <var title="">children</var>, remove the first element from <var title="">children</var>.</p>
|
|
|
|
</li></ol></li>
|
|
|
|
</ol></li>
|
|
|
|
<li>
|
|
|
|
<p>If the <code><a href="obsolete.html#frameset">frameset</a></code> element <a href="#has-a-border">has a border</a>,
|
|
draw an outer set of borders around the rectangles, using the
|
|
element's <a href="#frame-border-color">frame border color</a>.</p>
|
|
|
|
<p>For each rectangle, if there is an element assigned to that
|
|
rectangle, and that element <a href="#has-a-border">has a border</a>, draw an
|
|
inner set of borders around that rectangle, using the
|
|
element's <a href="#frame-border-color">frame border color</a>.</p>
|
|
|
|
<p>For each (visible) border that does not abut a rectangle that
|
|
is assigned a <code><a href="obsolete.html#frame">frame</a></code> element with a <code title="attr-frame-noresize">noresize</code> attribute (including
|
|
rectangles in further nested <code><a href="obsolete.html#frameset">frameset</a></code> elements), the
|
|
user agent is expected to allow the user to move the border,
|
|
resizing the rectangles within, keeping the proportions of any
|
|
nested <code><a href="obsolete.html#frameset">frameset</a></code> grids.</p>
|
|
|
|
<p>A <code><a href="obsolete.html#frameset">frameset</a></code> or <code><a href="obsolete.html#frame">frame</a></code> element <dfn id="has-a-border">has
|
|
a border</dfn> if the following algorithm returns true:</p>
|
|
|
|
<ol><li><p>If the element has a <code title="attr-frames-frameborder">frameborder</code> attribute
|
|
whose value is not the empty string and whose first character is
|
|
either a U+0031 DIGIT ONE (1) character, a U+0079 LATIN SMALL
|
|
LETTER Y character (y), or a U+0059 LATIN CAPITAL LETTER Y
|
|
character (Y), then return true.</p></li>
|
|
|
|
<li><p>Otherwise, if the element has a <code title="attr-frames-frameborder">frameborder</code> attribute,
|
|
return false.</p></li>
|
|
|
|
<li><p>Otherwise, if the element has a parent element that is a
|
|
<code><a href="obsolete.html#frameset">frameset</a></code> element, then return true if <em>that</em>
|
|
element <a href="#has-a-border">has a border</a>, and false if it does
|
|
not.</p></li>
|
|
|
|
<li><p>Otherwise, return true.</p></li>
|
|
|
|
</ol><p>The <dfn id="frame-border-color">frame border color</dfn> of a <code><a href="obsolete.html#frameset">frameset</a></code> or
|
|
<code><a href="obsolete.html#frame">frame</a></code> element is the color obtained from the
|
|
following algorithm:</p>
|
|
|
|
<ol><li><p>If the element has a <code title="attr-frames-bordercolor">bordercolor</code> attribute, and
|
|
applying the <a href="common-microsyntaxes.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy color value</a>
|
|
to that attribute's value does not result in an error, then
|
|
return the color so obtained.</p></li>
|
|
|
|
<li><p>Otherwise, if the element has a parent element that is a
|
|
<code><a href="obsolete.html#frameset">frameset</a></code> element, then the <a href="#frame-border-color">frame border
|
|
color</a> of that element.</p>
|
|
|
|
</li><li><p>Otherwise, return gray.</p></li>
|
|
|
|
</ol></li>
|
|
|
|
</ol><p>The algorithm to <dfn id="convert-a-list-of-dimensions-to-a-list-of-pixel-values">convert a list of dimensions to a list of
|
|
pixel values</dfn> consists of the following steps:</p>
|
|
|
|
<ol><li>
|
|
|
|
<p>Let <var title="">input list</var> be the list of numbers and
|
|
units passed to the algorithm.</p>
|
|
|
|
<p>Let <var title="">output list</var> be a list of numbers the
|
|
same length as <var title="">input list</var>, all zero.</p>
|
|
|
|
<p>Entries in <var title="">output list</var> correspond to the
|
|
entries in <var title="">input list</var> that have the same
|
|
position.</p>
|
|
|
|
</li>
|
|
|
|
<li><p>Let <var title="">input dimension</var> be the size passed
|
|
to the algorithm.</p>
|
|
|
|
</li><li>
|
|
|
|
<p>Let <var title="">count percentage</var> be the number of
|
|
entries in <var title="">input list</var> whose unit is
|
|
<i>percentage</i>.</p>
|
|
|
|
<p>Let <var title="">total percentage</var> be the sum of all the
|
|
numbers in <var title="">input list</var> whose unit is
|
|
<i>percentage</i>.</p>
|
|
|
|
<p>Let <var title="">count relative</var> be the number of
|
|
entries in <var title="">input list</var> whose unit is
|
|
<i>relative</i>.</p>
|
|
|
|
<p>Let <var title="">total relative</var> be the sum of all the
|
|
numbers in <var title="">input list</var> whose unit is
|
|
<i>relative</i>.</p>
|
|
|
|
<p>Let <var title="">count absolute</var> be the number of
|
|
entries in <var title="">input list</var> whose unit is
|
|
<i>absolute</i>.</p>
|
|
|
|
<p>Let <var title="">total absolute</var> be the sum of all the
|
|
numbers in <var title="">input list</var> whose unit is
|
|
<i>absolute</i>.</p>
|
|
|
|
<p>Let <var title="">remaining space</var> be the value of <var title="">input dimension</var>.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>If <var title="">total absolute</var> is greater than <var title="">remaining space</var>, then for each entry in <var title="">input list</var> whose unit is <i>absolute</i>, set the
|
|
corresponding value in <var title="">output list</var> to the
|
|
number of the entry in <var title="">input list</var> multiplied
|
|
by <var title="">remaining space</var> and divided by <var title="">total absolute</var>. Then, set <var title="">remaining
|
|
space</var> to zero.</p>
|
|
|
|
<p>Otherwise, for each entry in <var title="">input list</var>
|
|
whose unit is <i>absolute</i>, set the corresponding value in <var title="">output list</var> to the number of the entry in <var title="">input list</var>. Then, decrement <var title="">remaining
|
|
space</var> by <var title="">total absolute</var>.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>If <var title="">total percentage</var> multiplied by the <var title="">input dimension</var> and divided by 100 is greater than
|
|
<var title="">remaining space</var>, then for each entry in <var title="">input list</var> whose unit is <i>percentage</i>, set the
|
|
corresponding value in <var title="">output list</var> to the
|
|
number of the entry in <var title="">input list</var> multiplied
|
|
by <var title="">remaining space</var> and divided by <var title="">total percentage</var>. Then, set <var title="">remaining
|
|
space</var> to zero.</p>
|
|
|
|
<p>Otherwise, for each entry in <var title="">input list</var>
|
|
whose unit is <i>percentage</i>, set the corresponding value in
|
|
<var title="">output list</var> to the number of the entry in <var title="">input list</var> multiplied by the <var title="">input
|
|
dimension</var> and divided by 100. Then, decrement <var title="">remaining space</var> by <var title="">total
|
|
percentage</var> multiplied by the <var title="">input
|
|
dimension</var> and divided by 100.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>For each entry in <var title="">input list</var> whose unit is
|
|
<i>relative</i>, set the corresponding value in <var title="">output list</var> to the number of the entry in <var title="">input list</var> multiplied by <var title="">remaining
|
|
space</var> and divided by <var title="">total relative</var>.</p>
|
|
|
|
</li>
|
|
|
|
<li><p>Return <var title="">output list</var>.</p></li>
|
|
|
|
</ol><p>User agents working with integer values for frame widths (as
|
|
opposed to user agents that can lay frames out with subpixel
|
|
accuracy) are expected to distribute the remainder first to the last
|
|
entry whose unit is <i>relative</i>, then equally (not
|
|
proportionally) to each entry whose unit is <i>percentage</i>, then
|
|
equally (not proportionally) to each entry whose unit is
|
|
<i>absolute</i>, and finally, failing all else, to the last
|
|
entry.</p>
|
|
|
|
|
|
</div><div class="impl">
|
|
|
|
<h3 id="interactive-media"><span class="secno">10.6 </span>Interactive media</h3>
|
|
|
|
<h4 id="links-forms-and-navigation"><span class="secno">10.6.1 </span>Links, forms, and navigation</h4>
|
|
|
|
<p>User agents are expected to allow the user to control aspects of
|
|
<a href="links.html#hyperlink">hyperlink</a> activation and <a href="association-of-controls-and-forms.html#form-submission">form submission</a>,
|
|
such as which <a href="browsers.html#browsing-context">browsing context</a> is to be used for the
|
|
subsequent <a href="history.html#navigate" title="navigate">navigation</a>.</p>
|
|
|
|
<p>User agents are expected to allow users to discover the
|
|
destination of <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a> and of
|
|
<a href="forms.html#the-form-element" title="form">forms</a> before triggering their <a href="history.html#navigate" title="navigate">navigation</a>.</p>
|
|
|
|
|
|
<p>User agents are expected to allow users to
|
|
<a href="history.html#navigate">navigate</a> <a href="browsers.html#browsing-context" title="browsing
|
|
context">browsing contexts</a> to the resources <a href="urls.html#resolve-a-url" title="resolve a url">indicated</a> by the <code title="">cite</code> attributes on <code><a href="text-level-semantics.html#the-q-element">q</a></code>,
|
|
<code><a href="grouping-content.html#the-blockquote-element">blockquote</a></code>,
|
|
<code><a href="edits.html#the-ins-element">ins</a></code>, and <code><a href="edits.html#the-del-element">del</a></code> elements.</p>
|
|
|
|
<p>User agents are expected to surface <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a> created by <code><a href="semantics.html#the-link-element">link</a></code>
|
|
elements in their user interface.</p>
|
|
|
|
<p class="note">While <code><a href="semantics.html#the-link-element">link</a></code> elements that create <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a> will match the ':link' or
|
|
':visited' pseudo-classes, will react to clicks if visible, and so
|
|
forth, this does not extend to any browser interface constructs that
|
|
expose those same links. Activating a link through the browser's
|
|
interface, rather than in the page itself, does not trigger <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> events and the like.</p>
|
|
|
|
|
|
|
|
|
|
<h4 id="the-title-attribute-0"><span class="secno">10.6.2 </span>The <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute</h4>
|
|
|
|
<p>Given an element (e.g. the element designated by the mouse
|
|
cursor), if the element, or one of its ancestors, has a <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute, and the nearest such
|
|
attribute has a value that is not the empty string, it is expected
|
|
that the user agent will expose the contents of that attribute as a
|
|
tooltip.</p>
|
|
|
|
<p>U+000A LINE FEED (LF) characters are expected to cause line
|
|
breaks in the tooltip, U+0009 CHARACTER TABULATION (tab) characters
|
|
are expected to render as a non-zero horizontal shift that lines up
|
|
the next glpyh with the next tab stop, with tab stops occurring at
|
|
points that are multiples of 8 times the width of a U+0020 SPACE
|
|
character.</p>
|
|
|
|
<p>User agents are encouraged to make it possible to view tooltips
|
|
without the use of a pointing device, since not all users are able
|
|
to use pointing devices.</p>
|
|
|
|
<div class="example">
|
|
|
|
<p>For example, a visual user agent could make elements with a
|
|
<code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute focusable, and
|
|
could make any focused element with a <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute show its tooltip under
|
|
the element while the element has focus. This would allow a user to
|
|
tab around the document to find all the advisory text.</p>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<p>As another example, a screen reader could provide an audio cue
|
|
when reading an element with a tooltip, with an associated key to
|
|
read the last tooltip for which a cue was played.</p>
|
|
|
|
</div>
|
|
|
|
|
|
<h4 id="editing-hosts"><span class="secno">10.6.3 </span>Editing hosts</h4>
|
|
|
|
<p>The current text editing caret (the one at the <a href="editing.html#caret-position">caret
|
|
position</a> in a focused <a href="editing.html#editing-host">editing host</a>) is expected
|
|
to act like an inline replaced element with the vertical dimensions
|
|
of the caret and with zero width for the purposes of the CSS
|
|
rendering model.</p>
|
|
|
|
<p class="note">This means that even an empty block can have the
|
|
caret inside it, and that when the caret is in such an element, it
|
|
prevents margins from collapsing through the element.</p>
|
|
|
|
|
|
|
|
<h4 id="text-rendered-in-native-user-interfaces"><span class="secno">10.6.4 </span>Text rendered in native user interfaces</h4>
|
|
|
|
<p>User agents are expected to honor the Unicode semantics of text
|
|
that is exposed in user interfaces, for example supporting the
|
|
bidirectional algorithm in text shown in dialogs, title bars, pop-up
|
|
menus, and tooltips. Text from elements (either attribute values or
|
|
the contents of elements) is expected to be rendered in a manner
|
|
that honors <a href="elements.html#the-directionality">the directionality</a> of the element from
|
|
which the text was obtained.</p>
|
|
|
|
<div class="example">
|
|
|
|
<p>Consider the following markup, which has Hebrew text asking for
|
|
a programming language, the languages being text for which a
|
|
left-to-right direction is important given the punctuation in some
|
|
of their names:</p>
|
|
|
|
<pre><p dir="rtl" lang="he">
|
|
<label>
|
|
<span dir="rtl" lang="he" title="">בחר שפת תכנות:</span>
|
|
<select>
|
|
<option dir="ltr">C++</option>
|
|
<option dir="ltr">C#</option>
|
|
<option dir="ltr">FreePascal</option>
|
|
<option dir="ltr">F#</option>
|
|
</select>
|
|
</label>
|
|
</p></pre>
|
|
|
|
<p>If the <code><a href="the-button-element.html#the-select-element">select</a></code> element was rendered as a drop down
|
|
box, a correct rendering would ensure that the punctuation was the
|
|
same both in the drop down, and in the box showing the current
|
|
selection.</p>
|
|
|
|
<p><img alt="" height="105" src="bidiselect.png" width="206"></p>
|
|
</div>
|
|
|
|
<p>A string provided by a script (e.g. the argument to <code title="dom-alert"><a href="timers.html#dom-alert">window.alert()</a></code>) is expected to be treated
|
|
as an independent set of one or more bidirectional algorithm
|
|
paragraphs when displayed, as defined by the bidirectional
|
|
algorithm, including, for instance, supporting the
|
|
paragraph-breaking behaviour of U+000A LINE FEED (LF) characters.
|
|
For the purposes of determining the paragraph level of such text in
|
|
the bidirectional algorithm, this specification does <em>not</em>
|
|
provide a higher-level override of rules P2 and P3. <a href="references.html#refsBIDI">[BIDI]</a></p>
|
|
|
|
<p>When necessary, authors can enforce a particular direction for a
|
|
given paragraph by starting it with the Unicode U+200E LEFT-TO-RIGHT
|
|
MARK or U+200F RIGHT-TO-LEFT MARK characters.</p>
|
|
|
|
<div class="example">
|
|
|
|
<p>Thus, the following script:</p>
|
|
|
|
<pre>alert('\u05DC\u05DE\u05D3 HTML \u05D4\u05D9\u05D5\u05DD!')</pre>
|
|
|
|
<p>...would always result in a message reading
|
|
"<bdo dir="rtl" title="">למד LMTH היום!</bdo>"
|
|
(not "<bdo dir="ltr" title="">דמל HTML םויה!</bdo>"),
|
|
regardless of the language of the user agent interface or the
|
|
direction of the page or any of its elements.</p>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<p>For a more complex example, consider the following script:</p>
|
|
|
|
<pre class="bad">/* Warning: this script does not handle right-to-left scripts correctly */
|
|
var s;
|
|
if (s = prompt('What is your name?')) {
|
|
alert(s + '! Ok, Fred, ' + s + ', and Wilma will get the car.');
|
|
}</pre>
|
|
|
|
<p>When the user enters "<kbd>Kitty</kbd>", the user agent would
|
|
alert "<samp>Kitty! Ok, Fred, Kitty, and Wilma will get the
|
|
car.</samp>". However, if the user enters "<kbd dir="rtl" lang="ar">لا أفهم</kbd>",
|
|
then the bidirectional algorithm will determine that the direction
|
|
of the paragraph is right-to-left, and so the output will be the
|
|
following unintended mess: "<samp><bdo dir="rtl">لا أفهم! derF ,kO, لا أفهم, rac eht teg lliw amliW dna.</bdo></samp>"</p>
|
|
|
|
<p>To force an alert that starts with user-provided text (or other
|
|
text of unknown directionality) to render left-to-right, the string
|
|
can be prefixed with a U+200E LEFT-TO-RIGHT MARK character:</p>
|
|
|
|
<pre>var s;
|
|
if (s = prompt('What is your name?')) {
|
|
alert('<strong>\u200E</strong>' + s + '! Ok, Fred, ' + s + ', and Wilma will get the car.');
|
|
}</pre>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<h3 id="print-media"><span class="secno">10.7 </span>Print media</h3>
|
|
|
|
<p>User agents are expected to allow the user to request the
|
|
opportunity to <dfn id="obtain-a-physical-form">obtain a physical form</dfn> (or a
|
|
representation of a physical form) of a <code><a href="infrastructure.html#document">Document</a></code>. For
|
|
example, selecting the option to print a page or convert it to PDF
|
|
format.</p>
|
|
|
|
<p>When the user actually <a href="#obtain-a-physical-form" title="obtain a physical
|
|
form">obtains a physical form</a> (or a representation of a
|
|
physical form) of a <code><a href="infrastructure.html#document">Document</a></code>, the user agent is
|
|
expected to create a new rendering of the <code><a href="infrastructure.html#document">Document</a></code> for
|
|
the print media.</p>
|
|
|
|
|
|
|
|
</div></body></html>
|