CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Writing Modes Level 3</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 47d87adb7, updated Tue Feb 18 17:18:43 2025 -0800" name="generator"> <link href="https://www.w3.org/TR/css-writing-modes-3/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="930c6794a23d4a4ba943b3829ec3f82ba698c761" name="revision"> <meta content="dark light" name="color-scheme"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <style> object { vertical-align: middle; } .sidebar { float: right; background: #eee; border: solid gray; margin: 1em; } @media (prefers-color-scheme: dark) { .sidebar { background: var(--borderedblock-bg, #eee); } } .sidebar .figure { margin: 1em; } .sidebar object { margin: 0 auto; display: block; } .figurepair { display: table; margin: 1em auto; } .figurepair .figure { display: table-cell; padding-left: .5em; padding-right: .5em; } h2, .example { clear: both; } .figure img, .figure object, .example img, dd img { max-width: 100%; display: block; margin: 1em auto; } div.figure table { margin:auto; } pre.ascii-art { display: table; /* shrinkwrap */ margin: 1em auto; line-height: normal; } </style> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-mdn-anno */ :root { --mdn-bg: #EEE; --mdn-shadow: #999; --mdn-nosupport-text: #ccc; --mdn-pass: green; --mdn-fail: red; } @media (prefers-color-scheme: dark) { :root { --mdn-bg: #222; --mdn-shadow: #444; --mdn-nosupport-text: #666; --mdn-pass: #690; --mdn-fail: #d22; } } .mdn-anno { background: var(--mdn-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--mdn-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: 0.2em; position: absolute; right: 0.3em; top: auto; white-space: nowrap; word-wrap: normal; z-index: 8; } .mdn-anno.unpositioned { display: none; } .mdn-anno.overlapping-main { opacity: .2; transition: opacity .1s; } .mdn-anno[open] { opacity: 1; z-index: 9; min-width: 9em; } .mdn-anno:hover { opacity: 1; outline: var(--text, black) 1px solid; } .mdn-anno > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .mdn-anno > summary > .less-than-two-engines-flag { color: var(--mdn-fail); padding-right: 2px; } .mdn-anno > summary > .all-engines-flag { color: var(--mdn-pass); padding-right: 2px; } .mdn-anno > summary > span { color: #fff; background-color: #000; font-weight: normal; font-family: zillaslab, Palatino, "Palatino Linotype", serif; padding: 2px 3px 0px 3px; line-height: 1.3em; vertical-align: top; } .mdn-anno > .feature { margin-top: 20px; } .mdn-anno > .feature:not(:first-of-type) { border-top: 1px solid #999; margin-top: 6px; padding-top: 2px; } .mdn-anno > .feature > .less-than-two-engines-text { color: var(--mdn-fail); } .mdn-anno > .feature > .all-engines-text { color: var(--mdn-pass); } .mdn-anno > .feature > p { font-size: .75em; margin-top: 6px; margin-bottom: 0; } .mdn-anno > .feature > p + p { margin-top: 3px; } .mdn-anno > .feature > .support { display: block; font-size: 0.6em; margin: 0; padding: 0; margin-top: 2px; } .mdn-anno > .feature > .support + div { padding-top: 0.5em; } .mdn-anno > .feature > .support > hr { display: block; border: none; border-top: 1px dotted #999; padding: 3px 0px 0px 0px; margin: 2px 3px 0px 3px; } .mdn-anno > .feature > .support > hr::before { content: ""; } .mdn-anno > .feature > .support > span { padding: 0.2em 0; display: block; display: table; } .mdn-anno > .feature > .support > span.no { color: var(--mdn-nosupport-text); filter: grayscale(100%); } .mdn-anno > .feature > .support > span.no::before { opacity: 0.5; } .mdn-anno > .feature > .support > span:first-of-type { padding-top: 0.5em; } .mdn-anno > .feature > .support > span > span { padding: 0 0.5em; display: table-cell; } .mdn-anno > .feature > .support > span > span:first-child { width: 100%; } .mdn-anno > .feature > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .mdn-anno > .feature > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .mdn-anno > .feature > .support > .chrome_android::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .firefox_android::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .edge_blink::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .mdn-anno > .feature > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); } .mdn-anno > .feature > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .mdn-anno > .feature > .support > .safari_ios::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .mdn-anno > .feature > .support > .nodejs::before { background-image: url(https://nodejs.org/favicon.ico); } .mdn-anno > .feature > .support > .opera_android::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .mdn-anno > .feature > .support > .samsunginternet_android::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .mdn-anno > .feature > .support > .webview_android::before { background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); } .name-slug-mismatch { color: red; } .caniuse-status:hover { z-index: 9; } /* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */; .h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { right: -6.7em; } .h-entry p + .mdn-anno { margin-top: 0; } h2 + .mdn-anno.after { margin: -48px 0 0 0; } h3 + .mdn-anno.after { margin: -46px 0 0 0; } h4 + .mdn-anno.after { margin: -42px 0 0 0; } h5 + .mdn-anno.after { margin: -40px 0 0 0; } h6 + .mdn-anno.after { margin: -40px 0 0 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <style>/* Boilerplate: style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSS Writing Modes Level 3</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2023-08-28">28 August 2023</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://drafts.csswg.org/css-writing-modes-3/">https://drafts.csswg.org/css-writing-modes-3/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2019/REC-css-writing-modes-3-20191210/" rel="prev">https://www.w3.org/TR/2019/REC-css-writing-modes-3-20191210/</a> <dt>Test Suite: <dd><a href="http://test.csswg.org/suites/css-writing-modes-3_dev/nightly-unstable/">http://test.csswg.org/suites/css-writing-modes-3_dev/nightly-unstable/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-writing-modes-3">CSSWG Issues Repository</a> <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/30">Tracker</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple) <dd class="editor p-author h-card vcard" data-editor-id="45369"><a class="p-name fn u-email email" href="mailto:kojiishi@gmail.com">Koji Ishii</a> (Google) <dt class="editor">Former Editors: <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:murakami@antenna.co.jp">Shinyu Murakami</a> (Antenna House) <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:paulnel@microsoft.com">Paul Nelson</a> (Microsoft) <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:michelsu@microsoft.com">Michel Suignard</a> (Microsoft) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-writing-modes-3/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2023 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> CSS Writing Modes Level 3 defines CSS support for various writing modes and their combinations, including left-to-right and right-to-left text ordering as well as horizontal and vertical orientations. <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-writing-modes” in the title, like this: “[css-writing-modes] …summary of comment…”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-writing-modes%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. <div class="correction"><a href="https://www.w3.org/Consortium/Process/#candidate-correction">Candidate corrections</a> are marked in the document.</div> </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#text-flow">1 Introduction to Writing Modes</a> <ol class="toc"> <li><a href="#placement">1.1 Module Interactions</a> <li><a href="#values">1.2 Value Definitions and Terminology</a> </ol> <li> <a href="#text-direction">2 Inline Direction and Bidirectionality</a> <ol class="toc"> <li><a href="#direction">2.1 Specifying Directionality: the direction property</a> <li><a href="#unicode-bidi">2.2 Embeddings and Overrides: the unicode-bidi property</a> <li><a href="#bidi-example">2.3 Example of Bidirectional Text</a> <li> <a href="#bidi-algo">2.4 Applying the Bidirectional Reordering Algorithm</a> <ol class="toc"> <li><a href="#bidi-para-direction">2.4.1 Bidi Paragraph Embedding Levels</a> <li><a href="#bidi-control-codes">2.4.2 CSS–Unicode Bidi Control Translation, Text Reordering</a> <li><a href="#bidi-atomic-inlines">2.4.3 Bidi Treatment of Atomic Inlines</a> <li><a href="#bidi-embedding-breaks">2.4.4 Paragraph Breaks Within Embeddings and Isolates</a> <li><a href="#bidi-box-model">2.4.5 Reordering-induced Box Fragmentation</a> </ol> </ol> <li> <a href="#vertical-modes">3 Vertical Writing Modes</a> <ol class="toc"> <li><a href="#vertical-intro">3.1 Introduction to Vertical Writing</a> <li> <a href="#block-flow">3.2 Block Flow Direction: the writing-mode property</a> <ol class="toc"> <li><a href="#svg-writing-mode">3.2.1 Obsolete SVG1.1 writing-mode Values</a> </ol> </ol> <li> <a href="#inline-alignment">4 Inline-level Alignment</a> <ol class="toc"> <li><a href="#intro-baselines">4.1 Introduction to Baselines</a> <li><a href="#text-baselines">4.2 Text Baselines</a> <li><a href="#replaced-baselines">4.3 Atomic Inline Baselines</a> <li><a href="#baseline-alignment">4.4 Baseline Alignment</a> </ol> <li> <a href="#intro-text-layout">5 Introduction to Vertical Text Layout</a> <ol class="toc"> <li> <a href="#text-orientation">5.1 Orienting Text: the text-orientation property</a> <ol class="toc"> <li><a href="#vertical-font-features">5.1.1 Vertical Typesetting and Font Features</a> <li><a href="#vertical-orientations">5.1.2 Mixed Vertical Orientations</a> <li><a href="#glyph-orientation">5.1.3 Obsolete: the SVG1.1 glyph-orientation-vertical property</a> </ol> </ol> <li> <a href="#abstract-box">6 Abstract Box Terminology</a> <ol class="toc"> <li><a href="#abstract-axes">6.1 Abstract Dimensions</a> <li><a href="#logical-directions">6.2 Flow-relative Directions</a> <li><a href="#line-directions">6.3 Line-relative Directions</a> <li><a href="#logical-to-physical">6.4 Abstract-to-Physical Mappings</a> </ol> <li> <a href="#abstract-layout">7 Abstract Box Layout</a> <ol class="toc"> <li><a href="#vertical-layout">7.1 Principles of Layout in Vertical Writing Modes</a> <li><a href="#dimension-mapping">7.2 Dimensional Mapping</a> <li> <a href="#orthogonal-flows">7.3 Orthogonal Flows</a> <ol class="toc"> <li><a href="#orthogonal-auto">7.3.1 Available Space of Orthogonal Flows</a> <li><a href="#orthogonal-layout">7.3.2 Auto-sizing Orthogonal Flow Roots</a> <li><a href="#orthogonal-pagination">7.3.3 Fragmenting Orthogonal Flows</a> </ol> <li><a href="#logical-direction-layout">7.4 Flow-Relative Mappings</a> <li><a href="#line-mappings">7.5 Line-Relative Mappings</a> <li><a href="#physical-only">7.6 Purely Physical Mappings</a> </ol> <li> <a href="#principal-flow">8 The Principal Writing Mode</a> <ol class="toc"> <li><a href="#icb">8.1 Propagation to the Initial Containing Block</a> <li><a href="#page-direction">8.2 Page Flow: the page progression direction</a> </ol> <li> <a href="#text-combine">9 Glyph Composition</a> <ol class="toc"> <li> <a href="#text-combine-upright">9.1 Horizontal-in-Vertical Composition: the text-combine-upright property</a> <ol class="toc"> <li><a href="#text-combine-runs">9.1.1 Text Run Rules</a> <li><a href="#text-combine-layout">9.1.2 Layout Rules</a> <li> <a href="#text-combine-compression">9.1.3 Compression Rules</a> <ol class="toc"> <li><a href="#text-combine-fullwidth">9.1.3.1 Full-width Characters</a> </ol> </ol> </ol> <li><a href="#priv-sec">10 Privacy and Security Considerations</a> <li> <a href="#changes"> Changes</a> <ol class="toc"> <li><a href="#changes-2019"> Changes since the December 2019 CSS Writing Modes Module Level 4 Recommendation</a> </ol> <li><a href="#acknowledgements"> Acknowledgements</a> <li><a href="#script-orientations"> Appendix A: Vertical Scripts in Unicode</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#property-index"> Property Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="text-flow">1. Introduction to Writing Modes<a class="self-link" href="#text-flow"></a></h2> CSS Writing Modes Level 3 defines CSS features to support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts). A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="writing-mode">writing mode</dfn> in CSS is determined by the <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a>, <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction">direction</a>, and <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation">text-orientation</a> properties. It is defined primarily in terms of its <a data-link-type="dfn" href="#inline-base-direction" id="ref-for-inline-base-direction">inline base direction</a> and <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction">block flow direction</a>: <div class="sidebar"> <div class="figure right"> <a href="diagrams/text-flow-vectors-tb.svg"> <img alt="Text flowing left to right, Latin glyphs set upright, and lines stacked top to bottom" class="landscape" height="160" src="diagrams/text-flow-vectors-tb.png" width="220"></a> Latin-based writing mode </div> <div class="figure left"> <a href="diagrams/text-flow-vectors-lr-reverse.svg"> <img alt="Text flowing top to bottom, Latin glyphs tipped sideways to the right (rotated 90° clockwise), and lines stacked left to right" class="landscape" height="220" src="diagrams/text-flow-vectors-lr-reverse.png" width="160"></a> Mongolian-based writing mode </div> <div class="figure right"> <a href="diagrams/text-flow-vectors-tb.svg"> <img alt="Text flowing left to right, Latin glyphs set upright, and lines stacked top to bottom" class="landscape" height="160" src="diagrams/text-flow-vectors-tb.png" width="220"></a> <a href="diagrams/text-flow-vectors-rl.svg"> <img alt="Text flowing top to bottom, Latin glyphs tipped sideways to the right (rotated 90° clockwise), and lines stacked right to left" class="landscape" height="220" src="diagrams/text-flow-vectors-rl.png" width="160"></a> Han-based writing modes </div> </div> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inline-base-direction">inline base direction</dfn> is the primary direction in which content is ordered on a line and defines on which sides the “start” and “end” of a line are. The <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction①">direction</a> property specifies the inline base direction of a box and, together with the <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi">unicode-bidi</a> property and the inherent directionality of any text content, determines the ordering of inline-level content within a line. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="block-flow-direction">block flow direction</dfn> is the direction in which block-level boxes stack and the direction in which line boxes stack within a block container. The <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①">writing-mode</a> property determines the block flow direction. Writing systems typically have one or two native writing modes. Some examples are: <ul> <li>Latin-based systems are typically written using a left-to-right inline direction with a downward (top-to-bottom) block flow direction. <li>Arabic-based systems are typically written using a right-to-left inline direction with a downward (top-to-bottom) block flow direction. <li>Mongolian-based systems are typically written using a top-to-bottom inline direction with a rightward (left-to-right) block flow direction. <li>Han-based systems are commonly written using a left-to-right inline direction with a downward (top-to-bottom) block flow direction, or a top-to-bottom inline direction with a leftward (right-to-left) block flow direction. Many magazines and newspapers will mix these two writing modes on the same page. </ul> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="horizontal-writing-mode">horizontal writing mode</dfn> is one with horizontal lines of text, i.e. a downward or upward block flow. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="vertical-writing-mode">vertical writing mode</dfn> is one with vertical lines of text, i.e. a leftward or rightward block flow. These terms should not be confused with <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="vertical-block-flow">vertical block flow</dfn> (which is a downward or upward block flow) and <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="horizontal-block-flow">horizontal block flow</dfn> (which is leftward or rightward block flow). To avoid confusion, CSS specifications avoid this latter set of terms. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="typographic-mode">typographic mode</dfn> determines whether to use typographic conventions specific to vertical flow for <a data-link-type="dfn" href="#vertical-script" id="ref-for-vertical-script">vertical scripts</a> (<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="vertical-typographic-mode">vertical typographic mode</dfn>) or to use the typographic conventions of <a data-link-type="dfn" href="#horizontal-writing-mode" id="ref-for-horizontal-writing-mode">horizontal writing modes</a> (<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="horizontal-typographic-mode">horizontal typographic mode</dfn>). This concept distinguishes vertical typesetting from rotated horizontal typesetting. The <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①">text-orientation</a> component of the writing mode controls the <a data-link-type="dfn">glyph orientation</a> in <a data-link-type="dfn" href="#vertical-typographic-mode" id="ref-for-vertical-typographic-mode">vertical typographic modes</a>, dictating whether a particular <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit">typographic character unit</a> is <a data-link-type="dfn" href="#typeset-upright" id="ref-for-typeset-upright">typeset upright</a> or <a data-link-type="dfn" href="#typeset-sideways" id="ref-for-typeset-sideways">typeset sideways</a>. See Unicode Technical Note #22 <a data-link-type="biblio" href="#biblio-utn22" title="Robust Vertical Text Layout">[UTN22]</a> (<a href="http://fantasai.inkedblade.net/style/discuss/vertical-text/paper">HTML version</a>) for a more in-depth introduction to writing modes and vertical text. <h3 class="heading settled" data-level="1.1" id="placement">1.1. Module Interactions<a class="self-link" href="#placement"></a></h3> This module replaces and extends the <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①">unicode-bidi</a> and <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction②">direction</a> features defined in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> sections 8.6 and 9.10. The interaction of its features with other text operations in setting lines of text is described in <a href="https://drafts.csswg.org/css-text-3/#order"><cite>CSS Text 3</cite> § A Text Processing Order of Operations</a>. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value">computed values</a> of the <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②">writing-mode</a>, <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction③">direction</a>, and <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation②">text-orientation</a> properties (even on elements to which these properties themselves don’t apply <a data-link-type="biblio" href="#biblio-css-cascade-4" title="CSS Cascading and Inheritance Level 4">[CSS-CASCADE-4]</a>) are broadly able to influence the computed values of other, unrelated properties through calculations such as the computation of <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#font-relative-length" id="ref-for-font-relative-length">font-relative lengths</a> or the cascade of <a href="http://www.w3.org/TR/css-logical-1/">flow-relative properties</a> which purposefully depend on the computed <a data-link-type="dfn" href="#writing-mode" id="ref-for-writing-mode">writing mode</a> or on font metrics that can depend on the writing mode. <h3 class="heading settled" data-level="1.2" id="values">1.2. Value Definitions and Terminology<a class="self-link" href="#values"></a></h3> This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from <a data-link-type="biblio" href="#biblio-css-values-3" title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</a>. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types. In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> as their property value. For readability they have not been repeated explicitly. Other important terminology and concepts used in this specification are defined in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> and <a data-link-type="biblio" href="#biblio-css-text-3" title="CSS Text Module Level 3">[CSS-TEXT-3]</a>. <h2 class="heading settled" data-level="2" id="text-direction">2. Inline Direction and Bidirectionality<a class="self-link" href="#text-direction"></a></h2> While the characters in most scripts are written from left to right, certain scripts are written from right to left. In some documents, in particular those written with the Arabic or Hebrew script, and in some mixed-language contexts, text in a single (visually displayed) block may appear with mixed directionality. This phenomenon is called <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="bidirectionality">bidirectionality</dfn>, or "bidi" for short. <div class="figure"> <img alt="An example of bidirectional text is a Latin name in an Arabic sentence. The sentence overall is typeset right-to-left, but the letters in the Latin word in the middle are typeset left-to-right." height="82" src="diagrams/bidi.png" width="225"> Bidirectionality </div> The Unicode standard (<a href="http://www.unicode.org/reports/tr9/">Unicode Standard Annex #9</a>) defines a complex algorithm for determining the proper ordering of bidirectional text. The algorithm consists of an implicit part based on character properties, as well as explicit controls for embeddings and overrides. CSS relies on this algorithm to achieve proper bidirectional rendering. Two CSS properties, <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction④">direction</a> and <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②">unicode-bidi</a>, provide explicit embedding, isolation, and override controls in the CSS layer. Because the base directionality of a text depends on the structure and semantics of the document, the direction and unicode-bidi properties should in most cases be used only to map bidi information in the markup to its corresponding CSS styles. The HTML specifications (<a data-link-type="biblio" href="#biblio-html401" title="HTML 4.01 Specification">[HTML401]</a>, section 8.2, and <a href="https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering"><cite>HTML</cite> § 15.3.5 Bidirectional text</a>) define bidirectionality behavior for HTML elements. If a document language provides markup features to control bidi, authors and users should use those features instead and not specify CSS rules to override them. <h3 class="heading settled" data-level="2.1" id="direction">2.1. Specifying Directionality: the <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction⑥">direction</a> property<a class="self-link" href="#direction"></a></h3> <table class="def propdef" data-link-for-hint="direction"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-direction">direction</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">ltr <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> rtl <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>ltr <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>not animatable </table> Because HTML UAs can turn off CSS styling, we recommend HTML authors to use the HTML <code>dir</code> attribute and <bdo> element to ensure correct bidirectional layout in the absence of a style sheet. Authors should not use <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction⑦">direction</a> in HTML documents. This property specifies the <a data-link-type="dfn" href="#inline-base-direction" id="ref-for-inline-base-direction①">inline base direction</a> or directionality of any bidi paragraph, embedding, isolate, or override established by the box. (See <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi④">unicode-bidi</a>.) In addition, it informs the ordering of <a href="https://www.w3.org/TR/CSS2/tables.html">table</a> column layout, the direction of horizontal <a href="https://www.w3.org/TR/CSS2/visufx.html#overflow">overflow</a>, and the default alignment of text within a line, and other layout effects that depend on the box’s inline base direction. Values for this property have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="direction" data-dfn-type="value" data-export id="valdef-direction-ltr">ltr</dfn> <dd>This value sets <a data-link-type="dfn" href="#inline-base-direction" id="ref-for-inline-base-direction②">inline base direction</a> (bidi directionality) to <a data-link-type="dfn" href="#line-left" id="ref-for-line-left">line-left</a>-to-<a data-link-type="dfn" href="#line-right" id="ref-for-line-right">line-right</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="direction" data-dfn-type="value" data-export id="valdef-direction-rtl">rtl</dfn> <dd>This value sets <a data-link-type="dfn" href="#inline-base-direction" id="ref-for-inline-base-direction③">inline base direction</a> (bidi directionality) to <a data-link-type="dfn" href="#line-right" id="ref-for-line-right①">line-right</a>-to-<a data-link-type="dfn" href="#line-left" id="ref-for-line-left①">line-left</a>. </dl> The <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction⑧">direction</a> property has no effect on bidi reordering when specified on inline boxes whose <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi⑤">unicode-bidi</a> value is <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal">normal</a>, because the box does not open an additional level of embedding with respect to the bidirectional algorithm. The <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction⑨">direction</a> property, when specified for table column boxes, is not inherited by cells in the column since columns are not the ancestors of the cells in the document tree. Thus, CSS cannot easily capture the "dir" attribute inheritance rules described in <a data-link-type="biblio" href="#biblio-html401" title="HTML 4.01 Specification">[HTML401]</a>, section 11.3.2.1. <h3 class="heading settled" data-level="2.2" id="unicode-bidi">2.2. Embeddings and Overrides: the <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi⑥">unicode-bidi</a> property<a class="self-link" href="#unicode-bidi"></a></h3> <table class="def propdef" data-link-for-hint="unicode-bidi"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-unicode-bidi">unicode-bidi</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> embed | isolate | bidi-override | isolate-override | plaintext <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>normal <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements, but see prose <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>not animatable </table> Because HTML UAs can turn off CSS styling, we recommend HTML authors to use the HTML <code>dir</code> attribute, <bdo> element, and appropriate distinction of text-level vs. grouping-level HTML element types to ensure correct bidirectional layout in the absence of a style sheet. Authors should not use <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi⑦">unicode-bidi</a> in HTML documents. Normally (i.e. when <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi⑧">unicode-bidi</a> is <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal①">normal</a>) an inline box is transparent to the unicode bidi algorithm; content is ordered as if the box’s boundaries were not there. Other values of the unicode-bidi property cause inline boxes to create scopes within the algorithm, and to override the intrinsic directionality of text. The following informative table summarizes the box-internal and box-external effects of <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①⓪">unicode-bidi</a>: <table class="data"> <caption>Effect of non-<a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal②">normal</a> values of <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①①">unicode-bidi</a> on inline boxes</caption> <colgroup span="2"> <colgroup span="2"> <thead> <tr> <th colspan="2" rowspan="2"> <th colspan="2" scope="rowgroup"><abbr title="To surrounding contents, the box behaves as if its boundary were...">Outside</abbr> <tr> <th><abbr title="a strong character of the box's 'direction'.">strong</abbr> <th><abbr title="a neutral character.">neutral</abbr> <tbody> <tr> <th rowspan="3" scope="colgroup"><abbr title="Within the box, content is ordered as if...">Inside</abbr> <th><abbr title="the box's boundaries were strong characters of the box's 'direction'.">scoped</abbr> <td><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-embed" id="ref-for-valdef-unicode-bidi-embed">embed</a> <td><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-isolate" id="ref-for-valdef-unicode-bidi-isolate">isolate</a> <tr> <th><abbr title="all text consisted of strong characters of the box's 'direction'.">override</abbr> <td><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-bidi-override" id="ref-for-valdef-unicode-bidi-bidi-override">bidi-override</a> <td><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-isolate-override" id="ref-for-valdef-unicode-bidi-isolate-override">isolate-override</a> <tr> <th><abbr title="the box were a standalone paragraph ordered using UAX9 heuristics.">plaintext</abbr> <td>— <td><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-plaintext" id="ref-for-valdef-unicode-bidi-plaintext">plaintext</a> </table> Values for this property have the following (normative) meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="unicode-bidi" data-dfn-type="value" data-export id="valdef-unicode-bidi-normal">normal</dfn> <dd>The box does not open an additional level of embedding with respect to the bidirectional algorithm. For inline boxes, implicit reordering works across box boundaries. <dt><dfn class="dfn-paneled css" data-dfn-for="unicode-bidi" data-dfn-type="value" data-export id="valdef-unicode-bidi-embed">embed</dfn> <dd> If the box is inline, this value creates a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="directional-embedding">directional embedding</dfn> by opening an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction①⓪">direction</a> property. Inside the box, reordering is done implicitly. This value has no effect on boxes that are not inline. <dt><dfn class="dfn-paneled css" data-dfn-for="unicode-bidi" data-dfn-type="value" data-export id="valdef-unicode-bidi-isolate">isolate</dfn> <dd> On an inline box, this <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="bidi-isolate|bidi-isolated|bidi isolation|isolation" id="bidi-isolate">bidi-isolates</dfn> its contents. This is similar to a directional embedding (and increases the embedding level accordingly) except that each sequence of inline-level boxes uninterrupted by any block boundary or <a data-link-type="dfn" href="#forced-paragraph-break" id="ref-for-forced-paragraph-break">forced paragraph break</a> is treated as an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="isolated-sequence">isolated sequence</dfn>: <ul> <li>the content within the sequence is ordered as if inside an independent paragraph with the base directionality specified by the box’s <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction①①">direction</a> property. <li>for the purpose of bidi resolution in its containing bidi paragraph, the sequence is treated as if it were a single Object Replacement Character (U+FFFC). </ul> In effect, neither is the content inside the box bidi-affected by the content surrounding the box, nor is the content surrounding the box bidi-affected by the content or specified directionality of the box. However, forced paragraph breaks within the box still create a corresponding break in the containing paragraph. This value has no effect on boxes that are not inline. <dt><dfn class="dfn-paneled css" data-dfn-for="unicode-bidi" data-dfn-type="value" data-export id="valdef-unicode-bidi-bidi-override">bidi-override</dfn> <dd>This value puts the box’s immediate inline content in a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="directional-override">directional override</dfn>. For an inline, this means that the box acts like a <a data-link-type="dfn" href="#directional-embedding" id="ref-for-directional-embedding">directional embedding</a> in the bidirectional algorithm, except that reordering within it is strictly in sequence according to the <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction①②">direction</a> property; the implicit part of the bidirectional algorithm is ignored. For a block container, the override is applied to an anonymous inline box that surrounds all of its content. <dt><dfn class="dfn-paneled css" data-dfn-for="unicode-bidi" data-dfn-type="value" data-export id="valdef-unicode-bidi-isolate-override">isolate-override</dfn> <dd>This combines the <a data-link-type="dfn" href="#bidi-isolate" id="ref-for-bidi-isolate">isolation</a> behavior of <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-isolate" id="ref-for-valdef-unicode-bidi-isolate①">isolate</a> with the <a data-link-type="dfn" href="#directional-override" id="ref-for-directional-override">directional override</a> behavior of <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-bidi-override" id="ref-for-valdef-unicode-bidi-bidi-override①">bidi-override</a>: to surrounding content, it is equivalent to isolate, but within the box content is ordered as if bidi-override were specified. It effectively nests a directional override inside an <a data-link-type="dfn" href="#isolated-sequence" id="ref-for-isolated-sequence">isolated sequence</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="unicode-bidi" data-dfn-type="value" data-export id="valdef-unicode-bidi-plaintext">plaintext</dfn> <dd> This value behaves as <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-isolate" id="ref-for-valdef-unicode-bidi-isolate③">isolate</a> except that for the purposes of the Unicode bidirectional algorithm, the base directionality of each of the box’s <a data-link-type="dfn" href="#bidi-paragraph" id="ref-for-bidi-paragraph">bidi paragraphs</a> (if a block container) or <a data-link-type="dfn" href="#isolated-sequence" id="ref-for-isolated-sequence①">isolated sequences</a> (if an inline) is determined by following the heuristic in rules P2 and P3 of the Unicode bidirectional algorithm (rather than by using the <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction①③">direction</a> property of the box). </dl> Following Unicode Bidirectional Algorithm clause HL3 <a data-link-type="biblio" href="#biblio-uax9" title="Unicode Bidirectional Algorithm">[UAX9]</a>, values other than <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal③">normal</a> effectively insert the corresponding Unicode bidi control codes into the text stream at the start and end of the inline element before passing the paragraph to the Unicode bidirectional algorithm for reordering. (See <a href="#bidi-control-codes">§ 2.4.2 CSS–Unicode Bidi Control Translation, Text Reordering</a>.) <table class="data" id="bidi-control-codes-injection-table"> <caption>Bidi control codes injected by <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①②">unicode-bidi</a> at the start/end of <a class="css" data-link-type="propdesc">display: inline</a> boxes</caption> <colgroup span="1"> <colgroup span="2"> <colgroup span="2"> <thead> <tr> <th rowspan="3" scope="col"><a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①③">unicode-bidi</a> value <th colspan="4"><a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction①④">direction</a> value <tr> <th colspan="2"><a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr">ltr</a> <th colspan="2"><a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl">rtl</a> <tr> <th>start <th>end <th>start <th>end <tbody> <tr> <th scope="row"><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal④">normal</a> <td>— <td>— <td>— <td>— <tr> <th scope="row"><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-embed" id="ref-for-valdef-unicode-bidi-embed①">embed</a> <td>LRE (U+202A) <td>PDF (U+202C) <td>RLE (U+202B) <td>PDF (U+202C) <tr> <th scope="row"><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-isolate" id="ref-for-valdef-unicode-bidi-isolate④">isolate</a> <td>LRI (U+2066) <td>PDI (U+2069) <td>RLI (U+2067) <td>PDI (U+2069) <tr> <th scope="row"><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-bidi-override" id="ref-for-valdef-unicode-bidi-bidi-override③">bidi-override</a>* <td>LRO (U+202D) <td>PDF (U+202C) <td>RLO (U+202E) <td>PDF (U+202C) <tr> <th scope="row"><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-isolate-override" id="ref-for-valdef-unicode-bidi-isolate-override①">isolate-override</a>* <td>FSI,LRO (U+2068,U+202D) <td>PDF,PDI (U+202C,U+2069) <td>FSI,RLO (U+2068,U+202E) <td>PDF,PDI (U+202C,U+2069) <tr> <th scope="row"><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-plaintext" id="ref-for-valdef-unicode-bidi-plaintext①">plaintext</a> <td>FSI (U+2068) <td>PDI (U+2069) <td>FSI (U+2068) <td>PDI (U+2069) <tfoot> <tr> <td colspan="5"> * The LRO/RLO+PDF pairs are also applied to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-inline-3/#root-inline-box" id="ref-for-root-inline-box">root inline box</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container">block container</a> if these values of <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①④">unicode-bidi</a> were specified on the block container. </table> Because the <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①⑤">unicode-bidi</a> property does not inherit, setting <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-bidi-override" id="ref-for-valdef-unicode-bidi-bidi-override④">bidi-override</a> or <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-plaintext" id="ref-for-valdef-unicode-bidi-plaintext②">plaintext</a> on a block box will not affect any descendant blocks. Therefore these values are best used on blocks and inlines that do not contain any block-level structures. Note that <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①⑥">unicode-bidi</a> does not affect the <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction①⑤">direction</a> property even in the case of <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-plaintext" id="ref-for-valdef-unicode-bidi-plaintext③">plaintext</a>, and thus does not affect direction-dependent layout calculations. Because the Unicode algorithm has a limit of 125 levels of embedding, care should be taken not to overuse <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①⑦">unicode-bidi</a> values other than <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal⑤">normal</a>. In particular, a value of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit" id="ref-for-valdef-all-inherit">inherit</a> should be used with extreme caution in deeply nested inline markup. However, for elements that are, in general, intended to be displayed as blocks, a setting of unicode-bidi: isolate is preferred to keep the element together in case the <a class="property css" data-link-type="property">display</a> is changed to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-inline" id="ref-for-valdef-display-inline">inline</a> (see example below). <h3 class="heading settled" data-level="2.3" id="bidi-example">2.3. Example of Bidirectional Text<a class="self-link" href="#bidi-example"></a></h3> The following example shows an XML document with bidirectional text. It illustrates an important design principle: document language designers should take bidi into account both in the language proper (elements and attributes) and in any accompanying style sheets. The style sheets should be designed so that bidi rules are separate from other style rules, and such rules should not be overridden by other style sheets so that the document language’s bidi behavior is preserved. <div class="example" id="example-16648d44"> <a class="self-link" href="#example-16648d44"></a> In this example, lowercase letters stand for inherently left-to-right characters and uppercase letters represent inherently right-to-left characters. The text stream is shown below in logical backing store order. <pre class="xml-example"><section dir=rtl> <para>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</para> <para>HEBREW6 <emphasis>HEBREW7</emphasis> HEBREW8</para> </section> <section dir=ltr> <para>english9 english10 english11 HEBREW12 HEBREW13</para> <para>english14 english15 english16</para> <para>english17 <quote dir=rtl>HEBREW18 english19 HEBREW20</quote></para> </section> </pre> Since this is arbitrary XML, the style sheet is responsible for setting the writing direction. This is the style sheet: <pre>/* Rules for bidi */ [dir=rtl] {direction: rtl; unicode-bidi: isolate; } [dir=ltr] {direction: ltr; unicode-bidi: isolate; } /* Rules for presentation */ section, para {display: block;} emphasis {font-weight: bold;} quote {font-style: italic;} </pre> If the line length is long, the formatting of this text might look like this: <pre class="ascii-art"> 5WERBEH 4WERBEH english3 2WERBEH 1WERBEH 8WERBEH 7WERBEH 6WERBEH english9 english10 english11 13WERBEH 12WERBEH english14 english15 english16 english17 20WERBEH english19 18WERBEH </pre> The first <code><section></code> element is a block with a right-to-left base direction, the second <code><section></code> element is a block with a left-to-right base direction. The <code><para></code>s are blocks that inherit the base direction from their parents. Thus, the first two <code><para></code>s are read starting at the top right, the final three are read starting at the top left. The <code><emphasis></code> element is inline-level, and since its value for <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①⑨">unicode-bidi</a> is <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal⑥">normal</a> (the initial value), it has no effect on the ordering of the text. The <code><quote></code> element, on the other hand, creates an <a data-link-type="dfn" href="#isolated-sequence" id="ref-for-isolated-sequence②">isolated sequence</a> with the given internal directionality. Note that this causes <samp>HEBREW18</samp> to be to the right of <samp>english19</samp>. If lines have to be broken, the same text might format like this: <pre class="ascii-art"> 2WERBEH 1WERBEH -EH 4WERBEH english3 5WERB -EH 7WERBEH 6WERBEH 8WERB english9 english10 en- glish11 12WERBEH 13WERBEH english14 english15 english16 english17 18WERBEH 20WERBEH english19 </pre> Notice that because <samp>HEBREW18</samp> must be read before <samp>english19</samp>, it is on the line above <samp>english19</samp>. Just breaking the long line from the earlier formatting would not have worked. Note also that the first syllable from <samp>english19</samp> might have fit on the previous line, but hyphenation of left-to-right words in a right-to-left context, and vice versa, is usually suppressed to avoid having to display a hyphen in the middle of a line. </div> <h3 class="heading settled" data-level="2.4" id="bidi-algo">2.4. Applying the Bidirectional Reordering Algorithm<a class="self-link" href="#bidi-algo"></a></h3> User agents that support bidirectional text must apply the Unicode bidirectional algorithm to every sequence of inline-level boxes uninterrupted by any block boundary or “<a href="http://www.unicode.org/reports/tr9/#Bidirectional_Character_Types">bidi type B</a>” <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="forced-paragraph-break">forced paragraph break</dfn>. This sequence forms the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="bidi paragraph" id="bidi-paragraph">paragraph</dfn> unit in the bidirectional algorithm. <h4 class="heading settled" data-level="2.4.1" id="bidi-para-direction">2.4.1. Bidi Paragraph Embedding Levels<a class="self-link" href="#bidi-para-direction"></a></h4> In CSS, the paragraph embedding level must be set (following <a href="http://www.unicode.org/reports/tr9/#HL1">UAX9 clause HL1</a>) according to the <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction①⑦">direction</a> property of the paragraph’s containing block rather than by the heuristic given in steps <a href="http://www.unicode.org/reports/tr9/#P2">P2</a> and <a href="http://www.unicode.org/reports/tr9/#P2">P3</a> of the Unicode algorithm. There is, however, one exception: when the computed <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②⓪">unicode-bidi</a> of the paragraph’s containing block is <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-plaintext" id="ref-for-valdef-unicode-bidi-plaintext④">plaintext</a>, the Unicode heuristics in P2 and P3 are used as described in <a data-link-type="biblio" href="#biblio-uax9" title="Unicode Bidirectional Algorithm">[UAX9]</a>, without the HL1 override. <h4 class="heading settled" data-level="2.4.2" id="bidi-control-codes">2.4.2. CSS–Unicode Bidi Control Translation, Text Reordering<a class="self-link" href="#bidi-control-codes"></a></h4> The final order of characters within each <a data-link-type="dfn" href="#bidi-paragraph" id="ref-for-bidi-paragraph①">bidi paragraph</a> is the same as if the bidi control codes had been added as described for <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②①">unicode-bidi</a> (above), markup had been stripped, and the resulting character sequence had been passed to an implementation of the Unicode bidirectional algorithm for plain text that produced the same line-breaks as the styled text. Note that bidi control codes in the source text are still honored, and might not correspond to the document tree structure. This can split inlines or interfere with bidi start/end control pairing in interesting ways. <h4 class="heading settled" data-level="2.4.3" id="bidi-atomic-inlines">2.4.3. Bidi Treatment of Atomic Inlines<a class="self-link" href="#bidi-atomic-inlines"></a></h4> In this process, <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element">replaced elements</a> with <a class="css" data-link-type="propdesc">display: inline</a> are treated as neutral characters, unless their <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②②">unicode-bidi</a> property is either <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-embed" id="ref-for-valdef-unicode-bidi-embed②">embed</a> or <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-bidi-override" id="ref-for-valdef-unicode-bidi-bidi-override⑤">bidi-override</a>, in which case they are treated as strong characters in the <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction①⑧">direction</a> specified for the element. (This is so that, in case the replaced element falls back to rendering inlined text content, its bidi effect on the surrounding text is consistent with its replaced rendering.) All other atomic inline-level boxes are treated as neutral characters always. <h4 class="heading settled" data-level="2.4.4" id="bidi-embedding-breaks">2.4.4. Paragraph Breaks Within Embeddings and Isolates<a class="self-link" href="#bidi-embedding-breaks"></a></h4> If an inline box is broken around a <a data-link-type="dfn" href="#bidi-paragraph" id="ref-for-bidi-paragraph②">bidi paragraph</a> boundary (e.g. if split by a block or <a data-link-type="dfn" href="#forced-paragraph-break" id="ref-for-forced-paragraph-break②">forced paragraph break</a>), then the <a href="http://www.unicode.org/reports/tr9/#HL3">HL3</a> bidi control codes assigned to the end of the box are also added before the interruption and the codes assigned to the start of the box are also added after it. (In other words, any embedding levels, isolates, or overrides started by the box are closed at the paragraph break and reopened on the other side of it.) <div class="example" id="example-334883cc"> <a class="self-link" href="#example-334883cc"></a> For example, where is a <a data-link-type="dfn" href="#forced-paragraph-break" id="ref-for-forced-paragraph-break③">forced paragraph break</a> the bidi ordering is identical between <pre><para>...<i1><i2>... ...</i2></i1>...</para></pre> and <pre><para>...<i1><i2>...</i2></i1> <i1><i2>...</i2></i1>...</para></pre> for all values of <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②③">unicode-bidi</a> on inline elements <i1> and <i2>. </div> Note that this behavior is applied by CSS for CSS-declared bidi controls applied to the box tree; it does not apply to Unicode’s bidi formatting controls, which are defined to terminate their effect at the end of the bidi paragraph. <h4 class="heading settled" data-level="2.4.5" id="bidi-box-model">2.4.5. Reordering-induced Box Fragmentation<a class="self-link" href="#bidi-box-model"></a></h4> Since bidi reordering can split apart and reorder text that is logically contiguous, bidirectional text can cause an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-box" id="ref-for-inline-box">inline box</a> containing such text to be split and its fragments reordered within a line. For each line box, UAs must take the fragments of each inline box and assign the margins, borders, and padding in visual order (not logical order). The <a data-link-type="dfn" href="#css-start" id="ref-for-css-start">start</a>-most fragment on the first line box in which the box appears has the start edge’s margin, border, and padding; and the end-most fragment on the last line box in which the box appears has the <a data-link-type="dfn" href="#css-end" id="ref-for-css-end">end</a> edge’s margin, border, and padding. For example, in the <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb">horizontal-tb</a> writing mode: <ul> <li>When the parent’s <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction①⑨">direction</a> property is <a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr①">ltr</a>, the left-most box fragment on the first line box in which the box appears has the left margin, left border and left padding, and the right-most box fragment on the last line box in which the box appears has the right padding, right border and right margin. <li>When the parent’s <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction②⓪">direction</a> property is <a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl①">rtl</a>, the right-most fragment of the first line box in which the box appears has the right padding, right border and right margin, and the left-most fragment of the last line box in which the box appears has the left margin, left border and left padding. </ul> Analogous rules hold for vertical writing modes. The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break">box-decoration-break</a> property can override this behavior to draw box decorations on both sides of each fragment. <a data-link-type="biblio" href="#biblio-css3-break" title="CSS Fragmentation Module Level 3">[CSS3-BREAK]</a> <h2 class="heading settled" data-level="3" id="vertical-modes">3. Vertical Writing Modes<a class="self-link" href="#vertical-modes"></a></h2> In addition to extensions to CSS2.1’s support for bidirectional text, this module introduces the rules and properties needed to support vertical text layout in CSS. <h3 class="heading settled" data-level="3.1" id="vertical-intro">3.1. Introduction to Vertical Writing<a class="self-link" href="#vertical-intro"></a></h3> This subsection is non-normative. Unlike languages that use the Latin script which are primarily laid out horizontally, Asian languages such as Chinese and Japanese can be laid out vertically. The Japanese example below shows the same text laid out horizontally and vertically. In the horizontal case, text is read from left to right, top to bottom. For the vertical case, the text is read top to bottom, right to left. Indentation from the left edge in the left-to-right horizontal case translates to indentation from the top edge in the top-to-bottom vertical case. <div class="figure"> <img alt="A comparison of horizontal and vertical Japanese shows that although the lines rotate, the characters remain upright. Some glyphs, however change: a period mark shifts from the bottom left of its glyph box to the top right. Running headers, however, may remain laid out horizontally across the top of the page." height="583" src="images/vert-horiz-comparison.png" width="811"> Comparison of vertical and horizontal Japanese: iBunko application (iOS) </div> For Chinese and Japanese lines are ordered either right to left or top to bottom, while for Mongolian and Manchu lines are ordered left to right. The change from horizontal to vertical writing can affect not just the layout, but also the typesetting. For example, the position of a punctuation mark within its spacing box can change from the horizontal to the vertical case, and in some cases alternate glyphs are used. Vertical text that includes Latin script text or text from other scripts normally displayed horizontally can display that text in a number of ways. For example, Latin words can be rotated sideways, or each letter can be oriented upright: <div class="figure"> <img alt="A dictionary definition for ヴィルス might write the English word 'virus' rotated 90° clockwise, but stack the letters of the initialisms 'RNA' and 'DNA' upright." height="597" src="images/vert-latin-layouts.png" width="465"> Examples of Latin in vertical Japanese: Daijirin Viewer 1.4 (iOS) </div> In some special cases such as two-digit numbers in dates, text is fit compactly into a single vertical character box: <div class="figure" id="fig-mac"> <img alt="An excerpt from MacFan shows several possible vertical layouts for numbers: the two-digit month and day are written as horizontal-in-vertical blocks; the years are written with each character upright; except in the English phrase “for Mac 2011”, where the date is rotated to match the rotated Latin." height="523" src="images/vert-number-layouts.png" width="539"> Mac Fan, December 2010, p.49 </div> Layouts often involve a mixture of vertical and horizontal elements: <div class="figure"> <img alt="Magazines often mix horizontal and vertical layout; for example, using one orientation for the main article text and a different one for sidebar or illustrative content." height="436" src="images/vert-horiz-combination.png" width="360"> Mixture of vertical and horizontal elements </div> Vertical text layouts also need to handle bidirectional text layout; clockwise-rotated Arabic, for example, is laid out bottom-to-top. <h3 class="heading settled" data-level="3.2" id="block-flow">3.2. Block Flow Direction: the <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode③">writing-mode</a> property<a class="self-link" href="#block-flow"></a></h3> <table class="def propdef" data-link-for-hint="writing-mode"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-writing-mode">writing-mode</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">horizontal-tb <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> vertical-rl | vertical-lr <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>horizontal-tb <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements except table row groups, table column groups, table rows, table columns, ruby base containers, ruby annotation containers <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>not animatable </table> This property specifies whether lines of text are laid out horizontally or vertically and the direction in which blocks progress. Possible values: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="writing-mode" data-dfn-type="value" data-export id="valdef-writing-mode-horizontal-tb">horizontal-tb</dfn> <dd>Top-to-bottom <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction①">block flow direction</a>. Both the <a data-link-type="dfn" href="#writing-mode" id="ref-for-writing-mode②">writing mode</a> and the <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode">typographic mode</a> are horizontal. <dt><dfn class="dfn-paneled css" data-dfn-for="writing-mode" data-dfn-type="value" data-export id="valdef-writing-mode-vertical-rl">vertical-rl</dfn> <dd>Right-to-left <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction②">block flow direction</a>. Both the <a data-link-type="dfn" href="#writing-mode" id="ref-for-writing-mode③">writing mode</a> and the <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode①">typographic mode</a> are vertical. <dt><dfn class="dfn-paneled css" data-dfn-for="writing-mode" data-dfn-type="value" data-export id="valdef-writing-mode-vertical-lr">vertical-lr</dfn> <dd>Left-to-right <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction③">block flow direction</a>. Both the <a data-link-type="dfn" href="#writing-mode" id="ref-for-writing-mode④">writing mode</a> and the <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode②">typographic mode</a> are vertical. </dl> The <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode④">writing-mode</a> property specifies the <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction④">block flow direction</a>, which determines the ordering direction of block-level boxes in a block formatting context; the ordering direction of line boxes in a block container that contains inlines; the ordering direction of rows in a table; etc. By virtue of determining the stacking direction of line boxes, the writing-mode property also determines whether the line boxes' orientation (and thus the <a data-link-type="dfn" href="#writing-mode" id="ref-for-writing-mode⑤">writing mode</a>) is horizontal or vertical. The <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation③">text-orientation</a> property then determines how text is laid out within the line box. The content of <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element①">replaced elements</a> do not rotate due to the writing mode: images and external content such as from <code><iframe></code>s, for example, remain upright, and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#default-object-size" id="ref-for-default-object-size">default object size</a> of 300px×150px does not re-orient. However embedded replaced content involving text (such as MathML content or form elements) should match the replaced element’s writing mode and line orientation if the UA supports such a vertical writing mode for the replaced content. <div class="example" id="example-26ec58a4"> <a class="self-link" href="#example-26ec58a4"></a> In the following example, two block elements (1 and 3) separated by an image (2) are presented in various flow writing modes. Here is a diagram of horizontal writing mode (<code>writing-mode: horizontal-tb</code>): <img alt="Diagram of horizontal layout: blocks 1, 2, and 3 are stacked top-to-bottom" height="300" src="images/horizontal.png" width="219"> Here is a diagram for the right-to-left vertical writing mode commonly used in East Asia (<code>writing-mode: vertical-rl</code>): <img alt="Diagram of a right-to-left vertical layout: blocks 1, 2, and 3 are arranged side by side from right to left" height="191" src="images/vertical-rl.png" width="297"> And finally, here is a diagram for the left-to-right vertical writing mode used for Manchu and Mongolian (<code>writing-mode: vertical-lr</code>): <img alt="Diagram of left-to-right vertical layout: blocks 1, 2, and 3 are arranged side by side from left to right" height="191" src="images/vertical-lr.png" width="300"> </div> <div class="example" id="example-04885d8e"> <a class="self-link" href="#example-04885d8e"></a> In the following example, some form controls are rendered inside a block with <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl">vertical-rl</a> writing mode. The form controls are rendered to match the writing mode. <pre><style> form { writing-mode: vertical-rl; } </style> ... <form> <label>姓名　<input value="艾俐俐"></label> <label>语言　<select><option>English <option>français <option>فارسی <option>中文 <option>日本語</select></label> </form></pre> <img alt="Screenshot of vertical layout: the input element is laid lengthwise from top to bottom and its contents rendered in a vertical typographic mode, matching the labels outside it. The drop-down selection control after it slides out to the side (towards the after edge of the block) rather than downward as it would in horizontal writing modes." height="266" src="images/vertical-form.png" width="182"> </div> If a box has a different <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode⑥">writing-mode</a> value than its parent box (i.e. nearest ancestor without <a class="css" data-link-type="propdesc">display: contents</a>): <ul> <li>If the box would otherwise become an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#in-flow" id="ref-for-in-flow">in-flow</a> box with a computed <a class="property css" data-link-type="property">display</a> of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-inline" id="ref-for-valdef-display-inline①">inline</a>, its display computes instead to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-inline-block" id="ref-for-valdef-display-inline-block">inline-block</a>. <li>If the box is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container②">block container</a>, then it establishes an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#independent-formatting-context" id="ref-for-independent-formatting-context">independent</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-formatting-context" id="ref-for-block-formatting-context">block formatting context</a>. <li>More generally, if its specified <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inner-display-type" id="ref-for-inner-display-type">inner display type</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-flow" id="ref-for-valdef-display-flow">flow</a>, then its computed inner display type becomes <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-flow-root" id="ref-for-valdef-display-flow-root">flow-root</a>. <a data-link-type="biblio" href="#biblio-css-display-3" title="CSS Display Module Level 3">[CSS-DISPLAY-3]</a> </ul> <div class="note" id="embedded-svg-inheritance" role="note"> <a class="self-link" href="#embedded-svg-inheritance"></a> As all other inherited CSS properties do, the <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode⑦">writing-mode</a> property inherits to SVG elements inlined (rather than linked) into the source document. This could cause unintentional side effects when, for example, an SVG image designed only for horizontal flow was embedded into a vertical flow document. Authors can prevent this from happening by adding the following rule: <div class="example" id="example-5db07892"> <a class="self-link" href="#example-5db07892"></a> <pre>svg { writing-mode: initial; }</pre> </div> </div> <h4 class="heading settled" data-level="3.2.1" id="svg-writing-mode">3.2.1. Obsolete SVG1.1 <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode⑧">writing-mode</a> Values<a class="self-link" href="#svg-writing-mode"></a></h4> SVG1.1 <a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a> defines some additional values: lr, lr-tb, rl, rl-tb, tb, and tb-rl. These values are obsolete in any context except SVG1 documents and are therefore optional for non-SVG UAs. <h5 class="no-toc heading settled" data-level="3.2.1.1" id="svg-writing-mode-css">3.2.1.1. Supporting SVG1.1 <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode⑨">writing-mode</a> values in CSS syntax<a class="self-link" href="#svg-writing-mode-css"></a></h5> UAs that wish to support these values in the context of CSS must compute them as follows: <table class="data"> <caption>Mapping of Obsolete SVG1.1 <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①⓪">writing-mode</a> values to modern CSS</caption> <thead> <tr> <th>Specified <th>Computed <tbody> <tr> <td>lr <td rowspan="4"><a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb①">horizontal-tb</a> <tr> <td>lr-tb <tr> <td>rl <tr> <td>rl-tb <tr> <td>tb <td rowspan="2"><a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl①">vertical-rl</a> <tr> <td>tb-rl </table> The SVG1.1 values were also present in an older version of the CSS <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①①">writing-mode</a> specification, which is obsoleted by this specification. The additional tb-lr value of that revision is replaced by <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr">vertical-lr</a>. <h5 class="no-toc heading settled" data-level="3.2.1.2" id="svg-writing-mode-markup">3.2.1.2. Supporting SVG1.1 <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①②">writing-mode</a> values in presentational attributes<a class="self-link" href="#svg-writing-mode-markup"></a></h5> In order to support legacy content with presentational attributes, and to allow authors to create documents that support older clients, SVG UAs must add the following style sheet rules to their default UA stylesheet: <pre class="highlight"><c- n>@namespace</c-> svg <c- s>"http://www.w3.org/2000/svg"</c-><c- p>;</c-> svg|*<c- p>[</c->writing-mode=lr<c- p>],</c-> svg|*<c- p>[</c->writing-mode=lr-tb<c- p>],</c-> svg|*<c- p>[</c->writing-mode=rl<c- p>],</c-> svg|*<c- p>[</c->writing-mode=rl-tb<c- p>]</c-> <c- p>{</c-> <c- k>writing-mode</c-><c- p>:</c-> horizontal-tb<c- p>;</c-> <c- p>}</c-> svg|*<c- p>[</c->writing-mode=tb<c- p>],</c-> svg|*<c- p>[</c->writing-mode=tb-rl<c- p>]</c-> <c- p>{</c-> <c- k>writing-mode</c-><c- p>:</c-> vertical-rl<c- p>;</c-> <c- p>}</c-> </pre> <div class="note" role="note"> Authors who wish to create forwards and backwards-compatible SVG content in CSS syntax can use the CSS forwards-compatible parsing rules to do so, e.g. <pre>svg|text { writing-mode: tb; writing-mode: vertical-rl; }</pre> </div> <h2 class="heading settled" data-level="4" id="inline-alignment">4. Inline-level Alignment<a class="self-link" href="#inline-alignment"></a></h2> When different kinds of inline-level content are placed together on a line, the baselines of the content and the settings of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align">vertical-align</a> property control how they are aligned in the transverse direction of the line box. This section discusses what baselines are, how to find them, and how they are used together with the vertical-align property to determine the alignment of inline-level content. <h3 class="heading settled" data-level="4.1" id="intro-baselines">4.1. Introduction to Baselines<a class="self-link" href="#intro-baselines"></a></h3> This section is non-normative. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="baseline">baseline</dfn> is a line along the <a data-link-type="dfn" href="#inline-axis" id="ref-for-inline-axis">inline axis</a> of a line box along which individual glyphs of text are aligned. Baselines guide the design of glyphs in a font (for example, the bottom of most alphabetic glyphs typically align with the alphabetic baseline), and they guide the alignment of glyphs from different fonts or font sizes when typesetting. <div class="figure"> <img alt="Picture of alphabetic text in two font sizes with the baseline and em-boxes" src="images/alphabetic-baseline-in-two-font-sizes.svg" width="480"> Alphabetic text in two font sizes with the baseline and em-boxes </div> Different writing systems prefer different baseline tables. <div class="figure"> <img alt="Latin prefers the alphabetic baseline, on top of which most letters rest, though some have descenders that dangle below it. Indic scripts are sometimes typeset with a hanging baseline, since their glyph shapes appear to be hanging from a horizontal line. Han-based systems, whose glyphs are designed to fill a square, tend to align on their bottoms." height="110" src="images/script-preferred-baselines.gif" width="458"> Preferred baselines in various writing systems </div> A well-constructed font contains a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="baseline-table">baseline table</dfn>, which indicates the position of one or more baselines within the font’s design coordinate space. (The design coordinate space is scaled with the font size.) <div class="figure"> <img alt height="102" src="images/baselines.gif" width="587"> In a well-designed mixed-script font, the glyphs are positioned in the coordinate space to harmonize with one another when typeset together. The baseline table is then constructed to match the shape of the glyphs, each baseline positioned to match the glyphs from its preferred scripts. </div> The baseline table is a property of the font, and the positions of the various baselines apply to all glyphs in the font. Different baseline tables can be provided for alignment in horizontal and vertical text. UAs should use the vertical tables in vertical <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode③">typographic modes</a> and the horizontal tables otherwise. <h3 class="heading settled" data-level="4.2" id="text-baselines">4.2. Text Baselines<a class="self-link" href="#text-baselines"></a></h3> In this specification, only the following baselines are considered: <dl> <dt>alphabetic <dd>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="alphabetic-baseline">alphabetic baseline</dfn>, which typically aligns with the bottom of uppercase Latin glyphs. <dt>central <dd>The ideographic <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="central-baseline">central baseline</dfn>, which typically crosses the center of the em box. If the font is missing this baseline, it is assumed to be halfway between the ascender (<a data-link-type="dfn" href="#over" id="ref-for-over">over</a>) and descender (<a data-link-type="dfn" href="#under" id="ref-for-under">under</a>) edges of the ideographic em box. </dl> In vertical <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode④">typographic mode</a>, the <a data-link-type="dfn" href="#central-baseline" id="ref-for-central-baseline">central baseline</a> is used as the dominant baseline when <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation④">text-orientation</a> is <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed">mixed</a> or <a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright">upright</a>. Otherwise the <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline">alphabetic baseline</a> is used. A future CSS module will deal with baselines in more detail and allow the choice of other dominant baselines and alignment options. <h3 class="heading settled" data-level="4.3" id="replaced-baselines">4.3. Atomic Inline Baselines<a class="self-link" href="#replaced-baselines"></a></h3> If an <a href="https://www.w3.org/TR/CSS2/visuren.html#inline-boxes">atomic inline</a> (such as an inline-block, inline-table, or replaced inline element) does not have a baseline, then the UA synthesizes a baseline table thus: <dl> <dt>alphabetic <dd>The alphabetic baseline is assumed to be at the <a data-link-type="dfn" href="#under" id="ref-for-under①">under</a> margin edge. <dt>central <dd>The central baseline is assumed to be halfway between the <a data-link-type="dfn" href="#under" id="ref-for-under②">under</a> and <a data-link-type="dfn" href="#over" id="ref-for-over①">over</a> margin edges of the box. </dl> The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align②">vertical-align</a> property in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> defines the baseline of inline-table and inline-block boxes with some exceptions. <h3 class="heading settled" data-level="4.4" id="baseline-alignment">4.4. Baseline Alignment<a class="self-link" href="#baseline-alignment"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="dominant-baseline">dominant baseline</dfn> (which <a href="#text-baselines">can change</a> based on the <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode⑤">typographic mode</a>) is used in CSS for alignment in two cases: <ul> <li>Aligning glyphs from different fonts within the same inline box. The glyphs are aligned by matching up the positions of the dominant baseline in their corresponding fonts. <li> Aligning a child inline-level box within its parent. For the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align③">vertical-align</a> value of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-baseline" id="ref-for-valdef-alignment-baseline-baseline">baseline</a>, child is aligned to the parent by matching the parent’s dominant baseline to the same baseline in the child. (E.g. if the parent’s dominant baseline is alphabetic, then the child’s alphabetic baseline is matched to the parent’s alphabetic baseline, even if the child’s dominant baseline is something else.) For values of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-sub" id="ref-for-valdef-baseline-shift-sub">sub</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-super" id="ref-for-valdef-baseline-shift-super">super</a>, <length>, and <percentage>, the baselines are aligned as for baseline, but the child is shifted according to the offset given by its vertical-align value. <div class="example" id="example-a67ec7df"> <a class="self-link" href="#example-a67ec7df"></a> Given following sample markup: <pre>Ap ਜੀ</pre> And the following style rule: <pre>span.inner { font-size: .75em; }</pre> The baseline tables of the parent (<code>.outer</code>) and the child (<code>.inner</code>) will not match up due to the font size difference. Since the dominant baseline is the alphabetic baseline, the child box is aligned to its parent by matching up their alphabetic baselines. <div class="figure"> <img alt height="98" src="images/baseline-align-sizes.gif" width="233"> </div> </div> <div class="example" id="example-3b107e11"> <a class="self-link" href="#example-3b107e11"></a> If we assign <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align⑤">vertical-align: super</a> to the <code>.inner</code> element from the example above, the same rules are used to align the <code>.inner</code> child to its parent; the only difference is in addition to the baseline alignment, the child is shifted to the superscript position. <pre>span.inner { vertical-align: super; font-size: .75em; }</pre> <div class="figure"> <img alt="In this example, the resulting alignment is equivalent to shifting the parent baseline table upwards by the superscript offset, and then aligning the child's alphabetic baseline to the shifted position of the parent's alphabetic baseline." height="114" src="images/baseline-align-super.gif" width="305"> </div> </div> </ul> <h2 class="heading settled" data-level="5" id="intro-text-layout">5. Introduction to Vertical Text Layout<a class="self-link" href="#intro-text-layout"></a></h2> Each writing system has one or more native orientations. Modern scripts can therefore be classified into three orientational categories: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="horizontal-only">horizontal-only</dfn> <dd>Scripts that have horizontal, but not vertical, native orientation. Includes: Latin, Arabic, Hebrew, Devanagari <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="vertical-only">vertical-only</dfn> <dd>Scripts that have vertical, but not horizontal, native orientation. Includes: Mongolian, Phags Pa <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="bi-orientational">bi-orientational</dfn> <dd>Scripts that have both vertical and horizontal native orientation. Includes: Han, Hangul, Japanese Kana </dl> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="vertical-script">vertical script</dfn> is one that has a native vertical orientation: i.e. one that is either <a data-link-type="dfn" href="#vertical-only" id="ref-for-vertical-only">vertical-only</a> or that is <a data-link-type="dfn" href="#bi-orientational" id="ref-for-bi-orientational">bi-orientational</a>. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="horizontal-script">horizontal script</dfn> is one that has a native horizontal orientation: i.e. one that is either <a data-link-type="dfn" href="#horizontal-only" id="ref-for-horizontal-only">horizontal-only</a> or that is bi-orientational. (See <a href="#script-orientations">Appendix A</a> for a categorization of scripts by native orientation.) <div class="figure"> <img alt="A Venn diagram of these distinctions would show two circles: one labelled 'vertical', the other 'horizontal'. The overlapped region would represent the bi-orientational scripts, while horizontal-only and vertical-only scripts would occupy their respective circles' exclusive regions." height="159" src="diagrams/script-orientations.png" width="500"> </div> In modern typographic systems, all glyphs are assigned a horizontal orientation, which is used when laying out text horizontally. To lay out vertical text, the UA needs to transform the text from its horizontal orientation. This transformation is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="bi-orientational transform" data-noexport id="bi-orientational-transform">bi-orientational transform</dfn>, and there are two types: <dl> <dt>rotate <dd>Rotate the glyph from horizontal to vertical <a href="diagrams/glyph-right.svg"> <img alt="Rotate the glyph from horizontal to vertical" class="figure" height="202" src="diagrams/glyph-right.png" width="211"></a> <dt>translate <dd>Translate the glyph from horizontal to vertical <a href="diagrams/glyph-upright.svg"> <img alt="Translate the glyph from horizontal to vertical" class="figure" height="226" src="diagrams/glyph-upright.png" width="152"></a> </dl> Scripts with a native vertical orientation have an intrinsic <a data-link-type="dfn" href="#bi-orientational-transform" id="ref-for-bi-orientational-transform">bi-orientational transform</a>, which orients them correctly in vertical text: most CJK (Chinese/Japanese/Korean) characters translate, that is, they are always upright. Characters from other scripts, such as Mongolian, rotate. Scripts without a native vertical orientation can be either rotated (set sideways) or translated (set upright): the transform used is a stylistic preference depending on the text’s usage, rather than a matter of correctness. The <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation⑤">text-orientation</a> property’s <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed①">mixed</a> and <a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright①">upright</a> values are provided to specify rotation vs. translation of <a data-link-type="dfn" href="#horizontal-only" id="ref-for-horizontal-only①">horizontal-only</a> text. <h3 class="heading settled" data-level="5.1" id="text-orientation">5.1. Orienting Text: the <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation⑥">text-orientation</a> property<a class="self-link" href="#text-orientation"></a></h3> <table class="def propdef" data-link-for-hint="text-orientation"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-orientation">text-orientation</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">mixed <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> upright | sideways <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>mixed <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements except table row groups, rows, column groups, and columns <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>not animatable </table> This property specifies the orientation of text within a line. Current values only have an effect in vertical <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode⑥">typographic modes</a>: the property has no effect in horizontal typographic modes. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="text-orientation" data-dfn-type="value" data-export id="valdef-text-orientation-mixed">mixed</dfn> <dd> <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit①">Typographic character units</a> from horizontal-only scripts are <a href="#typeset-sideways" id="ref-for-typeset-sideways①">typeset sideways</a>, i.e. 90° clockwise from their standard orientation in horizontal text. Typographic character units from vertical scripts are typeset with their intrinsic orientation. See <a href="#vertical-orientations">Vertical Orientations</a> for further details. This value is typical for layout of dominantly vertical-script text. <dt><dfn class="dfn-paneled css" data-dfn-for="text-orientation" data-dfn-type="value" data-export id="valdef-text-orientation-upright">upright</dfn> <dd> <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit③">Typographic character units</a> from horizontal-only scripts are <a href="#typeset-upright" id="ref-for-typeset-upright①">typeset upright</a>, i.e. in their standard horizontal orientation. Typographic character units from vertical scripts are typeset with their intrinsic orientation and shaped normally. See <a href="#vertical-orientations">Vertical Orientations</a> for further details. This value causes the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value">used value</a> of <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction②①">direction</a> to be <a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr②">ltr</a>, and for the purposes of bidi reordering, causes all characters to be treated as strong LTR. Note: The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value①">used value</a>, rather than the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①">computed value</a>, of <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction②②">direction</a> is influenced so that <a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl②">rtl</a> can inherit properly into any descendants (such as the contents of a <a data-link-type="dfn" href="#horizontal-writing-mode" id="ref-for-horizontal-writing-mode①">horizontal</a> inline-block) where this directional override does not apply. <dt><dfn class="dfn-paneled css" data-dfn-for="text-orientation" data-dfn-type="value" data-export id="valdef-text-orientation-sideways">sideways</dfn> <dd> Causes all text to be <a href="#typeset-sideways" id="ref-for-typeset-sideways②">typeset sideways</a>, as if in a horizontal layout, but rotated 90° clockwise. </dl> <div class="figure" id="fig-text-orientation"> <table class="data"> <tbody> <tr> <td> <img alt="text-orientation: mixed" height="160" src="images/text-orientation-vr.png" width="64"> <td> <img alt="text-orientation: upright" height="160" src="images/text-orientation-up.png" width="64"> <td> <img alt="text-orientation: sideways" height="160" src="images/text-orientation-sr.png" width="64"> <tr> <td style="text-align:center"><a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed②">mixed</a> <td style="text-align:center"><a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright②">upright</a> <td style="text-align:center"><a class="css" data-link-type="maybe" href="#valdef-text-orientation-sideways" id="ref-for-valdef-text-orientation-sideways">sideways</a> </table> <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation⑦">text-orientation</a> values (<a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①③">writing-mode</a> is <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl②">vertical-rl</a>) </div> Changing the value of this property may affect inline-level alignment. Refer to <a href="#text-baselines">Text Baselines</a> for more details. UAs may accept <dfn class="dfn-paneled css" data-dfn-for="text-orientation" data-dfn-type="value" data-export id="valdef-text-orientation-sideways-right">sideways-right</dfn> as a value that computes to <a class="css" data-link-type="maybe" href="#valdef-text-orientation-sideways" id="ref-for-valdef-text-orientation-sideways①">sideways</a> if needed for backward compatibility reasons. <div class="note" role="note"> As of writing, major implementations do not support the automatic LTR treatment of RTL characters for <a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright③">upright</a> typesetting. In such cases, authors may need to explicitly specify <a class="property css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②④">unicode-bidi</a> and <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction②③">direction</a> as in the following example: <pre>.vertical-upright-hebrew { writing-mode: vertical-rl; text-orientation: upright; unicode-bidi: bidi-override; direction: ltr; } </pre> </div> <h4 class="heading settled" data-level="5.1.1" id="vertical-font-features">5.1.1. Vertical Typesetting and Font Features<a class="self-link" href="#vertical-font-features"></a></h4> When typesetting text in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl③">vertical-rl</a> and <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr①">vertical-lr</a> modes, text is typeset either “upright” or “sideways” as defined below: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="upright" data-lt="typeset upright | upright typesetting | typesetting upright" id="typeset-upright">upright typesetting</dfn> <dd> <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit⑤">Typographic character units</a> are individually typeset upright in vertical lines with vertical font metrics. The UA must synthesize vertical font metrics for fonts that lack them. (This specification does not define heuristics for synthesizing such metrics.) Additionally, font features (such as alternate glyphs and other transformation) intended for use in vertical typesetting must be used. (E.g. the OpenType vert feature must be enabled.) Furthermore, characters from horizontal cursive scripts (such as Arabic) are shaped in their isolated forms when typeset upright. Note that even when typeset “upright”, some glyphs should appear rotated. For example, dashes and enclosing punctuation should be oriented relative to the <a data-link-type="dfn" href="#inline-axis" id="ref-for-inline-axis①">inline axis</a>. In OpenType, this is typically handled by glyph substitution, although not all fonts have alternate glyphs for all relevant codepoints. (East Asian fonts usually provide alternates for East Asian codepoints, but Western fonts typically lack any vertical typesetting features and East Asian fonts typically lack vertical substitutions for Western codepoints.) Unicode published draft data on which characters should appear sideways as the SVO property in <a href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this data file</a>; however, this property has been abandoned for the current revision of <a data-link-type="biblio" href="#biblio-uax50" title="Unicode Vertical Text Layout">[UAX50]</a>. <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit⑥">Typographic character units</a> which are classified as <code>Tr</code> or <code>Tu</code> in <a data-link-type="biblio" href="#biblio-uax50" title="Unicode Vertical Text Layout">[UAX50]</a> are expected to have alternate glyphs or positioning for typesetting upright in vertical text. In the case of <code>Tr</code> <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#character" id="ref-for-character">characters</a>, if such vertical alternate glyphs are missing from the font, the UA may wish to <a data-link-type="biblio" href="#biblio-rfc6919" title="Further Key Words for Use in RFCs to Indicate Requirement Levels">[RFC6919]</a> (but is not expected to) synthesize the missing glyphs by <a href="#typeset-sideways" id="ref-for-typeset-sideways③">typesetting them sideways</a> etc. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="sideways" data-lt="typeset sideways | sideways typesetting | typesetting sideways" id="typeset-sideways">sideways typesetting </dfn> <dd> <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit⑦">Typographic character units</a> typeset as a run rotated 90° clockwise from their upright orientation, using horizontal metrics and composition, and vertical typesetting features are not used. However, if the font has features meant to be enabled for sideways text that is typeset in vertical lines (e.g. to adjust brush stroke angles or alignment), those features are used. (An example of such a feature would be the proposed <a href="http://blogs.adobe.com/CCJKType/2013/08/tale-of-three-features.html"><code>vrtr</code> OpenType font feature</a>.) </dl> <h4 class="heading settled" data-level="5.1.2" id="vertical-orientations">5.1.2. Mixed Vertical Orientations<a class="self-link" href="#vertical-orientations"></a></h4> [[!UAX50]] defines the <code>Vertical_Orientation</code> property for the default glyph orientation of mixed-orientation vertical text. When <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation⑧">text-orientation</a> is <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed③">mixed</a>, the UA must determine the orientation of each <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit⑧">typographic character unit</a> by its <code>Vertical_Orientation</code> property: <a href="#typeset-upright" id="ref-for-typeset-upright②">typesetting it upright</a> if its orientation property is <code>U</code>, <code>Tu</code>, or <code>Tr</code>; or <a href="#typeset-sideways" id="ref-for-typeset-sideways④">typesetting it sideways</a> (90° clockwise from horizontal) if its orientation property is <code>R</code>. Note that UAX50 does not handle scripts that rotate -90° in vertical contexts, so they will not be typeset correctly with <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed④">mixed</a> orientation. The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-lr" id="ref-for-valdef-writing-mode-sideways-lr">sideways-lr</a> value in <a href="http://www.w3.org/TR/css-writing-modes-4/">Level 4</a>, however, can correctly display such scripts. The OpenType vrt2 feature, which is intended for mixed-orientation typesetting, is not used by CSS. It delegates the responsibility for orienting glyphs to the font designer. CSS instead dictates the orientation through [[!UAX50]] and orients glyphs by typesetting them sideways or upright as appropriate. <h4 class="heading settled" data-level="5.1.3" id="glyph-orientation">5.1.3. Obsolete: the SVG1.1 <a class="property css" data-link-type="property" href="#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical">glyph-orientation-vertical</a> property<a class="self-link" href="#glyph-orientation"></a></h4> <table class="def propdef" data-link-for-hint="glyph-orientation-vertical"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-glyph-orientation-vertical">glyph-orientation-vertical</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> 0deg | 90deg | 0 | 90 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>n/a </table> Some SVG user agents will need to process documents containing the obsolete SVG <a class="property css" data-link-type="property" href="#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical①">glyph-orientation-vertical</a> property, which was defined to accept an auto keyword as well as <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#angle-value" id="ref-for-angle-value"><angle></a> and <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value"><integer></a> values representing multiples of 90°. While supporting this property is optional, UAs that do so must alias glyph-orientation-vertical as a shorthand of <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation⑨">text-orientation</a> as follows: <table class="data"> <thead> <tr> <th>Shorthand <a class="property css" data-link-type="property" href="#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical③">glyph-orientation-vertical</a> value <th>Longhand <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①⓪">text-orientation</a> value <tbody> <tr> <td>auto <td><a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed⑤">mixed</a> <tr> <td>0deg <td><a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright④">upright</a> <tr> <td>0 <td><a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright⑤">upright</a> <tr> <td>90deg <td><a class="css" data-link-type="maybe" href="#valdef-text-orientation-sideways" id="ref-for-valdef-text-orientation-sideways②">sideways</a> <tr> <td>90 <td><a class="css" data-link-type="maybe" href="#valdef-text-orientation-sideways" id="ref-for-valdef-text-orientation-sideways③">sideways</a> </table> UAs must ignore and treat as invalid any other values for the <a class="property css" data-link-type="property" href="#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical④">glyph-orientation-vertical</a> property; and treat as invalid the <a class="property css" data-link-type="property">glyph-orientation-horizontal</a> property in its entirety. Note: The 180deg and 270deg values, the radian and gradian values, and the <a class="property css" data-link-type="property">glyph-orientation-horizontal</a> property are not mapped because they have no known use cases nor significant amounts of dependent content, and are therefore not part of CSS, and have been likewise dropped from SVG. <h2 class="heading settled" data-level="6" id="abstract-box">6. Abstract Box Terminology<a class="self-link" href="#abstract-box"></a></h2> CSS2.1 [[!CSS2]] defines the box layout model of CSS in detail, but only for the <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb②">horizontal-tb</a> writing mode. Layout is analogous in writing modes other than horizontal-tb; however directional and dimensional terms in CSS2.1 must be abstracted and remapped appropriately. This section defines abstract directional and dimensional terms and their mappings in order to define box layout for other writing modes, and to provide terminology for future specs to define their layout concepts abstractly. (The next section explains how to apply them to CSS2.1 layout calculations and how to handle <a href="#orthogonal-flows">orthogonal flows</a>.) Although they derive from the behavior of text, these abstract mappings exist even for boxes that do not contain any line boxes: they are calculated directly from the values of the <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①④">writing-mode</a> and <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction②④">direction</a> properties. There are three sets of directional terms in CSS: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="physical">physical</dfn> <dd>Interpreted relative to the page, independent of writing mode. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="physical direction" id="physical-direction">physical directions</dfn> are <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="physical left | left" id="physical-left">left</dfn>, <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="physical right | right" id="physical-right">right</dfn>, <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="physical top | top" id="physical-top">top</dfn>, and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="physical bottom | bottom" id="physical-bottom">bottom</dfn>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="flow-relative"><a href="#logical-directions">flow-relative</a></dfn> <dd>Interpreted relative to the flow of content. The flow-relative directions are <a data-link-type="dfn" href="#css-start" id="ref-for-css-start②">start</a> and <a data-link-type="dfn" href="#css-end" id="ref-for-css-end①">end</a>, or <a data-link-type="dfn" href="#block-start" id="ref-for-block-start">block-start</a>, <a data-link-type="dfn" href="#block-end" id="ref-for-block-end">block-end</a>, <a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start">inline-start</a>, and <a data-link-type="dfn" href="#inline-end" id="ref-for-inline-end">inline-end</a> if the dimension is also ambiguous. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-relative"><a href="#line-directions">line-relative</a></dfn> <dd>Interpreted relative to the orientation of the line box. The line-relative directions are <a data-link-type="dfn" href="#line-left" id="ref-for-line-left②">line-left</a>, <a data-link-type="dfn" href="#line-right" id="ref-for-line-right②">line-right</a>, <a data-link-type="dfn" href="#line-over" id="ref-for-line-over">line-over</a>, and <a data-link-type="dfn" href="#line-under" id="ref-for-line-under">line-under</a>. </dl> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="physical-dimensions">physical dimensions</dfn> are <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="width">width</dfn> and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="height">height</dfn>, which correspond to measurements along the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="x-axis|horizontal axis" id="x-axis">x-axis</dfn> (<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="horizontal-dimension">horizontal dimension</dfn>) and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="y-axis|vertical axis" id="y-axis">y-axis</dfn> (<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="vertical-dimension">vertical dimension</dfn>), respectively. <a href="#abstract-axes">Abstract dimensions</a> are identical in both flow-relative and line-relative terms, so there is only one set of these terms. <figure id="abstract-ltr-tb"> <img src="diagrams/sizing-ltr-tb.svg"> <figcaption>Physical & flow-relative terms as applicable to typical English text layout</figcaption> </figure> <figure id="abstract-ttb-rl"> <img src="diagrams/sizing-ttb-rl.svg"> <figcaption>Physical & flow-relative terms as applicable to vertical Chinese text layout</figcaption> </figure> Note: [[CSS-FLEXBOX-1]] also defines <a href="https://www.w3.org/TR/css-flexbox/#box-model">flex-relative terms</a>, which are used in describing flex layout. <h3 class="heading settled" data-level="6.1" id="abstract-axes">6.1. Abstract Dimensions<a class="self-link" href="#abstract-axes"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="abstract-dimensions">abstract dimensions</dfn> are defined below: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="block-dimension">block dimension</dfn> <dd>The dimension perpendicular to the flow of text within a line, i.e. the <a data-link-type="dfn" href="#vertical-dimension" id="ref-for-vertical-dimension">vertical dimension</a> in horizontal writing modes, and the <a data-link-type="dfn" href="#horizontal-dimension" id="ref-for-horizontal-dimension">horizontal dimension</a> in vertical writing modes. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inline-dimension">inline dimension</dfn> <dd>The dimension parallel to the flow of text within a line, i.e. the <a data-link-type="dfn" href="#horizontal-dimension" id="ref-for-horizontal-dimension①">horizontal dimension</a> in horizontal writing modes, and the <a data-link-type="dfn" href="#vertical-dimension" id="ref-for-vertical-dimension①">vertical dimension</a> in vertical writing modes. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="block axis | block-axis" id="block-axis">block axis</dfn> <dd>The axis in the block dimension, i.e. the <a data-link-type="dfn" href="#y-axis" id="ref-for-y-axis">vertical axis</a> in horizontal writing modes and the <a data-link-type="dfn" href="#x-axis" id="ref-for-x-axis">horizontal axis</a> in vertical writing modes. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inline axis | inline-axis" id="inline-axis">inline axis</dfn> <dd>The axis in the inline dimension, i.e. the <a data-link-type="dfn" href="#x-axis" id="ref-for-x-axis①">horizontal axis</a> in horizontal writing modes and the <a data-link-type="dfn" href="#y-axis" id="ref-for-y-axis①">vertical axis</a> in vertical writing modes. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="block size | block-size" id="block-size">block size</dfn> <dt id="extent"><a class="self-link" href="#extent"></a><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="logical-height">logical height</dfn> <dd>A measurement in the block dimension: refers to the physical height (vertical dimension) in horizontal writing modes, and to the physical width (horizontal dimension) in vertical writing modes. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inline size | inline-size" id="inline-size">inline size</dfn> <dt id="measure"><a class="self-link" href="#measure"></a><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="logical-width">logical width</dfn> <dd>A measurement in the inline dimension: refers to the physical width (horizontal dimension) in horizontal writing modes, and to the physical height (vertical dimension) in vertical writing modes. </dl> <h3 class="heading settled" data-level="6.2" id="logical-directions">6.2. Flow-relative Directions<a class="self-link" href="#logical-directions"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="flow-relative direction" id="flow-relative-direction">flow-relative directions</dfn>, <a data-link-type="dfn" href="#block-start" id="ref-for-block-start①">block-start</a>, <a data-link-type="dfn" href="#block-end" id="ref-for-block-end①">block-end</a>, <a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start①">inline-start</a>, and <a data-link-type="dfn" href="#inline-end" id="ref-for-inline-end①">inline-end</a>, are defined relative to the flow of content on the page. In an <abbr title="left-to-right">LTR</abbr> <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb④">horizontal-tb</a> writing mode, they correspond to the top, bottom, left, and right directions, respectively. They are defined as follows: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="block start | block-start" id="block-start">block-start</dfn> <dd>The side that comes earlier in the <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction⑤">block flow direction</a>, as determined by the <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①⑤">writing-mode</a> property: the physical top in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb⑤">horizontal-tb</a> mode, the right in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl④">vertical-rl</a>, and the left in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr②">vertical-lr</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="block end | block-end" id="block-end">block-end</dfn> <dd>The side opposite <a data-link-type="dfn" href="#block-start" id="ref-for-block-start②">block-start</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inline start | inline-start" id="inline-start">inline-start</dfn> <dd>The side from which text of the inline base direction would start. For boxes with a used <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction②⑤">direction</a> value of <a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr③">ltr</a>, this means the <a data-link-type="dfn" href="#line-left" id="ref-for-line-left③">line-left</a> side. For boxes with a used direction value of <a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl③">rtl</a>, this means the <a data-link-type="dfn" href="#line-right" id="ref-for-line-right③">line-right</a> side. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inline end | inline-end" id="inline-end">inline-end</dfn> <dd>The side opposite <a data-link-type="dfn" href="#css-start" id="ref-for-css-start③">start</a>. </dl> Where contextually unambiguous or encompassing both meanings, the terms <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="start | startmost" id="css-start">start</dfn> and <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="end | endmost" id="css-end">end</dfn> are used in place of <a data-link-type="dfn" href="#block-start" id="ref-for-block-start③">block-start</a>/<a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start②">inline-start</a> and <a data-link-type="dfn" href="#block-end" id="ref-for-block-end②">block-end</a>/<a data-link-type="dfn" href="#inline-end" id="ref-for-inline-end②">inline-end</a>, respectively. Note that while determining the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start④">block-start</a> and <a data-link-type="dfn" href="#block-end" id="ref-for-block-end③">block-end</a> sides of a box depends only on the <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①⑥">writing-mode</a> property, determining the <a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start③">inline-start</a> and <a data-link-type="dfn" href="#inline-end" id="ref-for-inline-end③">inline-end</a> sides of a box depends not only on the writing-mode property but also the <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction②⑦">direction</a> property. <h3 class="heading settled" data-level="6.3" id="line-directions">6.3. Line-relative Directions<a class="self-link" href="#line-directions"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-orientation">line orientation</dfn> determines which side of a line box is the logical “top” (ascender side). It is given by the <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①⑧">writing-mode</a> property. Usually the line-relative “top” corresponds to the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start⑤">block-start</a> side, but this is not always the case: in Mongolian typesetting (and thus by default in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr③">vertical-lr</a> writing modes), the line-relative “top” corresponds to the <a data-link-type="dfn" href="#block-end" id="ref-for-block-end④">block-end</a> side. Hence the need for distinct terminology. <div class="figure"> <img alt="Mongolian mixed with English" height="430" src="images/mongolian-lr.jpg" width="531"> A primarily Mongolian document, such as the one above, is written in vertical lines stacking left to right, but lays its Latin text with the tops of the glyphs towards the right. This makes the text run in the same inline direction as Mongolian (top-to-bottom) and face the same direction it does in other East Asian layouts (which have vertical lines stacking right to left), but the glyphs' tops are facing the bottom of the line stack rather than the top, which in an English paragraph would be upside-down. (See this <a href="diagrams/text-flow-vectors-lr-reverse.svg">Diagram of Mongolian Text Layout</a>.) </div> In addition to a line-relative “top” and “bottom” to map things like 'vertical-align: top', CSS also needs to refer to a line-relative “left” and “right” in order to map things like <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align">text-align: left</a>. Thus there are four <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="line-relative direction" id="line-relative-direction">line-relative directions</dfn>, which are defined relative to the <a data-link-type="dfn" href="#line-orientation" id="ref-for-line-orientation">line orientation</a> as follows: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="over">over</dfn> or <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-over">line-over</dfn> <dd>Nominally the side that corresponds to the ascender side or “top” side of a line box. (The side overlines are typically drawn on.) <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="under">under</dfn> or <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-under">line-under</dfn> <dd>Opposite of <a data-link-type="dfn" href="#over" id="ref-for-over②">over</a>: the line-relative “bottom” or descender side. (The side underlines are typically drawn on.) <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-left">line-left</dfn> <dd>The line-relative "left" side of a line box, which is nominally the side from which <abbr title="left-to-right">LTR</abbr> text would start. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-right">line-right</dfn> <dd>The line-relative "right" side of a line box, which is nominally the side from which <abbr title="right-to-left">RTL</abbr> text would start. (Opposite of <a data-link-type="dfn" href="#line-left" id="ref-for-line-left④">line-left</a>.) </dl> See the <a href="#logical-to-physical">table below</a> for the exact mappings between physical and line-relative directions. <div class="figure"> <a href="diagrams/line-orient-up.svg"> <img alt="Line orientation compass" class="landscape" height="85" src="diagrams/line-orient-up.png" width="325"></a> Line orientation in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb⑥">horizontal-tb</a> </div> <div class="figure"> <a href="diagrams/line-orient-right.svg"> <img alt="Typical orientation in vertical" class="portrait" height="252" src="diagrams/line-orient-right.png" width="126"></a> Line orientation in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl⑤">vertical-rl</a> and <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr④">vertical-lr</a> </div> <div class="note" id="vertical-metrics" role="note"> <a class="self-link" href="#vertical-metrics"></a> <div class="sidefigure"> <img alt="Baseline of an upright glyph is drawn vertically from the top center" src="images/vertical-upright-baseline.svg" width="80"> Vertical baseline of an upright glyph </div> When <a class="css" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①①">text-orientation: upright</a>, the baseline is still vertical, and the vertical baseline in the font is used, or the vertical baseline is synthesized if the font does not provide. Since the baseline is vertical, the definitions for <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed⑥">mixed</a> or <a class="css" data-link-type="maybe" href="#valdef-text-orientation-sideways" id="ref-for-valdef-text-orientation-sideways④">sideways</a> above still apply; i.e., <a data-link-type="dfn" href="#line-over" id="ref-for-line-over①">line-over</a> is on right, and <a data-link-type="dfn" href="#line-under" id="ref-for-line-under①">line-under</a> is on left. This is in line with font systems such as OpenType which defines the ascender on right and the descender on left in their vertical metrics. </div> <h3 class="heading settled" data-level="6.4" id="logical-to-physical">6.4. Abstract-to-Physical Mappings<a class="self-link" href="#logical-to-physical"></a></h3> The following table summarizes the abstract-to-physical mappings (based on the used <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction②⑧">direction</a> and <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①⑨">writing-mode</a>): <table class="complex data"> <caption>Abstract-Physical Mapping</caption> <colgroup class="header"> <colgroup span="6"> <thead> <tr> <th scope="row"><a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②⓪">writing-mode</a> <th colspan="2"><a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb⑦">horizontal-tb</a> <th colspan="2"><a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl⑥">vertical-rl</a> <th colspan="2"><a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr⑤">vertical-lr</a> <tr> <th scope="row"><a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction②⑨">direction</a> <th><a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr④">ltr</a> <th><a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl④">rtl</a> <th><a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑤">ltr</a> <th><a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl⑤">rtl</a> <th><a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑥">ltr</a> <th><a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl⑥">rtl</a> <tbody> <tr> <th scope="row">block-size <td colspan="2">height <td colspan="4">width <tr> <th scope="row">inline-size <td colspan="2">width <td colspan="4">height <tr> <th scope="row">block-start <td colspan="2">top <td colspan="2">right <td colspan="2">left <tr> <th scope="row">block-end <td colspan="2">bottom <td colspan="2">left <td colspan="2">right <tr> <th scope="row">inline-start <td>left <td>right <td>top <td>bottom <td>top <td>bottom <tr> <th scope="row">inline-end <td>right <td>left <td>bottom <td>top <td>bottom <td>top <tbody> <tr> <th scope="row">over <td colspan="2">top <td colspan="4">right <tr> <th scope="row">under <td colspan="2">bottom <td colspan="4">left <tr> <th scope="row">line-left <td colspan="2">left <td colspan="4">top <tr> <th scope="row">line-right <td colspan="2">right <td colspan="4">bottom </table> Note: The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value②">used</a> <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction③⓪">direction</a> depends on the computed <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②①">writing-mode</a> and <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①②">text-orientation</a>: in <a data-link-type="dfn" href="#vertical-writing-mode" id="ref-for-vertical-writing-mode">vertical writing modes</a>, a text-orientation value of <a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright⑥">upright</a> forces the used direction to <a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑦">ltr</a>. <h2 class="heading settled" data-level="7" id="abstract-layout">7. Abstract Box Layout<a class="self-link" href="#abstract-layout"></a></h2> <h3 class="heading settled" data-level="7.1" id="vertical-layout">7.1. Principles of Layout in Vertical Writing Modes<a class="self-link" href="#vertical-layout"></a></h3> CSS box layout in vertical writing modes is analogous to layout in the horizontal writing modes, following the principles outlined below: Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes. Likewise, layout calculation rules (such as those in CSS2.1, Section 10.6) that apply to the vertical dimension in horizontal writing modes instead apply to the horizontal dimension in vertical writing modes. Thus: <ul> <li> Layout rules that refer to the width use the height instead, and vice versa. <li> Layout rules that refer to the *-left and *-right box properties (border, margin, padding, positioning offsets) use *-top and *-bottom instead, and vice versa, mapping the horizontal writing-mode rules of CSS2.1 into vertical writing-mode rules using the <a data-link-type="dfn" href="#flow-relative-direction" id="ref-for-flow-relative-direction">flow-relative directions</a>. The side of the box these properties apply to doesn’t change: only which values are inputs to which layout calculations changes. The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-left" id="ref-for-propdef-margin-left">margin-left</a> property still affects the lefthand margin, for example; however in a <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl⑦">vertical-rl</a> writing mode it takes part in margin collapsing in place of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom">margin-bottom</a>. <li> Layout rules that depend on the <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction③②">direction</a> property to choose between left and right (e.g. overflow, overconstraint resolution, the initial value for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align①">text-align</a>, table column ordering) are abstracted to the <a data-link-type="dfn" href="#css-start" id="ref-for-css-start④">start</a> and <a data-link-type="dfn" href="#css-end" id="ref-for-css-end②">end</a> sides and applied appropriately. </ul> <div class="example" id="example-63009bd2"> <a class="self-link" href="#example-63009bd2"></a> For example, in vertical writing modes, table rows are vertical and table columns are horizontal. In a <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl⑧">vertical-rl</a> <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed⑦">mixed</a> <a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl⑦">rtl</a> table, the first column would be on the bottom (the <a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start④">inline-start</a> side), and the first row on the right (the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start⑥">block-start</a> side). The table’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-right" id="ref-for-propdef-margin-right">margin-right</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-left" id="ref-for-propdef-margin-left①">margin-left</a> would collapse with margins before (on the right) and after (on the left) the table, respectively, and if the table had auto values for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top">margin-top</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom①">margin-bottom</a> it would be centered vertically within its block flow. <div class="figure"> <a href="diagrams/vertical-table.svg"> <img alt="Diagram of a vertical-rl mixed rtl table in a vertical block formatting context, showing the ordering of rows, cells, and columns as described above." height="299" src="diagrams/vertical-table.png" width="441"></a> Table in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl⑨">vertical-rl</a> RTL writing mode </div> </div> For features such as text alignment, floating, and list marker positioning, that primarily reference the left or right sides of the line box or its longitudinal parallels and therefore have no top or bottom equivalent, the <a data-link-type="dfn" href="#line-left" id="ref-for-line-left⑤">line-left</a> and <a data-link-type="dfn" href="#line-right" id="ref-for-line-right④">line-right</a> sides are used as the reference for the left and right sides respectively. Likewise for features such as underlining, overlining, and baseline alignment (the unfortunately-named <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align⑥">vertical-align</a>), that primarily reference the top or bottom sides of the linebox or its transversal parallels and therefore have no left or right equivalent, the <a data-link-type="dfn" href="#line-over" id="ref-for-line-over②">line-over</a> and <a data-link-type="dfn" href="#line-under" id="ref-for-line-under②">line-under</a> sides are used as the reference for the top and bottom sides respectively. The details of these mappings are provided below. <h3 class="heading settled" data-level="7.2" id="dimension-mapping">7.2. Dimensional Mapping<a class="self-link" href="#dimension-mapping"></a></h3> Certain properties behave logically as follows: <ul> <li>The first and second values of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-tables-3/#propdef-border-spacing" id="ref-for-propdef-border-spacing">border-spacing</a> property represent spacing between columns and rows respectively, not necessarily the horizontal and vertical spacing respectively. [[!CSS2]] <li>The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height">line-height</a> property always refers to the logical height. [[!CSS2]] </ul> The height properties (<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height">height</a>, <a class="property css" data-link-type="property">min-height</a>, and max-height) refer to the physical height, and the width properties (<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width">width</a>, min-width, and max-width) refer to the physical width. However, the rules used to calculate box dimensions and positions are logical. For example, the calculation rules in <a href="https://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">CSS2.1 Section 10.3</a> are used for the inline dimension measurements: they apply to the <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size">inline size</a> (which could be either the physical width or physical height) and to the <a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start⑤">inline-start</a> and <a data-link-type="dfn" href="#inline-end" id="ref-for-inline-end④">inline-end</a> margins, padding, and border. Likewise the calculation rules in <a href="https://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins">CSS2.1 Section 10.6</a> are used in the block dimension: they apply to the <a data-link-type="dfn" href="#block-size" id="ref-for-block-size">block size</a> and to the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start⑦">block-start</a> and <a data-link-type="dfn" href="#block-end" id="ref-for-block-end⑤">block-end</a> margins, padding, and border. [[!CSS2]] As a corollary, percentages on the margin and padding properties, which are always calculated with respect to the containing block width in CSS2.1, are calculated with respect to the <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size①">inline size</a> of the containing block in CSS3. <h3 class="heading settled" data-level="7.3" id="orthogonal-flows">7.3. Orthogonal Flows<a class="self-link" href="#orthogonal-flows"></a></h3> <div class="note" role="note"> We appreciate feedback in general, but we are particularly interested in feedback on this particularly complicated section. </div> When a box has a different <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②②">writing-mode</a> from its containing block two cases are possible: <ul> <li>The two writing modes are parallel to each other. (For example, <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl①⓪">vertical-rl</a> and <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr⑥">vertical-lr</a>). <li>The two writing modes are perpendicular to each other. (For example, <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb⑧">horizontal-tb</a> and <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl①①">vertical-rl</a>). </ul> When a box has a writing mode that is perpendicular to its containing block it is said to be in, or establish, an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="establish an orthogonal flow | orthogonal flow | orthogonal" id="establish-an-orthogonal-flow">orthogonal flow</dfn>. To handle this case, CSS layout calculations are divided into two phases: sizing a box, and positioning the box within its flow. <ul> <li> In the sizing phase—calculating the width and height of the box—the dimensions of the box and the containing block are mapped to the <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size②">inline size</a> and <a data-link-type="dfn" href="#block-size" id="ref-for-block-size①">block size</a> and calculations are performed accordingly using the writing mode of the box establishing the <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow">orthogonal flow</a>. <li> In the positioning phase—calculating the positioning offsets, margins, borders, and padding—the dimensions of the box and its containing block are mapped to the <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size③">inline size</a> and <a data-link-type="dfn" href="#block-size" id="ref-for-block-size②">block size</a> and calculations are performed according to the writing mode of the containing block of the box establishing the <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow①">orthogonal flow</a>. </ul> Since auto margins are resolved consistent with the containing block’s writing mode, a box establishing an <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow②">orthogonal flow</a> can, once sized, be aligned or centered within its containing block just like other block-level boxes by using auto margins. <div class="example" id="example-d9cb469c"> <a class="self-link" href="#example-d9cb469c"></a> <div class="sidefigure"> <img alt="Diagram of a vertical flow box appearing in between two horizontal flow boxes." src="images/orthogonal.svg" width="180"> An example of orthogonal flow </div> For example, if a vertical block is placed inside a horizontal block, then when calculating the physical height (which is the <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size④">inline size</a>) of the child block the physical height of the parent block is used as the child’s containing block inline size, even though the physical height is the <a data-link-type="dfn" href="#block-size" id="ref-for-block-size③">block size</a>, not the inline size, of the parent block. On the other hand, because the containing block is in a horizontal writing mode, the vertical margins on the child participate in margin-collapsing, even though they are in the <a data-link-type="dfn" href="#inline-axis" id="ref-for-inline-axis②">inline-axis</a> of the child, and horizontal auto margins will expand to fill the containing block, even though they are in the <a data-link-type="dfn" href="#block-axis" id="ref-for-block-axis">block-axis</a> of the child. </div> <div class="note" id="orthogonal-shrink-to-fit" role="note"> <a class="self-link" href="#orthogonal-shrink-to-fit"></a> Note that this section requires that when a child box auto-sized in its block axis establishes an orthogonal flow, the used block size of the child is calculated to fit its content; and this resulting content-based size is used as input to the <a data-link-type="dfn" href="#inline-axis" id="ref-for-inline-axis③">inline-axis</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content">min-content size</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content">max-content size</a> of the parent. This means that when applying shrink-to-fit formula to a box such as an inline-block, float, or table-cell, if its child establishes an orthogonal flow, the calculation dependency must be changed so that the sizing phase of the child runs first and its used <a data-link-type="dfn" href="#block-size" id="ref-for-block-size④">block size</a> becomes an input to the <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size⑦">inline-size</a> shrink-to-fit formula of the parent. </div> <h4 class="heading settled" data-level="7.3.1" id="orthogonal-auto">7.3.1. Available Space of Orthogonal Flows<a class="self-link" href="#orthogonal-auto"></a></h4> It is common in CSS for a containing block to have a definite <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size⑧">inline size</a>, but not a definite <a data-link-type="dfn" href="#block-size" id="ref-for-block-size⑤">block size</a>. This typically happens in CSS2.1 when a containing block has an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto">auto</a> height, for example: its width is given by the calculations in <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">10.3.3</a>, but its block size depends on its contents. In such cases the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available">available inline space</a> is defined as the inline size of the containing block; but the available block space, which would otherwise be the block size of the containing block, is infinite. Putting a box in an <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow③">orthogonal flow</a> can result in the opposite: for the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available②">available block space</a> to be definite, but its available inline space to be indefinite. In such cases a percentage of the containing block’s <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size①⓪">inline size</a> cannot be defined, and <a data-link-type="dfn" href="#inline-axis" id="ref-for-inline-axis④">inline axis</a> computations cannot be resolved. In these cases, an additional <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#fallback" id="ref-for-fallback">fallback size</a> is used in place of the available inline space for calculations that require a definite available inline space: this size is the smallest of <ul> <li>the size represented by the containing block’s inner <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-width" id="ref-for-max-width">max size</a> (if that is fixed) floored by its inner <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-width" id="ref-for-min-width">min size</a> (if that is fixed) <li>the nearest ancestor <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport" id="ref-for-scrollport">scrollport</a>’s inner size if that is fixed, else / capped by its inner <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-width" id="ref-for-max-width①">max size</a> if that is fixed, floored by its inner <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-width" id="ref-for-min-width①">min size</a> if that is fixed <li>the initial containing block’s size </ul> See [[!css-sizing-3]] for further details on CSS sizing terminology and concepts. <h4 class="heading settled" data-level="7.3.2" id="orthogonal-layout">7.3.2. Auto-sizing Orthogonal Flow Roots<a class="self-link" href="#orthogonal-layout"></a></h4> The <a data-link-type="dfn" href="#inline-axis" id="ref-for-inline-axis⑤">inline-axis</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-size" id="ref-for-automatic-size">automatic size</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-level" id="ref-for-block-level">block-level</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container③">block container</a> <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow④">orthogonal flow</a> (i.e. the size used when its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#preferred-size-properties" id="ref-for-preferred-size-properties">preferred size property</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①">auto</a>) is calculating as its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#fit-content-size" id="ref-for-fit-content-size">fit-content size</a>, i.e. <code>min(<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-inline-size" id="ref-for-max-content-inline-size">max-content inline size</a>, max(<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-inline-size" id="ref-for-min-content-inline-size">min-content inline size</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#stretch-fit-inline-size" id="ref-for-stretch-fit-inline-size">stretch-fit inline size</a>)</code>, where the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available⑥">available space</a> used to calculate the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#stretch-fit-inline-size" id="ref-for-stretch-fit-inline-size①">stretch-fit inline size</a> is either the size of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block">containing block</a> if that is <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#definite" id="ref-for-definite">definite</a>, or else the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#fallback" id="ref-for-fallback①">fallback size</a> as defined [[#orthogonal-auto|above]]. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-size" id="ref-for-automatic-size①">automatic sizing</a> of orthogonal <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-2/#multi-column-container" id="ref-for-multi-column-container">multi-column containers</a> (in both axes) and of other <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#display-type" id="ref-for-display-type">display types</a> not mentioned above is not defined in this specification. Note: See also <a href="https://www.w3.org/TR/css-writing-modes-4/#auto-multicol">CSS Writing Modes Level 4</a>. <h4 class="heading settled" data-level="7.3.3" id="orthogonal-pagination">7.3.3. Fragmenting Orthogonal Flows<a class="self-link" href="#orthogonal-pagination"></a></h4> This section is informative. With regards to fragmentation, the rules in CSS2.1 still hold in vertical writing modes and orthogonal flows: break opportunities do not occur inside line boxes, only between them. UAs that support [[!CSS3COL]] may break in the (potentially zero-width) gap between columns, however. Note that if content spills outside the pagination stream established by the root element, the UA is not required to print such content. Authors wishing to mix writing modes with long streams of text are thus encouraged to use CSS columns to keep all content flowing in the document’s pagination direction. <div class="note" role="note"> In other words, if your document would require two scrollbars on the screen it probably won’t all print. Fix your layout, e.g. by using <a href="https://www.w3.org/TR/css3-multicol/">columns</a> so that it all scrolls (and therefore paginates) in one direction if you want to make sure it’ll all print. T-shaped documents tend not to print well. </div> <h3 class="heading settled" data-level="7.4" id="logical-direction-layout">7.4. Flow-Relative Mappings<a class="self-link" href="#logical-direction-layout"></a></h3> Flow-relative directions are calculated with respect to the writing mode of the containing block of the box and used to abstract layout rules related to the box properties (margins, borders, padding) and any properties related to positioning the box within its containing block (<a class="property css" data-link-type="property">float</a>, clear, top, bottom, left, right, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-tables-3/#propdef-caption-side" id="ref-for-propdef-caption-side">caption-side</a>). For inline-level boxes, the writing mode of the parent box is used instead. (The left/right/top/bottom-named properties and values themselves are still mapped physically; with a special exception made for caption-side, whose <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-caption-side-top" id="ref-for-valdef-caption-side-top">top</a>/top-outside and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-caption-side-bottom" id="ref-for-valdef-caption-side-bottom">bottom</a>/bottom-outside values are associated to the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start⑧">block-start</a> and <a data-link-type="dfn" href="#block-end" id="ref-for-block-end⑥">block-end</a> sides of the table, respectively.) For example, the margin that is dropped when a box’s inline dimension is <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">over-constrained</a> is the end margin as determined by the writing mode of the containing block. The <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">margin collapsing rules</a> apply exactly with the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start⑨">block-start</a> margin substituted for the top margin and the <a data-link-type="dfn" href="#block-end" id="ref-for-block-end⑦">block-end</a> margin substituted for the bottom margin. Similarly the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start①⓪">block-start</a> padding and border are substituted for the top padding and border, and the <a data-link-type="dfn" href="#block-end" id="ref-for-block-end⑧">block-end</a> padding and border substituted for the bottom padding and border. Note this means only block-start and block-end margins ever collapse. Flow-relative directions are calculated with respect to the writing mode of the box and used to abstract layout related to the box’s contents: <ul> <li>The initial value of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align②">text-align</a> property aligns to the <a data-link-type="dfn" href="#css-start" id="ref-for-css-start⑤">start</a> edge of the line box. <li>The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-text-indent" id="ref-for-propdef-text-indent">text-indent</a> property indents from the <a data-link-type="dfn" href="#css-start" id="ref-for-css-start⑥">start</a> edge of the line box. <li>For tables, the ordering of columns begins on the <a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start⑥">inline-start</a> side of the table, and the ordering of rows begins on the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start①②">block-start</a> side of the table. </ul> <h3 class="heading settled" data-level="7.5" id="line-mappings">7.5. Line-Relative Mappings<a class="self-link" href="#line-mappings"></a></h3> The <a data-link-type="dfn" href="#line-relative-direction" id="ref-for-line-relative-direction">line-relative directions</a> are <a data-link-type="dfn" href="#over" id="ref-for-over③">over</a>, <a data-link-type="dfn" href="#under" id="ref-for-under③">under</a>, <a data-link-type="dfn" href="#line-left" id="ref-for-line-left⑥">line-left</a>, and <a data-link-type="dfn" href="#line-right" id="ref-for-line-right⑤">line-right</a>. In an <abbr title="left-to-right">LTR</abbr> <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb⑨">horizontal-tb</a> writing mode, they correspond to the top, bottom, left, and right directions, respectively. The <a data-link-type="dfn" href="#line-right" id="ref-for-line-right⑥">line-right</a> and <a data-link-type="dfn" href="#line-left" id="ref-for-line-left⑦">line-left</a> directions are calculated with respect to the writing mode of the box and used to interpret the left and right values of the following properties: <ul> <li>the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align③">text-align</a> property [[!CSS2]] </ul> The <a data-link-type="dfn" href="#line-right" id="ref-for-line-right⑦">line-right</a> and <a data-link-type="dfn" href="#line-left" id="ref-for-line-left⑧">line-left</a> directions are calculated with respect to the writing mode of the containing block of the box and used to interpret the left and right values of the following properties: <ul> <li>the <a class="property css" data-link-type="property">float</a> property [[!CSS2]] <li>the <a class="property css" data-link-type="property">clear</a> property [[!CSS2]] <li>the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-tables-3/#propdef-caption-side" id="ref-for-propdef-caption-side②">caption-side</a> property [[!CSS2]] </ul> The <a data-link-type="dfn" href="#over" id="ref-for-over④">over</a> and <a data-link-type="dfn" href="#under" id="ref-for-under④">under</a> directions are calculated with respect to the writing mode of the box and used to define the interpretation of the "top" (over) and "bottom" (under) sides of the line box as follows: <ul> <li>For the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align⑦">vertical-align</a> property, the "top" of the line box is its <a data-link-type="dfn" href="#over" id="ref-for-over⑤">over</a> edge; the "bottom" of the line box is its under edge. Positive length and percentage values shift the baseline towards the <a data-link-type="dfn" href="#line-over" id="ref-for-line-over③">line-over</a> edge. [[!CSS2]] <li>For the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration" id="ref-for-propdef-text-decoration">text-decoration</a> property, the underline is drawn on the <a data-link-type="dfn" href="#under" id="ref-for-under⑤">under</a> side of the text; the overline is drawn on the <a data-link-type="dfn" href="#over" id="ref-for-over⑥">over</a> side of the text. [[!CSS2]] Note that the CSS Text Decoration Module defines this in more detail and provides additional controls for controlling the position of underlines and overlines. [[CSS3-TEXT-DECOR]] </ul> <h3 class="heading settled" data-level="7.6" id="physical-only">7.6. Purely Physical Mappings<a class="self-link" href="#physical-only"></a></h3> The following values are purely physical in their definitions and do not respond to changes in writing mode: <ul> <li>the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect" id="ref-for-funcdef-basic-shape-rect">rect()</a> notation of the <a class="property css" data-link-type="property">clip</a> property [[!CSS2]] <li>the background properties [[!CSS2]] [[!CSS3BG]] <li>the border-image properties [[!CSS3BG]] <li>the offsets of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow" id="ref-for-propdef-box-shadow">box-shadow</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-shadow" id="ref-for-propdef-text-shadow">text-shadow</a> properties </ul> <h2 class="heading settled" data-level="8" id="principal-flow">8. The Principal Writing Mode<a class="self-link" href="#principal-flow"></a></h2> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="principal-writing-mode">principal writing mode</dfn> of the document is determined by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value③">used</a> <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②③">writing-mode</a>, <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction③③">direction</a>, and <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①④">text-orientation</a> values of the root element. This writing mode is used, for example, to determine the direction of scrolling and the default <a data-link-type="dfn" href="https://drafts.csswg.org/css-page-3/#page-progression" id="ref-for-page-progression">page progression</a> direction. As a special case for handling HTML documents, if the root element has a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element">body</a></code> child element [[!HTML]] <ins cite="#correction-display-none-propagation">whose <a class="property css" data-link-type="property">display</a> value is not <a class="css" data-link-type="maybe" href="#valdef-text-combine-upright-none" id="ref-for-valdef-text-combine-upright-none">none</a></ins> , the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value④">used value</a> of the of <a class="property css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②④">writing-mode</a> and <a class="property css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction③④">direction</a> properties on root element are taken from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value②">computed</a> writing-mode and direction of the first such child element instead of from the root element’s own values. The UA may also propagate the value of <a class="property css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①⑤">text-orientation</a> in this manner. Note that this does not affect the computed values of writing-mode, direction, or text-orientation of the root element itself. Note: Using <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#containment" id="ref-for-containment">containment</a> disables this special handling of the HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element①">body</a></code> element. See the [[CSS-CONTAIN-1#contain-property]] for details. <div class="correction" id="correction-display-none-propagation"> Candidate Correction 1: Specify that the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element②">body</a></code> element is ignored for determining the <a data-link-type="dfn" href="#principal-writing-mode" id="ref-for-principal-writing-mode">principal writing mode</a> if it has <a class="css" data-link-type="propdesc">display: none</a>. <a href="https://github.com/w3c/csswg-drafts/issues/3779">Issue 3779</a> </div> Note: Propagation is done on used values rather than computed values to avoid disrupting other aspects of style computation, such as <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#css-inheritance" id="ref-for-css-inheritance">inheritance</a>, [[css-logical-1#box|logical property mapping logic]], or [[css-values-4#lengths|length value computation]]. <h3 class="heading settled" data-level="8.1" id="icb">8.1. Propagation to the Initial Containing Block<a class="self-link" href="#icb"></a></h3> The <a data-link-type="dfn" href="#principal-writing-mode" id="ref-for-principal-writing-mode①">principal writing mode</a> is propagated to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block">initial containing block</a> and to the viewport, thereby affecting the layout of the root element and the scrolling direction of the viewport. <h3 class="heading settled" data-level="8.2" id="page-direction">8.2. Page Flow: the page progression direction<a class="self-link" href="#page-direction"></a></h3> In <a data-link-type="dfn" href="https://drafts.csswg.org/mediaqueries-5/#paged-media" id="ref-for-paged-media">paged media</a> CSS classifies all pages as either left or right pages. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-page-3/#page-progression" id="ref-for-page-progression①">page progression</a> direction (see [[CSS3PAGE]]), which determines whether the left or right page in a spread is first in the flow and whether the first page is by default a left or right page, depends on the <a data-link-type="dfn" href="#principal-writing-mode" id="ref-for-principal-writing-mode②">principal writing mode</a> as follows: <table class="data"> <thead> <tr> <th><a data-link-type="dfn" href="#principal-writing-mode" id="ref-for-principal-writing-mode③">principal writing mode</a> <th><a data-link-type="dfn" href="https://drafts.csswg.org/css-page-3/#page-progression" id="ref-for-page-progression②">page progression</a> <tbody> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb①⓪">horizontal-tb</a> and <a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑧">ltr</a> <td>left-to-right <tr> <td><a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb①①">horizontal-tb</a> and <a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl⑧">rtl</a> <td>right-to-left <tr> <td><a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl①②">vertical-rl</a> <td>right-to-left <tr> <td><a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr⑦">vertical-lr</a> <td>left-to-right </table> Note: Unless otherwise overridden, the first page of a document begins on the second half of a spread, e.g. on the right page in a left-to-right page progression. <h2 class="heading settled" data-level="9" id="text-combine">9. Glyph Composition<a class="self-link" href="#text-combine"></a></h2> <h3 class="heading settled" data-level="9.1" id="text-combine-upright">9.1. Horizontal-in-Vertical Composition: the <a class="property css" data-link-type="property" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright">text-combine-upright</a> property<a class="self-link" href="#text-combine-upright"></a></h3> <table class="def propdef" data-link-for-hint="text-combine-upright"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-combine-upright">text-combine-upright</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> all <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-box" id="ref-for-inline-box①">inline boxes</a> and text <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>not animatable </table> This property specifies the combination of multiple <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit⑨">typographic character units</a> into the space of a single typographic character unit. If the combined text is wider than 1em, the UA must fit the contents within 1em, see below. The resulting composition is treated as a single upright glyph for the purposes of layout and decoration. This property only has an effect in vertical writing modes. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="text-combine-upright" data-dfn-type="value" data-export id="valdef-text-combine-upright-none">none</dfn> <dd>No special processing. <dt><dfn class="dfn-paneled css" data-dfn-for="text-combine-upright" data-dfn-type="value" data-export id="valdef-text-combine-upright-all">all</dfn> <dd>Attempt to typeset horizontally all consecutive <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit①①">typographic character units</a> within the box or text run such that they take up the space of a single typographic character unit within the vertical line box. </dl> <div class="example" id="example-8f7f7a77"> <a class="self-link" href="#example-8f7f7a77"></a> In East Asian documents, the text-combine-upright effect is often used to display Latin-based strings such as components of a date or letters of an initialism, always in a horizontal writing mode regardless of the writing mode of the line: <div class="figure"> <img alt="Diagram of tate-chu-yoko, showing the two digits of a date set halfwidth side-by-side in a vertical column of text" height="326" src="images/tate-chu-yoko.png" width="121"> Example of horizontal-in-vertical tate-chu-yoko </div> The figure is the result of the rules <pre>date span { text-combine-upright: all; } </pre> and the following markup: <pre><date>平成20年4月16日に</date> </pre> In Japanese, this effect is known as tate-chu-yoko. </div> Future levels of CSS Writing Modes will introduce values to automatically detect commonly-affected sequences. For example, <a href="http://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a> introduces the digits value to combine sequences of digits. <h4 class="heading settled" data-level="9.1.1" id="text-combine-runs">9.1.1. Text Run Rules<a class="self-link" href="#text-combine-runs"></a></h4> To avoid complexity in the rendering and layout, <a class="property css" data-link-type="property" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright①">text-combine-upright</a> can only combine plain text: consecutive <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit①③">typographic character units</a> that are not interrupted by a box boundary. However, because the property inherits, the UA should ensure that the contents of the box effecting the combination are not part of an otherwise-combinable sequence that happens to begin or end outside the box; if so, then the text is laid out normally, as if <a class="property css" data-link-type="property" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright②">text-combine-upright</a> were <a class="css" data-link-type="maybe" href="#valdef-text-combine-upright-none" id="ref-for-valdef-text-combine-upright-none①">none</a>. <div class="example" id="example-16eb3bf1"> <a class="self-link" href="#example-16eb3bf1"></a> For example, given the rule <pre>tcy { text-combine-upright: all; }</pre> if the following markup were given: <pre><tcy>1234</tcy></pre> no text would combine. </div> <h4 class="heading settled" data-level="9.1.2" id="text-combine-layout">9.1.2. Layout Rules<a class="self-link" href="#text-combine-layout"></a></h4> When combining text as for <a class="css" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright③">text-combine-upright: all</a>, the glyphs of the combined text are <a data-link-type="dfn" href="#bidi-isolate" id="ref-for-bidi-isolate①">bidi-isolated</a> and composed horizontally (ignoring <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-3/#propdef-letter-spacing" id="ref-for-propdef-letter-spacing">letter-spacing</a> and any forced line breaks, but using the specified font settings), similar to the contents of an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-inline-block" id="ref-for-valdef-display-inline-block①">inline-block</a> box with a <a data-link-type="dfn" href="#horizontal-writing-mode" id="ref-for-horizontal-writing-mode②">horizontal writing mode</a> and a <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height①">line-height</a> of 1em. Processing of <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#white-space" id="ref-for-white-space">document white space</a> included in the combined text is not defined in this level. The effective size of the composition is assumed to be 1em square; anything outside the square is not measured for layout purposes. The UA should center the glyphs horizontally and vertically within the measured 1em square. The baseline of the resulting composition must be chosen such that the square is centered between the text-over and text-under baselines of its parent inline box prior to any baseline alignment shift (<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align⑧">vertical-align</a>). For bidi reordering, the composition is treated the same as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit①④">typographic character unit</a> with <a class="css" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①⑦">text-orientation: upright</a>. For line breaking before and after the composition, it is treated as a regular inline with its actual contents. For other text layout purposes, e.g. emphasis marks, text-decoration, spacing, etc. the resulting composition is treated as a single glyph representing the Object Replacement Character U+FFFC. <h4 class="heading settled" data-level="9.1.3" id="text-combine-compression">9.1.3. Compression Rules<a class="self-link" href="#text-combine-compression"></a></h4> The UA must ensure that the combined advance width of the composition fits within 1em by compressing the combined text if necessary. (This does not necessarily mean that the glyphs will fit within 1em, as some glyphs are designed to draw outside their geometric boundaries.) OpenType implementations must use width-specific variants (OpenType features <code>hwid</code>/<code>twid</code>/<code>qwid</code>; other glyph-width features such as <code>fwid</code> or <code>pwid</code> are not included) to compress text in cases where those variants are available for all <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit①⑤">typographic character units</a> in the composition. Otherwise, the UA may use any means to compress the text, including substituting half-width, third-width, and/or quarter-width glyphs provided by the font, using other font features designed to compress text horizontally, scaling the text geometrically, or any combination thereof. <div class="example" id="example-da304b32"> <a class="self-link" href="#example-da304b32"></a> For example, a simple OpenType-based implementation might compress the text as follows: <ol> <li>Enable 1/<var>n</var>-width glyphs for combined text of <var>n</var> <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit①⑥">typographic character units</a> (i.e. use OpenType <code>hwid</code> for 2 typographic character units, <code>twid</code> for 3 typographic character units, etc.) if the number of typographic character units > 1. Note that the number of typographic character units ≠ number of Unicode codepoints! <li>If the result is wider than 1em, horizontally scale the result to 1em. </ol> A different implementation that utilizes OpenType layout features might compose the text first with normal glyphs to see if that fits, then substitute in half-width or third-width forms as available and necessary, possibly adjusting its approach or combining it with scaling operations depending on the available glyph substitutions. </div> In some fonts, the ideographic glyphs are given a compressed design such that they are 1em wide but shorter than 1em tall. To accommodate such fonts, the UA may vertically scale the composition to match the advance height of 水 U+6C34 as rendered according to the specified font settings. In such a case the resulting composition assumes the advance height of 水 U+6C34 rather than 1em. <h5 class="heading settled" data-level="9.1.3.1" id="text-combine-fullwidth">9.1.3.1. Full-width Characters<a class="self-link" href="#text-combine-fullwidth"></a></h5> In order to preserve typographic color when compressing the text to 1em, when the combined text consists of more than one <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit②①">typographic character unit</a>, then any full-width typographic character units should first be converted to their non-full-width equivalents by reversing the algorithm defined for <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-4/#propdef-text-transform" id="ref-for-propdef-text-transform">text-transform: full-width</a> in [[!CSS-TEXT-3]] before applying other compression techniques. Properties that affect glyph selection, such as the <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-variant" id="ref-for-propdef-font-variant">font-variant</a> and <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-feature-settings" id="ref-for-propdef-font-feature-settings">font-feature-settings</a> properties defined in [[CSS3-FONTS]], can potentially affect the selection of variants for characters included in combined text runs. Authors are advised to use these properties with care when <a class="property css" data-link-type="property" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright④">text-combine-upright</a> is also used. <h2 class="heading settled" data-level="10" id="priv-sec">10. Privacy and Security Considerations<a class="self-link" href="#priv-sec"></a></h2> This specification introduces no new privacy leaks, or security considerations beyond "implement it correctly". <h2 class="no-num heading settled" id="changes">Changes<a class="self-link" href="#changes"></a></h2> See also <a href="https://www.w3.org/TR/2019/REC-css-writing-modes-3-20191210/#changes">list of changes during Candidate Recommendation</a>. <h3 class="no-num heading settled" id="changes-2019"> Changes since the <a href="https://www.w3.org/TR/2019/REC-css-writing-modes-3-20191210/">December 2019 CSS Writing Modes Module Level 4 Recommendation</a><a class="self-link" href="#changes-2019"></a></h3> <ul class="informative"> <li>Specified that a <a class="css" data-link-type="propdesc">display: none</a> <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element③">body</a></code> element does not influence the <a data-link-type="dfn" href="#principal-writing-mode" id="ref-for-principal-writing-mode④">principal writing mode</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/3779">Issue 3779</a>) <li>Updated “Applies to” line for <a class="property css" data-link-type="property" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright⑤">text-combine-upright</a> to mention text (since certain effects like <a class="css" data-link-type="propdesc">display: contents</a> can strip the box itself). <li> Clarified that the <a data-link-type="dfn" href="#central-baseline" id="ref-for-central-baseline①">central baseline</a> is the <a data-link-type="dfn">ideographic central baseline</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5177">Issue 5177</a>) <li>Reshuffled text in the [[#intro]] and improved cross-linking. </ul> <h2 class="no-num heading settled" id="acknowledgements"> Acknowledgements<a class="self-link" href="#acknowledgements"></a></h2> L. David Baron, Brian Birtles, James Clark, John Daggett, Nami Fujii, Daisaku Hataoka, Martin Heijdra, Laurentiu Iancu, Richard Ishida, Jonathan Kew, Yasuo Kida, Tatsuo Kobayashi, Toshi Kobayashi, Ken Lunde, Shunsuke Matsuki, Nat McCully, Eric Muller, Paul Nelson, Kenzou Onozawa, Chris Pratley, Xidorn Quan, Florian Rivoal, Dwayne Robinson, Simon Sapin, Marcin Sawicki, Dirk Schulze, Hajime Shiozawa, Alan Stearns, Michel Suignard, Takao Suzuki, Gérard Talbot, Masataka Yakura, Taro Yamamoto, Steve Zilles <h2 class="no-num heading settled" id="script-orientations">Appendix A: Vertical Scripts in Unicode<a class="self-link" href="#script-orientations"></a></h2> This section is informative. This appendix lists the <a data-link-type="dfn" href="#vertical-only" id="ref-for-vertical-only①">vertical-only</a> and <a data-link-type="dfn" href="#bi-orientational" id="ref-for-bi-orientational②">bi-orientational</a> scripts in Unicode 6.0 [[!UNICODE]] and their transformation from horizontal to vertical orientation. Any script not listed explicitly is assumed to be <a data-link-type="dfn" href="#horizontal-only" id="ref-for-horizontal-only②">horizontal-only</a>. The script classification of Unicode characters is given by [[!UAX24]]. <table class="data"> <caption>Vertical Scripts in Unicode</caption> <thead> <tr> <th>Code <th>Name <th>Transform (Clockwise) <th>Vertical Intrinsic Direction <tbody> <tr> <td>Bopo <td>Bopomofo <th>0° <th>ttb <tr> <td>Egyp <td>Egyptian Hieroglyphs <th>0° <th>ttb <tr> <td>Hira <td>Hiragana <th>0° <th>ttb <tr> <td>Kana <td>Katakana <th>0° <th>ttb <tr> <td>Hani <td>Han <th>0° <th>ttb <tr> <td>Hang <td>Hangul <th>0° <th>ttb <tr> <td>Merc <td>Meroitic Cursive <th>0° <th>ttb <tr> <td>Mero <td>Meroitic Hieroglyphs <th>0° <th>ttb <tr> <td>Mong <td>Mongolian <th>90° <th>ttb <tr> <td>Ogam <td>Ogham <th>-90° <th>btt <tr> <td>Orkh <td>Old Turkic <th>-90° <th>ttb <tr> <td>Phag <td>Phags Pa <th>90° <th>ttb <tr> <td>Yiii <td>Yi <th>0° <th>ttb </table> Exceptions: For the purposes of this specification, all fullwidth (F) and wide (W) characters are treated as belonging to a vertical script, and halfwidth characters (H) are treated as belonging to a <a data-link-type="dfn" href="#horizontal-script" id="ref-for-horizontal-script">horizontal script</a>. [[!UAX11]] Note that for <a data-link-type="dfn" href="#vertical-only" id="ref-for-vertical-only②">vertical-only</a> characters (such as Mongolian and Phags Pa letters), the glyphs in the Unicode code charts are shown in their vertical orientation. In horizontal text, they are typeset in a 90° counter-clockwise rotation from this orientation. Due to limitations in the current feature set of Unicode Technical Report 50 and CSS Writing Modes, vertical <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed⑧">mixed</a> typesetting cannot automatically handle either Ogham or Old Turkic. For these scripts, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-lr" id="ref-for-valdef-writing-mode-sideways-lr①">sideways-lr</a> (in <a href="http://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>) can be used to typeset passages. </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code></code>, like this: UAs MUST provide an accessible alternative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative. <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#abstract-dimensions">abstract dimensions</a>, in § 6.1 <li><a href="#valdef-text-combine-upright-all">all</a>, in § 9.1 <li><a href="#alphabetic-baseline">alphabetic baseline</a>, in § 4.2 <li><a href="#baseline">baseline</a>, in § 4.1 <li><a href="#baseline-table">baseline table</a>, in § 4.1 <li><a href="#bidi-isolate">bidi-isolate</a>, in § 2.2 <li><a href="#bidi-isolate">bidi-isolated</a>, in § 2.2 <li><a href="#bidi-isolate">bidi isolation</a>, in § 2.2 <li><a href="#valdef-unicode-bidi-bidi-override">bidi-override</a>, in § 2.2 <li><a href="#bidi-paragraph">bidi paragraph</a>, in § 2.4 <li><a href="#bidirectionality">bidirectionality</a>, in § 2 <li><a href="#bi-orientational">bi-orientational</a>, in § 5 <li><a href="#bi-orientational-transform">bi-orientational transform</a>, in § 5 <li><a href="#block-axis">block axis</a>, in § 6.1 <li><a href="#block-axis">block-axis</a>, in § 6.1 <li><a href="#block-dimension">block dimension</a>, in § 6.1 <li><a href="#block-end">block end</a>, in § 6.2 <li><a href="#block-end">block-end</a>, in § 6.2 <li><a href="#block-flow-direction">block flow direction</a>, in § 1 <li><a href="#block-size">block size</a>, in § 6.1 <li><a href="#block-size">block-size</a>, in § 6.1 <li><a href="#block-start">block start</a>, in § 6.2 <li><a href="#block-start">block-start</a>, in § 6.2 <li><a href="#physical-bottom">bottom</a>, in § 6 <li><a href="#central-baseline">central baseline</a>, in § 4.2 <li><a href="#propdef-direction">direction</a>, in § 2.1 <li><a href="#directional-embedding">directional embedding</a>, in § 2.2 <li><a href="#directional-override">directional override</a>, in § 2.2 <li><a href="#dominant-baseline">dominant baseline</a>, in § 4.4 <li><a href="#valdef-unicode-bidi-embed">embed</a>, in § 2.2 <li><a href="#css-end">end</a>, in § 6.2 <li><a href="#css-end">endmost</a>, in § 6.2 <li><a href="#establish-an-orthogonal-flow">establish an orthogonal flow</a>, in § 7.3 <li><a href="#flow-relative">flow-relative</a>, in § 6 <li><a href="#flow-relative-direction">flow-relative direction</a>, in § 6.2 <li><a href="#forced-paragraph-break">forced paragraph break</a>, in § 2.4 <li><a href="#propdef-glyph-orientation-vertical">glyph-orientation-vertical</a>, in § 5.1.3 <li><a href="#height">height</a>, in § 6 <li><a href="#x-axis">horizontal axis</a>, in § 6 <li><a href="#horizontal-block-flow">horizontal block flow</a>, in § 1 <li><a href="#horizontal-dimension">horizontal dimension</a>, in § 6 <li><a href="#horizontal-only">horizontal-only</a>, in § 5 <li><a href="#horizontal-script">horizontal script</a>, in § 5 <li><a href="#valdef-writing-mode-horizontal-tb">horizontal-tb</a>, in § 3.2 <li><a href="#horizontal-typographic-mode">horizontal typographic mode</a>, in § 1 <li><a href="#horizontal-writing-mode">horizontal writing mode</a>, in § 1 <li><a href="#inline-axis">inline axis</a>, in § 6.1 <li><a href="#inline-axis">inline-axis</a>, in § 6.1 <li><a href="#inline-base-direction">inline base direction</a>, in § 1 <li><a href="#inline-dimension">inline dimension</a>, in § 6.1 <li><a href="#inline-end">inline end</a>, in § 6.2 <li><a href="#inline-end">inline-end</a>, in § 6.2 <li><a href="#inline-size">inline size</a>, in § 6.1 <li><a href="#inline-size">inline-size</a>, in § 6.1 <li><a href="#inline-start">inline start</a>, in § 6.2 <li><a href="#inline-start">inline-start</a>, in § 6.2 <li><a href="#valdef-unicode-bidi-isolate">isolate</a>, in § 2.2 <li><a href="#isolated-sequence">isolated sequence</a>, in § 2.2 <li><a href="#valdef-unicode-bidi-isolate-override">isolate-override</a>, in § 2.2 <li><a href="#bidi-isolate">isolation</a>, in § 2.2 <li><a href="#physical-left">left</a>, in § 6 <li><a href="#line-left">line-left</a>, in § 6.3 <li><a href="#line-orientation">line orientation</a>, in § 6.3 <li><a href="#line-over">line-over</a>, in § 6.3 <li><a href="#line-relative">line-relative</a>, in § 6 <li><a href="#line-relative-direction">line-relative direction</a>, in § 6.3 <li><a href="#line-right">line-right</a>, in § 6.3 <li><a href="#line-under">line-under</a>, in § 6.3 <li><a href="#logical-height">logical height</a>, in § 6.1 <li><a href="#logical-width">logical width</a>, in § 6.1 <li><a href="#valdef-direction-ltr">ltr</a>, in § 2.1 <li><a href="#valdef-text-orientation-mixed">mixed</a>, in § 5.1 <li><a href="#valdef-text-combine-upright-none">none</a>, in § 9.1 <li><a href="#valdef-unicode-bidi-normal">normal</a>, in § 2.2 <li><a href="#establish-an-orthogonal-flow">orthogonal</a>, in § 7.3 <li><a href="#establish-an-orthogonal-flow">orthogonal flow</a>, in § 7.3 <li><a href="#over">over</a>, in § 6.3 <li><a href="#physical">physical</a>, in § 6 <li><a href="#physical-bottom">physical bottom</a>, in § 6 <li><a href="#physical-dimensions">physical dimensions</a>, in § 6 <li><a href="#physical-direction">physical direction</a>, in § 6 <li><a href="#physical-left">physical left</a>, in § 6 <li><a href="#physical-right">physical right</a>, in § 6 <li><a href="#physical-top">physical top</a>, in § 6 <li><a href="#valdef-unicode-bidi-plaintext">plaintext</a>, in § 2.2 <li><a href="#principal-writing-mode">principal writing mode</a>, in § 8 <li><a href="#physical-right">right</a>, in § 6 <li><a href="#valdef-direction-rtl">rtl</a>, in § 2.1 <li> sideways <ul> <li><a href="#typeset-sideways">definition of</a>, in § 5.1.1 <li><a href="#valdef-text-orientation-sideways">value for text-orientation</a>, in § 5.1 </ul> <li><a href="#valdef-text-orientation-sideways-right">sideways-right</a>, in § 5.1 <li><a href="#typeset-sideways">sideways typesetting</a>, in § 5.1.1 <li><a href="#css-start">start</a>, in § 6.2 <li><a href="#css-start">startmost</a>, in § 6.2 <li><a href="#propdef-text-combine-upright">text-combine-upright</a>, in § 9.1 <li><a href="#propdef-text-orientation">text-orientation</a>, in § 5.1 <li><a href="#physical-top">top</a>, in § 6 <li><a href="#typeset-sideways">typeset sideways</a>, in § 5.1.1 <li><a href="#typeset-sideways">typesetting sideways</a>, in § 5.1.1 <li><a href="#typeset-upright">typesetting upright</a>, in § 5.1.1 <li><a href="#typeset-upright">typeset upright</a>, in § 5.1.1 <li><a href="#typographic-mode">typographic mode</a>, in § 1 <li><a href="#under">under</a>, in § 6.3 <li><a href="#propdef-unicode-bidi">unicode-bidi</a>, in § 2.2 <li> upright <ul> <li><a href="#typeset-upright">definition of</a>, in § 5.1.1 <li><a href="#valdef-text-orientation-upright">value for text-orientation</a>, in § 5.1 </ul> <li><a href="#typeset-upright">upright typesetting</a>, in § 5.1.1 <li><a href="#y-axis">vertical axis</a>, in § 6 <li><a href="#vertical-block-flow">vertical block flow</a>, in § 1 <li><a href="#vertical-dimension">vertical dimension</a>, in § 6 <li><a href="#valdef-writing-mode-vertical-lr">vertical-lr</a>, in § 3.2 <li><a href="#vertical-only">vertical-only</a>, in § 5 <li><a href="#valdef-writing-mode-vertical-rl">vertical-rl</a>, in § 3.2 <li><a href="#vertical-script">vertical script</a>, in § 5 <li><a href="#vertical-typographic-mode">vertical typographic mode</a>, in § 1 <li><a href="#vertical-writing-mode">vertical writing mode</a>, in § 1 <li><a href="#width">width</a>, in § 6 <li><a href="#writing-mode">writing mode</a>, in § 1 <li><a href="#propdef-writing-mode">writing-mode</a>, in § 3.2 <li><a href="#x-axis">x-axis</a>, in § 6 <li><a href="#y-axis">y-axis</a>, in § 6 </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms: <ul> <li>box-shadow </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li>margin-bottom <li>margin-left <li>margin-right <li>margin-top </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li>box-decoration-break </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>computed value <li>inherit <li>inheritance <li>used value </ul> <li> <a data-link-type="biblio">[CSS-CONTAIN-2]</a> defines the following terms: <ul> <li>containment </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>block container <li>block formatting context <li>block-level <li>containing block <li>display type <li>flow <li>flow-root <li>in-flow <li>independent formatting context <li>initial containing block <li>inline <li>inline box <li>inline-block <li>inner display type <li>replaced element </ul> <li> <a data-link-type="biblio">[CSS-FONTS-4]</a> defines the following terms: <ul> <li>font-feature-settings <li>font-variant </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-3]</a> defines the following terms: <ul> <li>default object size </ul> <li> <a data-link-type="biblio">[CSS-INLINE-3]</a> defines the following terms: <ul> <li>baseline <li>root inline box <li>sub <li>super <li>vertical-align </ul> <li> <a data-link-type="biblio">[CSS-MULTICOL-2]</a> defines the following terms: <ul> <li>multi-column container </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li>scrollport </ul> <li> <a data-link-type="biblio">[CSS-PAGE-3]</a> defines the following terms: <ul> <li>page progression </ul> <li> <a data-link-type="biblio">[CSS-SHAPES-1]</a> defines the following terms: <ul> <li>rect() </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>auto <li>automatic size <li>available block space <li>available inline space <li>available space <li>definite <li>fallback size <li>fit-content size <li>height <li>max size <li>max-content inline size <li>max-content size <li>min size <li>min-content inline size <li>min-content size <li>preferred size property <li>stretch-fit inline size <li>width </ul> <li> <a data-link-type="biblio">[CSS-TABLES-3]</a> defines the following terms: <ul> <li>border-spacing <li>caption-side </ul> <li> <a data-link-type="biblio">[CSS-TEXT-3]</a> defines the following terms: <ul> <li>character <li>letter-spacing <li>text-align </ul> <li> <a data-link-type="biblio">[CSS-TEXT-4]</a> defines the following terms: <ul> <li>document white space <li>text-indent <li>text-transform <li>typographic character unit </ul> <li> <a data-link-type="biblio">[CSS-TEXT-DECOR-3]</a> defines the following terms: <ul> <li>text-decoration </ul> <li> <a data-link-type="biblio">[CSS-TEXT-DECOR-4]</a> defines the following terms: <ul> <li>text-shadow </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li><angle> <li><integer> <li>CSS-wide keywords <li>font-relative lengths <li>| </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>sideways-lr </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li>bottom <li>line-height <li>top </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>body </ul> <li> <a data-link-type="biblio">[MEDIAQUERIES-5]</a> defines the following terms: <ul> <li>paged media </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://drafts.csswg.org/css-backgrounds/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-box-4/">https://drafts.csswg.org/css-box-4/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-5/">https://drafts.csswg.org/css-cascade-5/</a> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt id="biblio-css-display-4">[CSS-DISPLAY-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt id="biblio-css-images-3">[CSS-IMAGES-3] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://drafts.csswg.org/css-images-3/"><cite>CSS Images Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-images-3/">https://drafts.csswg.org/css-images-3/</a> <dt id="biblio-css-inline-3">[CSS-INLINE-3] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-inline-3/"><cite>CSS Inline Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-inline-3/">https://drafts.csswg.org/css-inline-3/</a> <dt id="biblio-css-multicol-2">[CSS-MULTICOL-2] <dd>Florian Rivoal; Rachel Andrew. <a href="https://drafts.csswg.org/css-multicol-2/"><cite>CSS Multi-column Layout Module Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-multicol-2/">https://drafts.csswg.org/css-multicol-2/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://drafts.csswg.org/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-overflow-3/">https://drafts.csswg.org/css-overflow-3/</a> <dt id="biblio-css-page-3">[CSS-PAGE-3] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-page-3/"><cite>CSS Paged Media Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-page-3/">https://drafts.csswg.org/css-page-3/</a> <dt id="biblio-css-shapes-1">[CSS-SHAPES-1] <dd>Rossen Atanassov; Alan Stearns. <a href="https://drafts.csswg.org/css-shapes/"><cite>CSS Shapes Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-shapes/">https://drafts.csswg.org/css-shapes/</a> <dt id="biblio-css-sizing-3">[CSS-SIZING-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-sizing-3/">https://drafts.csswg.org/css-sizing-3/</a> <dt id="biblio-css-tables-3">[CSS-TABLES-3] <dd>François Remy; Greg Whitworth; David Baron. <a href="https://drafts.csswg.org/css-tables-3/"><cite>CSS Table Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-tables-3/">https://drafts.csswg.org/css-tables-3/</a> <dt id="biblio-css-text-3">[CSS-TEXT-3] <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://drafts.csswg.org/css-text-3/"><cite>CSS Text Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-3/">https://drafts.csswg.org/css-text-3/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://drafts.csswg.org/css-text-4/"><cite>CSS Text Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-4/">https://drafts.csswg.org/css-text-4/</a> <dt id="biblio-css-text-decor-3">[CSS-TEXT-DECOR-3] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-text-decor-3/"><cite>CSS Text Decoration Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-decor-3/">https://drafts.csswg.org/css-text-decor-3/</a> <dt id="biblio-css-text-decor-4">[CSS-TEXT-DECOR-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-text-decor-4/"><cite>CSS Text Decoration Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-decor-4/">https://drafts.csswg.org/css-text-decor-4/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-3/">https://drafts.csswg.org/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-css22">[CSS22] <dd>Bert Bos. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-css3-break">[CSS3-BREAK] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break/"><cite>CSS Fragmentation Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-break/">https://drafts.csswg.org/css-break/</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> <dt id="biblio-mediaqueries-5">[MEDIAQUERIES-5] <dd>Dean Jackson; et al. <a href="https://drafts.csswg.org/mediaqueries-5/"><cite>Media Queries Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/mediaqueries-5/">https://drafts.csswg.org/mediaqueries-5/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-rfc6919">[RFC6919] <dd>R. Barnes; S. Kent; E. Rescorla. <a href="https://www.rfc-editor.org/rfc/rfc6919"><cite>Further Key Words for Use in RFCs to Indicate Requirement Levels</cite></a>. 1 April 2013. Experimental. URL: <a href="https://www.rfc-editor.org/rfc/rfc6919">https://www.rfc-editor.org/rfc/rfc6919</a> <dt id="biblio-svg11">[SVG11] <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/"><cite>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</cite></a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a> <dt id="biblio-uax50">[UAX50] <dd>Ken Lunde 小林劍󠄁; Koji Ishii 石井宏治. <a href="https://www.unicode.org/reports/tr50/tr50-31.html"><cite>Unicode Vertical Text Layout</cite></a>. 31 July 2024. Unicode Standard Annex #50. URL: <a href="https://www.unicode.org/reports/tr50/tr50-31.html">https://www.unicode.org/reports/tr50/tr50-31.html</a> <dt id="biblio-uax9">[UAX9] <dd>Manish Goregaokar मनीष गोरेगांवकर; Robin Leroy. <a href="https://www.unicode.org/reports/tr9/tr9-50.html"><cite>Unicode Bidirectional Algorithm</cite></a>. 2 September 2024. Unicode Standard Annex #9. URL: <a href="https://www.unicode.org/reports/tr9/tr9-50.html">https://www.unicode.org/reports/tr9/tr9-50.html</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-break-4/">https://drafts.csswg.org/css-break-4/</a> <dt id="biblio-css-cascade-4">[CSS-CASCADE-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-4/"><cite>CSS Cascading and Inheritance Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-4/">https://drafts.csswg.org/css-cascade-4/</a> <dt id="biblio-css-contain-2">[CSS-CONTAIN-2] <dd>Tab Atkins Jr.; Florian Rivoal; Vladimir Levin. <a href="https://drafts.csswg.org/css-contain-2/"><cite>CSS Containment Module Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-contain-2/">https://drafts.csswg.org/css-contain-2/</a> <dt id="biblio-css-fonts-4">[CSS-FONTS-4] <dd>Chris Lilley. <a href="https://drafts.csswg.org/css-fonts-4/"><cite>CSS Fonts Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-fonts-4/">https://drafts.csswg.org/css-fonts-4/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a> <dt id="biblio-html401">[HTML401] <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a href="https://www.w3.org/TR/html401/"><cite>HTML 4.01 Specification</cite></a>. 27 March 2018. REC. URL: <a href="https://www.w3.org/TR/html401/">https://www.w3.org/TR/html401/</a> <dt id="biblio-utn22">[UTN22] <dd>Elika J. Etemad. <a href="https://unicode.org/notes/tn22/"><cite>Robust Vertical Text Layout</cite></a>. 25 April 2005. Unicode Technical Note #22. URL: <a href="https://unicode.org/notes/tn22/">https://unicode.org/notes/tn22/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index">Property Index<a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction③⑦">direction</a> <td>ltr | rtl <td>ltr <td>all elements <td>yes <td>n/a <td>not animatable <td>n/a <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical⑤">glyph-orientation-vertical</a> <td>auto | 0deg | 90deg | 0 | 90 <td>n/a <td>n/a <td>n/a <td>n/a <td>n/a <td>n/a <td>n/a <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright⑥">text-combine-upright</a> <td>none | all <td>none <td>inline boxes and text <td>yes <td>n/a <td>not animatable <td>n/a <td>specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①⑧">text-orientation</a> <td>mixed | upright | sideways <td>mixed <td>all elements except table row groups, rows, column groups, and columns <td>yes <td>n/a <td>not animatable <td>n/a <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②⑤">unicode-bidi</a> <td>normal | embed | isolate | bidi-override | isolate-override | plaintext <td>normal <td>all elements, but see prose <td>no <td>n/a <td>not animatable <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②⑦">writing-mode</a> <td>horizontal-tb | vertical-rl | vertical-lr <td>horizontal-tb <td>All elements except table row groups, table column groups, table rows, table columns, ruby base containers, ruby annotation containers <td>yes <td>n/a <td>not animatable <td>n/a <td>specified value </table> </div> <details class="mdn-anno unpositioned" data-anno-for="direction"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/direction" title="The direction CSS property sets the direction of text, table columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).">direction</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome2+ <hr> Opera9.2+Edge79+ <hr> Edge (Legacy)12+IE5.5+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/direction" title="The direction attribute specifies the inline-base direction of a <text> or <tspan> element. It defines the start and end points of a line of text as used by the text-anchor and inline-size properties. It also may affect the direction in which characters are positioned if the unicode-bidi property's value is either embed or bidi-override.">Attribute/direction</a> In no current engines. <div class="support"> Firefox?Safari?Chrome? <hr> Opera?Edge? <hr> Edge (Legacy)?IE? <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-combine-upright"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright" title="The text-combine-upright CSS property sets the combination of characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.">text-combine-upright</a> In all current engines. <div class="support"> Firefox48+Safari15.4+Chrome48+ <hr> Opera?Edge79+ <hr> Edge (Legacy)NoneIENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView48+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-orientation"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation" title="The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.">text-orientation</a> In all current engines. <div class="support"> Firefox41+Safari14+Chrome48+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView48+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="unicode-bidi"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi" title="The unicode-bidi CSS property, together with the direction property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The unicode-bidi property overrides this algorithm and allows the developer to control the text embedding.">unicode-bidi</a> In all current engines. <div class="support"> Firefox1+Safari1.3+Chrome2+ <hr> Opera9.2+Edge79+ <hr> Edge (Legacy)12+IE5.5+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/unicode-bidi" title="The unicode-bidi attribute specifies how the accumulation of the background image is managed.">Attribute/unicode-bidi</a> In no current engines. <div class="support"> Firefox?Safari?Chrome? <hr> Opera?Edge? <hr> Edge (Legacy)?IE? <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="block-flow"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode" title="The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).">writing-mode</a> In all current engines. <div class="support"> Firefox41+Safari10.1+Chrome48+ <hr> Opera?Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView48+Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/writing-mode" title="The writing-mode attribute specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom. The writing-mode attribute applies only to <text> elements; the attribute is ignored for <tspan>, <tref>, and <textPath> sub-elements. (Note that the inline-progression-direction can change within a <text> element due to the Unicode bidirectional algorithm and properties direction and unicode-bidi.)">Attribute/writing-mode</a> In no current engines. <div class="support"> Firefox?Safari?Chrome? <hr> Opera?Edge? <hr> Edge (Legacy)?IE? <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "00140718": {"dfnID":"00140718","dfnText":"margin-top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-top"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-top"}, "00d808eb": {"dfnID":"00d808eb","dfnText":"font-feature-settings","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-feature-settings"}],"title":"9.1.3.1. \nFull-width Characters"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-feature-settings"}, "04413fda": {"dfnID":"04413fda","dfnText":"preferred size property","external":true,"refSections":[{"refs":[{"id":"ref-for-preferred-size-properties"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-sizing-3/#preferred-size-properties"}, "07083329": {"dfnID":"07083329","dfnText":"caption-side","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-caption-side"},{"id":"ref-for-propdef-caption-side\u2460"}],"title":"7.4. \nFlow-Relative Mappings"},{"refs":[{"id":"ref-for-propdef-caption-side\u2461"}],"title":"7.5. \nLine-Relative Mappings"}],"url":"https://drafts.csswg.org/css-tables-3/#propdef-caption-side"}, "083ffe5f": {"dfnID":"083ffe5f","dfnText":"inline box","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-box"}],"title":"2.4.5. \nReordering-induced Box Fragmentation"},{"refs":[{"id":"ref-for-inline-box\u2460"}],"title":"9.1. \nHorizontal-in-Vertical Composition: the text-combine-upright property"}],"url":"https://drafts.csswg.org/css-display-4/#inline-box"}, "09cd65e4": {"dfnID":"09cd65e4","dfnText":"display type","external":true,"refSections":[{"refs":[{"id":"ref-for-display-type"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-display-4/#display-type"}, "0cab481d": {"dfnID":"0cab481d","dfnText":"box-decoration-break","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-decoration-break"}],"title":"2.4.5. \nReordering-induced Box Fragmentation"}],"url":"https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break"}, "0e5cedd7": {"dfnID":"0e5cedd7","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-auto"}],"title":"7.3.1. \nAvailable Space of Orthogonal Flows"},{"refs":[{"id":"ref-for-valdef-width-auto\u2460"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-sizing-3/#valdef-width-auto"}, "0eb9789d": {"dfnID":"0eb9789d","dfnText":"character","external":true,"refSections":[{"refs":[{"id":"ref-for-character"}],"title":"5.1.1. \nVertical Typesetting and Font Features"}],"url":"https://drafts.csswg.org/css-text-3/#character"}, "106b3021": {"dfnID":"106b3021","dfnText":"rect()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-basic-shape-rect"}],"title":"7.6. \nPurely Physical Mappings"}],"url":"https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect"}, "11ee6625": {"dfnID":"11ee6625","dfnText":"available space","external":true,"refSections":[{"refs":[{"id":"ref-for-available"},{"id":"ref-for-available\u2460"},{"id":"ref-for-available\u2461"},{"id":"ref-for-available\u2462"},{"id":"ref-for-available\u2463"},{"id":"ref-for-available\u2464"}],"title":"7.3.1. \nAvailable Space of Orthogonal Flows"},{"refs":[{"id":"ref-for-available\u2465"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-sizing-3/#available"}, "126bc6b7": {"dfnID":"126bc6b7","dfnText":"stretch-fit inline size","external":true,"refSections":[{"refs":[{"id":"ref-for-stretch-fit-inline-size"},{"id":"ref-for-stretch-fit-inline-size\u2460"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-sizing-3/#stretch-fit-inline-size"}, "1a3880ba": {"dfnID":"1a3880ba","dfnText":"containment","external":true,"refSections":[{"refs":[{"id":"ref-for-containment"}],"title":"8. \nThe Principal Writing Mode"}],"url":"https://drafts.csswg.org/css-contain-2/#containment"}, "20fff200": {"dfnID":"20fff200","dfnText":"inheritance","external":true,"refSections":[{"refs":[{"id":"ref-for-css-inheritance"}],"title":"8. \nThe Principal Writing Mode"}],"url":"https://drafts.csswg.org/css-cascade-5/#css-inheritance"}, "237b3136": {"dfnID":"237b3136","dfnText":"typographic character unit","external":true,"refSections":[{"refs":[{"id":"ref-for-typographic-character-unit"}],"title":"1. \nIntroduction to Writing Modes"},{"refs":[{"id":"ref-for-typographic-character-unit\u2460"},{"id":"ref-for-typographic-character-unit\u2461"},{"id":"ref-for-typographic-character-unit\u2462"},{"id":"ref-for-typographic-character-unit\u2463"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-typographic-character-unit\u2464"},{"id":"ref-for-typographic-character-unit\u2465"},{"id":"ref-for-typographic-character-unit\u2466"}],"title":"5.1.1. \nVertical Typesetting and Font Features"},{"refs":[{"id":"ref-for-typographic-character-unit\u2467"}],"title":"5.1.2. \nMixed Vertical Orientations"},{"refs":[{"id":"ref-for-typographic-character-unit\u2468"},{"id":"ref-for-typographic-character-unit\u2460\u24ea"},{"id":"ref-for-typographic-character-unit\u2460\u2460"},{"id":"ref-for-typographic-character-unit\u2460\u2461"}],"title":"9.1. \nHorizontal-in-Vertical Composition: the text-combine-upright property"},{"refs":[{"id":"ref-for-typographic-character-unit\u2460\u2462"}],"title":"9.1.1. \nText Run Rules"},{"refs":[{"id":"ref-for-typographic-character-unit\u2460\u2463"}],"title":"9.1.2. \nLayout Rules"},{"refs":[{"id":"ref-for-typographic-character-unit\u2460\u2464"},{"id":"ref-for-typographic-character-unit\u2460\u2465"},{"id":"ref-for-typographic-character-unit\u2460\u2466"},{"id":"ref-for-typographic-character-unit\u2460\u2467"},{"id":"ref-for-typographic-character-unit\u2460\u2468"},{"id":"ref-for-typographic-character-unit\u2461\u24ea"}],"title":"9.1.3. \nCompression Rules"},{"refs":[{"id":"ref-for-typographic-character-unit\u2461\u2460"},{"id":"ref-for-typographic-character-unit\u2461\u2461"}],"title":"9.1.3.1. \nFull-width Characters"}],"url":"https://drafts.csswg.org/css-text-4/#typographic-character-unit"}, "25ccffa4": {"dfnID":"25ccffa4","dfnText":"min-content inline size","external":true,"refSections":[{"refs":[{"id":"ref-for-min-content-inline-size"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-sizing-3/#min-content-inline-size"}, "26a40c98": {"dfnID":"26a40c98","dfnText":"max-content size","external":true,"refSections":[{"refs":[{"id":"ref-for-max-content"}],"title":"7.3. \nOrthogonal Flows"}],"url":"https://drafts.csswg.org/css-sizing-3/#max-content"}, "2bceefb2": {"dfnID":"2bceefb2","dfnText":"default object size","external":true,"refSections":[{"refs":[{"id":"ref-for-default-object-size"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"}],"url":"https://drafts.csswg.org/css-images-3/#default-object-size"}, "2e4528d6": {"dfnID":"2e4528d6","dfnText":"max-content inline size","external":true,"refSections":[{"refs":[{"id":"ref-for-max-content-inline-size"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-sizing-3/#max-content-inline-size"}, "2f0492ac": {"dfnID":"2f0492ac","dfnText":"body","external":true,"refSections":[{"refs":[{"id":"ref-for-the-body-element"},{"id":"ref-for-the-body-element\u2460"},{"id":"ref-for-the-body-element\u2461"}],"title":"8. \nThe Principal Writing Mode"},{"refs":[{"id":"ref-for-the-body-element\u2462"}],"title":"\n Changes since the December\n 2019 CSS Writing Modes Module Level 4 Recommendation"}],"url":"https://html.spec.whatwg.org/multipage/sections.html#the-body-element"}, "3559c926": {"dfnID":"3559c926","dfnText":"<angle>","external":true,"refSections":[{"refs":[{"id":"ref-for-angle-value"}],"title":"5.1.3. \nObsolete: the SVG1.1 glyph-orientation-vertical property"}],"url":"https://drafts.csswg.org/css-values-4/#angle-value"}, "358fd6ff": {"dfnID":"358fd6ff","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"1.2. \nValue Definitions and Terminology"}],"url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "35d9f24e": {"dfnID":"35d9f24e","dfnText":"font-relative lengths","external":true,"refSections":[{"refs":[{"id":"ref-for-font-relative-length"}],"title":"1.1. \nModule Interactions"}],"url":"https://drafts.csswg.org/css-values-4/#font-relative-length"}, "396d5070": {"dfnID":"396d5070","dfnText":"multi-column container","external":true,"refSections":[{"refs":[{"id":"ref-for-multi-column-container"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-multicol-2/#multi-column-container"}, "3e6545d2": {"dfnID":"3e6545d2","dfnText":"bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-caption-side-bottom"}],"title":"7.4. \nFlow-Relative Mappings"}],"url":"https://drafts.csswg.org/css2/#valdef-caption-side-bottom"}, "3f0db204": {"dfnID":"3f0db204","dfnText":"min-content size","external":true,"refSections":[{"refs":[{"id":"ref-for-min-content"}],"title":"7.3. \nOrthogonal Flows"}],"url":"https://drafts.csswg.org/css-sizing-3/#min-content"}, "4356bfe3": {"dfnID":"4356bfe3","dfnText":"text-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-align"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-propdef-text-align\u2460"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"},{"refs":[{"id":"ref-for-propdef-text-align\u2461"}],"title":"7.4. \nFlow-Relative Mappings"},{"refs":[{"id":"ref-for-propdef-text-align\u2462"}],"title":"7.5. \nLine-Relative Mappings"}],"url":"https://drafts.csswg.org/css-text-3/#propdef-text-align"}, "4380f2e5": {"dfnID":"4380f2e5","dfnText":"sub","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-shift-sub"}],"title":"4.4. \nBaseline Alignment"}],"url":"https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-sub"}, "46080d3b": {"dfnID":"46080d3b","dfnText":"page progression","external":true,"refSections":[{"refs":[{"id":"ref-for-page-progression"}],"title":"8. \nThe Principal Writing Mode"},{"refs":[{"id":"ref-for-page-progression\u2460"},{"id":"ref-for-page-progression\u2461"}],"title":"8.2. \nPage Flow: the page progression direction"}],"url":"https://drafts.csswg.org/css-page-3/#page-progression"}, "5e3e8101": {"dfnID":"5e3e8101","dfnText":"inner display type","external":true,"refSections":[{"refs":[{"id":"ref-for-inner-display-type"},{"id":"ref-for-inner-display-type\u2460"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"}],"url":"https://drafts.csswg.org/css-display-4/#inner-display-type"}, "607244fc": {"dfnID":"607244fc","dfnText":"flow-root","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-flow-root"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-flow-root"}, "60bbf126": {"dfnID":"60bbf126","dfnText":"scrollport","external":true,"refSections":[{"refs":[{"id":"ref-for-scrollport"}],"title":"7.3.1. \nAvailable Space of Orthogonal Flows"}],"url":"https://drafts.csswg.org/css-overflow-3/#scrollport"}, "65a738ee": {"dfnID":"65a738ee","dfnText":"definite","external":true,"refSections":[{"refs":[{"id":"ref-for-definite"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-sizing-3/#definite"}, "68019d7a": {"dfnID":"68019d7a","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-height"}],"title":"7.2. \nDimensional Mapping"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "6882117f": {"dfnID":"6882117f","dfnText":"border-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-spacing"}],"title":"7.2. \nDimensional Mapping"}],"url":"https://drafts.csswg.org/css-tables-3/#propdef-border-spacing"}, "6916104d": {"dfnID":"6916104d","dfnText":"box-shadow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-shadow"}],"title":"7.6. \nPurely Physical Mappings"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"}],"title":"2.1. \nSpecifying Directionality: the direction property"},{"refs":[{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"},{"id":"ref-for-comb-one\u2462"},{"id":"ref-for-comb-one\u2463"},{"id":"ref-for-comb-one\u2464"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-comb-one\u2465"},{"id":"ref-for-comb-one\u2466"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"},{"refs":[{"id":"ref-for-comb-one\u2467"},{"id":"ref-for-comb-one\u2468"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-comb-one\u2460\u24ea"},{"id":"ref-for-comb-one\u2460\u2460"},{"id":"ref-for-comb-one\u2460\u2461"},{"id":"ref-for-comb-one\u2460\u2462"}],"title":"5.1.3. \nObsolete: the SVG1.1 glyph-orientation-vertical property"},{"refs":[{"id":"ref-for-comb-one\u2460\u2463"}],"title":"9.1. \nHorizontal-in-Vertical Composition: the text-combine-upright property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "6f7440a6": {"dfnID":"6f7440a6","dfnText":"available inline space","external":true,"refSections":[{"refs":[{"id":"ref-for-available"},{"id":"ref-for-available\u2460"},{"id":"ref-for-available\u2461"},{"id":"ref-for-available\u2462"},{"id":"ref-for-available\u2463"},{"id":"ref-for-available\u2464"}],"title":"7.3.1. \nAvailable Space of Orthogonal Flows"},{"refs":[{"id":"ref-for-available\u2465"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-sizing-3/#available"}, "6f7798a0": {"dfnID":"6f7798a0","dfnText":"root inline box","external":true,"refSections":[{"refs":[{"id":"ref-for-root-inline-box"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"}],"url":"https://drafts.csswg.org/css-inline-3/#root-inline-box"}, "70c9f859": {"dfnID":"70c9f859","dfnText":"<integer>","external":true,"refSections":[{"refs":[{"id":"ref-for-integer-value"}],"title":"5.1.3. \nObsolete: the SVG1.1 glyph-orientation-vertical property"}],"url":"https://drafts.csswg.org/css-values-4/#integer-value"}, "758665a5": {"dfnID":"758665a5","dfnText":"paged media","external":true,"refSections":[{"refs":[{"id":"ref-for-paged-media"}],"title":"8.2. \nPage Flow: the page progression direction"}],"url":"https://drafts.csswg.org/mediaqueries-5/#paged-media"}, "788d1715": {"dfnID":"788d1715","dfnText":"super","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-shift-super"}],"title":"4.4. \nBaseline Alignment"}],"url":"https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-super"}, "8141cabb": {"dfnID":"8141cabb","dfnText":"independent formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-independent-formatting-context"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"}],"url":"https://drafts.csswg.org/css-display-4/#independent-formatting-context"}, "8379845e": {"dfnID":"8379845e","dfnText":"block-level","external":true,"refSections":[{"refs":[{"id":"ref-for-block-level"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-display-4/#block-level"}, "881a21fe": {"dfnID":"881a21fe","dfnText":"min size","external":true,"refSections":[{"refs":[{"id":"ref-for-min-width"},{"id":"ref-for-min-width\u2460"}],"title":"7.3.1. \nAvailable Space of Orthogonal Flows"}],"url":"https://drafts.csswg.org/css-sizing-3/#min-width"}, "8831f13c": {"dfnID":"8831f13c","dfnText":"text-indent","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-indent"}],"title":"7.4. \nFlow-Relative Mappings"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-text-indent"}, "88643fe0": {"dfnID":"88643fe0","dfnText":"width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-width"}],"title":"7.2. \nDimensional Mapping"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "8d0ede2c": {"dfnID":"8d0ede2c","dfnText":"initial containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-initial-containing-block"}],"title":"8.1. \nPropagation to the Initial Containing Block"}],"url":"https://drafts.csswg.org/css-display-4/#initial-containing-block"}, "99cabd32": {"dfnID":"99cabd32","dfnText":"in-flow","external":true,"refSections":[{"refs":[{"id":"ref-for-in-flow"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"}],"url":"https://drafts.csswg.org/css-display-4/#in-flow"}, "9aae076b": {"dfnID":"9aae076b","dfnText":"baseline","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-alignment-baseline-baseline"},{"id":"ref-for-valdef-alignment-baseline-baseline\u2460"}],"title":"4.4. \nBaseline Alignment"}],"url":"https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-baseline"}, "9cd25054": {"dfnID":"9cd25054","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"}],"title":"1.1. \nModule Interactions"},{"refs":[{"id":"ref-for-computed-value\u2460"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-computed-value\u2461"}],"title":"8. \nThe Principal Writing Mode"}],"url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "9f3d4f17": {"dfnID":"9f3d4f17","dfnText":"block container","external":true,"refSections":[{"refs":[{"id":"ref-for-block-container"},{"id":"ref-for-block-container\u2460"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-block-container\u2461"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"},{"refs":[{"id":"ref-for-block-container\u2462"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-display-4/#block-container"}, "a4eb3c57": {"dfnID":"a4eb3c57","dfnText":"used value","external":true,"refSections":[{"refs":[{"id":"ref-for-used-value"},{"id":"ref-for-used-value\u2460"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-used-value\u2461"}],"title":"6.4. \nAbstract-to-Physical Mappings"},{"refs":[{"id":"ref-for-used-value\u2462"},{"id":"ref-for-used-value\u2463"}],"title":"8. \nThe Principal Writing Mode"}],"url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "a533883f": {"dfnID":"a533883f","dfnText":"available block space","external":true,"refSections":[{"refs":[{"id":"ref-for-available"},{"id":"ref-for-available\u2460"},{"id":"ref-for-available\u2461"},{"id":"ref-for-available\u2462"},{"id":"ref-for-available\u2463"},{"id":"ref-for-available\u2464"}],"title":"7.3.1. \nAvailable Space of Orthogonal Flows"},{"refs":[{"id":"ref-for-available\u2465"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-sizing-3/#available"}, "a8485ff4": {"dfnID":"a8485ff4","dfnText":"replaced element","external":true,"refSections":[{"refs":[{"id":"ref-for-replaced-element"}],"title":"2.4.3. \nBidi Treatment of Atomic Inlines"},{"refs":[{"id":"ref-for-replaced-element\u2460"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"}],"url":"https://drafts.csswg.org/css-display-4/#replaced-element"}, "aaf6abed": {"dfnID":"aaf6abed","dfnText":"margin-left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-left"},{"id":"ref-for-propdef-margin-left\u2460"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-left"}, "abstract-dimensions": {"dfnID":"abstract-dimensions","dfnText":"abstract dimensions","external":false,"refSections":[],"url":"#abstract-dimensions"}, "ac54fbff": {"dfnID":"ac54fbff","dfnText":"line-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-line-height"}],"title":"7.2. \nDimensional Mapping"},{"refs":[{"id":"ref-for-propdef-line-height\u2460"}],"title":"9.1.2. \nLayout Rules"}],"url":"https://drafts.csswg.org/css2/#propdef-line-height"}, "ad065a5c": {"dfnID":"ad065a5c","dfnText":"margin-right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-right"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-right"}, "alphabetic-baseline": {"dfnID":"alphabetic-baseline","dfnText":"alphabetic baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-alphabetic-baseline"}],"title":"4.2. \nText Baselines"}],"url":"#alphabetic-baseline"}, "b713cb30": {"dfnID":"b713cb30","dfnText":"automatic size","external":true,"refSections":[{"refs":[{"id":"ref-for-automatic-size"},{"id":"ref-for-automatic-size\u2460"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-sizing-3/#automatic-size"}, "baseline": {"dfnID":"baseline","dfnText":"baseline","external":false,"refSections":[],"url":"#baseline"}, "baseline-table": {"dfnID":"baseline-table","dfnText":"baseline table","external":false,"refSections":[],"url":"#baseline-table"}, "bb16e9a6": {"dfnID":"bb16e9a6","dfnText":"max size","external":true,"refSections":[{"refs":[{"id":"ref-for-max-width"},{"id":"ref-for-max-width\u2460"}],"title":"7.3.1. \nAvailable Space of Orthogonal Flows"}],"url":"https://drafts.csswg.org/css-sizing-3/#max-width"}, "bi-orientational": {"dfnID":"bi-orientational","dfnText":"bi-orientational","external":false,"refSections":[{"refs":[{"id":"ref-for-bi-orientational"},{"id":"ref-for-bi-orientational\u2460"}],"title":"5. \nIntroduction to Vertical Text Layout"},{"refs":[{"id":"ref-for-bi-orientational\u2461"}],"title":"Appendix A:\nVertical Scripts in Unicode"}],"url":"#bi-orientational"}, "bi-orientational-transform": {"dfnID":"bi-orientational-transform","dfnText":"bi-orientational\n transform","external":false,"refSections":[{"refs":[{"id":"ref-for-bi-orientational-transform"}],"title":"5. \nIntroduction to Vertical Text Layout"}],"url":"#bi-orientational-transform"}, "bidi-isolate": {"dfnID":"bidi-isolate","dfnText":"bidi-isolates","external":false,"refSections":[{"refs":[{"id":"ref-for-bidi-isolate"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-bidi-isolate\u2460"}],"title":"9.1.2. \nLayout Rules"}],"url":"#bidi-isolate"}, "bidi-paragraph": {"dfnID":"bidi-paragraph","dfnText":"paragraph","external":false,"refSections":[{"refs":[{"id":"ref-for-bidi-paragraph"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-bidi-paragraph\u2460"}],"title":"2.4.2. \nCSS\u2013Unicode Bidi Control Translation, Text Reordering"},{"refs":[{"id":"ref-for-bidi-paragraph\u2461"}],"title":"2.4.4. \nParagraph Breaks Within Embeddings and Isolates"}],"url":"#bidi-paragraph"}, "bidirectionality": {"dfnID":"bidirectionality","dfnText":"bidirectionality","external":false,"refSections":[],"url":"#bidirectionality"}, "block-axis": {"dfnID":"block-axis","dfnText":"block axis","external":false,"refSections":[{"refs":[{"id":"ref-for-block-axis"}],"title":"7.3. \nOrthogonal Flows"}],"url":"#block-axis"}, "block-dimension": {"dfnID":"block-dimension","dfnText":"block dimension","external":false,"refSections":[],"url":"#block-dimension"}, "block-end": {"dfnID":"block-end","dfnText":"block-end","external":false,"refSections":[{"refs":[{"id":"ref-for-block-end"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-block-end\u2460"},{"id":"ref-for-block-end\u2461"},{"id":"ref-for-block-end\u2462"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-block-end\u2463"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-block-end\u2464"}],"title":"7.2. \nDimensional Mapping"},{"refs":[{"id":"ref-for-block-end\u2465"},{"id":"ref-for-block-end\u2466"},{"id":"ref-for-block-end\u2467"},{"id":"ref-for-block-end\u2468"}],"title":"7.4. \nFlow-Relative Mappings"}],"url":"#block-end"}, "block-flow-direction": {"dfnID":"block-flow-direction","dfnText":"block flow direction","external":false,"refSections":[{"refs":[{"id":"ref-for-block-flow-direction"}],"title":"1. \nIntroduction to Writing Modes"},{"refs":[{"id":"ref-for-block-flow-direction\u2460"},{"id":"ref-for-block-flow-direction\u2461"},{"id":"ref-for-block-flow-direction\u2462"},{"id":"ref-for-block-flow-direction\u2463"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"},{"refs":[{"id":"ref-for-block-flow-direction\u2464"}],"title":"6.2. \nFlow-relative Directions"}],"url":"#block-flow-direction"}, "block-size": {"dfnID":"block-size","dfnText":"block size","external":false,"refSections":[{"refs":[{"id":"ref-for-block-size"}],"title":"7.2. \nDimensional Mapping"},{"refs":[{"id":"ref-for-block-size\u2460"},{"id":"ref-for-block-size\u2461"},{"id":"ref-for-block-size\u2462"},{"id":"ref-for-block-size\u2463"}],"title":"7.3. \nOrthogonal Flows"},{"refs":[{"id":"ref-for-block-size\u2464"},{"id":"ref-for-block-size\u2465"},{"id":"ref-for-block-size\u2466"}],"title":"7.3.1. \nAvailable Space of Orthogonal Flows"}],"url":"#block-size"}, "block-start": {"dfnID":"block-start","dfnText":"block-start","external":false,"refSections":[{"refs":[{"id":"ref-for-block-start"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-block-start\u2460"},{"id":"ref-for-block-start\u2461"},{"id":"ref-for-block-start\u2462"},{"id":"ref-for-block-start\u2463"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-block-start\u2464"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-block-start\u2465"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"},{"refs":[{"id":"ref-for-block-start\u2466"}],"title":"7.2. \nDimensional Mapping"},{"refs":[{"id":"ref-for-block-start\u2467"},{"id":"ref-for-block-start\u2468"},{"id":"ref-for-block-start\u2460\u24ea"},{"id":"ref-for-block-start\u2460\u2460"},{"id":"ref-for-block-start\u2460\u2461"}],"title":"7.4. \nFlow-Relative Mappings"}],"url":"#block-start"}, "c02f5d57": {"dfnID":"c02f5d57","dfnText":"inline","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-inline"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-valdef-display-inline\u2460"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-inline"}, "c388d253": {"dfnID":"c388d253","dfnText":"inherit","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-all-inherit"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"}],"url":"https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit"}, "c5e97f7c": {"dfnID":"c5e97f7c","dfnText":"letter-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-letter-spacing"}],"title":"9.1.2. \nLayout Rules"}],"url":"https://drafts.csswg.org/css-text-3/#propdef-letter-spacing"}, "ca960d4f": {"dfnID":"ca960d4f","dfnText":"block formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-block-formatting-context"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"}],"url":"https://drafts.csswg.org/css-display-4/#block-formatting-context"}, "cbc54f93": {"dfnID":"cbc54f93","dfnText":"text-transform","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-transform"}],"title":"9.1.3.1. \nFull-width Characters"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-text-transform"}, "cbfeec00": {"dfnID":"cbfeec00","dfnText":"margin-bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-bottom"},{"id":"ref-for-propdef-margin-bottom\u2460"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-bottom"}, "central-baseline": {"dfnID":"central-baseline","dfnText":"central baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-central-baseline"}],"title":"4.2. \nText Baselines"},{"refs":[{"id":"ref-for-central-baseline\u2460"}],"title":"\n Changes since the December\n 2019 CSS Writing Modes Module Level 4 Recommendation"}],"url":"#central-baseline"}, "css-end": {"dfnID":"css-end","dfnText":"end","external":false,"refSections":[{"refs":[{"id":"ref-for-css-end"}],"title":"2.4.5. \nReordering-induced Box Fragmentation"},{"refs":[{"id":"ref-for-css-end\u2460"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-css-end\u2461"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"}],"url":"#css-end"}, "css-start": {"dfnID":"css-start","dfnText":"start","external":false,"refSections":[{"refs":[{"id":"ref-for-css-start"},{"id":"ref-for-css-start\u2460"}],"title":"2.4.5. \nReordering-induced Box Fragmentation"},{"refs":[{"id":"ref-for-css-start\u2461"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-css-start\u2462"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-css-start\u2463"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"},{"refs":[{"id":"ref-for-css-start\u2464"},{"id":"ref-for-css-start\u2465"}],"title":"7.4. \nFlow-Relative Mappings"}],"url":"#css-start"}, "d2ac383e": {"dfnID":"d2ac383e","dfnText":"document white space","external":true,"refSections":[{"refs":[{"id":"ref-for-white-space"}],"title":"9.1.2. \nLayout Rules"}],"url":"https://drafts.csswg.org/css-text-4/#white-space"}, "d4fd6ce1": {"dfnID":"d4fd6ce1","dfnText":"flow","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-flow"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-flow"}, "df8337f1": {"dfnID":"df8337f1","dfnText":"fit-content size","external":true,"refSections":[{"refs":[{"id":"ref-for-fit-content-size"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-sizing-3/#fit-content-size"}, "directional-embedding": {"dfnID":"directional-embedding","dfnText":"directional embedding","external":false,"refSections":[{"refs":[{"id":"ref-for-directional-embedding"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"}],"url":"#directional-embedding"}, "directional-override": {"dfnID":"directional-override","dfnText":"directional override","external":false,"refSections":[{"refs":[{"id":"ref-for-directional-override"},{"id":"ref-for-directional-override\u2460"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"}],"url":"#directional-override"}, "dominant-baseline": {"dfnID":"dominant-baseline","dfnText":"dominant baseline","external":false,"refSections":[],"url":"#dominant-baseline"}, "e0b6ed58": {"dfnID":"e0b6ed58","dfnText":"vertical-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-vertical-align"},{"id":"ref-for-propdef-vertical-align\u2460"}],"title":"4. \nInline-level Alignment"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2461"}],"title":"4.3. \nAtomic Inline Baselines"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2462"},{"id":"ref-for-propdef-vertical-align\u2463"},{"id":"ref-for-propdef-vertical-align\u2464"}],"title":"4.4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2465"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2466"}],"title":"7.5. \nLine-Relative Mappings"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2467"}],"title":"9.1.2. \nLayout Rules"}],"url":"https://drafts.csswg.org/css-inline-3/#propdef-vertical-align"}, "e33664cd": {"dfnID":"e33664cd","dfnText":"inline-block","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-inline-block"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"},{"refs":[{"id":"ref-for-valdef-display-inline-block\u2460"}],"title":"9.1.2. \nLayout Rules"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-inline-block"}, "ea663a43": {"dfnID":"ea663a43","dfnText":"containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-containing-block"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-display-4/#containing-block"}, "ea8fc05c": {"dfnID":"ea8fc05c","dfnText":"top","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-caption-side-top"}],"title":"7.4. \nFlow-Relative Mappings"}],"url":"https://drafts.csswg.org/css2/#valdef-caption-side-top"}, "establish-an-orthogonal-flow": {"dfnID":"establish-an-orthogonal-flow","dfnText":"orthogonal flow","external":false,"refSections":[{"refs":[{"id":"ref-for-establish-an-orthogonal-flow"},{"id":"ref-for-establish-an-orthogonal-flow\u2460"},{"id":"ref-for-establish-an-orthogonal-flow\u2461"}],"title":"7.3. \nOrthogonal Flows"},{"refs":[{"id":"ref-for-establish-an-orthogonal-flow\u2462"}],"title":"7.3.1. \nAvailable Space of Orthogonal Flows"},{"refs":[{"id":"ref-for-establish-an-orthogonal-flow\u2463"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"#establish-an-orthogonal-flow"}, "f140920e": {"dfnID":"f140920e","dfnText":"sideways-lr","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-sideways-lr"}],"title":"5.1.2. \nMixed Vertical Orientations"},{"refs":[{"id":"ref-for-valdef-writing-mode-sideways-lr\u2460"}],"title":"Appendix A:\nVertical Scripts in Unicode"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-lr"}, "f338a9f0": {"dfnID":"f338a9f0","dfnText":"text-shadow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-shadow"}],"title":"7.6. \nPurely Physical Mappings"}],"url":"https://drafts.csswg.org/css-text-decor-4/#propdef-text-shadow"}, "f74bc8d3": {"dfnID":"f74bc8d3","dfnText":"fallback size","external":true,"refSections":[{"refs":[{"id":"ref-for-fallback"}],"title":"7.3.1. \nAvailable Space of Orthogonal Flows"},{"refs":[{"id":"ref-for-fallback\u2460"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"https://drafts.csswg.org/css-sizing-3/#fallback"}, "fb7153bd": {"dfnID":"fb7153bd","dfnText":"font-variant","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-variant"}],"title":"9.1.3.1. \nFull-width Characters"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-variant"}, "ffc192db": {"dfnID":"ffc192db","dfnText":"text-decoration","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-decoration"}],"title":"7.5. \nLine-Relative Mappings"}],"url":"https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration"}, "flow-relative": {"dfnID":"flow-relative","dfnText":"flow-relative","external":false,"refSections":[],"url":"#flow-relative"}, "flow-relative-direction": {"dfnID":"flow-relative-direction","dfnText":"flow-relative directions","external":false,"refSections":[{"refs":[{"id":"ref-for-flow-relative-direction"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"}],"url":"#flow-relative-direction"}, "forced-paragraph-break": {"dfnID":"forced-paragraph-break","dfnText":"forced paragraph break","external":false,"refSections":[{"refs":[{"id":"ref-for-forced-paragraph-break"},{"id":"ref-for-forced-paragraph-break\u2460"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-forced-paragraph-break\u2461"},{"id":"ref-for-forced-paragraph-break\u2462"}],"title":"2.4.4. \nParagraph Breaks Within Embeddings and Isolates"}],"url":"#forced-paragraph-break"}, "height": {"dfnID":"height","dfnText":"height","external":false,"refSections":[],"url":"#height"}, "horizontal-block-flow": {"dfnID":"horizontal-block-flow","dfnText":"horizontal block flow","external":false,"refSections":[],"url":"#horizontal-block-flow"}, "horizontal-dimension": {"dfnID":"horizontal-dimension","dfnText":"horizontal dimension","external":false,"refSections":[{"refs":[{"id":"ref-for-horizontal-dimension"},{"id":"ref-for-horizontal-dimension\u2460"}],"title":"6.1. \nAbstract Dimensions"}],"url":"#horizontal-dimension"}, "horizontal-only": {"dfnID":"horizontal-only","dfnText":"horizontal-only","external":false,"refSections":[{"refs":[{"id":"ref-for-horizontal-only"},{"id":"ref-for-horizontal-only\u2460"}],"title":"5. \nIntroduction to Vertical Text Layout"},{"refs":[{"id":"ref-for-horizontal-only\u2461"}],"title":"Appendix A:\nVertical Scripts in Unicode"}],"url":"#horizontal-only"}, "horizontal-script": {"dfnID":"horizontal-script","dfnText":"horizontal script","external":false,"refSections":[{"refs":[{"id":"ref-for-horizontal-script"}],"title":"Appendix A:\nVertical Scripts in Unicode"}],"url":"#horizontal-script"}, "horizontal-typographic-mode": {"dfnID":"horizontal-typographic-mode","dfnText":"horizontal typographic mode","external":false,"refSections":[],"url":"#horizontal-typographic-mode"}, "horizontal-writing-mode": {"dfnID":"horizontal-writing-mode","dfnText":"horizontal writing mode","external":false,"refSections":[{"refs":[{"id":"ref-for-horizontal-writing-mode"}],"title":"1. \nIntroduction to Writing Modes"},{"refs":[{"id":"ref-for-horizontal-writing-mode\u2460"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-horizontal-writing-mode\u2461"}],"title":"9.1.2. \nLayout Rules"}],"url":"#horizontal-writing-mode"}, "inline-axis": {"dfnID":"inline-axis","dfnText":"inline axis","external":false,"refSections":[{"refs":[{"id":"ref-for-inline-axis"}],"title":"4.1. \nIntroduction to Baselines"},{"refs":[{"id":"ref-for-inline-axis\u2460"}],"title":"5.1.1. \nVertical Typesetting and Font Features"},{"refs":[{"id":"ref-for-inline-axis\u2461"},{"id":"ref-for-inline-axis\u2462"}],"title":"7.3. \nOrthogonal Flows"},{"refs":[{"id":"ref-for-inline-axis\u2463"}],"title":"7.3.1. \nAvailable Space of Orthogonal Flows"},{"refs":[{"id":"ref-for-inline-axis\u2464"}],"title":"7.3.2. \nAuto-sizing Orthogonal Flow Roots"}],"url":"#inline-axis"}, "inline-base-direction": {"dfnID":"inline-base-direction","dfnText":"inline base direction","external":false,"refSections":[{"refs":[{"id":"ref-for-inline-base-direction"}],"title":"1. \nIntroduction to Writing Modes"},{"refs":[{"id":"ref-for-inline-base-direction\u2460"},{"id":"ref-for-inline-base-direction\u2461"},{"id":"ref-for-inline-base-direction\u2462"}],"title":"2.1. \nSpecifying Directionality: the direction property"}],"url":"#inline-base-direction"}, "inline-dimension": {"dfnID":"inline-dimension","dfnText":"inline dimension","external":false,"refSections":[],"url":"#inline-dimension"}, "inline-end": {"dfnID":"inline-end","dfnText":"inline-end","external":false,"refSections":[{"refs":[{"id":"ref-for-inline-end"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-inline-end\u2460"},{"id":"ref-for-inline-end\u2461"},{"id":"ref-for-inline-end\u2462"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-inline-end\u2463"}],"title":"7.2. \nDimensional Mapping"}],"url":"#inline-end"}, "inline-size": {"dfnID":"inline-size","dfnText":"inline size","external":false,"refSections":[{"refs":[{"id":"ref-for-inline-size"},{"id":"ref-for-inline-size\u2460"}],"title":"7.2. \nDimensional Mapping"},{"refs":[{"id":"ref-for-inline-size\u2461"},{"id":"ref-for-inline-size\u2462"},{"id":"ref-for-inline-size\u2463"},{"id":"ref-for-inline-size\u2464"},{"id":"ref-for-inline-size\u2465"},{"id":"ref-for-inline-size\u2466"}],"title":"7.3. \nOrthogonal Flows"},{"refs":[{"id":"ref-for-inline-size\u2467"},{"id":"ref-for-inline-size\u2468"},{"id":"ref-for-inline-size\u2460\u24ea"}],"title":"7.3.1. \nAvailable Space of Orthogonal Flows"}],"url":"#inline-size"}, "inline-start": {"dfnID":"inline-start","dfnText":"inline-start","external":false,"refSections":[{"refs":[{"id":"ref-for-inline-start"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-inline-start\u2460"},{"id":"ref-for-inline-start\u2461"},{"id":"ref-for-inline-start\u2462"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-inline-start\u2463"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"},{"refs":[{"id":"ref-for-inline-start\u2464"}],"title":"7.2. \nDimensional Mapping"},{"refs":[{"id":"ref-for-inline-start\u2465"}],"title":"7.4. \nFlow-Relative Mappings"}],"url":"#inline-start"}, "isolated-sequence": {"dfnID":"isolated-sequence","dfnText":"isolated sequence","external":false,"refSections":[{"refs":[{"id":"ref-for-isolated-sequence"},{"id":"ref-for-isolated-sequence\u2460"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-isolated-sequence\u2461"}],"title":"2.3. \nExample of Bidirectional Text"}],"url":"#isolated-sequence"}, "line-left": {"dfnID":"line-left","dfnText":"line-left","external":false,"refSections":[{"refs":[{"id":"ref-for-line-left"},{"id":"ref-for-line-left\u2460"}],"title":"2.1. \nSpecifying Directionality: the direction property"},{"refs":[{"id":"ref-for-line-left\u2461"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-line-left\u2462"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-line-left\u2463"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-line-left\u2464"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"},{"refs":[{"id":"ref-for-line-left\u2465"},{"id":"ref-for-line-left\u2466"},{"id":"ref-for-line-left\u2467"}],"title":"7.5. \nLine-Relative Mappings"}],"url":"#line-left"}, "line-orientation": {"dfnID":"line-orientation","dfnText":"line orientation","external":false,"refSections":[{"refs":[{"id":"ref-for-line-orientation"}],"title":"6.3. \nLine-relative Directions"}],"url":"#line-orientation"}, "line-over": {"dfnID":"line-over","dfnText":"line-over","external":false,"refSections":[{"refs":[{"id":"ref-for-line-over"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-line-over\u2460"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-line-over\u2461"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"},{"refs":[{"id":"ref-for-line-over\u2462"}],"title":"7.5. \nLine-Relative Mappings"}],"url":"#line-over"}, "line-relative": {"dfnID":"line-relative","dfnText":"line-relative","external":false,"refSections":[],"url":"#line-relative"}, "line-relative-direction": {"dfnID":"line-relative-direction","dfnText":"line-relative directions","external":false,"refSections":[{"refs":[{"id":"ref-for-line-relative-direction"}],"title":"7.5. \nLine-Relative Mappings"}],"url":"#line-relative-direction"}, "line-right": {"dfnID":"line-right","dfnText":"line-right","external":false,"refSections":[{"refs":[{"id":"ref-for-line-right"},{"id":"ref-for-line-right\u2460"}],"title":"2.1. \nSpecifying Directionality: the direction property"},{"refs":[{"id":"ref-for-line-right\u2461"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-line-right\u2462"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-line-right\u2463"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"},{"refs":[{"id":"ref-for-line-right\u2464"},{"id":"ref-for-line-right\u2465"},{"id":"ref-for-line-right\u2466"}],"title":"7.5. \nLine-Relative Mappings"}],"url":"#line-right"}, "line-under": {"dfnID":"line-under","dfnText":"line-under","external":false,"refSections":[{"refs":[{"id":"ref-for-line-under"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-line-under\u2460"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-line-under\u2461"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"}],"url":"#line-under"}, "logical-height": {"dfnID":"logical-height","dfnText":"logical height","external":false,"refSections":[],"url":"#logical-height"}, "logical-width": {"dfnID":"logical-width","dfnText":"logical width","external":false,"refSections":[],"url":"#logical-width"}, "over": {"dfnID":"over","dfnText":"over","external":false,"refSections":[{"refs":[{"id":"ref-for-over"}],"title":"4.2. \nText Baselines"},{"refs":[{"id":"ref-for-over\u2460"}],"title":"4.3. \nAtomic Inline Baselines"},{"refs":[{"id":"ref-for-over\u2461"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-over\u2462"},{"id":"ref-for-over\u2463"},{"id":"ref-for-over\u2464"},{"id":"ref-for-over\u2465"}],"title":"7.5. \nLine-Relative Mappings"}],"url":"#over"}, "physical": {"dfnID":"physical","dfnText":"physical","external":false,"refSections":[],"url":"#physical"}, "physical-bottom": {"dfnID":"physical-bottom","dfnText":"bottom","external":false,"refSections":[],"url":"#physical-bottom"}, "physical-dimensions": {"dfnID":"physical-dimensions","dfnText":"physical dimensions","external":false,"refSections":[],"url":"#physical-dimensions"}, "physical-direction": {"dfnID":"physical-direction","dfnText":"physical directions","external":false,"refSections":[],"url":"#physical-direction"}, "physical-left": {"dfnID":"physical-left","dfnText":"left","external":false,"refSections":[],"url":"#physical-left"}, "physical-right": {"dfnID":"physical-right","dfnText":"right","external":false,"refSections":[],"url":"#physical-right"}, "physical-top": {"dfnID":"physical-top","dfnText":"top","external":false,"refSections":[],"url":"#physical-top"}, "principal-writing-mode": {"dfnID":"principal-writing-mode","dfnText":"principal writing mode","external":false,"refSections":[{"refs":[{"id":"ref-for-principal-writing-mode"}],"title":"8. \nThe Principal Writing Mode"},{"refs":[{"id":"ref-for-principal-writing-mode\u2460"}],"title":"8.1. \nPropagation to the Initial Containing Block"},{"refs":[{"id":"ref-for-principal-writing-mode\u2461"},{"id":"ref-for-principal-writing-mode\u2462"}],"title":"8.2. \nPage Flow: the page progression direction"},{"refs":[{"id":"ref-for-principal-writing-mode\u2463"}],"title":"\n Changes since the December\n 2019 CSS Writing Modes Module Level 4 Recommendation"}],"url":"#principal-writing-mode"}, "propdef-direction": {"dfnID":"propdef-direction","dfnText":"direction","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-direction"},{"id":"ref-for-propdef-direction\u2460"}],"title":"1. \nIntroduction to Writing Modes"},{"refs":[{"id":"ref-for-propdef-direction\u2461"},{"id":"ref-for-propdef-direction\u2462"}],"title":"1.1. \nModule Interactions"},{"refs":[{"id":"ref-for-propdef-direction\u2463"},{"id":"ref-for-propdef-direction\u2464"}],"title":"2. \nInline Direction and Bidirectionality"},{"refs":[{"id":"ref-for-propdef-direction\u2465"},{"id":"ref-for-propdef-direction\u2466"},{"id":"ref-for-propdef-direction\u2467"},{"id":"ref-for-propdef-direction\u2468"}],"title":"2.1. \nSpecifying Directionality: the direction property"},{"refs":[{"id":"ref-for-propdef-direction\u2460\u24ea"},{"id":"ref-for-propdef-direction\u2460\u2460"},{"id":"ref-for-propdef-direction\u2460\u2461"},{"id":"ref-for-propdef-direction\u2460\u2462"},{"id":"ref-for-propdef-direction\u2460\u2463"},{"id":"ref-for-propdef-direction\u2460\u2464"},{"id":"ref-for-propdef-direction\u2460\u2465"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-propdef-direction\u2460\u2466"}],"title":"2.4.1. \nBidi Paragraph Embedding Levels"},{"refs":[{"id":"ref-for-propdef-direction\u2460\u2467"}],"title":"2.4.3. \nBidi Treatment of Atomic Inlines"},{"refs":[{"id":"ref-for-propdef-direction\u2460\u2468"},{"id":"ref-for-propdef-direction\u2461\u24ea"}],"title":"2.4.5. \nReordering-induced Box Fragmentation"},{"refs":[{"id":"ref-for-propdef-direction\u2461\u2460"},{"id":"ref-for-propdef-direction\u2461\u2461"},{"id":"ref-for-propdef-direction\u2461\u2462"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-propdef-direction\u2461\u2463"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-propdef-direction\u2461\u2464"},{"id":"ref-for-propdef-direction\u2461\u2465"},{"id":"ref-for-propdef-direction\u2461\u2466"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-propdef-direction\u2461\u2467"},{"id":"ref-for-propdef-direction\u2461\u2468"},{"id":"ref-for-propdef-direction\u2462\u24ea"},{"id":"ref-for-propdef-direction\u2462\u2460"}],"title":"6.4. \nAbstract-to-Physical Mappings"},{"refs":[{"id":"ref-for-propdef-direction\u2462\u2461"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"},{"refs":[{"id":"ref-for-propdef-direction\u2462\u2462"},{"id":"ref-for-propdef-direction\u2462\u2463"},{"id":"ref-for-propdef-direction\u2462\u2464"},{"id":"ref-for-propdef-direction\u2462\u2465"}],"title":"8. \nThe Principal Writing Mode"}],"url":"#propdef-direction"}, "propdef-glyph-orientation-vertical": {"dfnID":"propdef-glyph-orientation-vertical","dfnText":"glyph-orientation-vertical","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-glyph-orientation-vertical"},{"id":"ref-for-propdef-glyph-orientation-vertical\u2460"},{"id":"ref-for-propdef-glyph-orientation-vertical\u2461"},{"id":"ref-for-propdef-glyph-orientation-vertical\u2462"},{"id":"ref-for-propdef-glyph-orientation-vertical\u2463"}],"title":"5.1.3. \nObsolete: the SVG1.1 glyph-orientation-vertical property"}],"url":"#propdef-glyph-orientation-vertical"}, "propdef-text-combine-upright": {"dfnID":"propdef-text-combine-upright","dfnText":"text-combine-upright","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-combine-upright"}],"title":"9.1. \nHorizontal-in-Vertical Composition: the text-combine-upright property"},{"refs":[{"id":"ref-for-propdef-text-combine-upright\u2460"},{"id":"ref-for-propdef-text-combine-upright\u2461"}],"title":"9.1.1. \nText Run Rules"},{"refs":[{"id":"ref-for-propdef-text-combine-upright\u2462"}],"title":"9.1.2. \nLayout Rules"},{"refs":[{"id":"ref-for-propdef-text-combine-upright\u2463"}],"title":"9.1.3.1. \nFull-width Characters"},{"refs":[{"id":"ref-for-propdef-text-combine-upright\u2464"}],"title":"\n Changes since the December\n 2019 CSS Writing Modes Module Level 4 Recommendation"}],"url":"#propdef-text-combine-upright"}, "propdef-text-orientation": {"dfnID":"propdef-text-orientation","dfnText":"text-orientation","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-orientation"},{"id":"ref-for-propdef-text-orientation\u2460"}],"title":"1. \nIntroduction to Writing Modes"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2461"}],"title":"1.1. \nModule Interactions"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2462"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2463"}],"title":"4.2. \nText Baselines"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2464"}],"title":"5. \nIntroduction to Vertical Text Layout"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2465"},{"id":"ref-for-propdef-text-orientation\u2466"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2467"}],"title":"5.1.2. \nMixed Vertical Orientations"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2468"},{"id":"ref-for-propdef-text-orientation\u2460\u24ea"}],"title":"5.1.3. \nObsolete: the SVG1.1 glyph-orientation-vertical property"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2460\u2460"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2460\u2461"},{"id":"ref-for-propdef-text-orientation\u2460\u2462"}],"title":"6.4. \nAbstract-to-Physical Mappings"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2460\u2463"},{"id":"ref-for-propdef-text-orientation\u2460\u2464"},{"id":"ref-for-propdef-text-orientation\u2460\u2465"}],"title":"8. \nThe Principal Writing Mode"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2460\u2466"}],"title":"9.1.2. \nLayout Rules"}],"url":"#propdef-text-orientation"}, "propdef-unicode-bidi": {"dfnID":"propdef-unicode-bidi","dfnText":"unicode-bidi","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-unicode-bidi"}],"title":"1. \nIntroduction to Writing Modes"},{"refs":[{"id":"ref-for-propdef-unicode-bidi\u2460"}],"title":"1.1. \nModule Interactions"},{"refs":[{"id":"ref-for-propdef-unicode-bidi\u2461"},{"id":"ref-for-propdef-unicode-bidi\u2462"}],"title":"2. \nInline Direction and Bidirectionality"},{"refs":[{"id":"ref-for-propdef-unicode-bidi\u2463"},{"id":"ref-for-propdef-unicode-bidi\u2464"}],"title":"2.1. \nSpecifying Directionality: the direction property"},{"refs":[{"id":"ref-for-propdef-unicode-bidi\u2465"},{"id":"ref-for-propdef-unicode-bidi\u2466"},{"id":"ref-for-propdef-unicode-bidi\u2467"},{"id":"ref-for-propdef-unicode-bidi\u2468"},{"id":"ref-for-propdef-unicode-bidi\u2460\u24ea"},{"id":"ref-for-propdef-unicode-bidi\u2460\u2460"},{"id":"ref-for-propdef-unicode-bidi\u2460\u2461"},{"id":"ref-for-propdef-unicode-bidi\u2460\u2462"},{"id":"ref-for-propdef-unicode-bidi\u2460\u2463"},{"id":"ref-for-propdef-unicode-bidi\u2460\u2464"},{"id":"ref-for-propdef-unicode-bidi\u2460\u2465"},{"id":"ref-for-propdef-unicode-bidi\u2460\u2466"},{"id":"ref-for-propdef-unicode-bidi\u2460\u2467"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-propdef-unicode-bidi\u2460\u2468"}],"title":"2.3. \nExample of Bidirectional Text"},{"refs":[{"id":"ref-for-propdef-unicode-bidi\u2461\u24ea"}],"title":"2.4.1. \nBidi Paragraph Embedding Levels"},{"refs":[{"id":"ref-for-propdef-unicode-bidi\u2461\u2460"}],"title":"2.4.2. \nCSS\u2013Unicode Bidi Control Translation, Text Reordering"},{"refs":[{"id":"ref-for-propdef-unicode-bidi\u2461\u2461"}],"title":"2.4.3. \nBidi Treatment of Atomic Inlines"},{"refs":[{"id":"ref-for-propdef-unicode-bidi\u2461\u2462"}],"title":"2.4.4. \nParagraph Breaks Within Embeddings and Isolates"},{"refs":[{"id":"ref-for-propdef-unicode-bidi\u2461\u2463"}],"title":"5.1. \nOrienting Text: the text-orientation property"}],"url":"#propdef-unicode-bidi"}, "propdef-writing-mode": {"dfnID":"propdef-writing-mode","dfnText":"writing-mode","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-writing-mode"},{"id":"ref-for-propdef-writing-mode\u2460"}],"title":"1. \nIntroduction to Writing Modes"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2461"}],"title":"1.1. \nModule Interactions"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2462"},{"id":"ref-for-propdef-writing-mode\u2463"},{"id":"ref-for-propdef-writing-mode\u2464"},{"id":"ref-for-propdef-writing-mode\u2465"},{"id":"ref-for-propdef-writing-mode\u2466"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2467"}],"title":"3.2.1. \nObsolete SVG1.1 writing-mode Values"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2468"},{"id":"ref-for-propdef-writing-mode\u2460\u24ea"},{"id":"ref-for-propdef-writing-mode\u2460\u2460"}],"title":"3.2.1.1. \nSupporting SVG1.1 writing-mode values in CSS syntax"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460\u2461"}],"title":"3.2.1.2. \nSupporting SVG1.1 writing-mode values in presentational attributes"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460\u2462"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460\u2463"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460\u2464"},{"id":"ref-for-propdef-writing-mode\u2460\u2465"},{"id":"ref-for-propdef-writing-mode\u2460\u2466"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460\u2467"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460\u2468"},{"id":"ref-for-propdef-writing-mode\u2461\u24ea"},{"id":"ref-for-propdef-writing-mode\u2461\u2460"}],"title":"6.4. \nAbstract-to-Physical Mappings"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2461\u2461"}],"title":"7.3. \nOrthogonal Flows"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2461\u2462"},{"id":"ref-for-propdef-writing-mode\u2461\u2463"},{"id":"ref-for-propdef-writing-mode\u2461\u2464"},{"id":"ref-for-propdef-writing-mode\u2461\u2465"}],"title":"8. \nThe Principal Writing Mode"}],"url":"#propdef-writing-mode"}, "typeset-sideways": {"dfnID":"typeset-sideways","dfnText":"sideways typesetting\n ","external":false,"refSections":[{"refs":[{"id":"ref-for-typeset-sideways"}],"title":"1. \nIntroduction to Writing Modes"},{"refs":[{"id":"ref-for-typeset-sideways"},{"id":"ref-for-typeset-sideways"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-typeset-sideways"}],"title":"5.1.1. \nVertical Typesetting and Font Features"},{"refs":[{"id":"ref-for-typeset-sideways"}],"title":"5.1.2. \nMixed Vertical Orientations"}],"url":"#typeset-sideways"}, "typeset-upright": {"dfnID":"typeset-upright","dfnText":"upright typesetting","external":false,"refSections":[{"refs":[{"id":"ref-for-typeset-upright"}],"title":"1. \nIntroduction to Writing Modes"},{"refs":[{"id":"ref-for-typeset-upright"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-typeset-upright"}],"title":"5.1.2. \nMixed Vertical Orientations"}],"url":"#typeset-upright"}, "typographic-mode": {"dfnID":"typographic-mode","dfnText":"typographic mode","external":false,"refSections":[{"refs":[{"id":"ref-for-typographic-mode"},{"id":"ref-for-typographic-mode\u2460"},{"id":"ref-for-typographic-mode\u2461"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"},{"refs":[{"id":"ref-for-typographic-mode\u2462"}],"title":"4.1. \nIntroduction to Baselines"},{"refs":[{"id":"ref-for-typographic-mode\u2463"}],"title":"4.2. \nText Baselines"},{"refs":[{"id":"ref-for-typographic-mode\u2464"}],"title":"4.4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-typographic-mode\u2465"},{"id":"ref-for-typographic-mode\u2466"}],"title":"5.1. \nOrienting Text: the text-orientation property"}],"url":"#typographic-mode"}, "under": {"dfnID":"under","dfnText":"under","external":false,"refSections":[{"refs":[{"id":"ref-for-under"}],"title":"4.2. \nText Baselines"},{"refs":[{"id":"ref-for-under\u2460"},{"id":"ref-for-under\u2461"}],"title":"4.3. \nAtomic Inline Baselines"},{"refs":[{"id":"ref-for-under\u2462"},{"id":"ref-for-under\u2463"},{"id":"ref-for-under\u2464"}],"title":"7.5. \nLine-Relative Mappings"}],"url":"#under"}, "valdef-direction-ltr": {"dfnID":"valdef-direction-ltr","dfnText":"ltr","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-direction-ltr"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-valdef-direction-ltr\u2460"}],"title":"2.4.5. \nReordering-induced Box Fragmentation"},{"refs":[{"id":"ref-for-valdef-direction-ltr\u2461"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-valdef-direction-ltr\u2462"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-valdef-direction-ltr\u2463"},{"id":"ref-for-valdef-direction-ltr\u2464"},{"id":"ref-for-valdef-direction-ltr\u2465"},{"id":"ref-for-valdef-direction-ltr\u2466"}],"title":"6.4. \nAbstract-to-Physical Mappings"},{"refs":[{"id":"ref-for-valdef-direction-ltr\u2467"}],"title":"8.2. \nPage Flow: the page progression direction"}],"url":"#valdef-direction-ltr"}, "valdef-direction-rtl": {"dfnID":"valdef-direction-rtl","dfnText":"rtl","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-direction-rtl"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-valdef-direction-rtl\u2460"}],"title":"2.4.5. \nReordering-induced Box Fragmentation"},{"refs":[{"id":"ref-for-valdef-direction-rtl\u2461"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-valdef-direction-rtl\u2462"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-valdef-direction-rtl\u2463"},{"id":"ref-for-valdef-direction-rtl\u2464"},{"id":"ref-for-valdef-direction-rtl\u2465"}],"title":"6.4. \nAbstract-to-Physical Mappings"},{"refs":[{"id":"ref-for-valdef-direction-rtl\u2466"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"},{"refs":[{"id":"ref-for-valdef-direction-rtl\u2467"}],"title":"8.2. \nPage Flow: the page progression direction"}],"url":"#valdef-direction-rtl"}, "valdef-text-combine-upright-all": {"dfnID":"valdef-text-combine-upright-all","dfnText":"all","external":false,"refSections":[],"url":"#valdef-text-combine-upright-all"}, "valdef-text-combine-upright-none": {"dfnID":"valdef-text-combine-upright-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-combine-upright-none"}],"title":"8. \nThe Principal Writing Mode"},{"refs":[{"id":"ref-for-valdef-text-combine-upright-none\u2460"}],"title":"9.1.1. \nText Run Rules"}],"url":"#valdef-text-combine-upright-none"}, "valdef-text-orientation-mixed": {"dfnID":"valdef-text-orientation-mixed","dfnText":"mixed","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-orientation-mixed"}],"title":"4.2. \nText Baselines"},{"refs":[{"id":"ref-for-valdef-text-orientation-mixed\u2460"}],"title":"5. \nIntroduction to Vertical Text Layout"},{"refs":[{"id":"ref-for-valdef-text-orientation-mixed\u2461"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-valdef-text-orientation-mixed\u2462"},{"id":"ref-for-valdef-text-orientation-mixed\u2463"}],"title":"5.1.2. \nMixed Vertical Orientations"},{"refs":[{"id":"ref-for-valdef-text-orientation-mixed\u2464"}],"title":"5.1.3. \nObsolete: the SVG1.1 glyph-orientation-vertical property"},{"refs":[{"id":"ref-for-valdef-text-orientation-mixed\u2465"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-valdef-text-orientation-mixed\u2466"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"},{"refs":[{"id":"ref-for-valdef-text-orientation-mixed\u2467"}],"title":"Appendix A:\nVertical Scripts in Unicode"}],"url":"#valdef-text-orientation-mixed"}, "valdef-text-orientation-sideways": {"dfnID":"valdef-text-orientation-sideways","dfnText":"sideways","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-orientation-sideways"},{"id":"ref-for-valdef-text-orientation-sideways\u2460"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-valdef-text-orientation-sideways\u2461"},{"id":"ref-for-valdef-text-orientation-sideways\u2462"}],"title":"5.1.3. \nObsolete: the SVG1.1 glyph-orientation-vertical property"},{"refs":[{"id":"ref-for-valdef-text-orientation-sideways\u2463"}],"title":"6.3. \nLine-relative Directions"}],"url":"#valdef-text-orientation-sideways"}, "valdef-text-orientation-sideways-right": {"dfnID":"valdef-text-orientation-sideways-right","dfnText":"sideways-right","external":false,"refSections":[],"url":"#valdef-text-orientation-sideways-right"}, "valdef-text-orientation-upright": {"dfnID":"valdef-text-orientation-upright","dfnText":"upright","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-orientation-upright"}],"title":"4.2. \nText Baselines"},{"refs":[{"id":"ref-for-valdef-text-orientation-upright\u2460"}],"title":"5. \nIntroduction to Vertical Text Layout"},{"refs":[{"id":"ref-for-valdef-text-orientation-upright\u2461"},{"id":"ref-for-valdef-text-orientation-upright\u2462"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-valdef-text-orientation-upright\u2463"},{"id":"ref-for-valdef-text-orientation-upright\u2464"}],"title":"5.1.3. \nObsolete: the SVG1.1 glyph-orientation-vertical property"},{"refs":[{"id":"ref-for-valdef-text-orientation-upright\u2465"}],"title":"6.4. \nAbstract-to-Physical Mappings"}],"url":"#valdef-text-orientation-upright"}, "valdef-unicode-bidi-bidi-override": {"dfnID":"valdef-unicode-bidi-bidi-override","dfnText":"bidi-override","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-unicode-bidi-bidi-override"},{"id":"ref-for-valdef-unicode-bidi-bidi-override\u2460"},{"id":"ref-for-valdef-unicode-bidi-bidi-override\u2461"},{"id":"ref-for-valdef-unicode-bidi-bidi-override\u2462"},{"id":"ref-for-valdef-unicode-bidi-bidi-override\u2463"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-valdef-unicode-bidi-bidi-override\u2464"}],"title":"2.4.3. \nBidi Treatment of Atomic Inlines"}],"url":"#valdef-unicode-bidi-bidi-override"}, "valdef-unicode-bidi-embed": {"dfnID":"valdef-unicode-bidi-embed","dfnText":"embed","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-unicode-bidi-embed"},{"id":"ref-for-valdef-unicode-bidi-embed\u2460"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-valdef-unicode-bidi-embed\u2461"}],"title":"2.4.3. \nBidi Treatment of Atomic Inlines"}],"url":"#valdef-unicode-bidi-embed"}, "valdef-unicode-bidi-isolate": {"dfnID":"valdef-unicode-bidi-isolate","dfnText":"isolate","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-unicode-bidi-isolate"},{"id":"ref-for-valdef-unicode-bidi-isolate\u2460"},{"id":"ref-for-valdef-unicode-bidi-isolate\u2461"},{"id":"ref-for-valdef-unicode-bidi-isolate\u2462"},{"id":"ref-for-valdef-unicode-bidi-isolate\u2463"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"}],"url":"#valdef-unicode-bidi-isolate"}, "valdef-unicode-bidi-isolate-override": {"dfnID":"valdef-unicode-bidi-isolate-override","dfnText":"isolate-override","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-unicode-bidi-isolate-override"},{"id":"ref-for-valdef-unicode-bidi-isolate-override\u2460"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"}],"url":"#valdef-unicode-bidi-isolate-override"}, "valdef-unicode-bidi-normal": {"dfnID":"valdef-unicode-bidi-normal","dfnText":"normal","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-unicode-bidi-normal"}],"title":"2.1. \nSpecifying Directionality: the direction property"},{"refs":[{"id":"ref-for-valdef-unicode-bidi-normal\u2460"},{"id":"ref-for-valdef-unicode-bidi-normal\u2461"},{"id":"ref-for-valdef-unicode-bidi-normal\u2462"},{"id":"ref-for-valdef-unicode-bidi-normal\u2463"},{"id":"ref-for-valdef-unicode-bidi-normal\u2464"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-valdef-unicode-bidi-normal\u2465"}],"title":"2.3. \nExample of Bidirectional Text"}],"url":"#valdef-unicode-bidi-normal"}, "valdef-unicode-bidi-plaintext": {"dfnID":"valdef-unicode-bidi-plaintext","dfnText":"plaintext","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-unicode-bidi-plaintext"},{"id":"ref-for-valdef-unicode-bidi-plaintext\u2460"},{"id":"ref-for-valdef-unicode-bidi-plaintext\u2461"},{"id":"ref-for-valdef-unicode-bidi-plaintext\u2462"}],"title":"2.2. \nEmbeddings and Overrides: the unicode-bidi property"},{"refs":[{"id":"ref-for-valdef-unicode-bidi-plaintext\u2463"}],"title":"2.4.1. \nBidi Paragraph Embedding Levels"}],"url":"#valdef-unicode-bidi-plaintext"}, "valdef-writing-mode-horizontal-tb": {"dfnID":"valdef-writing-mode-horizontal-tb","dfnText":"horizontal-tb","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-horizontal-tb"}],"title":"2.4.5. \nReordering-induced Box Fragmentation"},{"refs":[{"id":"ref-for-valdef-writing-mode-horizontal-tb\u2460"}],"title":"3.2.1.1. \nSupporting SVG1.1 writing-mode values in CSS syntax"},{"refs":[{"id":"ref-for-valdef-writing-mode-horizontal-tb\u2461"},{"id":"ref-for-valdef-writing-mode-horizontal-tb\u2462"}],"title":"6. \nAbstract Box Terminology"},{"refs":[{"id":"ref-for-valdef-writing-mode-horizontal-tb\u2463"},{"id":"ref-for-valdef-writing-mode-horizontal-tb\u2464"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-valdef-writing-mode-horizontal-tb\u2465"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-valdef-writing-mode-horizontal-tb\u2466"}],"title":"6.4. \nAbstract-to-Physical Mappings"},{"refs":[{"id":"ref-for-valdef-writing-mode-horizontal-tb\u2467"}],"title":"7.3. \nOrthogonal Flows"},{"refs":[{"id":"ref-for-valdef-writing-mode-horizontal-tb\u2468"}],"title":"7.5. \nLine-Relative Mappings"},{"refs":[{"id":"ref-for-valdef-writing-mode-horizontal-tb\u2460\u24ea"},{"id":"ref-for-valdef-writing-mode-horizontal-tb\u2460\u2460"}],"title":"8.2. \nPage Flow: the page progression direction"}],"url":"#valdef-writing-mode-horizontal-tb"}, "valdef-writing-mode-vertical-lr": {"dfnID":"valdef-writing-mode-vertical-lr","dfnText":"vertical-lr","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-lr"}],"title":"3.2.1.1. \nSupporting SVG1.1 writing-mode values in CSS syntax"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-lr\u2460"}],"title":"5.1.1. \nVertical Typesetting and Font Features"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-lr\u2461"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-lr\u2462"},{"id":"ref-for-valdef-writing-mode-vertical-lr\u2463"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-lr\u2464"}],"title":"6.4. \nAbstract-to-Physical Mappings"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-lr\u2465"}],"title":"7.3. \nOrthogonal Flows"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-lr\u2466"}],"title":"8.2. \nPage Flow: the page progression direction"}],"url":"#valdef-writing-mode-vertical-lr"}, "valdef-writing-mode-vertical-rl": {"dfnID":"valdef-writing-mode-vertical-rl","dfnText":"vertical-rl","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl\u2460"}],"title":"3.2.1.1. \nSupporting SVG1.1 writing-mode values in CSS syntax"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl\u2461"}],"title":"5.1. \nOrienting Text: the text-orientation property"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl\u2462"}],"title":"5.1.1. \nVertical Typesetting and Font Features"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl\u2463"}],"title":"6.2. \nFlow-relative Directions"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl\u2464"}],"title":"6.3. \nLine-relative Directions"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl\u2465"}],"title":"6.4. \nAbstract-to-Physical Mappings"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl\u2466"},{"id":"ref-for-valdef-writing-mode-vertical-rl\u2467"},{"id":"ref-for-valdef-writing-mode-vertical-rl\u2468"}],"title":"7.1. \nPrinciples of Layout in Vertical Writing Modes"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl\u2460\u24ea"},{"id":"ref-for-valdef-writing-mode-vertical-rl\u2460\u2460"}],"title":"7.3. \nOrthogonal Flows"},{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl\u2460\u2461"}],"title":"8.2. \nPage Flow: the page progression direction"}],"url":"#valdef-writing-mode-vertical-rl"}, "vertical-block-flow": {"dfnID":"vertical-block-flow","dfnText":"vertical block flow","external":false,"refSections":[],"url":"#vertical-block-flow"}, "vertical-dimension": {"dfnID":"vertical-dimension","dfnText":"vertical dimension","external":false,"refSections":[{"refs":[{"id":"ref-for-vertical-dimension"},{"id":"ref-for-vertical-dimension\u2460"}],"title":"6.1. \nAbstract Dimensions"}],"url":"#vertical-dimension"}, "vertical-only": {"dfnID":"vertical-only","dfnText":"vertical-only","external":false,"refSections":[{"refs":[{"id":"ref-for-vertical-only"}],"title":"5. \nIntroduction to Vertical Text Layout"},{"refs":[{"id":"ref-for-vertical-only\u2460"},{"id":"ref-for-vertical-only\u2461"}],"title":"Appendix A:\nVertical Scripts in Unicode"}],"url":"#vertical-only"}, "vertical-script": {"dfnID":"vertical-script","dfnText":"vertical script","external":false,"refSections":[{"refs":[{"id":"ref-for-vertical-script"}],"title":"1. \nIntroduction to Writing Modes"}],"url":"#vertical-script"}, "vertical-typographic-mode": {"dfnID":"vertical-typographic-mode","dfnText":"vertical typographic mode","external":false,"refSections":[{"refs":[{"id":"ref-for-vertical-typographic-mode"}],"title":"1. \nIntroduction to Writing Modes"}],"url":"#vertical-typographic-mode"}, "vertical-writing-mode": {"dfnID":"vertical-writing-mode","dfnText":"vertical writing mode","external":false,"refSections":[{"refs":[{"id":"ref-for-vertical-writing-mode"}],"title":"6.4. \nAbstract-to-Physical Mappings"}],"url":"#vertical-writing-mode"}, "width": {"dfnID":"width","dfnText":"width","external":false,"refSections":[],"url":"#width"}, "writing-mode": {"dfnID":"writing-mode","dfnText":"writing mode","external":false,"refSections":[{"refs":[{"id":"ref-for-writing-mode"},{"id":"ref-for-writing-mode\u2460"}],"title":"1.1. \nModule Interactions"},{"refs":[{"id":"ref-for-writing-mode\u2461"},{"id":"ref-for-writing-mode\u2462"},{"id":"ref-for-writing-mode\u2463"},{"id":"ref-for-writing-mode\u2464"}],"title":"3.2. \nBlock Flow Direction: the writing-mode property"}],"url":"#writing-mode"}, "x-axis": {"dfnID":"x-axis","dfnText":"x-axis","external":false,"refSections":[{"refs":[{"id":"ref-for-x-axis"},{"id":"ref-for-x-axis\u2460"}],"title":"6.1. \nAbstract Dimensions"}],"url":"#x-axis"}, "y-axis": {"dfnID":"y-axis","dfnText":"y-axis","external":false,"refSections":[{"refs":[{"id":"ref-for-y-axis"},{"id":"ref-for-y-axis\u2460"}],"title":"6.1. \nAbstract Dimensions"}],"url":"#y-axis"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "https://drafts.csswg.org/css-values-4/#angle-value": "Expands to: deg | grad | rad | turn", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </script> <script>/* Boilerplate: script-position-annos */ "use strict"; { function repositionAnnoPanels(){ const panels = [...document.querySelectorAll("[data-anno-for]")]; hydratePanels(panels); let vSoFar = 0; for(const panel of panels.sort(cmpTops)) { if(panel.top < vSoFar) { panel.top = vSoFar; panel.style.top = vSoFar + "px"; } vSoFar = panel.top + panel.height + 15; } } function hydratePanels(panels) { const main = document.querySelector("main"); let mainRect; if(main) mainRect = main.getBoundingClientRect(); // First display them all, if they're not already visible. for(const panel of panels) { panel.classList.remove("unpositioned"); } // Measure them all for(const panel of panels) { const dfn = document.getElementById(panel.getAttribute("data-anno-for")); if(!dfn) { console.log("Can't find the annotation panel target:", panel); continue; } panel.dfn = dfn; panel.top = window.scrollY + dfn.getBoundingClientRect().top; let panelRect = panel.getBoundingClientRect(); panel.height = panelRect.height; if(main) { panel.overlappingMain = panelRect.left < mainRect.right; } else { panel.overlappingMain = false; } } // And finally position them for(const panel of panels) { const dfn = panel.dfn; if(!dfn) continue; panel.style.top = panel.top + "px"; panel.classList.toggle("overlapping-main", panel.overlappingMain); } } function cmpTops(a,b) { return a.top - b.top; } window.addEventListener("load", repositionAnnoPanels); window.addEventListener("resize", repositionAnnoPanels); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#alphabetic-baseline": {"displayText":"alphabetic baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"alphabetic baseline","type":"dfn","url":"#alphabetic-baseline"}, "#bi-orientational": {"displayText":"bi-orientational","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"bi-orientational","type":"dfn","url":"#bi-orientational"}, "#bi-orientational-transform": {"displayText":"bi-orientational transform","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"bi-orientational transform","type":"dfn","url":"#bi-orientational-transform"}, "#bidi-isolate": {"displayText":"isolation","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"isolation","type":"dfn","url":"#bidi-isolate"}, "#bidi-paragraph": {"displayText":"bidi paragraph","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"bidi paragraph","type":"dfn","url":"#bidi-paragraph"}, "#block-axis": {"displayText":"block-axis","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"block-axis","type":"dfn","url":"#block-axis"}, "#block-end": {"displayText":"block-end","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"block-end","type":"dfn","url":"#block-end"}, "#block-flow-direction": {"displayText":"block flow direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"block flow direction","type":"dfn","url":"#block-flow-direction"}, "#block-size": {"displayText":"block size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"block size","type":"dfn","url":"#block-size"}, "#block-start": {"displayText":"block-start","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"block-start","type":"dfn","url":"#block-start"}, "#central-baseline": {"displayText":"central baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"central baseline","type":"dfn","url":"#central-baseline"}, "#css-end": {"displayText":"end","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"end","type":"dfn","url":"#css-end"}, "#css-start": {"displayText":"start","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"start","type":"dfn","url":"#css-start"}, "#directional-embedding": {"displayText":"directional embedding","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"directional embedding","type":"dfn","url":"#directional-embedding"}, "#directional-override": {"displayText":"directional override","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"directional override","type":"dfn","url":"#directional-override"}, "#establish-an-orthogonal-flow": {"displayText":"orthogonal flow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"orthogonal flow","type":"dfn","url":"#establish-an-orthogonal-flow"}, "#flow-relative-direction": {"displayText":"flow-relative direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"flow-relative direction","type":"dfn","url":"#flow-relative-direction"}, "#forced-paragraph-break": {"displayText":"forced paragraph break","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"forced paragraph break","type":"dfn","url":"#forced-paragraph-break"}, "#horizontal-dimension": {"displayText":"horizontal dimension","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"horizontal dimension","type":"dfn","url":"#horizontal-dimension"}, "#horizontal-only": {"displayText":"horizontal-only","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"horizontal-only","type":"dfn","url":"#horizontal-only"}, "#horizontal-script": {"displayText":"horizontal script","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"horizontal script","type":"dfn","url":"#horizontal-script"}, "#horizontal-writing-mode": {"displayText":"horizontal writing mode","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"horizontal writing mode","type":"dfn","url":"#horizontal-writing-mode"}, "#inline-axis": {"displayText":"inline axis","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"inline axis","type":"dfn","url":"#inline-axis"}, "#inline-base-direction": {"displayText":"inline base direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"inline base direction","type":"dfn","url":"#inline-base-direction"}, "#inline-end": {"displayText":"inline-end","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"inline-end","type":"dfn","url":"#inline-end"}, "#inline-size": {"displayText":"inline size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"inline size","type":"dfn","url":"#inline-size"}, "#inline-start": {"displayText":"inline-start","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"inline-start","type":"dfn","url":"#inline-start"}, "#isolated-sequence": {"displayText":"isolated sequence","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"isolated sequence","type":"dfn","url":"#isolated-sequence"}, "#line-left": {"displayText":"line-left","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"line-left","type":"dfn","url":"#line-left"}, "#line-orientation": {"displayText":"line orientation","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"line orientation","type":"dfn","url":"#line-orientation"}, "#line-over": {"displayText":"line-over","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"line-over","type":"dfn","url":"#line-over"}, "#line-relative-direction": {"displayText":"line-relative direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"line-relative direction","type":"dfn","url":"#line-relative-direction"}, "#line-right": {"displayText":"line-right","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"line-right","type":"dfn","url":"#line-right"}, "#line-under": {"displayText":"line-under","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"line-under","type":"dfn","url":"#line-under"}, "#over": {"displayText":"over","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"over","type":"dfn","url":"#over"}, "#principal-writing-mode": {"displayText":"principal writing mode","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"principal writing mode","type":"dfn","url":"#principal-writing-mode"}, "#propdef-direction": {"displayText":"direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"direction","type":"property","url":"#propdef-direction"}, "#propdef-glyph-orientation-vertical": {"displayText":"glyph-orientation-vertical","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"glyph-orientation-vertical","type":"property","url":"#propdef-glyph-orientation-vertical"}, "#propdef-text-combine-upright": {"displayText":"text-combine-upright","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"text-combine-upright","type":"property","url":"#propdef-text-combine-upright"}, "#propdef-text-orientation": {"displayText":"text-orientation","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"text-orientation","type":"property","url":"#propdef-text-orientation"}, "#propdef-unicode-bidi": {"displayText":"unicode-bidi","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"unicode-bidi","type":"property","url":"#propdef-unicode-bidi"}, "#propdef-writing-mode": {"displayText":"writing-mode","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"writing-mode","type":"property","url":"#propdef-writing-mode"}, "#typeset-sideways": {"displayText":"typeset sideways","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"typeset sideways","type":"dfn","url":"#typeset-sideways"}, "#typeset-upright": {"displayText":"typeset upright","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"typeset upright","type":"dfn","url":"#typeset-upright"}, "#typographic-mode": {"displayText":"typographic mode","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"typographic mode","type":"dfn","url":"#typographic-mode"}, "#under": {"displayText":"under","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"under","type":"dfn","url":"#under"}, "#valdef-direction-ltr": {"displayText":"ltr","export":true,"for_":["direction"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"ltr","type":"value","url":"#valdef-direction-ltr"}, "#valdef-direction-rtl": {"displayText":"rtl","export":true,"for_":["direction"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"rtl","type":"value","url":"#valdef-direction-rtl"}, "#valdef-text-combine-upright-none": {"displayText":"none","export":true,"for_":["text-combine-upright"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"none","type":"value","url":"#valdef-text-combine-upright-none"}, "#valdef-text-orientation-mixed": {"displayText":"mixed","export":true,"for_":["text-orientation"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"mixed","type":"value","url":"#valdef-text-orientation-mixed"}, "#valdef-text-orientation-sideways": {"displayText":"sideways","export":true,"for_":["text-orientation"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"sideways","type":"value","url":"#valdef-text-orientation-sideways"}, "#valdef-text-orientation-upright": {"displayText":"upright","export":true,"for_":["text-orientation"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"upright","type":"value","url":"#valdef-text-orientation-upright"}, "#valdef-unicode-bidi-bidi-override": {"displayText":"bidi-override","export":true,"for_":["unicode-bidi"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"bidi-override","type":"value","url":"#valdef-unicode-bidi-bidi-override"}, "#valdef-unicode-bidi-embed": {"displayText":"embed","export":true,"for_":["unicode-bidi"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"embed","type":"value","url":"#valdef-unicode-bidi-embed"}, "#valdef-unicode-bidi-isolate": {"displayText":"isolate","export":true,"for_":["unicode-bidi"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"isolate","type":"value","url":"#valdef-unicode-bidi-isolate"}, "#valdef-unicode-bidi-isolate-override": {"displayText":"isolate-override","export":true,"for_":["unicode-bidi"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"isolate-override","type":"value","url":"#valdef-unicode-bidi-isolate-override"}, "#valdef-unicode-bidi-normal": {"displayText":"normal","export":true,"for_":["unicode-bidi"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"normal","type":"value","url":"#valdef-unicode-bidi-normal"}, "#valdef-unicode-bidi-plaintext": {"displayText":"plaintext","export":true,"for_":["unicode-bidi"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"plaintext","type":"value","url":"#valdef-unicode-bidi-plaintext"}, "#valdef-writing-mode-horizontal-tb": {"displayText":"horizontal-tb","export":true,"for_":["writing-mode"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"horizontal-tb","type":"value","url":"#valdef-writing-mode-horizontal-tb"}, "#valdef-writing-mode-vertical-lr": {"displayText":"vertical-lr","export":true,"for_":["writing-mode"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"vertical-lr","type":"value","url":"#valdef-writing-mode-vertical-lr"}, "#valdef-writing-mode-vertical-rl": {"displayText":"vertical-rl","export":true,"for_":["writing-mode"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"vertical-rl","type":"value","url":"#valdef-writing-mode-vertical-rl"}, "#vertical-dimension": {"displayText":"vertical dimension","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"vertical dimension","type":"dfn","url":"#vertical-dimension"}, "#vertical-only": {"displayText":"vertical-only","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"vertical-only","type":"dfn","url":"#vertical-only"}, "#vertical-script": {"displayText":"vertical script","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"vertical script","type":"dfn","url":"#vertical-script"}, "#vertical-typographic-mode": {"displayText":"vertical typographic mode","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"vertical typographic mode","type":"dfn","url":"#vertical-typographic-mode"}, "#vertical-writing-mode": {"displayText":"vertical writing mode","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"vertical writing mode","type":"dfn","url":"#vertical-writing-mode"}, "#writing-mode": {"displayText":"writing mode","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"writing mode","type":"dfn","url":"#writing-mode"}, "#x-axis": {"displayText":"horizontal axis","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"horizontal axis","type":"dfn","url":"#x-axis"}, "#y-axis": {"displayText":"vertical axis","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"local","text":"vertical axis","type":"dfn","url":"#y-axis"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow": {"displayText":"box-shadow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"box-shadow","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow"}, "https://drafts.csswg.org/css-box-4/#propdef-margin-bottom": {"displayText":"margin-bottom","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin-bottom","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin-bottom"}, "https://drafts.csswg.org/css-box-4/#propdef-margin-left": {"displayText":"margin-left","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin-left","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin-left"}, "https://drafts.csswg.org/css-box-4/#propdef-margin-right": {"displayText":"margin-right","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin-right","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin-right"}, "https://drafts.csswg.org/css-box-4/#propdef-margin-top": {"displayText":"margin-top","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin-top","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin-top"}, "https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break": {"displayText":"box-decoration-break","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"box-decoration-break","type":"property","url":"https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break"}, "https://drafts.csswg.org/css-cascade-5/#computed-value": {"displayText":"computed value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"computed value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "https://drafts.csswg.org/css-cascade-5/#css-inheritance": {"displayText":"inheritance","export":true,"for_":["CSS"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"inheritance","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#css-inheritance"}, "https://drafts.csswg.org/css-cascade-5/#used-value": {"displayText":"used value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"used value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit": {"displayText":"inherit","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"inherit","type":"value","url":"https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit"}, "https://drafts.csswg.org/css-contain-2/#containment": {"displayText":"containment","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-contain","spec":"css-contain-2","status":"current","text":"containment","type":"dfn","url":"https://drafts.csswg.org/css-contain-2/#containment"}, "https://drafts.csswg.org/css-display-4/#block-container": {"displayText":"block container","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block container","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-container"}, "https://drafts.csswg.org/css-display-4/#block-formatting-context": {"displayText":"block formatting context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block formatting context","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-formatting-context"}, "https://drafts.csswg.org/css-display-4/#block-level": {"displayText":"block-level","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block-level","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-level"}, "https://drafts.csswg.org/css-display-4/#containing-block": {"displayText":"containing block","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"containing block","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#containing-block"}, "https://drafts.csswg.org/css-display-4/#display-type": {"displayText":"display type","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"display type","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#display-type"}, "https://drafts.csswg.org/css-display-4/#in-flow": {"displayText":"in-flow","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"in-flow","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#in-flow"}, "https://drafts.csswg.org/css-display-4/#independent-formatting-context": {"displayText":"independent formatting context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"independent formatting context","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#independent-formatting-context"}, "https://drafts.csswg.org/css-display-4/#initial-containing-block": {"displayText":"initial containing block","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"initial containing block","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#initial-containing-block"}, "https://drafts.csswg.org/css-display-4/#inline-box": {"displayText":"inline box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline-box"}, "https://drafts.csswg.org/css-display-4/#inner-display-type": {"displayText":"inner display type","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inner display type","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inner-display-type"}, "https://drafts.csswg.org/css-display-4/#replaced-element": {"displayText":"replaced element","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"replaced element","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#replaced-element"}, "https://drafts.csswg.org/css-display-4/#valdef-display-flow": {"displayText":"flow","export":true,"for_":["display","<display-inside>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"flow","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-flow"}, "https://drafts.csswg.org/css-display-4/#valdef-display-flow-root": {"displayText":"flow-root","export":true,"for_":["display","<display-inside>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"flow-root","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-flow-root"}, "https://drafts.csswg.org/css-display-4/#valdef-display-inline": {"displayText":"inline","export":true,"for_":["display","<display-outside>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-inline"}, "https://drafts.csswg.org/css-display-4/#valdef-display-inline-block": {"displayText":"inline-block","export":true,"for_":["display","<display-legacy>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline-block","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-inline-block"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-feature-settings": {"displayText":"font-feature-settings","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-feature-settings","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-feature-settings"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-variant": {"displayText":"font-variant","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-variant","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-variant"}, "https://drafts.csswg.org/css-images-3/#default-object-size": {"displayText":"default object size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"current","text":"default object size","type":"dfn","url":"https://drafts.csswg.org/css-images-3/#default-object-size"}, "https://drafts.csswg.org/css-inline-3/#propdef-vertical-align": {"displayText":"vertical-align","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"vertical-align","type":"property","url":"https://drafts.csswg.org/css-inline-3/#propdef-vertical-align"}, "https://drafts.csswg.org/css-inline-3/#root-inline-box": {"displayText":"root inline box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"root inline box","type":"dfn","url":"https://drafts.csswg.org/css-inline-3/#root-inline-box"}, "https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-baseline": {"displayText":"baseline","export":true,"for_":["alignment-baseline","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"baseline","type":"value","url":"https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-baseline"}, "https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-sub": {"displayText":"sub","export":true,"for_":["baseline-shift","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"sub","type":"value","url":"https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-sub"}, "https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-super": {"displayText":"super","export":true,"for_":["baseline-shift","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"super","type":"value","url":"https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-super"}, "https://drafts.csswg.org/css-multicol-2/#multi-column-container": {"displayText":"multi-column container","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-multicol","spec":"css-multicol-2","status":"current","text":"multi-column container","type":"dfn","url":"https://drafts.csswg.org/css-multicol-2/#multi-column-container"}, "https://drafts.csswg.org/css-overflow-3/#scrollport": {"displayText":"scrollport","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scrollport","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#scrollport"}, "https://drafts.csswg.org/css-page-3/#page-progression": {"displayText":"page progression","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"current","text":"page progression","type":"dfn","url":"https://drafts.csswg.org/css-page-3/#page-progression"}, "https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect": {"displayText":"rect()","export":true,"for_":["<basic-shape>"],"level":"1","normative":true,"shortname":"css-shapes","spec":"css-shapes-1","status":"current","text":"rect()","type":"function","url":"https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect"}, "https://drafts.csswg.org/css-sizing-3/#automatic-size": {"displayText":"automatic size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"automatic size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#automatic-size"}, "https://drafts.csswg.org/css-sizing-3/#available": {"displayText":"available inline space","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"available inline space","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#available"}, "https://drafts.csswg.org/css-sizing-3/#definite": {"displayText":"definite","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"definite","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#definite"}, "https://drafts.csswg.org/css-sizing-3/#fallback": {"displayText":"fallback size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"fallback size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#fallback"}, "https://drafts.csswg.org/css-sizing-3/#fit-content-size": {"displayText":"fit-content size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"fit-content size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#fit-content-size"}, "https://drafts.csswg.org/css-sizing-3/#max-content": {"displayText":"max-content size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"max-content size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#max-content"}, "https://drafts.csswg.org/css-sizing-3/#max-content-inline-size": {"displayText":"max-content inline size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"max-content inline size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#max-content-inline-size"}, "https://drafts.csswg.org/css-sizing-3/#max-width": {"displayText":"max size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"max size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#max-width"}, "https://drafts.csswg.org/css-sizing-3/#min-content": {"displayText":"min-content size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min-content size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#min-content"}, "https://drafts.csswg.org/css-sizing-3/#min-content-inline-size": {"displayText":"min-content inline size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min-content inline size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#min-content-inline-size"}, "https://drafts.csswg.org/css-sizing-3/#min-width": {"displayText":"min size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#min-width"}, "https://drafts.csswg.org/css-sizing-3/#preferred-size-properties": {"displayText":"preferred size property","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"preferred size property","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#preferred-size-properties"}, "https://drafts.csswg.org/css-sizing-3/#propdef-height": {"displayText":"height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"height","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "https://drafts.csswg.org/css-sizing-3/#propdef-width": {"displayText":"width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"width","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "https://drafts.csswg.org/css-sizing-3/#stretch-fit-inline-size": {"displayText":"stretch-fit inline size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"stretch-fit inline size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#stretch-fit-inline-size"}, "https://drafts.csswg.org/css-sizing-3/#valdef-width-auto": {"displayText":"auto","export":true,"for_":["width","height","min-width","min-height"],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css-sizing-3/#valdef-width-auto"}, "https://drafts.csswg.org/css-tables-3/#propdef-border-spacing": {"displayText":"border-spacing","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-tables","spec":"css-tables-3","status":"current","text":"border-spacing","type":"property","url":"https://drafts.csswg.org/css-tables-3/#propdef-border-spacing"}, "https://drafts.csswg.org/css-tables-3/#propdef-caption-side": {"displayText":"caption-side","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-tables","spec":"css-tables-3","status":"current","text":"caption-side","type":"property","url":"https://drafts.csswg.org/css-tables-3/#propdef-caption-side"}, "https://drafts.csswg.org/css-text-3/#character": {"displayText":"character","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text","spec":"css-text-3","status":"current","text":"character","type":"dfn","url":"https://drafts.csswg.org/css-text-3/#character"}, "https://drafts.csswg.org/css-text-3/#propdef-letter-spacing": {"displayText":"letter-spacing","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text","spec":"css-text-3","status":"current","text":"letter-spacing","type":"property","url":"https://drafts.csswg.org/css-text-3/#propdef-letter-spacing"}, "https://drafts.csswg.org/css-text-3/#propdef-text-align": {"displayText":"text-align","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text","spec":"css-text-3","status":"current","text":"text-align","type":"property","url":"https://drafts.csswg.org/css-text-3/#propdef-text-align"}, "https://drafts.csswg.org/css-text-4/#propdef-text-indent": {"displayText":"text-indent","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"text-indent","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-text-indent"}, "https://drafts.csswg.org/css-text-4/#propdef-text-transform": {"displayText":"text-transform","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"text-transform","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-text-transform"}, "https://drafts.csswg.org/css-text-4/#typographic-character-unit": {"displayText":"typographic character unit","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"typographic character unit","type":"dfn","url":"https://drafts.csswg.org/css-text-4/#typographic-character-unit"}, "https://drafts.csswg.org/css-text-4/#white-space": {"displayText":"document white space","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"document white space","type":"dfn","url":"https://drafts.csswg.org/css-text-4/#white-space"}, "https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration": {"displayText":"text-decoration","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"current","text":"text-decoration","type":"property","url":"https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration"}, "https://drafts.csswg.org/css-text-decor-4/#propdef-text-shadow": {"displayText":"text-shadow","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-4","status":"current","text":"text-shadow","type":"property","url":"https://drafts.csswg.org/css-text-decor-4/#propdef-text-shadow"}, "https://drafts.csswg.org/css-values-4/#angle-value": {"displayText":"<angle>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<angle>","type":"type","url":"https://drafts.csswg.org/css-values-4/#angle-value"}, "https://drafts.csswg.org/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"|","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "https://drafts.csswg.org/css-values-4/#css-wide-keywords": {"displayText":"CSS-wide keywords","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css-wide keywords","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "https://drafts.csswg.org/css-values-4/#font-relative-length": {"displayText":"font-relative lengths","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"font-relative lengths","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#font-relative-length"}, "https://drafts.csswg.org/css-values-4/#integer-value": {"displayText":"<integer>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<integer>","type":"type","url":"https://drafts.csswg.org/css-values-4/#integer-value"}, "https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-lr": {"displayText":"sideways-lr","export":true,"for_":["writing-mode"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"sideways-lr","type":"value","url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-lr"}, "https://drafts.csswg.org/css2/#propdef-line-height": {"displayText":"line-height","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"line-height","type":"property","url":"https://drafts.csswg.org/css2/#propdef-line-height"}, "https://drafts.csswg.org/css2/#valdef-caption-side-bottom": {"displayText":"bottom","export":true,"for_":["caption-side"],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"bottom","type":"value","url":"https://drafts.csswg.org/css2/#valdef-caption-side-bottom"}, "https://drafts.csswg.org/css2/#valdef-caption-side-top": {"displayText":"top","export":true,"for_":["caption-side"],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"top","type":"value","url":"https://drafts.csswg.org/css2/#valdef-caption-side-top"}, "https://drafts.csswg.org/mediaqueries-5/#paged-media": {"displayText":"paged media","export":true,"for_":[],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"current","text":"paged media","type":"dfn","url":"https://drafts.csswg.org/mediaqueries-5/#paged-media"}, "https://html.spec.whatwg.org/multipage/sections.html#the-body-element": {"displayText":"body","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"body","type":"element","url":"https://html.spec.whatwg.org/multipage/sections.html#the-body-element"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const ref = refsData[url]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script>