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 Inline Layout Module Level 3</title> <meta content="WD" name="w3c-status"> <meta content="Bikeshed version d995a8ff6, updated Fri Dec 6 15:45:57 2024 -0800" name="generator"> <link href="https://www.w3.org/TR/css-inline-3/" rel="canonical"> <meta content="73fdd902561c7d3acf84034e7af073baf6f7c52c" name="revision"> <meta content="dark light" name="color-scheme"> <style media="print" type="text/css"> img#edge { width: 80%; height: 70%;} dt.label { display: run-in; } </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-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> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-WD" rel="stylesheet"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <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 Inline Layout Module Level 3</h1> <a href="https://www.w3.org/standards/types/#WD">W3C Working Draft</a>, <time class="dt-updated" datetime="2024-12-18">18 December 2024</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://www.w3.org/TR/2024/WD-css-inline-3-20241218/">https://www.w3.org/TR/2024/WD-css-inline-3-20241218/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-inline-3/">https://www.w3.org/TR/css-inline-3/</a> <dt>Editor's Draft: <dd><a href="https://drafts.csswg.org/css-inline-3/">https://drafts.csswg.org/css-inline-3/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2020/WD-css-inline-3-20200827/" rel="prev">https://www.w3.org/TR/2020/WD-css-inline-3-20200827/</a> <dd><a href="https://www.w3.org/TR/2020/WD-css-inline-3-20200618/" rel="prev">https://www.w3.org/TR/2020/WD-css-inline-3-20200618/</a> <dt>History: <dd><a class="u-url" href="https://www.w3.org/standards/history/css-inline-3/">https://www.w3.org/standards/history/css-inline-3/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-inline-3">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editor: <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) <dt class="editor">Former Editors: <dd class="editor p-author h-card vcard" data-editor-id="65283"><a class="p-name fn u-email email" href="mailto:dauwhe@gmail.com">Dave Cramer</a> (Hachette Livre) <dd class="editor p-author h-card vcard" data-editor-id="3129"><a class="p-name fn u-email email" href="mailto:szilles@adobe.com">Steve Zilles</a> (Adobe) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-inline-3/Overview.bs">GitHub Editor</a> <dt>Issues list: <dd><a href="https://github.com/w3c/csswg-drafts/issues?q=is%3Aissue+is%3Aopen+label%3Acss-inline-3">CSS3 Line Layout issues in GitHub</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <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> The CSS formatting model provides for a flow of elements and text inside of a container to be wrapped into lines. This module describes box model for this inline layout model and defines the block-axis alignment and sizing of inline-level content, extending the model in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. It also adds a special layout mode for drop-caps. <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. </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/">W3C technical reports index at https://www.w3.org/TR/.</a> This document was published by the <a href="https://www.w3.org/groups/wg/css">CSS Working Group</a> as a Working Draft using the <a href="https://www.w3.org/policies/process/20231103/#recs-and-notes">Recommendation track</a>. Publication as a Working Draft does not imply endorsement by <abbr title="World Wide Web Consortium">W3C</abbr> and its Members. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than 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-inline” in the title, like this: “[css-inline] …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-inline%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>. This document was produced by a group operating under the <a href="https://www.w3.org/policies/patent-policy/20200915/">W3C Patent Policy</a>. W3C maintains a <a href="https://www.w3.org/groups/wg/css/ipr" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/policies/patent-policy/20200915/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/policies/patent-policy/20200915/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </div> <div data-fill-with="at-risk"> The following features are at-risk, and may be dropped during the CR period: <ul> <li>the <a class="property css" data-link-type="property" href="#propdef-initial-letter-wrap" id="ref-for-propdef-initial-letter-wrap">initial-letter-wrap</a> property </ul> “At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first. </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="#intro">1 Introduction</a> <ol class="toc"> <li><a href="#placement">1.1 Module Interactions</a> <li><a href="#values">1.2 Value Definitions</a> </ol> <li> <a href="#model">2 Inline Layout Model</a> <ol class="toc"> <li><a href="#line-boxes">2.1 Layout of Line Boxes</a> <li><a href="#line-layout">2.2 Layout Within Line Boxes</a> <li><a href="#invisible-line-boxes">2.3 Phantom Line Boxes</a> <li><a href="#paint-order">2.4 Painting Order</a> </ol> <li> <a href="#css-metrics">3 Baselines and Alignment Metrics</a> <ol class="toc"> <li><a href="#baseline-intro">3.1 Introduction to Baselines</a> <li> <a href="#baseline-types">3.2 Baselines and Metrics</a> <ol class="toc"> <li><a href="#ascent-descent">3.2.1 Ascent and Descent Metrics</a> <li><a href="#font-line-gap">3.2.2 Line Gap Metrics</a> </ol> <li><a href="#baseline-tables">3.3 Baselines of Glyphs and Boxes</a> </ol> <li> <a href="#alignment">4 Baseline Alignment</a> <ol class="toc"> <li><a href="#dominant-baseline-property">4.1 Dominant Baselines: the dominant-baseline property</a> <li> <a href="#transverse-alignment">4.2 Transverse Box Alignment: the vertical-align property</a> <ol class="toc"> <li><a href="#baseline-source">4.2.1 Alignment Baseline Source: the baseline-source longhand</a> <li><a href="#alignment-baseline-property">4.2.2 Alignment Baseline Type: the alignment-baseline longhand</a> <li><a href="#baseline-shift-property">4.2.3 Post-Alignment Shift: the baseline-shift longhand</a> </ol> </ol> <li> <a href="#line-height">5 Logical Heights and Inter-line Spacing</a> <ol class="toc"> <li><a href="#line-height-property">5.1 Line Spacing: the line-height property</a> <li><a href="#text-edges">5.2 Text Edge Metrics: the line-fit-edge property</a> <li><a href="#inline-height">5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes</a> </ol> <li> <a href="#leading-trim">6 Trimming Leading Over/Under Text</a> <ol class="toc"> <li><a href="#text-box-shorthand">6.1 Shorthand for Text Box Trimming: the text-box property</a> <li><a href="#text-box-trim">6.2 Trimming Over/Under Text: the text-box-trim property</a> <li><a href="#text-box-edge">6.3 Text Trimming Metrics: the text-box-edge property</a> <li><a href="#line-fill">6.4 Inline Box Drawing Height: the inline-sizing property</a> </ol> <li> <a href="#initial-letter-styling">7 Initial Letters</a> <ol class="toc"> <li> <a href="#initial-letter-intro">7.1 An Introduction to Initial Letters</a> <ol class="toc"> <li><a href="#drop-initial">7.1.1 Drop Initial</a> <li><a href="#sunk-initial">7.1.2 Sunken Initial Letters</a> <li><a href="#raise-initial">7.1.3 Raised Initial Letters</a> </ol> <li><a href="#selecting-drop-initials">7.2 Selecting Initial Letters</a> <li> <a href="#sizing-drop-initials">7.3 Creating Initial Letters: the initial-letter property</a> <ol class="toc"> <li><a href="#first-most-inline-level">7.3.1 Applicability</a> </ol> <li> <a href="#aligning-initial-letter">7.4 Alignment of Initial Letters: the initial-letter-align property</a> <ol class="toc"> <li><a href="#initial-letter-align-defaults">7.4.1 UA Default Stylesheet for initial-letter-align</a> </ol> <li> <a href="#initial-letter-layout">7.5 Initial Letter Layout</a> <ol class="toc"> <li><a href="#initial-letter-properties">7.5.1 Properties Applying to Initial Letters</a> <li><a href="#initial-letter-box">7.5.2 Margins, Borders, and Padding</a> <li><a href="#sizing-initial-letter">7.5.3 Font Sizing of Initial Letters</a> <li><a href="#initial-letter-shaping">7.5.4 Shaping and Glyph Selection</a> <li><a href="#initial-letter-box-size">7.5.5 Sizing the Initial Letter Box</a> <li><a href="#initial-letter-content-align">7.5.6 Alignment Within an Initial Letter Box</a> </ol> <li> <a href="#initial-letter-position">7.6 Initial Letter Positioning and Spacing</a> <ol class="toc"> <li><a href="#initial-letter-block-position">7.6.1 Block-axis Positioning</a> <li><a href="#initial-letter-inline-position">7.6.2 Inline Kerning</a> </ol> <li><a href="#initial-letter-wrapping">7.7 Initial Letter Wrapping: the initial-letter-wrap property</a> <li> <a href="#initial-letter-line-layout">7.8 Line Layout</a> <ol class="toc"> <li><a href="#initial-letter-inline-flow">7.8.1 Inline Flow Layout: Alignment, Justification, and White Space</a> <li><a href="#initial-letter-indentation">7.8.2 Edge Effects: Indentation and Hanging Punctuation</a> <li><a href="#initial-letter-ancestors">7.8.3 Ancestor Inlines</a> <li><a href="#initial-letter-multi-line">7.8.4 Multi-line Initial Letters</a> </ol> <li> <a href="#initial-letter-paragraphs">7.9 Clearing Initial Letters</a> <ol class="toc"> <li><a href="#raised-sunken-caps">7.9.1 Raised and sunken caps</a> <li><a href="#short-para-initial-letter">7.9.2 Short paragraphs with initial letters</a> <li><a href="#initial-letter-floats">7.9.3 Interaction with floats</a> <li><a href="#initial-letter-breaking">7.9.4 Interaction with Fragmentation (Pagination)</a> </ol> </ol> <li> <a href="#baseline-synthesis"> Appendix A: Synthesizing Alignment Metrics</a> <ol class="toc"> <li><a href="#baseline-synthesis-em"> A.1: Calculating Em-over and Em-under</a> <li><a href="#baseline-synthesis-fonts"> A.2: Synthesizing Baselines (and Other Font Metrics) for Text</a> <li><a href="#baseline-synthesis-box"> A.3: Synthesizing Baselines for Atomic Inlines</a> </ol> <li><a href="#changes"> Changes</a> <li><a href="#ack"> Acknowledgments</a> <li><a href="#privacy"> Privacy Considerations</a> <li><a href="#security"> Security Considerations</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> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> This module defines <a data-link-type="dfn" href="#inline-layout" id="ref-for-inline-layout">inline layout</a>, the CSS model for laying out a mixed stream of text and <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level">inline-level</a> boxes, and defines controls for the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis">block-axis</a> alignment and sizing of this content within each line. It also adds a <a href="#initial-letter-styling">special layout mode for drop caps and similar initial letter styling</a>. Note: Line-breaking, justification, and other aspects of inline-axis positioning of <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level①">inline-level</a> content are handled in the <a href="https://www.w3.org/TR/css-text/">CSS Text Module</a>. <a class="self-link" href="#issue-4c501384"></a> Many aspects of layout here depend on font metrics. While the relevant metrics exist in OpenType for Latin/Cyrillic/Greek and for <abbr title="Chinese/Japanese/Korean">CJK</abbr>, they are missing for many other writing systems. For example, the visual top metric for Hebrew has no metric in the OpenType tables. For this module to work well for the world, we need fonts to provide the relevant metrics for all writing systems, and that means both that OpenType needs to allow such metrics and font designers need to provide accurate numbers. See <a href="https://github.com/w3c/csswg-drafts/issues/5244">issue</a> and <a href="https://lists.w3.org/Archives/Public/www-archive/2020Feb/att-0005/CSS-SC29-20200113.pdf">liaison statement</a>. <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 CSS inline layout model and 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> section 10.8. <h3 class="heading settled" data-level="1.2" id="values">1.2. Value Definitions<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://www.w3.org/TR/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. <h2 class="heading settled" data-level="2" id="model">2. Inline Layout Model<a class="self-link" href="#model"></a></h2> In <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="inline-layout">inline layout</dfn>, a mixed, recursive stream of text and <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box">inline-level boxes</a> forming an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="inline-formatting-context">inline formatting context</dfn> within a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container">block container</a> are laid out by <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-3/#fragment" id="ref-for-fragment">fragmenting</a> them into a stack of <a data-link-type="dfn" href="#line-box" id="ref-for-line-box">line boxes</a>. Within each line box, inline-level boxes are <a href="#alignment">aligned to each other</a> along the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis①">block axis</a>, typically by the <a data-link-type="dfn" href="#baseline" id="ref-for-baseline">baselines</a> of their text. Any <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container①">block container</a> that directly contains <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level②">inline-level</a> content—such as <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box">inline boxes</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#atomic-inline" id="ref-for-atomic-inline">atomic inlines</a>, and <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#css-text-sequence" id="ref-for-css-text-sequence">text sequences</a>—establishes an <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context">inline formatting context</a> to lay out its contents using <a data-link-type="dfn" href="#inline-layout" id="ref-for-inline-layout①">inline layout</a>. The block container’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#content-edge" id="ref-for-content-edge">content edges</a> form the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#containing-block" id="ref-for-containing-block">containing block</a> for each of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box②">inline-level boxes</a> participating in its inline formatting context. The <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container③">block container</a> also generates a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="root-inline-box">root inline box</dfn>, which is an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#anonymous" id="ref-for-anonymous">anonymous</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box①">inline box</a> that holds all of its <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level③">inline-level</a> contents. (Thus, all text in an <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context②">inline formatting context</a> is directly contained by an inline box, whether the <a data-link-type="dfn" href="#root-inline-box" id="ref-for-root-inline-box">root inline box</a> or one of its descendants.) The root inline box inherits from its parent block container, but is otherwise unstyleable. In an <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context③">inline formatting context</a>, content is laid out along the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis">inline axis</a>, ordered according to the <a href="https://www.w3.org/TR/css-writing-modes-3/#text-direction">Unicode bidirectional algorithm and its controls</a> <a data-link-type="biblio" href="#biblio-css-writing-modes-3" title="CSS Writing Modes Level 3">[CSS-WRITING-MODES-3]</a> and distributed according to the typesetting controls in <a data-link-type="biblio" href="#biblio-css-text-3" title="CSS Text Module Level 3">[CSS-TEXT-3]</a>. Inline-axis <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin" id="ref-for-margin">margins</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border">borders</a>, and <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding" id="ref-for-padding">padding</a> are respected between <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box③">inline-level boxes</a> (and their margins do not <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>). The resulting rectangular area that contains the boxes that form a single line of <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level④">inline-level content</a> is called a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-box">line box</dfn>. Note: <a data-link-type="dfn" href="#line-box" id="ref-for-line-box②">Line boxes</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box③">inline boxes</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box④">inline-level boxes</a> are each different things! See <a data-link-type="biblio" href="#biblio-css-display-3" title="CSS Display Module Level 3">[CSS-DISPLAY-3]</a> for an in-depth discussion of box types and related terminology. <h3 class="heading settled" data-level="2.1" id="line-boxes">2.1. Layout of Line Boxes<a class="self-link" href="#line-boxes"></a></h3> <a data-link-type="dfn" href="#line-box" id="ref-for-line-box③">Line boxes</a> are created as needed to hold <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level⑤">inline-level</a> content within an <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context④">inline formatting context</a>. When an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box④">inline box</a> exceeds the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-width" id="ref-for-logical-width">logical width</a> of a line box, or contains a <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-3/#forced-line-break" id="ref-for-forced-line-break">forced line break</a>, it is split (see <a href="https://www.w3.org/TR/css-text-3/#line-breaking"><cite>CSS Text 3</cite> § 5 Line Breaking and Word Boundaries</a>) into several <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-3/#fragment" id="ref-for-fragment①">fragments</a> <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a>, which are partitioned across multiple line boxes. Like <a data-link-type="dfn" href="https://www.w3.org/TR/css-multicol-1/#column-box" id="ref-for-column-box">column boxes</a> in <a data-link-type="dfn" href="https://www.w3.org/TR/css-multicol-1/#multi-column-layout" id="ref-for-multi-column-layout">multi-column layout</a> <a data-link-type="biblio" href="#biblio-css-multicol-1" title="CSS Multi-column Layout Module Level 1">[CSS-MULTICOL-1]</a>, line boxes are <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container">fragmentation containers</a> generated by their <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#formatting-context" id="ref-for-formatting-context">formatting context</a>, and are not part of the CSS <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#box-tree" id="ref-for-box-tree">box tree</a>. Note: <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box⑤">Inline boxes</a> can also be <a href="https://www.w3.org/TR/css-writing-modes-3/#bidi-box-model">split into several fragments within the same line box due to bidirectional text processing</a>. See <a data-link-type="biblio" href="#biblio-css-writing-modes-3" title="CSS Writing Modes Level 3">[CSS-WRITING-MODES-3]</a>. <a data-link-type="dfn" href="#line-box" id="ref-for-line-box⑦">Line boxes</a> are stacked as the direct contents of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container⑤">block container box</a> in its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction">block flow direction</a> and aligned within this container as specified by <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content">align-content</a> <a data-link-type="biblio" href="#biblio-css-align-3" title="CSS Box Alignment Module Level 3">[CSS-ALIGN-3]</a>. Thus, an <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context⑤">inline formatting context</a> consists of a stack of line boxes. Line boxes are stacked with no separation (except as specified elsewhere, e.g. for <a data-link-type="dfn" href="https://www.w3.org/TR/css-page-floats-3/#float" id="ref-for-float">float</a> <a href="https://www.w3.org/TR/CSS2/visuren.html#clearance">clearance</a>) and they never overlap. In general, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-left" id="ref-for-line-left">line-left</a> edge of a <a data-link-type="dfn" href="#line-box" id="ref-for-line-box①⓪">line box</a> touches the line-left edge of its <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#containing-block" id="ref-for-containing-block①">containing block</a> and the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-right" id="ref-for-line-right">line-right</a> edge touches the line-right edge of its containing block, and thus the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-width" id="ref-for-logical-width①">logical width</a> of a line box is equal to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#inner-size" id="ref-for-inner-size">inner</a> logical width of its containing block (i.e. the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container⑥">block container</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#x10" id="ref-for-x10">content box</a>). However, floating boxes or <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter">initial letter boxes</a> can come between the containing block edge and the line box edge, reducing the space available to, and thus the logical width of, any such impacted line boxes. (See <a href="https://www.w3.org/TR/CSS21//visuren#inline-formatting">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification § visuren#inline-formatting</a>/<a href="https://www.w3.org/TR/CSS21//visuren#floats">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification § visuren#floats</a> and <a href="#initial-letter-styling">§ 7 Initial Letters</a>.) The <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-height" id="ref-for-logical-height">logical height</a> of a <a data-link-type="dfn" href="#line-box" id="ref-for-line-box①③">line box</a> is fitted to its contents once they have been <a href="#alignment">block-axis aligned</a>. This fit is controlled by <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height">line-height</a> and <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge">line-fit-edge</a>. The first/last line boxes in a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container⑦">block container</a> may additionally be trimmed by <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim">text-box-trim</a>. <figure> <img alt="diagram showing inline boxes split across line boxes as described above" height="258" src="images/box-model.png" width="500"> <figcaption>Inline Layout Box Model</figcaption> </figure> <h3 class="heading settled" data-level="2.2" id="line-layout">2.2. Layout Within Line Boxes<a class="self-link" href="#line-layout"></a></h3> As described <a href="#model">above</a>, user agents flow <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box⑤">inline-level boxes</a> into a stack of <a data-link-type="dfn" href="#line-box" id="ref-for-line-box①④">line boxes</a>. Layout within each line box is performed, sizing and positioning each <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#box-fragment" id="ref-for-box-fragment">box fragment</a> and line box independently, as follows: <ol> <li data-md> Baseline Alignment: All <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#in-flow" id="ref-for-in-flow">in-flow</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box⑥">inline-level boxes</a> in the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box①⑦">line box</a> are aligned to each other in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis②">block axis</a> according to <a class="property css" data-link-type="property" href="#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline">dominant-baseline</a> and <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align">vertical-align</a>. This is referred to as <a href="#alignment">baseline alignment</a>. Those with <a data-link-type="dfn" href="#line-relative-shift-values" id="ref-for-line-relative-shift-values">line-relative values</a> for <a class="property css" data-link-type="property" href="#propdef-baseline-shift" id="ref-for-propdef-baseline-shift">baseline-shift</a> are assumed to be aligned so as to minimize the line box height. <li data-md> Content Size Contribution Calculation: The <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds">layout bounds</a> (i.e. the size contributions) of each <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box⑦">inline-level box</a> in the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box①⑧">line box</a> are calculated: <ul class="switch"> <li> For <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#atomic-inline" id="ref-for-atomic-inline①">atomic inlines</a> such as <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#replaced-element" id="ref-for-replaced-element">replaced elements</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-block" id="ref-for-inline-block">inline blocks</a>: this is their <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-box" id="ref-for-margin-box">margin box</a>. <li> For the <a data-link-type="dfn" href="#root-inline-box" id="ref-for-root-inline-box②">root inline box</a>, and for <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box⑥">inline boxes</a> with <a class="css" data-link-type="propdesc" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge①">line-fit-edge: leading</a>: this derived from their used <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height①">line-height</a>, ignoring any <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin" id="ref-for-margin①">margin</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border①">border</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding" id="ref-for-padding①">padding</a>; see <a href="#inline-height">§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes</a>. <li> For other <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box⑦">inline boxes</a>: this is derived from their <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge②">line-fit-edge</a> metrics, and includes any <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin" id="ref-for-margin②">margin</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border②">border</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding" id="ref-for-padding②">padding</a>; see <a href="#inline-height">§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes</a>. </ul> <li data-md> Line Box Sizing: The <a data-link-type="dfn" href="#line-box" id="ref-for-line-box①⑨">line box</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-height" id="ref-for-logical-height①">logical height</a> is sized to exactly include the aligned <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds①">layout bounds</a> of all its <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box⑧">inline-level boxes</a>. <li data-md> Content Positioning: The <a data-link-type="dfn" href="#root-inline-box" id="ref-for-root-inline-box③">root inline box</a>’s <a data-link-type="dfn" href="#aligned-subtree" id="ref-for-aligned-subtree">aligned subtree</a> and boxes <a data-link-type="dfn" href="#line-relative-shift-values" id="ref-for-line-relative-shift-values①">line-relative values</a> for <a class="property css" data-link-type="property" href="#propdef-baseline-shift" id="ref-for-propdef-baseline-shift①">baseline-shift</a> are positioned within the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box②⓪">line box</a>. <a class="self-link" href="#issue-e2d22611"></a> Define what to do for top/bottom/center aligned boxes that are taller than the rest of the content. </ol> Note: Empty <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box⑧">inline boxes</a> still have <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin" id="ref-for-margin③">margins</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding" id="ref-for-padding③">padding</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border③">borders</a>, and a <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height②">line-height</a>, and thus influence these calculations just like boxes with content. <h3 class="heading settled" data-level="2.3" id="invisible-line-boxes">2.3. Phantom Line Boxes<a class="self-link" href="#invisible-line-boxes"></a></h3> <a data-link-type="dfn" href="#line-box" id="ref-for-line-box②①">Line boxes</a> that contain no text, no <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-4/#preserved-white-space" id="ref-for-preserved-white-space">preserved white space</a>, no <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box⑨">inline boxes</a> with non-zero inline-axis <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin" id="ref-for-margin④">margins</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding" id="ref-for-padding④">padding</a>, or <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border④">borders</a>, and no other <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#in-flow" id="ref-for-in-flow①">in-flow</a> content (such as <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#atomic-inline" id="ref-for-atomic-inline②">atomic inlines</a> or <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-annotation-box" id="ref-for-ruby-annotation-box">ruby annotations</a>), and do not end with a <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-4/#forced-line-break" id="ref-for-forced-line-break①">forced line break</a> are <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="phantom line box" data-noexport id="phantom-line-box">phantom line boxes</dfn>. Such boxes must be treated as zero-<a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-height" id="ref-for-logical-height②">height</a> line boxes for the purposes of determining the positions of any descendant content (such as <a data-link-type="dfn" href="https://www.w3.org/TR/css-position-3/#absolute-position" id="ref-for-absolute-position">absolutely positioned boxes</a>), and both the line box and its in-flow content must be treated as not existing for any other layout or rendering purpose. <details class="note"> <summary>What’s invisible?</summary> Such <a data-link-type="dfn" href="#phantom-line-box" id="ref-for-phantom-line-box">phantom line boxes</a>, which can still contain unstyled empty <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box①⓪">inline boxes</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#out-of-flow" id="ref-for-out-of-flow">out-of-flow</a> boxes, and/or collapsed <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-4/#white-space" id="ref-for-white-space">document white space</a>, are ignored, for example, for: <ul> <li data-md> <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">margin collapsing</a> <li data-md> finding the <a data-link-type="dfn" href="https://www.w3.org/TR/css-pseudo-4/#first-formatted-line" id="ref-for-first-formatted-line">first formatted line</a> <li data-md> applying <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim①">text-box-trim</a> <li data-md> <a href="https://www.w3.org/TR/css-break-4/#break-propagation">fragmentation break propagation</a> <li data-md> etc. </ul> </details> <a class="self-link" href="#issue-8b05a2ec"></a> Firefox allows the inline boxes within a <a data-link-type="dfn" href="#phantom-line-box" id="ref-for-phantom-line-box①">phantom line box</a> to accept <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/ui.html#propdef-outline" id="ref-for-propdef-outline">outline</a>,which allows it to make focus rings visible. As in other browsers, all other properties that could make the element visible (e.g. <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow" id="ref-for-propdef-box-shadow">box-shadow</a>) seem to be ignored. <h3 class="heading settled" data-level="2.4" id="paint-order">2.4. Painting Order<a class="self-link" href="#paint-order"></a></h3> Except as specified for <a data-link-type="dfn" href="https://www.w3.org/TR/css-position-3/#positioned-box" id="ref-for-positioned-box">positioned boxes</a> (see <a data-link-type="biblio" href="#biblio-css-position-3" title="CSS Positioned Layout Module Level 3">[CSS-POSITION-3]</a>) <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box⑨">inline-level boxes</a> are painted in <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#document-order" id="ref-for-document-order">document order</a>; the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-z-index" id="ref-for-propdef-z-index">z-index</a> property does not generally apply. <h2 class="heading settled" data-level="3" id="css-metrics">3. Baselines and Alignment Metrics<a class="self-link" href="#css-metrics"></a></h2> <h3 class="heading settled" data-level="3.1" id="baseline-intro">3.1. Introduction to Baselines<a class="self-link" href="#baseline-intro"></a></h3> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="baseline">baseline</dfn> is a line along the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis②">inline axis</a> of a line box along which individual glyphs of text are aligned. <a data-link-type="dfn" href="#baseline" id="ref-for-baseline①">Baselines</a> 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. <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"> <figcaption> Alphabetic text in two font sizes with the baseline and em-boxes </figcaption> </figure> Different writing systems prefer different <a data-link-type="dfn" href="#baseline" id="ref-for-baseline②">baselines</a>. <figure> <img alt="Latin prefers the alphabetic baseline, on top of which most letters rest, though some letters 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 or through their centers." height="110" src="images/script-preferred-baselines.gif" width="458"> <figcaption> Preferred baselines in various writing systems </figcaption> </figure> 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 <a data-link-type="dfn" href="#baseline" id="ref-for-baseline③">baselines</a> within the font’s design coordinate space. (The design coordinate space is scaled with the font size.) <figure> <img alt height="102" src="images/baselines.gif" width="587"> <figcaption> 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. </figcaption> </figure> The <a data-link-type="dfn" href="#baseline-table" id="ref-for-baseline-table">baseline table</a> is a property of the font, and the positions of the various baselines apply to all glyphs in the font. Different <a data-link-type="dfn" href="#baseline-table" id="ref-for-baseline-table①">baseline tables</a> can be provided for alignment in horizontal and vertical text. UAs should use the vertical tables in vertical <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode">typographic modes</a> and the horizontal tables otherwise. Note: Fonts can have more than one <a data-link-type="dfn" href="#baseline-table" id="ref-for-baseline-table②">baseline table</a> in each axis; the UA is responsible for choosing the appropriate table in consideration of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-language-override" id="ref-for-propdef-font-language-override">font-language-override</a> and the <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-4/#content-language" id="ref-for-content-language">content language</a>. <h3 class="heading settled" data-level="3.2" id="baseline-types">3.2. Baselines and Metrics<a class="self-link" href="#baseline-types"></a></h3> CSS uses the following text-based metrics as <a data-link-type="dfn" href="#baseline" id="ref-for-baseline④">baselines</a> for <a data-link-type="dfn" href="#inline-layout" id="ref-for-inline-layout②">inline layout</a> functions such as alignment, box sizing, and initial letter layout. <a class="self-link" href="#issue-3bc5ecf6"></a> The CSSWG would like to know which baseline values are necessary for each property that uses them (<a class="property css" data-link-type="property" href="#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline①">dominant-baseline</a>, <a class="property css" data-link-type="property" href="#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline">alignment-baseline</a>, <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge">text-box-edge</a>, <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge③">line-fit-edge</a>, <a class="property css" data-link-type="property" href="#propdef-initial-letter-align" id="ref-for-propdef-initial-letter-align">initial-letter-align</a>): if any can be dropped, or any need to be added. See <a href="https://github.com/w3c/csswg-drafts/issues/859">Issue 859</a>. <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="alphabetic" data-lt="alphabetic baseline" id="alphabetic-baseline">alphabetic</dfn> <dd> Used in writing Latin, Cyrillic, Greek, and many other scripts, corresponds to the bottom of most, but not all, their characters, (such as “m”, “Ш”, “Δ”). Often represented as zero in font design coordinate systems; assigned to <code>romn</code> in OpenType and to <code>bsln</code> value zero in TrueType AAT. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="cap-height" data-lt="cap-height baseline" id="cap-height-baseline">cap-height</dfn> <dd> Corresponds to the top of capital letters (such as “T”, “Б”, “Σ”) in Latin, Cyrillic, Greek, etc. Calculated using <code>sCapHeight</code> in OpenType. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="x-height" data-lt="x-height baseline" id="x-height-baseline">x-height</dfn> <dd> Corresponds to the top of short lowercase letters (such as “m”, “л”, “α”) in Latin, Cyrillic, Greek, etc. Calculated using <code>sxHeight</code> in OpenType. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="x-middle" data-lt="x-middle baseline" id="x-middle-baseline">x-middle</dfn> <dd> Corresponds to halfway between the <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline">alphabetic</a> and <a data-link-type="dfn" href="#x-height-baseline" id="ref-for-x-height-baseline">x-height</a> baselines. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="ideographic-over" data-lt="ideographic-over baseline" id="ideographic-over-baseline">ideographic-over</dfn> <dd> Corresponds to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-over" id="ref-for-line-over">line-over</a> design edge of CJK (Han/Hangul/Kana) text. Assigned to <code>idtp</code> in OpenType. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="ideographic-under" data-lt="ideographic-under baseline" id="ideographic-under-baseline">ideographic-under</dfn> <dd> Corresponds to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-under" id="ref-for-line-under">line-under</a> design edge of CJK (Han/Hangul/Kana) text. Assigned to <code>ideo</code> in OpenType. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="central" data-lt="central baseline" id="central-baseline">central</dfn> <dd> Corresponds to the ideographic central baseline, halfway between the <a data-link-type="dfn" href="#ideographic-under-baseline" id="ref-for-ideographic-under-baseline">ideographic-under</a> and <a data-link-type="dfn" href="#ideographic-over-baseline" id="ref-for-ideographic-over-baseline">ideographic-over</a> baselines. Assigned to <code>bsln</code> value 1 in TrueType AAT. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="ideographic-ink-over" data-lt="ideographic-ink-over baseline" id="ideographic-ink-over-baseline">ideographic-ink-over</dfn> <dd> Corresponds to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-over" id="ref-for-line-over①">line-over</a> ink edge of CJK (Han/Hangul/Kana) text. Assigned to <code>icft</code> in OpenType. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="ideographic-ink-under" data-lt="ideographic-ink-under baseline" id="ideographic-ink-under-baseline">ideographic-ink-under</dfn> <dd> Corresponds to the line-under ink edge of CJK (Han/Hangul/Kana) text. Assigned <code>icfb</code> in OpenType. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="hanging" data-lt="hanging baseline" id="hanging-baseline">hanging</dfn> <dd> Corresponds to hanging baseline from which characters in Tibetan and similar unicameral scripts with a strong but not absolute top edge seem to “hang”. Assigned to <code>hang</code> in OpenType and to <code>bsln</code> value 3 in TrueType AAT. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="math" data-lt="math baseline" id="math-baseline">math</dfn> <dd> Corresponds to center baseline around which mathematical characters are designed. Assigned to <code>math</code> in OpenType and <code>bsln</code> value 4 in TrueType AAT. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="text-over" data-lt="text-over baseline" id="text-over-baseline">text-over</dfn> <dd> Corresponds to the metric used as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-over" id="ref-for-line-over②">line-over</a> edge of an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box①①">inline</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#x10" id="ref-for-x10①">content box</a> per <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="text-under" data-lt="text-under baseline" id="text-under-baseline">text-under</dfn> <dd> Corresponds to the metric used as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-under" id="ref-for-line-under①">line-under</a> edge of an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box①②">inline</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#x10" id="ref-for-x10②">content box</a> per <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="em-over" data-lt="em-over baseline" id="em-over-baseline">em-over</dfn> <dd> Corresponds to a conceptual <a data-link-type="dfn" href="#ascent-metric" id="ref-for-ascent-metric">ascent</a> normalized to ensure 1em between <a data-link-type="dfn" href="#em-over-baseline" id="ref-for-em-over-baseline">em-over</a> and <a data-link-type="dfn" href="#em-under-baseline" id="ref-for-em-under-baseline">em-under</a>. See <a href="#baseline-synthesis-em">A.1: Calculating Em-over and Em-under</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="em-under" data-lt="em-under baseline" id="em-under-baseline">em-under</dfn> <dd> Corresponds to a conceptual <a data-link-type="dfn" href="#descent-metric" id="ref-for-descent-metric">descent</a> normalized to ensure 1em between <a data-link-type="dfn" href="#em-over-baseline" id="ref-for-em-over-baseline①">em-over</a> and <a data-link-type="dfn" href="#em-under-baseline" id="ref-for-em-under-baseline①">em-under</a>. See <a href="#baseline-synthesis-em">A.1: Calculating Em-over and Em-under</a>. </dl> Note: These metrics are optical design metrics, and therefore do not necessarily correspond exactly to actual glyph outlines. In general, these metrics are taken from the appropriate font, but if they are missing or need to be derived from a box rather than text, they must be synthesized, see <a href="#baseline-tables">§ 3.3 Baselines of Glyphs and Boxes</a> and <a href="#baseline-synthesis">Appendix A: Synthesizing Alignment Metrics</a>. <h4 class="heading settled" data-level="3.2.1" id="ascent-descent">3.2.1. Ascent and Descent Metrics<a class="self-link" href="#ascent-descent"></a></h4> CSS assumes that every font has font metrics that specify a characteristic height above the baseline—called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="ascent" data-noexport id="ascent-metric">ascent metric</dfn>—and a characteristic depth below it—called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="descent" data-noexport id="descent-metric">descent metric</dfn>—which CSS uses for laying out text and boxes in an <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context⑥">inline formatting context</a>. Note that these are metrics of the font as a whole and need not correspond to the ascender and descender of any individual glyph. Note: It is recommended that implementations that use OpenType or TrueType fonts use the metrics <code>sTypoAscender</code> and <code>sTypoDescender</code> from the font’s OS/2 table (after scaling to the current element’s font size) to find the <a data-link-type="dfn" href="#ascent-metric" id="ref-for-ascent-metric①">ascent metric</a> and <a data-link-type="dfn" href="#descent-metric" id="ref-for-descent-metric①">descent metric</a> for CSS layout. In the absence of these metrics, the "Ascent" and "Descent" metrics from the HHEA table should be used. <h4 class="heading settled" data-level="3.2.2" id="font-line-gap">3.2.2. Line Gap Metrics<a class="self-link" href="#font-line-gap"></a></h4> Font formats can allow for a font-recommended “line gap” or “external leading” metric. This metric is referred to as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="line-gap-metric">line gap metric</dfn>, and may be incorporated into the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box②④">line box</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-height" id="ref-for-logical-height③">logical height</a> calculations when <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height③">line-height</a> is <a class="css" data-link-type="maybe" href="#valdef-line-height-normal" id="ref-for-valdef-line-height-normal">normal</a> as described in <a href="#inline-height">§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes</a>. Note: In OpenType, the <a data-link-type="dfn" href="#line-gap-metric" id="ref-for-line-gap-metric">line gap metric</a> can be found as <code>sTypoLineGap</code> or <code>hhea.lineGap</code>. UAs must floor the <a data-link-type="dfn" href="#line-gap-metric" id="ref-for-line-gap-metric①">line gap metric</a> at zero. <h3 class="heading settled" data-level="3.3" id="baseline-tables">3.3. Baselines of Glyphs and Boxes<a class="self-link" href="#baseline-tables"></a></h3> Each font, glyph, and <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box①⓪">inline-level box</a> is assumed to have a <a data-link-type="dfn" href="#baseline" id="ref-for-baseline⑤">baseline</a> coordinate for each baseline type indicating that baseline’s position on its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis③">block axis</a>. The set of such baselines is called its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="baseline-set">baseline set</dfn>. The baseline from this set that is used to align the box or glyph within its <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#shared-alignment-context" id="ref-for-shared-alignment-context">alignment context</a> is called its <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline">alignment baseline</a>; the baseline used to align its content within itself is called its <a data-link-type="dfn" href="#dominant-baseline" id="ref-for-dominant-baseline">dominant baseline</a>. For an individual glyph, the <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set">baseline set</a> derives from the font’s <a data-link-type="dfn" href="#baseline-table" id="ref-for-baseline-table③">baseline table</a>. For an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box①③">inline box</a>, it derives from its <a data-link-type="dfn" href="https://www.w3.org/TR/css-fonts-4/#first-available-font" id="ref-for-first-available-font">first available font</a> regardless of whether the box actually contains any glyphs from that font. If the requisite metrics are missing from a font, the UA must synthesize them, see <a href="#baseline-synthesis-fonts">A.2: Synthesizing Baselines (and Other Font Metrics) for Text</a>. For other <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#box" id="ref-for-box">boxes</a>, its <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set①">baseline set</a> is nominally derived from its contents in accordance with <a class="property css" data-link-type="property" href="#propdef-baseline-source" id="ref-for-propdef-baseline-source">baseline-source</a> and the rules of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#formatting-context" id="ref-for-formatting-context①">formatting context</a> in which it participates. For an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#atomic-inline" id="ref-for-atomic-inline③">atomic inline box</a> with no baseline set in the <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context⑦">inline formatting context</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis③">inline axis</a> its <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline①">alignment baselines</a> are <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#synthesize-baseline" id="ref-for-synthesize-baseline">synthesized</a> from its <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-box" id="ref-for-margin-box①">margin box</a>, see <a href="#baseline-synthesis-box">A.3: Synthesizing Baselines for Atomic Inlines</a>. <h2 class="heading settled" data-level="4" id="alignment">4. Baseline Alignment<a class="self-link" href="#alignment"></a></h2> While most CSS <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#formatting-context" id="ref-for-formatting-context②">formatting contexts</a> position content by aligning boxes with respect to their container’s edges, <a data-link-type="dfn" href="#inline-layout" id="ref-for-inline-layout③">inline layout</a> positions boxes in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis④">block axis</a> by aligning them with respect to each other using their <a data-link-type="dfn" href="#baseline" id="ref-for-baseline①①">baselines</a>. More specifically, (unless using a <a data-link-type="dfn" href="#line-relative-shift-values" id="ref-for-line-relative-shift-values②">line-relative shift value</a>) each glyph or <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box①①">inline-level box</a> is aligned in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis⑤">block axis</a> by positioning its <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline②">alignment baseline</a> to match the corresponding <a data-link-type="dfn" href="#baseline" id="ref-for-baseline①②">baseline</a> of its parent (which is its <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#shared-alignment-context" id="ref-for-shared-alignment-context①">alignment context</a>), and then is potentially shifted from that position according to its <a data-link-type="dfn" href="#post-alignment-shift" id="ref-for-post-alignment-shift">post-alignment shift</a>. Note: Baseline alignment always matches corresponding baselines: alphabetic to alphabetic, hanging to hanging, mathematical to mathematical, etc. When aligning a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#box" id="ref-for-box①">box</a>, the <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline③">alignment baseline</a> is chosen according to its <a class="property css" data-link-type="property" href="#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline①">alignment-baseline</a> and <a class="property css" data-link-type="property" href="#propdef-baseline-source" id="ref-for-propdef-baseline-source①">baseline-source</a> values (see shorthand <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align①">vertical-align</a>), and defaults to matching the parent’s <a class="property css" data-link-type="property" href="#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline②">dominant-baseline</a>. For a glyph, the alignment baseline is always determined by the parent’s <a data-link-type="dfn" href="#dominant-baseline" id="ref-for-dominant-baseline①">dominant baseline</a>. <div class="example" id="example-713d3335"> <a class="self-link" href="#example-713d3335"></a> Given following sample markup: <pre class="highlight"><c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>"outer"</c-><c- p>></c->Ap <c- p><</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>"inner"</c-><c- p>></c->ਜੀ<c- p></</c-><c- f>span</c-><c- p>></</c-><c- f>span</c-><c- p>></</c-><c- f>p</c-><c- p>></c-></pre> And the following style rule: <pre class="highlight">.inner <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>75</c-><c- k>%</c-><c- p>;</c-> <c- p>}</c-></pre> The <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set③">baseline sets</a> of the parent (<code>.outer</code>) and the child (<code>.inner</code>) will not match up due to the font size difference. The child box is aligned to its parent by matching up their <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline①">alphabetic baselines</a>. <figure> <img alt="In this example, the distance between each baseline in the baseline set is compacted 75% in the span with a 75% font size. Their alphabetic baselines, however, line up." height="98" src="images/baseline-align-sizes.gif" width="233"> </figure> The <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline②">alphabetic baseline</a> is used here because by default a box’s <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline⑤">alignment baseline</a> matches the <a data-link-type="dfn" href="#dominant-baseline" id="ref-for-dominant-baseline②">dominant baseline</a> of its parent, and in horizontal <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode①">typographic mode</a>, the dominant baseline itself defaults to the alphabetic baseline. If we add <a class="css" data-link-type="propdesc" href="#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; but in addition to the baseline alignment, the child is shifted to the superscript position. <figure> <img alt="In this example, the resulting alignment is equivalent to shifting the parent baseline table upwards by its 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"> </figure> </div> <h3 class="heading settled" data-level="4.1" id="dominant-baseline-property">4.1. Dominant Baselines: the <a class="property css" data-link-type="property" href="#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline③">dominant-baseline</a> property<a class="self-link" href="#dominant-baseline-property"></a></h3> <table class="def propdef" data-link-for-hint="dominant-baseline"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-dominant-baseline">dominant-baseline</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://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one">|</a> text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>block containers, inline boxes, table rows, grid containers, flex containers, and SVG <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/text.html#TermTextContentElement" id="ref-for-TermTextContentElement">text content 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 keyword <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>discrete </table> This property specifies the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="dominant-baseline">dominant baseline</dfn>, which is the default baseline type used to align content within the box. For <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box①④">inline boxes</a>, the <a data-link-type="dfn" href="#dominant-baseline" id="ref-for-dominant-baseline④">dominant baseline</a> is used to align the box’s text (and, unless otherwise specified by <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align③">vertical-align</a>, any <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level⑥">inline-level</a> child boxes) by aligning each glyph/box’s corresponding baseline to the box’s own dominant baseline. For other boxes, it indicates the default <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline⑥">alignment baseline</a> of any boxes participating in <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#baseline-alignment" id="ref-for-baseline-alignment">baseline alignment</a> in the box’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#shared-alignment-context" id="ref-for-shared-alignment-context②">alignment context</a>; see (<a class="css" data-link-type="propdesc" href="#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline②">alignment-baseline: baseline</a> and <a data-link-type="biblio" href="#biblio-css-align-3" title="CSS Box Alignment Module Level 3">[CSS-ALIGN-3]</a>). Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="dominant-baseline" data-dfn-type="value" data-export id="valdef-dominant-baseline-auto">auto</dfn> <dd> Equivalent to <a class="css" data-link-type="maybe" href="#valdef-dominant-baseline-alphabetic" id="ref-for-valdef-dominant-baseline-alphabetic">alphabetic</a> in <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#horizontal-writing-mode" id="ref-for-horizontal-writing-mode">horizontal writing modes</a> and in <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode">vertical writing modes</a> when <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation">text-orientation</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-sideways" id="ref-for-valdef-text-orientation-sideways">sideways</a>. Equivalent to <a class="css" data-link-type="maybe" href="#valdef-dominant-baseline-central" id="ref-for-valdef-dominant-baseline-central">central</a> in vertical writing modes when text-orientation is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed">mixed</a> or <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright">upright</a>. However, in SVG text, the origin point of glyphs (used for coordinate-based glyph positioning) is always handled as for <a class="css" data-link-type="maybe" href="#valdef-dominant-baseline-central" id="ref-for-valdef-dominant-baseline-central①">central</a> in <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode②">vertical writing modes</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="dominant-baseline" data-dfn-type="value" data-export id="valdef-dominant-baseline-text-bottom">text-bottom</dfn> <dd> Use the <a data-link-type="dfn" href="#text-under-baseline" id="ref-for-text-under-baseline">text-under baselines</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="dominant-baseline" data-dfn-type="value" data-export id="valdef-dominant-baseline-alphabetic">alphabetic</dfn> <dd> Use the <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline④">alphabetic baselines</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="dominant-baseline" data-dfn-type="value" data-export id="valdef-dominant-baseline-ideographic">ideographic</dfn> <dd> Use the <a data-link-type="dfn" href="#ideographic-under-baseline" id="ref-for-ideographic-under-baseline①">ideographic-under baselines</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="dominant-baseline" data-dfn-type="value" data-export id="valdef-dominant-baseline-middle">middle</dfn> <dd> Use the <a data-link-type="dfn" href="#x-middle-baseline" id="ref-for-x-middle-baseline">x-middle baselines</a>; except under <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation②">text-orientation: upright</a> (where the <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline⑤">alphabetic</a> and <a data-link-type="dfn" href="#x-height-baseline" id="ref-for-x-height-baseline①">x-height</a> baselines are essentially meaningless) use the <a data-link-type="dfn" href="#central-baseline" id="ref-for-central-baseline">central baseline</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="dominant-baseline" data-dfn-type="value" data-export id="valdef-dominant-baseline-central">central</dfn> <dd> Use the <a data-link-type="dfn" href="#central-baseline" id="ref-for-central-baseline①">central baselines</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="dominant-baseline" data-dfn-type="value" data-export id="valdef-dominant-baseline-mathematical">mathematical</dfn> <dd> Use the <a data-link-type="dfn" href="#math-baseline" id="ref-for-math-baseline">math baselines</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="dominant-baseline" data-dfn-type="value" data-export id="valdef-dominant-baseline-hanging">hanging</dfn> <dd> Use the <a data-link-type="dfn" href="#hanging-baseline" id="ref-for-hanging-baseline">hanging baselines</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="dominant-baseline" data-dfn-type="value" data-export id="valdef-dominant-baseline-text-top">text-top</dfn> <dd> Use the <a data-link-type="dfn" href="#text-over-baseline" id="ref-for-text-over-baseline">text-over baselines</a>. </dl> See <a data-link-type="biblio" href="#biblio-css-writing-modes-3" title="CSS Writing Modes Level 3">[CSS-WRITING-MODES-3]</a> for an introduction to dominant baselines. <a class="self-link" href="#issue-2ffa7534"></a> Define behavior for mixed vertical orientations that isn’t nonsensical when specified baseline isn’t <a class="css" data-link-type="maybe" href="#valdef-dominant-baseline-central" id="ref-for-valdef-dominant-baseline-central②">central</a>. <h3 class="heading settled" data-level="4.2" id="transverse-alignment">4.2. Transverse Box Alignment: the <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align④">vertical-align</a> property<a class="self-link" href="#transverse-alignment"></a></h3> <table class="def propdef" data-link-for-hint="vertical-align"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-vertical-align">vertical-align</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ first <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> last] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production css" data-link-type="property" href="#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline③"><'alignment-baseline'></a> || <a class="production css" data-link-type="property" href="#propdef-baseline-shift" id="ref-for-propdef-baseline-shift②"><'baseline-shift'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>baseline <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <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>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> This <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property">shorthand</a> property specifies how an inline-level box is aligned within the line by specifying its <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline⑦">alignment baseline</a> type (<a class="property css" data-link-type="property" href="#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline④">alignment-baseline</a>), <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference">baseline alignment preference</a> (<a class="property css" data-link-type="property" href="#propdef-baseline-source" id="ref-for-propdef-baseline-source②">baseline-source</a>), and <a data-link-type="dfn" href="#post-alignment-shift" id="ref-for-post-alignment-shift①">post-alignment shift</a> (<a class="property css" data-link-type="property" href="#propdef-baseline-shift" id="ref-for-propdef-baseline-shift③">baseline-shift</a>) in a single declaration. If <a class="css" data-link-type="maybe" href="#valdef-baseline-source-first" id="ref-for-valdef-baseline-source-first">first</a> or <a class="css" data-link-type="maybe" href="#valdef-baseline-source-last" id="ref-for-valdef-baseline-source-last">last</a> is specified, it sets <a class="property css" data-link-type="property" href="#propdef-baseline-source" id="ref-for-propdef-baseline-source③">baseline-source</a> (which is otherwise reset to <a class="css" data-link-type="maybe" href="#valdef-baseline-source-auto" id="ref-for-valdef-baseline-source-auto">auto</a>). Other values are as for the corresponding longhand properties, see below. Authors should use this shorthand (<a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align⑤">vertical-align</a>) instead of its longhands, unless specifically needing to cascade its longhands independently or (on SVG elements) to support legacy SVG implementations. Note: <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align⑥">vertical-align</a> can also affect the alignment of table cells when <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content①">align-content</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-align-3/#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal">normal</a>. Specifically, <a class="css" data-link-type="maybe" href="#valdef-baseline-shift-top" id="ref-for-valdef-baseline-shift-top">top</a> (<a class="css" data-link-type="propdesc" href="#propdef-baseline-shift" id="ref-for-propdef-baseline-shift④">baseline-shift: top</a>) maps it to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-align-3/#valdef-self-position-start" id="ref-for-valdef-self-position-start">start</a>, <a class="css" data-link-type="maybe" href="#valdef-baseline-shift-bottom" id="ref-for-valdef-baseline-shift-bottom">bottom</a> (baseline-shift: bottom) to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-align-3/#valdef-self-position-end" id="ref-for-valdef-self-position-end">end</a>, and otherwise <a class="css" data-link-type="maybe" href="#valdef-alignment-baseline-middle" id="ref-for-valdef-alignment-baseline-middle">middle</a> (<a class="css" data-link-type="propdesc" href="#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline⑤">alignment-baseline: middle</a>) to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-align-3/#valdef-self-position-center" id="ref-for-valdef-self-position-center">center</a>. See <a href="https://www.w3.org/TR/css-align-3/#distribution-block"><cite>CSS Box Alignment 3</cite> § 5.1.1 Block Containers (Including Table Cells)</a>. <h4 class="heading settled" data-level="4.2.1" id="baseline-source">4.2.1. Alignment Baseline Source: the <a class="property css" data-link-type="property" href="#propdef-baseline-source" id="ref-for-propdef-baseline-source④">baseline-source</a> longhand<a class="self-link" href="#baseline-source"></a></h4> <table class="def propdef" data-link-for-hint="baseline-source"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-baseline-source">baseline-source</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://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> first | last <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>inline-level boxes <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 keyword <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>discrete </table> When an inline-level box has more than one possible source for baseline information (such as for a multi-line inline block or inline flex container) this property specifies whether the <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#first-baseline-set" id="ref-for-first-baseline-set">first baseline set</a> or <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#last-baseline-set" id="ref-for-last-baseline-set">last baseline set</a> is preferred for alignment, indicating the box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="baseline-alignment-preference">baseline alignment preference</dfn>. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="baseline-source,vertical-align" data-dfn-type="value" data-export id="valdef-baseline-source-auto">auto</dfn> <dd>Specifies <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#last-baseline-alignment" id="ref-for-last-baseline-alignment">last-baseline alignment</a> for <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-inline-block" id="ref-for-valdef-display-inline-block">inline-block</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#first-baseline-alignment" id="ref-for-first-baseline-alignment">first-baseline alignment</a> for everything else. <dt><dfn class="dfn-paneled css" data-dfn-for="baseline-source,vertical-align" data-dfn-type="value" data-export id="valdef-baseline-source-first">first</dfn> <dd>Specifies <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#first-baseline-alignment" id="ref-for-first-baseline-alignment①">first-baseline alignment</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="baseline-source,vertical-align" data-dfn-type="value" data-export id="valdef-baseline-source-last">last</dfn> <dd>Specifies <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#last-baseline-alignment" id="ref-for-last-baseline-alignment①">last-baseline alignment</a>. </dl> See <a href="https://www.w3.org/TR/css-align-3/#baseline-export"><cite>CSS Box Alignment 3</cite> § 9.1 Determining the Baselines of a Box</a> for how to find the baselines of boxes other than <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box①⑤">inline boxes</a>. <h4 class="heading settled" data-level="4.2.2" id="alignment-baseline-property">4.2.2. Alignment Baseline Type: the <a class="property css" data-link-type="property" href="#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline⑥">alignment-baseline</a> longhand<a class="self-link" href="#alignment-baseline-property"></a></h4> <table class="def propdef" data-link-for-hint="alignment-baseline"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-alignment-baseline">alignment-baseline</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">baseline <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>baseline <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>inline-level boxes, flex items, grid items, table cells, and SVG <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/text.html#TermTextContentElement" id="ref-for-TermTextContentElement①">text content elements</a> <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 keyword <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>discrete </table> This property specifies the box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="alignment-baseline">alignment baseline</dfn>: the <a data-link-type="dfn" href="#baseline" id="ref-for-baseline①③">baseline</a> used to align the box prior to applying its <a data-link-type="dfn" href="#post-alignment-shift" id="ref-for-post-alignment-shift②">post-alignment shift</a> (if applicable). Values are defined as follows: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="alignment-baseline,vertical-align" data-dfn-type="value" data-export id="valdef-alignment-baseline-baseline">baseline</dfn> <dd> Use the <a data-link-type="dfn" href="#dominant-baseline" id="ref-for-dominant-baseline⑥">dominant baseline</a> choice of the parent. <dt><dfn class="dfn-paneled css" data-dfn-for="alignment-baseline,vertical-align" data-dfn-type="value" data-export id="valdef-alignment-baseline-text-bottom">text-bottom</dfn> <dd> Use the <a data-link-type="dfn" href="#text-under-baseline" id="ref-for-text-under-baseline①">text-under baseline</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="alignment-baseline,vertical-align" data-dfn-type="value" data-export id="valdef-alignment-baseline-alphabetic">alphabetic</dfn> <dd> Use the <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline⑥">alphabetic baseline</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="alignment-baseline,vertical-align" data-dfn-type="value" data-export id="valdef-alignment-baseline-ideographic">ideographic</dfn> <dd> Use the <a data-link-type="dfn" href="#ideographic-under-baseline" id="ref-for-ideographic-under-baseline②">ideographic-under baseline</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="alignment-baseline,vertical-align" data-dfn-type="value" data-export id="valdef-alignment-baseline-middle">middle</dfn> <dd> In general, use the <a data-link-type="dfn" href="#x-middle-baseline" id="ref-for-x-middle-baseline①">x-middle baselines</a>; except under <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation③">text-orientation: upright</a> (where the <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline⑦">alphabetic</a> and <a data-link-type="dfn" href="#x-height-baseline" id="ref-for-x-height-baseline②">x-height</a> baselines are essentially meaningless) use the <a data-link-type="dfn" href="#central-baseline" id="ref-for-central-baseline②">central baseline</a> instead. <dt><dfn class="dfn-paneled css" data-dfn-for="alignment-baseline,vertical-align" data-dfn-type="value" data-export id="valdef-alignment-baseline-central">central</dfn> <dd> Use the <a data-link-type="dfn" href="#central-baseline" id="ref-for-central-baseline③">central baseline</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="alignment-baseline,vertical-align" data-dfn-type="value" data-export id="valdef-alignment-baseline-mathematical">mathematical</dfn> <dd> Use the <a data-link-type="dfn" href="#math-baseline" id="ref-for-math-baseline①">math baseline</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="alignment-baseline,vertical-align" data-dfn-type="value" data-export id="valdef-alignment-baseline-text-top">text-top</dfn> <dd> Use the <a data-link-type="dfn" href="#text-over-baseline" id="ref-for-text-over-baseline①">text-over baseline</a>. </dl> When performing <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#baseline-alignment" id="ref-for-baseline-alignment①">baseline alignment</a>, these values specify which <a data-link-type="dfn" href="#baseline" id="ref-for-baseline①④">baseline</a> of the box is aligned to the corresponding baseline of its <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#shared-alignment-context" id="ref-for-shared-alignment-context③">alignment context</a>. (In an <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context⑧">inline formatting context</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level⑦">inline-level</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#box-fragment" id="ref-for-box-fragment①">box fragments</a> and glyphs share an alignment context established by their parent <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box①⑥">inline box</a> fragment along its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis④">inline axis</a>. For other <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#formatting-context" id="ref-for-formatting-context③">formatting contexts</a>, see <a href="https://www.w3.org/TR/css-align-3/#baseline-terms"><cite>CSS Box Alignment 3</cite> § 9.2 Baseline Alignment Grouping</a>.) In SVG text layout, these values instead specify the baseline that is aligned to the SVG <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/text.html#TermCurrentTextPosition" id="ref-for-TermCurrentTextPosition">current text position</a>. <h5 class="no-toc heading settled" data-level="4.2.2.1" id="alignment-baseline-svg-legacy">4.2.2.1. Legacy Values for SVG<a class="self-link" href="#alignment-baseline-svg-legacy"></a></h5> SVG implementations may support the following aliases in order to support legacy content: <ul> <li data-md> <dfn class="dfn-paneled css" data-dfn-for="alignment-baseline" data-dfn-type="value" data-export id="valdef-alignment-baseline-text-before-edge">text-before-edge</dfn> aliasing <a class="css" data-link-type="maybe" href="#valdef-alignment-baseline-text-top" id="ref-for-valdef-alignment-baseline-text-top">text-top</a> <li data-md> <dfn class="dfn-paneled css" data-dfn-for="alignment-baseline" data-dfn-type="value" data-export id="valdef-alignment-baseline-text-after-edge">text-after-edge</dfn> aliasing <a class="css" data-link-type="maybe" href="#valdef-alignment-baseline-text-bottom" id="ref-for-valdef-alignment-baseline-text-bottom">text-bottom</a> </ul> These values are not allowed in the <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align⑦">vertical-align</a> shorthand. <h4 class="heading settled" data-level="4.2.3" id="baseline-shift-property">4.2.3. Post-Alignment Shift: the <a class="property css" data-link-type="property" href="#propdef-baseline-shift" id="ref-for-propdef-baseline-shift⑥">baseline-shift</a> longhand<a class="self-link" href="#baseline-shift-property"></a></h4> <table class="def propdef" data-link-for-hint="baseline-shift"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-baseline-shift">baseline-shift</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑧">|</a> sub | super | top | center | bottom <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>0 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>inline-level boxes and SVG <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/text.html#TermTextContentElement" id="ref-for-TermTextContentElement②">text content elements</a> <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>refer to the used value of <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height④">line-height</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>the specified keyword or a computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①"><length-percentage></a> 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>by computed value type </table> This property specifies the box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="post-alignment-shift">post-alignment shift</dfn>. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="baseline-relative values" data-noexport id="baseline-relative-shift-values">baseline-relative shift values</dfn> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②"><length-percentage></a>, <a class="css" data-link-type="maybe" href="#valdef-baseline-shift-sub" id="ref-for-valdef-baseline-shift-sub">sub</a>, <a class="css" data-link-type="maybe" href="#valdef-baseline-shift-super" id="ref-for-valdef-baseline-shift-super">super</a> shift the box relative to its baseline-aligned position, whereas the <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="line-relative values" data-noexport id="line-relative-shift-values">line-relative shift values</dfn> <a class="css" data-link-type="maybe" href="#valdef-baseline-shift-top" id="ref-for-valdef-baseline-shift-top①">top</a>, <a class="css" data-link-type="maybe" href="#valdef-baseline-shift-center" id="ref-for-valdef-baseline-shift-center">center</a>, and <a class="css" data-link-type="maybe" href="#valdef-baseline-shift-bottom" id="ref-for-valdef-baseline-shift-bottom①">bottom</a> shift the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box①⑦">inline box</a> and its contents relative to the bounds of its <a data-link-type="dfn" href="#line-box" id="ref-for-line-box②⑤">line box</a>. Authors should use the <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align⑧">vertical-align</a> shorthand, which has existed since CSS1, instead of this <a class="property css" data-link-type="property" href="#propdef-baseline-shift" id="ref-for-propdef-baseline-shift⑦">baseline-shift</a> longhand (except in SVG content, where conversely baseline-shift is more widely-supported in legacy user agents). Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="baseline-shift,vertical-align" data-dfn-type="value" data-export id="valdef-baseline-shift-length"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value"><length></a></dfn> <dd>Raise (positive value) or lower (negative value) by the specified length. <dt><dfn class="dfn-paneled css" data-dfn-for="baseline-shift,vertical-align" data-dfn-type="value" data-export id="valdef-baseline-shift-percentage"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value"><percentage></a></dfn> <dd>Raise (positive value) or lower (negative value) by the specified percentage of the <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height⑤">line-height</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="baseline-shift,vertical-align" data-dfn-type="value" data-export id="valdef-baseline-shift-sub">sub</dfn> <dd> Lower by the offset appropriate for subscripts of the parent’s box. The UA may use the parent’s font metrics to find this offset; otherwise it defaults to dropping by one fifth of the parent’s used <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/fonts.html#propdef-font-size" id="ref-for-propdef-font-size">font-size</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="baseline-shift,vertical-align" data-dfn-type="value" data-export id="valdef-baseline-shift-super">super</dfn> <dd> Raise by the offset appropriate for superscripts of the parent’s box. The UA may use the parent’s font metrics to find this offset; otherwise it defaults to raising by one third of the parent’s used <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/fonts.html#propdef-font-size" id="ref-for-propdef-font-size①">font-size</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="baseline-shift,vertical-align" data-dfn-type="value" data-export id="valdef-baseline-shift-top">top</dfn> <dd> Align the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-over" id="ref-for-line-over③">line-over</a> edge of the <a data-link-type="dfn" href="#aligned-subtree" id="ref-for-aligned-subtree①">aligned subtree</a> with the line-over edge of the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box②⑥">line box</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="baseline-shift,vertical-align" data-dfn-type="value" data-export id="valdef-baseline-shift-center">center</dfn> <dd> Align the center of the <a data-link-type="dfn" href="#aligned-subtree" id="ref-for-aligned-subtree②">aligned subtree</a> with the center of the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box②⑦">line box</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="baseline-shift,vertical-align" data-dfn-type="value" data-export id="valdef-baseline-shift-bottom">bottom</dfn> <dd> Align the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-under" id="ref-for-line-under②">line-under</a> edge of the <a data-link-type="dfn" href="#aligned-subtree" id="ref-for-aligned-subtree③">aligned subtree</a> with the line-under edge of the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box②⑧">line box</a>. </dl> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="aligned-subtree">aligned subtree</dfn> of an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box①⑧">inline box</a> contains the <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds②">layout bounds</a> of that box and the <a data-link-type="dfn" href="#aligned-subtree" id="ref-for-aligned-subtree④">aligned subtrees</a> of all child inline boxes whose computed <a class="property css" data-link-type="property" href="#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline⑦">alignment-baseline</a> value is not itself a <a data-link-type="dfn" href="#line-relative-shift-values" id="ref-for-line-relative-shift-values③">line-relative shift value</a>. The <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-over" id="ref-for-line-over⑤">line-over</a> edge of the aligned subtree is the highest <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over">over</a> edge of the layout bounds in the subtree, and the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-under" id="ref-for-line-under④">line-under</a> edge is analogously the lowest. <a class="self-link" href="#issue-8910737b"></a> The <a data-link-type="dfn" href="#line-relative-shift-values" id="ref-for-line-relative-shift-values④">line-relative shift values</a> don’t fit perfectly in the dichotomy between <a class="property css" data-link-type="property" href="#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline⑧">alignment-baseline</a> and <a class="property css" data-link-type="property" href="#propdef-baseline-shift" id="ref-for-propdef-baseline-shift⑨">baseline-shift</a>. There’s <a href="https://github.com/w3c/csswg-drafts/issues/5180">decent</a> <a href="https://github.com/w3c/csswg-drafts/issues/5234">arguments</a> for either option. They’re currently drafted here, but if there’s a strong argument to move them, please file an issue for consideration. <h5 class="no-toc heading settled" data-level="4.2.3.1" id="baseline-shift-svg-legacy">4.2.3.1. Legacy Values for SVG<a class="self-link" href="#baseline-shift-svg-legacy"></a></h5> User agents may additionally support the keyword <dfn class="dfn-paneled css" data-dfn-for="baseline-shift" data-dfn-type="value" data-export id="valdef-baseline-shift-baseline">baseline</dfn> as computing to 0 if is necessary for them to support legacy SVG content. This value is not allowed in the <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align⑨">vertical-align</a> shorthand. <a class="self-link" href="#issue-6cbc9542"></a> We would prefer to remove the <a class="css" data-link-type="maybe" href="#valdef-baseline-shift-baseline" id="ref-for-valdef-baseline-shift-baseline">baseline</a> value, and are looking for feedback from SVG user agents as to whether it’s necessary. <h2 class="heading settled" data-level="5" id="line-height">5. Logical Heights and Inter-line Spacing<a class="self-link" href="#line-height"></a></h2> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis⑥">block-axis</a> sizing of a <a data-link-type="dfn" href="#line-box" id="ref-for-line-box②⑨">line box</a> depends on the sizes and <a href="#alignment">alignment</a> of its <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level⑧">inline-level</a> contents. This sizing is controlled by the <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height⑥">line-height</a> and <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge④">line-fit-edge</a> properties. <h3 class="heading settled" data-level="5.1" id="line-height-property">5.1. Line Spacing: the <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height⑦">line-height</a> property<a class="self-link" href="#line-height-property"></a></h3> <table class="def propdef" data-link-for-hint="line-height"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-line-height">line-height</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://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②③">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value"><number [0,∞]></a> | <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③"><length-percentage [0,∞]></a> <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>non-replaced inline boxes and SVG <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/text.html#TermTextContentElement" id="ref-for-TermTextContentElement③">text content 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>computed relative to 1em <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>the specified keyword, a number, or a computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value①"><length></a> 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>by computed value type </table> This property specifies the box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="preferred-line-height">preferred line height</dfn>, which is used in calculating its “<a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds④">layout bounds</a>”, i.e. its contribution to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-height" id="ref-for-logical-height④">logical height</a> of its <a data-link-type="dfn" href="#line-box" id="ref-for-line-box③⓪">line box</a>. (See <a href="#inline-height">§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes</a>.) Note: Because it applies to the <a data-link-type="dfn" href="#root-inline-box" id="ref-for-root-inline-box④">root inline box</a> when specified on a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container⑧">block container</a>, <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height⑧">line-height</a> effectively establishes the minimum height of the block’s <a data-link-type="dfn" href="#line-box" id="ref-for-line-box③①">line boxes</a>. Values for this property have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="line-height" data-dfn-type="value" data-export id="valdef-line-height-normal">normal</dfn> <dd> Determine the <a data-link-type="dfn" href="#preferred-line-height" id="ref-for-preferred-line-height">preferred line height</a> automatically based on font metrics. <dt><dfn class="dfn-paneled css" data-dfn-for="line-height" data-dfn-type="value" data-export id="valdef-line-height-length-0"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value②"><length [0,∞]></a></dfn> <dd> The specified length is used as the <a data-link-type="dfn" href="#preferred-line-height" id="ref-for-preferred-line-height①">preferred line height</a>. Negative values are illegal. <dt><dfn class="dfn-paneled css" data-dfn-for="line-height" data-dfn-type="value" data-export id="valdef-line-height-number-0"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value①"><number [0,∞]></a></dfn> <dd> The <a data-link-type="dfn" href="#preferred-line-height" id="ref-for-preferred-line-height②">preferred line height</a> is this number multiplied by the element’s computed <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/fonts.html#propdef-font-size" id="ref-for-propdef-font-size②">font-size</a>. Negative values are illegal. The <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value">computed value</a> is the same as the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#specified-value" id="ref-for-specified-value">specified value</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="line-height" data-dfn-type="value" data-export id="valdef-line-height-percentage-0"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value①"><percentage [0,∞]></a></dfn> <dd> The <a data-link-type="dfn" href="#preferred-line-height" id="ref-for-preferred-line-height③">preferred line height</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value①">computed value</a> of the property is this percentage of the element’s computed <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/fonts.html#propdef-font-size" id="ref-for-propdef-font-size③">font-size</a>. Negative values are illegal. </dl> Note: Metrics from fonts other than the <a data-link-type="dfn" href="https://www.w3.org/TR/css-fonts-4/#first-available-font" id="ref-for-first-available-font①">first available font</a> only impact the <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds⑤">layout bounds</a> of an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box②⓪">inline box</a> with <a class="css" data-link-type="propdesc" href="#propdef-line-height" id="ref-for-propdef-line-height⑨">line-height: normal</a>. <div class="example" id="example-e366ece9"> <a class="self-link" href="#example-e366ece9"></a> The three rules in the example below have the same used line height: <pre><code class="highlight">div <c- p>{</c-> <c- k>line-height</c-><c- p>:</c-> <c- m>1.2</c-><c- p>;</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>10</c-><c- k>pt</c-> <c- p>}</c-> <c- c>/* number */</c-> div <c- p>{</c-> <c- k>line-height</c-><c- p>:</c-> <c- m>1.2</c-><c- k>em</c-><c- p>;</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>10</c-><c- k>pt</c-> <c- p>}</c-> <c- c>/* length */</c-> div <c- p>{</c-> <c- k>line-height</c-><c- p>:</c-> <c- m>120</c-><c- k>%</c-><c- p>;</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>10</c-><c- k>pt</c-> <c- p>}</c-> <c- c>/* percentage */</c-> </code></pre> However, they inherit differently: the first one inherits as a number, which will lead to different line heights if descendants have different font sizes; the last two as inherit as absolute lengths, which will not be influenced by the font size on descendants. </div> <a class="self-link" href="#issue-af10b7fe"></a> The fact that percentages compute to lengths is annoying. See also <a href="https://github.com/w3c/csswg-drafts/issues/3118">Issue 3118</a> and <a href="https://github.com/w3c/csswg-drafts/issues/2165">Issue 2165</a>. Note: When <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge⑤">line-fit-edge</a> is <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-leading" id="ref-for-valdef-line-fit-edge-leading">leading</a>, the margins, borders, and padding of <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box②①">inline boxes</a> do not affect the line box’s height calculation. However, they are still rendered around these boxes. This means that if the size specified by <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height①⓪">line-height</a> is less than the size of the box, backgrounds and borders can “bleed” into adjoining line boxes, potentially obscuring earlier content. <h3 class="heading settled" data-level="5.2" id="text-edges">5.2. Text Edge Metrics: the <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge⑥">line-fit-edge</a> property<a class="self-link" href="#text-edges"></a></h3> <table class="def propdef" data-link-for-hint="line-fit-edge"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-line-fit-edge">line-fit-edge</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">leading <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑤">|</a> <a class="production css" data-link-type="type" href="#typedef-text-edge" id="ref-for-typedef-text-edge"><text-edge></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>leading <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box②②">inline boxes</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>the specified keyword <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>discrete </table> <a class="self-link" href="#issue-6de82a32"></a> This is an early draft of a proposal, and might change significantly as design critiques and use cases are registered and various details and interactions with other properties are worked out. Do not ship (yet). <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box②③">Inline boxes</a>, whose primary purpose is to contain text, are sized in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis⑦">block axis</a> based on their font metrics. The <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge⑦">line-fit-edge</a> property controls which metrics are used. These chosen metrics are used as the basis for the <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds⑥">layout bounds</a> of the inline box (if it is not the <a data-link-type="dfn" href="#root-inline-box" id="ref-for-root-inline-box⑤">root inline box</a>); and also, by default, are the metrics used for <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim②">text-box-trim</a>. The <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-text-edge"><a class="production css" data-link-type="type" href="#typedef-text-edge" id="ref-for-typedef-text-edge①"><text-edge></a></dfn> value, which identifies specific font metrics, expands to <pre class="prod"><a class="production" data-link-type="type" href="#typedef-text-edge" id="ref-for-typedef-text-edge②"><text-edge></a> = [ text <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑥">|</a> ideographic <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑦">|</a> ideographic-ink ] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑧">|</a> [ text <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑨">|</a> ideographic <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⓪">|</a> ideographic-ink <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③①">|</a> cap <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③②">|</a> ex ] [ text <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③③">|</a> ideographic <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③④">|</a> ideographic-ink <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑤">|</a> alphabetic ] </pre> The first value specifies the text <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over①">over</a> edge; the second value specifies the text <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#under" id="ref-for-under">under</a> edge. If only one value is specified, both edges are assigned that same keyword if possible; else <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-text" id="ref-for-valdef-line-fit-edge-text">text</a> is assumed as the missing value. <a class="self-link" href="#issue-eba283e1"></a> Do we need <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#longhand" id="ref-for-longhand">longhands</a> or is this shorthand enough? <a href="https://github.com/w3c/csswg-drafts/issues/5236">[Issue #5236]</a> Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="line-fit-edge,<<text-edge>>" data-dfn-type="value" data-export id="valdef-line-fit-edge-leading">leading</dfn> <dd> Use the <a data-link-type="dfn" href="#ascent-metric" id="ref-for-ascent-metric②">ascent</a>/<a data-link-type="dfn" href="#descent-metric" id="ref-for-descent-metric②">descent</a> plus any positive <a data-link-type="dfn" href="#half-leading" id="ref-for-half-leading">half-leading</a>. Margin/padding/border is ignored for the purpose of sizing the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box③②">line box</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="line-fit-edge,<<text-edge>>" data-dfn-type="value" data-export id="valdef-line-fit-edge-text">text</dfn> <dd> Use the <a data-link-type="dfn" href="#text-over-baseline" id="ref-for-text-over-baseline②">text-over baseline</a>/<a data-link-type="dfn" href="#text-under-baseline" id="ref-for-text-under-baseline②">text-under baseline</a> as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over②">over</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#under" id="ref-for-under①">under</a> edge. <dt><dfn class="dfn-paneled css" data-dfn-for="line-fit-edge,<<text-edge>>" data-dfn-type="value" data-export id="valdef-line-fit-edge-cap">cap</dfn> <dd> Use the <a data-link-type="dfn" href="#cap-height-baseline" id="ref-for-cap-height-baseline">cap-height baseline</a> as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over③">over</a> edge. <dt><dfn class="dfn-paneled css" data-dfn-for="line-fit-edge,<<text-edge>>" data-dfn-type="value" data-export id="valdef-line-fit-edge-ex">ex</dfn> <dd> Use the <a data-link-type="dfn" href="#x-height-baseline" id="ref-for-x-height-baseline③">x-height baseline</a> as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over④">over</a> edge. <dt><dfn class="dfn-paneled css" data-dfn-for="line-fit-edge,<<text-edge>>" data-dfn-type="value" data-export id="valdef-line-fit-edge-ideographic">ideographic</dfn> <dd> Use the <a data-link-type="dfn" href="#ideographic-over-baseline" id="ref-for-ideographic-over-baseline①">ideographic-over baseline</a>/<a data-link-type="dfn" href="#ideographic-under-baseline" id="ref-for-ideographic-under-baseline③">ideographic-under baseline</a> as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over⑤">over</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#under" id="ref-for-under②">under</a> edge. <dt><dfn class="dfn-paneled css" data-dfn-for="line-fit-edge,<<text-edge>>" data-dfn-type="value" data-export id="valdef-line-fit-edge-ideographic-ink">ideographic-ink</dfn> <dd> Use the <a data-link-type="dfn" href="#ideographic-ink-over-baseline" id="ref-for-ideographic-ink-over-baseline">ideographic-ink-over baseline</a>/<a data-link-type="dfn" href="#ideographic-ink-under-baseline" id="ref-for-ideographic-ink-under-baseline">ideographic-ink-under baseline</a> as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over⑥">over</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#under" id="ref-for-under③">under</a> edge. <dt><dfn class="dfn-paneled css" data-dfn-for="line-fit-edge,<<text-edge>>" data-dfn-type="value" data-export id="valdef-line-fit-edge-alphabetic">alphabetic</dfn> <dd> Use the <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline⑧">alphabetic baseline</a> as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#under" id="ref-for-under④">under</a> edge. </dl> <a class="self-link" href="#issue-d656b674"></a> Is <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-text" id="ref-for-valdef-line-fit-edge-text①">text</a> a reasonable name for the ascent/descent metrics, or can we think of something better? Ditto <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-leading" id="ref-for-valdef-line-fit-edge-leading①">leading</a> as a keyword. <a href="https://github.com/w3c/csswg-drafts/issues/8067">[Issue #8067]</a> Unless <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge⑧">line-fit-edge</a> is <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-leading" id="ref-for-valdef-line-fit-edge-leading②">leading</a>—in which case the box’s own <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height①①">line-height</a> is used to add spacing—the box’s margin, padding, and border also contribute to the <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds⑦">layout bounds</a>. Note: The <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-leading" id="ref-for-valdef-line-fit-edge-leading③">leading</a> and <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-text" id="ref-for-valdef-line-fit-edge-text②">text</a> values rely on the font <a data-link-type="dfn" href="#ascent-metric" id="ref-for-ascent-metric③">ascent</a> and <a data-link-type="dfn" href="#descent-metric" id="ref-for-descent-metric③">descent</a> to make sure the text fits. Other values are more likely to result in overlap or overflow caused by ascents above the specified metrics (such as for diacritics), so authors using these values need to be careful to provide sufficient spacing for the text, particularly in multi-lingual contexts. <figure> <img alt="Three different values of the line-fit-edge property." src="images/text-edge.png" width="480"> <figcaption> The <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge⑨">line-fit-edge</a> property, showing values for <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-leading" id="ref-for-valdef-line-fit-edge-leading④">leading</a>, <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-cap" id="ref-for-valdef-line-fit-edge-cap">cap</a>, and <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-ex" id="ref-for-valdef-line-fit-edge-ex">ex</a>. The red lines indicate the layout bounds of the inline box. This illustration doesn’t match actual font metrics, it’s actually illustrating the cap-height, not the ascent. <a href="https://github.com/w3c/csswg-drafts/issues/11364">[Issue #11364]</a> </figcaption> </figure> <div class="note" role="note"> When <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge①⓪">line-fit-edge</a> is <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-leading" id="ref-for-valdef-line-fit-edge-leading⑤">leading</a>, vertical rhythm can be broken any time there is a change in font metrics or vertical alignment within a paragraph. Other values are more likely to give consistent line spacing—as long as there is enough leading added that the half-leading on the root inline is large enough to accommodate the specified metrics of any descendants. The line box will still grow, however, to accommodate content that would otherwise overflow, to avoid overlap between lines. </div> Note: Although only <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-leading" id="ref-for-valdef-line-fit-edge-leading⑥">leading</a> applies positive <a data-link-type="dfn" href="#half-leading" id="ref-for-half-leading①">half-leading</a>, in order to allow text to be set tightly, all values apply negative half-leading, see <a href="#inline-height">§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes</a>. Half-leading is applied equally to both sides of the text; for more precise overlap control authors can use <a class="css" data-link-type="propdesc" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge①①">line-fit-edge: text</a> together with negative <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin" id="ref-for-margin⑤">margins</a> on the affected text. <h3 class="heading settled" data-level="5.3" id="inline-height">5.3. Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes<a class="self-link" href="#inline-height"></a></h3> The contribution of an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box②⑤">inline box</a> to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-height" id="ref-for-logical-height⑤">logical height</a> of its <a data-link-type="dfn" href="#line-box" id="ref-for-line-box③③">line box</a>, here referred to as its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="layout-bounds">layout bounds</dfn>, is always calculated with respect to its own text metrics, as described below, and is controlled by <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge①②">line-fit-edge</a> and <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height①②">line-height</a>. The sizes and positions of child boxes do not influence its <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds⑧">layout bounds</a> (nor its own logical height, for that matter, see <a class="property css" data-link-type="property" href="#propdef-inline-sizing" id="ref-for-propdef-inline-sizing">inline-sizing</a>). Note: The <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds⑨">layout bounds</a> need not correspond to the box’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#box-box-edge" id="ref-for-box-box-edge">edges</a>. To find the <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds①⓪">layout bounds</a> of an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box②⑥">inline box</a>, the UA must first align all the glyphs directly contained in the inline box to each other by their <a data-link-type="dfn" href="#dominant-baseline" id="ref-for-dominant-baseline⑦">dominant baselines</a>. (See <a href="#baseline-tables">§ 3.3 Baselines of Glyphs and Boxes</a>.) If the inline box contains no glyphs at all, or if it contains only glyphs from fallback fonts, it is considered to contain a “strut” (an invisible glyph of zero width) with the metrics of the box’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-fonts-4/#first-available-font" id="ref-for-first-available-font②">first available font</a>. For each glyph (including the “strut”), <var>A</var> represents its ascent above the <a data-link-type="dfn" href="#baseline" id="ref-for-baseline①⑦">baseline</a>; <var>D</var> represents its descent below. Unless <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge①③">line-fit-edge</a> specifies a different metric to use, <var>A</var> refers to the <a data-link-type="dfn" href="#ascent-metric" id="ref-for-ascent-metric④">ascent metric</a> (for the given font at its given size) and <var>D</var> to the <a data-link-type="dfn" href="#descent-metric" id="ref-for-descent-metric④">descent metric</a>, each adjusted to account for the <a data-link-type="dfn" href="#dominant-baseline" id="ref-for-dominant-baseline⑧">dominant baseline</a>’s offset from zero. If <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height①③">line-height</a> computes to <a class="css" data-link-type="maybe" href="#valdef-line-height-normal" id="ref-for-valdef-line-height-normal①">normal</a> and either line-fit-edge is <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-leading" id="ref-for-valdef-line-fit-edge-leading⑦">leading</a> or this is the <a data-link-type="dfn" href="#root-inline-box" id="ref-for-root-inline-box⑥">root inline box</a>, the font’s <a data-link-type="dfn" href="#line-gap-metric" id="ref-for-line-gap-metric②">line gap metric</a> may also be incorporated into <var>A</var> and <var>D</var> by adding half to each side as <a data-link-type="dfn" href="#half-leading" id="ref-for-half-leading③">half-leading</a>. When its computed <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height①④">line-height</a> is <a class="css" data-link-type="maybe" href="#valdef-line-height-normal" id="ref-for-valdef-line-height-normal②">normal</a>, the <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds①①">layout bounds</a> of an inline box encloses all its glyphs, going from the highest <var>A</var> to the deepest <var>D</var>. (Note that glyphs in a single box can come from different fonts and thus might not all have the same <var>A</var> and <var>D</var>.) When its computed <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height①⑤">line-height</a> is not <a class="css" data-link-type="maybe" href="#valdef-line-height-normal" id="ref-for-valdef-line-height-normal③">normal</a>, its <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds①②">layout bounds</a> are derived solely from metrics of its <a data-link-type="dfn" href="https://www.w3.org/TR/css-fonts-4/#first-available-font" id="ref-for-first-available-font③">first available font</a> (ignoring glyphs from other fonts), and <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="leading">leading</dfn> is used to adjust the effective <var>A</var> and <var>D</var> to add up to the used <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height①⑥">line-height</a>. Calculate the <a data-link-type="dfn" href="#leading" id="ref-for-leading">leading</a> <var>L</var> as <var>L</var> = line-height - (<var>A</var> + <var>D</var>). Half the leading (its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="half-leading">half-leading</dfn>) is added above <var>A</var> of the first available font, and the other half below <var>D</var> of the first available font, giving an effective ascent above the baseline of <var>A′</var> = <var>A</var> + <var>L</var>/2, and an effective descent of <var>D′</var> = <var>D</var> + <var>L</var>/2. However, if <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge①⑤">line-fit-edge</a> is not <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-leading" id="ref-for-valdef-line-fit-edge-leading⑧">leading</a> and this is not the <a data-link-type="dfn" href="#root-inline-box" id="ref-for-root-inline-box⑦">root inline box</a>, if the <a data-link-type="dfn" href="#half-leading" id="ref-for-half-leading④">half-leading</a> is positive, treat it as zero. The layout bounds exactly encloses this effective <var>A′</var> and <var>D′</var>. Note: <var>L</var> may be negative. Additionally, when <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge①⑥">line-fit-edge</a> is not <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-leading" id="ref-for-valdef-line-fit-edge-leading⑨">leading</a>, the <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds①④">layout bounds</a> are inflated by the sum of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin" id="ref-for-margin⑥">margin</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border⑤">border</a>, and <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding" id="ref-for-padding⑤">padding</a> on each side. In order to allow negative margin values to have an actual effect, negative margins are also accumulated onto the layout bounds of any descendant <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box②⑨">inline boxes</a> participating in the same <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context⑨">inline formatting context</a>. In Quirks Mode <a data-link-type="biblio" href="#biblio-quirks" title="Quirks Mode Standard">[QUIRKS]</a>, any <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box③⓪">inline box</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#box-fragment" id="ref-for-box-fragment③">fragment</a> that has zero borders and padding and that does not directly contain text or <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-4/#preserved-white-space" id="ref-for-preserved-white-space①">preserved white space</a> <a data-link-type="biblio" href="#biblio-css-text-3" title="CSS Text Module Level 3">[CSS-TEXT-3]</a> is ignored when sizing the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box③④">line box</a>. <h2 class="heading settled" data-level="6" id="leading-trim">6. Trimming Leading Over/Under Text<a class="self-link" href="#leading-trim"></a></h2> To ensure consistent spacing in the basic case of running text, CSS line layout introduces leading both above and below the text content of each line as needed to ensure its <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height①⑧">line-height</a>. In addition, the ascent and descent font metrics themselves often include extra space above and below the most typical glyph shapes in order to accommodate occasional characters and diacritics that ascend or descend beyond the typical bounds. This prevents adjacent lines of text from overlapping each other. However, all this extra spacing interferes with visual alignment and with control over effective (visually-apparent) spacing. The <a class="property css" data-link-type="property" href="#propdef-text-box" id="ref-for-propdef-text-box">text-box</a> property allows trimming this additional space above and below the first and last lines of a block, allowing more precise control over spacing around the glyphs. By relying on font metrics rather than hard-coded lengths, this feature allows content to be resized, rewrapped, and rendered in a variety of fonts while maintaining that precise spacing. <div class="example" id="example-306266d4"> <a class="self-link" href="#example-306266d4"></a> A common problem is vertical centering. It’s easy to vertically center the text container to an icon, but because the visual boundaries of Latin text are the cap height and the alphabetic baseline, rather than the ascent and descent, this often doesn’t yield the intended visual effect. <figure> <img alt="Consider some Latin text placed to the right of an image, to be centered between its top and bottom. Measuring from the top of the image to the top of the text box yields 13px; likewise measuring from the bottom of the image to the bottom of the text box yields 13px, theoretically perfectly centering the text. However, measuring from the top of the image to the cap-height yields 21px; and measuring from the bottom to the alphabetic baseline yields 19px, showing that visually the text is not actually centered." height="445" src="images/leading-trim-centering-fail.png" width="2500"> <figcaption> Measuring to the top/bottom of the text may yield equal results, but measuring to the visual bounds shows that it is not visually centered. </figcaption> </figure> To center the text visually, it’s necessary to assume the cap height and alphabetic baseline as the top and bottom edges of the text, respectively. <figure> <img alt="If the text were visually centered, the distance between the top of the image and the cap height would be 20px, and the distance between the bottom of the image and the alphabetic baseline would be equally 20px." height="445" src="images/leading-trim-centering-goal.png" style="width: 50%" width="1224"> <figcaption> Measuring to the cap height / alphabetic baseline instead of the ascent / descent and equalizing those distances visually centers the text. </figcaption> </figure> By using <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim③">text-box-trim</a> to strip out the spacing above the cap height and below the alphabetic baseline, centering the box actually centers the text; and does so reliably, regardless of what font is used to render it. <figure> <img alt height="148" src="images/leading-trim-centering-variants.gif" width="448"> <figcaption> Even though different fonts have different cap heights, by using the font’s metric rather than a magic number, the layout intention is met even as the font is changed. </figcaption> </figure> </div> <h3 class="heading settled" data-level="6.1" id="text-box-shorthand">6.1. Shorthand for Text Box Trimming: the <a class="property css" data-link-type="property" href="#propdef-text-box" id="ref-for-propdef-text-box①">text-box</a> property<a class="self-link" href="#text-box-shorthand"></a></h3> <table class="def propdef" data-link-for-hint="text-box"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-box">text-box</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://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑥">|</a> <a class="production css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim④"><'text-box-trim'></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any②">||</a> <a class="production css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge①"><'text-box-edge'></a> <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><a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container⑨">block containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box③①">inline boxes</a> <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>the specified keyword <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>discrete </table> This property is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property①">shorthand</a> for setting the <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim⑤">text-box-trim</a> and <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge②">text-box-edge</a> properties in a single declaration. If the single keyword <dfn class="dfn-paneled css" data-dfn-for="text-box" data-dfn-type="value" data-export id="valdef-text-box-normal">normal</dfn> is specified, it sets <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim⑥">text-box-trim</a> to <a class="css" data-link-type="maybe" href="#valdef-text-box-trim-none" id="ref-for-valdef-text-box-trim-none">none</a> and <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge③">text-box-edge</a> to <a class="css" data-link-type="maybe" href="#valdef-text-box-edge-auto" id="ref-for-valdef-text-box-edge-auto">auto</a>. Otherwise, omitting the text-box-trim value sets it to both (not the initial value), while omitting the text-box-edge value sets it to auto (the initial value). <a class="self-link" href="#issue-6e028676"></a> Add examples. <h3 class="heading settled" data-level="6.2" id="text-box-trim">6.2. Trimming Over/Under Text: the <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim⑧">text-box-trim</a> property<a class="self-link" href="#text-box-trim"></a></h3> <table class="def propdef" data-link-for-hint="text-box-trim"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-box-trim">text-box-trim</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://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑦">|</a> trim-start | trim-end | trim-both <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>block containers and <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box③②">inline boxes</a> <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>the specified keyword <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>discrete </table> On <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box③③">inline boxes</a>, specifies whether to trim the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#x10" id="ref-for-x10③">content box</a> to match the specified <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge⑤">text-box-edge</a> metric. See <a href="#inline-height">§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes</a> for details. On <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container①⓪">block containers</a>, as well as on each column of a <a data-link-type="dfn" href="https://www.w3.org/TR/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container">multi-column container</a>, specifies whether to trim <a data-link-type="dfn" href="#half-leading" id="ref-for-half-leading⑤">half-leading</a> at the start/end of the box’s content to better match its <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#content-edge" id="ref-for-content-edge①">content edge</a> to its text content. The trimming edge in this case is specified by the start/end <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge⑥">text-box-edge</a> value of the affected <a data-link-type="dfn" href="#line-box" id="ref-for-line-box③⑤">line box</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#containing-block" id="ref-for-containing-block⑤">containing block</a>. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="text-box-trim" data-dfn-type="value" data-export id="valdef-text-box-trim-none">none</dfn> <dd> No special handling of the first/last <a data-link-type="dfn" href="#line-box" id="ref-for-line-box③⑥">line box</a> when applied to a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container①①">block container</a>. When applied to an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box③④">inline box</a>, specifies that the over/under <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#content-edge" id="ref-for-content-edge②">content edges</a> coincide with the <a data-link-type="dfn" href="#text-over-baseline" id="ref-for-text-over-baseline③">text-over</a>/<a data-link-type="dfn" href="#text-under-baseline" id="ref-for-text-under-baseline③">text-under</a> baselines regardless of <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge⑦">text-box-edge</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="text-box-trim" data-dfn-type="value" data-export id="valdef-text-box-trim-trim-start">trim-start</dfn> <dd> For <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container①②">block containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-multicol-1/#column-box" id="ref-for-column-box①">column boxes</a>: trim the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-start" id="ref-for-block-start">block-start</a> side of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-pseudo-4/#first-formatted-line" id="ref-for-first-formatted-line①">first formatted line</a> to the specified metric of its <a data-link-type="dfn" href="#root-inline-box" id="ref-for-root-inline-box⑧">root inline box</a>. If there is no such line, or if there is intervening non-zero padding or borders, there is no effect. For <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box③⑤">inline boxes</a>: trims the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-start" id="ref-for-block-start①">block-start</a> side of the box to match its <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#content-edge" id="ref-for-content-edge③">content edge</a> to the metric specified by <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge⑧">text-box-edge</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="text-box-trim" data-dfn-type="value" data-export id="valdef-text-box-trim-trim-end">trim-end</dfn> <dd> For <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container①③">block containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-multicol-1/#column-box" id="ref-for-column-box②">column boxes</a>: trim the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-end" id="ref-for-block-end">block-end</a> side of the last formatted line to the specified metric of its <a data-link-type="dfn" href="#root-inline-box" id="ref-for-root-inline-box⑨">root inline box</a>. If there is no such line, or if there is intervening non-zero padding or borders, there is no effect. For <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box③⑥">inline boxes</a>: trims the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-end" id="ref-for-block-end①">block-end</a> side of the box to match its <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#content-edge" id="ref-for-content-edge④">content edge</a> to the metric specified by <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge⑨">text-box-edge</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="text-box-trim" data-dfn-type="value" data-export id="valdef-text-box-trim-trim-both">trim-both</dfn> <dd> Specifies the behavior of <a class="css" data-link-type="maybe" href="#valdef-text-box-trim-trim-start" id="ref-for-valdef-text-box-trim-trim-start">trim-start</a> and <a class="css" data-link-type="maybe" href="#valdef-text-box-trim-trim-end" id="ref-for-valdef-text-box-trim-trim-end">trim-end</a> simultaneously. </dl> Note: Like <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line">::first-line</a>, this property does not apply to, or propagate through, flex, grid, or table <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#formatting-context" id="ref-for-formatting-context④">formatting contexts</a>. Note: The <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-end" id="ref-for-block-end②">block-end</a> side does not coincide with the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-under" id="ref-for-line-under⑤">line-under</a> side when <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr">vertical-lr</a>. If multiple ancestors specify trimming on the same <a data-link-type="dfn" href="#line-box" id="ref-for-line-box③⑦">line box</a>, the metric used is that of the innermost <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container①④">block container</a> that requests trimming on that side of the line box. Note: Content and ink overflowing a box due to non-initial values of <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim⑨">text-box-trim</a> is handled the same as content that would overflow the box or line box otherwise. Unlike <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line①">::first-line</a>, when applying to the first (or last) formatted line of a <a data-link-type="dfn" href="https://www.w3.org/TR/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①">multi-column container</a>, this property applies to the first (or last) formatted lines of every column in the multi-column container. <a class="self-link" href="#issue-d1836b7a"></a> What happens if the column is split by a spanner? <a href="https://github.com/w3c/csswg-drafts/issues/11363">[Issue #11363]</a> When the box to which <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim①⓪">text-box-trim</a> has been applied is split by <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#fragmentation" id="ref-for-fragmentation">fragmentation</a> <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a>, whether trimming is applied per fragment or only to the start/end edges of its first/last fragments is determined by <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break">box-decoration-break</a>. If, when printing, trimming a <a data-link-type="dfn" href="#line-box" id="ref-for-line-box③⑨">line box</a> would cause its content to be clipped, the UA may ignore <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim①①">text-box-trim</a> on that edge of that line box. <h3 class="heading settled" data-level="6.3" id="text-box-edge">6.3. Text Trimming Metrics: the <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge①⓪">text-box-edge</a> property<a class="self-link" href="#text-box-edge"></a></h3> <table class="def propdef" data-link-for-hint="text-box-edge"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-box-edge">text-box-edge</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://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⓪">|</a> <a class="production css" data-link-type="type" href="#typedef-text-edge" id="ref-for-typedef-text-edge③"><text-edge></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container①⑤">block containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box③⑦">inline boxes</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>the specified keyword <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>discrete </table> This property specifies the metrics to use for <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim①②">text-box-trim</a> effects. Values have the same meanings as for <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge①⑦">line-fit-edge</a>; the <dfn class="dfn-paneled css" data-dfn-for="text-box-edge" data-dfn-type="value" data-export id="valdef-text-box-edge-auto">auto</dfn> keyword uses the value of line-fit-edge, interpreting <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-leading" id="ref-for-valdef-line-fit-edge-leading①⓪">leading</a> (the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#x1" id="ref-for-x1">initial value</a>) as <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-text" id="ref-for-valdef-line-fit-edge-text③">text</a>. Note: This property can be set together with <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim①③">text-box-trim</a> in the <a class="property css" data-link-type="property" href="#propdef-text-box" id="ref-for-propdef-text-box②">text-box</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property②">shorthand</a>. Unlike <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge①⑨">line-fit-edge</a>, it does not inherit; however its <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#x1" id="ref-for-x1①">initial value</a> copies from line-fit-edge, which does inherit. <h3 class="heading settled" data-level="6.4" id="line-fill">6.4. Inline Box Drawing Height: the <a class="property css" data-link-type="property" href="#propdef-inline-sizing" id="ref-for-propdef-inline-sizing①">inline-sizing</a> property<a class="self-link" href="#line-fill"></a></h3> <table class="def propdef" data-link-for-hint="inline-sizing"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inline-sizing">inline-sizing</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://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④①">|</a> stretch <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><a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box③⑧">inline boxes</a>, but not <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-container" id="ref-for-ruby-container">ruby container boxes</a> nor <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#internal-ruby-boxes" id="ref-for-internal-ruby-boxes">internal ruby boxes</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 keyword <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>discrete </table> <a class="self-link" href="#issue-2c8f414b"></a> This has a confusing name. We need a new name. Alternatively, incorporate this into <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim①④">text-box-trim</a>? <a href="https://github.com/w3c/csswg-drafts/issues/5189">[Issue #5189]</a> This property specifies how the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-height" id="ref-for-logical-height⑦">logical height</a> of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#content-area" id="ref-for-content-area">content area</a> of an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box③⑨">inline box</a> is measured in relation to its contents. It has no effect on the size or position of the box’s contents, the line box, or any other content. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="inline-sizing" data-dfn-type="value" data-export id="valdef-inline-sizing-normal">normal</dfn> <dd> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#content-area" id="ref-for-content-area①">content area</a> of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box④⓪">inline box</a> is sized and positioned to fit (possibly hypothetical) text from its <a data-link-type="dfn" href="https://www.w3.org/TR/css-fonts-4/#first-available-font" id="ref-for-first-available-font④">first available font</a>. If <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim①⑤">text-box-trim</a> indicates trimming, then the specified metric must be used. Otherwise, this specification does not specify how. A UA may, e.g., use the maximum ascender and descender of the font. (This would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts.) Note: If more than one font is used (which happen when glyphs are found in different fonts), the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-height" id="ref-for-logical-height⑧">logical height</a> of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#content-area" id="ref-for-content-area②">content area</a> is not affected by the glyphs from the fallback fonts, and only depends on the <a data-link-type="dfn" href="https://www.w3.org/TR/css-fonts-4/#first-available-font" id="ref-for-first-available-font⑤">first available font</a>. However, these fallback glyphs can still affect the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box④①">line box</a> size when <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height①⑨">line-height</a> is <a class="css" data-link-type="maybe" href="#valdef-line-height-normal" id="ref-for-valdef-line-height-normal④">normal</a>; see <a href="#inline-height">§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="inline-sizing" data-dfn-type="value" data-export id="valdef-inline-sizing-stretch">stretch</dfn> <dd> Once the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box④②">line box</a> has been sized and its contents positioned as for <a class="css" data-link-type="maybe" href="#valdef-inline-sizing-normal" id="ref-for-valdef-inline-sizing-normal">normal</a>, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box④①">inline box</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#box-box-edge" id="ref-for-box-box-edge①">box edges</a> are shifted such that its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over⑦">over</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#under" id="ref-for-under⑤">under</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-edge" id="ref-for-margin-edge">margin edges</a> coincide with the corresponding line box’s edges, stretching the inline box’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#inner-size" id="ref-for-inner-size①">inner</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-height" id="ref-for-logical-height⑨">logical height</a> so that its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis⑧">block-axis</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#outer-size" id="ref-for-outer-size">outer size</a> fills the line box. (The sizes and positions of its <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#in-flow" id="ref-for-in-flow③">in-flow</a> contents are not affected.) </dl> Note: The <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-height" id="ref-for-propdef-height">height</a> property does not apply to <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box④③">inline boxes</a>. Note: The <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height②⓪">line-height</a> has no impact on the size of an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box④④">inline box</a>, it only <a href="#inline-height">affects its contribution</a> to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-height" id="ref-for-logical-height①⓪">logical height</a> of its <a data-link-type="dfn" href="#line-box" id="ref-for-line-box④⑤">line box</a>. <h2 class="heading settled" data-level="7" id="initial-letter-styling">7. Initial Letters<a class="self-link" href="#initial-letter-styling"></a></h2> <a class="self-link" href="#issue-81b8cb9c"></a>The editors would appreciate any examples of drop initials in non-western scripts, especially Indic scripts. <h3 class="heading settled" data-level="7.1" id="initial-letter-intro">7.1. An Introduction to Initial Letters<a class="self-link" href="#initial-letter-intro"></a></h3> This section is non-normative. Large, decorative letters have been used to start new sections of text since before the invention of printing. In fact, their use predates lowercase letters entirely. <h4 class="heading settled" data-level="7.1.1" id="drop-initial">7.1.1. Drop Initial<a class="self-link" href="#drop-initial"></a></h4> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="dropped-initial">dropped initial</dfn> (or “drop cap”) is a larger-than-usual letter at the start of a paragraph, with a baseline at least one line lower than the first baseline of the paragraph. The size of the drop initial is usually indicated by how many lines it occupies. Two- and three-line drop initials are very common. <figure> <img alt="3-line drop cap with E Acute" src="images/Dropcap-E-acute-3line.png" width="480"> <figcaption> Three-line drop initial with E acute. Since the cap-height of the drop initial aligns with the cap-height of the main text, the accent extends above the paragraph. </figcaption> </figure> The exact size and position of a <a data-link-type="dfn" href="#dropped-initial" id="ref-for-dropped-initial">dropped initial</a> depends on the alignment of its glyph. Reference points on the drop cap must align precisely with reference points in the text. The alignment constraints for drop initials depend on the writing system. In Western scripts, the top reference points are the cap height of the initial letter and of the first line of text. The bottom reference points are the alphabetic baseline of the initial letter and the baseline of the Nth line of text. The figure below shows a simple two-line drop cap, with the relevant reference lines marked. <figure> <img alt="drop cap showing alignment" src="images/Dropcap-lines.png" width="600"> <figcaption>Two-line drop cap showing baselines (green lines), cap-height (red line), and ascender (cyan line).</figcaption> </figure> In Han-derived scripts, the initial letter extends from the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-start" id="ref-for-block-start②">block-start</a> edge of the glyphs on the first line to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-end" id="ref-for-block-end③">block-end</a> edge of the glyphs on the Nth line. <figure> <img alt="Japanese Vertical Initial" src="images/Initial-2line-JapaneseVertical.png" width="480"> <figcaption>Two-line drop initial in vertical writing mode</figcaption> </figure> In certain Indic scripts, the top alignment point is the hanging baseline, and the bottom alignment point is the text-after-edge. <figure> <img alt="Devanagari initial letter" src="images/Devangari-Initial.png" width="480"> <figcaption>Devanagari <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter①">initial letter</a> aligned with hanging baseline. Alignment points shown in red.</figcaption> </figure> <h4 class="heading settled" data-level="7.1.2" id="sunk-initial">7.1.2. Sunken Initial Letters<a class="self-link" href="#sunk-initial"></a></h4> Some styles of drop initials do not align with the first line of text. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="sunken-initial">sunken initial</dfn> (or “sunken cap”) both sinks below the first baseline, and extends above the first line of text. <figure> <img alt="sunken drop initial" src="images/SunkenCapA.png" width="480"> <figcaption>Sunken cap. The letter drops two lines, but is the size of a three-line initial letter.</figcaption> </figure> <h4 class="heading settled" data-level="7.1.3" id="raise-initial">7.1.3. Raised Initial Letters<a class="self-link" href="#raise-initial"></a></h4> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="raised-initial">raised initial</dfn> (often called a “raised cap” or “stick-up cap”) “sinks” to the first text baseline. Note: A proper raised initial has several advantages over simply increasing the font size of a first letter. The line spacing in the rest of the paragraph will not be altered, but text will still be excluded around large descenders. And if the size of raised initial is defined to be an integral number of lines, implicit baseline grids can be maintained. <figure> <img alt="raised cap" src="images/RaisedCap.png" width="480"> <figcaption>Raised cap. The initial letter is the size of a 3-line initial, but does not drop.</figcaption> </figure> <h3 class="heading settled" data-level="7.2" id="selecting-drop-initials">7.2. Selecting Initial Letters<a class="self-link" href="#selecting-drop-initials"></a></h3> This section is non-normative. Initial letters are typically a single letter, although they may include punctuation or a sequence of characters which are perceived by the user to be a single typographic unit. The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter">::first-letter</a> pseudo-element, defined in <a data-link-type="biblio" href="#biblio-select" title="Selectors Level 3">[SELECT]</a> and <a data-link-type="biblio" href="#biblio-css-pseudo-4" title="CSS Pseudo-Elements Module Level 4">[CSS-PSEUDO-4]</a>, can be used to select the character(s) to be formatted as <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter②">initial letters</a>. Authors who need more control over which characters are included in an initial letter, or who want to apply initial-letter formatting to replaced elements or multiple words can alternately apply the <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter">initial-letter</a> property to the first inline-level child of a block container. <div class="example" id="example-f8ada747"> <a class="self-link" href="#example-f8ada747"></a> <pre>This paragraph has a dropped “T”. <img alt="H" src="illuminated-h.svg">ere we have an illuminated “H”. Words may also be given initial letter styling at the beginning of a paragraph. </pre> <pre>::first-letter, /* style first paragraph’s T */ img, /* style illuminated H */ span /* style phrase inside span */ { initial-letter: 2; } </pre> </div> Note that since <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter①">::first-letter</a> selects punctuation before or after the first letter, these characters are included in the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter③">initial letter</a> when ::first-letter is used. <figure> <img alt="Paragraph showing both opening quote and first letter set as three-line drop cap" src="images/initial-letter-punctuation-quote.png" width="604"> <figcaption>The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter③">::first-letter</a> pseudo-element selects the quotation mark as well as the “M”.</figcaption> </figure> <a class="self-link" href="#issue-8e10cdbe"></a> Should there be a way to opt out of this behavior? See <a href="https://github.com/w3c/csswg-drafts/issues/310">GitHub Issue 310</a>. <h3 class="heading settled" data-level="7.3" id="sizing-drop-initials">7.3. Creating Initial Letters: the <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter①">initial-letter</a> property<a class="self-link" href="#sizing-drop-initials"></a></h3> <table class="def propdef" data-link-for-hint="initial-letter"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-initial-letter">initial-letter</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://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④②">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value②"><number [1,∞]></a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#integer-value" id="ref-for-integer-value"><integer [1,∞]></a> | <number [1,∞]> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all">&&</a> [ drop | raise ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <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>certain inline-level boxes and ::first-letter and inside ::marker boxes (<a href="#first-most-inline-level">see prose</a>) <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>the keyword <a class="css" data-link-type="maybe" href="#valdef-initial-letter-normal" id="ref-for-valdef-initial-letter-normal">normal</a> or a number paired with an integer <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>by computed value type </table> This property specifies the <a data-link-type="dfn" href="#initial-letter-initial-letter-size" id="ref-for-initial-letter-initial-letter-size">size</a> and <a data-link-type="dfn" href="#initial-letter-initial-letter-sink" id="ref-for-initial-letter-initial-letter-sink">sink</a> for dropped, raised, and sunken initial letters as the number of lines spanned. <div class="example" id="example-aaaee605"> <a class="self-link" href="#example-aaaee605"></a> For example, the following code will create a 2-line dropped initial letter at the beginning of each paragraph that immediately follows a second-level heading: <pre>h2 + p::first-letter { initial-letter: 2; }</pre> </div> It takes the following values: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter" data-dfn-type="value" data-export id="valdef-initial-letter-normal">normal</dfn> <dd> No special initial letter effect. Text behaves as normal. <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter" data-dfn-type="value" data-export id="valdef-initial-letter-number-1"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value④"><number [1,∞]></a></dfn> <dd> This first argument defines the <dfn class="dfn-paneled" data-dfn-for="initial-letter" data-dfn-type="dfn" data-lt="initial letter size" data-noexport id="initial-letter-initial-letter-size">size</dfn> of the initial letter in terms of how many lines it occupies. Values less than one are invalid. <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter" data-dfn-type="value" data-export id="valdef-initial-letter-integer-1"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#integer-value" id="ref-for-integer-value①"><integer [1,∞]></a></dfn> <dd> This optional second argument defines the number of lines the initial letter should <dfn class="dfn-paneled" data-dfn-for="initial-letter" data-dfn-type="dfn" data-local-lt="sink" data-lt="initial letter sink" data-noexport id="initial-letter-initial-letter-sink">sink</dfn>. A value of 1 indicates a <a data-link-type="dfn" href="#raised-initial" id="ref-for-raised-initial">raised initial</a>; values greater than 1 indicate a <a data-link-type="dfn" href="#sunken-initial" id="ref-for-sunken-initial">sunken initial</a>. Values less than one are invalid. <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter" data-dfn-type="value" data-export id="valdef-initial-letter-raise">raise</dfn> <dd> Computes to an <a data-link-type="dfn" href="#initial-letter-initial-letter-sink" id="ref-for-initial-letter-initial-letter-sink①">initial letter sink</a> of 1. <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter" data-dfn-type="value" data-export id="valdef-initial-letter-drop">drop</dfn> <dd> Computes to an <a data-link-type="dfn" href="#initial-letter-initial-letter-sink" id="ref-for-initial-letter-initial-letter-sink②">initial letter sink</a> equal to the <a data-link-type="dfn" href="#initial-letter-initial-letter-size" id="ref-for-initial-letter-initial-letter-size①">initial letter size</a> floored to the nearest positive whole number. </dl> If the <a data-link-type="dfn" href="#initial-letter-initial-letter-sink" id="ref-for-initial-letter-initial-letter-sink③">initial letter sink</a> value is omitted, <a class="css" data-link-type="maybe" href="#valdef-initial-letter-drop" id="ref-for-valdef-initial-letter-drop">drop</a> is assumed. Values other than <a class="css" data-link-type="maybe" href="#valdef-initial-letter-normal" id="ref-for-valdef-initial-letter-normal①">normal</a> cause the affected box to become an <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="initial letter | initial letter box" data-noexport id="initial-letter">initial letter box</dfn>, which is an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#in-flow" id="ref-for-in-flow④">in-flow</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box①②">inline-level box</a> with special layout behavior. <div class="example" id="example-68b34294"> <a class="self-link" href="#example-68b34294"></a> Here are some examples of <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter②">initial-letter</a> usage: <dl> <dt><a class="css" data-link-type="propdesc" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter③">initial-letter: 3</a> <dt><a class="css" data-link-type="propdesc" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter④">initial-letter: 3 3</a> <dt><a class="css" data-link-type="propdesc" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter⑤">initial-letter: 3 drop</a> <dt><a class="css" data-link-type="propdesc" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter⑥">initial-letter: drop 3</a> <dd> Represents a <a data-link-type="dfn" href="#dropped-initial" id="ref-for-dropped-initial①">dropped initial</a> 3 lines high, 3 lines deep. <img alt="3 lines high, 3 lines deep" src="images/InitialLetter33.png" width="360"> <dt><a class="css" data-link-type="propdesc" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter⑦">initial-letter: 3 2</a> <dd> Represents a <a data-link-type="dfn" href="#sunken-initial" id="ref-for-sunken-initial①">sunken initial</a> 3 lines high, 2 lines deep. <img alt="3 lines high, 2 lines deep" src="images/InitialLetter32.png" width="360"> <dt><a class="css" data-link-type="propdesc" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter⑧">initial-letter: 3 1</a> <dt><a class="css" data-link-type="propdesc" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter⑨">initial-letter: 3 raise</a> <dt><a class="css" data-link-type="propdesc" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter①⓪">initial-letter: raise 3</a> <dd> Represents a <a data-link-type="dfn" href="#raised-initial" id="ref-for-raised-initial①">raised initial</a> 3 lines high, 1 line deep. <img alt="3 lines high, 1 line deep" src="images/InitialLetter31.png" width="360"> <dt><a class="css" data-link-type="propdesc" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter①①">initial-letter: 2.51 3</a> <dd> The size of the initial letter does not have to be an integral number of lines. In this case only the top aligns. <img alt="Non-integral initial letter that only aligns at base" src="images/non-integer-initial.png" width="360"> </dl> </div> <div class="example" id="example-80ced456"> <a class="self-link" href="#example-80ced456"></a> In conjunction with other CSS properties, initial-letter can be used to create “adjacent initial letters,” where the initial letter is adjacent to the text: <pre>p::first-letter { initial-letter: 3; color: red; width: 5em; text-align: right; margin-left: -5em; } p { margin-left: 5em; } </pre> <figure> <img alt="Initial letter adjacent to text" src="images/adjacent-initial-letter.png" width="360"> </figure> </div> <h4 class="heading settled" data-level="7.3.1" id="first-most-inline-level">7.3.1. Applicability<a class="self-link" href="#first-most-inline-level"></a></h4> To give authors more control over which characters can be styled as an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter④">initial letter</a> and to allow the possibility of multi-character initial letters (such as for first word or first phrase styling), the <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter①②">initial-letter</a> property applies not just to the CSS-defined <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter④">::first-letter</a> pseudo-element, but also to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-lists-3/#valdef-list-style-position-inside" id="ref-for-valdef-list-style-position-inside">inside</a>-positioned <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker">::marker</a> pseudo-elements and to <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box①③">inline-level boxes</a> that are placed at the start of the first line. Specifically, initial-letter applies to any inline-level box—including any such ::first-letter or ::marker box—that is the first child of its parent box and whose ancestors (if any) that are descendants of its <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#containing-block" id="ref-for-containing-block⑥">containing block</a> are all first-child <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box④⑤">inline boxes</a> that have a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value②">computed</a> initial-letter value of <a class="css" data-link-type="maybe" href="#valdef-initial-letter-normal" id="ref-for-valdef-initial-letter-normal②">normal</a>. <div class="example" id="example-9e69d0f4"> <a class="self-link" href="#example-9e69d0f4"></a> For example, the <code></code>, <code></code>, and <code></code> elements in the following example are "first-most inline-level descendants" of the <code></code>, but the <code></code> element is not: <pre>This phrase is styled specially. … </pre> If we apply the following rules: <pre>em { initial-letter: 2; } b, strong { initial-letter: 3; } </pre> The <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter①⑤">initial-letter</a> property will take effect only on the <code></code>. The styling on <code></code> is ignored, as it has an ancestor already styled as an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑥">initial letter</a>; and the styling on <code></code> is ignored because it is a second sibling. The result might be rendered as <figure> <img alt="“This phrase” becomes the dropped text spanning two lines, the remainder of the text wrapping alongside." height="57" src="images/firstmost-inline.png" width="428"> </figure> </div> If <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter①⑥">initial-letter</a> is applied to an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level-box" id="ref-for-inline-level-box①⑤">inline-level box</a> that is not positioned at the start of the line due to bidi reordering or which is otherwise preceded by other <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level⑨">inline-level</a> content, its <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#used-value" id="ref-for-used-value">used value</a> is <a class="css" data-link-type="maybe" href="#valdef-initial-letter-normal" id="ref-for-valdef-initial-letter-normal③">normal</a>, and it is not formatted as an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑦">initial letter</a>. The effect of the <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter①⑦">initial-letter</a> property is undefined on children of <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box">ruby base container boxes</a> and on <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-container" id="ref-for-ruby-container①">ruby container boxes</a>. Note: The <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter①⑧">initial-letter</a> property cannot apply to any element whose <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-float" id="ref-for-propdef-float">float</a> is not none or <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-position" id="ref-for-propdef-position">position</a> is not <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-position-3/#valdef-position-static" id="ref-for-valdef-position-static">static</a>, because these values cause its <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display">display</a> to compute to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-block" id="ref-for-valdef-display-block">block</a>. <h3 class="heading settled" data-level="7.4" id="aligning-initial-letter">7.4. Alignment of Initial Letters: the <a class="property css" data-link-type="property" href="#propdef-initial-letter-align" id="ref-for-propdef-initial-letter-align①">initial-letter-align</a> property<a class="self-link" href="#aligning-initial-letter"></a></h3> As mentioned earlier, the alignment of initial letters depends on the script used. The <a class="property css" data-link-type="property" href="#propdef-initial-letter-align" id="ref-for-propdef-initial-letter-align②">initial-letter-align</a> property can be used to specify the proper alignment. <table class="def propdef" data-link-for-hint="initial-letter-align"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-initial-letter-align">initial-letter-align</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ border-box<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> [ alphabetic <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⑤">|</a> ideographic | hanging | leading ]? ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-req" id="ref-for-mult-req">!</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>alphabetic <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>certain inline-level boxes and ::first-letter and inside ::marker boxes (<a href="#first-most-inline-level">see prose</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 keyword(s) <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>discrete </table> This property specifies the alignment points used to size and position an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑧">initial letter</a>. Two sets of alignment points are necessary: the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over⑧">over</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#under" id="ref-for-under⑥">under</a> alignment points of the initial letter are matched to corresponding over and under points of the <a data-link-type="dfn" href="#root-inline-box" id="ref-for-root-inline-box①⓪">root inline box</a>. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter-align" data-dfn-type="value" data-export id="valdef-initial-letter-align-alphabetic">alphabetic</dfn> <dd> Use the <a data-link-type="dfn" href="#cap-height-baseline" id="ref-for-cap-height-baseline①">cap-height</a> and <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline⑨">alphabetic</a> baselines of the surrounding text to align the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter①⓪">initial letter</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter-align" data-dfn-type="value" data-export id="valdef-initial-letter-align-ideographic">ideographic</dfn> <dd> Use the <a data-link-type="dfn" href="#ideographic-ink-over-baseline" id="ref-for-ideographic-ink-over-baseline①">ideographic-ink-over</a> and <a data-link-type="dfn" href="#ideographic-ink-under-baseline" id="ref-for-ideographic-ink-under-baseline①">ideographic-ink-under</a> baselines of the surrounding text to align the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter①①">initial letter</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter-align" data-dfn-type="value" data-export id="valdef-initial-letter-align-hanging">hanging</dfn> <dd> Use the <a data-link-type="dfn" href="#hanging-baseline" id="ref-for-hanging-baseline①">hanging</a> and <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline①⓪">alphabetic</a> baselines of the surrounding text to align the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter①②">initial letter</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter-align" data-dfn-type="value" data-export id="valdef-initial-letter-align-leading">leading</dfn> <dd> Use the over/under half-leading edges (i.e. <a data-link-type="dfn" href="#ascent-metric" id="ref-for-ascent-metric⑤">ascent</a>/<a data-link-type="dfn" href="#descent-metric" id="ref-for-descent-metric⑤">descent</a> + <a data-link-type="dfn" href="#half-leading" id="ref-for-half-leading⑥">half-leading</a>) of the surrounding text to align the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter①③">initial letter</a>. Note: This will essentially match the edges of the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter①④">initial letter</a> to middle of the line gap above/below the first/last impacted lines, which is an effect sometimes used in certain types of <a href="https://www.w3.org/TR/ilreq/#h_scripts_without_hanging_baseline">Indic typesetting</a> <a data-link-type="biblio" href="#biblio-ilreq" title="Indic Layout Requirements">[ILREQ]</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter-align" data-dfn-type="value" data-export id="valdef-initial-letter-align-border-box">border-box</dfn> <dd> Use the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter①⑤">initial letter box</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-under" id="ref-for-line-under⑥">line-under</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-over" id="ref-for-line-over⑥">line-over</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#border-edge" id="ref-for-border-edge">border edges</a> as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over①⓪">over</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#under" id="ref-for-under⑧">under</a> alignment points, respectively. </dl> <div class="example" id="example-a1ba2074"> <a class="self-link" href="#example-a1ba2074"></a> The vertical writing mode example earlier (in <a href="#initial-letter-intro">§ 7.1 An Introduction to Initial Letters</a>) could be coded as: <pre>span.initial { initial-letter: 2; initial-letter-align: ideographic; } </pre> </div> Except when <a class="css" data-link-type="maybe" href="#valdef-initial-letter-align-border-box" id="ref-for-valdef-initial-letter-align-border-box">border-box</a> is specified, the alignment points of the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter①⑥">initial letter</a> are automatically determined from its contents: <ol> <li>If the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter①⑦">initial letter</a> is an atomic inline, use its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over①①">over</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#under" id="ref-for-under⑨">under</a> content-box edges. <li>Else if the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter①⑧">initial letter</a> contains any character having the Han, Hangul, Kana, or Yi <a data-link-type="dfn">Unicode script</a> property, use the <a data-link-type="dfn" href="#ideographic-ink-over-baseline" id="ref-for-ideographic-ink-over-baseline②">ideographic-ink-over</a> and <a data-link-type="dfn" href="#ideographic-ink-under-baseline" id="ref-for-ideographic-ink-under-baseline②">ideographic-ink-under</a> baselines. <li>Else if the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter①⑨">initial letter</a> contains any character having the Han, Hangul, Kana, or Yi <a data-link-type="dfn">Unicode script</a> property, use the <a data-link-type="dfn" href="#hanging-baseline" id="ref-for-hanging-baseline②">hanging</a> and <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline①①">alphabetic</a> baselines. <li>Else use the <a data-link-type="dfn" href="#cap-height-baseline" id="ref-for-cap-height-baseline②">cap-height</a> and <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline①②">alphabetic</a> baselines. </ol> <div class="issue" id="issue-9175a33b"> <a class="self-link" href="#issue-9175a33b"></a> Correct alignment of initial letter in scripts such as Hebrew and Thai is currently not possible because OpenType lacks corresponding metrics. (<a href="https://github.com/w3c/csswg-drafts/issues/5244">Issue 5244</a>) <figure> <img alt="Hebrew 2-line drop-letter alignment using the hebrew-top and alphabetic baselines" src="images/hebrew-initial-letter.png" width="480"> </figure> </div> Note: The ordering of keywords in this property is fixed in case <a class="css" data-link-type="maybe" href="#valdef-initial-letter-align-border-box" id="ref-for-valdef-initial-letter-align-border-box①">border-box</a> is expanded to [ border-box | alphabetic | ideographic | hanging ] to allow explicitly specifying the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter②⓪">initial letter</a>’s alignment points. <h4 class="heading settled" data-level="7.4.1" id="initial-letter-align-defaults">7.4.1. UA Default Stylesheet for <a class="property css" data-link-type="property" href="#propdef-initial-letter-align" id="ref-for-propdef-initial-letter-align③">initial-letter-align</a><a class="self-link" href="#initial-letter-align-defaults"></a></h4> In order to provide the better behavior by default, UAs must include in their default UA style sheet the following rules: <pre>[lang]:lang(zh, ja, ko, ii) { initial-letter-align: ideographic; } [lang]:lang(hi, mr, ne, pi, kok, brx, mai, sd, sa) { initial-letter-align: hanging; } /* Script tags override language tags */ [lang]:lang('*-Latn', '*-Cyrl') { initial-letter-align: alphabetic; } [lang]:lang('*-Hani', '*-Hant', '*-Hans') { initial-letter-align: ideographic; } </pre> <a class="self-link" href="#issue-fbd38850"></a> This only covers the most common cross-linguistic transcription systems. Should we include any other / all script tags in the UA style sheet? <h3 class="heading settled" data-level="7.5" id="initial-letter-layout">7.5. Initial Letter Layout<a class="self-link" href="#initial-letter-layout"></a></h3> There are two types of <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter②①">initial letter boxes</a>: those that arise from non-replaced <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box④⑥">inline boxes</a> and those that arise from <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#atomic-inline" id="ref-for-atomic-inline④">atomic inlines</a>. For the non-atomic <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="inline initial letter | inline initial letter box" data-noexport id="inline-initial-letter">inline initial letter</dfn>, the box and its contents participate in the same <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context①⓪">inline formatting context</a> as the line on which it occurs, and a lot of special rules apply to give the expected sizing and alignment. For an <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="atomic initial letter | atomic initial letter box" data-noexport id="atomic-initial-letter">atomic initial letter</dfn>, however, which is either a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#replaced-element" id="ref-for-replaced-element①">replaced element</a> or which establishes an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#independent-formatting-context" id="ref-for-independent-formatting-context">independent formatting context</a> for its contents, the sizing of the box (aside from its <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#automatic-size" id="ref-for-automatic-size">automatic size</a> in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis⑨">block axis</a>) and layout of the contents within the box follows the usual rules: it is primarily the positioning of the box which is special. <h4 class="heading settled" data-level="7.5.1" id="initial-letter-properties">7.5.1. Properties Applying to Initial Letters<a class="self-link" href="#initial-letter-properties"></a></h4> All properties that apply to an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box④⑦">inline box</a> also apply to an <a data-link-type="dfn" href="#inline-initial-letter" id="ref-for-inline-initial-letter">inline initial letter</a> except for <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align①⓪">vertical-align</a> and its <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#longhand" id="ref-for-longhand①">sub-properties</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/fonts.html#propdef-font-size" id="ref-for-propdef-font-size④">font-size</a>, <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height②①">line-height</a>, <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge②①">line-fit-edge</a>, and <a class="property css" data-link-type="property" href="#propdef-inline-sizing" id="ref-for-propdef-inline-sizing②">inline-sizing</a>. Additionally, all of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#sizing-property" id="ref-for-sizing-property">sizing properties</a> and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-box-sizing" id="ref-for-propdef-box-sizing">box-sizing</a> also apply to <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter②②">initial letters</a> (see <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[css-sizing-3]</a>). All properties that apply to an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#atomic-inline" id="ref-for-atomic-inline⑤">atomic inline</a> also apply to the atomic inline when styled as an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter②③">initial letter</a>, except for <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align①①">vertical-align</a> and its <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#longhand" id="ref-for-longhand②">sub-properties</a>. <h4 class="heading settled" data-level="7.5.2" id="initial-letter-box">7.5.2. Margins, Borders, and Padding<a class="self-link" href="#initial-letter-box"></a></h4> Initial letters can be styled with <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin" id="ref-for-margin⑨">margins</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding" id="ref-for-padding⑥">padding</a>, and <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border⑥">borders</a> just like any other box. Unless <a class="property css" data-link-type="property" href="#propdef-initial-letter-align" id="ref-for-propdef-initial-letter-align④">initial-letter-align</a> is <a class="css" data-link-type="maybe" href="#valdef-initial-letter-align-border-box" id="ref-for-valdef-initial-letter-align-border-box②">border-box</a>, its vertical alignment and <a href="#sizing-initial-letter">font sizing</a> are not affected. However the effective exclusion area, which is typically the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter②④">initial letter</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-box" id="ref-for-margin-box②">margin box</a> (see <a class="property css" data-link-type="property" href="#propdef-initial-letter-wrap" id="ref-for-propdef-initial-letter-wrap①">initial-letter-wrap</a>) is affected. When padding and borders are zero, the initial letter may be kerned; see below. <h4 class="heading settled" data-level="7.5.3" id="sizing-initial-letter">7.5.3. Font Sizing of Initial Letters<a class="self-link" href="#sizing-initial-letter"></a></h4> For an <a data-link-type="dfn" href="#inline-initial-letter" id="ref-for-inline-initial-letter①">inline initial letter</a>, the font size used for sizing the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter②⑤">initial letter</a> contents is calculated to fulfill its specified <a data-link-type="dfn" href="#initial-letter-initial-letter-size" id="ref-for-initial-letter-initial-letter-size②">size</a> (see <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter①⑨">initial-letter</a>) as anchored by its specified alignment points (see <a class="property css" data-link-type="property" href="#propdef-initial-letter-align" id="ref-for-propdef-initial-letter-align⑤">initial-letter-align</a>). Note that no layout is required in this calculation: it is based only on computed values and font metrics. These <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#used-value" id="ref-for-used-value①">used</a> font size calculations do not affect the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value③">computed</a> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/fonts.html#propdef-font-size" id="ref-for-propdef-font-size⑤">font-size</a>, and therefore have no effect on the computation of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#em" id="ref-for-em">em</a> length values, etc. <a class="self-link" href="#issue-c519e9ec"></a> What about inheritance to descendants? <a href="https://github.com/w3c/csswg-drafts/issues/4988">[Issue #4988]</a> The line height used in these calculations is the <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height②②">line-height</a> of the containing block (or, in the case where a baseline grid is in use, the baseline-to-baseline spacing required by the baseline grid <a data-link-type="biblio" href="#biblio-css-line-grid-1" title="CSS Line Grid Module Level 1">[CSS-LINE-GRID-1]</a>). The contents of the lines spanned, and therefore any variation in their heights and positions, is not accounted for. <figure> <img alt="Text underlay shows how initial letter alignment is not affected by the content of the spanned lines." src="images/infinite-text.png" width="300"> </figure> For an <var>N</var>-line drop initial in a Western script, the cap-height of the letter needs to be (<var>N</var> – 1) times the line-height, plus the cap-height of the surrounding text. Note this height is not the font size of the drop initial. Actually calculating this font size is tricky. For an <var>N</var>-line drop initial, we find the drop initial font size to be: <figure> <img alt="Font size of drop cap = ((N-1) * line-height + [cap-height of para] * [font size of paragraph])/[cap-height ratio of drop initial font]" src="images/InitialCapEquation.png" width="604"> </figure> <a class="self-link" href="#issue-20a01c1f"></a> Update this calculation to be a) generic across writing systems / alignment points and b) handle non-integer sizes. <div class="example" id="example-c366e114"><a class="self-link" href="#example-c366e114"></a> A three-line drop initial in Adobe Minion Pro would have a font size of 61.2pt given 12pt text, 16pt line-height, and a cap-height of 651/1000 (from the font’s OS/2 table). </div> For an <a data-link-type="dfn" href="#atomic-initial-letter" id="ref-for-atomic-initial-letter">atomic initial letter</a>, the used font size is the computed font size as usual. <h4 class="heading settled" data-level="7.5.4" id="initial-letter-shaping">7.5.4. Shaping and Glyph Selection<a class="self-link" href="#initial-letter-shaping"></a></h4> When <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter②⓪">initial-letter</a> is not <a class="css" data-link-type="maybe" href="#valdef-initial-letter-normal" id="ref-for-valdef-initial-letter-normal④">normal</a>, an <a data-link-type="dfn" href="#inline-initial-letter" id="ref-for-inline-initial-letter②">inline initial letter</a> is isolated for glyph shaping; however the text after it should shape across the inline initial letter box’s boundaries, assuming its presence as part of the first line’s text content. (See <a href="https://www.w3.org/TR/css-text-3/#boundary-shaping"><cite>CSS Text 3</cite> § 7.3 Shaping Across Element Boundaries</a>.) For example, if the first letter of the word “يحق” were styled with initial-letter: 2 1, the first letter would be styled in its isolated form “ي”, as the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter②⑥">initial letter</a>, followed by the medial/final-form “ﺤﻖ”, which assumes it is preceded by the initial letter’s contents as normal text. <figure> <img alt="Two-line Arabic drop-cap showing isolated form of the first letter, connected form of the rest of the word." height="82" src="images/arabic-drop-cap.png" width="134"> <figcaption>Two-line Arabic “Drop-cap”</figcaption> </figure> <h4 class="heading settled" data-level="7.5.5" id="initial-letter-box-size">7.5.5. Sizing the Initial Letter Box<a class="self-link" href="#initial-letter-box-size"></a></h4> For an <a data-link-type="dfn" href="#inline-initial-letter" id="ref-for-inline-initial-letter④">inline initial letter</a>, if the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter②⑦">initial letter</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#width" id="ref-for-width">preferred width</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#height" id="ref-for-height">preferred height</a> is <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#definite" id="ref-for-definite">definite</a>, use that value (clamped as required by the <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#min-width" id="ref-for-min-width">min size</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#max-width" id="ref-for-max-width">max size</a> properties, and handling <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-box-sizing" id="ref-for-propdef-box-sizing①">box-sizing</a> as required) for that dimension of the box. Otherwise it is considered to have an <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#automatic-size" id="ref-for-automatic-size①">automatic size</a> in that dimension and its <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#x10" id="ref-for-x10④">content box</a> is sized to fit both: <ul> <li> The specified <a data-link-type="dfn" href="#initial-letter-initial-letter-sink" id="ref-for-initial-letter-initial-letter-sink④">sink</a> (i.e the space between the over alignment point and the under alignment point). <li> The glyph outlines of all the glyphs it contains—excluding any that <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-3/#hang" id="ref-for-hang">hang</a> (see <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-4/#propdef-hanging-punctuation" id="ref-for-propdef-hanging-punctuation">hanging-punctuation</a>)—as well as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-box" id="ref-for-margin-box③">margin boxes</a> of any <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#atomic-inline" id="ref-for-atomic-inline⑦">atomic inlines</a> it contains. <div class="example" id="initial-letter-exclusions"> <a class="self-link" href="#initial-letter-exclusions"></a> The glyph(s) of an initial letter do not always fit within the specified sink. For example, if an initial letter has a descender, it could crash into the (n+1)th line of text. This is not desirable. <figure> <img alt="3-line drop cap with J, with descender crashing into fourth line of text" src="images/Dropcap-J-3line-crash.png" width="480"> <figcaption>Incorrect: three-line initial letter (<a class="css" data-link-type="propdesc" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter②②">initial-letter: drop 3</a>) with descender. In this font, the capital “J” extends well below the baseline (shown in red).</figcaption> </figure> Therefore all <a data-link-type="dfn" href="#line-box" id="ref-for-line-box④⑥">line boxes</a> impacted by the glyph outlines of an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter②⑧">initial letter</a> need to be excluded, not just those within range of the <a data-link-type="dfn" href="#initial-letter-initial-letter-sink" id="ref-for-initial-letter-initial-letter-sink⑤">initial letter sink</a>. <figure> <img alt="3-line drop cap with J, but four-line exclusion" src="images/Dropcap-J-3line-exclude.png" width="480"> <figcaption>Correct: text excluded around glyph bounding box</figcaption> </figure> </div> </ul> However, if its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-start" id="ref-for-block-start③">block-start</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding" id="ref-for-padding⑦">padding</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border⑦">border</a> are both zero, then its block-start <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#content-edge" id="ref-for-content-edge⑤">content edge</a> instead coincides with its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over①②">over</a> alignment point exactly, and any content overflowing above that point is ignored for the purpose of layout. Note: If an <a data-link-type="dfn" href="#inline-initial-letter" id="ref-for-inline-initial-letter⑤">inline initial letter</a> has ascenders above its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over①③">over</a> alignment point, and the author has not provided sufficient <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin" id="ref-for-margin①⓪">margin</a> on either the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter②⑨">initial letter</a> itself or its <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#containing-block" id="ref-for-containing-block⑦">containing block</a>, then those ascenders might collide with preceding content. Note: It might be nice to automatically provide the necessary spacing by treating such ascenders as a margin that can collapse with the margin of the containing block, and thus guarantee the requisite spacing without imposing any additional space unless it becomes actually necessary. Depending on implementation complexity, this option may be explored in the future; but in the meantime, authors need to be careful to provide the requisite spacing explicitly. <a class="self-link" href="#issue-8de59d00"></a> Should the hanging punctuation be included in the box instead (so that the box is drawn around the punctuation when it is made visible through borders/background), but rather only excluded when positioning the box (so that the initial letter remains flush, with the hanging punctuation properly hanging)? See <a href="https://github.com/w3c/csswg-drafts/issues/310">discussion</a>. For <a data-link-type="dfn" href="#atomic-initial-letter" id="ref-for-atomic-initial-letter①">atomic initial letters</a>, sizing follows the usual rules for that type of <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#atomic-inline" id="ref-for-atomic-inline⑧">atomic inline</a>. However, if the box has an <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#automatic-size" id="ref-for-automatic-size②">automatic</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-size" id="ref-for-block-size">block size</a> (<a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto">auto</a>), then its block size is determined as for an <a data-link-type="dfn" href="#inline-initial-letter" id="ref-for-inline-initial-letter⑥">inline initial letter</a> with <a class="css" data-link-type="maybe" href="#valdef-initial-letter-align-border-box" id="ref-for-valdef-initial-letter-align-border-box③">border-box</a> alignment, and is <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#definite" id="ref-for-definite①">definite</a>. <h4 class="heading settled" data-level="7.5.6" id="initial-letter-content-align">7.5.6. Alignment Within an Initial Letter Box<a class="self-link" href="#initial-letter-content-align"></a></h4> By default (i.e. under <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#automatic-size" id="ref-for-automatic-size③">automatic sizing</a>), the content box of an <a data-link-type="dfn" href="#inline-initial-letter" id="ref-for-inline-initial-letter⑦">inline initial letter</a> is fitted exactly to its content, and alignment properties like <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align">text-align</a> or <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content②">align-content</a> do not apply. However, if the box is not sized automatically: <ul> <li> If the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-size" id="ref-for-inline-size">inline size</a> is <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#definite" id="ref-for-definite②">definite</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align①">text-align</a> is honored for aligning the contents of the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter③⓪">initial letter</a> within its box in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis⑤">inline axis</a> (using its inline-axis bearings as usual, not the bounding box of its glyph outlines). <li> If the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-size" id="ref-for-block-size②">block size</a> is <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#definite" id="ref-for-definite③">definite</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content③">align-content</a> is honored for aligning its contents in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis①⓪">block axis</a> (using its block-axis bearings, synthesizing them if needed). </ul> <h3 class="heading settled" data-level="7.6" id="initial-letter-position">7.6. Initial Letter Positioning and Spacing<a class="self-link" href="#initial-letter-position"></a></h3> <h4 class="heading settled" data-level="7.6.1" id="initial-letter-block-position">7.6.1. Block-axis Positioning<a class="self-link" href="#initial-letter-block-position"></a></h4> In the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis①②">block axis</a>, the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter③①">initial letter</a> is positioned with respect to the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box④⑦">line box</a> in which it <a data-link-type="dfn" href="#originating-line" id="ref-for-originating-line">originates</a> as required to satisfy its alignment (<a class="property css" data-link-type="property" href="#propdef-initial-letter-align" id="ref-for-propdef-initial-letter-align⑥">initial-letter-align</a>) and specified <a data-link-type="dfn" href="#initial-letter-initial-letter-sink" id="ref-for-initial-letter-initial-letter-sink⑥">sink</a> (<a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter②③">initial-letter</a>): <ul> <li data-md> If its <a data-link-type="dfn" href="#initial-letter-initial-letter-size" id="ref-for-initial-letter-initial-letter-size③">size</a> is greater than or equal to its <a data-link-type="dfn" href="#initial-letter-initial-letter-sink" id="ref-for-initial-letter-initial-letter-sink⑦">sink</a>, the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter③②">initial letter</a> is positioned to satisfy its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#under" id="ref-for-under①⓪">under</a> alignment, and then shifted by (sink - 1) × <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height②③">line-height</a> of <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#containing-block" id="ref-for-containing-block⑧">containing block</a> towards the containing block’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-end" id="ref-for-block-end④">block end</a>. <li data-md> If its <a data-link-type="dfn" href="#initial-letter-initial-letter-size" id="ref-for-initial-letter-initial-letter-size④">size</a> is less than its <a data-link-type="dfn" href="#initial-letter-initial-letter-sink" id="ref-for-initial-letter-initial-letter-sink⑨">sink</a>, the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter③③">initial letter</a> is positioned to satisfy its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#over" id="ref-for-over①④">over</a> alignment. </ul> Note: An <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter③④">initial letter</a> is essentially positioned such that it would sink the number of lines specified by <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter②④">initial-letter</a>’s second argument and align to the requisite <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#under" id="ref-for-under①①">under</a> alignment point if it was assumed that its containing block held only the initial letter itself followed by an infinite sequence of plain text as the direct contents of its <a data-link-type="dfn" href="#root-inline-box" id="ref-for-root-inline-box①①">root inline box</a>. Its position is not affected by line height inconsistencies introduced by the contents of the impacted line boxes. <figure> <img alt="Constant-sized text underlay shows how initial letter alignment is not affected by the content of the spanned lines." src="images/infinite-text.png" width="300"> </figure> The <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter③⑥">initial letter</a> does not increase the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-height" id="ref-for-logical-height①①">logical height</a> of the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box④⑧">line box</a> in which it participates: it can protrude above or below it. It must be positioned such that its own <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-start" id="ref-for-block-start⑤">block-start</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-edge" id="ref-for-margin-edge①">margin edge</a> is below its <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#containing-block" id="ref-for-containing-block①⓪">containing block</a>’s block-start <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#content-edge" id="ref-for-content-edge⑥">content edge</a>, and thus can force its <a data-link-type="dfn" href="#originating-line" id="ref-for-originating-line①">originating line box</a> (and subsequent content) to shift further away from that edge. <h4 class="heading settled" data-level="7.6.2" id="initial-letter-inline-position">7.6.2. Inline Kerning<a class="self-link" href="#initial-letter-inline-position"></a></h4> If the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter③⑦">initial letter</a> is a non-atomic inline with an <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#automatic-size" id="ref-for-automatic-size④">automatic</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-size" id="ref-for-inline-size①">inline size</a> and zero padding and borders, its <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-box" id="ref-for-margin-box④">margin box</a> is kerned (negatively inset) by the distance from the start edge of its content box to the point in the content that would have been placed at the start edge of the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box④⑨">line box</a> if it were not an initial letter (i.e. the distance between its glyph bounding box and its start side bearing). This inset is effectively an additional <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-start" id="ref-for-inline-start">inline-start</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin" id="ref-for-margin①①">margin</a> on the box. <h3 class="heading settled" data-level="7.7" id="initial-letter-wrapping">7.7. Initial Letter Wrapping: the <a class="property css" data-link-type="property" href="#propdef-initial-letter-wrap" id="ref-for-propdef-initial-letter-wrap②">initial-letter-wrap</a> property<a class="self-link" href="#initial-letter-wrapping"></a></h3> Note: <a class="property css" data-link-type="property" href="#propdef-initial-letter-wrap" id="ref-for-propdef-initial-letter-wrap③">initial-letter-wrap</a> is at risk. <table class="def propdef" data-link-for-hint="initial-letter-wrap"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-initial-letter-wrap">initial-letter-wrap</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://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⑧">|</a> first | all | grid | <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage④"><length-percentage></a> <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>certain inline-level boxes and ::first-letter and inside ::marker boxes (<a href="#first-most-inline-level">see prose</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>relative to <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#logical-width" id="ref-for-logical-width④">logical width</a> of (last fragment of) initial letter <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword or computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑤"><length-percentage></a> 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>by computed value type </table> This property specifies whether lines impacted by an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter③⑨">initial letter</a> are shortened to fit the rectangular shape of the initial letter box or the contour of its glyph outline. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export id="valdef-initial-letter-wrap-none">none</dfn> <dd> No contour-fitting is performed: each impacted line is aligned flush to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-end" id="ref-for-inline-end">inline-end</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-edge" id="ref-for-margin-edge②">margin edge</a> of the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter④①">initial letter</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export id="valdef-initial-letter-wrap-first">first</dfn> <dd> Behaves as <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-none" id="ref-for-valdef-initial-letter-wrap-none">none</a> if the first <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit">typographic character unit</a> after the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter④②">initial letter</a> belongs to Unicode General Category Zs. Otherwise behaves as for <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-all" id="ref-for-valdef-initial-letter-wrap-all">all</a> on the first line of the block containing the initial letter and as none on the rest. <div class="example" id="example-8c68c539"> <a class="self-link" href="#example-8c68c539"></a> This example shows why contour-fitting the first line is necessary, and why it is dropped when the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter④③">initial letter</a> is followed by a space: <figure> <img alt="optical kerning in the presence or absence of a space after the initial letter" src="images/OpticalKerning.png" width="200"> <figcaption> In the top paragraph, the initial letter "A" has a word space after it: the gap between the top of the "A" and the next letter provides the necessary word separation. In the next paragraph, the initial letter "A" is part of the first word, and leaving a gap between the top of the "A" and the next letter would create a jarring visual break within the word. In this case, the first line of text should be kerned into the initial letter’s area, as shown in the bottom paragraph. </figcaption> </figure> </div> <a class="self-link" href="#issue-58dffa4b"></a> Do we need an unconditional <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first" id="ref-for-valdef-initial-letter-wrap-first">first</a>? (I.e. Should we rename this value to auto and add a first value that does not check for spaces?) See GitHub issue <a href="https://github.com/w3c/csswg-drafts/issues/410">410</a> <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export id="valdef-initial-letter-wrap-all">all</dfn> <dd> For each line of text impacted by the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter④④">initial letter</a>, the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box⑤⓪">line box</a> adjacent to the initial letter starts at the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#start" id="ref-for-start">start</a>-most point that does not overlap the initial letter’s glyph outline. If the value of shape-outside is not <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-shapes-1/#valdef-shape-outside-none" id="ref-for-valdef-shape-outside-none">none</a>, shape-outside is used instead of the glyph outline. In both cases, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-shapes-1/#propdef-shape-margin" id="ref-for-propdef-shape-margin">shape-margin</a> is applied to expand the outline, and the resulting outline is clipped by the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter④⑦">initial letter</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-edge" id="ref-for-margin-edge③">margin edges</a>. Note: This value is at-risk. <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export id="valdef-initial-letter-wrap-grid">grid</dfn> <dd> This value is the same as <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-none" id="ref-for-valdef-initial-letter-wrap-none②">none</a>, except that the exclusion area of the impacted lines is increased as necessary for its end-edge to land on the character grid, i.e. to be a multiple of (1ic + <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing" id="ref-for-propdef-letter-spacing">letter-spacing</a>) as computed on the containing block. The <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-align-3/#propdef-justify-self" id="ref-for-propdef-justify-self">justify-self</a> property can then be used to align the initial letter box within the exclusion area. <figure> <img alt="Diagram of Japanese initial letter in vertical writing mode" src="images/CJK-Initial.001.png" width="480"> <figcaption>Diagram of Japanese initial letter in vertical writing mode</figcaption> </figure> Note: In this example, the exclusion area for the drop initial is larger than its glyph in order to preserve inline-axis alignment. Note: This value is also at-risk. <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export id="valdef-initial-letter-wrap-length"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value③"><length></a></dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export id="valdef-initial-letter-wrap-percentage"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value②"><percentage></a></dfn> <dd> This value behaves the same as <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first" id="ref-for-valdef-initial-letter-wrap-first②">first</a> except that the adjustment to the first line is given explicitly instead of being inferred from the glyph shape. <a class="self-link" href="#issue-645378a9"></a> This really needs font-relative lengths to be relative to the used size. Note: This value exists because it is easier to implement. Authors are encouraged to use the <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first" id="ref-for-valdef-initial-letter-wrap-first③">first</a> value and to set margins to control spacing, and to use this as a fallback for glyph detection if necessary. <div class="example" id="example-09c7aa2b"> <a class="self-link" href="#example-09c7aa2b"></a> In the following example, UAs that support <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first" id="ref-for-valdef-initial-letter-wrap-first④">first</a> will use the glyph outline plus the specified margin in order to place the first line, whereas UAs that only support <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value④"><length></a> or <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value③"><percentage></a> values will pull in the first line by 40% of the initial letter’s width (and then add the margin to that point). <pre>h1 + p:first-letter { initial-letter: 3; /* 3-line drop-cap */ initial-letter-wrap: first; margin-right: 0.1em; } @supports (not (initial-letter-wrap: first)) { /* Classes auto-generated on paragraphs to match first letter. */ p.A:first-letter { initial-letter-wrap: -40%; /* Start of glyph outline, assuming correct font. */ } } </pre> </div> <a class="self-link" href="#issue-e060e05e"></a> These values and related annoyance is likely unnecessary if someone submits a patch to Blink to support <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first" id="ref-for-valdef-initial-letter-wrap-first⑤">first</a>. </dl> <a class="self-link" href="#issue-c4ff3304"></a> Edit figure to show how auto behaves in varying contexts <div class="example" id="example-dffa11d5"> <a class="self-link" href="#example-dffa11d5"></a> <pre>p::first-letter { initial-letter: 3; initial-letter-wrap: none; } </pre> <figure> <img alt="regular dropcap A" src="images/A-wraparound-none.png" width="600"> <figcaption>Ordinary initial letter with no wrapping.</figcaption> </figure> </div> <div class="example" id="example-60dc0ae7"> <a class="self-link" href="#example-60dc0ae7"></a> <pre>p::first-letter { initial-letter: 3; initial-letter-wrap: all; } </pre> <img alt="text wrapping around dropcap A" src="images/A-wraparound.png" width="600"> Text follows shape of initial letter. Each line box should just touch the ink of the letter, with some offset (represented by the shaded box). </div> <div class="example" id="example-95fe5f59"> <a class="self-link" href="#example-95fe5f59"></a> <pre>p::first-letter { initial-letter: 3; initial-letter-wrap: first; } </pre> <img alt="text wrapping around dropcap A but only on first line" src="images/A-wraparound-first.png" width="600"> Only the first line is moved up against the ink of the initial letter. </div> <div class="example" id="example-db88657f"> <a class="self-link" href="#example-db88657f"></a> <pre>p::first-letter { initial-letter: 3; initial-letter-wrap: all; } </pre> <img alt="text wrapping around dropcap V" src="images/V-wraparound.png" width="600"> <img alt="text wrapping around dropcap P" src="images/P-wraparound.png" width="600"> <img alt="text wrapping around dropcap W" src="images/W-wraparound.png" width="600"> </div> <h3 class="heading settled" data-level="7.8" id="initial-letter-line-layout">7.8. Line Layout<a class="self-link" href="#initial-letter-line-layout"></a></h3> An <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter④⑧">initial letter box</a> is considered <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#in-flow" id="ref-for-in-flow⑤">in-flow</a> in its <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-formatting-context" id="ref-for-block-formatting-context">block formatting context</a>, and is part of the contents of the <a data-link-type="dfn" href="#line-box" id="ref-for-line-box⑤①">line box</a> in which it originates (its <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="originate" data-lt="originating line | originating line box" data-noexport id="originating-line">originating line box</dfn>). Aside from the vertical axis (see <a href="#initial-letter-block-position">§ 7.6.1 Block-axis Positioning</a>), its interaction with the rest of the contents of the line is as normal for <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level①⓪">inline-level content</a>, except in a few specific details… <h4 class="heading settled" data-level="7.8.1" id="initial-letter-inline-flow">7.8.1. Inline Flow Layout: Alignment, Justification, and White Space<a class="self-link" href="#initial-letter-inline-flow"></a></h4> An <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter④⑨">initial letter box</a> is handled similar to any other <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level①①">inline-level</a> content participating in its <a data-link-type="dfn" href="#originating-line" id="ref-for-originating-line②">originating line box</a>, including participation in alignment, justification, and white space processing. However, to ensure consistent alignment of all the impacted lines, <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-4/#collapsible-white-space" id="ref-for-collapsible-white-space">collapsible white space</a> between a <a data-link-type="dfn" href="#sunken-initial" id="ref-for-sunken-initial②">sunken initial</a> and subsequent content on its <a data-link-type="dfn" href="#originating-line" id="ref-for-originating-line③">originating line</a> is collapsed away, and any <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing" id="ref-for-propdef-letter-spacing①">letter-spacing</a> or <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-4/#justification-opportunity" id="ref-for-justification-opportunity">justification opportunity</a> that would normally be introduced by the juxtaposition of the contents of a sunken initial and the subsequent contents of the line is suppressed. (Note that this does not affect <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/text.html#propdef-word-spacing" id="ref-for-propdef-word-spacing">word-spacing</a> or the justification opportunity introduced by a <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-4/#word-separator" id="ref-for-word-separator">word separator</a> because that space is provided by the <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit①">typographic character unit</a> alone and not by its juxtaposition with an adjacent character.) <h4 class="heading settled" data-level="7.8.2" id="initial-letter-indentation">7.8.2. Edge Effects: Indentation and Hanging Punctuation<a class="self-link" href="#initial-letter-indentation"></a></h4> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/text.html#propdef-text-indent" id="ref-for-propdef-text-indent">text-indent</a> and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-4/#propdef-hanging-punctuation" id="ref-for-propdef-hanging-punctuation①">hanging-punctuation</a> apply to an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑤⓪">initial letter</a>’s <a data-link-type="dfn" href="#originating-line" id="ref-for-originating-line④">originating line box</a> as usual, and cause a shift in the start of the line’s contents including the initial letter itself. Subsequent lines affected by the exclusion are shortened as usual, possibly more or less than otherwise depending on the resulting position of the initial letter. <figure> <img alt="initial letter with text indent" src="images/InitialLetterWithTextIndent.png" width="300"> <figcaption>Initial letter with text indent. </figcaption> </figure> <a class="self-link" href="#issue-a41c99e9"></a> The interaction of <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter②⑤">initial-letter</a> and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-4/#propdef-hanging-punctuation" id="ref-for-propdef-hanging-punctuation②">hanging-punctuation</a> is <a href="https://github.com/w3c/csswg-drafts/issues/310#issuecomment-396765893">under discussion</a>. <h4 class="heading settled" data-level="7.8.3" id="initial-letter-ancestors">7.8.3. Ancestor Inlines<a class="self-link" href="#initial-letter-ancestors"></a></h4> If the <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑤③">initial letter box</a> is contained by <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box④⑧">inline box</a> ancestors, the boundaries of those inline boxes are drawn to exclude the initial letter box, as if it were outside their startmost <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-edge" id="ref-for-margin-edge④">margin edge</a>. This is a purely geometric operation: it does not affect e.g. property inheritance or the effective <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing" id="ref-for-propdef-letter-spacing②">letter-spacing</a> between the initial letter box and subsequent content. <h4 class="heading settled" data-level="7.8.4" id="initial-letter-multi-line">7.8.4. Multi-line Initial Letters<a class="self-link" href="#initial-letter-multi-line"></a></h4> If an initial letter is too long to fit on one line, it wraps (according to the usual text-wrapping rules), each line filled and formatted exactly as if it were the first line and the initial letter too long to fit any subsequent normal text. Any normal text after the initial letter starts on its last line, affected exactly as if that line were the first line. <figure> <img alt="multi-line drop cap" src="images/Multi-line-initial.png" width="300"> <figcaption>Drop cap extends to two lines.</figcaption> </figure> <h3 class="heading settled" data-level="7.9" id="initial-letter-paragraphs">7.9. Clearing Initial Letters<a class="self-link" href="#initial-letter-paragraphs"></a></h3> <h4 class="heading settled" data-level="7.9.1" id="raised-sunken-caps">7.9.1. Raised and sunken caps<a class="self-link" href="#raised-sunken-caps"></a></h4> The margin box of an initial letter contributes to the size of its containing element. Initial letters that extend above the first line of text, known as “raised caps” or “sunken caps,” do not extend up into previous elements. Since the content box for an initial letter includes all glyph ink, this also means that accents or other ink above the cap height of an initial letter will not impinge on previous elements. <figure> <img alt="raised cap para after normal para" src="images/initial-letter-drop-para-compare.png" width="600"> <figcaption> Raised cap (<code>initial-letter: 3 1</code>) on right; note that the position of the “C” is the same in both cases, but on the right all text is moved down relative to the initial letter. </figcaption> </figure> <a class="self-link" href="#issue-bd8afce4"></a> Handle glyph ink above cap height of font. Proposal: Make it an exclusion area for line boxes and border boxes. Include margin specified on initial-letters as part of exclusion area in order to control spacing. <a class="self-link" href="#issue-9ca3e502"></a> Draw a box model diagram here. Does the margin of the initial letter collapse with its container? <h4 class="heading settled" data-level="7.9.2" id="short-para-initial-letter">7.9.2. Short paragraphs with initial letters<a class="self-link" href="#short-para-initial-letter"></a></h4> A paragraph with an initial letter can have fewer lines of text than the initial letter occupies. In this case, the initial letter’s top alignment is still honored, and its exclusion area continues into any subsequent blocks. This forces the subsequent inline-level content to wrap around the initial letter—exactly as if that block’s text were part of its own containing block. (This is similar to how floats exclude content in subsequent block boxes.) <figure> <img alt="short para with initial letter" src="images/initial-letter-short-para.png" width="600"> <figcaption> The red text is a short paragraph with an initial letter. Note the subsequent paragraph wraps around the initial letter just as text in the paragraph with the initial letter does. </figcaption> </figure> If the subsequent block starts with an initial letter, establishes an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#independent-formatting-context" id="ref-for-independent-formatting-context①">independent formatting context</a>, or specifies <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-clear" id="ref-for-propdef-clear">clear</a> in the initial letter’s containing block’s start direction, then it must clear the previous block’s initial letter. <figure> <img alt="short para with initial letter followed by para with initial" src="images/initial-letter-short-para-initial.png" width="600"> <figcaption> The red text is a short paragraph with an initial letter. The subsequent paragraph clears because it also has an initial letter. </figcaption> </figure> <h4 class="heading settled" data-level="7.9.3" id="initial-letter-floats">7.9.3. Interaction with floats<a class="self-link" href="#initial-letter-floats"></a></h4> <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑤⑥">Initial letters</a> are not <a href="https://www.w3.org/TR/CSS21/visuren.html#floats">floats</a>: they are <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#in-flow" id="ref-for-in-flow⑥">in-flow</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level①②">inline-level</a> content that belongs to a <a data-link-type="dfn" href="#line-box" id="ref-for-line-box⑤②">line box</a>. Therefore: <ul> <li> The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-clear" id="ref-for-propdef-clear①">clear</a> property does not care about <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑤⑦">initial letters</a>: it neither applies to initial letters nor clears them when applied to nearby floats. <li> Like line boxes or floats, <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑤⑨">initial letter boxes</a> must not overlap the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-box" id="ref-for-margin-box⑤">margin boxes</a> of any floats participating in the same <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-formatting-context" id="ref-for-block-formatting-context①">block formatting context</a>. An overlapping initial letter box is shifted inward or downward until either it fits without overlapping or there are no more floats present. <li> If a line box’s start edge shifts or moves down to clear a float, an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑥①">initial letter</a> <a data-link-type="dfn" href="#originating-line" id="ref-for-originating-line⑤">originating</a> in it moves with it; likewise if an initial letter shifts inward or moves downward to clear a float, its originating line box and subsequent line boxes shorten and/or move accordingly. <li> If an <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-start" id="ref-for-inline-start①">inline-start</a> float originates in the first line of content adjacent to an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑥③">initial letter</a>, then it moves past the initial letter towards the containing block edge, exactly as if the initial letter were any other inline-level content. However, if such a float originates in subsequent lines of content adjacent to a (sunk) <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑥⑥">initial letter</a>, then that float must clear the initial letter. </ul> <figure> <img alt="initial letter interacting with floats" src="images/float-interaction.png" width="480"> <figcaption> In the absence of an initial letter, the first line of text could abut the blue float. But the presence of the initial letter requires that the text move over. </figcaption> </figure> See <a href="https://www.w3.org/TR/CSS21/visuren.html#floats">CSS2§9.5</a> for more information about the layout of floats and adjacent content. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <a class="self-link" href="#issue-a83ae7df"></a> Whether an inline-end float originating in subsequent lines must clear the initial letter (as inline-start floats do) is <a href="https://lists.w3.org/Archives/Public/www-style/2018Jul/0019.html">still under discussion</a>. There is no aesthetic reason to require it; however it’s yet unclear how the underlying layout model would distinguish between the two cases. <h4 class="heading settled" data-level="7.9.4" id="initial-letter-breaking">7.9.4. Interaction with Fragmentation (Pagination)<a class="self-link" href="#initial-letter-breaking"></a></h4> Since a single glyph cannot be <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-3/#fragment" id="ref-for-fragment②">fragmented</a> across pages (or columns or other <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container①">fragmentation containers</a>), an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑥⑧">initial letter</a> is considered <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-3/#monolithic" id="ref-for-monolithic">monolithic</a> <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a> for the purpose of block-axis <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#fragmentation" id="ref-for-fragmentation①">fragmentation</a> (breaking across pages, columns, regions, etc.). Additionally, breaks between the in-flow lines alongside an initial letter box are avoided, much as breaks between line boxes affected be <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/page.html#propdef-widows" id="ref-for-propdef-widows">widows</a> and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-break-3/#propdef-orphans" id="ref-for-propdef-orphans">orphans</a> are avoided. However, if there is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#forced-break" id="ref-for-forced-break">forced break</a> alongside the initial letter box, then it takes precedence; but has no effect on the initial letter box itself. As with other <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-3/#monolithic" id="ref-for-monolithic①">monolithic</a> objects, if an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑦②">initial letter box</a> occurs at the top of a <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container②">fragmentation container</a> and that fragmentation container is too short to contain it, it may be either truncated or sliced. Adjacent content, however, must be <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-3/#fragment" id="ref-for-fragment③">fragmented</a> according to its own rules, not truncated or sliced along with the initial letter. <h2 class="no-num heading settled" id="baseline-synthesis"> Appendix A: Synthesizing Alignment Metrics<a class="self-link" href="#baseline-synthesis"></a></h2> <h3 class="no-num heading settled" id="baseline-synthesis-em"> A.1: Calculating <a data-link-type="dfn" href="#em-over-baseline" id="ref-for-em-over-baseline②">Em-over</a> and <a data-link-type="dfn" href="#em-under-baseline" id="ref-for-em-under-baseline②">Em-under</a><a class="self-link" href="#baseline-synthesis-em"></a></h3> Note: The <a data-link-type="dfn" href="#em-over-baseline" id="ref-for-em-over-baseline③">em-over</a> and <a data-link-type="dfn" href="#em-under-baseline" id="ref-for-em-under-baseline③">em-under</a> baselines are not used by CSS. Their definitions are included in this module for consistency with the other metrics used by <a href="https://html.spec.whatwg.org/multipage/canvas.html#textmetrics">Canvas TextMetrics API</a>. The <a data-link-type="dfn" href="#em-over-baseline" id="ref-for-em-over-baseline④">em-over</a> and <a data-link-type="dfn" href="#em-under-baseline" id="ref-for-em-under-baseline④">em-under</a> metrics are calculated as follows: <ul> <li data-md> If any one of <a data-link-type="dfn" href="#central-baseline" id="ref-for-central-baseline④">central</a>, <a data-link-type="dfn" href="#ideographic-over-baseline" id="ref-for-ideographic-over-baseline②">ideographic-over</a>, or <a data-link-type="dfn" href="#ideographic-under-baseline" id="ref-for-ideographic-under-baseline④">ideographic-under</a> is defined by the font, then <a data-link-type="dfn" href="#em-over-baseline" id="ref-for-em-over-baseline⑤">em-over</a> is 0.5em over the central baseline, and <a data-link-type="dfn" href="#em-under-baseline" id="ref-for-em-under-baseline⑤">em-under</a> is 0.5em under it, with the central baseline derived from the others if missing or undefined (see below). <li data-md> Otherwise, the <a data-link-type="dfn" href="#ascent-metric" id="ref-for-ascent-metric⑥">ascent</a> and <a data-link-type="dfn" href="#descent-metric" id="ref-for-descent-metric⑥">descent</a> are both proportionally augmented or reduced to add up to exactly 1em, and these normalized metrics are taken as the <a data-link-type="dfn" href="#em-over-baseline" id="ref-for-em-over-baseline⑥">em-over</a> and <a data-link-type="dfn" href="#em-under-baseline" id="ref-for-em-under-baseline⑥">em-under</a> metrics, respectively. </ul> Note: This calculation ensures that <a data-link-type="dfn" href="#em-over-baseline" id="ref-for-em-over-baseline⑦">em-over</a> and <a data-link-type="dfn" href="#em-under-baseline" id="ref-for-em-under-baseline⑦">em-under</a> are always exactly 1em apart while trying to center the glyph outlines’ “center of gravity” between them. <h3 class="no-num heading settled" id="baseline-synthesis-fonts"> A.2: Synthesizing Baselines (and Other Font Metrics) for Text<a class="self-link" href="#baseline-synthesis-fonts"></a></h3> Some fonts might not contain the metrics information necessary to align text properly as described in this module. User agents may use the following strategies in the absence of a required metric: <dl> <dt>Use related metrics <dd> Certain metrics are typically related, and this relationship can be used to at least heuristically derive the missing metric. If the font format itself does not define any specific calculations, the following rules may be used: <ol> <li> The <a data-link-type="dfn" href="#central-baseline" id="ref-for-central-baseline⑦">central baseline</a> is defined to be halfway between the <a data-link-type="dfn" href="#ideographic-over-baseline" id="ref-for-ideographic-over-baseline③">ideographic-over</a> and <a data-link-type="dfn" href="#ideographic-under-baseline" id="ref-for-ideographic-under-baseline⑤">ideographic-under</a> baselines, so any two of these determines the third. <li> The <a data-link-type="dfn" href="#ideographic-over-baseline" id="ref-for-ideographic-over-baseline④">ideographic-over</a> and <a data-link-type="dfn" href="#ideographic-under-baseline" id="ref-for-ideographic-under-baseline⑥">ideographic-under</a> baselines are typically 1em apart, so if only one of the ideographic-over/ideographic-under/<a data-link-type="dfn" href="#central-baseline" id="ref-for-central-baseline⑧">central</a> baselines are provided, this relation can be used to calculate the other two. <li> In CJK fonts the <a data-link-type="dfn" href="#ascent-metric" id="ref-for-ascent-metric⑦">ascent</a> and <a data-link-type="dfn" href="#descent-metric" id="ref-for-descent-metric⑦">descent</a> typically match the <a data-link-type="dfn" href="#ideographic-over-baseline" id="ref-for-ideographic-over-baseline⑥">ideographic-over</a> and <a data-link-type="dfn" href="#ideographic-under-baseline" id="ref-for-ideographic-under-baseline⑧">ideographic-under</a> baselines, so can be used as a fallback when both are missing. </ol> <dt>Measure the font <dd> Metrics may be derived from the glyph shapes. For example, <ol> <li> The center of the minus sign (U+2212) can be taken as the mathematical baseline. <li> The amount by which the lowercase “o” descends below the alphabetic baseline can be subtracted from its highest point to <a href="https://drafts.csswg.org/css-values/#ex">measure the x-height</a>. <figure> <img alt="measuring the x height of the letter o" src="images/measuring-x-height-o.png" width="240"> <figcaption> Measuring the x height. </figcaption> </figure> <li> The amount by which the uppercase “O” descends below the alphabetic baseline can be subtracted from its highest point to measure the cap-height. <li> The bounding box of 永 (U+6C38) can be used to find the ideographic character face edges. <li> The top edge of the center of the Hebrew He (U+05D4 “ה”) can be taken as the Hebrew hanging baseline. <li> The top edge of the center of the letter Ka can be taken as the hanging baseline. Which Ka is used should depend on the <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-4/#content-language" id="ref-for-content-language①">content language</a>: <table class="data"> <thead> <tr> <th>Language <th>Script <th>Letter <tbody> <tr> <td> <td>Devanagari <td>क U+0915 KA <tr> <td> <td>Bengali <td>ক U+0995 <tr> <td> <td>Gurmukhi <td>ਕ U+0A15 <tr> <td> <td>Tibetan <td>ཀ U+0F40 </table> <a class="self-link" href="#issue-2765c39b"></a> Pick a default. <figure> <img alt="finding the position of the hanging baseline of the letter ka" src="images/measuring-hanging-baseline-ka.png" width="240"> <figcaption> The hanging baseline is at the top edge of the character ink. </figcaption> </figure> <li>Issue: Add more notes here? </ol> <a class="self-link" href="#issue-6c88f039"></a> Somebody sanity-check these heuristics please. <dt>Use fallback values <dd> The following fallback values are suggested: <ul> <li>x-height: .5em; <li>cap-height: .66em; <li>hanging baseline: .6em; </ul> </dl> <h3 class="no-num heading settled" id="baseline-synthesis-box"> A.3: Synthesizing Baselines for Atomic Inlines<a class="self-link" href="#baseline-synthesis-box"></a></h3> If an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#atomic-inline" id="ref-for-atomic-inline⑨">atomic inline</a> (such as an inline-block, inline-table, or <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#replaced-element" id="ref-for-replaced-element②">replaced element</a>) does not have a content-derived <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set④">baseline set</a> in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis⑦">inline axis</a> of the <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context①①">inline formatting context</a> in which it participates, then the UA must synthesize its <a data-link-type="dfn" href="#baseline" id="ref-for-baseline①⑧">baselines</a> as follows in order to align it. These <a data-link-type="dfn" href="#baseline" id="ref-for-baseline①⑨">baselines</a> are assumed to be at its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-under" id="ref-for-line-under⑦">line-under</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-edge" id="ref-for-margin-edge⑤">margin edge</a>: <ul> <li><a data-link-type="dfn" href="#text-under-baseline" id="ref-for-text-under-baseline④">text-under baseline</a> <li><a data-link-type="dfn" href="#ideographic-under-baseline" id="ref-for-ideographic-under-baseline⑨">ideographic-under baseline</a> <li><a data-link-type="dfn" href="#ideographic-ink-under-baseline" id="ref-for-ideographic-ink-under-baseline③">ideographic-ink-under baseline</a> <li><a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline①③">alphabetic baseline</a> </ul> These <a data-link-type="dfn" href="#baseline" id="ref-for-baseline②⓪">baselines</a> are assumed to be halfway between its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-under" id="ref-for-line-under⑧">line-under</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-over" id="ref-for-line-over⑦">line-over</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-edge" id="ref-for-margin-edge⑥">margin edges</a>: <ul> <li><a data-link-type="dfn" href="#central-baseline" id="ref-for-central-baseline⑨">central baseline</a> <li><a data-link-type="dfn" href="#math-baseline" id="ref-for-math-baseline②">math baseline</a> <li><a data-link-type="dfn" href="#x-middle-baseline" id="ref-for-x-middle-baseline②">x-middle baseline</a> </ul> These <a data-link-type="dfn" href="#baseline" id="ref-for-baseline②①">baselines</a> are assumed to be at its <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#line-over" id="ref-for-line-over⑧">line-over</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-3/#margin-edge" id="ref-for-margin-edge⑦">margin edge</a>: <ul> <li><a data-link-type="dfn" href="#text-over-baseline" id="ref-for-text-over-baseline④">text-over baseline</a> <li><a data-link-type="dfn" href="#ideographic-over-baseline" id="ref-for-ideographic-over-baseline⑦">ideographic-over baseline</a> <li><a data-link-type="dfn" href="#ideographic-ink-over-baseline" id="ref-for-ideographic-ink-over-baseline③">ideographic-ink-over baseline</a> <li><a data-link-type="dfn" href="#cap-height-baseline" id="ref-for-cap-height-baseline③">cap-height baseline</a> <li><a data-link-type="dfn" href="#hanging-baseline" id="ref-for-hanging-baseline③">hanging baseline</a> <li><a data-link-type="dfn" href="#x-height-baseline" id="ref-for-x-height-baseline④">x-height baseline</a> </ul> Note: Authors can use margins (positive or negative) to adjust the alignment of replaced content within a line. <div class="example" id="example-f3a3b459"> <a class="self-link" href="#example-f3a3b459"></a> In this example, the author is using a set of images to display characters that don’t exist. <pre>img[src^="/text/"] { height: 1em; /* Size to match adjacent text */ margin-bottom: -0.2em; /* Baseline at 20% above bottom */ } ... This is some text with words written in an unencoded script: <img src="/text/ch3439.png" alt="..."> <img src="/text/ch3440.png" alt="..."> <img src="/text/ch3442.png" alt="..."> </pre> </div> Note: A future level of CSS may include a way of specifying a full <a data-link-type="dfn" href="#baseline-table" id="ref-for-baseline-table④">baseline table</a> for replaced elements. (This will probably look like a baseline-table property that accepts [<baseline-keyword> <percentage>]+.) <h2 class="no-num heading settled" id="changes"> Changes<a class="self-link" href="#changes"></a></h2> Changes since the <a href="https://www.w3.org/TR/2024/WD-css-inline-3-20240812/">12 August 2024 Working Draft</a>: <ul> <li>Made both values of <a class="production css" data-link-type="type" href="#typedef-text-edge" id="ref-for-typedef-text-edge④"><text-edge></a> required. (<a href="https://github.com/w3c/csswg-drafts/issues/10703">Issue 10703</a>) <li>Made <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge①①">text-box-edge</a> inherit; <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim①⑥">text-box-trim</a> references the relevant value applied to the affected line box(es). (<a href="https://github.com/w3c/csswg-drafts/issues/10904">Issue 10904</a>) <li>Defined behavior of <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim①⑦">text-box-trim</a> at <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#fragmentation" id="ref-for-fragmentation②">fragmentation</a> breaks. (<a href="https://github.com/w3c/csswg-drafts/issues/5335">Issue 5335</a>) <li>Defined behavior of <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim①⑧">text-box-trim</a> on <a data-link-type="dfn" href="https://www.w3.org/TR/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container③">multi-column containers</a>, and clarified its application to (and through) other formatting contexts. (<a href="https://github.com/w3c/csswg-drafts/issues/5335">Issue 5335</a>, <a href="https://github.com/w3c/csswg-drafts/issues/11038">Issue 11038</a>) <li>Renamed “invisible line boxes” to <a data-link-type="dfn" href="#phantom-line-box" id="ref-for-phantom-line-box②">phantom line boxes</a> for <a href="https://www.w3.org/TR/CSS2/visuren.html#phantom-line-box">consistency with CSS2</a> and to help clarify that they are “invisible” to layout, not just painting. </ul> Changes since the <a href="https://www.w3.org/TR/2024/WD-css-inline-3-20240808/">8 August 2024 Working Draft</a>: <ul> <li>Some minor clean-up of references to <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge①②">text-box-edge</a> left over from when it also represented <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge②②">line-fit-edge</a>. <li>Adjusted <a class="css" data-link-type="propdesc" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge①③">text-box-edge: auto</a> to reference <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge②③">line-fit-edge</a> on the affected <a data-link-type="dfn" href="#line-box" id="ref-for-line-box⑤③">line box</a> rather than computing to the line-fit-edge of the specifying element. </ul> Changes since the <a href="https://www.w3.org/TR/2023/WD-css-inline-3-20230401/">1 April 2023 Working Draft</a>: <ul> <li>Split <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge①④">text-box-edge</a> into two properties—text-box-edge for controlling the <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim①⑨">text-box-trim</a> edge and <a class="property css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge②⑤">line-fit-edge</a> for controlling line box sizing—and added the <a class="property css" data-link-type="property" href="#propdef-text-box" id="ref-for-propdef-text-box③">text-box</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property③">shorthand</a>. (Issues <a href="https://github.com/w3c/csswg-drafts/issues/8829">8829</a> and <a href="https://github.com/w3c/csswg-drafts/issues/8696">8696</a>) <li>Added trim-* prefix to <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim②⓪">text-box-trim</a> keywords so that they make sense in the context of the <a class="property css" data-link-type="property" href="#propdef-text-box" id="ref-for-propdef-text-box④">text-box</a> shorthand. (<a href="https://github.com/w3c/csswg-drafts/issues/10675">Issue 10675</a>) <li>Use the innermost trim edge for <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim②①">text-box-trim</a> when multiple ancestors request trimming. (<a href="https://github.com/w3c/csswg-drafts/issues/5426">Issue 5426</a>) <li>Apply negative <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis①③">block-axis</a> margins to descendants of <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box⑤⓪">inline boxes</a> when calculating their <a data-link-type="dfn" href="#layout-bounds" id="ref-for-layout-bounds①⑥">layout bounds</a> so that they can actually have the specified effect. (<a href="https://github.com/w3c/csswg-drafts/issues/8182">Issue 8182</a>) <li>Corrected <a data-link-type="dfn" href="#phantom-line-box" id="ref-for-phantom-line-box③">phantom line boxes</a> to only account for <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis⑧">inline-axis</a> box decorations. (<a href="https://github.com/w3c/csswg-drafts/issues/9344">Issue 9344</a>) </ul> Changes since the <a href="https://www.w3.org/TR/2022/WD-css-inline-3-20221114/">14 November 2022 Working Draft</a>: <ul> <li>Renamed text-edge to <a class="property css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge①⑥">text-box-edge</a> and leading-trim to <a class="property css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim②②">text-box-trim</a>, and also renamed their initial values. (<a href="https://github.com/w3c/csswg-drafts/issues/8067">Issue 8067</a>) <li>Floor the <a data-link-type="dfn" href="#line-gap-metric" id="ref-for-line-gap-metric③">line gap metric</a> at zero. (<a href="https://github.com/w3c/csswg-drafts/issues/5064">Issue 5064</a>) </ul> Changes since the <a href="https://www.w3.org/TR/2020/WD-css-inline-3-20200827/">28 August 2020 Working Draft</a>: <ul> <li>Fixed <a class="property css" data-link-type="property" href="#propdef-inline-sizing" id="ref-for-propdef-inline-sizing③">inline-sizing</a> to be <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#css-inheritance" id="ref-for-css-inheritance">inherited</a>, as was originally intended. (<a href="https://github.com/w3c/csswg-drafts/issues/1974">Issue 1974</a>) <li>Update <a class="property css" data-link-type="property" href="#propdef-inline-sizing" id="ref-for-propdef-inline-sizing④">inline-sizing</a> “Applies to” to exclude ruby boxes. <li>Editorial fixes, including missing images. </ul> Changes since the <a href="https://www.w3.org/TR/2020/WD-css-inline-3-20200618/">18 June 2020 Working Draft</a> include: <ul> <li>Added <a class="css" data-link-type="maybe" href="#valdef-initial-letter-align-leading" id="ref-for-valdef-initial-letter-align-leading">leading</a> value to <a class="property css" data-link-type="property" href="#propdef-initial-letter-align" id="ref-for-propdef-initial-letter-align⑦">initial-letter-align</a> to handle common practices for certain Indic scripts. See <a href="https://www.w3.org/TR/ilreq/#h_scripts_without_hanging_baseline">Indic Layout Requirements</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/864">Issue 864</a>) <li>Make non-zero padding and border block effects of leading-trim from ancestors. (<a href="https://github.com/w3c/csswg-drafts/issues/5237">Issue 5237</a>) <li>Remove <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-counter-styles-3/#hebrew" id="ref-for-hebrew">hebrew</a> value from <a class="property css" data-link-type="property" href="#propdef-initial-letter-align" id="ref-for-propdef-initial-letter-align⑧">initial-letter-align</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5208">Issue 5208</a>) <li>Use the under alignment point for initial letters whose size is less than the sink. (<a href="https://github.com/w3c/csswg-drafts/issues/5329">Issue 5329</a>) <li>Collapse white space adjacent to <a data-link-type="dfn" href="#dropped-initial" id="ref-for-dropped-initial②">dropped initials</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5120">Issue 5120</a>) <li>Make <a data-link-type="dfn" href="#dropped-initial" id="ref-for-dropped-initial③">dropped initials</a> behave the same as <a data-link-type="dfn" href="#raised-initial" id="ref-for-raised-initial②">raised initials</a> for the purpose of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align②">text-align</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5207">Issue 5207</a>) <li>Altered interaction of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-shapes-1/#propdef-shape-margin" id="ref-for-propdef-shape-margin①">shape-margin</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin" id="ref-for-propdef-margin">margin</a>, and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-shapes-1/#propdef-shape-outside" id="ref-for-propdef-shape-outside">shape-outside</a> to match floats (see <a class="property css" data-link-type="property" href="#propdef-initial-letter-wrap" id="ref-for-propdef-initial-letter-wrap④">initial-letter-wrap</a>). (<a href="https://github.com/w3c/csswg-drafts/issues/5119">Issue 5119</a>) <li>Added definitions for <a data-link-type="dfn" href="#em-over-baseline" id="ref-for-em-over-baseline⑧">em-over</a> and <a data-link-type="dfn" href="#em-under-baseline" id="ref-for-em-under-baseline⑧">em-under</a> baselines for reference by Canvas 2D. (<a href="https://github.com/w3c/csswg-drafts/issues/5312">Issue 5312</a>) <li>Slight refinements to the (new) syntax of <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align①②">vertical-align</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5235">Issue 5235</a>) <li>Define fallback shift for <a class="css" data-link-type="propdesc" href="#propdef-baseline-shift" id="ref-for-propdef-baseline-shift①⓪">baseline-shift: sub | super</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5225">Issue 5225</a>) </ul> Changes since the <a href="https://www.w3.org/TR/2020/WD-css-inline-3-20200604/">4 June 2020 Working Draft</a> include: <ul> <li> Reworked the relationship of the earlier line-sizing and text-box-trim proposals to create text-edge and a differently-structured leading-trim. (<a href="https://github.com/w3c/csswg-drafts/issues/5168">Issue 5168</a>) <li> Shifted the <a data-link-type="dfn" href="#line-relative-shift-values" id="ref-for-line-relative-shift-values⑤">line-relative shift values</a> of <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align①③">vertical-align</a> from the <a class="property css" data-link-type="property" href="#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline⑨">alignment-baseline</a> longhand to the <a class="property css" data-link-type="property" href="#propdef-baseline-shift" id="ref-for-propdef-baseline-shift①①">baseline-shift</a> longhand. (<a href="https://github.com/w3c/csswg-drafts/issues/5180">Issue 5180</a>) <li> Integrated text-edge into <a href="#inline-height">line box height calculations</a>. <li> Refactored definitions of various baselines into <a href="#css-metrics">their own section</a> and imported introduction and core terminology from <a data-link-type="biblio" href="#biblio-css-writing-modes-3" title="CSS Writing Modes Level 3">[CSS-WRITING-MODES-3]</a>. <li> Imported and updated / integrated remaining baseline alignment and line box sizing prose from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. <li> Defined atomic inline baseline synthesis rules for all baselines. <li> Defined the <a data-link-type="dfn" href="#central-baseline" id="ref-for-central-baseline①⓪">central baseline</a> definitively as the ideographic central baseline. <li> Defined white space collapsing between an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑦④">initial letter box</a> and subsequent text. (<a href="https://github.com/w3c/csswg-drafts/issues/5120">Issue 5120</a>) <li> Tightened up box model definitions for <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑦⑤">initial letter boxes</a>, including interaction with its <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#containing-block" id="ref-for-containing-block①①">containing block</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/719">Issue 719</a>) <li> Miscellaneous small fixes, clarifications, and editorial improvements. </ul> Changes since the <a href="https://www.w3.org/TR/2018/WD-css-inline-3-20180808/">8 August 2018 Working Draft</a> include: <ul> <li> Added line-sizing property to control how inter-line spacing is calculated. (<a href="https://github.com/w3c/csswg-drafts/issues/3199">Issue 3199</a>) <li> Added <a class="property css" data-link-type="property" href="#propdef-baseline-source" id="ref-for-propdef-baseline-source⑤">baseline-source</a> property to control whether first or last baseline is used for alignment. (<a href="https://github.com/w3c/csswg-drafts/issues/861">Issue 861</a>) <li> Added leading-trim proposal to control the metrics used for the line-over/line-under edge in line box layout. (<a href="https://github.com/w3c/csswg-drafts/issues/3240">Issue 3240</a> and <a href="https://github.com/w3c/csswg-drafts/issues/3955">3955</a>) <li> Imported <a class="property css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height②④">line-height</a> definition and related normative prose from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. <li> Improved high-level description of inline layout in <a href="#model">§ 2 Inline Layout Model</a>. <li> Renamed initial-letters back to <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter②⑥">initial-letter</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/862">Issue 862</a>) <li> Added the <a class="css" data-link-type="maybe" href="#valdef-initial-letter-raise" id="ref-for-valdef-initial-letter-raise">raise</a> and sink keywords for syntactic convenience. (<a href="https://github.com/w3c/csswg-drafts/issues/2955">Issue 2955</a>) <li> Specified synthesis of baselines for <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#atomic-inline" id="ref-for-atomic-inline①⓪">atomic inlines</a> that have no baseline set. <li> Clarified interpretation of <a class="css" data-link-type="maybe" href="#valdef-alignment-baseline-middle" id="ref-for-valdef-alignment-baseline-middle①">middle</a>, <a class="css" data-link-type="maybe" href="#valdef-alignment-baseline-text-top" id="ref-for-valdef-alignment-baseline-text-top①">text-top</a>, and <a class="css" data-link-type="maybe" href="#valdef-alignment-baseline-text-bottom" id="ref-for-valdef-alignment-baseline-text-bottom①">text-bottom</a> in <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode③">vertical writing modes</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/4495">Issue 4495</a>) <li> Clarified that <a class="css" data-link-type="maybe" href="#valdef-alignment-baseline-text-top" id="ref-for-valdef-alignment-baseline-text-top②">text-top</a>/<a class="css" data-link-type="maybe" href="#valdef-alignment-baseline-text-bottom" id="ref-for-valdef-alignment-baseline-text-bottom②">text-bottom</a>/text values should be consistently interpreted across <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align①④">vertical-align</a>, <a class="property css" data-link-type="property" href="#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline④">dominant-baseline</a>, leading-trim, and drawing the content box of an inline box. (<a href="https://github.com/w3c/csswg-drafts/issues/3978">Issue 3978</a>) <li> Corrected initial value of <a class="property css" data-link-type="property" href="#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline⑤">dominant-baseline</a> to <a class="css" data-link-type="maybe" href="#valdef-dominant-baseline-auto" id="ref-for-valdef-dominant-baseline-auto">auto</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/4115">Issue 4115</a>) <li> Improved some nuances in authoring advice regarding <a class="property css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align①⑤">vertical-align</a> longhands vs. shorthands. <li> Clarified interaction of <a class="property css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter②⑦">initial-letter</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-float" id="ref-for-propdef-float①">float</a>/<a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-position" id="ref-for-propdef-position①">position</a>. <li> Reorganized the <a href="#initial-letter-layout">§ 7.5 Initial Letter Layout</a> section for better readability, and tweaked some wording for clarity. <li> Defined that <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-shapes-1/#propdef-shape-margin" id="ref-for-propdef-shape-margin②">shape-margin</a> applies to the glyph outline. <li> Switched baseline synthesis rules to use 永 (U+6C38) for ideographic face edges. <li> Specified that an <a data-link-type="dfn" href="#initial-letter" id="ref-for-initial-letter⑦⑥">initial letter</a> is isolated wrt shaping, even though text after it remains in its connecting form. (<a href="https://github.com/w3c/csswg-drafts/issues/2399#issuecomment-635630662">Issue 2399</a>) </ul> See also earlier <a href="https://www.w3.org/TR/2018/WD-css-inline-3-20180808/">changes since the 24 May 2016 Working Draft</a>. <h2 class="no-num heading settled" id="ack"> Acknowledgments<a class="self-link" href="#ack"></a></h2> Special thanks goes to the initial authors, Eric A. Meyer and Michel Suignard. In additions to the authors, this specification would not have been possible without the help from: David Baron, Mike Bremford, David M Brown, Oriol Brufau, John Daggett, Stephen Deach, Sylvain Galineau, David Hyatt, Myles Maxfield, Shinyu Murakami, Jan Nicklas, Tess O’Connor, Sujal Parikh, Florian Rivoal, Alan Stearns, Weston Thayer, Bobby Tung, Chris Wilson, Grzegorz Zygmunt. <h2 class="no-num heading settled" id="privacy">Privacy Considerations<a class="self-link" href="#privacy"></a></h2> No new privacy considerations have been reported on this specification. <h2 class="no-num heading settled" id="security">Security Considerations<a class="self-link" href="#security"></a></h2> No new security considerations have been reported on this specification. </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. <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="https://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="https://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="https://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="https://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="https://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="https://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="https://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="https://www.w3.org/Style/CSS/Test/">https://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="https://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="#aligned-subtree">aligned subtree</a>, in § 4.2.3 <li><a href="#alignment-baseline">alignment baseline</a>, in § 4.2.2 <li><a href="#propdef-alignment-baseline">alignment-baseline</a>, in § 4.2.2 <li><a href="#valdef-initial-letter-wrap-all">all</a>, in § 7.7 <li> alphabetic <ul> <li><a href="#alphabetic-baseline">definition of</a>, in § 3.2 <li><a href="#valdef-alignment-baseline-alphabetic">value for alignment-baseline, vertical-align</a>, in § 4.2.2 <li><a href="#valdef-dominant-baseline-alphabetic">value for dominant-baseline</a>, in § 4.1 <li><a href="#valdef-initial-letter-align-alphabetic">value for initial-letter-align</a>, in § 7.4 <li><a href="#valdef-line-fit-edge-alphabetic">value for line-fit-edge, <<text-edge>></a>, in § 5.2 </ul> <li><a href="#alphabetic-baseline">alphabetic baseline</a>, in § 3.2 <li><a href="#ascent-metric">ascent</a>, in § 3.2.1 <li><a href="#ascent-metric">ascent metric</a>, in § 3.2.1 <li><a href="#atomic-initial-letter">atomic initial letter</a>, in § 7.5 <li><a href="#atomic-initial-letter">atomic initial letter box</a>, in § 7.5 <li> auto <ul> <li><a href="#valdef-baseline-source-auto">value for baseline-source, vertical-align</a>, in § 4.2.1 <li><a href="#valdef-dominant-baseline-auto">value for dominant-baseline</a>, in § 4.1 <li><a href="#valdef-text-box-edge-auto">value for text-box-edge</a>, in § 6.3 </ul> <li> baseline <ul> <li><a href="#baseline">definition of</a>, in § 3.1 <li><a href="#valdef-alignment-baseline-baseline">value for alignment-baseline, vertical-align</a>, in § 4.2.2 <li><a href="#valdef-baseline-shift-baseline">value for baseline-shift</a>, in § 4.2.3.1 </ul> <li><a href="#baseline-alignment-preference">baseline alignment preference</a>, in § 4.2.1 <li><a href="#baseline-relative-shift-values">baseline-relative shift values</a>, in § 4.2.3 <li><a href="#baseline-relative-shift-values">baseline-relative values</a>, in § 4.2.3 <li><a href="#baseline-set">baseline set</a>, in § 3.3 <li><a href="#propdef-baseline-shift">baseline-shift</a>, in § 4.2.3 <li><a href="#propdef-baseline-source">baseline-source</a>, in § 4.2.1 <li><a href="#baseline-table">baseline table</a>, in § 3.1 <li><a href="#valdef-initial-letter-align-border-box">border-box</a>, in § 7.4 <li><a href="#valdef-baseline-shift-bottom">bottom</a>, in § 4.2.3 <li><a href="#valdef-line-fit-edge-cap">cap</a>, in § 5.2 <li><a href="#cap-height-baseline">cap-height</a>, in § 3.2 <li><a href="#cap-height-baseline">cap-height baseline</a>, in § 3.2 <li><a href="#valdef-baseline-shift-center">center</a>, in § 4.2.3 <li> central <ul> <li><a href="#central-baseline">definition of</a>, in § 3.2 <li><a href="#valdef-alignment-baseline-central">value for alignment-baseline, vertical-align</a>, in § 4.2.2 <li><a href="#valdef-dominant-baseline-central">value for dominant-baseline</a>, in § 4.1 </ul> <li><a href="#central-baseline">central baseline</a>, in § 3.2 <li><a href="#descent-metric">descent</a>, in § 3.2.1 <li><a href="#descent-metric">descent metric</a>, in § 3.2.1 <li><a href="#dominant-baseline">dominant baseline</a>, in § 4.1 <li><a href="#propdef-dominant-baseline">dominant-baseline</a>, in § 4.1 <li><a href="#valdef-initial-letter-drop">drop</a>, in § 7.3 <li><a href="#dropped-initial">dropped initial</a>, in § 7.1.1 <li><a href="#em-over-baseline">em-over</a>, in § 3.2 <li><a href="#em-over-baseline">em-over baseline</a>, in § 3.2 <li><a href="#em-under-baseline">em-under</a>, in § 3.2 <li><a href="#em-under-baseline">em-under baseline</a>, in § 3.2 <li><a href="#valdef-line-fit-edge-ex">ex</a>, in § 5.2 <li> first <ul> <li><a href="#valdef-baseline-source-first">value for baseline-source, vertical-align</a>, in § 4.2.1 <li><a href="#valdef-initial-letter-wrap-first">value for initial-letter-wrap</a>, in § 7.7 </ul> <li><a href="#valdef-initial-letter-wrap-grid">grid</a>, in § 7.7 <li><a href="#half-leading">half-leading</a>, in § 5.3 <li> hanging <ul> <li><a href="#hanging-baseline">definition of</a>, in § 3.2 <li><a href="#valdef-dominant-baseline-hanging">value for dominant-baseline</a>, in § 4.1 <li><a href="#valdef-initial-letter-align-hanging">value for initial-letter-align</a>, in § 7.4 </ul> <li><a href="#hanging-baseline">hanging baseline</a>, in § 3.2 <li> ideographic <ul> <li><a href="#valdef-alignment-baseline-ideographic">value for alignment-baseline, vertical-align</a>, in § 4.2.2 <li><a href="#valdef-dominant-baseline-ideographic">value for dominant-baseline</a>, in § 4.1 <li><a href="#valdef-initial-letter-align-ideographic">value for initial-letter-align</a>, in § 7.4 <li><a href="#valdef-line-fit-edge-ideographic">value for line-fit-edge, <<text-edge>></a>, in § 5.2 </ul> <li><a href="#valdef-line-fit-edge-ideographic-ink">ideographic-ink</a>, in § 5.2 <li><a href="#ideographic-ink-over-baseline">ideographic-ink-over</a>, in § 3.2 <li><a href="#ideographic-ink-over-baseline">ideographic-ink-over baseline</a>, in § 3.2 <li><a href="#ideographic-ink-under-baseline">ideographic-ink-under</a>, in § 3.2 <li><a href="#ideographic-ink-under-baseline">ideographic-ink-under baseline</a>, in § 3.2 <li><a href="#ideographic-over-baseline">ideographic-over</a>, in § 3.2 <li><a href="#ideographic-over-baseline">ideographic-over baseline</a>, in § 3.2 <li><a href="#ideographic-under-baseline">ideographic-under</a>, in § 3.2 <li><a href="#ideographic-under-baseline">ideographic-under baseline</a>, in § 3.2 <li><a href="#initial-letter">initial letter</a>, in § 7.3 <li><a href="#propdef-initial-letter">initial-letter</a>, in § 7.3 <li><a href="#propdef-initial-letter-align">initial-letter-align</a>, in § 7.4 <li><a href="#initial-letter">initial letter box</a>, in § 7.3 <li><a href="#initial-letter-initial-letter-sink">initial letter sink</a>, in § 7.3 <li><a href="#initial-letter-initial-letter-size">initial letter size</a>, in § 7.3 <li><a href="#propdef-initial-letter-wrap">initial-letter-wrap</a>, in § 7.7 <li><a href="#inline-formatting-context">inline formatting context</a>, in § 2 <li><a href="#inline-initial-letter">inline initial letter</a>, in § 7.5 <li><a href="#inline-initial-letter">inline initial letter box</a>, in § 7.5 <li><a href="#inline-layout">inline layout</a>, in § 2 <li><a href="#propdef-inline-sizing">inline-sizing</a>, in § 6.4 <li><a href="#valdef-initial-letter-integer-1"><integer [1,∞]></a>, in § 7.3 <li><a href="#valdef-baseline-source-last">last</a>, in § 4.2.1 <li><a href="#layout-bounds">layout bounds</a>, in § 5.3 <li> leading <ul> <li><a href="#leading">definition of</a>, in § 5.3 <li><a href="#valdef-initial-letter-align-leading">value for initial-letter-align</a>, in § 7.4 <li><a href="#valdef-line-fit-edge-leading">value for line-fit-edge, <<text-edge>></a>, in § 5.2 </ul> <li> <length> <ul> <li><a href="#valdef-baseline-shift-length">value for baseline-shift, vertical-align</a>, in § 4.2.3 <li><a href="#valdef-initial-letter-wrap-length">value for initial-letter-wrap</a>, in § 7.7 </ul> <li><a href="#valdef-line-height-length-0"><length [0,∞]></a>, in § 5.1 <li><a href="#line-box">line box</a>, in § 2 <li><a href="#propdef-line-fit-edge">line-fit-edge</a>, in § 5.2 <li><a href="#line-gap-metric">line gap metric</a>, in § 3.2.2 <li><a href="#propdef-line-height">line-height</a>, in § 5.1 <li><a href="#line-relative-shift-values">line-relative shift values</a>, in § 4.2.3 <li><a href="#line-relative-shift-values">line-relative values</a>, in § 4.2.3 <li><a href="#math-baseline">math</a>, in § 3.2 <li><a href="#math-baseline">math baseline</a>, in § 3.2 <li> mathematical <ul> <li><a href="#valdef-alignment-baseline-mathematical">value for alignment-baseline, vertical-align</a>, in § 4.2.2 <li><a href="#valdef-dominant-baseline-mathematical">value for dominant-baseline</a>, in § 4.1 </ul> <li> middle <ul> <li><a href="#valdef-alignment-baseline-middle">value for alignment-baseline, vertical-align</a>, in § 4.2.2 <li><a href="#valdef-dominant-baseline-middle">value for dominant-baseline</a>, in § 4.1 </ul> <li> none <ul> <li><a href="#valdef-initial-letter-wrap-none">value for initial-letter-wrap</a>, in § 7.7 <li><a href="#valdef-text-box-trim-none">value for text-box-trim</a>, in § 6.2 </ul> <li> normal <ul> <li><a href="#valdef-initial-letter-normal">value for initial-letter</a>, in § 7.3 <li><a href="#valdef-inline-sizing-normal">value for inline-sizing</a>, in § 6.4 <li><a href="#valdef-line-height-normal">value for line-height</a>, in § 5.1 <li><a href="#valdef-text-box-normal">value for text-box</a>, in § 6.1 </ul> <li><a href="#valdef-line-height-number-0"><number [0,∞]></a>, in § 5.1 <li><a href="#valdef-initial-letter-number-1"><number [1,∞]></a>, in § 7.3 <li><a href="#originating-line">originate</a>, in § 7.8 <li><a href="#originating-line">originating line</a>, in § 7.8 <li><a href="#originating-line">originating line box</a>, in § 7.8 <li> <percentage> <ul> <li><a href="#valdef-baseline-shift-percentage">value for baseline-shift, vertical-align</a>, in § 4.2.3 <li><a href="#valdef-initial-letter-wrap-percentage">value for initial-letter-wrap</a>, in § 7.7 </ul> <li><a href="#valdef-line-height-percentage-0"><percentage [0,∞]></a>, in § 5.1 <li><a href="#phantom-line-box">phantom line box</a>, in § 2.3 <li><a href="#post-alignment-shift">post-alignment shift</a>, in § 4.2.3 <li><a href="#preferred-line-height">preferred line height</a>, in § 5.1 <li><a href="#valdef-initial-letter-raise">raise</a>, in § 7.3 <li><a href="#raised-initial">raised initial</a>, in § 7.1.3 <li><a href="#root-inline-box">root inline box</a>, in § 2 <li><a href="#initial-letter-initial-letter-sink">sink</a>, in § 7.3 <li><a href="#valdef-inline-sizing-stretch">stretch</a>, in § 6.4 <li><a href="#valdef-baseline-shift-sub">sub</a>, in § 4.2.3 <li><a href="#sunken-initial">sunken initial</a>, in § 7.1.2 <li><a href="#valdef-baseline-shift-super">super</a>, in § 4.2.3 <li><a href="#valdef-line-fit-edge-text">text</a>, in § 5.2 <li><a href="#valdef-alignment-baseline-text-after-edge">text-after-edge</a>, in § 4.2.2.1 <li><a href="#valdef-alignment-baseline-text-before-edge">text-before-edge</a>, in § 4.2.2.1 <li> text-bottom <ul> <li><a href="#valdef-alignment-baseline-text-bottom">value for alignment-baseline, vertical-align</a>, in § 4.2.2 <li><a href="#valdef-dominant-baseline-text-bottom">value for dominant-baseline</a>, in § 4.1 </ul> <li><a href="#propdef-text-box">text-box</a>, in § 6.1 <li><a href="#propdef-text-box-edge">text-box-edge</a>, in § 6.3 <li><a href="#propdef-text-box-trim">text-box-trim</a>, in § 6.2 <li><a href="#typedef-text-edge"><text-edge></a>, in § 5.2 <li><a href="#text-over-baseline">text-over</a>, in § 3.2 <li><a href="#text-over-baseline">text-over baseline</a>, in § 3.2 <li> text-top <ul> <li><a href="#valdef-alignment-baseline-text-top">value for alignment-baseline, vertical-align</a>, in § 4.2.2 <li><a href="#valdef-dominant-baseline-text-top">value for dominant-baseline</a>, in § 4.1 </ul> <li><a href="#text-under-baseline">text-under</a>, in § 3.2 <li><a href="#text-under-baseline">text-under baseline</a>, in § 3.2 <li><a href="#valdef-baseline-shift-top">top</a>, in § 4.2.3 <li><a href="#valdef-text-box-trim-trim-both">trim-both</a>, in § 6.2 <li><a href="#valdef-text-box-trim-trim-end">trim-end</a>, in § 6.2 <li><a href="#valdef-text-box-trim-trim-start">trim-start</a>, in § 6.2 <li><a href="#propdef-vertical-align">vertical-align</a>, in § 4.2 <li><a href="#x-height-baseline">x-height</a>, in § 3.2 <li><a href="#x-height-baseline">x-height baseline</a>, in § 3.2 <li><a href="#x-middle-baseline">x-middle</a>, in § 3.2 <li><a href="#x-middle-baseline">x-middle baseline</a>, in § 3.2 </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-ALIGN-3]</a> defines the following terms: <ul> <li>align-content <li>alignment context <li>baseline alignment <li>center <li>end <li>first baseline set <li>first-baseline alignment <li>justify-self <li>last baseline set <li>last-baseline alignment <li>normal <li>start <li>synthesize baseline </ul> <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-3]</a> defines the following terms: <ul> <li>border edge <li>content edge <li>margin box <li>margin edge </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li>border <li>box edge <li>content area <li>edge <li>margin <li>padding </ul> <li> <a data-link-type="biblio">[CSS-BREAK-3]</a> defines the following terms: <ul> <li>fragment <li>monolithic <li>orphans </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li>box fragment <li>box-decoration-break <li>forced break <li>fragmentation <li>fragmentation container </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>inherit <li>longhand <li>shorthand <li>sub-property </ul> <li> <a data-link-type="biblio">[CSS-COUNTER-STYLES-3]</a> defines the following terms: <ul> <li>hebrew </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms: <ul> <li>anonymous box <li>atomic inline <li>atomic inline box <li>block <li>block container <li>block container box <li>block formatting context <li>box <li>box tree <li>containing block <li>display <li>document order <li>formatting context <li>in-flow <li>independent formatting context <li>inline block <li>inline box <li>inline-block <li>inline-level <li>inline-level box <li>inline-level content <li>out-of-flow <li>replaced element <li>text sequence </ul> <li> <a data-link-type="biblio">[CSS-FONTS-4]</a> defines the following terms: <ul> <li>first available font <li>font-language-override </ul> <li> <a data-link-type="biblio">[CSS-LISTS-3]</a> defines the following terms: <ul> <li>inside </ul> <li> <a data-link-type="biblio">[CSS-MULTICOL-1]</a> defines the following terms: <ul> <li>column box <li>multi-column container <li>multi-column layout </ul> <li> <a data-link-type="biblio">[CSS-PAGE-FLOATS-3]</a> defines the following terms: <ul> <li>float </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li>absolutely positioned box <li>positioned box <li>static </ul> <li> <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms: <ul> <li>::first-letter <li>::first-line <li>::marker <li>first formatted line </ul> <li> <a data-link-type="biblio">[CSS-RUBY-1]</a> defines the following terms: <ul> <li>internal ruby boxes <li>ruby annotation <li>ruby base container box <li>ruby container box </ul> <li> <a data-link-type="biblio">[CSS-SHAPES-1]</a> defines the following terms: <ul> <li>none <li>shape-margin <li>shape-outside </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>auto <li>automatic size <li>box-sizing <li>definite <li>height <li>inner size <li>max size <li>min size <li>outer size <li>preferred height <li>preferred width <li>sizing property </ul> <li> <a data-link-type="biblio">[CSS-TEXT-3]</a> defines the following terms: <ul> <li>forced line break <li>hang <li>text-align </ul> <li> <a data-link-type="biblio">[CSS-TEXT-4]</a> defines the following terms: <ul> <li>collapsible white space <li>content language <li>document white space <li>forced line break <li>hanging-punctuation <li>justification opportunity <li>preserved white space <li>typographic character unit <li>word separator </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li>! <li>&& <li><integer> <li><length-percentage> <li><length> <li><number> <li><percentage> <li>? <li>CSS-wide keywords <li>em <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>block axis <li>block end <li>block flow direction <li>block size <li>block-axis <li>block-end <li>block-start <li>horizontal writing mode <li>inline axis <li>inline size <li>inline-axis <li>inline-end <li>inline-start <li>line-left <li>line-over <li>line-right <li>line-under <li>logical height <li>logical width <li>mixed <li>over <li>sideways <li>start <li>text-orientation <li>typographic mode <li>under <li>upright <li>vertical writing mode <li>vertical-lr <li>writing-mode </ul> <li> <a data-link-type="biblio">[CSS2]</a> defines the following terms: <ul> <li>computed value <li>content box <li>font-size <li>initial value <li>letter-spacing <li>margin <li>outline <li>position <li>specified value <li>text-indent <li>used value <li>widows <li>word-spacing <li>z-index </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li>clear <li>float </ul> <li> <a data-link-type="biblio">[SVG2]</a> defines the following terms: <ul> <li>current text position <li>text content element </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-align-3">[CSS-ALIGN-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-align-3/"><cite>CSS Box Alignment Module Level 3</cite></a>. 17 February 2023. WD. URL: <a href="https://www.w3.org/TR/css-align-3/">https://www.w3.org/TR/css-align-3/</a> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. 11 March 2024. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a> <dt id="biblio-css-box-3">[CSS-BOX-3] <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-3/"><cite>CSS Box Model Module Level 3</cite></a>. 11 April 2024. REC. URL: <a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. 4 August 2024. WD. URL: <a href="https://www.w3.org/TR/css-box-4/">https://www.w3.org/TR/css-box-4/</a> <dt id="biblio-css-break-3">[CSS-BREAK-3] <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/"><cite>CSS Fragmentation Module Level 3</cite></a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a> <dt id="biblio-css-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. 13 January 2022. CR. URL: <a href="https://www.w3.org/TR/css-cascade-5/">https://www.w3.org/TR/css-cascade-5/</a> <dt id="biblio-css-counter-styles-3">[CSS-COUNTER-STYLES-3] <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-counter-styles-3/"><cite>CSS Counter Styles Level 3</cite></a>. 27 July 2021. CR. URL: <a href="https://www.w3.org/TR/css-counter-styles-3/">https://www.w3.org/TR/css-counter-styles-3/</a> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-display-3/"><cite>CSS Display Module Level 3</cite></a>. 30 March 2023. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a> <dt id="biblio-css-fonts-4">[CSS-FONTS-4] <dd>Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-4/"><cite>CSS Fonts Module Level 4</cite></a>. 1 February 2024. WD. URL: <a href="https://www.w3.org/TR/css-fonts-4/">https://www.w3.org/TR/css-fonts-4/</a> <dt id="biblio-css-lists-3">[CSS-LISTS-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-lists-3/"><cite>CSS Lists and Counters Module Level 3</cite></a>. 17 November 2020. WD. URL: <a href="https://www.w3.org/TR/css-lists-3/">https://www.w3.org/TR/css-lists-3/</a> <dt id="biblio-css-multicol-1">[CSS-MULTICOL-1] <dd>Florian Rivoal; Rachel Andrew. <a href="https://www.w3.org/TR/css-multicol-1/"><cite>CSS Multi-column Layout Module Level 1</cite></a>. 16 May 2024. CR. URL: <a href="https://www.w3.org/TR/css-multicol-1/">https://www.w3.org/TR/css-multicol-1/</a> <dt id="biblio-css-page-floats-3">[CSS-PAGE-FLOATS-3] <dd>Johannes Wilm. <a href="https://www.w3.org/TR/css-page-floats-3/"><cite>CSS Page Floats</cite></a>. 15 September 2015. WD. URL: <a href="https://www.w3.org/TR/css-page-floats-3/">https://www.w3.org/TR/css-page-floats-3/</a> <dt id="biblio-css-position-3">[CSS-POSITION-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. 10 August 2024. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a> <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4] <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://www.w3.org/TR/css-pseudo-4/"><cite>CSS Pseudo-Elements Module Level 4</cite></a>. 30 December 2022. WD. URL: <a href="https://www.w3.org/TR/css-pseudo-4/">https://www.w3.org/TR/css-pseudo-4/</a> <dt id="biblio-css-ruby-1">[CSS-RUBY-1] <dd>Elika Etemad; et al. <a href="https://www.w3.org/TR/css-ruby-1/"><cite>CSS Ruby Annotation Layout Module Level 1</cite></a>. 31 December 2022. WD. URL: <a href="https://www.w3.org/TR/css-ruby-1/">https://www.w3.org/TR/css-ruby-1/</a> <dt id="biblio-css-shapes-1">[CSS-SHAPES-1] <dd>Rossen Atanassov; Alan Stearns. <a href="https://www.w3.org/TR/css-shapes-1/"><cite>CSS Shapes Module Level 1</cite></a>. 15 November 2022. CR. URL: <a href="https://www.w3.org/TR/css-shapes-1/">https://www.w3.org/TR/css-shapes-1/</a> <dt id="biblio-css-sizing-3">[CSS-SIZING-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. 17 December 2021. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a> <dt id="biblio-css-text-3">[CSS-TEXT-3] <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://www.w3.org/TR/css-text-3/"><cite>CSS Text Module Level 3</cite></a>. 30 September 2024. CR. URL: <a href="https://www.w3.org/TR/css-text-3/">https://www.w3.org/TR/css-text-3/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://www.w3.org/TR/css-text-4/"><cite>CSS Text Module Level 4</cite></a>. 29 May 2024. WD. URL: <a href="https://www.w3.org/TR/css-text-4/">https://www.w3.org/TR/css-text-4/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. 22 March 2024. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. 12 March 2024. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. 30 July 2019. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS21/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS21/">https://www.w3.org/TR/CSS21/</a> <dt id="biblio-css22">[CSS22] <dd>Bert Bos. <a href="https://www.w3.org/TR/CSS22/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. 12 April 2016. WD. URL: <a href="https://www.w3.org/TR/CSS22/">https://www.w3.org/TR/CSS22/</a> <dt id="biblio-quirks">[QUIRKS] <dd>Simon Pieters. <a href="https://quirks.spec.whatwg.org/"><cite>Quirks Mode Standard</cite></a>. Living Standard. URL: <a href="https://quirks.spec.whatwg.org/">https://quirks.spec.whatwg.org/</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-svg2">[SVG2] <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/"><cite>Scalable Vector Graphics (SVG) 2</cite></a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</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-line-grid-1">[CSS-LINE-GRID-1] <dd>Elika Etemad; Koji Ishii; Alan Stearns. <a href="https://www.w3.org/TR/css-line-grid-1/"><cite>CSS Line Grid Module Level 1</cite></a>. 16 September 2014. WD. URL: <a href="https://www.w3.org/TR/css-line-grid-1/">https://www.w3.org/TR/css-line-grid-1/</a> <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3] <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/"><cite>CSS Writing Modes Level 3</cite></a>. 10 December 2019. REC. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a> <dt id="biblio-ilreq">[ILREQ] <dd>Swaran Lata. <a href="https://www.w3.org/TR/ilreq/"><cite>Indic Layout Requirements</cite></a>. 29 May 2020. WD. URL: <a href="https://www.w3.org/TR/ilreq/">https://www.w3.org/TR/ilreq/</a> <dt id="biblio-select">[SELECT] <dd>Tantek Çelik; et al. <a href="https://www.w3.org/TR/selectors-3/"><cite>Selectors Level 3</cite></a>. 6 November 2018. REC. URL: <a href="https://www.w3.org/TR/selectors-3/">https://www.w3.org/TR/selectors-3/</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-alignment-baseline" id="ref-for-propdef-alignment-baseline①⓪">alignment-baseline</a> <td>baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top <td>baseline <td>inline-level boxes, flex items, grid items, table cells, and SVG text content elements <td>no <td>N/A <td>discrete <td>per grammar <td>specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-baseline-shift" id="ref-for-propdef-baseline-shift①②">baseline-shift</a> <td><length-percentage> | sub | super | top | center | bottom <td>0 <td>inline-level boxes and SVG text content elements <td>no <td>refer to the used value of line-height <td>by computed value type <td>per grammar <td>the specified keyword or a computed <length-percentage> value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-baseline-source" id="ref-for-propdef-baseline-source⑥">baseline-source</a> <td>auto | first | last <td>auto <td>inline-level boxes <td>no <td>N/A <td>discrete <td>per grammar <td>specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline⑥">dominant-baseline</a> <td>auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top <td>auto <td>block containers, inline boxes, table rows, grid containers, flex containers, and SVG text content elements <td>yes <td>N/A <td>discrete <td>per grammar <td>specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-initial-letter" id="ref-for-propdef-initial-letter②⑧">initial-letter</a> <td>normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [ drop | raise ]? <td>normal <td>certain inline-level boxes and ::first-letter and inside ::marker boxes (see prose) <td>no <td>N/A <td>by computed value type <td>per grammar <td>the keyword normal or a number paired with an integer <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-initial-letter-align" id="ref-for-propdef-initial-letter-align⑨">initial-letter-align</a> <td>[ border-box? [ alphabetic | ideographic | hanging | leading ]? ]! <td>alphabetic <td>certain inline-level boxes and ::first-letter and inside ::marker boxes (see prose) <td>yes <td>N/A <td>discrete <td>per grammar <td>specified keyword(s) <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-initial-letter-wrap" id="ref-for-propdef-initial-letter-wrap⑤">initial-letter-wrap</a> <td>none | first | all | grid | <length-percentage> <td>none <td>certain inline-level boxes and ::first-letter and inside ::marker boxes (see prose) <td>yes <td>relative to logical width of (last fragment of) initial letter <td>by computed value type <td>per grammar <td>specified keyword or computed <length-percentage> value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-inline-sizing" id="ref-for-propdef-inline-sizing⑤">inline-sizing</a> <td>normal | stretch <td>normal <td>inline boxes, but not ruby container boxes nor internal ruby boxes <td>yes <td>n/a <td>discrete <td>per grammar <td>specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-line-fit-edge" id="ref-for-propdef-line-fit-edge②⑥">line-fit-edge</a> <td>leading | <text-edge> <td>leading <td>inline boxes <td>yes <td>N/A <td>discrete <td>per grammar <td>the specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-line-height" id="ref-for-propdef-line-height②⑤">line-height</a> <td>normal | <number [0,∞]> | <length-percentage [0,∞]> <td>normal <td>non-replaced inline boxes and SVG text content elements <td>yes <td>computed relative to 1em <td>by computed value type <td>per grammar <td>the specified keyword, a number, or a computed <length> value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-box" id="ref-for-propdef-text-box⑤">text-box</a> <td>normal | <'text-box-trim'> || <'text-box-edge'> <td>normal <td>block containers and inline boxes <td>no <td>N/A <td>discrete <td>per grammar <td>the specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-box-edge" id="ref-for-propdef-text-box-edge①⑦">text-box-edge</a> <td>auto | <text-edge> <td>auto <td>block containers and inline boxes <td>yes <td>N/A <td>discrete <td>per grammar <td>the specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-box-trim" id="ref-for-propdef-text-box-trim②③">text-box-trim</a> <td>none | trim-start | trim-end | trim-both <td>none <td>block containers and inline boxes <td>no <td>N/A <td>discrete <td>per grammar <td>the specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-vertical-align" id="ref-for-propdef-vertical-align①⑥">vertical-align</a> <td>[ first | last] || <'alignment-baseline'> || <'baseline-shift'> <td>baseline <td>see individual properties <td>no <td>N/A <td>see individual properties <td>per grammar <td>see individual properties </table> </div> <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> Many aspects of layout here depend on font metrics. While the relevant metrics exist in OpenType for Latin/Cyrillic/Greek and for <abbr title="Chinese/Japanese/Korean">CJK</abbr>, they are missing for many other writing systems. For example, the visual top metric for Hebrew has no metric in the OpenType tables. For this module to work well for the world, we need fonts to provide the relevant metrics for all writing systems, and that means both that OpenType needs to allow such metrics and font designers need to provide accurate numbers. See <a href="https://github.com/w3c/csswg-drafts/issues/5244">issue</a> and <a href="https://lists.w3.org/Archives/Public/www-archive/2020Feb/att-0005/CSS-SC29-20200113.pdf">liaison statement</a>. <a class="issue-return" href="#issue-4c501384" title="Jump to section">↵</a></div> <div class="issue"> Define what to do for top/bottom/center aligned boxes that are taller than the rest of the content. <a class="issue-return" href="#issue-e2d22611" title="Jump to section">↵</a></div> <div class="issue"> Firefox allows the inline boxes within a <a data-link-type="dfn" href="#phantom-line-box">phantom line box</a> to accept <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/ui.html#propdef-outline">outline</a>,which allows it to make focus rings visible. As in other browsers, all other properties that could make the element visible (e.g. <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow">box-shadow</a>) seem to be ignored. <a class="issue-return" href="#issue-8b05a2ec" title="Jump to section">↵</a></div> <div class="issue"> The CSSWG would like to know which baseline values are necessary for each property that uses them (<a class="property css" data-link-type="property" href="#propdef-dominant-baseline">dominant-baseline</a>, <a class="property css" data-link-type="property" href="#propdef-alignment-baseline">alignment-baseline</a>, <a class="property css" data-link-type="property" href="#propdef-text-box-edge">text-box-edge</a>, <a class="property css" data-link-type="property" href="#propdef-line-fit-edge">line-fit-edge</a>, <a class="property css" data-link-type="property" href="#propdef-initial-letter-align">initial-letter-align</a>): if any can be dropped, or any need to be added. See <a href="https://github.com/w3c/csswg-drafts/issues/859">Issue 859</a>. <a class="issue-return" href="#issue-3bc5ecf6" title="Jump to section">↵</a></div> <div class="issue"> Define behavior for mixed vertical orientations that isn’t nonsensical when specified baseline isn’t <a class="css" data-link-type="maybe" href="#valdef-dominant-baseline-central">central</a>. <a class="issue-return" href="#issue-2ffa7534" title="Jump to section">↵</a></div> <div class="issue"> The <a data-link-type="dfn" href="#line-relative-shift-values">line-relative shift values</a> don’t fit perfectly in the dichotomy between <a class="property css" data-link-type="property" href="#propdef-alignment-baseline">alignment-baseline</a> and <a class="property css" data-link-type="property" href="#propdef-baseline-shift">baseline-shift</a>. There’s <a href="https://github.com/w3c/csswg-drafts/issues/5180">decent</a> <a href="https://github.com/w3c/csswg-drafts/issues/5234">arguments</a> for either option. They’re currently drafted here, but if there’s a strong argument to move them, please file an issue for consideration. <a class="issue-return" href="#issue-8910737b" title="Jump to section">↵</a></div> <div class="issue"> We would prefer to remove the <a class="css" data-link-type="maybe" href="#valdef-baseline-shift-baseline">baseline</a> value, and are looking for feedback from SVG user agents as to whether it’s necessary. <a class="issue-return" href="#issue-6cbc9542" title="Jump to section">↵</a></div> <div class="issue"> The fact that percentages compute to lengths is annoying. See also <a href="https://github.com/w3c/csswg-drafts/issues/3118">Issue 3118</a> and <a href="https://github.com/w3c/csswg-drafts/issues/2165">Issue 2165</a>. <a class="issue-return" href="#issue-af10b7fe" title="Jump to section">↵</a></div> <div class="issue"> This is an early draft of a proposal, and might change significantly as design critiques and use cases are registered and various details and interactions with other properties are worked out. Do not ship (yet). <a class="issue-return" href="#issue-6de82a32" title="Jump to section">↵</a></div> <div class="issue"> Do we need <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#longhand">longhands</a> or is this shorthand enough? <a href="https://github.com/w3c/csswg-drafts/issues/5236">[Issue #5236]</a> <a class="issue-return" href="#issue-eba283e1" title="Jump to section">↵</a></div> <div class="issue"> Is <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-text">text</a> a reasonable name for the ascent/descent metrics, or can we think of something better? Ditto <a class="css" data-link-type="maybe" href="#valdef-line-fit-edge-leading">leading</a> as a keyword. <a href="https://github.com/w3c/csswg-drafts/issues/8067">[Issue #8067]</a> <a class="issue-return" href="#issue-d656b674" title="Jump to section">↵</a></div> <div class="issue"> This illustration doesn’t match actual font metrics, it’s actually illustrating the cap-height, not the ascent. <a href="https://github.com/w3c/csswg-drafts/issues/11364">[Issue #11364]</a> <a class="issue-return" href="#issue-5f46f8ae" title="Jump to section">↵</a></div> <div class="issue"> Add examples. <a class="issue-return" href="#issue-6e028676" title="Jump to section">↵</a></div> <div class="issue"> What happens if the column is split by a spanner? <a href="https://github.com/w3c/csswg-drafts/issues/11363">[Issue #11363]</a> <a class="issue-return" href="#issue-d1836b7a" title="Jump to section">↵</a></div> <div class="issue"> This has a confusing name. We need a new name. Alternatively, incorporate this into <a class="property css" data-link-type="property" href="#propdef-text-box-trim">text-box-trim</a>? <a href="https://github.com/w3c/csswg-drafts/issues/5189">[Issue #5189]</a> <a class="issue-return" href="#issue-2c8f414b" title="Jump to section">↵</a></div> <div class="issue">The editors would appreciate any examples of drop initials in non-western scripts, especially Indic scripts. <a class="issue-return" href="#issue-81b8cb9c" title="Jump to section">↵</a></div> <div class="issue"> Should there be a way to opt out of this behavior? See <a href="https://github.com/w3c/csswg-drafts/issues/310">GitHub Issue 310</a>. <a class="issue-return" href="#issue-8e10cdbe" title="Jump to section">↵</a></div> <div class="issue"> Correct alignment of initial letter in scripts such as Hebrew and Thai is currently not possible because OpenType lacks corresponding metrics. (<a href="https://github.com/w3c/csswg-drafts/issues/5244">Issue 5244</a>) <figure> <img alt="Hebrew 2-line drop-letter alignment using the hebrew-top and alphabetic baselines" src="images/hebrew-initial-letter.png" width="480"> </figure> <a class="issue-return" href="#issue-9175a33b" title="Jump to section">↵</a> </div> <div class="issue"> This only covers the most common cross-linguistic transcription systems. Should we include any other / all script tags in the UA style sheet? <a class="issue-return" href="#issue-fbd38850" title="Jump to section">↵</a></div> <div class="issue"> What about inheritance to descendants? <a href="https://github.com/w3c/csswg-drafts/issues/4988">[Issue #4988]</a> <a class="issue-return" href="#issue-c519e9ec" title="Jump to section">↵</a></div> <div class="issue"> Update this calculation to be a) generic across writing systems / alignment points and b) handle non-integer sizes. <a class="issue-return" href="#issue-20a01c1f" title="Jump to section">↵</a></div> <div class="issue"> Should the hanging punctuation be included in the box instead (so that the box is drawn around the punctuation when it is made visible through borders/background), but rather only excluded when positioning the box (so that the initial letter remains flush, with the hanging punctuation properly hanging)? See <a href="https://github.com/w3c/csswg-drafts/issues/310">discussion</a>. <a class="issue-return" href="#issue-8de59d00" title="Jump to section">↵</a></div> <div class="issue"> Do we need an unconditional <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a>? (I.e. Should we rename this value to auto and add a first value that does not check for spaces?) See GitHub issue <a href="https://github.com/w3c/csswg-drafts/issues/410">410</a> <a class="issue-return" href="#issue-58dffa4b" title="Jump to section">↵</a></div> <div class="issue"> This really needs font-relative lengths to be relative to the used size. <a class="issue-return" href="#issue-645378a9" title="Jump to section">↵</a></div> <div class="issue"> These values and related annoyance is likely unnecessary if someone submits a patch to Blink to support <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a>. <a class="issue-return" href="#issue-e060e05e" title="Jump to section">↵</a></div> <div class="issue"> Edit figure to show how auto behaves in varying contexts <a class="issue-return" href="#issue-c4ff3304" title="Jump to section">↵</a></div> <div class="issue"> The interaction of <a class="property css" data-link-type="property" href="#propdef-initial-letter">initial-letter</a> and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-4/#propdef-hanging-punctuation">hanging-punctuation</a> is <a href="https://github.com/w3c/csswg-drafts/issues/310#issuecomment-396765893">under discussion</a>. <a class="issue-return" href="#issue-a41c99e9" title="Jump to section">↵</a></div> <div class="issue"> Handle glyph ink above cap height of font. Proposal: Make it an exclusion area for line boxes and border boxes. Include margin specified on initial-letters as part of exclusion area in order to control spacing. <a class="issue-return" href="#issue-bd8afce4" title="Jump to section">↵</a></div> <div class="issue"> Draw a box model diagram here. Does the margin of the initial letter collapse with its container? <a class="issue-return" href="#issue-9ca3e502" title="Jump to section">↵</a></div> <div class="issue"> Whether an inline-end float originating in subsequent lines must clear the initial letter (as inline-start floats do) is <a href="https://lists.w3.org/Archives/Public/www-style/2018Jul/0019.html">still under discussion</a>. There is no aesthetic reason to require it; however it’s yet unclear how the underlying layout model would distinguish between the two cases. <a class="issue-return" href="#issue-a83ae7df" title="Jump to section">↵</a></div> <div class="issue"> Pick a default. <a class="issue-return" href="#issue-2765c39b" title="Jump to section">↵</a></div> <div class="issue"> Somebody sanity-check these heuristics please. <a class="issue-return" href="#issue-6c88f039" title="Jump to section">↵</a></div> </div> <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 = { "020c3333": {"dfnID":"020c3333","dfnText":"end","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-self-position-end"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"}],"url":"https://www.w3.org/TR/css-align-3/#valdef-self-position-end"}, "04004305": {"dfnID":"04004305","dfnText":"fragmentation","external":true,"refSections":[{"refs":[{"id":"ref-for-fragmentation"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-fragmentation\u2460"}],"title":"7.9.4. \nInteraction with Fragmentation (Pagination)"},{"refs":[{"id":"ref-for-fragmentation\u2461"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-break-4/#fragmentation"}, "0570259e": {"dfnID":"0570259e","dfnText":"float","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-float"}],"title":"7.3.1. \nApplicability"},{"refs":[{"id":"ref-for-propdef-float\u2460"}],"title":"\nChanges"}],"url":"https://drafts.csswg.org/css2/#propdef-float"}, "05c40e8e": {"dfnID":"05c40e8e","dfnText":"block container","external":true,"refSections":[{"refs":[{"id":"ref-for-block-container"},{"id":"ref-for-block-container\u2460"},{"id":"ref-for-block-container\u2461"},{"id":"ref-for-block-container\u2462"},{"id":"ref-for-block-container\u2463"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-block-container\u2464"},{"id":"ref-for-block-container\u2465"},{"id":"ref-for-block-container\u2466"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-block-container\u2467"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-block-container\u2468"}],"title":"6.1. \nShorthand for Text Box Trimming: the text-box property"},{"refs":[{"id":"ref-for-block-container\u2460\u24ea"},{"id":"ref-for-block-container\u2460\u2460"},{"id":"ref-for-block-container\u2460\u2461"},{"id":"ref-for-block-container\u2460\u2462"},{"id":"ref-for-block-container\u2460\u2463"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-block-container\u2460\u2464"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"}],"url":"https://www.w3.org/TR/css-display-3/#block-container"}, "06eea7ac": {"dfnID":"06eea7ac","dfnText":"float","external":true,"refSections":[{"refs":[{"id":"ref-for-float"}],"title":"2.1. \nLayout of Line Boxes"}],"url":"https://www.w3.org/TR/css-page-floats-3/#float"}, "06fd3b4c": {"dfnID":"06fd3b4c","dfnText":"out-of-flow","external":true,"refSections":[{"refs":[{"id":"ref-for-out-of-flow"}],"title":"2.3. \nPhantom Line Boxes"}],"url":"https://www.w3.org/TR/css-display-3/#out-of-flow"}, "088aa1a3": {"dfnID":"088aa1a3","dfnText":"content box","external":true,"refSections":[{"refs":[{"id":"ref-for-x10"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-x10\u2460"},{"id":"ref-for-x10\u2461"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-x10\u2462"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-x10\u2463"}],"title":"7.5.5. \nSizing the Initial Letter Box"}],"url":"https://www.w3.org/TR/CSS21/box.html#x10"}, "08c40d52": {"dfnID":"08c40d52","dfnText":"current text position","external":true,"refSections":[{"refs":[{"id":"ref-for-TermCurrentTextPosition"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"}],"url":"https://svgwg.org/svg2-draft/text.html#TermCurrentTextPosition"}, "0ab5f38d": {"dfnID":"0ab5f38d","dfnText":"inline-level content","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-level"},{"id":"ref-for-inline-level\u2460"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-inline-level\u2461"},{"id":"ref-for-inline-level\u2462"},{"id":"ref-for-inline-level\u2463"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-inline-level\u2464"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-inline-level\u2465"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-inline-level\u2466"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-inline-level\u2467"}],"title":"5. \nLogical Heights and Inter-line Spacing"},{"refs":[{"id":"ref-for-inline-level\u2468"}],"title":"7.3.1. \nApplicability"},{"refs":[{"id":"ref-for-inline-level\u2460\u24ea"}],"title":"7.8. \nLine Layout"},{"refs":[{"id":"ref-for-inline-level\u2460\u2460"}],"title":"7.8.1. \nInline Flow Layout: Alignment, Justification, and White Space"},{"refs":[{"id":"ref-for-inline-level\u2460\u2461"}],"title":"7.9.3. \nInteraction with floats"}],"url":"https://www.w3.org/TR/css-display-3/#inline-level"}, "0ad9204c": {"dfnID":"0ad9204c","dfnText":"line-over","external":true,"refSections":[{"refs":[{"id":"ref-for-line-over"},{"id":"ref-for-line-over\u2460"},{"id":"ref-for-line-over\u2461"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-line-over\u2462"},{"id":"ref-for-line-over\u2463"},{"id":"ref-for-line-over\u2464"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-line-over\u2465"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-line-over\u2466"},{"id":"ref-for-line-over\u2467"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#line-over"}, "0da67e16": {"dfnID":"0da67e16","dfnText":"inline-start","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-start"}],"title":"7.6.2. \nInline Kerning"},{"refs":[{"id":"ref-for-inline-start\u2460"}],"title":"7.9.3. \nInteraction with floats"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#inline-start"}, "0e506341": {"dfnID":"0e506341","dfnText":"alignment context","external":true,"refSections":[{"refs":[{"id":"ref-for-shared-alignment-context"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-shared-alignment-context\u2460"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-shared-alignment-context\u2461"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-shared-alignment-context\u2462"},{"id":"ref-for-shared-alignment-context\u2463"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"}],"url":"https://www.w3.org/TR/css-align-3/#shared-alignment-context"}, "10d0d189": {"dfnID":"10d0d189","dfnText":"line-right","external":true,"refSections":[{"refs":[{"id":"ref-for-line-right"},{"id":"ref-for-line-right\u2460"}],"title":"2.1. \nLayout of Line Boxes"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#line-right"}, "1118d052": {"dfnID":"1118d052","dfnText":"block-start","external":true,"refSections":[{"refs":[{"id":"ref-for-block-start"},{"id":"ref-for-block-start\u2460"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-block-start\u2461"}],"title":"7.1.1. \nDrop Initial"},{"refs":[{"id":"ref-for-block-start\u2462"},{"id":"ref-for-block-start\u2463"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-block-start\u2464"},{"id":"ref-for-block-start\u2465"}],"title":"7.6.1. \nBlock-axis Positioning"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#block-start"}, "123f21cb": {"dfnID":"123f21cb","dfnText":"internal ruby boxes","external":true,"refSections":[{"refs":[{"id":"ref-for-internal-ruby-boxes"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"}],"url":"https://www.w3.org/TR/css-ruby-1/#internal-ruby-boxes"}, "128295ac": {"dfnID":"128295ac","dfnText":"<percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-percentage-value"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-percentage-value\u2460"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-percentage-value\u2461"},{"id":"ref-for-percentage-value\u2462"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"}],"url":"https://www.w3.org/TR/css-values-4/#percentage-value"}, "131c8fac": {"dfnID":"131c8fac","dfnText":"preserved white space","external":true,"refSections":[{"refs":[{"id":"ref-for-preserved-white-space"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-preserved-white-space\u2460"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"}],"url":"https://www.w3.org/TR/css-text-4/#preserved-white-space"}, "148eb1d2": {"dfnID":"148eb1d2","dfnText":"none","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-shape-outside-none"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"}],"url":"https://www.w3.org/TR/css-shapes-1/#valdef-shape-outside-none"}, "15d5b5ce": {"dfnID":"15d5b5ce","dfnText":"last-baseline alignment","external":true,"refSections":[{"refs":[{"id":"ref-for-last-baseline-alignment"},{"id":"ref-for-last-baseline-alignment\u2460"}],"title":"4.2.1. \nAlignment Baseline Source: the baseline-source longhand"}],"url":"https://www.w3.org/TR/css-align-3/#last-baseline-alignment"}, "18bb1084": {"dfnID":"18bb1084","dfnText":"inline size","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-size"}],"title":"7.5.6. \nAlignment Within an Initial Letter Box"},{"refs":[{"id":"ref-for-inline-size\u2460"}],"title":"7.6.2. \nInline Kerning"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#inline-size"}, "18e89fe6": {"dfnID":"18e89fe6","dfnText":"word-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-word-spacing"}],"title":"7.8.1. \nInline Flow Layout: Alignment, Justification, and White Space"}],"url":"https://www.w3.org/TR/CSS21/text.html#propdef-word-spacing"}, "1a7375ef": {"dfnID":"1a7375ef","dfnText":"word separator","external":true,"refSections":[{"refs":[{"id":"ref-for-word-separator"}],"title":"7.8.1. \nInline Flow Layout: Alignment, Justification, and White Space"}],"url":"https://www.w3.org/TR/css-text-4/#word-separator"}, "1b6b4591": {"dfnID":"1b6b4591","dfnText":"max size","external":true,"refSections":[{"refs":[{"id":"ref-for-max-width"}],"title":"7.5.5. \nSizing the Initial Letter Box"}],"url":"https://www.w3.org/TR/css-sizing-3/#max-width"}, "1e41af8f": {"dfnID":"1e41af8f","dfnText":"inside","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-list-style-position-inside"}],"title":"7.3.1. \nApplicability"}],"url":"https://www.w3.org/TR/css-lists-3/#valdef-list-style-position-inside"}, "219a15e3": {"dfnID":"219a15e3","dfnText":"content language","external":true,"refSections":[{"refs":[{"id":"ref-for-content-language"}],"title":"3.1. \nIntroduction to Baselines"},{"refs":[{"id":"ref-for-content-language\u2460"}],"title":"\nA.2: Synthesizing Baselines (and Other Font Metrics) for Text"}],"url":"https://www.w3.org/TR/css-text-4/#content-language"}, "21ec9802": {"dfnID":"21ec9802","dfnText":"inherit","external":true,"refSections":[{"refs":[{"id":"ref-for-css-inheritance"}],"title":"\nChanges"}],"url":"https://drafts.csswg.org/css-cascade-5/#css-inheritance"}, "2218854e": {"dfnID":"2218854e","dfnText":"forced break","external":true,"refSections":[{"refs":[{"id":"ref-for-forced-break"}],"title":"7.9.4. \nInteraction with Fragmentation (Pagination)"}],"url":"https://www.w3.org/TR/css-break-4/#forced-break"}, "22dc0499": {"dfnID":"22dc0499","dfnText":"preferred width","external":true,"refSections":[{"refs":[{"id":"ref-for-width"}],"title":"7.5.5. \nSizing the Initial Letter Box"}],"url":"https://www.w3.org/TR/css-sizing-3/#width"}, "2351701b": {"dfnID":"2351701b","dfnText":"inline-block","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-inline-block"}],"title":"4.2.1. \nAlignment Baseline Source: the baseline-source longhand"}],"url":"https://www.w3.org/TR/css-display-3/#valdef-display-inline-block"}, "2355631a": {"dfnID":"2355631a","dfnText":"min size","external":true,"refSections":[{"refs":[{"id":"ref-for-min-width"}],"title":"7.5.5. \nSizing the Initial Letter Box"}],"url":"https://www.w3.org/TR/css-sizing-3/#min-width"}, "24e3d3d6": {"dfnID":"24e3d3d6","dfnText":"typographic character unit","external":true,"refSections":[{"refs":[{"id":"ref-for-typographic-character-unit"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"},{"refs":[{"id":"ref-for-typographic-character-unit\u2460"}],"title":"7.8.1. \nInline Flow Layout: Alignment, Justification, and White Space"}],"url":"https://www.w3.org/TR/css-text-4/#typographic-character-unit"}, "276c9ab1": {"dfnID":"276c9ab1","dfnText":"forced line break","external":true,"refSections":[{"refs":[{"id":"ref-for-forced-line-break\u2460"}],"title":"2.3. \nPhantom Line Boxes"}],"url":"https://www.w3.org/TR/css-text-4/#forced-line-break"}, "299e10e4": {"dfnID":"299e10e4","dfnText":"replaced element","external":true,"refSections":[{"refs":[{"id":"ref-for-replaced-element"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-replaced-element\u2460"}],"title":"7.5. \nInitial Letter Layout"},{"refs":[{"id":"ref-for-replaced-element\u2461"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"https://www.w3.org/TR/css-display-3/#replaced-element"}, "2ac08cff": {"dfnID":"2ac08cff","dfnText":"sizing property","external":true,"refSections":[{"refs":[{"id":"ref-for-sizing-property"}],"title":"7.5.1. \nProperties Applying to Initial Letters"}],"url":"https://www.w3.org/TR/css-sizing-3/#sizing-property"}, "2ccfe434": {"dfnID":"2ccfe434","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"}],"title":"7.3.1. \nApplicability"}],"url":"https://www.w3.org/TR/css-display-3/#propdef-display"}, "2f1d12f3": {"dfnID":"2f1d12f3","dfnText":"ruby base container box","external":true,"refSections":[{"refs":[{"id":"ref-for-ruby-base-container-box"}],"title":"7.3.1. \nApplicability"}],"url":"https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box"}, "30e036e4": {"dfnID":"30e036e4","dfnText":"border","external":true,"refSections":[{"refs":[{"id":"ref-for-border"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-border\u2460"},{"id":"ref-for-border\u2461"},{"id":"ref-for-border\u2462"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-border\u2463"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-border\u2464"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-border\u2465"}],"title":"7.5.2. \nMargins, Borders, and Padding"},{"refs":[{"id":"ref-for-border\u2466"}],"title":"7.5.5. \nSizing the Initial Letter Box"}],"url":"https://www.w3.org/TR/css-box-4/#border"}, "3126ae25": {"dfnID":"3126ae25","dfnText":"column box","external":true,"refSections":[{"refs":[{"id":"ref-for-column-box"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-column-box\u2460"},{"id":"ref-for-column-box\u2461"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"}],"url":"https://www.w3.org/TR/css-multicol-1/#column-box"}, "34ede11b": {"dfnID":"34ede11b","dfnText":"hang","external":true,"refSections":[{"refs":[{"id":"ref-for-hang"}],"title":"7.5.5. \nSizing the Initial Letter Box"}],"url":"https://www.w3.org/TR/css-text-3/#hang"}, "35e80fd9": {"dfnID":"35e80fd9","dfnText":"start","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-self-position-start"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"}],"url":"https://www.w3.org/TR/css-align-3/#valdef-self-position-start"}, "35f1d972": {"dfnID":"35f1d972","dfnText":"static","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-position-static"}],"title":"7.3.1. \nApplicability"}],"url":"https://www.w3.org/TR/css-position-3/#valdef-position-static"}, "35f596e9": {"dfnID":"35f596e9","dfnText":"vertical-lr","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-lr"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-vertical-lr"}, "36261173": {"dfnID":"36261173","dfnText":"longhand","external":true,"refSections":[{"refs":[{"id":"ref-for-longhand"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-longhand\u2460"},{"id":"ref-for-longhand\u2461"}],"title":"7.5.1. \nProperties Applying to Initial Letters"}],"url":"https://www.w3.org/TR/css-cascade-5/#longhand"}, "36e5f32e": {"dfnID":"36e5f32e","dfnText":"text-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-align"},{"id":"ref-for-propdef-text-align\u2460"}],"title":"7.5.6. \nAlignment Within an Initial Letter Box"},{"refs":[{"id":"ref-for-propdef-text-align\u2461"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-text-3/#propdef-text-align"}, "37bb38a0": {"dfnID":"37bb38a0","dfnText":"writing-mode","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-writing-mode"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode"}, "37f6dbd7": {"dfnID":"37f6dbd7","dfnText":"automatic size","external":true,"refSections":[{"refs":[{"id":"ref-for-automatic-size"}],"title":"7.5. \nInitial Letter Layout"},{"refs":[{"id":"ref-for-automatic-size\u2460"},{"id":"ref-for-automatic-size\u2461"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-automatic-size\u2462"}],"title":"7.5.6. \nAlignment Within an Initial Letter Box"},{"refs":[{"id":"ref-for-automatic-size\u2463"}],"title":"7.6.2. \nInline Kerning"}],"url":"https://www.w3.org/TR/css-sizing-3/#automatic-size"}, "4016198d": {"dfnID":"4016198d","dfnText":"content edge","external":true,"refSections":[{"refs":[{"id":"ref-for-content-edge"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-content-edge\u2460"},{"id":"ref-for-content-edge\u2461"},{"id":"ref-for-content-edge\u2462"},{"id":"ref-for-content-edge\u2463"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-content-edge\u2464"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-content-edge\u2465"}],"title":"7.6.1. \nBlock-axis Positioning"}],"url":"https://www.w3.org/TR/css-box-3/#content-edge"}, "401cafe5": {"dfnID":"401cafe5","dfnText":"line-under","external":true,"refSections":[{"refs":[{"id":"ref-for-line-under"},{"id":"ref-for-line-under\u2460"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-line-under\u2461"},{"id":"ref-for-line-under\u2462"},{"id":"ref-for-line-under\u2463"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-line-under\u2464"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-line-under\u2465"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-line-under\u2466"},{"id":"ref-for-line-under\u2467"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#line-under"}, "42a3c4cb": {"dfnID":"42a3c4cb","dfnText":"ruby annotation","external":true,"refSections":[{"refs":[{"id":"ref-for-ruby-annotation-box"}],"title":"2.3. \nPhantom Line Boxes"}],"url":"https://www.w3.org/TR/css-ruby-1/#ruby-annotation-box"}, "4346f556": {"dfnID":"4346f556","dfnText":"margin edge","external":true,"refSections":[{"refs":[{"id":"ref-for-margin-edge"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-margin-edge\u2460"}],"title":"7.6.1. \nBlock-axis Positioning"},{"refs":[{"id":"ref-for-margin-edge\u2461"},{"id":"ref-for-margin-edge\u2462"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"},{"refs":[{"id":"ref-for-margin-edge\u2463"}],"title":"7.8.3. \nAncestor Inlines"},{"refs":[{"id":"ref-for-margin-edge\u2464"},{"id":"ref-for-margin-edge\u2465"},{"id":"ref-for-margin-edge\u2466"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"https://www.w3.org/TR/css-box-3/#margin-edge"}, "43fd67c9": {"dfnID":"43fd67c9","dfnText":"formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-formatting-context"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-formatting-context\u2460"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-formatting-context\u2461"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-formatting-context\u2462"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-formatting-context\u2463"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"}],"url":"https://www.w3.org/TR/css-display-3/#formatting-context"}, "45439228": {"dfnID":"45439228","dfnText":"widows","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-widows"}],"title":"7.9.4. \nInteraction with Fragmentation (Pagination)"}],"url":"https://www.w3.org/TR/CSS21/page.html#propdef-widows"}, "47ea2436": {"dfnID":"47ea2436","dfnText":"outer size","external":true,"refSections":[{"refs":[{"id":"ref-for-outer-size"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"}],"url":"https://www.w3.org/TR/css-sizing-3/#outer-size"}, "4904f647": {"dfnID":"4904f647","dfnText":"fragmentation container","external":true,"refSections":[{"refs":[{"id":"ref-for-fragmentation-container"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-fragmentation-container\u2460"},{"id":"ref-for-fragmentation-container\u2461"},{"id":"ref-for-fragmentation-container\u2462"}],"title":"7.9.4. \nInteraction with Fragmentation (Pagination)"}],"url":"https://www.w3.org/TR/css-break-4/#fragmentation-container"}, "49eecea3": {"dfnID":"49eecea3","dfnText":"horizontal writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-horizontal-writing-mode"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#horizontal-writing-mode"}, "4b35980d": {"dfnID":"4b35980d","dfnText":"font-size","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-size"},{"id":"ref-for-propdef-font-size\u2460"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-propdef-font-size\u2461"},{"id":"ref-for-propdef-font-size\u2462"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-propdef-font-size\u2463"}],"title":"7.5.1. \nProperties Applying to Initial Letters"},{"refs":[{"id":"ref-for-propdef-font-size\u2464"}],"title":"7.5.3. \nFont Sizing of Initial Letters"}],"url":"https://www.w3.org/TR/CSS21/fonts.html#propdef-font-size"}, "4bda66a9": {"dfnID":"4bda66a9","dfnText":"::first-line","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-first-line"},{"id":"ref-for-selectordef-first-line\u2460"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"}],"url":"https://www.w3.org/TR/css-pseudo-4/#selectordef-first-line"}, "4d2cf2cf": {"dfnID":"4d2cf2cf","dfnText":"baseline alignment","external":true,"refSections":[{"refs":[{"id":"ref-for-baseline-alignment"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-baseline-alignment\u2460"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"}],"url":"https://www.w3.org/TR/css-align-3/#baseline-alignment"}, "4da3b716": {"dfnID":"4da3b716","dfnText":"inline-end","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-end"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#inline-end"}, "4ea821fb": {"dfnID":"4ea821fb","dfnText":"monolithic","external":true,"refSections":[{"refs":[{"id":"ref-for-monolithic"},{"id":"ref-for-monolithic\u2460"}],"title":"7.9.4. \nInteraction with Fragmentation (Pagination)"}],"url":"https://www.w3.org/TR/css-break-3/#monolithic"}, "4eb9d37e": {"dfnID":"4eb9d37e","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"},{"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"},{"id":"ref-for-comb-one\u2465"},{"id":"ref-for-comb-one\u2466"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-comb-one\u2467"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"},{"refs":[{"id":"ref-for-comb-one\u2468"},{"id":"ref-for-comb-one\u2460\u24ea"}],"title":"4.2.1. \nAlignment Baseline Source: the baseline-source longhand"},{"refs":[{"id":"ref-for-comb-one\u2460\u2460"},{"id":"ref-for-comb-one\u2460\u2461"},{"id":"ref-for-comb-one\u2460\u2462"},{"id":"ref-for-comb-one\u2460\u2463"},{"id":"ref-for-comb-one\u2460\u2464"},{"id":"ref-for-comb-one\u2460\u2465"},{"id":"ref-for-comb-one\u2460\u2466"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-comb-one\u2460\u2467"},{"id":"ref-for-comb-one\u2460\u2468"},{"id":"ref-for-comb-one\u2461\u24ea"},{"id":"ref-for-comb-one\u2461\u2460"},{"id":"ref-for-comb-one\u2461\u2461"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-comb-one\u2461\u2462"},{"id":"ref-for-comb-one\u2461\u2463"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-comb-one\u2461\u2464"},{"id":"ref-for-comb-one\u2461\u2465"},{"id":"ref-for-comb-one\u2461\u2466"},{"id":"ref-for-comb-one\u2461\u2467"},{"id":"ref-for-comb-one\u2461\u2468"},{"id":"ref-for-comb-one\u2462\u24ea"},{"id":"ref-for-comb-one\u2462\u2460"},{"id":"ref-for-comb-one\u2462\u2461"},{"id":"ref-for-comb-one\u2462\u2462"},{"id":"ref-for-comb-one\u2462\u2463"},{"id":"ref-for-comb-one\u2462\u2464"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-comb-one\u2462\u2465"}],"title":"6.1. \nShorthand for Text Box Trimming: the text-box property"},{"refs":[{"id":"ref-for-comb-one\u2462\u2466"},{"id":"ref-for-comb-one\u2462\u2467"},{"id":"ref-for-comb-one\u2462\u2468"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-comb-one\u2463\u24ea"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2460"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2461"},{"id":"ref-for-comb-one\u2463\u2462"},{"id":"ref-for-comb-one\u2463\u2463"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2464"},{"id":"ref-for-comb-one\u2463\u2465"},{"id":"ref-for-comb-one\u2463\u2466"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2467"},{"id":"ref-for-comb-one\u2463\u2468"},{"id":"ref-for-comb-one\u2464\u24ea"},{"id":"ref-for-comb-one\u2464\u2460"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"}],"url":"https://www.w3.org/TR/css-values-4/#comb-one"}, "4f19c3e6": {"dfnID":"4f19c3e6","dfnText":"line-left","external":true,"refSections":[{"refs":[{"id":"ref-for-line-left"},{"id":"ref-for-line-left\u2460"}],"title":"2.1. \nLayout of Line Boxes"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#line-left"}, "4f75e4ec": {"dfnID":"4f75e4ec","dfnText":"orphans","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-orphans"}],"title":"7.9.4. \nInteraction with Fragmentation (Pagination)"}],"url":"https://www.w3.org/TR/css-break-3/#propdef-orphans"}, "4f918eb5": {"dfnID":"4f918eb5","dfnText":"inline-level","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-level"},{"id":"ref-for-inline-level\u2460"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-inline-level\u2461"},{"id":"ref-for-inline-level\u2462"},{"id":"ref-for-inline-level\u2463"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-inline-level\u2464"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-inline-level\u2465"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-inline-level\u2466"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-inline-level\u2467"}],"title":"5. \nLogical Heights and Inter-line Spacing"},{"refs":[{"id":"ref-for-inline-level\u2468"}],"title":"7.3.1. \nApplicability"},{"refs":[{"id":"ref-for-inline-level\u2460\u24ea"}],"title":"7.8. \nLine Layout"},{"refs":[{"id":"ref-for-inline-level\u2460\u2460"}],"title":"7.8.1. \nInline Flow Layout: Alignment, Justification, and White Space"},{"refs":[{"id":"ref-for-inline-level\u2460\u2461"}],"title":"7.9.3. \nInteraction with floats"}],"url":"https://www.w3.org/TR/css-display-3/#inline-level"}, "4fd7e54f": {"dfnID":"4fd7e54f","dfnText":"<length-percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-length-percentage"},{"id":"ref-for-typedef-length-percentage\u2460"},{"id":"ref-for-typedef-length-percentage\u2461"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2462"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2463"},{"id":"ref-for-typedef-length-percentage\u2464"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"}],"url":"https://www.w3.org/TR/css-values-4/#typedef-length-percentage"}, "50284573": {"dfnID":"50284573","dfnText":"normal","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-justify-content-normal"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"}],"url":"https://www.w3.org/TR/css-align-3/#valdef-justify-content-normal"}, "503c5c26": {"dfnID":"503c5c26","dfnText":"used value","external":true,"refSections":[{"refs":[{"id":"ref-for-used-value"}],"title":"7.3.1. \nApplicability"},{"refs":[{"id":"ref-for-used-value\u2460"}],"title":"7.5.3. \nFont Sizing of Initial Letters"}],"url":"https://www.w3.org/TR/CSS21/cascade.html#used-value"}, "504a511e": {"dfnID":"504a511e","dfnText":"letter-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-letter-spacing"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"},{"refs":[{"id":"ref-for-propdef-letter-spacing\u2460"}],"title":"7.8.1. \nInline Flow Layout: Alignment, Justification, and White Space"},{"refs":[{"id":"ref-for-propdef-letter-spacing\u2461"}],"title":"7.8.3. \nAncestor Inlines"}],"url":"https://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing"}, "515ec31f": {"dfnID":"515ec31f","dfnText":"center","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-self-position-center"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"}],"url":"https://www.w3.org/TR/css-align-3/#valdef-self-position-center"}, "5455396f": {"dfnID":"5455396f","dfnText":"z-index","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-z-index"}],"title":"2.4. \nPainting Order"}],"url":"https://www.w3.org/TR/CSS21/visuren.html#propdef-z-index"}, "54a1fea8": {"dfnID":"54a1fea8","dfnText":"box-sizing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-sizing"}],"title":"7.5.1. \nProperties Applying to Initial Letters"},{"refs":[{"id":"ref-for-propdef-box-sizing\u2460"}],"title":"7.5.5. \nSizing the Initial Letter Box"}],"url":"https://www.w3.org/TR/css-sizing-3/#propdef-box-sizing"}, "5515c98f": {"dfnID":"5515c98f","dfnText":"margin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/CSS21/box.html#propdef-margin"}, "599428b5": {"dfnID":"599428b5","dfnText":"block-axis","external":true,"refSections":[{"refs":[{"id":"ref-for-block-axis"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-block-axis\u2460"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-block-axis\u2461"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-block-axis\u2462"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-block-axis\u2463"},{"id":"ref-for-block-axis\u2464"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-block-axis\u2465"}],"title":"5. \nLogical Heights and Inter-line Spacing"},{"refs":[{"id":"ref-for-block-axis\u2466"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-block-axis\u2467"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-block-axis\u2468"}],"title":"7.5. \nInitial Letter Layout"},{"refs":[{"id":"ref-for-block-axis\u2460\u24ea"},{"id":"ref-for-block-axis\u2460\u2460"}],"title":"7.5.6. \nAlignment Within an Initial Letter Box"},{"refs":[{"id":"ref-for-block-axis\u2460\u2461"}],"title":"7.6.1. \nBlock-axis Positioning"},{"refs":[{"id":"ref-for-block-axis\u2460\u2462"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#block-axis"}, "5ad01cca": {"dfnID":"5ad01cca","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-height"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"}],"url":"https://www.w3.org/TR/css-sizing-3/#propdef-height"}, "5c159f8f": {"dfnID":"5c159f8f","dfnText":"box","external":true,"refSections":[{"refs":[{"id":"ref-for-box"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-box\u2460"}],"title":"4. \nBaseline Alignment"}],"url":"https://www.w3.org/TR/css-display-3/#box"}, "5da00747": {"dfnID":"5da00747","dfnText":"first available font","external":true,"refSections":[{"refs":[{"id":"ref-for-first-available-font"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-first-available-font\u2460"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-first-available-font\u2461"},{"id":"ref-for-first-available-font\u2462"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-first-available-font\u2463"},{"id":"ref-for-first-available-font\u2464"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"}],"url":"https://www.w3.org/TR/css-fonts-4/#first-available-font"}, "60669dde": {"dfnID":"60669dde","dfnText":"box edge","external":true,"refSections":[{"refs":[{"id":"ref-for-box-box-edge"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-box-box-edge\u2460"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"}],"url":"https://www.w3.org/TR/css-box-4/#box-box-edge"}, "61bb5e44": {"dfnID":"61bb5e44","dfnText":"<number>","external":true,"refSections":[{"refs":[{"id":"ref-for-number-value"},{"id":"ref-for-number-value\u2460"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-number-value\u2461"},{"id":"ref-for-number-value\u2462"},{"id":"ref-for-number-value\u2463"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"}],"url":"https://www.w3.org/TR/css-values-4/#number-value"}, "61c422b4": {"dfnID":"61c422b4","dfnText":"anonymous box","external":true,"refSections":[{"refs":[{"id":"ref-for-anonymous"}],"title":"2. \nInline Layout Model"}],"url":"https://www.w3.org/TR/css-display-3/#anonymous"}, "627d7057": {"dfnID":"627d7057","dfnText":"text-indent","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-indent"}],"title":"7.8.2. \nEdge Effects: Indentation and Hanging Punctuation"}],"url":"https://www.w3.org/TR/CSS21/text.html#propdef-text-indent"}, "62c772f5": {"dfnID":"62c772f5","dfnText":"fragment","external":true,"refSections":[{"refs":[{"id":"ref-for-fragment"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-fragment\u2460"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-fragment\u2461"},{"id":"ref-for-fragment\u2462"}],"title":"7.9.4. \nInteraction with Fragmentation (Pagination)"}],"url":"https://www.w3.org/TR/css-break-3/#fragment"}, "63b59bd9": {"dfnID":"63b59bd9","dfnText":"::first-letter","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-first-letter"},{"id":"ref-for-selectordef-first-letter\u2460"},{"id":"ref-for-selectordef-first-letter\u2461"},{"id":"ref-for-selectordef-first-letter\u2462"}],"title":"7.2. \nSelecting Initial Letters"},{"refs":[{"id":"ref-for-selectordef-first-letter\u2463"},{"id":"ref-for-selectordef-first-letter\u2464"}],"title":"7.3.1. \nApplicability"}],"url":"https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter"}, "640e68b1": {"dfnID":"640e68b1","dfnText":"initial value","external":true,"refSections":[{"refs":[{"id":"ref-for-x1"},{"id":"ref-for-x1\u2460"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"}],"url":"https://www.w3.org/TR/CSS21/cascade.html#x1"}, "66f218c1": {"dfnID":"66f218c1","dfnText":"definite","external":true,"refSections":[{"refs":[{"id":"ref-for-definite"},{"id":"ref-for-definite\u2460"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-definite\u2461"},{"id":"ref-for-definite\u2462"}],"title":"7.5.6. \nAlignment Within an Initial Letter Box"}],"url":"https://www.w3.org/TR/css-sizing-3/#definite"}, "6b4fc208": {"dfnID":"6b4fc208","dfnText":"containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-containing-block"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-containing-block\u2460"},{"id":"ref-for-containing-block\u2461"},{"id":"ref-for-containing-block\u2462"},{"id":"ref-for-containing-block\u2463"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-containing-block\u2464"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-containing-block\u2465"}],"title":"7.3.1. \nApplicability"},{"refs":[{"id":"ref-for-containing-block\u2466"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-containing-block\u2467"},{"id":"ref-for-containing-block\u2468"},{"id":"ref-for-containing-block\u2460\u24ea"}],"title":"7.6.1. \nBlock-axis Positioning"},{"refs":[{"id":"ref-for-containing-block\u2460\u2460"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-display-3/#containing-block"}, "6bef2f05": {"dfnID":"6bef2f05","dfnText":"positioned box","external":true,"refSections":[{"refs":[{"id":"ref-for-positioned-box"}],"title":"2.4. \nPainting Order"}],"url":"https://www.w3.org/TR/css-position-3/#positioned-box"}, "6e7a78f3": {"dfnID":"6e7a78f3","dfnText":"edge","external":true,"refSections":[{"refs":[{"id":"ref-for-box-box-edge"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-box-box-edge\u2460"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"}],"url":"https://www.w3.org/TR/css-box-4/#box-box-edge"}, "708ccaca": {"dfnID":"708ccaca","dfnText":"outline","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-outline"}],"title":"2.3. \nPhantom Line Boxes"}],"url":"https://www.w3.org/TR/CSS21/ui.html#propdef-outline"}, "730a72b3": {"dfnID":"730a72b3","dfnText":"shape-margin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-shape-margin"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"},{"refs":[{"id":"ref-for-propdef-shape-margin\u2460"},{"id":"ref-for-propdef-shape-margin\u2461"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-shapes-1/#propdef-shape-margin"}, "78aede31": {"dfnID":"78aede31","dfnText":"first baseline set","external":true,"refSections":[{"refs":[{"id":"ref-for-first-baseline-set"}],"title":"4.2.1. \nAlignment Baseline Source: the baseline-source longhand"}],"url":"https://www.w3.org/TR/css-align-3/#first-baseline-set"}, "7922a8cf": {"dfnID":"7922a8cf","dfnText":"block end","external":true,"refSections":[{"refs":[{"id":"ref-for-block-end"},{"id":"ref-for-block-end\u2460"},{"id":"ref-for-block-end\u2461"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-block-end\u2462"}],"title":"7.1.1. \nDrop Initial"},{"refs":[{"id":"ref-for-block-end\u2463"}],"title":"7.6.1. \nBlock-axis Positioning"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#block-end"}, "79d4bbff": {"dfnID":"79d4bbff","dfnText":"box tree","external":true,"refSections":[{"refs":[{"id":"ref-for-box-tree"}],"title":"2.1. \nLayout of Line Boxes"}],"url":"https://www.w3.org/TR/css-display-3/#box-tree"}, "7ea71f53": {"dfnID":"7ea71f53","dfnText":"text sequence","external":true,"refSections":[{"refs":[{"id":"ref-for-css-text-sequence"}],"title":"2. \nInline Layout Model"}],"url":"https://www.w3.org/TR/css-display-3/#css-text-sequence"}, "80d2b689": {"dfnID":"80d2b689","dfnText":"justify-self","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-justify-self"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"}],"url":"https://www.w3.org/TR/css-align-3/#propdef-justify-self"}, "81b3af3e": {"dfnID":"81b3af3e","dfnText":"!","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-req"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"}],"url":"https://www.w3.org/TR/css-values-4/#mult-req"}, "81e9414b": {"dfnID":"81e9414b","dfnText":"shape-outside","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-shape-outside"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-shapes-1/#propdef-shape-outside"}, "81f3a960": {"dfnID":"81f3a960","dfnText":"synthesize baseline","external":true,"refSections":[{"refs":[{"id":"ref-for-synthesize-baseline"}],"title":"3.3. \nBaselines of Glyphs and Boxes"}],"url":"https://www.w3.org/TR/css-align-3/#synthesize-baseline"}, "825824a2": {"dfnID":"825824a2","dfnText":"multi-column container","external":true,"refSections":[{"refs":[{"id":"ref-for-multi-column-container"},{"id":"ref-for-multi-column-container\u2460"},{"id":"ref-for-multi-column-container\u2461"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-multi-column-container\u2462"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-multicol-1/#multi-column-container"}, "82ddda8c": {"dfnID":"82ddda8c","dfnText":"inline-axis","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-axis"},{"id":"ref-for-inline-axis\u2460"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-inline-axis\u2461"}],"title":"3.1. \nIntroduction to Baselines"},{"refs":[{"id":"ref-for-inline-axis\u2462"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-inline-axis\u2463"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-inline-axis\u2464"},{"id":"ref-for-inline-axis\u2465"}],"title":"7.5.6. \nAlignment Within an Initial Letter Box"},{"refs":[{"id":"ref-for-inline-axis\u2466"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"},{"refs":[{"id":"ref-for-inline-axis\u2467"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#inline-axis"}, "83d2ef35": {"dfnID":"83d2ef35","dfnText":"block-end","external":true,"refSections":[{"refs":[{"id":"ref-for-block-end"},{"id":"ref-for-block-end\u2460"},{"id":"ref-for-block-end\u2461"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-block-end\u2462"}],"title":"7.1.1. \nDrop Initial"},{"refs":[{"id":"ref-for-block-end\u2463"}],"title":"7.6.1. \nBlock-axis Positioning"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#block-end"}, "8664e85f": {"dfnID":"8664e85f","dfnText":"text-orientation","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-orientation"},{"id":"ref-for-propdef-text-orientation\u2460"},{"id":"ref-for-propdef-text-orientation\u2461"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2462"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#propdef-text-orientation"}, "87e40879": {"dfnID":"87e40879","dfnText":"block container box","external":true,"refSections":[{"refs":[{"id":"ref-for-block-container"},{"id":"ref-for-block-container\u2460"},{"id":"ref-for-block-container\u2461"},{"id":"ref-for-block-container\u2462"},{"id":"ref-for-block-container\u2463"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-block-container\u2464"},{"id":"ref-for-block-container\u2465"},{"id":"ref-for-block-container\u2466"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-block-container\u2467"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-block-container\u2468"}],"title":"6.1. \nShorthand for Text Box Trimming: the text-box property"},{"refs":[{"id":"ref-for-block-container\u2460\u24ea"},{"id":"ref-for-block-container\u2460\u2460"},{"id":"ref-for-block-container\u2460\u2461"},{"id":"ref-for-block-container\u2460\u2462"},{"id":"ref-for-block-container\u2460\u2463"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-block-container\u2460\u2464"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"}],"url":"https://www.w3.org/TR/css-display-3/#block-container"}, "8804aba6": {"dfnID":"8804aba6","dfnText":"sideways","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-text-orientation-sideways"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-sideways"}, "8a110a7b": {"dfnID":"8a110a7b","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"1.2. \nValue Definitions"}],"url":"https://www.w3.org/TR/css-values-4/#css-wide-keywords"}, "90c7548c": {"dfnID":"90c7548c","dfnText":"start","external":true,"refSections":[{"refs":[{"id":"ref-for-start"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#start"}, "9436e460": {"dfnID":"9436e460","dfnText":"clear","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-clear"}],"title":"7.9.2. \nShort paragraphs with initial letters"},{"refs":[{"id":"ref-for-propdef-clear\u2460"}],"title":"7.9.3. \nInteraction with floats"}],"url":"https://drafts.csswg.org/css2/#propdef-clear"}, "950a691a": {"dfnID":"950a691a","dfnText":"first-baseline alignment","external":true,"refSections":[{"refs":[{"id":"ref-for-first-baseline-alignment"},{"id":"ref-for-first-baseline-alignment\u2460"}],"title":"4.2.1. \nAlignment Baseline Source: the baseline-source longhand"}],"url":"https://www.w3.org/TR/css-align-3/#first-baseline-alignment"}, "9680aa9c": {"dfnID":"9680aa9c","dfnText":"block","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-block"}],"title":"7.3.1. \nApplicability"}],"url":"https://www.w3.org/TR/css-display-3/#valdef-display-block"}, "98ddb9b0": {"dfnID":"98ddb9b0","dfnText":"<length>","external":true,"refSections":[{"refs":[{"id":"ref-for-length-value"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-length-value\u2460"},{"id":"ref-for-length-value\u2461"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-length-value\u2462"},{"id":"ref-for-length-value\u2463"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"}],"url":"https://www.w3.org/TR/css-values-4/#length-value"}, "99a0ef70": {"dfnID":"99a0ef70","dfnText":"first formatted line","external":true,"refSections":[{"refs":[{"id":"ref-for-first-formatted-line"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-first-formatted-line\u2460"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"}],"url":"https://www.w3.org/TR/css-pseudo-4/#first-formatted-line"}, "99a9e10b": {"dfnID":"99a9e10b","dfnText":"logical width","external":true,"refSections":[{"refs":[{"id":"ref-for-logical-width"},{"id":"ref-for-logical-width\u2460"},{"id":"ref-for-logical-width\u2461"},{"id":"ref-for-logical-width\u2462"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-logical-width\u2463"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#logical-width"}, "99d814d1": {"dfnID":"99d814d1","dfnText":"under","external":true,"refSections":[{"refs":[{"id":"ref-for-under"},{"id":"ref-for-under\u2460"},{"id":"ref-for-under\u2461"},{"id":"ref-for-under\u2462"},{"id":"ref-for-under\u2463"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-under\u2464"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-under\u2465"},{"id":"ref-for-under\u2466"},{"id":"ref-for-under\u2467"},{"id":"ref-for-under\u2468"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-under\u2460\u24ea"},{"id":"ref-for-under\u2460\u2460"}],"title":"7.6.1. \nBlock-axis Positioning"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#under"}, "9ce36abc": {"dfnID":"9ce36abc","dfnText":"specified value","external":true,"refSections":[{"refs":[{"id":"ref-for-specified-value"}],"title":"5.1. \nLine Spacing: the line-height property"}],"url":"https://www.w3.org/TR/CSS21/cascade.html#specified-value"}, "9ce65b41": {"dfnID":"9ce65b41","dfnText":"font-language-override","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-language-override"}],"title":"3.1. \nIntroduction to Baselines"}],"url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-language-override"}, "9d51c0ac": {"dfnID":"9d51c0ac","dfnText":"over","external":true,"refSections":[{"refs":[{"id":"ref-for-over"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-over\u2460"},{"id":"ref-for-over\u2461"},{"id":"ref-for-over\u2462"},{"id":"ref-for-over\u2463"},{"id":"ref-for-over\u2464"},{"id":"ref-for-over\u2465"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-over\u2466"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-over\u2467"},{"id":"ref-for-over\u2468"},{"id":"ref-for-over\u2460\u24ea"},{"id":"ref-for-over\u2460\u2460"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-over\u2460\u2461"},{"id":"ref-for-over\u2460\u2462"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-over\u2460\u2463"}],"title":"7.6.1. \nBlock-axis Positioning"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#over"}, "9eb5c2af": {"dfnID":"9eb5c2af","dfnText":"document white space","external":true,"refSections":[{"refs":[{"id":"ref-for-white-space"}],"title":"2.3. \nPhantom Line Boxes"}],"url":"https://www.w3.org/TR/css-text-4/#white-space"}, "a0336d84": {"dfnID":"a0336d84","dfnText":"||","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-any"},{"id":"ref-for-comb-any\u2460"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"},{"refs":[{"id":"ref-for-comb-any\u2461"}],"title":"6.1. \nShorthand for Text Box Trimming: the text-box property"}],"url":"https://www.w3.org/TR/css-values-4/#comb-any"}, "a0542bba": {"dfnID":"a0542bba","dfnText":"box-decoration-break","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-decoration-break"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"}],"url":"https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break"}, "a229530b": {"dfnID":"a229530b","dfnText":"preferred height","external":true,"refSections":[{"refs":[{"id":"ref-for-height"}],"title":"7.5.5. \nSizing the Initial Letter Box"}],"url":"https://www.w3.org/TR/css-sizing-3/#height"}, "a2be8c84": {"dfnID":"a2be8c84","dfnText":"padding","external":true,"refSections":[{"refs":[{"id":"ref-for-padding"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-padding\u2460"},{"id":"ref-for-padding\u2461"},{"id":"ref-for-padding\u2462"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-padding\u2463"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-padding\u2464"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-padding\u2465"}],"title":"7.5.2. \nMargins, Borders, and Padding"},{"refs":[{"id":"ref-for-padding\u2466"}],"title":"7.5.5. \nSizing the Initial Letter Box"}],"url":"https://www.w3.org/TR/css-box-4/#padding"}, "a502c18f": {"dfnID":"a502c18f","dfnText":"document order","external":true,"refSections":[{"refs":[{"id":"ref-for-document-order"}],"title":"2.4. \nPainting Order"}],"url":"https://www.w3.org/TR/css-display-3/#document-order"}, "a6eb24bb": {"dfnID":"a6eb24bb","dfnText":"inline axis","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-axis"},{"id":"ref-for-inline-axis\u2460"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-inline-axis\u2461"}],"title":"3.1. \nIntroduction to Baselines"},{"refs":[{"id":"ref-for-inline-axis\u2462"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-inline-axis\u2463"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-inline-axis\u2464"},{"id":"ref-for-inline-axis\u2465"}],"title":"7.5.6. \nAlignment Within an Initial Letter Box"},{"refs":[{"id":"ref-for-inline-axis\u2466"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"},{"refs":[{"id":"ref-for-inline-axis\u2467"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#inline-axis"}, "aab2607b": {"dfnID":"aab2607b","dfnText":"inline-level box","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-level-box"},{"id":"ref-for-inline-level-box\u2460"},{"id":"ref-for-inline-level-box\u2461"},{"id":"ref-for-inline-level-box\u2462"},{"id":"ref-for-inline-level-box\u2463"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-inline-level-box\u2464"},{"id":"ref-for-inline-level-box\u2465"},{"id":"ref-for-inline-level-box\u2466"},{"id":"ref-for-inline-level-box\u2467"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-inline-level-box\u2468"}],"title":"2.4. \nPainting Order"},{"refs":[{"id":"ref-for-inline-level-box\u2460\u24ea"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-inline-level-box\u2460\u2460"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-inline-level-box\u2460\u2461"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"},{"refs":[{"id":"ref-for-inline-level-box\u2460\u2462"},{"id":"ref-for-inline-level-box\u2460\u2463"},{"id":"ref-for-inline-level-box\u2460\u2464"}],"title":"7.3.1. \nApplicability"}],"url":"https://www.w3.org/TR/css-display-3/#inline-level-box"}, "ab2f3e73": {"dfnID":"ab2f3e73","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"},{"id":"ref-for-computed-value\u2460"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-computed-value\u2461"}],"title":"7.3.1. \nApplicability"},{"refs":[{"id":"ref-for-computed-value\u2462"}],"title":"7.5.3. \nFont Sizing of Initial Letters"}],"url":"https://www.w3.org/TR/CSS21/cascade.html#computed-value"}, "aligned-subtree": {"dfnID":"aligned-subtree","dfnText":"aligned subtree","external":false,"refSections":[{"refs":[{"id":"ref-for-aligned-subtree"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-aligned-subtree\u2460"},{"id":"ref-for-aligned-subtree\u2461"},{"id":"ref-for-aligned-subtree\u2462"},{"id":"ref-for-aligned-subtree\u2463"},{"id":"ref-for-aligned-subtree\u2464"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"}],"url":"#aligned-subtree"}, "alignment-baseline": {"dfnID":"alignment-baseline","dfnText":"alignment baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-alignment-baseline"},{"id":"ref-for-alignment-baseline\u2460"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-alignment-baseline\u2461"},{"id":"ref-for-alignment-baseline\u2462"},{"id":"ref-for-alignment-baseline\u2463"},{"id":"ref-for-alignment-baseline\u2464"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-alignment-baseline\u2465"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-alignment-baseline\u2466"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"}],"url":"#alignment-baseline"}, "alphabetic-baseline": {"dfnID":"alphabetic-baseline","dfnText":"alphabetic","external":false,"refSections":[{"refs":[{"id":"ref-for-alphabetic-baseline"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-alphabetic-baseline\u2460"},{"id":"ref-for-alphabetic-baseline\u2461"},{"id":"ref-for-alphabetic-baseline\u2462"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-alphabetic-baseline\u2463"},{"id":"ref-for-alphabetic-baseline\u2464"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-alphabetic-baseline\u2465"},{"id":"ref-for-alphabetic-baseline\u2466"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-alphabetic-baseline\u2467"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-alphabetic-baseline\u2468"},{"id":"ref-for-alphabetic-baseline\u2460\u24ea"},{"id":"ref-for-alphabetic-baseline\u2460\u2460"},{"id":"ref-for-alphabetic-baseline\u2460\u2461"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-alphabetic-baseline\u2460\u2462"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#alphabetic-baseline"}, "ascent-metric": {"dfnID":"ascent-metric","dfnText":"ascent metric","external":false,"refSections":[{"refs":[{"id":"ref-for-ascent-metric"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-ascent-metric\u2460"}],"title":"3.2.1. \nAscent and Descent Metrics"},{"refs":[{"id":"ref-for-ascent-metric\u2461"},{"id":"ref-for-ascent-metric\u2462"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-ascent-metric\u2463"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-ascent-metric\u2464"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-ascent-metric\u2465"}],"title":"\nA.1: Calculating Em-over and Em-under"},{"refs":[{"id":"ref-for-ascent-metric\u2466"}],"title":"\nA.2: Synthesizing Baselines (and Other Font Metrics) for Text"}],"url":"#ascent-metric"}, "atomic-initial-letter": {"dfnID":"atomic-initial-letter","dfnText":"atomic initial letter","external":false,"refSections":[{"refs":[{"id":"ref-for-atomic-initial-letter"}],"title":"7.5.3. \nFont Sizing of Initial Letters"},{"refs":[{"id":"ref-for-atomic-initial-letter\u2460"}],"title":"7.5.5. \nSizing the Initial Letter Box"}],"url":"#atomic-initial-letter"}, "b07db6cc": {"dfnID":"b07db6cc","dfnText":"ruby container box","external":true,"refSections":[{"refs":[{"id":"ref-for-ruby-container"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-ruby-container\u2460"}],"title":"7.3.1. \nApplicability"}],"url":"https://www.w3.org/TR/css-ruby-1/#ruby-container"}, "b091c3a0": {"dfnID":"b091c3a0","dfnText":"independent formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-independent-formatting-context"}],"title":"7.5. \nInitial Letter Layout"},{"refs":[{"id":"ref-for-independent-formatting-context\u2460"}],"title":"7.9.2. \nShort paragraphs with initial letters"}],"url":"https://www.w3.org/TR/css-display-3/#independent-formatting-context"}, "b339ce4c": {"dfnID":"b339ce4c","dfnText":"multi-column layout","external":true,"refSections":[{"refs":[{"id":"ref-for-multi-column-layout"}],"title":"2.1. \nLayout of Line Boxes"}],"url":"https://www.w3.org/TR/css-multicol-1/#multi-column-layout"}, "b3b49700": {"dfnID":"b3b49700","dfnText":"hanging-punctuation","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-hanging-punctuation"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-propdef-hanging-punctuation\u2460"},{"id":"ref-for-propdef-hanging-punctuation\u2461"}],"title":"7.8.2. \nEdge Effects: Indentation and Hanging Punctuation"}],"url":"https://www.w3.org/TR/css-text-4/#propdef-hanging-punctuation"}, "b49aeda5": {"dfnID":"b49aeda5","dfnText":"sub-property","external":true,"refSections":[{"refs":[{"id":"ref-for-longhand"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-longhand\u2460"},{"id":"ref-for-longhand\u2461"}],"title":"7.5.1. \nProperties Applying to Initial Letters"}],"url":"https://www.w3.org/TR/css-cascade-5/#longhand"}, "b6b63ba4": {"dfnID":"b6b63ba4","dfnText":"::marker","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-marker"},{"id":"ref-for-selectordef-marker\u2460"}],"title":"7.3.1. \nApplicability"}],"url":"https://www.w3.org/TR/css-pseudo-4/#selectordef-marker"}, "b8dade0f": {"dfnID":"b8dade0f","dfnText":"block axis","external":true,"refSections":[{"refs":[{"id":"ref-for-block-axis"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-block-axis\u2460"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-block-axis\u2461"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-block-axis\u2462"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-block-axis\u2463"},{"id":"ref-for-block-axis\u2464"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-block-axis\u2465"}],"title":"5. \nLogical Heights and Inter-line Spacing"},{"refs":[{"id":"ref-for-block-axis\u2466"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-block-axis\u2467"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-block-axis\u2468"}],"title":"7.5. \nInitial Letter Layout"},{"refs":[{"id":"ref-for-block-axis\u2460\u24ea"},{"id":"ref-for-block-axis\u2460\u2460"}],"title":"7.5.6. \nAlignment Within an Initial Letter Box"},{"refs":[{"id":"ref-for-block-axis\u2460\u2461"}],"title":"7.6.1. \nBlock-axis Positioning"},{"refs":[{"id":"ref-for-block-axis\u2460\u2462"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#block-axis"}, "baseline": {"dfnID":"baseline","dfnText":"baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-baseline"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-baseline\u2460"},{"id":"ref-for-baseline\u2461"},{"id":"ref-for-baseline\u2462"}],"title":"3.1. \nIntroduction to Baselines"},{"refs":[{"id":"ref-for-baseline\u2463"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-baseline\u2464"},{"id":"ref-for-baseline\u2465"},{"id":"ref-for-baseline\u2466"},{"id":"ref-for-baseline\u2467"},{"id":"ref-for-baseline\u2468"},{"id":"ref-for-baseline\u2460\u24ea"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-baseline\u2460\u2460"},{"id":"ref-for-baseline\u2460\u2461"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-baseline\u2460\u2462"},{"id":"ref-for-baseline\u2460\u2463"},{"id":"ref-for-baseline\u2460\u2464"},{"id":"ref-for-baseline\u2460\u2465"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-baseline\u2460\u2466"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-baseline\u2460\u2467"},{"id":"ref-for-baseline\u2460\u2468"},{"id":"ref-for-baseline\u2461\u24ea"},{"id":"ref-for-baseline\u2461\u2460"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#baseline"}, "baseline-alignment-preference": {"dfnID":"baseline-alignment-preference","dfnText":"baseline alignment preference","external":false,"refSections":[{"refs":[{"id":"ref-for-baseline-alignment-preference"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"}],"url":"#baseline-alignment-preference"}, "baseline-relative-shift-values": {"dfnID":"baseline-relative-shift-values","dfnText":"baseline-relative shift values","external":false,"refSections":[],"url":"#baseline-relative-shift-values"}, "baseline-set": {"dfnID":"baseline-set","dfnText":"baseline set","external":false,"refSections":[{"refs":[{"id":"ref-for-baseline-set"},{"id":"ref-for-baseline-set\u2460"},{"id":"ref-for-baseline-set\u2461"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-baseline-set\u2462"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-baseline-set\u2463"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#baseline-set"}, "baseline-table": {"dfnID":"baseline-table","dfnText":"baseline table","external":false,"refSections":[{"refs":[{"id":"ref-for-baseline-table"},{"id":"ref-for-baseline-table\u2460"},{"id":"ref-for-baseline-table\u2461"}],"title":"3.1. \nIntroduction to Baselines"},{"refs":[{"id":"ref-for-baseline-table\u2462"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-baseline-table\u2463"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#baseline-table"}, "bdb4e757": {"dfnID":"bdb4e757","dfnText":"&&","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-all"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"}],"url":"https://www.w3.org/TR/css-values-4/#comb-all"}, "c20b5ff5": {"dfnID":"c20b5ff5","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-auto"}],"title":"7.5.5. \nSizing the Initial Letter Box"}],"url":"https://www.w3.org/TR/css-sizing-3/#valdef-width-auto"}, "c48eaa20": {"dfnID":"c48eaa20","dfnText":"box-shadow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-shadow"}],"title":"2.3. \nPhantom Line Boxes"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow"}, "c7cc6301": {"dfnID":"c7cc6301","dfnText":"inline block","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-block"}],"title":"2.2. \nLayout Within Line Boxes"}],"url":"https://www.w3.org/TR/css-display-3/#inline-block"}, "cap-height-baseline": {"dfnID":"cap-height-baseline","dfnText":"cap-height","external":false,"refSections":[{"refs":[{"id":"ref-for-cap-height-baseline"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-cap-height-baseline\u2460"},{"id":"ref-for-cap-height-baseline\u2461"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-cap-height-baseline\u2462"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#cap-height-baseline"}, "cd78c41b": {"dfnID":"cd78c41b","dfnText":"last baseline set","external":true,"refSections":[{"refs":[{"id":"ref-for-last-baseline-set"}],"title":"4.2.1. \nAlignment Baseline Source: the baseline-source longhand"}],"url":"https://www.w3.org/TR/css-align-3/#last-baseline-set"}, "cec0d4db": {"dfnID":"cec0d4db","dfnText":"upright","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-text-orientation-upright"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-upright"}, "central-baseline": {"dfnID":"central-baseline","dfnText":"central","external":false,"refSections":[{"refs":[{"id":"ref-for-central-baseline"},{"id":"ref-for-central-baseline\u2460"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-central-baseline\u2461"},{"id":"ref-for-central-baseline\u2462"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-central-baseline\u2463"},{"id":"ref-for-central-baseline\u2464"},{"id":"ref-for-central-baseline\u2465"}],"title":"\nA.1: Calculating Em-over and Em-under"},{"refs":[{"id":"ref-for-central-baseline\u2466"},{"id":"ref-for-central-baseline\u2467"}],"title":"\nA.2: Synthesizing Baselines (and Other Font Metrics) for Text"},{"refs":[{"id":"ref-for-central-baseline\u2468"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"},{"refs":[{"id":"ref-for-central-baseline\u2460\u24ea"}],"title":"\nChanges"}],"url":"#central-baseline"}, "d049494a": {"dfnID":"d049494a","dfnText":"margin","external":true,"refSections":[{"refs":[{"id":"ref-for-margin"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-margin\u2460"},{"id":"ref-for-margin\u2461"},{"id":"ref-for-margin\u2462"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-margin\u2463"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-margin\u2464"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-margin\u2465"},{"id":"ref-for-margin\u2466"},{"id":"ref-for-margin\u2467"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-margin\u2468"}],"title":"7.5.2. \nMargins, Borders, and Padding"},{"refs":[{"id":"ref-for-margin\u2460\u24ea"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-margin\u2460\u2460"}],"title":"7.6.2. \nInline Kerning"}],"url":"https://www.w3.org/TR/css-box-4/#margin"}, "d41bfa8c": {"dfnID":"d41bfa8c","dfnText":"inline box","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-box"},{"id":"ref-for-inline-box\u2460"},{"id":"ref-for-inline-box\u2461"},{"id":"ref-for-inline-box\u2462"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-inline-box\u2463"},{"id":"ref-for-inline-box\u2464"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-inline-box\u2465"},{"id":"ref-for-inline-box\u2466"},{"id":"ref-for-inline-box\u2467"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-inline-box\u2468"},{"id":"ref-for-inline-box\u2460\u24ea"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-inline-box\u2460\u2460"},{"id":"ref-for-inline-box\u2460\u2461"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-inline-box\u2460\u2462"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-inline-box\u2460\u2463"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-inline-box\u2460\u2464"}],"title":"4.2.1. \nAlignment Baseline Source: the baseline-source longhand"},{"refs":[{"id":"ref-for-inline-box\u2460\u2465"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-inline-box\u2460\u2466"},{"id":"ref-for-inline-box\u2460\u2467"},{"id":"ref-for-inline-box\u2460\u2468"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-inline-box\u2461\u24ea"},{"id":"ref-for-inline-box\u2461\u2460"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-inline-box\u2461\u2461"},{"id":"ref-for-inline-box\u2461\u2462"},{"id":"ref-for-inline-box\u2461\u2463"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-inline-box\u2461\u2464"},{"id":"ref-for-inline-box\u2461\u2465"},{"id":"ref-for-inline-box\u2461\u2466"},{"id":"ref-for-inline-box\u2461\u2467"},{"id":"ref-for-inline-box\u2461\u2468"},{"id":"ref-for-inline-box\u2462\u24ea"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-inline-box\u2462\u2460"}],"title":"6.1. \nShorthand for Text Box Trimming: the text-box property"},{"refs":[{"id":"ref-for-inline-box\u2462\u2461"},{"id":"ref-for-inline-box\u2462\u2462"},{"id":"ref-for-inline-box\u2462\u2463"},{"id":"ref-for-inline-box\u2462\u2464"},{"id":"ref-for-inline-box\u2462\u2465"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-inline-box\u2462\u2466"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"},{"refs":[{"id":"ref-for-inline-box\u2462\u2467"},{"id":"ref-for-inline-box\u2462\u2468"},{"id":"ref-for-inline-box\u2463\u24ea"},{"id":"ref-for-inline-box\u2463\u2460"},{"id":"ref-for-inline-box\u2463\u2461"},{"id":"ref-for-inline-box\u2463\u2462"},{"id":"ref-for-inline-box\u2463\u2463"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-inline-box\u2463\u2464"}],"title":"7.3.1. \nApplicability"},{"refs":[{"id":"ref-for-inline-box\u2463\u2465"}],"title":"7.5. \nInitial Letter Layout"},{"refs":[{"id":"ref-for-inline-box\u2463\u2466"}],"title":"7.5.1. \nProperties Applying to Initial Letters"},{"refs":[{"id":"ref-for-inline-box\u2463\u2467"},{"id":"ref-for-inline-box\u2463\u2468"}],"title":"7.8.3. \nAncestor Inlines"},{"refs":[{"id":"ref-for-inline-box\u2464\u24ea"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-display-3/#inline-box"}, "d4441b24": {"dfnID":"d4441b24","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"},{"refs":[{"id":"ref-for-mult-opt\u2460"},{"id":"ref-for-mult-opt\u2461"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"}],"url":"https://www.w3.org/TR/css-values-4/#mult-opt"}, "d65c0e81": {"dfnID":"d65c0e81","dfnText":"box fragment","external":true,"refSections":[{"refs":[{"id":"ref-for-box-fragment"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-box-fragment\u2460"},{"id":"ref-for-box-fragment\u2461"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-box-fragment\u2462"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"}],"url":"https://www.w3.org/TR/css-break-4/#box-fragment"}, "d73c993d": {"dfnID":"d73c993d","dfnText":"<integer>","external":true,"refSections":[{"refs":[{"id":"ref-for-integer-value"},{"id":"ref-for-integer-value\u2460"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"}],"url":"https://www.w3.org/TR/css-values-4/#integer-value"}, "dc76e65c": {"dfnID":"dc76e65c","dfnText":"position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-position"}],"title":"7.3.1. \nApplicability"},{"refs":[{"id":"ref-for-propdef-position\u2460"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/CSS21/visuren.html#propdef-position"}, "ddf25d36": {"dfnID":"ddf25d36","dfnText":"block flow direction","external":true,"refSections":[{"refs":[{"id":"ref-for-block-flow-direction"}],"title":"2.1. \nLayout of Line Boxes"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#block-flow-direction"}, "de48a940": {"dfnID":"de48a940","dfnText":"inner size","external":true,"refSections":[{"refs":[{"id":"ref-for-inner-size"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-inner-size\u2460"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"}],"url":"https://www.w3.org/TR/css-sizing-3/#inner-size"}, "dec20430": {"dfnID":"dec20430","dfnText":"absolutely positioned box","external":true,"refSections":[{"refs":[{"id":"ref-for-absolute-position"}],"title":"2.3. \nPhantom Line Boxes"}],"url":"https://www.w3.org/TR/css-position-3/#absolute-position"}, "descent-metric": {"dfnID":"descent-metric","dfnText":"descent metric","external":false,"refSections":[{"refs":[{"id":"ref-for-descent-metric"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-descent-metric\u2460"}],"title":"3.2.1. \nAscent and Descent Metrics"},{"refs":[{"id":"ref-for-descent-metric\u2461"},{"id":"ref-for-descent-metric\u2462"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-descent-metric\u2463"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-descent-metric\u2464"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-descent-metric\u2465"}],"title":"\nA.1: Calculating Em-over and Em-under"},{"refs":[{"id":"ref-for-descent-metric\u2466"}],"title":"\nA.2: Synthesizing Baselines (and Other Font Metrics) for Text"}],"url":"#descent-metric"}, "df86efcb": {"dfnID":"df86efcb","dfnText":"content area","external":true,"refSections":[{"refs":[{"id":"ref-for-content-area"},{"id":"ref-for-content-area\u2460"},{"id":"ref-for-content-area\u2461"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"}],"url":"https://www.w3.org/TR/css-box-4/#content-area"}, "dominant-baseline": {"dfnID":"dominant-baseline","dfnText":"dominant baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-dominant-baseline"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-dominant-baseline\u2460"},{"id":"ref-for-dominant-baseline\u2461"},{"id":"ref-for-dominant-baseline\u2462"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-dominant-baseline\u2463"},{"id":"ref-for-dominant-baseline\u2464"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-dominant-baseline\u2465"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-dominant-baseline\u2466"},{"id":"ref-for-dominant-baseline\u2467"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"}],"url":"#dominant-baseline"}, "dropped-initial": {"dfnID":"dropped-initial","dfnText":"dropped initial","external":false,"refSections":[{"refs":[{"id":"ref-for-dropped-initial"}],"title":"7.1.1. \nDrop Initial"},{"refs":[{"id":"ref-for-dropped-initial\u2460"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"},{"refs":[{"id":"ref-for-dropped-initial\u2461"},{"id":"ref-for-dropped-initial\u2462"}],"title":"\nChanges"}],"url":"#dropped-initial"}, "e14541aa": {"dfnID":"e14541aa","dfnText":"shorthand","external":true,"refSections":[{"refs":[{"id":"ref-for-shorthand-property"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"},{"refs":[{"id":"ref-for-shorthand-property\u2460"}],"title":"6.1. \nShorthand for Text Box Trimming: the text-box property"},{"refs":[{"id":"ref-for-shorthand-property\u2461"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"},{"refs":[{"id":"ref-for-shorthand-property\u2462"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-cascade-5/#shorthand-property"}, "e1b94ba0": {"dfnID":"e1b94ba0","dfnText":"logical height","external":true,"refSections":[{"refs":[{"id":"ref-for-logical-height"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-logical-height\u2460"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-logical-height\u2461"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-logical-height\u2462"}],"title":"3.2.2. \nLine Gap Metrics"},{"refs":[{"id":"ref-for-logical-height\u2463"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-logical-height\u2464"},{"id":"ref-for-logical-height\u2465"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-logical-height\u2466"},{"id":"ref-for-logical-height\u2467"},{"id":"ref-for-logical-height\u2468"},{"id":"ref-for-logical-height\u2460\u24ea"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-logical-height\u2460\u2460"}],"title":"7.6.1. \nBlock-axis Positioning"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#logical-height"}, "e3b56e79": {"dfnID":"e3b56e79","dfnText":"hebrew","external":true,"refSections":[{"refs":[{"id":"ref-for-hebrew"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-counter-styles-3/#hebrew"}, "e3f6386a": {"dfnID":"e3f6386a","dfnText":"justification opportunity","external":true,"refSections":[{"refs":[{"id":"ref-for-justification-opportunity"},{"id":"ref-for-justification-opportunity\u2460"}],"title":"7.8.1. \nInline Flow Layout: Alignment, Justification, and White Space"}],"url":"https://www.w3.org/TR/css-text-4/#justification-opportunity"}, "e4f1fc8b": {"dfnID":"e4f1fc8b","dfnText":"block formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-block-formatting-context"}],"title":"7.8. \nLine Layout"},{"refs":[{"id":"ref-for-block-formatting-context\u2460"}],"title":"7.9.3. \nInteraction with floats"}],"url":"https://www.w3.org/TR/css-display-3/#block-formatting-context"}, "e51c8aeb": {"dfnID":"e51c8aeb","dfnText":"vertical writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-vertical-writing-mode"},{"id":"ref-for-vertical-writing-mode\u2460"},{"id":"ref-for-vertical-writing-mode\u2461"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-vertical-writing-mode\u2462"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#vertical-writing-mode"}, "e8976716": {"dfnID":"e8976716","dfnText":"in-flow","external":true,"refSections":[{"refs":[{"id":"ref-for-in-flow"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-in-flow\u2460"},{"id":"ref-for-in-flow\u2461"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-in-flow\u2462"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-in-flow\u2463"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"},{"refs":[{"id":"ref-for-in-flow\u2464"}],"title":"7.8. \nLine Layout"},{"refs":[{"id":"ref-for-in-flow\u2465"}],"title":"7.9.3. \nInteraction with floats"}],"url":"https://www.w3.org/TR/css-display-3/#in-flow"}, "ea628b01": {"dfnID":"ea628b01","dfnText":"atomic inline box","external":true,"refSections":[{"refs":[{"id":"ref-for-atomic-inline"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-atomic-inline\u2460"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-atomic-inline\u2461"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-atomic-inline\u2462"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-atomic-inline\u2463"}],"title":"7.5. \nInitial Letter Layout"},{"refs":[{"id":"ref-for-atomic-inline\u2464"},{"id":"ref-for-atomic-inline\u2465"}],"title":"7.5.1. \nProperties Applying to Initial Letters"},{"refs":[{"id":"ref-for-atomic-inline\u2466"},{"id":"ref-for-atomic-inline\u2467"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-atomic-inline\u2468"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"},{"refs":[{"id":"ref-for-atomic-inline\u2460\u24ea"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-display-3/#atomic-inline"}, "ecef1eb5": {"dfnID":"ecef1eb5","dfnText":"block size","external":true,"refSections":[{"refs":[{"id":"ref-for-block-size"},{"id":"ref-for-block-size\u2460"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-block-size\u2461"}],"title":"7.5.6. \nAlignment Within an Initial Letter Box"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#block-size"}, "ee69494f": {"dfnID":"ee69494f","dfnText":"forced line break","external":true,"refSections":[{"refs":[{"id":"ref-for-forced-line-break"}],"title":"2.1. \nLayout of Line Boxes"}],"url":"https://www.w3.org/TR/css-text-3/#forced-line-break"}, "eefce2af": {"dfnID":"eefce2af","dfnText":"em","external":true,"refSections":[{"refs":[{"id":"ref-for-em"}],"title":"7.5.3. \nFont Sizing of Initial Letters"}],"url":"https://www.w3.org/TR/css-values-4/#em"}, "ef383707": {"dfnID":"ef383707","dfnText":"typographic mode","external":true,"refSections":[{"refs":[{"id":"ref-for-typographic-mode"}],"title":"3.1. \nIntroduction to Baselines"},{"refs":[{"id":"ref-for-typographic-mode\u2460"}],"title":"4. \nBaseline Alignment"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#typographic-mode"}, "em-over-baseline": {"dfnID":"em-over-baseline","dfnText":"em-over","external":false,"refSections":[{"refs":[{"id":"ref-for-em-over-baseline"},{"id":"ref-for-em-over-baseline\u2460"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-em-over-baseline\u2461"},{"id":"ref-for-em-over-baseline\u2462"},{"id":"ref-for-em-over-baseline\u2463"},{"id":"ref-for-em-over-baseline\u2464"},{"id":"ref-for-em-over-baseline\u2465"},{"id":"ref-for-em-over-baseline\u2466"}],"title":"\nA.1: Calculating Em-over and Em-under"},{"refs":[{"id":"ref-for-em-over-baseline\u2467"}],"title":"\nChanges"}],"url":"#em-over-baseline"}, "em-under-baseline": {"dfnID":"em-under-baseline","dfnText":"em-under","external":false,"refSections":[{"refs":[{"id":"ref-for-em-under-baseline"},{"id":"ref-for-em-under-baseline\u2460"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-em-under-baseline\u2461"},{"id":"ref-for-em-under-baseline\u2462"},{"id":"ref-for-em-under-baseline\u2463"},{"id":"ref-for-em-under-baseline\u2464"},{"id":"ref-for-em-under-baseline\u2465"},{"id":"ref-for-em-under-baseline\u2466"}],"title":"\nA.1: Calculating Em-over and Em-under"},{"refs":[{"id":"ref-for-em-under-baseline\u2467"}],"title":"\nChanges"}],"url":"#em-under-baseline"}, "f2938b9c": {"dfnID":"f2938b9c","dfnText":"atomic inline","external":true,"refSections":[{"refs":[{"id":"ref-for-atomic-inline"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-atomic-inline\u2460"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-atomic-inline\u2461"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-atomic-inline\u2462"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-atomic-inline\u2463"}],"title":"7.5. \nInitial Letter Layout"},{"refs":[{"id":"ref-for-atomic-inline\u2464"},{"id":"ref-for-atomic-inline\u2465"}],"title":"7.5.1. \nProperties Applying to Initial Letters"},{"refs":[{"id":"ref-for-atomic-inline\u2466"},{"id":"ref-for-atomic-inline\u2467"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-atomic-inline\u2468"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"},{"refs":[{"id":"ref-for-atomic-inline\u2460\u24ea"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-display-3/#atomic-inline"}, "f5e69024": {"dfnID":"f5e69024","dfnText":"mixed","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-text-orientation-mixed"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-mixed"}, "f7e97fd7": {"dfnID":"f7e97fd7","dfnText":"collapsible white space","external":true,"refSections":[{"refs":[{"id":"ref-for-collapsible-white-space"}],"title":"7.8.1. \nInline Flow Layout: Alignment, Justification, and White Space"}],"url":"https://www.w3.org/TR/css-text-4/#collapsible-white-space"}, "f98c718d": {"dfnID":"f98c718d","dfnText":"border edge","external":true,"refSections":[{"refs":[{"id":"ref-for-border-edge"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"}],"url":"https://www.w3.org/TR/css-box-3/#border-edge"}, "fada422e": {"dfnID":"fada422e","dfnText":"text content element","external":true,"refSections":[{"refs":[{"id":"ref-for-TermTextContentElement"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-TermTextContentElement\u2460"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-TermTextContentElement\u2461"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-TermTextContentElement\u2462"}],"title":"5.1. \nLine Spacing: the line-height property"}],"url":"https://www.w3.org/TR/SVG2/text.html#TermTextContentElement"}, "fde954ee": {"dfnID":"fde954ee","dfnText":"align-content","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-align-content"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-propdef-align-content\u2460"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"},{"refs":[{"id":"ref-for-propdef-align-content\u2461"},{"id":"ref-for-propdef-align-content\u2462"}],"title":"7.5.6. \nAlignment Within an Initial Letter Box"}],"url":"https://www.w3.org/TR/css-align-3/#propdef-align-content"}, "fe3bf782": {"dfnID":"fe3bf782","dfnText":"margin box","external":true,"refSections":[{"refs":[{"id":"ref-for-margin-box"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-margin-box\u2460"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-margin-box\u2461"}],"title":"7.5.2. \nMargins, Borders, and Padding"},{"refs":[{"id":"ref-for-margin-box\u2462"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-margin-box\u2463"}],"title":"7.6.2. \nInline Kerning"},{"refs":[{"id":"ref-for-margin-box\u2464"}],"title":"7.9.3. \nInteraction with floats"}],"url":"https://www.w3.org/TR/css-box-3/#margin-box"}, "half-leading": {"dfnID":"half-leading","dfnText":"half-leading","external":false,"refSections":[{"refs":[{"id":"ref-for-half-leading"},{"id":"ref-for-half-leading\u2460"},{"id":"ref-for-half-leading\u2461"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-half-leading\u2462"},{"id":"ref-for-half-leading\u2463"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-half-leading\u2464"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-half-leading\u2465"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"}],"url":"#half-leading"}, "hanging-baseline": {"dfnID":"hanging-baseline","dfnText":"hanging","external":false,"refSections":[{"refs":[{"id":"ref-for-hanging-baseline"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-hanging-baseline\u2460"},{"id":"ref-for-hanging-baseline\u2461"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-hanging-baseline\u2462"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#hanging-baseline"}, "ideographic-ink-over-baseline": {"dfnID":"ideographic-ink-over-baseline","dfnText":"ideographic-ink-over","external":false,"refSections":[{"refs":[{"id":"ref-for-ideographic-ink-over-baseline"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-ideographic-ink-over-baseline\u2460"},{"id":"ref-for-ideographic-ink-over-baseline\u2461"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-ideographic-ink-over-baseline\u2462"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#ideographic-ink-over-baseline"}, "ideographic-ink-under-baseline": {"dfnID":"ideographic-ink-under-baseline","dfnText":"ideographic-ink-under","external":false,"refSections":[{"refs":[{"id":"ref-for-ideographic-ink-under-baseline"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-ideographic-ink-under-baseline\u2460"},{"id":"ref-for-ideographic-ink-under-baseline\u2461"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-ideographic-ink-under-baseline\u2462"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#ideographic-ink-under-baseline"}, "ideographic-over-baseline": {"dfnID":"ideographic-over-baseline","dfnText":"ideographic-over","external":false,"refSections":[{"refs":[{"id":"ref-for-ideographic-over-baseline"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-ideographic-over-baseline\u2460"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-ideographic-over-baseline\u2461"}],"title":"\nA.1: Calculating Em-over and Em-under"},{"refs":[{"id":"ref-for-ideographic-over-baseline\u2462"},{"id":"ref-for-ideographic-over-baseline\u2463"},{"id":"ref-for-ideographic-over-baseline\u2464"},{"id":"ref-for-ideographic-over-baseline\u2465"}],"title":"\nA.2: Synthesizing Baselines (and Other Font Metrics) for Text"},{"refs":[{"id":"ref-for-ideographic-over-baseline\u2466"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#ideographic-over-baseline"}, "ideographic-under-baseline": {"dfnID":"ideographic-under-baseline","dfnText":"ideographic-under","external":false,"refSections":[{"refs":[{"id":"ref-for-ideographic-under-baseline"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-ideographic-under-baseline\u2460"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-ideographic-under-baseline\u2461"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-ideographic-under-baseline\u2462"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-ideographic-under-baseline\u2463"}],"title":"\nA.1: Calculating Em-over and Em-under"},{"refs":[{"id":"ref-for-ideographic-under-baseline\u2464"},{"id":"ref-for-ideographic-under-baseline\u2465"},{"id":"ref-for-ideographic-under-baseline\u2466"},{"id":"ref-for-ideographic-under-baseline\u2467"}],"title":"\nA.2: Synthesizing Baselines (and Other Font Metrics) for Text"},{"refs":[{"id":"ref-for-ideographic-under-baseline\u2468"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#ideographic-under-baseline"}, "initial-letter": {"dfnID":"initial-letter","dfnText":"initial letter box","external":false,"refSections":[{"refs":[{"id":"ref-for-initial-letter"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-initial-letter\u2460"}],"title":"7.1.1. \nDrop Initial"},{"refs":[{"id":"ref-for-initial-letter\u2461"},{"id":"ref-for-initial-letter\u2462"}],"title":"7.2. \nSelecting Initial Letters"},{"refs":[{"id":"ref-for-initial-letter\u2463"},{"id":"ref-for-initial-letter\u2464"},{"id":"ref-for-initial-letter\u2465"},{"id":"ref-for-initial-letter\u2466"}],"title":"7.3.1. \nApplicability"},{"refs":[{"id":"ref-for-initial-letter\u2467"},{"id":"ref-for-initial-letter\u2468"},{"id":"ref-for-initial-letter\u2460\u24ea"},{"id":"ref-for-initial-letter\u2460\u2460"},{"id":"ref-for-initial-letter\u2460\u2461"},{"id":"ref-for-initial-letter\u2460\u2462"},{"id":"ref-for-initial-letter\u2460\u2463"},{"id":"ref-for-initial-letter\u2460\u2464"},{"id":"ref-for-initial-letter\u2460\u2465"},{"id":"ref-for-initial-letter\u2460\u2466"},{"id":"ref-for-initial-letter\u2460\u2467"},{"id":"ref-for-initial-letter\u2460\u2468"},{"id":"ref-for-initial-letter\u2461\u24ea"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-initial-letter\u2461\u2460"}],"title":"7.5. \nInitial Letter Layout"},{"refs":[{"id":"ref-for-initial-letter\u2461\u2461"},{"id":"ref-for-initial-letter\u2461\u2462"}],"title":"7.5.1. \nProperties Applying to Initial Letters"},{"refs":[{"id":"ref-for-initial-letter\u2461\u2463"}],"title":"7.5.2. \nMargins, Borders, and Padding"},{"refs":[{"id":"ref-for-initial-letter\u2461\u2464"}],"title":"7.5.3. \nFont Sizing of Initial Letters"},{"refs":[{"id":"ref-for-initial-letter\u2461\u2465"}],"title":"7.5.4. \nShaping and Glyph Selection"},{"refs":[{"id":"ref-for-initial-letter\u2461\u2466"},{"id":"ref-for-initial-letter\u2461\u2467"},{"id":"ref-for-initial-letter\u2461\u2468"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-initial-letter\u2462\u24ea"}],"title":"7.5.6. \nAlignment Within an Initial Letter Box"},{"refs":[{"id":"ref-for-initial-letter\u2462\u2460"},{"id":"ref-for-initial-letter\u2462\u2461"},{"id":"ref-for-initial-letter\u2462\u2462"},{"id":"ref-for-initial-letter\u2462\u2463"},{"id":"ref-for-initial-letter\u2462\u2464"},{"id":"ref-for-initial-letter\u2462\u2465"}],"title":"7.6.1. \nBlock-axis Positioning"},{"refs":[{"id":"ref-for-initial-letter\u2462\u2466"},{"id":"ref-for-initial-letter\u2462\u2467"}],"title":"7.6.2. \nInline Kerning"},{"refs":[{"id":"ref-for-initial-letter\u2462\u2468"},{"id":"ref-for-initial-letter\u2463\u24ea"},{"id":"ref-for-initial-letter\u2463\u2460"},{"id":"ref-for-initial-letter\u2463\u2461"},{"id":"ref-for-initial-letter\u2463\u2462"},{"id":"ref-for-initial-letter\u2463\u2463"},{"id":"ref-for-initial-letter\u2463\u2464"},{"id":"ref-for-initial-letter\u2463\u2465"},{"id":"ref-for-initial-letter\u2463\u2466"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"},{"refs":[{"id":"ref-for-initial-letter\u2463\u2467"}],"title":"7.8. \nLine Layout"},{"refs":[{"id":"ref-for-initial-letter\u2463\u2468"}],"title":"7.8.1. \nInline Flow Layout: Alignment, Justification, and White Space"},{"refs":[{"id":"ref-for-initial-letter\u2464\u24ea"},{"id":"ref-for-initial-letter\u2464\u2460"},{"id":"ref-for-initial-letter\u2464\u2461"}],"title":"7.8.2. \nEdge Effects: Indentation and Hanging Punctuation"},{"refs":[{"id":"ref-for-initial-letter\u2464\u2462"},{"id":"ref-for-initial-letter\u2464\u2463"},{"id":"ref-for-initial-letter\u2464\u2464"}],"title":"7.8.3. \nAncestor Inlines"},{"refs":[{"id":"ref-for-initial-letter\u2464\u2465"},{"id":"ref-for-initial-letter\u2464\u2466"},{"id":"ref-for-initial-letter\u2464\u2467"},{"id":"ref-for-initial-letter\u2464\u2468"},{"id":"ref-for-initial-letter\u2465\u24ea"},{"id":"ref-for-initial-letter\u2465\u2460"},{"id":"ref-for-initial-letter\u2465\u2461"},{"id":"ref-for-initial-letter\u2465\u2462"},{"id":"ref-for-initial-letter\u2465\u2463"},{"id":"ref-for-initial-letter\u2465\u2464"},{"id":"ref-for-initial-letter\u2465\u2465"},{"id":"ref-for-initial-letter\u2465\u2466"}],"title":"7.9.3. \nInteraction with floats"},{"refs":[{"id":"ref-for-initial-letter\u2465\u2467"},{"id":"ref-for-initial-letter\u2465\u2468"},{"id":"ref-for-initial-letter\u2466\u24ea"},{"id":"ref-for-initial-letter\u2466\u2460"},{"id":"ref-for-initial-letter\u2466\u2461"},{"id":"ref-for-initial-letter\u2466\u2462"}],"title":"7.9.4. \nInteraction with Fragmentation (Pagination)"},{"refs":[{"id":"ref-for-initial-letter\u2466\u2463"},{"id":"ref-for-initial-letter\u2466\u2464"},{"id":"ref-for-initial-letter\u2466\u2465"}],"title":"\nChanges"}],"url":"#initial-letter"}, "initial-letter-initial-letter-sink": {"dfnID":"initial-letter-initial-letter-sink","dfnText":"sink","external":false,"refSections":[{"refs":[{"id":"ref-for-initial-letter-initial-letter-sink"},{"id":"ref-for-initial-letter-initial-letter-sink\u2460"},{"id":"ref-for-initial-letter-initial-letter-sink\u2461"},{"id":"ref-for-initial-letter-initial-letter-sink\u2462"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"},{"refs":[{"id":"ref-for-initial-letter-initial-letter-sink\u2463"},{"id":"ref-for-initial-letter-initial-letter-sink\u2464"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-initial-letter-initial-letter-sink\u2465"},{"id":"ref-for-initial-letter-initial-letter-sink\u2466"},{"id":"ref-for-initial-letter-initial-letter-sink\u2467"},{"id":"ref-for-initial-letter-initial-letter-sink\u2468"}],"title":"7.6.1. \nBlock-axis Positioning"}],"url":"#initial-letter-initial-letter-sink"}, "initial-letter-initial-letter-size": {"dfnID":"initial-letter-initial-letter-size","dfnText":"size","external":false,"refSections":[{"refs":[{"id":"ref-for-initial-letter-initial-letter-size"},{"id":"ref-for-initial-letter-initial-letter-size\u2460"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"},{"refs":[{"id":"ref-for-initial-letter-initial-letter-size\u2461"}],"title":"7.5.3. \nFont Sizing of Initial Letters"},{"refs":[{"id":"ref-for-initial-letter-initial-letter-size\u2462"},{"id":"ref-for-initial-letter-initial-letter-size\u2463"}],"title":"7.6.1. \nBlock-axis Positioning"}],"url":"#initial-letter-initial-letter-size"}, "inline-formatting-context": {"dfnID":"inline-formatting-context","dfnText":"inline formatting context","external":false,"refSections":[{"refs":[{"id":"ref-for-inline-formatting-context"},{"id":"ref-for-inline-formatting-context\u2460"},{"id":"ref-for-inline-formatting-context\u2461"},{"id":"ref-for-inline-formatting-context\u2462"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-inline-formatting-context\u2463"},{"id":"ref-for-inline-formatting-context\u2464"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-inline-formatting-context\u2465"}],"title":"3.2.1. \nAscent and Descent Metrics"},{"refs":[{"id":"ref-for-inline-formatting-context\u2466"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-inline-formatting-context\u2467"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-inline-formatting-context\u2468"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-inline-formatting-context\u2460\u24ea"}],"title":"7.5. \nInitial Letter Layout"},{"refs":[{"id":"ref-for-inline-formatting-context\u2460\u2460"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#inline-formatting-context"}, "inline-initial-letter": {"dfnID":"inline-initial-letter","dfnText":"inline initial letter","external":false,"refSections":[{"refs":[{"id":"ref-for-inline-initial-letter"}],"title":"7.5.1. \nProperties Applying to Initial Letters"},{"refs":[{"id":"ref-for-inline-initial-letter\u2460"}],"title":"7.5.3. \nFont Sizing of Initial Letters"},{"refs":[{"id":"ref-for-inline-initial-letter\u2461"},{"id":"ref-for-inline-initial-letter\u2462"}],"title":"7.5.4. \nShaping and Glyph Selection"},{"refs":[{"id":"ref-for-inline-initial-letter\u2463"},{"id":"ref-for-inline-initial-letter\u2464"},{"id":"ref-for-inline-initial-letter\u2465"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-inline-initial-letter\u2466"}],"title":"7.5.6. \nAlignment Within an Initial Letter Box"}],"url":"#inline-initial-letter"}, "inline-layout": {"dfnID":"inline-layout","dfnText":"inline layout","external":false,"refSections":[{"refs":[{"id":"ref-for-inline-layout"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-inline-layout\u2460"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-inline-layout\u2461"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-inline-layout\u2462"}],"title":"4. \nBaseline Alignment"}],"url":"#inline-layout"}, "layout-bounds": {"dfnID":"layout-bounds","dfnText":"layout bounds","external":false,"refSections":[{"refs":[{"id":"ref-for-layout-bounds"},{"id":"ref-for-layout-bounds\u2460"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-layout-bounds\u2461"},{"id":"ref-for-layout-bounds\u2462"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-layout-bounds\u2463"},{"id":"ref-for-layout-bounds\u2464"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-layout-bounds\u2465"},{"id":"ref-for-layout-bounds\u2466"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-layout-bounds\u2467"},{"id":"ref-for-layout-bounds\u2468"},{"id":"ref-for-layout-bounds\u2460\u24ea"},{"id":"ref-for-layout-bounds\u2460\u2460"},{"id":"ref-for-layout-bounds\u2460\u2461"},{"id":"ref-for-layout-bounds\u2460\u2462"},{"id":"ref-for-layout-bounds\u2460\u2463"},{"id":"ref-for-layout-bounds\u2460\u2464"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-layout-bounds\u2460\u2465"}],"title":"\nChanges"}],"url":"#layout-bounds"}, "leading": {"dfnID":"leading","dfnText":"leading","external":false,"refSections":[{"refs":[{"id":"ref-for-leading"},{"id":"ref-for-leading\u2460"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"}],"url":"#leading"}, "line-box": {"dfnID":"line-box","dfnText":"line box","external":false,"refSections":[{"refs":[{"id":"ref-for-line-box"},{"id":"ref-for-line-box\u2460"},{"id":"ref-for-line-box\u2461"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-line-box\u2462"},{"id":"ref-for-line-box\u2463"},{"id":"ref-for-line-box\u2464"},{"id":"ref-for-line-box\u2465"},{"id":"ref-for-line-box\u2466"},{"id":"ref-for-line-box\u2467"},{"id":"ref-for-line-box\u2468"},{"id":"ref-for-line-box\u2460\u24ea"},{"id":"ref-for-line-box\u2460\u2460"},{"id":"ref-for-line-box\u2460\u2461"},{"id":"ref-for-line-box\u2460\u2462"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-line-box\u2460\u2463"},{"id":"ref-for-line-box\u2460\u2464"},{"id":"ref-for-line-box\u2460\u2465"},{"id":"ref-for-line-box\u2460\u2466"},{"id":"ref-for-line-box\u2460\u2467"},{"id":"ref-for-line-box\u2460\u2468"},{"id":"ref-for-line-box\u2461\u24ea"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-line-box\u2461\u2460"},{"id":"ref-for-line-box\u2461\u2461"},{"id":"ref-for-line-box\u2461\u2462"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-line-box\u2461\u2463"}],"title":"3.2.2. \nLine Gap Metrics"},{"refs":[{"id":"ref-for-line-box\u2461\u2464"},{"id":"ref-for-line-box\u2461\u2465"},{"id":"ref-for-line-box\u2461\u2466"},{"id":"ref-for-line-box\u2461\u2467"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-line-box\u2461\u2468"}],"title":"5. \nLogical Heights and Inter-line Spacing"},{"refs":[{"id":"ref-for-line-box\u2462\u24ea"},{"id":"ref-for-line-box\u2462\u2460"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-line-box\u2462\u2461"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-line-box\u2462\u2462"},{"id":"ref-for-line-box\u2462\u2463"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-line-box\u2462\u2464"},{"id":"ref-for-line-box\u2462\u2465"},{"id":"ref-for-line-box\u2462\u2466"},{"id":"ref-for-line-box\u2462\u2467"},{"id":"ref-for-line-box\u2462\u2468"},{"id":"ref-for-line-box\u2463\u24ea"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-line-box\u2463\u2460"},{"id":"ref-for-line-box\u2463\u2461"},{"id":"ref-for-line-box\u2463\u2462"},{"id":"ref-for-line-box\u2463\u2463"},{"id":"ref-for-line-box\u2463\u2464"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-line-box\u2463\u2465"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-line-box\u2463\u2466"},{"id":"ref-for-line-box\u2463\u2467"}],"title":"7.6.1. \nBlock-axis Positioning"},{"refs":[{"id":"ref-for-line-box\u2463\u2468"}],"title":"7.6.2. \nInline Kerning"},{"refs":[{"id":"ref-for-line-box\u2464\u24ea"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"},{"refs":[{"id":"ref-for-line-box\u2464\u2460"}],"title":"7.8. \nLine Layout"},{"refs":[{"id":"ref-for-line-box\u2464\u2461"}],"title":"7.9.3. \nInteraction with floats"},{"refs":[{"id":"ref-for-line-box\u2464\u2462"}],"title":"\nChanges"}],"url":"#line-box"}, "line-gap-metric": {"dfnID":"line-gap-metric","dfnText":"line gap metric","external":false,"refSections":[{"refs":[{"id":"ref-for-line-gap-metric"},{"id":"ref-for-line-gap-metric\u2460"}],"title":"3.2.2. \nLine Gap Metrics"},{"refs":[{"id":"ref-for-line-gap-metric\u2461"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-line-gap-metric\u2462"}],"title":"\nChanges"}],"url":"#line-gap-metric"}, "line-relative-shift-values": {"dfnID":"line-relative-shift-values","dfnText":"line-relative shift values","external":false,"refSections":[{"refs":[{"id":"ref-for-line-relative-shift-values"},{"id":"ref-for-line-relative-shift-values\u2460"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-line-relative-shift-values\u2461"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-line-relative-shift-values\u2462"},{"id":"ref-for-line-relative-shift-values\u2463"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-line-relative-shift-values\u2464"}],"title":"\nChanges"}],"url":"#line-relative-shift-values"}, "math-baseline": {"dfnID":"math-baseline","dfnText":"math","external":false,"refSections":[{"refs":[{"id":"ref-for-math-baseline"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-math-baseline\u2460"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-math-baseline\u2461"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#math-baseline"}, "originating-line": {"dfnID":"originating-line","dfnText":"originating line box","external":false,"refSections":[{"refs":[{"id":"ref-for-originating-line"},{"id":"ref-for-originating-line\u2460"}],"title":"7.6.1. \nBlock-axis Positioning"},{"refs":[{"id":"ref-for-originating-line\u2461"},{"id":"ref-for-originating-line\u2462"}],"title":"7.8.1. \nInline Flow Layout: Alignment, Justification, and White Space"},{"refs":[{"id":"ref-for-originating-line\u2463"}],"title":"7.8.2. \nEdge Effects: Indentation and Hanging Punctuation"},{"refs":[{"id":"ref-for-originating-line\u2464"},{"id":"ref-for-originating-line\u2465"}],"title":"7.9.3. \nInteraction with floats"}],"url":"#originating-line"}, "phantom-line-box": {"dfnID":"phantom-line-box","dfnText":"phantom line boxes","external":false,"refSections":[{"refs":[{"id":"ref-for-phantom-line-box"},{"id":"ref-for-phantom-line-box\u2460"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-phantom-line-box\u2461"},{"id":"ref-for-phantom-line-box\u2462"}],"title":"\nChanges"}],"url":"#phantom-line-box"}, "post-alignment-shift": {"dfnID":"post-alignment-shift","dfnText":"post-alignment shift","external":false,"refSections":[{"refs":[{"id":"ref-for-post-alignment-shift"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-post-alignment-shift\u2460"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"},{"refs":[{"id":"ref-for-post-alignment-shift\u2461"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"}],"url":"#post-alignment-shift"}, "preferred-line-height": {"dfnID":"preferred-line-height","dfnText":"preferred line height","external":false,"refSections":[{"refs":[{"id":"ref-for-preferred-line-height"},{"id":"ref-for-preferred-line-height\u2460"},{"id":"ref-for-preferred-line-height\u2461"},{"id":"ref-for-preferred-line-height\u2462"}],"title":"5.1. \nLine Spacing: the line-height property"}],"url":"#preferred-line-height"}, "propdef-alignment-baseline": {"dfnID":"propdef-alignment-baseline","dfnText":"alignment-baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-alignment-baseline"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-propdef-alignment-baseline\u2460"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-propdef-alignment-baseline\u2461"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-propdef-alignment-baseline\u2462"},{"id":"ref-for-propdef-alignment-baseline\u2463"},{"id":"ref-for-propdef-alignment-baseline\u2464"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"},{"refs":[{"id":"ref-for-propdef-alignment-baseline\u2465"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-propdef-alignment-baseline\u2466"},{"id":"ref-for-propdef-alignment-baseline\u2467"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-propdef-alignment-baseline\u2468"}],"title":"\nChanges"}],"url":"#propdef-alignment-baseline"}, "propdef-baseline-shift": {"dfnID":"propdef-baseline-shift","dfnText":"baseline-shift","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-baseline-shift"},{"id":"ref-for-propdef-baseline-shift\u2460"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-propdef-baseline-shift\u2461"},{"id":"ref-for-propdef-baseline-shift\u2462"},{"id":"ref-for-propdef-baseline-shift\u2463"},{"id":"ref-for-propdef-baseline-shift\u2464"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"},{"refs":[{"id":"ref-for-propdef-baseline-shift\u2465"},{"id":"ref-for-propdef-baseline-shift\u2466"},{"id":"ref-for-propdef-baseline-shift\u2467"},{"id":"ref-for-propdef-baseline-shift\u2468"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-propdef-baseline-shift\u2460\u24ea"},{"id":"ref-for-propdef-baseline-shift\u2460\u2460"}],"title":"\nChanges"}],"url":"#propdef-baseline-shift"}, "propdef-baseline-source": {"dfnID":"propdef-baseline-source","dfnText":"baseline-source","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-baseline-source"}],"title":"3.3. \nBaselines of Glyphs and Boxes"},{"refs":[{"id":"ref-for-propdef-baseline-source\u2460"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-propdef-baseline-source\u2461"},{"id":"ref-for-propdef-baseline-source\u2462"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"},{"refs":[{"id":"ref-for-propdef-baseline-source\u2463"}],"title":"4.2.1. \nAlignment Baseline Source: the baseline-source longhand"},{"refs":[{"id":"ref-for-propdef-baseline-source\u2464"}],"title":"\nChanges"}],"url":"#propdef-baseline-source"}, "propdef-dominant-baseline": {"dfnID":"propdef-dominant-baseline","dfnText":"dominant-baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-dominant-baseline"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-propdef-dominant-baseline\u2460"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-propdef-dominant-baseline\u2461"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-propdef-dominant-baseline\u2462"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-propdef-dominant-baseline\u2463"},{"id":"ref-for-propdef-dominant-baseline\u2464"}],"title":"\nChanges"}],"url":"#propdef-dominant-baseline"}, "propdef-initial-letter": {"dfnID":"propdef-initial-letter","dfnText":"initial-letter","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-initial-letter"}],"title":"7.2. \nSelecting Initial Letters"},{"refs":[{"id":"ref-for-propdef-initial-letter\u2460"},{"id":"ref-for-propdef-initial-letter\u2461"},{"id":"ref-for-propdef-initial-letter\u2462"},{"id":"ref-for-propdef-initial-letter\u2463"},{"id":"ref-for-propdef-initial-letter\u2464"},{"id":"ref-for-propdef-initial-letter\u2465"},{"id":"ref-for-propdef-initial-letter\u2466"},{"id":"ref-for-propdef-initial-letter\u2467"},{"id":"ref-for-propdef-initial-letter\u2468"},{"id":"ref-for-propdef-initial-letter\u2460\u24ea"},{"id":"ref-for-propdef-initial-letter\u2460\u2460"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"},{"refs":[{"id":"ref-for-propdef-initial-letter\u2460\u2461"},{"id":"ref-for-propdef-initial-letter\u2460\u2462"},{"id":"ref-for-propdef-initial-letter\u2460\u2463"},{"id":"ref-for-propdef-initial-letter\u2460\u2464"},{"id":"ref-for-propdef-initial-letter\u2460\u2465"},{"id":"ref-for-propdef-initial-letter\u2460\u2466"},{"id":"ref-for-propdef-initial-letter\u2460\u2467"}],"title":"7.3.1. \nApplicability"},{"refs":[{"id":"ref-for-propdef-initial-letter\u2460\u2468"}],"title":"7.5.3. \nFont Sizing of Initial Letters"},{"refs":[{"id":"ref-for-propdef-initial-letter\u2461\u24ea"},{"id":"ref-for-propdef-initial-letter\u2461\u2460"}],"title":"7.5.4. \nShaping and Glyph Selection"},{"refs":[{"id":"ref-for-propdef-initial-letter\u2461\u2461"}],"title":"7.5.5. \nSizing the Initial Letter Box"},{"refs":[{"id":"ref-for-propdef-initial-letter\u2461\u2462"},{"id":"ref-for-propdef-initial-letter\u2461\u2463"}],"title":"7.6.1. \nBlock-axis Positioning"},{"refs":[{"id":"ref-for-propdef-initial-letter\u2461\u2464"}],"title":"7.8.2. \nEdge Effects: Indentation and Hanging Punctuation"},{"refs":[{"id":"ref-for-propdef-initial-letter\u2461\u2465"},{"id":"ref-for-propdef-initial-letter\u2461\u2466"}],"title":"\nChanges"}],"url":"#propdef-initial-letter"}, "propdef-initial-letter-align": {"dfnID":"propdef-initial-letter-align","dfnText":"initial-letter-align","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-initial-letter-align"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-propdef-initial-letter-align\u2460"},{"id":"ref-for-propdef-initial-letter-align\u2461"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-propdef-initial-letter-align\u2462"}],"title":"7.4.1. \nUA Default Stylesheet for initial-letter-align"},{"refs":[{"id":"ref-for-propdef-initial-letter-align\u2463"}],"title":"7.5.2. \nMargins, Borders, and Padding"},{"refs":[{"id":"ref-for-propdef-initial-letter-align\u2464"}],"title":"7.5.3. \nFont Sizing of Initial Letters"},{"refs":[{"id":"ref-for-propdef-initial-letter-align\u2465"}],"title":"7.6.1. \nBlock-axis Positioning"},{"refs":[{"id":"ref-for-propdef-initial-letter-align\u2466"},{"id":"ref-for-propdef-initial-letter-align\u2467"}],"title":"\nChanges"}],"url":"#propdef-initial-letter-align"}, "propdef-initial-letter-wrap": {"dfnID":"propdef-initial-letter-wrap","dfnText":"initial-letter-wrap","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-initial-letter-wrap\u2460"}],"title":"7.5.2. \nMargins, Borders, and Padding"},{"refs":[{"id":"ref-for-propdef-initial-letter-wrap\u2461"},{"id":"ref-for-propdef-initial-letter-wrap\u2462"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"},{"refs":[{"id":"ref-for-propdef-initial-letter-wrap\u2463"}],"title":"\nChanges"}],"url":"#propdef-initial-letter-wrap"}, "propdef-inline-sizing": {"dfnID":"propdef-inline-sizing","dfnText":"inline-sizing","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-inline-sizing"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-propdef-inline-sizing\u2460"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-propdef-inline-sizing\u2461"}],"title":"7.5.1. \nProperties Applying to Initial Letters"},{"refs":[{"id":"ref-for-propdef-inline-sizing\u2462"},{"id":"ref-for-propdef-inline-sizing\u2463"}],"title":"\nChanges"}],"url":"#propdef-inline-sizing"}, "propdef-line-fit-edge": {"dfnID":"propdef-line-fit-edge","dfnText":"line-fit-edge","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-line-fit-edge"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-propdef-line-fit-edge\u2460"},{"id":"ref-for-propdef-line-fit-edge\u2461"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-propdef-line-fit-edge\u2462"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-propdef-line-fit-edge\u2463"}],"title":"5. \nLogical Heights and Inter-line Spacing"},{"refs":[{"id":"ref-for-propdef-line-fit-edge\u2464"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-propdef-line-fit-edge\u2465"},{"id":"ref-for-propdef-line-fit-edge\u2466"},{"id":"ref-for-propdef-line-fit-edge\u2467"},{"id":"ref-for-propdef-line-fit-edge\u2468"},{"id":"ref-for-propdef-line-fit-edge\u2460\u24ea"},{"id":"ref-for-propdef-line-fit-edge\u2460\u2460"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-propdef-line-fit-edge\u2460\u2461"},{"id":"ref-for-propdef-line-fit-edge\u2460\u2462"},{"id":"ref-for-propdef-line-fit-edge\u2460\u2463"},{"id":"ref-for-propdef-line-fit-edge\u2460\u2464"},{"id":"ref-for-propdef-line-fit-edge\u2460\u2465"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-propdef-line-fit-edge\u2460\u2466"},{"id":"ref-for-propdef-line-fit-edge\u2460\u2467"},{"id":"ref-for-propdef-line-fit-edge\u2460\u2468"},{"id":"ref-for-propdef-line-fit-edge\u2461\u24ea"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"},{"refs":[{"id":"ref-for-propdef-line-fit-edge\u2461\u2460"}],"title":"7.5.1. \nProperties Applying to Initial Letters"},{"refs":[{"id":"ref-for-propdef-line-fit-edge\u2461\u2461"},{"id":"ref-for-propdef-line-fit-edge\u2461\u2462"},{"id":"ref-for-propdef-line-fit-edge\u2461\u2463"},{"id":"ref-for-propdef-line-fit-edge\u2461\u2464"}],"title":"\nChanges"}],"url":"#propdef-line-fit-edge"}, "propdef-line-height": {"dfnID":"propdef-line-height","dfnText":"line-height","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-line-height"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-propdef-line-height\u2460"},{"id":"ref-for-propdef-line-height\u2461"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-propdef-line-height\u2462"}],"title":"3.2.2. \nLine Gap Metrics"},{"refs":[{"id":"ref-for-propdef-line-height\u2463"},{"id":"ref-for-propdef-line-height\u2464"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-propdef-line-height\u2465"}],"title":"5. \nLogical Heights and Inter-line Spacing"},{"refs":[{"id":"ref-for-propdef-line-height\u2466"},{"id":"ref-for-propdef-line-height\u2467"},{"id":"ref-for-propdef-line-height\u2468"},{"id":"ref-for-propdef-line-height\u2460\u24ea"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-propdef-line-height\u2460\u2460"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-propdef-line-height\u2460\u2461"},{"id":"ref-for-propdef-line-height\u2460\u2462"},{"id":"ref-for-propdef-line-height\u2460\u2463"},{"id":"ref-for-propdef-line-height\u2460\u2464"},{"id":"ref-for-propdef-line-height\u2460\u2465"},{"id":"ref-for-propdef-line-height\u2460\u2466"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-propdef-line-height\u2460\u2467"}],"title":"6. \nTrimming Leading Over/Under Text"},{"refs":[{"id":"ref-for-propdef-line-height\u2460\u2468"},{"id":"ref-for-propdef-line-height\u2461\u24ea"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-propdef-line-height\u2461\u2460"}],"title":"7.5.1. \nProperties Applying to Initial Letters"},{"refs":[{"id":"ref-for-propdef-line-height\u2461\u2461"}],"title":"7.5.3. \nFont Sizing of Initial Letters"},{"refs":[{"id":"ref-for-propdef-line-height\u2461\u2462"}],"title":"7.6.1. \nBlock-axis Positioning"},{"refs":[{"id":"ref-for-propdef-line-height\u2461\u2463"}],"title":"\nChanges"}],"url":"#propdef-line-height"}, "propdef-text-box": {"dfnID":"propdef-text-box","dfnText":"text-box","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-box"}],"title":"6. \nTrimming Leading Over/Under Text"},{"refs":[{"id":"ref-for-propdef-text-box\u2460"}],"title":"6.1. \nShorthand for Text Box Trimming: the text-box property"},{"refs":[{"id":"ref-for-propdef-text-box\u2461"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"},{"refs":[{"id":"ref-for-propdef-text-box\u2462"},{"id":"ref-for-propdef-text-box\u2463"}],"title":"\nChanges"}],"url":"#propdef-text-box"}, "propdef-text-box-edge": {"dfnID":"propdef-text-box-edge","dfnText":"text-box-edge","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-box-edge"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-propdef-text-box-edge\u2460"},{"id":"ref-for-propdef-text-box-edge\u2461"},{"id":"ref-for-propdef-text-box-edge\u2462"},{"id":"ref-for-propdef-text-box-edge\u2463"}],"title":"6.1. \nShorthand for Text Box Trimming: the text-box property"},{"refs":[{"id":"ref-for-propdef-text-box-edge\u2464"},{"id":"ref-for-propdef-text-box-edge\u2465"},{"id":"ref-for-propdef-text-box-edge\u2466"},{"id":"ref-for-propdef-text-box-edge\u2467"},{"id":"ref-for-propdef-text-box-edge\u2468"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-propdef-text-box-edge\u2460\u24ea"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"},{"refs":[{"id":"ref-for-propdef-text-box-edge\u2460\u2460"},{"id":"ref-for-propdef-text-box-edge\u2460\u2461"},{"id":"ref-for-propdef-text-box-edge\u2460\u2462"},{"id":"ref-for-propdef-text-box-edge\u2460\u2463"},{"id":"ref-for-propdef-text-box-edge\u2460\u2464"},{"id":"ref-for-propdef-text-box-edge\u2460\u2465"}],"title":"\nChanges"}],"url":"#propdef-text-box-edge"}, "propdef-text-box-trim": {"dfnID":"propdef-text-box-trim","dfnText":"text-box-trim","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-box-trim"}],"title":"2.1. \nLayout of Line Boxes"},{"refs":[{"id":"ref-for-propdef-text-box-trim\u2460"}],"title":"2.3. \nPhantom Line Boxes"},{"refs":[{"id":"ref-for-propdef-text-box-trim\u2461"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-propdef-text-box-trim\u2462"}],"title":"6. \nTrimming Leading Over/Under Text"},{"refs":[{"id":"ref-for-propdef-text-box-trim\u2463"},{"id":"ref-for-propdef-text-box-trim\u2464"},{"id":"ref-for-propdef-text-box-trim\u2465"},{"id":"ref-for-propdef-text-box-trim\u2466"}],"title":"6.1. \nShorthand for Text Box Trimming: the text-box property"},{"refs":[{"id":"ref-for-propdef-text-box-trim\u2467"},{"id":"ref-for-propdef-text-box-trim\u2468"},{"id":"ref-for-propdef-text-box-trim\u2460\u24ea"},{"id":"ref-for-propdef-text-box-trim\u2460\u2460"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-propdef-text-box-trim\u2460\u2461"},{"id":"ref-for-propdef-text-box-trim\u2460\u2462"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"},{"refs":[{"id":"ref-for-propdef-text-box-trim\u2460\u2463"},{"id":"ref-for-propdef-text-box-trim\u2460\u2464"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"},{"refs":[{"id":"ref-for-propdef-text-box-trim\u2460\u2465"},{"id":"ref-for-propdef-text-box-trim\u2460\u2466"},{"id":"ref-for-propdef-text-box-trim\u2460\u2467"},{"id":"ref-for-propdef-text-box-trim\u2460\u2468"},{"id":"ref-for-propdef-text-box-trim\u2461\u24ea"},{"id":"ref-for-propdef-text-box-trim\u2461\u2460"},{"id":"ref-for-propdef-text-box-trim\u2461\u2461"}],"title":"\nChanges"}],"url":"#propdef-text-box-trim"}, "propdef-vertical-align": {"dfnID":"propdef-vertical-align","dfnText":"vertical-align","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-vertical-align"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2460"},{"id":"ref-for-propdef-vertical-align\u2461"}],"title":"4. \nBaseline Alignment"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2462"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2463"},{"id":"ref-for-propdef-vertical-align\u2464"},{"id":"ref-for-propdef-vertical-align\u2465"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2466"}],"title":"4.2.2.1. \nLegacy Values for SVG"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2467"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2468"}],"title":"4.2.3.1. \nLegacy Values for SVG"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2460\u24ea"},{"id":"ref-for-propdef-vertical-align\u2460\u2460"}],"title":"7.5.1. \nProperties Applying to Initial Letters"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2460\u2461"},{"id":"ref-for-propdef-vertical-align\u2460\u2462"},{"id":"ref-for-propdef-vertical-align\u2460\u2463"},{"id":"ref-for-propdef-vertical-align\u2460\u2464"}],"title":"\nChanges"}],"url":"#propdef-vertical-align"}, "raised-initial": {"dfnID":"raised-initial","dfnText":"raised initial","external":false,"refSections":[{"refs":[{"id":"ref-for-raised-initial"},{"id":"ref-for-raised-initial\u2460"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"},{"refs":[{"id":"ref-for-raised-initial\u2461"}],"title":"\nChanges"}],"url":"#raised-initial"}, "root-inline-box": {"dfnID":"root-inline-box","dfnText":"root inline box","external":false,"refSections":[{"refs":[{"id":"ref-for-root-inline-box"},{"id":"ref-for-root-inline-box\u2460"}],"title":"2. \nInline Layout Model"},{"refs":[{"id":"ref-for-root-inline-box\u2461"},{"id":"ref-for-root-inline-box\u2462"}],"title":"2.2. \nLayout Within Line Boxes"},{"refs":[{"id":"ref-for-root-inline-box\u2463"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-root-inline-box\u2464"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-root-inline-box\u2465"},{"id":"ref-for-root-inline-box\u2466"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-root-inline-box\u2467"},{"id":"ref-for-root-inline-box\u2468"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-root-inline-box\u2460\u24ea"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-root-inline-box\u2460\u2460"}],"title":"7.6.1. \nBlock-axis Positioning"}],"url":"#root-inline-box"}, "sunken-initial": {"dfnID":"sunken-initial","dfnText":"sunken initial","external":false,"refSections":[{"refs":[{"id":"ref-for-sunken-initial"},{"id":"ref-for-sunken-initial\u2460"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"},{"refs":[{"id":"ref-for-sunken-initial\u2461"},{"id":"ref-for-sunken-initial\u2462"}],"title":"7.8.1. \nInline Flow Layout: Alignment, Justification, and White Space"}],"url":"#sunken-initial"}, "text-over-baseline": {"dfnID":"text-over-baseline","dfnText":"text-over","external":false,"refSections":[{"refs":[{"id":"ref-for-text-over-baseline"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-text-over-baseline\u2460"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-text-over-baseline\u2461"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-text-over-baseline\u2462"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-text-over-baseline\u2463"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#text-over-baseline"}, "text-under-baseline": {"dfnID":"text-under-baseline","dfnText":"text-under","external":false,"refSections":[{"refs":[{"id":"ref-for-text-under-baseline"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-text-under-baseline\u2460"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-text-under-baseline\u2461"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-text-under-baseline\u2462"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"},{"refs":[{"id":"ref-for-text-under-baseline\u2463"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#text-under-baseline"}, "typedef-text-edge": {"dfnID":"typedef-text-edge","dfnText":"<text-edge>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-text-edge"},{"id":"ref-for-typedef-text-edge\u2460"},{"id":"ref-for-typedef-text-edge\u2461"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-typedef-text-edge\u2462"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"},{"refs":[{"id":"ref-for-typedef-text-edge\u2463"}],"title":"\nChanges"}],"url":"#typedef-text-edge"}, "valdef-alignment-baseline-alphabetic": {"dfnID":"valdef-alignment-baseline-alphabetic","dfnText":"alphabetic","external":false,"refSections":[],"url":"#valdef-alignment-baseline-alphabetic"}, "valdef-alignment-baseline-baseline": {"dfnID":"valdef-alignment-baseline-baseline","dfnText":"baseline","external":false,"refSections":[],"url":"#valdef-alignment-baseline-baseline"}, "valdef-alignment-baseline-central": {"dfnID":"valdef-alignment-baseline-central","dfnText":"central","external":false,"refSections":[],"url":"#valdef-alignment-baseline-central"}, "valdef-alignment-baseline-ideographic": {"dfnID":"valdef-alignment-baseline-ideographic","dfnText":"ideographic","external":false,"refSections":[],"url":"#valdef-alignment-baseline-ideographic"}, "valdef-alignment-baseline-mathematical": {"dfnID":"valdef-alignment-baseline-mathematical","dfnText":"mathematical","external":false,"refSections":[],"url":"#valdef-alignment-baseline-mathematical"}, "valdef-alignment-baseline-middle": {"dfnID":"valdef-alignment-baseline-middle","dfnText":"middle","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-alignment-baseline-middle"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"},{"refs":[{"id":"ref-for-valdef-alignment-baseline-middle\u2460"}],"title":"\nChanges"}],"url":"#valdef-alignment-baseline-middle"}, "valdef-alignment-baseline-text-after-edge": {"dfnID":"valdef-alignment-baseline-text-after-edge","dfnText":"text-after-edge","external":false,"refSections":[],"url":"#valdef-alignment-baseline-text-after-edge"}, "valdef-alignment-baseline-text-before-edge": {"dfnID":"valdef-alignment-baseline-text-before-edge","dfnText":"text-before-edge","external":false,"refSections":[],"url":"#valdef-alignment-baseline-text-before-edge"}, "valdef-alignment-baseline-text-bottom": {"dfnID":"valdef-alignment-baseline-text-bottom","dfnText":"text-bottom","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-alignment-baseline-text-bottom"}],"title":"4.2.2.1. \nLegacy Values for SVG"},{"refs":[{"id":"ref-for-valdef-alignment-baseline-text-bottom\u2460"},{"id":"ref-for-valdef-alignment-baseline-text-bottom\u2461"}],"title":"\nChanges"}],"url":"#valdef-alignment-baseline-text-bottom"}, "valdef-alignment-baseline-text-top": {"dfnID":"valdef-alignment-baseline-text-top","dfnText":"text-top","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-alignment-baseline-text-top"}],"title":"4.2.2.1. \nLegacy Values for SVG"},{"refs":[{"id":"ref-for-valdef-alignment-baseline-text-top\u2460"},{"id":"ref-for-valdef-alignment-baseline-text-top\u2461"}],"title":"\nChanges"}],"url":"#valdef-alignment-baseline-text-top"}, "valdef-baseline-shift-baseline": {"dfnID":"valdef-baseline-shift-baseline","dfnText":"baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-shift-baseline"}],"title":"4.2.3.1. \nLegacy Values for SVG"}],"url":"#valdef-baseline-shift-baseline"}, "valdef-baseline-shift-bottom": {"dfnID":"valdef-baseline-shift-bottom","dfnText":"bottom","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-shift-bottom"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"},{"refs":[{"id":"ref-for-valdef-baseline-shift-bottom\u2460"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"}],"url":"#valdef-baseline-shift-bottom"}, "valdef-baseline-shift-center": {"dfnID":"valdef-baseline-shift-center","dfnText":"center","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-shift-center"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"}],"url":"#valdef-baseline-shift-center"}, "valdef-baseline-shift-length": {"dfnID":"valdef-baseline-shift-length","dfnText":"<length>","external":false,"refSections":[],"url":"#valdef-baseline-shift-length"}, "valdef-baseline-shift-percentage": {"dfnID":"valdef-baseline-shift-percentage","dfnText":"<percentage>","external":false,"refSections":[],"url":"#valdef-baseline-shift-percentage"}, "valdef-baseline-shift-sub": {"dfnID":"valdef-baseline-shift-sub","dfnText":"sub","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-shift-sub"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"}],"url":"#valdef-baseline-shift-sub"}, "valdef-baseline-shift-super": {"dfnID":"valdef-baseline-shift-super","dfnText":"super","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-shift-super"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"}],"url":"#valdef-baseline-shift-super"}, "valdef-baseline-shift-top": {"dfnID":"valdef-baseline-shift-top","dfnText":"top","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-shift-top"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"},{"refs":[{"id":"ref-for-valdef-baseline-shift-top\u2460"}],"title":"4.2.3. \nPost-Alignment Shift: the baseline-shift longhand"}],"url":"#valdef-baseline-shift-top"}, "valdef-baseline-source-auto": {"dfnID":"valdef-baseline-source-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-source-auto"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"}],"url":"#valdef-baseline-source-auto"}, "valdef-baseline-source-first": {"dfnID":"valdef-baseline-source-first","dfnText":"first","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-source-first"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"}],"url":"#valdef-baseline-source-first"}, "valdef-baseline-source-last": {"dfnID":"valdef-baseline-source-last","dfnText":"last","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-source-last"}],"title":"4.2. \nTransverse Box Alignment: the vertical-align property"}],"url":"#valdef-baseline-source-last"}, "valdef-dominant-baseline-alphabetic": {"dfnID":"valdef-dominant-baseline-alphabetic","dfnText":"alphabetic","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-dominant-baseline-alphabetic"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"}],"url":"#valdef-dominant-baseline-alphabetic"}, "valdef-dominant-baseline-auto": {"dfnID":"valdef-dominant-baseline-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-dominant-baseline-auto"}],"title":"\nChanges"}],"url":"#valdef-dominant-baseline-auto"}, "valdef-dominant-baseline-central": {"dfnID":"valdef-dominant-baseline-central","dfnText":"central","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-dominant-baseline-central"},{"id":"ref-for-valdef-dominant-baseline-central\u2460"},{"id":"ref-for-valdef-dominant-baseline-central\u2461"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"}],"url":"#valdef-dominant-baseline-central"}, "valdef-dominant-baseline-hanging": {"dfnID":"valdef-dominant-baseline-hanging","dfnText":"hanging","external":false,"refSections":[],"url":"#valdef-dominant-baseline-hanging"}, "valdef-dominant-baseline-ideographic": {"dfnID":"valdef-dominant-baseline-ideographic","dfnText":"ideographic","external":false,"refSections":[],"url":"#valdef-dominant-baseline-ideographic"}, "valdef-dominant-baseline-mathematical": {"dfnID":"valdef-dominant-baseline-mathematical","dfnText":"mathematical","external":false,"refSections":[],"url":"#valdef-dominant-baseline-mathematical"}, "valdef-dominant-baseline-middle": {"dfnID":"valdef-dominant-baseline-middle","dfnText":"middle","external":false,"refSections":[],"url":"#valdef-dominant-baseline-middle"}, "valdef-dominant-baseline-text-bottom": {"dfnID":"valdef-dominant-baseline-text-bottom","dfnText":"text-bottom","external":false,"refSections":[],"url":"#valdef-dominant-baseline-text-bottom"}, "valdef-dominant-baseline-text-top": {"dfnID":"valdef-dominant-baseline-text-top","dfnText":"text-top","external":false,"refSections":[],"url":"#valdef-dominant-baseline-text-top"}, "valdef-initial-letter-align-alphabetic": {"dfnID":"valdef-initial-letter-align-alphabetic","dfnText":"alphabetic","external":false,"refSections":[],"url":"#valdef-initial-letter-align-alphabetic"}, "valdef-initial-letter-align-border-box": {"dfnID":"valdef-initial-letter-align-border-box","dfnText":"border-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-initial-letter-align-border-box"},{"id":"ref-for-valdef-initial-letter-align-border-box\u2460"}],"title":"7.4. \nAlignment of Initial Letters: the initial-letter-align property"},{"refs":[{"id":"ref-for-valdef-initial-letter-align-border-box\u2461"}],"title":"7.5.2. \nMargins, Borders, and Padding"},{"refs":[{"id":"ref-for-valdef-initial-letter-align-border-box\u2462"}],"title":"7.5.5. \nSizing the Initial Letter Box"}],"url":"#valdef-initial-letter-align-border-box"}, "valdef-initial-letter-align-hanging": {"dfnID":"valdef-initial-letter-align-hanging","dfnText":"hanging","external":false,"refSections":[],"url":"#valdef-initial-letter-align-hanging"}, "valdef-initial-letter-align-ideographic": {"dfnID":"valdef-initial-letter-align-ideographic","dfnText":"ideographic","external":false,"refSections":[],"url":"#valdef-initial-letter-align-ideographic"}, "valdef-initial-letter-align-leading": {"dfnID":"valdef-initial-letter-align-leading","dfnText":"leading","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-initial-letter-align-leading"}],"title":"\nChanges"}],"url":"#valdef-initial-letter-align-leading"}, "valdef-initial-letter-drop": {"dfnID":"valdef-initial-letter-drop","dfnText":"drop","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-initial-letter-drop"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"}],"url":"#valdef-initial-letter-drop"}, "valdef-initial-letter-integer-1": {"dfnID":"valdef-initial-letter-integer-1","dfnText":"<integer [1,\u221e]>","external":false,"refSections":[],"url":"#valdef-initial-letter-integer-1"}, "valdef-initial-letter-normal": {"dfnID":"valdef-initial-letter-normal","dfnText":"normal","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-initial-letter-normal"},{"id":"ref-for-valdef-initial-letter-normal\u2460"}],"title":"7.3. \nCreating Initial Letters: the initial-letter property"},{"refs":[{"id":"ref-for-valdef-initial-letter-normal\u2461"},{"id":"ref-for-valdef-initial-letter-normal\u2462"}],"title":"7.3.1. \nApplicability"},{"refs":[{"id":"ref-for-valdef-initial-letter-normal\u2463"}],"title":"7.5.4. \nShaping and Glyph Selection"}],"url":"#valdef-initial-letter-normal"}, "valdef-initial-letter-number-1": {"dfnID":"valdef-initial-letter-number-1","dfnText":"<number [1,\u221e]>","external":false,"refSections":[],"url":"#valdef-initial-letter-number-1"}, "valdef-initial-letter-raise": {"dfnID":"valdef-initial-letter-raise","dfnText":"raise","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-initial-letter-raise"}],"title":"\nChanges"}],"url":"#valdef-initial-letter-raise"}, "valdef-initial-letter-wrap-all": {"dfnID":"valdef-initial-letter-wrap-all","dfnText":"all","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-initial-letter-wrap-all"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"}],"url":"#valdef-initial-letter-wrap-all"}, "valdef-initial-letter-wrap-first": {"dfnID":"valdef-initial-letter-wrap-first","dfnText":"first","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-initial-letter-wrap-first"},{"id":"ref-for-valdef-initial-letter-wrap-first\u2460"},{"id":"ref-for-valdef-initial-letter-wrap-first\u2461"},{"id":"ref-for-valdef-initial-letter-wrap-first\u2462"},{"id":"ref-for-valdef-initial-letter-wrap-first\u2463"},{"id":"ref-for-valdef-initial-letter-wrap-first\u2464"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"}],"url":"#valdef-initial-letter-wrap-first"}, "valdef-initial-letter-wrap-grid": {"dfnID":"valdef-initial-letter-wrap-grid","dfnText":"grid","external":false,"refSections":[],"url":"#valdef-initial-letter-wrap-grid"}, "valdef-initial-letter-wrap-length": {"dfnID":"valdef-initial-letter-wrap-length","dfnText":"<length>","external":false,"refSections":[],"url":"#valdef-initial-letter-wrap-length"}, "valdef-initial-letter-wrap-none": {"dfnID":"valdef-initial-letter-wrap-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-initial-letter-wrap-none"},{"id":"ref-for-valdef-initial-letter-wrap-none\u2460"},{"id":"ref-for-valdef-initial-letter-wrap-none\u2461"}],"title":"7.7. \nInitial Letter Wrapping: the initial-letter-wrap property"}],"url":"#valdef-initial-letter-wrap-none"}, "valdef-initial-letter-wrap-percentage": {"dfnID":"valdef-initial-letter-wrap-percentage","dfnText":"<percentage>","external":false,"refSections":[],"url":"#valdef-initial-letter-wrap-percentage"}, "valdef-inline-sizing-normal": {"dfnID":"valdef-inline-sizing-normal","dfnText":"normal","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-inline-sizing-normal"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"}],"url":"#valdef-inline-sizing-normal"}, "valdef-inline-sizing-stretch": {"dfnID":"valdef-inline-sizing-stretch","dfnText":"stretch","external":false,"refSections":[],"url":"#valdef-inline-sizing-stretch"}, "valdef-line-fit-edge-alphabetic": {"dfnID":"valdef-line-fit-edge-alphabetic","dfnText":"alphabetic","external":false,"refSections":[],"url":"#valdef-line-fit-edge-alphabetic"}, "valdef-line-fit-edge-cap": {"dfnID":"valdef-line-fit-edge-cap","dfnText":"cap","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-fit-edge-cap"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"}],"url":"#valdef-line-fit-edge-cap"}, "valdef-line-fit-edge-ex": {"dfnID":"valdef-line-fit-edge-ex","dfnText":"ex","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-fit-edge-ex"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"}],"url":"#valdef-line-fit-edge-ex"}, "valdef-line-fit-edge-ideographic": {"dfnID":"valdef-line-fit-edge-ideographic","dfnText":"ideographic","external":false,"refSections":[],"url":"#valdef-line-fit-edge-ideographic"}, "valdef-line-fit-edge-ideographic-ink": {"dfnID":"valdef-line-fit-edge-ideographic-ink","dfnText":"ideographic-ink","external":false,"refSections":[],"url":"#valdef-line-fit-edge-ideographic-ink"}, "valdef-line-fit-edge-leading": {"dfnID":"valdef-line-fit-edge-leading","dfnText":"leading","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-fit-edge-leading"}],"title":"5.1. \nLine Spacing: the line-height property"},{"refs":[{"id":"ref-for-valdef-line-fit-edge-leading\u2460"},{"id":"ref-for-valdef-line-fit-edge-leading\u2461"},{"id":"ref-for-valdef-line-fit-edge-leading\u2462"},{"id":"ref-for-valdef-line-fit-edge-leading\u2463"},{"id":"ref-for-valdef-line-fit-edge-leading\u2464"},{"id":"ref-for-valdef-line-fit-edge-leading\u2465"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-valdef-line-fit-edge-leading\u2466"},{"id":"ref-for-valdef-line-fit-edge-leading\u2467"},{"id":"ref-for-valdef-line-fit-edge-leading\u2468"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-valdef-line-fit-edge-leading\u2460\u24ea"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"}],"url":"#valdef-line-fit-edge-leading"}, "valdef-line-fit-edge-text": {"dfnID":"valdef-line-fit-edge-text","dfnText":"text","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-fit-edge-text"},{"id":"ref-for-valdef-line-fit-edge-text\u2460"},{"id":"ref-for-valdef-line-fit-edge-text\u2461"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-valdef-line-fit-edge-text\u2462"}],"title":"6.3. \nText Trimming Metrics: the text-box-edge property"}],"url":"#valdef-line-fit-edge-text"}, "valdef-line-height-length-0": {"dfnID":"valdef-line-height-length-0","dfnText":"<length [0,\u221e]>","external":false,"refSections":[],"url":"#valdef-line-height-length-0"}, "valdef-line-height-normal": {"dfnID":"valdef-line-height-normal","dfnText":"normal","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-height-normal"}],"title":"3.2.2. \nLine Gap Metrics"},{"refs":[{"id":"ref-for-valdef-line-height-normal\u2460"},{"id":"ref-for-valdef-line-height-normal\u2461"},{"id":"ref-for-valdef-line-height-normal\u2462"}],"title":"5.3. \nCalculating the Logical Height Contributions (\u201cLayout Bounds\u201d) of Inline Boxes"},{"refs":[{"id":"ref-for-valdef-line-height-normal\u2463"}],"title":"6.4. \nInline Box Drawing Height: the inline-sizing property"}],"url":"#valdef-line-height-normal"}, "valdef-line-height-number-0": {"dfnID":"valdef-line-height-number-0","dfnText":"<number [0,\u221e]>","external":false,"refSections":[],"url":"#valdef-line-height-number-0"}, "valdef-line-height-percentage-0": {"dfnID":"valdef-line-height-percentage-0","dfnText":"<percentage [0,\u221e]>","external":false,"refSections":[],"url":"#valdef-line-height-percentage-0"}, "valdef-text-box-edge-auto": {"dfnID":"valdef-text-box-edge-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-box-edge-auto"},{"id":"ref-for-valdef-text-box-edge-auto\u2460"}],"title":"6.1. \nShorthand for Text Box Trimming: the text-box property"}],"url":"#valdef-text-box-edge-auto"}, "valdef-text-box-normal": {"dfnID":"valdef-text-box-normal","dfnText":"normal","external":false,"refSections":[],"url":"#valdef-text-box-normal"}, "valdef-text-box-trim-none": {"dfnID":"valdef-text-box-trim-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-box-trim-none"}],"title":"6.1. \nShorthand for Text Box Trimming: the text-box property"}],"url":"#valdef-text-box-trim-none"}, "valdef-text-box-trim-trim-both": {"dfnID":"valdef-text-box-trim-trim-both","dfnText":"trim-both","external":false,"refSections":[],"url":"#valdef-text-box-trim-trim-both"}, "valdef-text-box-trim-trim-end": {"dfnID":"valdef-text-box-trim-trim-end","dfnText":"trim-end","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-box-trim-trim-end"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"}],"url":"#valdef-text-box-trim-trim-end"}, "valdef-text-box-trim-trim-start": {"dfnID":"valdef-text-box-trim-trim-start","dfnText":"trim-start","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-box-trim-trim-start"}],"title":"6.2. \nTrimming Over/Under Text: the text-box-trim property"}],"url":"#valdef-text-box-trim-trim-start"}, "x-height-baseline": {"dfnID":"x-height-baseline","dfnText":"x-height","external":false,"refSections":[{"refs":[{"id":"ref-for-x-height-baseline"}],"title":"3.2. \nBaselines and Metrics"},{"refs":[{"id":"ref-for-x-height-baseline\u2460"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-x-height-baseline\u2461"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-x-height-baseline\u2462"}],"title":"5.2. \nText Edge Metrics: the line-fit-edge property"},{"refs":[{"id":"ref-for-x-height-baseline\u2463"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#x-height-baseline"}, "x-middle-baseline": {"dfnID":"x-middle-baseline","dfnText":"x-middle","external":false,"refSections":[{"refs":[{"id":"ref-for-x-middle-baseline"}],"title":"4.1. \nDominant Baselines: the dominant-baseline property"},{"refs":[{"id":"ref-for-x-middle-baseline\u2460"}],"title":"4.2.2. \nAlignment Baseline Type: the alignment-baseline longhand"},{"refs":[{"id":"ref-for-x-middle-baseline\u2461"}],"title":"\nA.3: Synthesizing Baselines for Atomic Inlines"}],"url":"#x-middle-baseline"}, }; 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://www.w3.org/TR/css-values-4/#length-value": "Expands to: advance measure | cap | ch | cm | dvb | dvh | dvi | dvmax | dvmin | dvw | em | ex | ic | in | lh | lvb | lvh | lvi | lvmax | lvmin | lvw | mm | pc | pt | px | rcap | rch | rem | rex | ric | rlh | svb | svh | svi | svmax | svmin | svw | vb | vh | vi | vmax | vmin | vw", }; 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-ref-hints */ "use strict"; { let refsData = { "#aligned-subtree": {"displayText":"aligned subtree","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"aligned subtree","type":"dfn","url":"#aligned-subtree"}, "#alignment-baseline": {"displayText":"alignment baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"alignment baseline","type":"dfn","url":"#alignment-baseline"}, "#alphabetic-baseline": {"displayText":"alphabetic","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"alphabetic","type":"dfn","url":"#alphabetic-baseline"}, "#ascent-metric": {"displayText":"ascent","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"ascent","type":"dfn","url":"#ascent-metric"}, "#atomic-initial-letter": {"displayText":"atomic initial letter","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"atomic initial letter","type":"dfn","url":"#atomic-initial-letter"}, "#baseline": {"displayText":"baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"baseline","type":"dfn","url":"#baseline"}, "#baseline-alignment-preference": {"displayText":"baseline alignment preference","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"baseline alignment preference","type":"dfn","url":"#baseline-alignment-preference"}, "#baseline-set": {"displayText":"baseline set","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"baseline set","type":"dfn","url":"#baseline-set"}, "#baseline-table": {"displayText":"baseline table","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"baseline table","type":"dfn","url":"#baseline-table"}, "#cap-height-baseline": {"displayText":"cap-height baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"cap-height baseline","type":"dfn","url":"#cap-height-baseline"}, "#central-baseline": {"displayText":"central baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"central baseline","type":"dfn","url":"#central-baseline"}, "#descent-metric": {"displayText":"descent","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"descent","type":"dfn","url":"#descent-metric"}, "#dominant-baseline": {"displayText":"dominant baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"dominant baseline","type":"dfn","url":"#dominant-baseline"}, "#dropped-initial": {"displayText":"dropped initial","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"dropped initial","type":"dfn","url":"#dropped-initial"}, "#em-over-baseline": {"displayText":"em-over","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"em-over","type":"dfn","url":"#em-over-baseline"}, "#em-under-baseline": {"displayText":"em-under","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"em-under","type":"dfn","url":"#em-under-baseline"}, "#half-leading": {"displayText":"half-leading","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"half-leading","type":"dfn","url":"#half-leading"}, "#hanging-baseline": {"displayText":"hanging baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"hanging baseline","type":"dfn","url":"#hanging-baseline"}, "#ideographic-ink-over-baseline": {"displayText":"ideographic-ink-over baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"ideographic-ink-over baseline","type":"dfn","url":"#ideographic-ink-over-baseline"}, "#ideographic-ink-under-baseline": {"displayText":"ideographic-ink-under baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"ideographic-ink-under baseline","type":"dfn","url":"#ideographic-ink-under-baseline"}, "#ideographic-over-baseline": {"displayText":"ideographic-over","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"ideographic-over","type":"dfn","url":"#ideographic-over-baseline"}, "#ideographic-under-baseline": {"displayText":"ideographic-under","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"ideographic-under","type":"dfn","url":"#ideographic-under-baseline"}, "#initial-letter": {"displayText":"initial letter box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"initial letter box","type":"dfn","url":"#initial-letter"}, "#initial-letter-initial-letter-sink": {"displayText":"initial letter sink","export":true,"for_":["initial-letter"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"initial letter sink","type":"dfn","url":"#initial-letter-initial-letter-sink"}, "#initial-letter-initial-letter-size": {"displayText":"initial letter size","export":true,"for_":["initial-letter"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"initial letter size","type":"dfn","url":"#initial-letter-initial-letter-size"}, "#inline-formatting-context": {"displayText":"inline formatting context","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"inline formatting context","type":"dfn","url":"#inline-formatting-context"}, "#inline-initial-letter": {"displayText":"inline initial letter","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"inline initial letter","type":"dfn","url":"#inline-initial-letter"}, "#inline-layout": {"displayText":"inline layout","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"inline layout","type":"dfn","url":"#inline-layout"}, "#layout-bounds": {"displayText":"layout bounds","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"layout bounds","type":"dfn","url":"#layout-bounds"}, "#leading": {"displayText":"leading","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"leading","type":"dfn","url":"#leading"}, "#line-box": {"displayText":"line box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"line box","type":"dfn","url":"#line-box"}, "#line-gap-metric": {"displayText":"line gap metric","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"line gap metric","type":"dfn","url":"#line-gap-metric"}, "#line-relative-shift-values": {"displayText":"line-relative values","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"line-relative values","type":"dfn","url":"#line-relative-shift-values"}, "#math-baseline": {"displayText":"math baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"math baseline","type":"dfn","url":"#math-baseline"}, "#originating-line": {"displayText":"originate","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"originate","type":"dfn","url":"#originating-line"}, "#phantom-line-box": {"displayText":"phantom line box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"phantom line box","type":"dfn","url":"#phantom-line-box"}, "#post-alignment-shift": {"displayText":"post-alignment shift","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"post-alignment shift","type":"dfn","url":"#post-alignment-shift"}, "#preferred-line-height": {"displayText":"preferred line height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"preferred line height","type":"dfn","url":"#preferred-line-height"}, "#propdef-alignment-baseline": {"displayText":"alignment-baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"alignment-baseline","type":"property","url":"#propdef-alignment-baseline"}, "#propdef-baseline-shift": {"displayText":"baseline-shift","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"baseline-shift","type":"property","url":"#propdef-baseline-shift"}, "#propdef-baseline-source": {"displayText":"baseline-source","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"baseline-source","type":"property","url":"#propdef-baseline-source"}, "#propdef-dominant-baseline": {"displayText":"dominant-baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"dominant-baseline","type":"property","url":"#propdef-dominant-baseline"}, "#propdef-initial-letter": {"displayText":"initial-letter","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"initial-letter","type":"property","url":"#propdef-initial-letter"}, "#propdef-initial-letter-align": {"displayText":"initial-letter-align","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"initial-letter-align","type":"property","url":"#propdef-initial-letter-align"}, "#propdef-initial-letter-wrap": {"displayText":"initial-letter-wrap","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"initial-letter-wrap","type":"property","url":"#propdef-initial-letter-wrap"}, "#propdef-inline-sizing": {"displayText":"inline-sizing","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"inline-sizing","type":"property","url":"#propdef-inline-sizing"}, "#propdef-line-fit-edge": {"displayText":"line-fit-edge","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"line-fit-edge","type":"property","url":"#propdef-line-fit-edge"}, "#propdef-line-height": {"displayText":"line-height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"line-height","type":"property","url":"#propdef-line-height"}, "#propdef-text-box": {"displayText":"text-box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"text-box","type":"property","url":"#propdef-text-box"}, "#propdef-text-box-edge": {"displayText":"text-box-edge","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"text-box-edge","type":"property","url":"#propdef-text-box-edge"}, "#propdef-text-box-trim": {"displayText":"text-box-trim","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"text-box-trim","type":"property","url":"#propdef-text-box-trim"}, "#propdef-vertical-align": {"displayText":"vertical-align","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"vertical-align","type":"property","url":"#propdef-vertical-align"}, "#raised-initial": {"displayText":"raised initial","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"raised initial","type":"dfn","url":"#raised-initial"}, "#root-inline-box": {"displayText":"root inline box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"root inline box","type":"dfn","url":"#root-inline-box"}, "#sunken-initial": {"displayText":"sunken initial","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"sunken initial","type":"dfn","url":"#sunken-initial"}, "#text-over-baseline": {"displayText":"text-over baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"text-over baseline","type":"dfn","url":"#text-over-baseline"}, "#text-under-baseline": {"displayText":"text-under baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"text-under baseline","type":"dfn","url":"#text-under-baseline"}, "#typedef-text-edge": {"displayText":"<text-edge>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"<text-edge>","type":"type","url":"#typedef-text-edge"}, "#valdef-alignment-baseline-middle": {"displayText":"middle","export":true,"for_":["alignment-baseline","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"middle","type":"value","url":"#valdef-alignment-baseline-middle"}, "#valdef-alignment-baseline-text-bottom": {"displayText":"text-bottom","export":true,"for_":["alignment-baseline","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"text-bottom","type":"value","url":"#valdef-alignment-baseline-text-bottom"}, "#valdef-alignment-baseline-text-top": {"displayText":"text-top","export":true,"for_":["alignment-baseline","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"text-top","type":"value","url":"#valdef-alignment-baseline-text-top"}, "#valdef-baseline-shift-baseline": {"displayText":"baseline","export":true,"for_":["baseline-shift"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"baseline","type":"value","url":"#valdef-baseline-shift-baseline"}, "#valdef-baseline-shift-bottom": {"displayText":"bottom","export":true,"for_":["baseline-shift","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"bottom","type":"value","url":"#valdef-baseline-shift-bottom"}, "#valdef-baseline-shift-center": {"displayText":"center","export":true,"for_":["baseline-shift","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"center","type":"value","url":"#valdef-baseline-shift-center"}, "#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":"local","text":"sub","type":"value","url":"#valdef-baseline-shift-sub"}, "#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":"local","text":"super","type":"value","url":"#valdef-baseline-shift-super"}, "#valdef-baseline-shift-top": {"displayText":"top","export":true,"for_":["baseline-shift","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"top","type":"value","url":"#valdef-baseline-shift-top"}, "#valdef-baseline-source-auto": {"displayText":"auto","export":true,"for_":["baseline-source","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"auto","type":"value","url":"#valdef-baseline-source-auto"}, "#valdef-baseline-source-first": {"displayText":"first","export":true,"for_":["baseline-source","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"first","type":"value","url":"#valdef-baseline-source-first"}, "#valdef-baseline-source-last": {"displayText":"last","export":true,"for_":["baseline-source","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"last","type":"value","url":"#valdef-baseline-source-last"}, "#valdef-dominant-baseline-alphabetic": {"displayText":"alphabetic","export":true,"for_":["dominant-baseline"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"alphabetic","type":"value","url":"#valdef-dominant-baseline-alphabetic"}, "#valdef-dominant-baseline-auto": {"displayText":"auto","export":true,"for_":["dominant-baseline"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"auto","type":"value","url":"#valdef-dominant-baseline-auto"}, "#valdef-dominant-baseline-central": {"displayText":"central","export":true,"for_":["dominant-baseline"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"central","type":"value","url":"#valdef-dominant-baseline-central"}, "#valdef-initial-letter-align-border-box": {"displayText":"border-box","export":true,"for_":["initial-letter-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"border-box","type":"value","url":"#valdef-initial-letter-align-border-box"}, "#valdef-initial-letter-align-leading": {"displayText":"leading","export":true,"for_":["initial-letter-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"leading","type":"value","url":"#valdef-initial-letter-align-leading"}, "#valdef-initial-letter-drop": {"displayText":"drop","export":true,"for_":["initial-letter"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"drop","type":"value","url":"#valdef-initial-letter-drop"}, "#valdef-initial-letter-normal": {"displayText":"normal","export":true,"for_":["initial-letter"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"normal","type":"value","url":"#valdef-initial-letter-normal"}, "#valdef-initial-letter-raise": {"displayText":"raise","export":true,"for_":["initial-letter"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"raise","type":"value","url":"#valdef-initial-letter-raise"}, "#valdef-initial-letter-wrap-all": {"displayText":"all","export":true,"for_":["initial-letter-wrap"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"all","type":"value","url":"#valdef-initial-letter-wrap-all"}, "#valdef-initial-letter-wrap-first": {"displayText":"first","export":true,"for_":["initial-letter-wrap"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"first","type":"value","url":"#valdef-initial-letter-wrap-first"}, "#valdef-initial-letter-wrap-none": {"displayText":"none","export":true,"for_":["initial-letter-wrap"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"none","type":"value","url":"#valdef-initial-letter-wrap-none"}, "#valdef-inline-sizing-normal": {"displayText":"normal","export":true,"for_":["inline-sizing"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"normal","type":"value","url":"#valdef-inline-sizing-normal"}, "#valdef-line-fit-edge-cap": {"displayText":"cap","export":true,"for_":["<<text-edge>>","line-fit-edge"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"cap","type":"value","url":"#valdef-line-fit-edge-cap"}, "#valdef-line-fit-edge-ex": {"displayText":"ex","export":true,"for_":["<<text-edge>>","line-fit-edge"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"ex","type":"value","url":"#valdef-line-fit-edge-ex"}, "#valdef-line-fit-edge-leading": {"displayText":"leading","export":true,"for_":["<<text-edge>>","line-fit-edge"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"leading","type":"value","url":"#valdef-line-fit-edge-leading"}, "#valdef-line-fit-edge-text": {"displayText":"text","export":true,"for_":["<<text-edge>>","line-fit-edge"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"text","type":"value","url":"#valdef-line-fit-edge-text"}, "#valdef-line-height-normal": {"displayText":"normal","export":true,"for_":["line-height"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"normal","type":"value","url":"#valdef-line-height-normal"}, "#valdef-text-box-edge-auto": {"displayText":"auto","export":true,"for_":["text-box-edge"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"auto","type":"value","url":"#valdef-text-box-edge-auto"}, "#valdef-text-box-trim-none": {"displayText":"none","export":true,"for_":["text-box-trim"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"none","type":"value","url":"#valdef-text-box-trim-none"}, "#valdef-text-box-trim-trim-end": {"displayText":"trim-end","export":true,"for_":["text-box-trim"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"trim-end","type":"value","url":"#valdef-text-box-trim-trim-end"}, "#valdef-text-box-trim-trim-start": {"displayText":"trim-start","export":true,"for_":["text-box-trim"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"trim-start","type":"value","url":"#valdef-text-box-trim-trim-start"}, "#x-height-baseline": {"displayText":"x-height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"x-height","type":"dfn","url":"#x-height-baseline"}, "#x-middle-baseline": {"displayText":"x-middle baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"local","text":"x-middle baseline","type":"dfn","url":"#x-middle-baseline"}, "https://drafts.csswg.org/css-cascade-5/#css-inheritance": {"displayText":"inherit","export":true,"for_":["CSS"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"inherit","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#css-inheritance"}, "https://drafts.csswg.org/css2/#propdef-clear": {"displayText":"clear","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"clear","type":"property","url":"https://drafts.csswg.org/css2/#propdef-clear"}, "https://drafts.csswg.org/css2/#propdef-float": {"displayText":"float","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"float","type":"property","url":"https://drafts.csswg.org/css2/#propdef-float"}, "https://svgwg.org/svg2-draft/text.html#TermCurrentTextPosition": {"displayText":"current text position","export":false,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"current","text":"current text position","type":"dfn","url":"https://svgwg.org/svg2-draft/text.html#TermCurrentTextPosition"}, "https://www.w3.org/TR/CSS21/box.html#propdef-margin": {"displayText":"margin","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"margin","type":"property","url":"https://www.w3.org/TR/CSS21/box.html#propdef-margin"}, "https://www.w3.org/TR/CSS21/box.html#x10": {"displayText":"content box","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"content box","type":"dfn","url":"https://www.w3.org/TR/CSS21/box.html#x10"}, "https://www.w3.org/TR/CSS21/cascade.html#computed-value": {"displayText":"computed value","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"computed value","type":"dfn","url":"https://www.w3.org/TR/CSS21/cascade.html#computed-value"}, "https://www.w3.org/TR/CSS21/cascade.html#specified-value": {"displayText":"specified value","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"specified value","type":"dfn","url":"https://www.w3.org/TR/CSS21/cascade.html#specified-value"}, "https://www.w3.org/TR/CSS21/cascade.html#used-value": {"displayText":"used value","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"used value","type":"dfn","url":"https://www.w3.org/TR/CSS21/cascade.html#used-value"}, "https://www.w3.org/TR/CSS21/cascade.html#x1": {"displayText":"initial value","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"initial value","type":"dfn","url":"https://www.w3.org/TR/CSS21/cascade.html#x1"}, "https://www.w3.org/TR/CSS21/fonts.html#propdef-font-size": {"displayText":"font-size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"font-size","type":"property","url":"https://www.w3.org/TR/CSS21/fonts.html#propdef-font-size"}, "https://www.w3.org/TR/CSS21/page.html#propdef-widows": {"displayText":"widows","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"widows","type":"property","url":"https://www.w3.org/TR/CSS21/page.html#propdef-widows"}, "https://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing": {"displayText":"letter-spacing","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"letter-spacing","type":"property","url":"https://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing"}, "https://www.w3.org/TR/CSS21/text.html#propdef-text-indent": {"displayText":"text-indent","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"text-indent","type":"property","url":"https://www.w3.org/TR/CSS21/text.html#propdef-text-indent"}, "https://www.w3.org/TR/CSS21/text.html#propdef-word-spacing": {"displayText":"word-spacing","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"word-spacing","type":"property","url":"https://www.w3.org/TR/CSS21/text.html#propdef-word-spacing"}, "https://www.w3.org/TR/CSS21/ui.html#propdef-outline": {"displayText":"outline","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"outline","type":"property","url":"https://www.w3.org/TR/CSS21/ui.html#propdef-outline"}, "https://www.w3.org/TR/CSS21/visuren.html#propdef-position": {"displayText":"position","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"position","type":"property","url":"https://www.w3.org/TR/CSS21/visuren.html#propdef-position"}, "https://www.w3.org/TR/CSS21/visuren.html#propdef-z-index": {"displayText":"z-index","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"z-index","type":"property","url":"https://www.w3.org/TR/CSS21/visuren.html#propdef-z-index"}, "https://www.w3.org/TR/SVG2/text.html#TermTextContentElement": {"displayText":"text content element","export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"text content element","type":"dfn","url":"https://www.w3.org/TR/SVG2/text.html#TermTextContentElement"}, "https://www.w3.org/TR/css-align-3/#baseline-alignment": {"displayText":"baseline alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"baseline alignment","type":"dfn","url":"https://www.w3.org/TR/css-align-3/#baseline-alignment"}, "https://www.w3.org/TR/css-align-3/#first-baseline-alignment": {"displayText":"first-baseline alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"first-baseline alignment","type":"dfn","url":"https://www.w3.org/TR/css-align-3/#first-baseline-alignment"}, "https://www.w3.org/TR/css-align-3/#first-baseline-set": {"displayText":"first baseline set","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"first baseline set","type":"dfn","url":"https://www.w3.org/TR/css-align-3/#first-baseline-set"}, "https://www.w3.org/TR/css-align-3/#last-baseline-alignment": {"displayText":"last-baseline alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"last-baseline alignment","type":"dfn","url":"https://www.w3.org/TR/css-align-3/#last-baseline-alignment"}, "https://www.w3.org/TR/css-align-3/#last-baseline-set": {"displayText":"last baseline set","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"last baseline set","type":"dfn","url":"https://www.w3.org/TR/css-align-3/#last-baseline-set"}, "https://www.w3.org/TR/css-align-3/#propdef-align-content": {"displayText":"align-content","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"align-content","type":"property","url":"https://www.w3.org/TR/css-align-3/#propdef-align-content"}, "https://www.w3.org/TR/css-align-3/#propdef-justify-self": {"displayText":"justify-self","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"justify-self","type":"property","url":"https://www.w3.org/TR/css-align-3/#propdef-justify-self"}, "https://www.w3.org/TR/css-align-3/#shared-alignment-context": {"displayText":"alignment context","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"alignment context","type":"dfn","url":"https://www.w3.org/TR/css-align-3/#shared-alignment-context"}, "https://www.w3.org/TR/css-align-3/#synthesize-baseline": {"displayText":"synthesize baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"synthesize baseline","type":"dfn","url":"https://www.w3.org/TR/css-align-3/#synthesize-baseline"}, "https://www.w3.org/TR/css-align-3/#valdef-justify-content-normal": {"displayText":"normal","export":true,"for_":["justify-content","align-content"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"normal","type":"value","url":"https://www.w3.org/TR/css-align-3/#valdef-justify-content-normal"}, "https://www.w3.org/TR/css-align-3/#valdef-self-position-center": {"displayText":"center","export":true,"for_":["<self-position>","<content-position>","justify-self","align-self","justify-content","align-content"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"center","type":"value","url":"https://www.w3.org/TR/css-align-3/#valdef-self-position-center"}, "https://www.w3.org/TR/css-align-3/#valdef-self-position-end": {"displayText":"end","export":true,"for_":["<self-position>","<content-position>","justify-self","align-self","justify-content","align-content"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"end","type":"value","url":"https://www.w3.org/TR/css-align-3/#valdef-self-position-end"}, "https://www.w3.org/TR/css-align-3/#valdef-self-position-start": {"displayText":"start","export":true,"for_":["<self-position>","<content-position>","justify-self","align-self","justify-content","align-content"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"start","type":"value","url":"https://www.w3.org/TR/css-align-3/#valdef-self-position-start"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow": {"displayText":"box-shadow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"box-shadow","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow"}, "https://www.w3.org/TR/css-box-3/#border-edge": {"displayText":"border edge","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-box","spec":"css-box-3","status":"snapshot","text":"border edge","type":"dfn","url":"https://www.w3.org/TR/css-box-3/#border-edge"}, "https://www.w3.org/TR/css-box-3/#content-edge": {"displayText":"content edge","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-box","spec":"css-box-3","status":"snapshot","text":"content edge","type":"dfn","url":"https://www.w3.org/TR/css-box-3/#content-edge"}, "https://www.w3.org/TR/css-box-3/#margin-box": {"displayText":"margin box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-box","spec":"css-box-3","status":"snapshot","text":"margin box","type":"dfn","url":"https://www.w3.org/TR/css-box-3/#margin-box"}, "https://www.w3.org/TR/css-box-3/#margin-edge": {"displayText":"margin edge","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-box","spec":"css-box-3","status":"snapshot","text":"margin edge","type":"dfn","url":"https://www.w3.org/TR/css-box-3/#margin-edge"}, "https://www.w3.org/TR/css-box-4/#border": {"displayText":"border","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"border","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#border"}, "https://www.w3.org/TR/css-box-4/#box-box-edge": {"displayText":"edge","export":true,"for_":["box"],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"edge","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#box-box-edge"}, "https://www.w3.org/TR/css-box-4/#content-area": {"displayText":"content area","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"content area","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#content-area"}, "https://www.w3.org/TR/css-box-4/#margin": {"displayText":"margin","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"margin","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#margin"}, "https://www.w3.org/TR/css-box-4/#padding": {"displayText":"padding","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"padding","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#padding"}, "https://www.w3.org/TR/css-break-3/#fragment": {"displayText":"fragment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"snapshot","text":"fragment","type":"dfn","url":"https://www.w3.org/TR/css-break-3/#fragment"}, "https://www.w3.org/TR/css-break-3/#monolithic": {"displayText":"monolithic","export":false,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"snapshot","text":"monolithic","type":"dfn","url":"https://www.w3.org/TR/css-break-3/#monolithic"}, "https://www.w3.org/TR/css-break-3/#propdef-orphans": {"displayText":"orphans","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"snapshot","text":"orphans","type":"property","url":"https://www.w3.org/TR/css-break-3/#propdef-orphans"}, "https://www.w3.org/TR/css-break-4/#box-fragment": {"displayText":"box fragment","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"snapshot","text":"box fragment","type":"dfn","url":"https://www.w3.org/TR/css-break-4/#box-fragment"}, "https://www.w3.org/TR/css-break-4/#forced-break": {"displayText":"forced break","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"snapshot","text":"forced break","type":"dfn","url":"https://www.w3.org/TR/css-break-4/#forced-break"}, "https://www.w3.org/TR/css-break-4/#fragmentation": {"displayText":"fragmentation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"snapshot","text":"fragmentation","type":"dfn","url":"https://www.w3.org/TR/css-break-4/#fragmentation"}, "https://www.w3.org/TR/css-break-4/#fragmentation-container": {"displayText":"fragmentation container","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"snapshot","text":"fragmentation container","type":"dfn","url":"https://www.w3.org/TR/css-break-4/#fragmentation-container"}, "https://www.w3.org/TR/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":"snapshot","text":"box-decoration-break","type":"property","url":"https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break"}, "https://www.w3.org/TR/css-cascade-5/#longhand": {"displayText":"longhand","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"longhand","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#longhand"}, "https://www.w3.org/TR/css-cascade-5/#shorthand-property": {"displayText":"shorthand","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"shorthand","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#shorthand-property"}, "https://www.w3.org/TR/css-counter-styles-3/#hebrew": {"displayText":"hebrew","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"snapshot","text":"hebrew","type":"value","url":"https://www.w3.org/TR/css-counter-styles-3/#hebrew"}, "https://www.w3.org/TR/css-display-3/#anonymous": {"displayText":"anonymous box","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"anonymous box","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#anonymous"}, "https://www.w3.org/TR/css-display-3/#atomic-inline": {"displayText":"atomic inline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"atomic inline","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#atomic-inline"}, "https://www.w3.org/TR/css-display-3/#block-container": {"displayText":"block container","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"block container","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#block-container"}, "https://www.w3.org/TR/css-display-3/#block-formatting-context": {"displayText":"block formatting context","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"block formatting context","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#block-formatting-context"}, "https://www.w3.org/TR/css-display-3/#box": {"displayText":"box","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"box","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#box"}, "https://www.w3.org/TR/css-display-3/#box-tree": {"displayText":"box tree","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"box tree","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#box-tree"}, "https://www.w3.org/TR/css-display-3/#containing-block": {"displayText":"containing block","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"containing block","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#containing-block"}, "https://www.w3.org/TR/css-display-3/#css-text-sequence": {"displayText":"text sequence","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"text sequence","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#css-text-sequence"}, "https://www.w3.org/TR/css-display-3/#document-order": {"displayText":"document order","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"document order","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#document-order"}, "https://www.w3.org/TR/css-display-3/#formatting-context": {"displayText":"formatting context","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"formatting context","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#formatting-context"}, "https://www.w3.org/TR/css-display-3/#in-flow": {"displayText":"in-flow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"in-flow","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#in-flow"}, "https://www.w3.org/TR/css-display-3/#independent-formatting-context": {"displayText":"independent formatting context","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"independent formatting context","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#independent-formatting-context"}, "https://www.w3.org/TR/css-display-3/#inline-block": {"displayText":"inline block","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"inline block","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#inline-block"}, "https://www.w3.org/TR/css-display-3/#inline-box": {"displayText":"inline box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"inline box","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#inline-box"}, "https://www.w3.org/TR/css-display-3/#inline-level": {"displayText":"inline-level","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"inline-level","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#inline-level"}, "https://www.w3.org/TR/css-display-3/#inline-level-box": {"displayText":"inline-level box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"inline-level box","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#inline-level-box"}, "https://www.w3.org/TR/css-display-3/#out-of-flow": {"displayText":"out-of-flow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"out-of-flow","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#out-of-flow"}, "https://www.w3.org/TR/css-display-3/#propdef-display": {"displayText":"display","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"display","type":"property","url":"https://www.w3.org/TR/css-display-3/#propdef-display"}, "https://www.w3.org/TR/css-display-3/#replaced-element": {"displayText":"replaced element","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"replaced element","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#replaced-element"}, "https://www.w3.org/TR/css-display-3/#valdef-display-block": {"displayText":"block","export":true,"for_":["display","<display-outside>"],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"block","type":"value","url":"https://www.w3.org/TR/css-display-3/#valdef-display-block"}, "https://www.w3.org/TR/css-display-3/#valdef-display-inline-block": {"displayText":"inline-block","export":true,"for_":["display","<display-legacy>"],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"inline-block","type":"value","url":"https://www.w3.org/TR/css-display-3/#valdef-display-inline-block"}, "https://www.w3.org/TR/css-fonts-4/#first-available-font": {"displayText":"first available font","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"first available font","type":"dfn","url":"https://www.w3.org/TR/css-fonts-4/#first-available-font"}, "https://www.w3.org/TR/css-fonts-4/#propdef-font-language-override": {"displayText":"font-language-override","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"font-language-override","type":"property","url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-language-override"}, "https://www.w3.org/TR/css-lists-3/#valdef-list-style-position-inside": {"displayText":"inside","export":true,"for_":["list-style-position"],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"snapshot","text":"inside","type":"value","url":"https://www.w3.org/TR/css-lists-3/#valdef-list-style-position-inside"}, "https://www.w3.org/TR/css-multicol-1/#column-box": {"displayText":"column box","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-multicol","spec":"css-multicol-1","status":"snapshot","text":"column box","type":"dfn","url":"https://www.w3.org/TR/css-multicol-1/#column-box"}, "https://www.w3.org/TR/css-multicol-1/#multi-column-container": {"displayText":"multi-column container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-multicol","spec":"css-multicol-1","status":"snapshot","text":"multi-column container","type":"dfn","url":"https://www.w3.org/TR/css-multicol-1/#multi-column-container"}, "https://www.w3.org/TR/css-multicol-1/#multi-column-layout": {"displayText":"multi-column layout","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-multicol","spec":"css-multicol-1","status":"snapshot","text":"multi-column layout","type":"dfn","url":"https://www.w3.org/TR/css-multicol-1/#multi-column-layout"}, "https://www.w3.org/TR/css-page-floats-3/#float": {"displayText":"float","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page-floats","spec":"css-page-floats-3","status":"snapshot","text":"float","type":"dfn","url":"https://www.w3.org/TR/css-page-floats-3/#float"}, "https://www.w3.org/TR/css-position-3/#absolute-position": {"displayText":"absolutely positioned box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"snapshot","text":"absolutely positioned box","type":"dfn","url":"https://www.w3.org/TR/css-position-3/#absolute-position"}, "https://www.w3.org/TR/css-position-3/#positioned-box": {"displayText":"positioned box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"snapshot","text":"positioned box","type":"dfn","url":"https://www.w3.org/TR/css-position-3/#positioned-box"}, "https://www.w3.org/TR/css-position-3/#valdef-position-static": {"displayText":"static","export":true,"for_":["position"],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"snapshot","text":"static","type":"value","url":"https://www.w3.org/TR/css-position-3/#valdef-position-static"}, "https://www.w3.org/TR/css-pseudo-4/#first-formatted-line": {"displayText":"first formatted line","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"snapshot","text":"first formatted line","type":"dfn","url":"https://www.w3.org/TR/css-pseudo-4/#first-formatted-line"}, "https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter": {"displayText":"::first-letter","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"snapshot","text":"::first-letter","type":"selector","url":"https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter"}, "https://www.w3.org/TR/css-pseudo-4/#selectordef-first-line": {"displayText":"::first-line","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"snapshot","text":"::first-line","type":"selector","url":"https://www.w3.org/TR/css-pseudo-4/#selectordef-first-line"}, "https://www.w3.org/TR/css-pseudo-4/#selectordef-marker": {"displayText":"::marker","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"snapshot","text":"::marker","type":"selector","url":"https://www.w3.org/TR/css-pseudo-4/#selectordef-marker"}, "https://www.w3.org/TR/css-ruby-1/#internal-ruby-boxes": {"displayText":"internal ruby boxes","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-ruby","spec":"css-ruby-1","status":"snapshot","text":"internal ruby boxes","type":"dfn","url":"https://www.w3.org/TR/css-ruby-1/#internal-ruby-boxes"}, "https://www.w3.org/TR/css-ruby-1/#ruby-annotation-box": {"displayText":"ruby annotation","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-ruby","spec":"css-ruby-1","status":"snapshot","text":"ruby annotation","type":"dfn","url":"https://www.w3.org/TR/css-ruby-1/#ruby-annotation-box"}, "https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box": {"displayText":"ruby base container box","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-ruby","spec":"css-ruby-1","status":"snapshot","text":"ruby base container box","type":"dfn","url":"https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box"}, "https://www.w3.org/TR/css-ruby-1/#ruby-container": {"displayText":"ruby container box","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-ruby","spec":"css-ruby-1","status":"snapshot","text":"ruby container box","type":"dfn","url":"https://www.w3.org/TR/css-ruby-1/#ruby-container"}, "https://www.w3.org/TR/css-shapes-1/#propdef-shape-margin": {"displayText":"shape-margin","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-shapes","spec":"css-shapes-1","status":"snapshot","text":"shape-margin","type":"property","url":"https://www.w3.org/TR/css-shapes-1/#propdef-shape-margin"}, "https://www.w3.org/TR/css-shapes-1/#propdef-shape-outside": {"displayText":"shape-outside","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-shapes","spec":"css-shapes-1","status":"snapshot","text":"shape-outside","type":"property","url":"https://www.w3.org/TR/css-shapes-1/#propdef-shape-outside"}, "https://www.w3.org/TR/css-shapes-1/#valdef-shape-outside-none": {"displayText":"none","export":true,"for_":["shape-outside"],"level":"1","normative":true,"shortname":"css-shapes","spec":"css-shapes-1","status":"snapshot","text":"none","type":"value","url":"https://www.w3.org/TR/css-shapes-1/#valdef-shape-outside-none"}, "https://www.w3.org/TR/css-sizing-3/#automatic-size": {"displayText":"automatic size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"automatic size","type":"dfn","url":"https://www.w3.org/TR/css-sizing-3/#automatic-size"}, "https://www.w3.org/TR/css-sizing-3/#definite": {"displayText":"definite","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"definite","type":"dfn","url":"https://www.w3.org/TR/css-sizing-3/#definite"}, "https://www.w3.org/TR/css-sizing-3/#height": {"displayText":"preferred height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"preferred height","type":"dfn","url":"https://www.w3.org/TR/css-sizing-3/#height"}, "https://www.w3.org/TR/css-sizing-3/#inner-size": {"displayText":"inner size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"inner size","type":"dfn","url":"https://www.w3.org/TR/css-sizing-3/#inner-size"}, "https://www.w3.org/TR/css-sizing-3/#max-width": {"displayText":"max size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"max size","type":"dfn","url":"https://www.w3.org/TR/css-sizing-3/#max-width"}, "https://www.w3.org/TR/css-sizing-3/#min-width": {"displayText":"min size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"min size","type":"dfn","url":"https://www.w3.org/TR/css-sizing-3/#min-width"}, "https://www.w3.org/TR/css-sizing-3/#outer-size": {"displayText":"outer size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"outer size","type":"dfn","url":"https://www.w3.org/TR/css-sizing-3/#outer-size"}, "https://www.w3.org/TR/css-sizing-3/#propdef-box-sizing": {"displayText":"box-sizing","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"box-sizing","type":"property","url":"https://www.w3.org/TR/css-sizing-3/#propdef-box-sizing"}, "https://www.w3.org/TR/css-sizing-3/#propdef-height": {"displayText":"height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"height","type":"property","url":"https://www.w3.org/TR/css-sizing-3/#propdef-height"}, "https://www.w3.org/TR/css-sizing-3/#sizing-property": {"displayText":"sizing property","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"sizing property","type":"dfn","url":"https://www.w3.org/TR/css-sizing-3/#sizing-property"}, "https://www.w3.org/TR/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":"snapshot","text":"auto","type":"value","url":"https://www.w3.org/TR/css-sizing-3/#valdef-width-auto"}, "https://www.w3.org/TR/css-sizing-3/#width": {"displayText":"preferred width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"preferred width","type":"dfn","url":"https://www.w3.org/TR/css-sizing-3/#width"}, "https://www.w3.org/TR/css-text-3/#forced-line-break": {"displayText":"forced line break","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text","spec":"css-text-3","status":"snapshot","text":"forced line break","type":"dfn","url":"https://www.w3.org/TR/css-text-3/#forced-line-break"}, "https://www.w3.org/TR/css-text-3/#hang": {"displayText":"hang","export":false,"for_":[],"level":"3","normative":true,"shortname":"css-text","spec":"css-text-3","status":"snapshot","text":"hang","type":"dfn","url":"https://www.w3.org/TR/css-text-3/#hang"}, "https://www.w3.org/TR/css-text-3/#propdef-text-align": {"displayText":"text-align","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text","spec":"css-text-3","status":"snapshot","text":"text-align","type":"property","url":"https://www.w3.org/TR/css-text-3/#propdef-text-align"}, "https://www.w3.org/TR/css-text-4/#collapsible-white-space": {"displayText":"collapsible white space","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"collapsible white space","type":"dfn","url":"https://www.w3.org/TR/css-text-4/#collapsible-white-space"}, "https://www.w3.org/TR/css-text-4/#content-language": {"displayText":"content language","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"content language","type":"dfn","url":"https://www.w3.org/TR/css-text-4/#content-language"}, "https://www.w3.org/TR/css-text-4/#forced-line-break": {"displayText":"forced line break","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"forced line break","type":"dfn","url":"https://www.w3.org/TR/css-text-4/#forced-line-break"}, "https://www.w3.org/TR/css-text-4/#justification-opportunity": {"displayText":"justification opportunity","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"justification opportunity","type":"dfn","url":"https://www.w3.org/TR/css-text-4/#justification-opportunity"}, "https://www.w3.org/TR/css-text-4/#preserved-white-space": {"displayText":"preserved white space","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"preserved white space","type":"dfn","url":"https://www.w3.org/TR/css-text-4/#preserved-white-space"}, "https://www.w3.org/TR/css-text-4/#propdef-hanging-punctuation": {"displayText":"hanging-punctuation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"hanging-punctuation","type":"property","url":"https://www.w3.org/TR/css-text-4/#propdef-hanging-punctuation"}, "https://www.w3.org/TR/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":"snapshot","text":"typographic character unit","type":"dfn","url":"https://www.w3.org/TR/css-text-4/#typographic-character-unit"}, "https://www.w3.org/TR/css-text-4/#white-space": {"displayText":"document white space","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"document white space","type":"dfn","url":"https://www.w3.org/TR/css-text-4/#white-space"}, "https://www.w3.org/TR/css-text-4/#word-separator": {"displayText":"word separator","export":false,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"word separator","type":"dfn","url":"https://www.w3.org/TR/css-text-4/#word-separator"}, "https://www.w3.org/TR/css-values-4/#comb-all": {"displayText":"&&","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"&&","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-all"}, "https://www.w3.org/TR/css-values-4/#comb-any": {"displayText":"||","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"||","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-any"}, "https://www.w3.org/TR/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"|","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-one"}, "https://www.w3.org/TR/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":"snapshot","text":"css-wide keywords","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#css-wide-keywords"}, "https://www.w3.org/TR/css-values-4/#em": {"displayText":"em","export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"em","type":"value","url":"https://www.w3.org/TR/css-values-4/#em"}, "https://www.w3.org/TR/css-values-4/#integer-value": {"displayText":"<integer>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<integer>","type":"type","url":"https://www.w3.org/TR/css-values-4/#integer-value"}, "https://www.w3.org/TR/css-values-4/#length-value": {"displayText":"<length>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<length>","type":"type","url":"https://www.w3.org/TR/css-values-4/#length-value"}, "https://www.w3.org/TR/css-values-4/#mult-opt": {"displayText":"?","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"?","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-opt"}, "https://www.w3.org/TR/css-values-4/#mult-req": {"displayText":"!","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"!","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-req"}, "https://www.w3.org/TR/css-values-4/#number-value": {"displayText":"<number>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<number>","type":"type","url":"https://www.w3.org/TR/css-values-4/#number-value"}, "https://www.w3.org/TR/css-values-4/#percentage-value": {"displayText":"<percentage>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<percentage>","type":"type","url":"https://www.w3.org/TR/css-values-4/#percentage-value"}, "https://www.w3.org/TR/css-values-4/#typedef-length-percentage": {"displayText":"<length-percentage>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<length-percentage>","type":"type","url":"https://www.w3.org/TR/css-values-4/#typedef-length-percentage"}, "https://www.w3.org/TR/css-writing-modes-4/#block-axis": {"displayText":"block-axis","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"block-axis","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#block-axis"}, "https://www.w3.org/TR/css-writing-modes-4/#block-end": {"displayText":"block-end","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"block-end","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#block-end"}, "https://www.w3.org/TR/css-writing-modes-4/#block-flow-direction": {"displayText":"block flow direction","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"block flow direction","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#block-flow-direction"}, "https://www.w3.org/TR/css-writing-modes-4/#block-size": {"displayText":"block size","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"block size","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#block-size"}, "https://www.w3.org/TR/css-writing-modes-4/#block-start": {"displayText":"block-start","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"block-start","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#block-start"}, "https://www.w3.org/TR/css-writing-modes-4/#horizontal-writing-mode": {"displayText":"horizontal writing mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"horizontal writing mode","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#horizontal-writing-mode"}, "https://www.w3.org/TR/css-writing-modes-4/#inline-axis": {"displayText":"inline axis","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"inline axis","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#inline-axis"}, "https://www.w3.org/TR/css-writing-modes-4/#inline-end": {"displayText":"inline-end","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"inline-end","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#inline-end"}, "https://www.w3.org/TR/css-writing-modes-4/#inline-size": {"displayText":"inline size","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"inline size","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#inline-size"}, "https://www.w3.org/TR/css-writing-modes-4/#inline-start": {"displayText":"inline-start","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"inline-start","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#inline-start"}, "https://www.w3.org/TR/css-writing-modes-4/#line-left": {"displayText":"line-left","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"line-left","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#line-left"}, "https://www.w3.org/TR/css-writing-modes-4/#line-over": {"displayText":"line-over","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"line-over","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#line-over"}, "https://www.w3.org/TR/css-writing-modes-4/#line-right": {"displayText":"line-right","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"line-right","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#line-right"}, "https://www.w3.org/TR/css-writing-modes-4/#line-under": {"displayText":"line-under","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"line-under","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#line-under"}, "https://www.w3.org/TR/css-writing-modes-4/#logical-height": {"displayText":"logical height","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"logical height","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#logical-height"}, "https://www.w3.org/TR/css-writing-modes-4/#logical-width": {"displayText":"logical width","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"logical width","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#logical-width"}, "https://www.w3.org/TR/css-writing-modes-4/#over": {"displayText":"over","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"over","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#over"}, "https://www.w3.org/TR/css-writing-modes-4/#propdef-text-orientation": {"displayText":"text-orientation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"text-orientation","type":"property","url":"https://www.w3.org/TR/css-writing-modes-4/#propdef-text-orientation"}, "https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode": {"displayText":"writing-mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"writing-mode","type":"property","url":"https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode"}, "https://www.w3.org/TR/css-writing-modes-4/#start": {"displayText":"start","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"start","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#start"}, "https://www.w3.org/TR/css-writing-modes-4/#typographic-mode": {"displayText":"typographic mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"typographic mode","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#typographic-mode"}, "https://www.w3.org/TR/css-writing-modes-4/#under": {"displayText":"under","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"under","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#under"}, "https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-mixed": {"displayText":"mixed","export":true,"for_":["text-orientation"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"mixed","type":"value","url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-mixed"}, "https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-sideways": {"displayText":"sideways","export":true,"for_":["text-orientation"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"sideways","type":"value","url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-sideways"}, "https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-upright": {"displayText":"upright","export":true,"for_":["text-orientation"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"upright","type":"value","url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-upright"}, "https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-vertical-lr": {"displayText":"vertical-lr","export":true,"for_":["writing-mode"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"vertical-lr","type":"value","url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-vertical-lr"}, "https://www.w3.org/TR/css-writing-modes-4/#vertical-writing-mode": {"displayText":"vertical writing mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"vertical writing mode","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#vertical-writing-mode"}, }; 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>