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 Text Decoration Module Level 3</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 742f3d674, updated Mon Nov 4 14:56:54 2024 -0800" name="generator"> <link href="https://www.w3.org/TR/css-text-decor-3/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="dbde8fabad3b9e7fb3b25413cb4293c8e9d527d8" name="revision"> <meta content="dark light" name="color-scheme"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-mdn-anno */ :root { --mdn-bg: #EEE; --mdn-shadow: #999; --mdn-nosupport-text: #ccc; --mdn-pass: green; --mdn-fail: red; } @media (prefers-color-scheme: dark) { :root { --mdn-bg: #222; --mdn-shadow: #444; --mdn-nosupport-text: #666; --mdn-pass: #690; --mdn-fail: #d22; } } .mdn-anno { background: var(--mdn-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--mdn-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: 0.2em; position: absolute; right: 0.3em; top: auto; white-space: nowrap; word-wrap: normal; z-index: 8; } .mdn-anno.unpositioned { display: none; } .mdn-anno.overlapping-main { opacity: .2; transition: opacity .1s; } .mdn-anno[open] { opacity: 1; z-index: 9; min-width: 9em; } .mdn-anno:hover { opacity: 1; outline: var(--text, black) 1px solid; } .mdn-anno > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .mdn-anno > summary > .less-than-two-engines-flag { color: var(--mdn-fail); padding-right: 2px; } .mdn-anno > summary > .all-engines-flag { color: var(--mdn-pass); padding-right: 2px; } .mdn-anno > summary > span { color: #fff; background-color: #000; font-weight: normal; font-family: zillaslab, Palatino, "Palatino Linotype", serif; padding: 2px 3px 0px 3px; line-height: 1.3em; vertical-align: top; } .mdn-anno > .feature { margin-top: 20px; } .mdn-anno > .feature:not(:first-of-type) { border-top: 1px solid #999; margin-top: 6px; padding-top: 2px; } .mdn-anno > .feature > .less-than-two-engines-text { color: var(--mdn-fail); } .mdn-anno > .feature > .all-engines-text { color: var(--mdn-pass); } .mdn-anno > .feature > p { font-size: .75em; margin-top: 6px; margin-bottom: 0; } .mdn-anno > .feature > p + p { margin-top: 3px; } .mdn-anno > .feature > .support { display: block; font-size: 0.6em; margin: 0; padding: 0; margin-top: 2px; } .mdn-anno > .feature > .support + div { padding-top: 0.5em; } .mdn-anno > .feature > .support > hr { display: block; border: none; border-top: 1px dotted #999; padding: 3px 0px 0px 0px; margin: 2px 3px 0px 3px; } .mdn-anno > .feature > .support > hr::before { content: ""; } .mdn-anno > .feature > .support > span { padding: 0.2em 0; display: block; display: table; } .mdn-anno > .feature > .support > span.no { color: var(--mdn-nosupport-text); filter: grayscale(100%); } .mdn-anno > .feature > .support > span.no::before { opacity: 0.5; } .mdn-anno > .feature > .support > span:first-of-type { padding-top: 0.5em; } .mdn-anno > .feature > .support > span > span { padding: 0 0.5em; display: table-cell; } .mdn-anno > .feature > .support > span > span:first-child { width: 100%; } .mdn-anno > .feature > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .mdn-anno > .feature > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .mdn-anno > .feature > .support > .chrome_android::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .firefox_android::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .edge_blink::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .mdn-anno > .feature > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); } .mdn-anno > .feature > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .mdn-anno > .feature > .support > .safari_ios::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .mdn-anno > .feature > .support > .nodejs::before { background-image: url(https://nodejs.org/static/images/favicons/favicon.ico); } .mdn-anno > .feature > .support > .opera_android::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .mdn-anno > .feature > .support > .samsunginternet_android::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .mdn-anno > .feature > .support > .webview_android::before { background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); } .name-slug-mismatch { color: red; } .caniuse-status:hover { z-index: 9; } /* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */; .h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { right: -6.7em; } .h-entry p + .mdn-anno { margin-top: 0; } h2 + .mdn-anno.after { margin: -48px 0 0 0; } h3 + .mdn-anno.after { margin: -46px 0 0 0; } h4 + .mdn-anno.after { margin: -42px 0 0 0; } h5 + .mdn-anno.after { margin: -40px 0 0 0; } h6 + .mdn-anno.after { margin: -40px 0 0 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSS Text Decoration Module Level 3</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2024-01-24">24 January 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://drafts.csswg.org/css-text-decor-3/">https://drafts.csswg.org/css-text-decor-3/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-text-decor-3/">https://www.w3.org/TR/css-text-decor-3/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2018/CR-css-text-decor-3-20180703/" rel="prev">https://www.w3.org/TR/2018/CR-css-text-decor-3-20180703/</a> <dd><a href="https://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/" rel="prev">https://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/</a> <dd><a href="https://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/" rel="prev">https://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/</a> <dd><a href="https://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/" rel="prev">https://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/</a> <dt>Implementation Report: <dd><a href="https://wpt.fyi/results/css/css-text-decor">https://wpt.fyi/results/css/css-text-decor</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-text-decor-3">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple) <dd class="editor p-author h-card vcard" data-editor-id="45369"><a class="p-name fn u-email email" href="mailto:kojiishi@gmail.com">Koji Ishii</a> (Google) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-text-decor-3/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 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> This module contains the features of CSS relating to text decoration, such as underlines, text shadows, and emphasis marks. <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-text-decor” in the title, like this: “[css-text-decor] …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-text-decor%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. </div> <div data-fill-with="at-risk"> The following features are at-risk, and may be dropped during the CR period: <ul> <li>The ability to place both emphasis marks and ruby on the same base text. </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> <li><a href="#terms">1.3 Terminology</a> </ol> <li> <a href="#line-decoration">2 Line Decoration: Underline, Overline, and Strike-Through</a> <ol class="toc"> <li><a href="#text-decoration-line-property">2.1 Text Decoration Lines: the text-decoration-line property</a> <li><a href="#text-decoration-style-property">2.2 Text Decoration Style: the text-decoration-style property</a> <li><a href="#text-decoration-color-property">2.3 Text Decoration Color: the text-decoration-color property</a> <li><a href="#text-decoration-property">2.4 Text Decoration Shorthand: the text-decoration property</a> <li><a href="#text-underline-position-property">2.5 Text Underline Position: the text-underline-position property</a> </ol> <li> <a href="#emphasis-marks">3 Emphasis Marks</a> <ol class="toc"> <li><a href="#text-emphasis-style-property">3.1 Emphasis Mark Style: the text-emphasis-style property</a> <li><a href="#text-emphasis-color-property">3.2 Emphasis Mark Color: the text-emphasis-color property</a> <li><a href="#text-emphasis-property">3.3 Emphasis Mark Shorthand: the text-emphasis property</a> <li><a href="#text-emphasis-position-property">3.4 Emphasis Mark Position: the text-emphasis-position property</a> </ol> <li><a href="#text-shadow-property">4 Text Shadows: the text-shadow property</a> <li> <a href="#painting">5 Painting Text Decorations</a> <ol class="toc"> <li><a href="#painting-order">5.1 Painting Order of Text Decorations</a> <li><a href="#overflow">5.2 Overflow of Text Decorations</a> </ol> <li><a href="#acknowledgements"> Appendix A: Acknowledgements</a> <li><a href="#default-stylesheet"> Appendix B: Default UA Stylesheet</a> <li> <a href="#changes"> Appendix C: Changes</a> <ol class="toc"> <li><a href="#changes-2019"> Changes since the August 2019 Candidate Recommendation</a> <li><a href="#changes-2018"> Changes since the July 2018 Candidate Recommendation</a> <li><a href="#changes-2013"> Changes since the August 2013 Candidate Recommendation</a> </ol> <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 subsection is non-normative. This module covers text decoration, i.e. decorating the glyphs of the text once typeset according to font and typographic rules. (See <a data-link-type="biblio" href="#biblio-css-text-3" title="CSS Text Module Level 3">[CSS-TEXT-3]</a> and <a data-link-type="biblio" href="#biblio-css-fonts-3" title="CSS Fonts Module Level 3">[CSS-FONTS-3]</a>.) Such features are traditionally used not only for purely decorative purposes, but also in some cases to show emphasis, for honorifics, and to indicate editorial changes such as insertions, deletions, and misspellings. CSS Levels 1 and 2 only defined very basic <a href="#line-decoration">line decorations</a> (underlines, overlines, and strike-throughs) appropriate to Western typographical traditions. Level 3 of this module adds the ability to change the color, style, position, and continuity of these decorations, and also introduces <a href="#emphasis-marks">emphasis marks</a> (traditionally used in East Asian typography), and <a href="#text-shadow-property">shadows</a> (which were proposed then deferred from Level 2). <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 text-decorating 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> chapter 16. <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://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> as their property value. For readability they have not been repeated explicitly. <h3 class="heading settled" data-level="1.3" id="terms">1.3. Terminology<a class="self-link" href="#terms"></a></h3> The terms <a href="https://www.w3.org/TR/css-text-3/#grapheme-cluster">character</a>, <a href="https://www.w3.org/TR/css-text-3/#letter">letter</a>, and <a href="https://www.w3.org/TR/css-text-3/#content-language">content language</a> as used in this specification are defined in <a data-link-type="biblio" href="#biblio-css-text-3" title="CSS Text Module Level 3">[CSS-TEXT-3]</a>. Other terminology and concepts used in this specification are defined in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> and <a data-link-type="biblio" href="#biblio-css-writing-modes-4" title="CSS Writing Modes Level 4">[CSS-WRITING-MODES-4]</a>. <h2 class="heading settled" data-level="2" id="line-decoration">2. Line Decoration: Underline, Overline, and Strike-Through<a class="self-link" href="#line-decoration"></a></h2> The following properties describe line decorations that are added to the content of an element. When specified on or propagated to an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-box" id="ref-for-inline-box">inline box</a>, that <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box">box</a> becomes a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="decorating-box">decorating box</dfn> for that decoration, applying the decoration to all its <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragment" id="ref-for-fragment">fragments</a>. The decoration is then further propagated to any <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#in-flow" id="ref-for-in-flow">in-flow</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-level" id="ref-for-block-level">block-level</a> boxes that split the inline (see <a href="https://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>). When specified on or propagated to a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container">block container</a> that establishes an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-formatting-context" id="ref-for-inline-formatting-context">inline formatting context</a>, the decorations are propagated to an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#anonymous" id="ref-for-anonymous">anonymous</a> inline box that wraps all the in-flow <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-level" id="ref-for-inline-level">inline-level</a> children of the block container. When specified on or propagated to a <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-container" id="ref-for-ruby-container">ruby container</a>, the decorations are propagated only to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-base-box" id="ref-for-ruby-base-box">ruby base</a>. For all other box types, the decorations are propagated to all in-flow children. Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. They are also not propagated to inline children of inline boxes, although the decoration is applied to such boxes. Underlines, overlines, and line-throughs are drawn only for <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#non-replaced" id="ref-for-non-replaced">non-replaced</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-box" id="ref-for-inline-box①">inline boxes</a>, and are drawn across all text (including white space, letter spacing, and word spacing) except spacing (white space, letter spacing, and word spacing) at the beginning and end of a line. <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#atomic-inline" id="ref-for-atomic-inline">Atomic inlines</a>, such as images and inline blocks, are not decorated. Margins, borders, and padding of the <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box">decorating box</a> are always skipped, however the margins, border, and padding of descendant inline boxes are not. Note that CSS 2.1 required skipping margins, borders, and padding always. In this level, by default only the margins, borders, and padding of the <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box①">decorating box</a> are skipped. In the future CSS2.1 may be updated to match this new default. Also, control over decorating leading/trailing spaces is expected in Level 4, and will be applied by default to the HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/edits.html#the-ins-element" id="ref-for-the-ins-element">ins</a></code> and <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/edits.html#the-del-element" id="ref-for-the-del-element">del</a></code> elements. UAs may interrupt underlines and overlines where the line would cross glyph ink and to some distance to either side of the glyph outline; this behavior is not controllable in this level, but will be further defined in Level 4. Line-throughs must remain continuous, however. <div class="figure"> <img alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline." height="77" src="images/decoration-skip-ink.png" title="Skipping Descenders When Drawing an Underline" width="223"> Skipping Glyph Ink </div> When the UA interrupts underlines or overlines at glyph boundaries, the shape of the line at that boundary should follow the shape of the glyph. <div class="note" role="note"> Note, this specification intentionally does not mandate a particular method for “following the shape” of the glyph so that UAs can take appropriate measures to handle aesthetic and performance considerations. For example, a UA could assume square line endings below a certain size threshold for performance reasons; or use trapezoidal endings to approximate curves, especially on thinner line decorations. In terms of aesthetic considerations, the UA might also consider what happens when the glyph boundary intersects only part of the line thickness or is slanted close to the horizontal—following the curve exactly could result in typographically-awkward wisps of underline. Whether to show the line within enclosed areas of a glyph is yet another consideration. <div class="figure"> <img alt="Take, for example, the word “goal” with an underline striking through the bottom loop of the “g”. Depending on the position and thickness of the underline, we might see the entire thickness of the underline, or only part of it within the “g”. This example shows a masked-out underline in two positions. In the left pair the underline passes through the center of the bowl of the “g”: the full thickness of the underline shows through the center, filling it. In the right pair the underline is slightly lower, and thus the portion of the underline within the “g” can only show a partial thickness." height="206" src="images/skip-ink-wisp.png" title="Wispy Leftovers of a Masked-Out Underline" width="600"> Hiding the portion of the underline within the bowl gives a cleaner look to the type, while the curved ends of the underline outside it suggest the continuity of the underline through the letter by hugging its outer contour. </div> </div> Relatively positioning a descendant moves all text decorations applied to it along with the descendant’s text; it does not affect calculation of the decoration’s initial position on that line. The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-visibility" id="ref-for-propdef-visibility">visibility</a> property, <a class="property css" data-link-type="property" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow">text-shadow</a>, filters, and other graphical transformations likewise also affect all text decorations applied to that box—including decorations propagated from an ancestor box—and do not affect the calculation of their initial positions or thicknesses. (In the case of line decorations drawn over an atomic inline or across the margins/borders/padding of a non-replaced inline box, they are analogously associated with the affected atomic inline / non-replaced inline box rather than with the <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box②">decorating box</a>.) <div class="example" id="example-d6d0ccd7"> <a class="self-link" href="#example-d6d0ccd7"></a> In the following style sheet and document fragment: <pre>blockquote { text-decoration: underline; color: blue; } em { display: block; } cite { color: fuchsia; } </pre> <pre><blockquote> Help, help! I am under a hat! <cite> —GwieF </cite> </blockquote> </pre> ...the underlining for the blockquote element is propagated to an anonymous inline box that surrounds the span element, causing the text "Help, help!" to be blue, with the blue underlining from the anonymous inline underneath it, the color being taken from the blockquote element. The <code>text</code> in the em block is also underlined, as it is in an in-flow block to which the underline is propagated. The final line of text is fuchsia, but the underline underneath it is still the blue underline from the anonymous inline element. <img alt="Sample rendering of the above underline example" height="182" src="images/underline-example.png" width="267"> This diagram shows the boxes involved in the example above. The rounded aqua line represents the anonymous inline element wrapping the inline contents of the paragraph element, the rounded blue line represents the span element, and the orange lines represent the blocks. </div> <div class="example" id="example-f9a1cfbe"> <a class="self-link" href="#example-f9a1cfbe"></a> In the following style sheet and document fragment: <pre>div { color: black; font-size: 48px; text-decoration: underline; text-shadow: blue 0px 50px 0px; } span { font-size: 20px; vertical-align: top; text-shadow: green 0px 100px 0px; } </pre> <pre><div>Help, help! I am under a hat!</div> </pre> ...the <div> is the <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box③">decorating box</a> for its underline (in black), which is rendered uninterrupted through both the <div> and the . Unlike line decorations, however, `text-shadow` is inherited as a property; therefore the green text shadow on the overrides the blue text shadow on the <div>. As a result, when the shadows are painted, the shadow of the <div>’s underline is disjoint across the two elements. <img alt="Sample rendering of the above underline example" height="165" src="images/underline-example-2.png" width="380"> </div> Note: Line decorations are propagated through the box tree, not through inheritance, and thus have no effect on descendants when specified on an element with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display">display: contents</a>. <h3 class="heading settled" data-level="2.1" id="text-decoration-line-property">2.1. Text Decoration Lines: the <a class="property css" data-link-type="property" href="#propdef-text-decoration-line" id="ref-for-propdef-text-decoration-line">text-decoration-line</a> property<a class="self-link" href="#text-decoration-line-property"></a></h3> <table class="def propdef" data-link-for-hint="text-decoration-line"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-decoration-line">text-decoration-line</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> [ underline <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> overline || line-through || blink ] <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no (but see prose, above) <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> Specifies what line decorations, if any, are added to the element. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export id="valdef-text-decoration-line-none">none</dfn> <dd> Neither produces nor inhibits text decoration. <dt><dfn class="dfn-paneled css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export id="valdef-text-decoration-line-underline">underline</dfn> <dd> Each line of text is underlined. <dt><dfn class="dfn-paneled css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export id="valdef-text-decoration-line-overline">overline</dfn> <dd> Each line of text has a line over it (i.e. on the opposite side from an underline). <dt><dfn class="dfn-paneled css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export id="valdef-text-decoration-line-line-through">line-through</dfn> <dd> Each line of text has a line through the middle. <dt><dfn class="dfn-paneled css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export id="valdef-text-decoration-line-blink">blink</dfn> <dd> The text blinks (alternates between visible and invisible). Conforming user agents may simply not blink the text. Note that not blinking the text is one technique to satisfy <a href="https://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>. This value is deprecated in favor of Animations <a data-link-type="biblio" href="#biblio-css-animations-1" title="CSS Animations Level 1">[CSS-ANIMATIONS-1]</a>. </dl> Note: In <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode">vertical writing modes</a>, <a class="property css" data-link-type="property" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position">text-underline-position</a> can cause the underline and overline to switch sides. This allows the position of underlines to key off of language-specific preferences automatically. <h3 class="heading settled" data-level="2.2" id="text-decoration-style-property">2.2. Text Decoration Style: the <a class="property css" data-link-type="property" href="#propdef-text-decoration-style" id="ref-for-propdef-text-decoration-style">text-decoration-style</a> property<a class="self-link" href="#text-decoration-style-property"></a></h3> <table class="def propdef" data-link-for-hint="text-decoration-style"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-decoration-style">text-decoration-style</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">solid <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> double | dotted | dashed | wavy <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>solid <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>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 style of the line(s) drawn for text decoration specified on the element. Values have the same meaning as for the <a href="https://www.w3.org/TR/css-backgrounds-3/#the-border-style">border-style properties</a> <a data-link-type="biblio" href="#biblio-css-backgrounds-3" title="CSS Backgrounds and Borders Module Level 3">[CSS-BACKGROUNDS-3]</a>. <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-style-wavy" id="ref-for-valdef-text-decoration-style-wavy">wavy</a> indicates a wavy line. The style of text decorations must remain the same on all decorations originating from a given element, even if descendant boxes have different specified styles. <h3 class="heading settled" data-level="2.3" id="text-decoration-color-property">2.3. Text Decoration Color: the <a class="property css" data-link-type="property" href="#propdef-text-decoration-color" id="ref-for-propdef-text-decoration-color">text-decoration-color</a> property<a class="self-link" href="#text-decoration-color-property"></a></h3> <table class="def propdef" data-link-for-hint="text-decoration-color"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-decoration-color">text-decoration-color</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://drafts.csswg.org/css-color-5/#typedef-color" id="ref-for-typedef-color"><color></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>currentcolor <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>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>computed color <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 color of text decoration (underlines overlines, and line-throughs) set on the element with <a class="property css" data-link-type="property" href="#propdef-text-decoration-line" id="ref-for-propdef-text-decoration-line①">text-decoration-line</a>. The color of text decorations must remain the same on all decorations originating from a given element, even if descendant boxes have different specified colors. <h3 class="heading settled" data-level="2.4" id="text-decoration-property">2.4. Text Decoration Shorthand: the <a class="property css" data-link-type="property" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration">text-decoration</a> property<a class="self-link" href="#text-decoration-property"></a></h3> <table class="def propdef" data-link-for-hint="text-decoration"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-decoration">text-decoration</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="property" href="#propdef-text-decoration-line" id="ref-for-propdef-text-decoration-line②"><'text-decoration-line'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any③">||</a> <a class="production css" data-link-type="property" href="#propdef-text-decoration-style" id="ref-for-propdef-text-decoration-style①"><'text-decoration-style'></a> || <a class="production css" data-link-type="property" href="#propdef-text-decoration-color" id="ref-for-propdef-text-decoration-color①"><'text-decoration-color'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <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>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <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 property is a shorthand for setting <a class="property css" data-link-type="property" href="#propdef-text-decoration-line" id="ref-for-propdef-text-decoration-line③">text-decoration-line</a>, <a class="property css" data-link-type="property" href="#propdef-text-decoration-color" id="ref-for-propdef-text-decoration-color②">text-decoration-color</a>, and <a class="property css" data-link-type="property" href="#propdef-text-decoration-style" id="ref-for-propdef-text-decoration-style②">text-decoration-style</a> in one declaration. Omitted values are set to their initial values. Note: A <a class="property css" data-link-type="property" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration①">text-decoration</a> declaration that omits both the <a class="property css" data-link-type="property" href="#propdef-text-decoration-color" id="ref-for-propdef-text-decoration-color③">text-decoration-color</a> and <a class="property css" data-link-type="property" href="#propdef-text-decoration-style" id="ref-for-propdef-text-decoration-style③">text-decoration-style</a> values is backwards-compatible with CSS Levels 1 and 2. <div class="example" id="example-4a6e8734"> <a class="self-link" href="#example-4a6e8734"></a> The following example underlines unvisited links with a solid blue underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs. <pre>:link { color: blue; text-decoration: underline; text-decoration: navy dotted underline; /* <a href="https://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ } </pre> </div> Note: The shorthand purposefully omits the <a class="property css" data-link-type="property" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position①">text-underline-position</a> property, which is a language/writing-system–dependent setting that keys off the content, so that it can cascade and inherit independently from the (uninherited) stylistic settings of the <a class="property css" data-link-type="property" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration②">text-decoration</a> shorthand. <h3 class="heading settled" data-level="2.5" id="text-underline-position-property">2.5. Text Underline Position: the <a class="property css" data-link-type="property" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position②">text-underline-position</a> property<a class="self-link" href="#text-underline-position-property"></a></h3> <table class="def propdef" data-link-for-hint="text-underline-position"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-underline-position">text-underline-position</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> [ under <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any⑤">||</a> [ left | right ] ] <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 href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified 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 sets the position of an underline specified on the element. (It does not affect underlines specified by ancestor elements.) If <a class="css" data-link-type="maybe" href="#underline-left" id="ref-for-underline-left">left</a> or <a class="css" data-link-type="maybe" href="#underline-right" id="ref-for-underline-right">right</a> is specified alone, <a class="css" data-link-type="maybe" href="#underline-auto" id="ref-for-underline-auto">auto</a> is also implied. <div class="example" id="example-7303f01e"> <a class="self-link" href="#example-7303f01e"></a> The following example styles modern Chinese, Japanese, and Korean texts with the appropriate underline positions in both horizontal and vertical text: <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; } :root:lang(zh), [lang|=zh] { text-underline-position: under left; } </pre> </div> Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="text-underline-position" data-dfn-type="value" data-export id="underline-auto">auto</dfn> <dd> The user agent may use any algorithm to determine the underline’s position; however it must be placed at or under the alphabetic baseline. Note: It is suggested that the default underline position be close to the alphabetic baseline, unless that would either cross subscripted (or otherwise lowered) text or draw over glyphs from Asian scripts such as Han or Tibetan for which an alphabetic underline is too high: in such cases, shifting the underline lower or aligning to the em box edge as described for <a class="css" data-link-type="maybe" href="#underline-under" id="ref-for-underline-under">under</a> may be more appropriate. <div class="figure"> <img alt="In a typical Latin font, the underline is positioned slightly below the alphabetic baseline, leaving a gap between the line and the bottom of most Latin letters, but crossing through descenders such as the stem of a 'p'." height="61" src="images/underline-position-alphabetic.png" title="text-underline-position: alphabetic" width="231"> A typical “alphabetic” underline is positioned just below the alphabetic baseline </div> <dt><dfn class="dfn-paneled css" data-dfn-for="text-underline-position" data-dfn-type="value" data-export id="underline-under">under</dfn> <dd> The underline is positioned <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#under" id="ref-for-under">under</a> the element’s text content. In this case the underline usually does not cross the descenders. (This is sometimes called “accounting” underline.) This value can be combined with <a class="css" data-link-type="maybe" href="#underline-left" id="ref-for-underline-left①">left</a> or <a class="css" data-link-type="maybe" href="#underline-right" id="ref-for-underline-right①">right</a> if a particular side is preferred in vertical <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode">typographic modes</a>. <div class="figure"> <img alt="In a typical Latin font, the underline is far enough below the text that it does not cross the bottom of a 'g'." height="68" src="images/underline-position-under.png" title="text-underline-position: under" width="405"> <a class="css" data-link-type="propdesc" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position③">text-underline-position: under</a> </div> <div class="example" id="example-95685877"> <a class="self-link" href="#example-95685877"></a> Because <a class="property css" data-link-type="property" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position④">text-underline-position</a> inherits, and is not reset by the <a class="property css" data-link-type="property" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration③">text-decoration</a> shorthand, the following example switches the document to use <a class="css" data-link-type="maybe" href="#underline-under" id="ref-for-underline-under①">under</a> underlining, which can be more appropriate for writing systems with long, complicated descenders. It is also often useful for mathematical or chemical texts that use many subscripts. <pre>:root { text-underline-position: under; }</pre> </div> Note: The under value does not guarantee that the underline will not conflict with glyphs, as some fonts have descenders or diacritics that extend below the font’s descent metrics. <dt><dfn class="dfn-paneled css" data-dfn-for="text-underline-position" data-dfn-type="value" data-export id="underline-left">left</dfn> <dd> In vertical <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode①">typographic modes</a>, the underline is aligned as for <a class="css" data-link-type="maybe" href="#underline-under" id="ref-for-underline-under②">under</a>, except it is always aligned to the left edge of the text. If this causes the underline to be drawn on the "over" side of the text, then an overline also switches sides and is drawn on the "under" side. <dt><dfn class="dfn-paneled css" data-dfn-for="text-underline-position" data-dfn-type="value" data-export id="underline-right">right</dfn> <dd> In vertical <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode②">typographic modes</a>, the underline is aligned as for <a class="css" data-link-type="maybe" href="#underline-under" id="ref-for-underline-under③">under</a>, except it is always aligned to the right edge of the text. If this causes the underline to be drawn on the "over" side of the text, then an overline also switches sides and is drawn on the "under" side. </dl> <div class="figure" id="fig-text-underline-position"> <table> <tbody> <tr> <td> <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' places the underline on the left side of the text." height="168" src="images/underline-position-left.png" title="text-underline-position: left" width="40"> <td> <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' places the underline on the right side of the text." height="168" src="images/underline-position-right.png" title="text-underline-position: right" width="40"> <tr> <td><a class="css" data-link-type="maybe" href="#underline-left" id="ref-for-underline-left②">left</a> <td><a class="css" data-link-type="maybe" href="#underline-right" id="ref-for-underline-right②">right</a> </table> In vertical <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode③">typographic modes</a>, the <a class="property css" data-link-type="property" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position⑤">text-underline-position</a> values <a class="css" data-link-type="maybe" href="#underline-left" id="ref-for-underline-left③">left</a> and <a class="css" data-link-type="maybe" href="#underline-right" id="ref-for-underline-right③">right</a> allow placing the underline on either side of the text. (In horizontal typographic modes, both values are treated as <a class="css" data-link-type="maybe" href="#underline-auto" id="ref-for-underline-auto①">auto</a>.) </div> The exact position and thickness of line decorations is UA-defined in this level. However, for underlines and overlines the UA must use a single thickness and position on each line for the decorations deriving from a single <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box④">decorating box</a>. <div class="figure"> <img alt="A single underline drawn under varying font sizes and vertical positions must be a single line." height="81" src="images/underline-single.png" width="125"> vs. <img alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect." height="80" src="images/underline-broken.png" width="120"> Correct and incorrect rendering of <code>AB<big>C</big>D</code> </div> <div class="note" role="note"> Note, since line decorations can span elements with varying font sizes and vertical alignments, the best position for a line decoration is not necessarily the ideal position dictated by the <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box⑤">decorating box</a>. For example, an overline positioned to a small font will effectively become a line-through if the element contains text in a significantly larger font-size. Even for underlines, if the text is not aligned to the alphabetic baseline (for example, in vertical typesetting styles, text is aligned by its central baseline by default <a data-link-type="biblio" href="#biblio-css-writing-modes-4" title="CSS Writing Modes Level 4">[CSS-WRITING-MODES-4]</a>) an underline will cut through descendant text of a larger font-size. UA consideration of descendant content will therefore result in better typography. <div class="figure"> <img alt height="219" src="images/leftline-cross.png" width="80"> <img alt height="219" src="images/leftline-under.png" width="80"> Due to the central baseline alignment of vertical text, a left-side underline on small vertical text will cut through the text of a child with a larger font size. The underline is not allowed to be broken, but adjusting its position further to the left properly accommodates all of the underlined text. </div> </div> UAs must adjust line positions to match the shifted metrics of <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box⑥">decorating boxes</a> shifted with <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align">vertical-align</a> values other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-baseline" id="ref-for-valdef-alignment-baseline-baseline">baseline</a> <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> or subscripted/superscripted via <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-variant-position" id="ref-for-propdef-font-variant-position">font-variant-position</a> <a data-link-type="biblio" href="#biblio-css-fonts-3" title="CSS Fonts Module Level 3">[CSS-FONTS-3]</a>, but must not adjust the line position or thickness in response to descendants of a decorating box that are so styled. This allows superscripts and subscripts to be properly decorated (underlined, struck through, etc.) but prevents them from distorting or breaking the positioning of such decorations on their ancestors. <div class="figure"> <img alt="An underline for just the superscript 'st' in '1st' is drawn just below the superscript, whereas an underline for the entire text is drawn at the appropriate position for full-size text." height="38" src="images/underline-superscript.png" width="80"> Example of underline applied to <abbr title="element with 'vertical-align' or 'font-variant-position' applied">superscripted text</abbr> vs. underline applied to <abbr title="element containing an element with 'vertical-align' or 'font-variant-position' applied">text containing a superscript</abbr> </div> Some font formats (such as OpenType) can offer information about the appropriate position of a line decoration. The UA should use such information (such as the underline thickness, or appropriate alphabetic underline position) from the font wherever appropriate. Note: Typically, OpenType font metrics give the position of an alphabetic underline; in some cases (especially in CJK fonts), it gives the position of a under left underline. (In this case, the font’s underline metrics typically touch the bottom edge of the em box). The UA may but is not required to correct for incorrect font metrics. <h2 class="heading settled" data-level="3" id="emphasis-marks">3. Emphasis Marks<a class="self-link" href="#emphasis-marks"></a></h2> East Asian documents traditionally use small symbols next to each glyph to emphasize a run of text. For example: <div class="figure"> <img alt="Example of emphasis in Japanese appearing over the text" height="39" src="images/text-emphasis-ja.png" width="208"> Accent emphasis (shown in blue for clarity) applied to Japanese text </div> The <a class="property css" data-link-type="property" href="#propdef-text-emphasis" id="ref-for-propdef-text-emphasis">text-emphasis</a> shorthand, and its <a class="property css" data-link-type="property" href="#propdef-text-emphasis-style" id="ref-for-propdef-text-emphasis-style">text-emphasis-style</a> and <a class="property css" data-link-type="property" href="#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color">text-emphasis-color</a> longhands, can be used to apply such marks to the text. The <a class="property css" data-link-type="property" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position">text-emphasis-position</a> property, which inherits separately, allows setting the emphasis marks’ position with respect to the text. <h3 class="heading settled" data-level="3.1" id="text-emphasis-style-property">3.1. Emphasis Mark Style: the <a class="property css" data-link-type="property" href="#propdef-text-emphasis-style" id="ref-for-propdef-text-emphasis-style①">text-emphasis-style</a> property<a class="self-link" href="#text-emphasis-style-property"></a></h3> <table class="def propdef" data-link-for-hint="text-emphasis-style"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-emphasis-style">text-emphasis-style</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> [ [ filled | open ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any⑥">||</a> [ dot | circle | double-circle | triangle | sesame ] ] | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#string-value" id="ref-for-string-value"><string></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>text <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-text-emphasis-style-none" id="ref-for-valdef-text-emphasis-style-none">none</a>, a pair of keywords representing the shape and fill, or a string <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 applies emphasis marks to the element’s text. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-none">none</dfn> <dd>No emphasis marks. <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-filled">filled</dfn> <dd>The shape is filled with solid color. <dt><dfn class="dfn-paneled css" data-dfn-for="text-text-emphasis" data-dfn-type="value" data-export id="valdef-text-text-emphasis-open">open</dfn> <dd>The shape is hollow. <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-dot">dot</dfn> <dd>Display small circles as marks. The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'. <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-circle">circle</dfn> <dd>Display large circles as marks. The filled circle is U+25CF '●', and the open circle is U+25CB '○'. <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-double-circle">double-circle</dfn> <dd>Display double circles as marks. The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'. <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-triangle">triangle</dfn> <dd>Display triangles as marks. The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'. <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-sesame">sesame</dfn> <dd>Display sesames as marks. The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'. <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-string"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#string-value" id="ref-for-string-value①"><string></a></dfn> <dd>Display the given string as marks. Authors should not specify more than one <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#character" id="ref-for-character">character</a> in <string>. The UA may truncate or ignore strings consisting of more than one grapheme cluster. </dl> If a shape keyword is specified but neither of <a class="css" data-link-type="maybe" href="#valdef-text-emphasis-style-filled" id="ref-for-valdef-text-emphasis-style-filled">filled</a> nor <a class="css" data-link-type="maybe" href="#valdef-text-text-emphasis-open" id="ref-for-valdef-text-text-emphasis-open">open</a> is specified, filled is assumed. If only filled or open is specified, the shape keyword computes to circle in horizontal <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode⑤">typographic modes</a> and <a class="css" data-link-type="maybe" href="#valdef-text-emphasis-style-sesame" id="ref-for-valdef-text-emphasis-style-sesame">sesame</a> in vertical typographic modes. The marks should be drawn using the element’s font settings with the addition of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-4/#valdef-font-variant-east-asian-ruby" id="ref-for-valdef-font-variant-east-asian-ruby">ruby</a> feature and the size scaled down 50%. However, since not all fonts have all these glyphs, and some fonts use inappropriate sizes for emphasis marks in these code points, the UA may opt to use a font known to be good for emphasis marks, or the marks may instead be synthesized by the UA. Marks must remain upright in vertical <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode⑦">typographic modes</a>: like CJK characters, they do not rotate to match the writing mode. The orientation of marks in horizontal typographic modes of vertical <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing modes</a> is undefined in this level (but may be defined in a future level if definitive use cases arise). Note: One example of good fonts for emphasis marks is Adobe’s open source <a href="https://github.com/adobe-fonts/kenten-generic">Kenten Generic OpenType Font</a>, which is specially designed for the emphasis marks. The marks are drawn once for each <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit">typographic character unit</a>. However, emphasis marks are not drawn for: <ul> <li><a href="https://www.w3.org/TR/css-text-3/#word-separator">Word separators</a> or other <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#character" id="ref-for-character①">characters</a> that belong to the Unicode separator classes (Z*). (But note that emphasis marks are drawn for a space that combines with any combining characters.) <li> Punctuation--specifically, any <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#character" id="ref-for-character②">characters</a> that belong to the Unicode P* <a data-link-type="dfn">general category</a> and do not <code>NFKD</code> normalize <a data-link-type="biblio" href="#biblio-uax15" title="Unicode Normalization Forms">[UAX15]</a> to any of the following symbols: <table class="data"> <tbody> <tr> <td># <td>U+0023 <td>NUMBER SIGN <tr> <td>% <td>U+0025 <td>PERCENT SIGN <tr> <td>‰ <td>U+2030 <td>PER MILLE SIGN <tr> <td>‱ <td>U+2031 <td>PER TEN THOUSAND SIGN <tr> <td>٪ <td>U+066A <td>ARABIC PERCENT SIGN <tr> <td>؉ <td>U+0609 <td>ARABIC-INDIC PER MILLE SIGN <tr> <td>؊ <td>U+060A <td>ARABIC-INDIC PER TEN THOUSAND SIGN <tr> <td>& <td>U+0026 <td>AMPERSAND <tr> <td>⁊ <td>U+204A <td>TIRONIAN SIGN ET <tr> <td>@ <td>U+0040 <td>COMMERCIAL AT <tr> <td>§ <td>U+00A7 <td>SECTION SIGN <tr> <td>¶ <td>U+00B6 <td>PILCROW SIGN <tr> <td>⁋ <td>U+204B <td>REVERSED PILCROW SIGN <tr> <td>⁓ <td>U+2053 <td>SWUNG DASH <tr> <td>〽️ <td>U+303D <td>PART ALTERNATION MARK </table> <li>Characters belonging to the Unicode classes for control codes and unassigned characters (Cc, Cf, Cn). </ul> Note: Control over which characters are marked will be added in Level 4. (The list of punctuation may also be further refined, particularly for non-CJK punctuation.) <h3 class="heading settled" data-level="3.2" id="text-emphasis-color-property">3.2. Emphasis Mark Color: the <a class="property css" data-link-type="property" href="#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color①">text-emphasis-color</a> property<a class="self-link" href="#text-emphasis-color-property"></a></h3> <table class="def propdef" data-link-for-hint="text-emphasis-color"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-emphasis-color">text-emphasis-color</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://drafts.csswg.org/css-color-5/#typedef-color" id="ref-for-typedef-color①"><color></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>currentcolor <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>text <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>computed color <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 foreground color of the emphasis marks. Note: <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor">currentcolor</a> keyword computes to itself and is resolved to the value of <a class="property css" data-link-type="property">color</a> after inheritance is performed. This means <a class="property css" data-link-type="property" href="#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color②">text-emphasis-color</a> by default matches the text color even as color changes across elements. <h3 class="heading settled" data-level="3.3" id="text-emphasis-property">3.3. Emphasis Mark Shorthand: the <a class="property css" data-link-type="property" href="#propdef-text-emphasis" id="ref-for-propdef-text-emphasis①">text-emphasis</a> property<a class="self-link" href="#text-emphasis-property"></a></h3> <table class="def propdef" data-link-for-hint="text-emphasis"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-emphasis">text-emphasis</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="property" href="#propdef-text-emphasis-style" id="ref-for-propdef-text-emphasis-style②"><'text-emphasis-style'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any⑦">||</a> <a class="production css" data-link-type="property" href="#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color③"><'text-emphasis-color'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <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>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <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 property is a shorthand for setting <a class="property css" data-link-type="property" href="#propdef-text-emphasis-style" id="ref-for-propdef-text-emphasis-style③">text-emphasis-style</a> and <a class="property css" data-link-type="property" href="#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color④">text-emphasis-color</a> in one declaration. Omitted values are set to their initial values. Note that <a class="property css" data-link-type="property" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position①">text-emphasis-position</a> is not reset in this shorthand. This is because typically the shape and color vary, but the position is consistent for a particular language throughout the document. Therefore the position should inherit independently. <h3 class="heading settled" data-level="3.4" id="text-emphasis-position-property">3.4. Emphasis Mark Position: the <a class="property css" data-link-type="property" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position②">text-emphasis-position</a> property<a class="self-link" href="#text-emphasis-position-property"></a></h3> <table class="def propdef" data-link-for-hint="text-emphasis-position"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-emphasis-position">text-emphasis-position</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ over <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> under ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-all" id="ref-for-comb-all">&&</a> [ right | left ]<a data-link-type="grammar" href="https://drafts.csswg.org/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>over right <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>text <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword(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 describes where emphasis marks are drawn at. If [ right | left ] is omitted, it defaults to <a class="css" data-link-type="maybe" href="#valdef-text-emphasis-position-right" id="ref-for-valdef-text-emphasis-position-right">right</a>. The values have following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-position" data-dfn-type="value" data-export id="valdef-text-emphasis-position-over">over</dfn> <dd>Draw marks over the text in horizontal <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode⑨">typographic modes</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-position" data-dfn-type="value" data-export id="valdef-text-emphasis-position-under">under</dfn> <dd>Draw marks under the text in horizontal <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode①⓪">typographic modes</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-position" data-dfn-type="value" data-export id="valdef-text-emphasis-position-right">right</dfn> <dd>Draw marks to the right of the text in vertical <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode①①">typographic modes</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-position" data-dfn-type="value" data-export id="valdef-text-emphasis-position-left">left</dfn> <dd>Draw marks to the left of the text in vertical <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode①②">typographic modes</a>. </dl> Emphasis marks are drawn exactly as if each character was assigned the mark as its ruby annotation text with the ruby position given by <a class="property css" data-link-type="property" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position③">text-emphasis-position</a> and the ruby alignment as centered. Note that this position may be adjusted if it would conflict with underline or overline decorations. The effect of emphasis marks on the line height is the same as for ruby text. <div class="note" role="note"> Note, the preferred position of emphasis marks depends on the language. In Japanese for example, the preferred position is over right. In Chinese, on the other hand, the preferred position is under right. The informative table below summarizes the preferred emphasis mark positions for Chinese and Japanese: <table class="data"> <caption>Preferred emphasis mark and ruby position</caption> <thead> <tr> <th rowspan="2" scope="col">Language <th colspan="2" scope="col">Preferred position <th colspan="2" rowspan="2" scope="col">Illustration <tr> <th>Horizontal <th>Vertical <tbody> <tr> <th scope="row">Japanese <td rowspan="3">over <td rowspan="3">right <td rowspan="3"> <img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." height="39" src="images/text-emphasis-ja.png" title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" width="209"> <td rowspan="4"> <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." height="79" src="images/text-emphasis-v.gif" title="Emphasis applied on the right of a fragment of Japanese text" width="34"> <tr> <th scope="row">Korean <tr> <th scope="row">Mongolian <tr> <th scope="row">Chinese <td>under <td>right <td> <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." height="39" src="images/text-emphasis-zh.png" title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" width="140"> </table> </div> If emphasis marks are applied to characters for which ruby is drawn in the same position as the emphasis mark, the emphasis marks are placed outside the ruby. This includes <a href="https://www.w3.org/TR/css-ruby-1/#autohide">auto-hidden</a> and empty <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-annotation-box" id="ref-for-ruby-annotation-box">ruby annotations</a>. <div class="figure"> <img alt="In this example, emphasis marks are applied to 4 characters, two of which have ruby. The dots are placed above each character (aligned with the ruby) for the bare characters, and above the ruby text for the annotated characters." height="50" src="images/text-emphasis-ruby.png" width="134"> Emphasis marks applied to 4 characters, with ruby also on 2 of them </div> <div class="example" id="example-47f78eba"> <a class="self-link" href="#example-47f78eba"></a> Some editors prefer to hide emphasis marks when they conflict with ruby. In HTML, this can be done with the following style rule: <pre>ruby { text-emphasis: none; }</pre> Some other editors prefer to hide ruby when they conflict with emphasis marks. In HTML, this can be done with the following pattern: <pre>em { text-emphasis: dot; } /* Set text-emphasis for elements */ em rt { display: none; } /* Hide ruby inside elements */ </pre> </div> <h2 class="heading settled" data-level="4" id="text-shadow-property">4. Text Shadows: the <a class="property css" data-link-type="property" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow①">text-shadow</a> property<a class="self-link" href="#text-shadow-property"></a></h2> <table class="def propdef" data-link-for-hint="text-shadow"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-shadow">text-shadow</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> [ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-5/#typedef-color" id="ref-for-typedef-color②"><color></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-all" id="ref-for-comb-all①">&&</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value"><length></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{2,3}</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma">#</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>text <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>either the keyword <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow-none" id="ref-for-box-shadow-none">none</a> or a list, each item consisting of three absolute lengths plus a computed color <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><a href="https://www.w3.org/TR/web-animations-1/#animating-shadow-lists">as shadow list</a> </table> This property accepts a comma-separated list of shadow effects to be applied to the text of the element. Values are interpreted as for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow" id="ref-for-propdef-box-shadow">box-shadow</a> <a data-link-type="biblio" href="#biblio-css-backgrounds-3" title="CSS Backgrounds and Borders Module Level 3">[CSS-BACKGROUNDS-3]</a>. (But note that spread values and the inset keyword are not allowed.) Each layer shadows the element’s text and all its text decorations (composited together). The shadow effects are applied front-to-back: the first shadow is on top. The shadows may thus overlay each other, but they never overlay the text itself. The shadow must be painted at a stack level between the element’s border and/or background (if present) and the elements text and text decoration. UAs should avoid painting text shadows over text in adjacent elements belonging to the same stack level and stacking context. (This may mean that the exact stack level of the shadows depends on whether the element has a border or background: the exact stacking behavior of text shadows is thus UA-defined.) It is undefined whether a given shadow layer shadows each glyph or decoration independently or if the text and/or decorations are flattened and then shadowed. Unlike <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow" id="ref-for-propdef-box-shadow①">box-shadow</a>, text shadows are not clipped to the shadowed shape and may show through if the text is partially-transparent. Like box-shadow, text shadows do not influence layout, and do not trigger scrolling or increase the size of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region">scrollable overflow area</a>. Note: The painting order of shadows defined here is the opposite of that defined in the 1998 <a href="https://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>. The text-shadow property applies to both the <code>::first-line</code> and <code>::first-letter</code> pseudo-elements. <h2 class="heading settled" data-level="5" id="painting">5. Painting Text Decorations<a class="self-link" href="#painting"></a></h2> <h3 class="heading settled" data-level="5.1" id="painting-order">5.1. Painting Order of Text Decorations<a class="self-link" href="#painting-order"></a></h3> As in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, text decorations are drawn immediately over/under the text they decorate, in the following order (bottommost first): <ul> <li>shadows (<a class="property css" data-link-type="property" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow②">text-shadow</a>) <li>underlines (<a class="property css" data-link-type="property" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration④">text-decoration</a>) <li>overlines (<a class="property css" data-link-type="property" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration⑤">text-decoration</a>) <li>text <li>emphasis marks (<a class="property css" data-link-type="property" href="#propdef-text-emphasis" id="ref-for-propdef-text-emphasis②">text-emphasis</a>) <li>line-through (<a class="property css" data-link-type="property" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration⑥">text-decoration</a>) </ul> Where line decorations are drawn across box decorations or atomic inlines, they are drawn over non-positioned content and just below any positioned descendants (immediately below layer #8 in CSS2.1 Appendix E). <h3 class="heading settled" data-level="5.2" id="overflow">5.2. Overflow of Text Decorations<a class="self-link" href="#overflow"></a></h3> Text decorations that leak outside a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box①">box</a> are considered <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow" id="ref-for-ink-overflow">ink overflow</a>: they do not extend the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region①">scrollable overflow area</a>. <a data-link-type="biblio" href="#biblio-css-overflow-3" title="CSS Overflow Module Level 3">[css-overflow-3]</a> <h2 class="no-num heading settled" id="acknowledgements"> Appendix A: Acknowledgements<a class="self-link" href="#acknowledgements"></a></h2> This specification would not have been possible without the help from: Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe and Steve Zilles. <h2 class="no-num heading settled" id="default-stylesheet"> Appendix B: Default UA Stylesheet<a class="self-link" href="#default-stylesheet"></a></h2> This appendix is informative, and is to help UA developers to implement default stylesheet, but UA developers are free to ignore or change. <div class="example" id="example-a9219bae"> <a class="self-link" href="#example-a9219bae"></a> <pre><code class="css">/* typical styling of HTML */ blink { text-decoration-line: blink; } s, strike, del { text-decoration: line-through; } u, ins, :link, :visited { text-decoration: underline; } abbr[title], acronym[title] { text-decoration: dotted underline; } /* disable inheritance of text-emphasis marks to ruby text: emphasis marks should only apply to base text */ rt { text-emphasis: none; } /* set language-appropriate default emphasis mark position */ :root:lang(zh), [lang|=zh] { text-emphasis-position: under right; } [lang|=ja], [lang|=ko] { text-emphasis-position: over right; } /* set language-appropriate default underline position */ :root:lang(ja), [lang|=ja], :root:lang(mn), [lang|=mn], :root:lang(ko), [lang|=ko] { text-underline-position: right; } :root:lang(zh), [lang|=zh] { text-underline-position: left; } /* auto is chosen (implied) above instead of under due to content-compatibility concerns */ </code></pre> </div> <a class="self-link" href="#issue-4a420eee"></a> If you find any issues, recommendations to add, or corrections, please send the information to <a href="mailto:www-style@w3.org">www-style@w3.org</a> with <kbd>[css-text-decor]</kbd> in the subject line. <div class="example" id="example-ef2cba97"> <a class="self-link" href="#example-ef2cba97"></a> While <a class="css" data-link-type="propdesc" href="#propdef-text-decoration-line" id="ref-for-propdef-text-decoration-line④">text-decoration-line: blink</a> can’t be fully reproduced with other existing properties, authors can achieve a very similar effect with the following CSS: <pre>@keyframes blink { 0% { visibility: hidden; animation-timing-function: step-end; } 25%, 100% { visibility: visible; } } blink { animation: blink 1s infinite; } </pre> </div> <h2 class="no-num heading settled" id="changes">Appendix C: Changes<a class="self-link" href="#changes"></a></h2> <h3 class="no-num heading settled" id="changes-2019"> Changes since the <a href="https://www.w3.org/TR/2019/CR-css-text-decor-3-20190813/">August 2019 Candidate Recommendation</a><a class="self-link" href="#changes-2019"></a></h3> Changes include: <ul> <li>Clarify that <a class="property css" data-link-type="property" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow③">text-shadow</a> animates as a <a data-link-type="dfn">shadow list</a> like <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow" id="ref-for-propdef-box-shadow③">box-shadow</a>. (<a href="https://github.com/w3c/csswg-drafts/pull/4375">Issue 4375</a>) <li>Be explicit about properties that apply to text. (<a href="https://github.com/w3c/csswg-drafts/issues/5303">Issue 5303</a>) <li>Minor editorial fixes. </ul> <h3 class="no-num heading settled" id="changes-2018"> Changes since the <a href="https://www.w3.org/TR/2018/CR-css-text-decor-3-20180703/">July 2018 Candidate Recommendation</a><a class="self-link" href="#changes-2018"></a></h3> Changes include: <ul> <li>Clarified that text decoration overflow is <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow" id="ref-for-ink-overflow①">ink overflow</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/3272">Issue 3272</a>) <li>Fixed inconsistencies in sample <a class="property css" data-link-type="property" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position⑥">text-underline-position</a> rules. (<a href="https://github.com/w3c/csswg-drafts/issues/3441">Issue 3441</a>) <li>Cleaned up “Computed value” lines to match new conventions. </ul> A <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2018">Disposition of Comments</a> is available. <h3 class="no-num heading settled" id="changes-2013"> Changes since the <a href="https://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/">August 2013 Candidate Recommendation</a><a class="self-link" href="#changes-2013"></a></h3> Significant changes include: <ul> <li>Deferred text-decoration-skip to Level 4 to allow for major changes. Defined behavioral defaults in prose. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-1">Issue 1</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-22">Issue 22</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-26">Issue 26</a>) <li>Specified that line-throughs are unaffected by ink-skipping feature. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-24">Issue 24</a>) <li>Recommended that when ink is skipped, line endings conform to the glyph shape. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-30">Issue 30</a>) <li>Updated writing-mode–sensitive conditions to depend on <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode①③">typographic mode</a>, to account for addition of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-lr" id="ref-for-valdef-writing-mode-sideways-lr">sideways-lr</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-rl" id="ref-for-valdef-writing-mode-sideways-rl">sideways-rl</a> values to <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> property. Marked orientation of emphasis marks under sideways-lr and sideways-rl undefined. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-10">Issue 10</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-20">Issue 20</a>) <li>Made [ right | left ] option of <a class="property css" data-link-type="property" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position④">text-emphasis-position</a> optional, defaulting to <a class="css" data-link-type="maybe" href="#valdef-text-emphasis-position-right" id="ref-for-valdef-text-emphasis-position-right①">right</a>. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-17">Issue 17</a>) <li>Made <a class="property css" data-link-type="property" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position⑦">text-underline-position</a> imply <a class="css" data-link-type="maybe" href="#underline-auto" id="ref-for-underline-auto②">auto</a> instead of <a class="css" data-link-type="maybe" href="#underline-under" id="ref-for-underline-under④">under</a> when only <a class="css" data-link-type="maybe" href="#underline-left" id="ref-for-underline-left④">left</a> or <a class="css" data-link-type="maybe" href="#underline-right" id="ref-for-underline-right④">right</a> is specified. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-18">Issue 18</a>) <li>Changed text decoration to skip leading and trailing spaces. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-6">Issue 6</a>) <li>Noted that the positions of ruby annotations may be adjusted to avoid conflicts with text decorations. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-21">Issue 21</a>) <li>Changed initial value of <a class="property css" data-link-type="property" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow④">text-shadow</a> to be <code>currentColor</code>. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-28">Issue 28</a>) <li>Fixed error in “Computed value” line for <a class="property css" data-link-type="property" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow⑤">text-shadow</a>. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-7">Issue 7</a>) <li>Fixed canonical order of <a class="property css" data-link-type="property" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow⑥">text-shadow</a> values to match implementations. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-35">Issue 35</a>) <li> Defined positioning of emphasis marks with respect to auto-hidden and empty ruby annotations. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-9">Issue 9</a>) <blockquote> If emphasis marks are applied to characters for which ruby is drawn in the same position as the emphasis mark, the emphasis marks are placed outside the ruby. <ins>This includes <a href="https://www.w3.org/TR/css-ruby-1/#autohide">auto-hidden</a> and empty <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-annotation-box" id="ref-for-ruby-annotation-box①">ruby annotations</a>.</ins> </blockquote> <li>Made <a class="property css" data-link-type="property" href="#propdef-text-emphasis" id="ref-for-propdef-text-emphasis③">text-emphasis</a> skip punctuation by default. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-16">Issue 16</a>) <li>Added rule to apply <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-4/#valdef-font-variant-east-asian-ruby" id="ref-for-valdef-font-variant-east-asian-ruby①">ruby</a> to emphasis marks' font. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-13">Issue 13</a>) <li>Various corrections and improvements to the default UA rules for <a class="property css" data-link-type="property" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position⑤">text-emphasis-position</a> and <a class="property css" data-link-type="property" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position⑧">text-underline-position</a>. (<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-11">Issue 11</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-12">Issue 12</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-18">Issue 18</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-19">Issue 19</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-36">Issue 36</a>) </ul> <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. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative. <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#underline-auto">auto</a>, in § 2.5 <li><a href="#valdef-text-decoration-line-blink">blink</a>, in § 2.1 <li><a href="#valdef-text-emphasis-style-circle">circle</a>, in § 3.1 <li><a href="#decorating-box">decorating box</a>, in § 2 <li><a href="#valdef-text-emphasis-style-dot">dot</a>, in § 3.1 <li><a href="#valdef-text-emphasis-style-double-circle">double-circle</a>, in § 3.1 <li><a href="#valdef-text-emphasis-style-filled">filled</a>, in § 3.1 <li> left <ul> <li><a href="#valdef-text-emphasis-position-left">value for text-emphasis-position</a>, in § 3.4 <li><a href="#underline-left">value for text-underline-position</a>, in § 2.5 </ul> <li><a href="#valdef-text-decoration-line-line-through">line-through</a>, in § 2.1 <li> none <ul> <li><a href="#valdef-text-decoration-line-none">value for text-decoration-line</a>, in § 2.1 <li><a href="#valdef-text-emphasis-style-none">value for text-emphasis-style</a>, in § 3.1 </ul> <li><a href="#valdef-text-text-emphasis-open">open</a>, in § 3.1 <li><a href="#valdef-text-emphasis-position-over">over</a>, in § 3.4 <li><a href="#valdef-text-decoration-line-overline">overline</a>, in § 2.1 <li> right <ul> <li><a href="#valdef-text-emphasis-position-right">value for text-emphasis-position</a>, in § 3.4 <li><a href="#underline-right">value for text-underline-position</a>, in § 2.5 </ul> <li><a href="#valdef-text-emphasis-style-sesame">sesame</a>, in § 3.1 <li><a href="#valdef-text-emphasis-style-string"><string></a>, in § 3.1 <li><a href="#propdef-text-decoration">text-decoration</a>, in § 2.4 <li><a href="#propdef-text-decoration-color">text-decoration-color</a>, in § 2.3 <li><a href="#propdef-text-decoration-line">text-decoration-line</a>, in § 2.1 <li><a href="#propdef-text-decoration-style">text-decoration-style</a>, in § 2.2 <li><a href="#propdef-text-emphasis">text-emphasis</a>, in § 3.3 <li><a href="#propdef-text-emphasis-color">text-emphasis-color</a>, in § 3.2 <li><a href="#propdef-text-emphasis-position">text-emphasis-position</a>, in § 3.4 <li><a href="#propdef-text-emphasis-style">text-emphasis-style</a>, in § 3.1 <li><a href="#propdef-text-shadow">text-shadow</a>, in § 4 <li><a href="#propdef-text-underline-position">text-underline-position</a>, in § 2.5 <li><a href="#valdef-text-emphasis-style-triangle">triangle</a>, in § 3.1 <li> under <ul> <li><a href="#valdef-text-emphasis-position-under">value for text-emphasis-position</a>, in § 3.4 <li><a href="#underline-under">value for text-underline-position</a>, in § 2.5 </ul> <li><a href="#valdef-text-decoration-line-underline">underline</a>, in § 2.1 </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms: <ul> <li>box-shadow <li>none </ul> <li> <a data-link-type="biblio">[CSS-BREAK-3]</a> defines the following terms: <ul> <li>fragment </ul> <li> <a data-link-type="biblio">[CSS-COLOR-4]</a> defines the following terms: <ul> <li>currentcolor </ul> <li> <a data-link-type="biblio">[CSS-COLOR-5]</a> defines the following terms: <ul> <li><color> </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms: <ul> <li>display </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>anonymous <li>atomic inline <li>block container <li>block-level <li>box <li>in-flow <li>inline box <li>inline formatting context <li>inline-level <li>non-replaced <li>visibility </ul> <li> <a data-link-type="biblio">[CSS-FONTS-4]</a> defines the following terms: <ul> <li>font-variant-position <li>ruby </ul> <li> <a data-link-type="biblio">[CSS-INLINE-3]</a> defines the following terms: <ul> <li>baseline <li>vertical-align </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li>ink overflow <li>scrollable overflow area </ul> <li> <a data-link-type="biblio">[CSS-RUBY-1]</a> defines the following terms: <ul> <li>ruby annotation <li>ruby base <li>ruby container </ul> <li> <a data-link-type="biblio">[CSS-TEXT-4]</a> defines the following terms: <ul> <li>character <li>typographic character unit </ul> <li> <a data-link-type="biblio">[CSS-TEXT-DECOR-4]</a> defines the following terms: <ul> <li>wavy </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li># <li>&& <li><length> <li><string> <li>? <li>CSS-wide keywords <li>{A,B} <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>sideways-lr <li>sideways-rl <li>typographic mode <li>under <li>vertical writing mode <li>writing mode <li>writing-mode </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>del <li>ins </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://drafts.csswg.org/css-backgrounds/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a> <dt id="biblio-css-break-3">[CSS-BREAK-3] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break/"><cite>CSS Fragmentation Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-break/">https://drafts.csswg.org/css-break/</a> <dt id="biblio-css-color-5">[CSS-COLOR-5] <dd>Chris Lilley; et al. <a href="https://drafts.csswg.org/css-color-5/"><cite>CSS Color Module Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-5/">https://drafts.csswg.org/css-color-5/</a> <dt id="biblio-css-display-4">[CSS-DISPLAY-4] <dd><a href="https://drafts.csswg.org/css-display-4/"><cite>CSS Display Module Level 4</cite></a>. Editor's Draft. URL: <a href="https://drafts.csswg.org/css-display-4/">https://drafts.csswg.org/css-display-4/</a> <dt id="biblio-css-fonts-3">[CSS-FONTS-3] <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://drafts.csswg.org/css-fonts-3/"><cite>CSS Fonts Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-fonts-3/">https://drafts.csswg.org/css-fonts-3/</a> <dt id="biblio-css-fonts-4">[CSS-FONTS-4] <dd>Chris Lilley. <a href="https://drafts.csswg.org/css-fonts-4/"><cite>CSS Fonts Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-fonts-4/">https://drafts.csswg.org/css-fonts-4/</a> <dt id="biblio-css-inline-3">[CSS-INLINE-3] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-inline-3/"><cite>CSS Inline Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-inline-3/">https://drafts.csswg.org/css-inline-3/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://drafts.csswg.org/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-overflow-3/">https://drafts.csswg.org/css-overflow-3/</a> <dt id="biblio-css-ruby-1">[CSS-RUBY-1] <dd>Elika Etemad; et al. <a href="https://drafts.csswg.org/css-ruby-1/"><cite>CSS Ruby Annotation Layout Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-ruby-1/">https://drafts.csswg.org/css-ruby-1/</a> <dt id="biblio-css-text-3">[CSS-TEXT-3] <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://drafts.csswg.org/css-text-3/"><cite>CSS Text Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-3/">https://drafts.csswg.org/css-text-3/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://drafts.csswg.org/css-text-4/"><cite>CSS Text Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-4/">https://drafts.csswg.org/css-text-4/</a> <dt id="biblio-css-text-decor-4">[CSS-TEXT-DECOR-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-text-decor-4/"><cite>CSS Text Decoration Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-decor-4/">https://drafts.csswg.org/css-text-decor-4/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-3/">https://drafts.csswg.org/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-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-uax15">[UAX15] <dd>Ken Whistler. <a href="https://www.unicode.org/reports/tr15/tr15-56.html"><cite>Unicode Normalization Forms</cite></a>. 14 August 2024. Unicode Standard Annex #15. URL: <a href="https://www.unicode.org/reports/tr15/tr15-56.html">https://www.unicode.org/reports/tr15/tr15-56.html</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-animations-1">[CSS-ANIMATIONS-1] <dd>David Baron; et al. <a href="https://drafts.csswg.org/css-animations/"><cite>CSS Animations Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-animations/">https://drafts.csswg.org/css-animations/</a> <dt id="biblio-css-color-4">[CSS-COLOR-4] <dd>Chris Lilley; Tab Atkins Jr.; Lea Verou. <a href="https://drafts.csswg.org/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-4/">https://drafts.csswg.org/css-color-4/</a> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> </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-text-decoration" id="ref-for-propdef-text-decoration⑦">text-decoration</a> <td><'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-decoration-color" id="ref-for-propdef-text-decoration-color④">text-decoration-color</a> <td><color> <td>currentcolor <td>all elements <td>no <td>n/a <td>by computed value type <td>per grammar <td>computed color <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-decoration-line" id="ref-for-propdef-text-decoration-line⑤">text-decoration-line</a> <td>none | [ underline || overline || line-through || blink ] <td>none <td>all elements <td>no (but see prose, above) <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-text-decoration-style" id="ref-for-propdef-text-decoration-style④">text-decoration-style</a> <td>solid | double | dotted | dashed | wavy <td>solid <td>all 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-text-emphasis" id="ref-for-propdef-text-emphasis④">text-emphasis</a> <td><'text-emphasis-style'> || <'text-emphasis-color'> <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color⑤">text-emphasis-color</a> <td><color> <td>currentcolor <td>text <td>yes <td>n/a <td>by computed value type <td>per grammar <td>computed color <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position⑥">text-emphasis-position</a> <td>[ over | under ] && [ right | left ]? <td>over right <td>text <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-text-emphasis-style" id="ref-for-propdef-text-emphasis-style④">text-emphasis-style</a> <td>none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string> <td>none <td>text <td>yes <td>n/a <td>discrete <td>per grammar <td>the keyword none, a pair of keywords representing the shape and fill, or a string <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow⑦">text-shadow</a> <td>none | [ <color>? && <length>{2,3} ]# <td>none <td>text <td>yes <td>n/a <td>as shadow list <td>per grammar <td>either the keyword none or a list, each item consisting of three absolute lengths plus a computed color <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position⑨">text-underline-position</a> <td>auto | [ under || [ left | right ] ] <td>auto <td>all elements <td>yes <td>n/a <td>discrete <td>per grammar <td>specified keyword(s) </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"> If you find any issues, recommendations to add, or corrections, please send the information to <a href="mailto:www-style@w3.org">www-style@w3.org</a> with <kbd>[css-text-decor]</kbd> in the subject line. <a class="issue-return" href="#issue-4a420eee" title="Jump to section">↵</a></div> </div> <details class="mdn-anno unpositioned" data-anno-for="text-decoration-color-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color" title="The text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line.">text-decoration-color</a> In all current engines. <div class="support"> Firefox36+Safari12.1+Chrome57+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-decoration-line-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line" title="The text-decoration-line CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline.">text-decoration-line</a> In all current engines. <div class="support"> Firefox36+Safari12.1+Chrome57+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-decoration-style-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style" title="The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line. The style applies to all lines that are set with text-decoration-line.">text-decoration-style</a> In all current engines. <div class="support"> Firefox36+Safari12.1+Chrome57+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-decoration-property"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" title="The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.">text-decoration</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE3+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-decoration" title="The text-decoration attribute defines whether text is decorated with an underline, overline and/or strike-through. It is a shorthand for the text-decoration-line and text-decoration-style properties.">Attribute/text-decoration</a> In no current engines. <div class="support"> Firefox?Safari?Chrome? <hr> Opera?Edge? <hr> Edge (Legacy)?IE? <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-emphasis-color-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color" title="The text-emphasis-color CSS property sets the color of emphasis marks. This value can also be set using the text-emphasis shorthand.">text-emphasis-color</a> In all current engines. <div class="support"> Firefox46+Safari7+Chrome99+ <hr> Opera?Edge99+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-emphasis-position-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position" title="The text-emphasis-position CSS property sets where emphasis marks are drawn. Like ruby text, if there isn't enough room for emphasis marks, the line height is increased.">text-emphasis-position</a> In all current engines. <div class="support"> Firefox46+Safari7+Chrome99+ <hr> Opera?Edge99+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-emphasis-style-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style" title="The text-emphasis-style CSS property sets the appearance of emphasis marks. It can also be set, and reset, using the text-emphasis shorthand.">text-emphasis-style</a> In all current engines. <div class="support"> Firefox46+Safari7+Chrome99+ <hr> Opera?Edge99+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-emphasis-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis" title="The text-emphasis CSS property applies emphasis marks to text (except spaces and control characters). It is a shorthand for text-emphasis-style and text-emphasis-color.">text-emphasis</a> In all current engines. <div class="support"> Firefox46+Safari7+Chrome99+ <hr> Opera?Edge99+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-shadow-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow" title="The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.">text-shadow</a> In all current engines. <div class="support"> Firefox3.5+Safari1.1+Chrome2+ <hr> Opera9.5+Edge79+ <hr> Edge (Legacy)12+IE10+ <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-underline-position-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position" title="The text-underline-position CSS property specifies the position of the underline which is set using the text-decoration property's underline value.">text-underline-position</a> In all current engines. <div class="support"> Firefox74+Safari12.1+Chrome33+ <hr> Opera?Edge79+ <hr> Edge (Legacy)12+IE6+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "0812e39f": {"dfnID":"0812e39f","dfnText":"ink overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-ink-overflow"}],"title":"5.2. \nOverflow of Text Decorations"},{"refs":[{"id":"ref-for-ink-overflow\u2460"}],"title":"\nChanges since the July 2018 Candidate Recommendation"}],"url":"https://drafts.csswg.org/css-overflow-3/#ink-overflow"}, "083ffe5f": {"dfnID":"083ffe5f","dfnText":"inline box","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-box"},{"id":"ref-for-inline-box\u2460"},{"id":"ref-for-inline-box\u2461"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-display-4/#inline-box"}, "09e4de67": {"dfnID":"09e4de67","dfnText":"vertical writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-vertical-writing-mode"}],"title":"2.1. \nText Decoration Lines: the text-decoration-line property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode"}, "0e9419b9": {"dfnID":"0e9419b9","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-display-3/#propdef-display"}, "12f8fb07": {"dfnID":"12f8fb07","dfnText":"visibility","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-visibility"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "1548047a": {"dfnID":"1548047a","dfnText":"<color>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-color"}],"title":"2.3. \nText Decoration Color: the text-decoration-color property"},{"refs":[{"id":"ref-for-typedef-color\u2460"}],"title":"3.2. \nEmphasis Mark Color: the text-emphasis-color property"},{"refs":[{"id":"ref-for-typedef-color\u2461"}],"title":"4. \nText Shadows: the text-shadow property"}],"url":"https://drafts.csswg.org/css-color-5/#typedef-color"}, "237b3136": {"dfnID":"237b3136","dfnText":"typographic character unit","external":true,"refSections":[{"refs":[{"id":"ref-for-typographic-character-unit"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"}],"url":"https://drafts.csswg.org/css-text-4/#typographic-character-unit"}, "2b83edc9": {"dfnID":"2b83edc9","dfnText":"ins","external":true,"refSections":[{"refs":[{"id":"ref-for-the-ins-element"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://html.spec.whatwg.org/multipage/edits.html#the-ins-element"}, "358fd6ff": {"dfnID":"358fd6ff","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"1.2. \nValue Definitions"}],"url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "385326d7": {"dfnID":"385326d7","dfnText":"writing-mode","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-writing-mode"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "3f68fc92": {"dfnID":"3f68fc92","dfnText":"ruby","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-font-variant-east-asian-ruby"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"},{"refs":[{"id":"ref-for-valdef-font-variant-east-asian-ruby\u2460"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"https://drafts.csswg.org/css-fonts-4/#valdef-font-variant-east-asian-ruby"}, "537cf076": {"dfnID":"537cf076","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"}],"title":"3.4. \nEmphasis Mark Position: the text-emphasis-position property"},{"refs":[{"id":"ref-for-mult-opt\u2460"}],"title":"4. \nText Shadows: the text-shadow property"}],"url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "53e5391b": {"dfnID":"53e5391b","dfnText":"font-variant-position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-variant-position"}],"title":"2.5. \nText Underline Position: the text-underline-position property"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-variant-position"}, "53f8cf4c": {"dfnID":"53f8cf4c","dfnText":"ruby container","external":true,"refSections":[{"refs":[{"id":"ref-for-ruby-container"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-ruby-1/#ruby-container"}, "68487d22": {"dfnID":"68487d22","dfnText":"#","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-comma"}],"title":"4. \nText Shadows: the text-shadow property"}],"url":"https://drafts.csswg.org/css-values-4/#mult-comma"}, "6916104d": {"dfnID":"6916104d","dfnText":"box-shadow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-shadow"},{"id":"ref-for-propdef-box-shadow\u2460"},{"id":"ref-for-propdef-box-shadow\u2461"}],"title":"4. \nText Shadows: the text-shadow property"},{"refs":[{"id":"ref-for-propdef-box-shadow\u2462"}],"title":"\nChanges since the August 2019 Candidate Recommendation"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow"}, "6aa39eb4": {"dfnID":"6aa39eb4","dfnText":"character","external":true,"refSections":[{"refs":[{"id":"ref-for-character"},{"id":"ref-for-character\u2460"},{"id":"ref-for-character\u2461"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"}],"url":"https://drafts.csswg.org/css-text-4/#character"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"}],"title":"2.1. \nText Decoration Lines: the text-decoration-line property"},{"refs":[{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"},{"id":"ref-for-comb-one\u2462"},{"id":"ref-for-comb-one\u2463"}],"title":"2.2. \nText Decoration Style: the text-decoration-style property"},{"refs":[{"id":"ref-for-comb-one\u2464"},{"id":"ref-for-comb-one\u2465"}],"title":"2.5. \nText Underline Position: the text-underline-position property"},{"refs":[{"id":"ref-for-comb-one\u2466"},{"id":"ref-for-comb-one\u2467"},{"id":"ref-for-comb-one\u2468"},{"id":"ref-for-comb-one\u2460\u24ea"},{"id":"ref-for-comb-one\u2460\u2460"},{"id":"ref-for-comb-one\u2460\u2461"},{"id":"ref-for-comb-one\u2460\u2462"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"},{"refs":[{"id":"ref-for-comb-one\u2460\u2463"},{"id":"ref-for-comb-one\u2460\u2464"}],"title":"3.4. \nEmphasis Mark Position: the text-emphasis-position property"},{"refs":[{"id":"ref-for-comb-one\u2460\u2465"}],"title":"4. \nText Shadows: the text-shadow property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "8379845e": {"dfnID":"8379845e","dfnText":"block-level","external":true,"refSections":[{"refs":[{"id":"ref-for-block-level"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-display-4/#block-level"}, "881c2f72": {"dfnID":"881c2f72","dfnText":"box","external":true,"refSections":[{"refs":[{"id":"ref-for-box"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"},{"refs":[{"id":"ref-for-box\u2460"}],"title":"5.2. \nOverflow of Text Decorations"}],"url":"https://drafts.csswg.org/css-display-4/#box"}, "8a82fda1": {"dfnID":"8a82fda1","dfnText":"||","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-any"},{"id":"ref-for-comb-any\u2460"},{"id":"ref-for-comb-any\u2461"}],"title":"2.1. \nText Decoration Lines: the text-decoration-line property"},{"refs":[{"id":"ref-for-comb-any\u2462"},{"id":"ref-for-comb-any\u2463"}],"title":"2.4. \nText Decoration Shorthand: the text-decoration property"},{"refs":[{"id":"ref-for-comb-any\u2464"}],"title":"2.5. \nText Underline Position: the text-underline-position property"},{"refs":[{"id":"ref-for-comb-any\u2465"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"},{"refs":[{"id":"ref-for-comb-any\u2466"}],"title":"3.3. \nEmphasis Mark Shorthand: the text-emphasis property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "938ba280": {"dfnID":"938ba280","dfnText":"{A,B}","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-num-range"}],"title":"4. \nText Shadows: the text-shadow property"}],"url":"https://drafts.csswg.org/css-values-4/#mult-num-range"}, "9729fd44": {"dfnID":"9729fd44","dfnText":"fragment","external":true,"refSections":[{"refs":[{"id":"ref-for-fragment"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-break-3/#fragment"}, "977d3003": {"dfnID":"977d3003","dfnText":"<string>","external":true,"refSections":[{"refs":[{"id":"ref-for-string-value"},{"id":"ref-for-string-value\u2460"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"}],"url":"https://drafts.csswg.org/css-values-4/#string-value"}, "99a64665": {"dfnID":"99a64665","dfnText":"scrollable overflow area","external":true,"refSections":[{"refs":[{"id":"ref-for-scrollable-overflow-region"}],"title":"4. \nText Shadows: the text-shadow property"},{"refs":[{"id":"ref-for-scrollable-overflow-region\u2460"}],"title":"5.2. \nOverflow of Text Decorations"}],"url":"https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region"}, "99cabd32": {"dfnID":"99cabd32","dfnText":"in-flow","external":true,"refSections":[{"refs":[{"id":"ref-for-in-flow"},{"id":"ref-for-in-flow\u2460"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-display-4/#in-flow"}, "9a7f6195": {"dfnID":"9a7f6195","dfnText":"ruby base","external":true,"refSections":[{"refs":[{"id":"ref-for-ruby-base-box"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-ruby-1/#ruby-base-box"}, "9aae076b": {"dfnID":"9aae076b","dfnText":"baseline","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-alignment-baseline-baseline"}],"title":"2.5. \nText Underline Position: the text-underline-position property"}],"url":"https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-baseline"}, "9b1123a4": {"dfnID":"9b1123a4","dfnText":"sideways-rl","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-sideways-rl"},{"id":"ref-for-valdef-writing-mode-sideways-rl\u2460"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-rl"}, "9f3d4f17": {"dfnID":"9f3d4f17","dfnText":"block container","external":true,"refSections":[{"refs":[{"id":"ref-for-block-container"},{"id":"ref-for-block-container\u2460"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-display-4/#block-container"}, "a00822b3": {"dfnID":"a00822b3","dfnText":"anonymous","external":true,"refSections":[{"refs":[{"id":"ref-for-anonymous"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-display-4/#anonymous"}, "a18c5781": {"dfnID":"a18c5781","dfnText":"atomic inline","external":true,"refSections":[{"refs":[{"id":"ref-for-atomic-inline"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-display-4/#atomic-inline"}, "a24756d2": {"dfnID":"a24756d2","dfnText":"under","external":true,"refSections":[{"refs":[{"id":"ref-for-under"}],"title":"2.5. \nText Underline Position: the text-underline-position property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#under"}, "a73617e0": {"dfnID":"a73617e0","dfnText":"writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-writing-mode"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#writing-mode"}, "abb16c69": {"dfnID":"abb16c69","dfnText":"wavy","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-text-decoration-style-wavy"}],"title":"2.2. \nText Decoration Style: the text-decoration-style property"}],"url":"https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-style-wavy"}, "b8cd3abf": {"dfnID":"b8cd3abf","dfnText":"del","external":true,"refSections":[{"refs":[{"id":"ref-for-the-del-element"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://html.spec.whatwg.org/multipage/edits.html#the-del-element"}, "b8f126f1": {"dfnID":"b8f126f1","dfnText":"inline formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-formatting-context"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-display-4/#inline-formatting-context"}, "c15300b0": {"dfnID":"c15300b0","dfnText":"none","external":true,"refSections":[{"refs":[{"id":"ref-for-box-shadow-none"}],"title":"4. \nText Shadows: the text-shadow property"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#box-shadow-none"}, "ca6bf85d": {"dfnID":"ca6bf85d","dfnText":"ruby annotation","external":true,"refSections":[{"refs":[{"id":"ref-for-ruby-annotation-box"}],"title":"3.4. \nEmphasis Mark Position: the text-emphasis-position property"},{"refs":[{"id":"ref-for-ruby-annotation-box\u2460"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"https://drafts.csswg.org/css-ruby-1/#ruby-annotation-box"}, "cad72d2f": {"dfnID":"cad72d2f","dfnText":"currentcolor","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-color-currentcolor"}],"title":"3.2. \nEmphasis Mark Color: the text-emphasis-color property"}],"url":"https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor"}, "d7fa3e1c": {"dfnID":"d7fa3e1c","dfnText":"inline-level","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-level"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-display-4/#inline-level"}, "decorating-box": {"dfnID":"decorating-box","dfnText":"decorating box","external":false,"refSections":[{"refs":[{"id":"ref-for-decorating-box"},{"id":"ref-for-decorating-box\u2460"},{"id":"ref-for-decorating-box\u2461"},{"id":"ref-for-decorating-box\u2462"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"},{"refs":[{"id":"ref-for-decorating-box\u2463"},{"id":"ref-for-decorating-box\u2464"},{"id":"ref-for-decorating-box\u2465"},{"id":"ref-for-decorating-box\u2466"}],"title":"2.5. \nText Underline Position: the text-underline-position property"}],"url":"#decorating-box"}, "e0b6ed58": {"dfnID":"e0b6ed58","dfnText":"vertical-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-vertical-align"}],"title":"2.5. \nText Underline Position: the text-underline-position property"}],"url":"https://drafts.csswg.org/css-inline-3/#propdef-vertical-align"}, "f0809abc": {"dfnID":"f0809abc","dfnText":"&&","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-all"}],"title":"3.4. \nEmphasis Mark Position: the text-emphasis-position property"},{"refs":[{"id":"ref-for-comb-all\u2460"}],"title":"4. \nText Shadows: the text-shadow property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-all"}, "f140920e": {"dfnID":"f140920e","dfnText":"sideways-lr","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-sideways-lr"},{"id":"ref-for-valdef-writing-mode-sideways-lr\u2460"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-lr"}, "f952f01b": {"dfnID":"f952f01b","dfnText":"non-replaced","external":true,"refSections":[{"refs":[{"id":"ref-for-non-replaced"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"}],"url":"https://drafts.csswg.org/css-display-4/#non-replaced"}, "fb030e6c": {"dfnID":"fb030e6c","dfnText":"<length>","external":true,"refSections":[{"refs":[{"id":"ref-for-length-value"}],"title":"4. \nText Shadows: the text-shadow property"}],"url":"https://drafts.csswg.org/css-values-4/#length-value"}, "fb12b38c": {"dfnID":"fb12b38c","dfnText":"typographic mode","external":true,"refSections":[{"refs":[{"id":"ref-for-typographic-mode"},{"id":"ref-for-typographic-mode\u2460"},{"id":"ref-for-typographic-mode\u2461"},{"id":"ref-for-typographic-mode\u2462"},{"id":"ref-for-typographic-mode\u2463"}],"title":"2.5. \nText Underline Position: the text-underline-position property"},{"refs":[{"id":"ref-for-typographic-mode\u2464"},{"id":"ref-for-typographic-mode\u2465"},{"id":"ref-for-typographic-mode\u2466"},{"id":"ref-for-typographic-mode\u2467"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"},{"refs":[{"id":"ref-for-typographic-mode\u2468"},{"id":"ref-for-typographic-mode\u2460\u24ea"},{"id":"ref-for-typographic-mode\u2460\u2460"},{"id":"ref-for-typographic-mode\u2460\u2461"}],"title":"3.4. \nEmphasis Mark Position: the text-emphasis-position property"},{"refs":[{"id":"ref-for-typographic-mode\u2460\u2462"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#typographic-mode"}, "propdef-text-decoration": {"dfnID":"propdef-text-decoration","dfnText":"text-decoration","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-decoration"},{"id":"ref-for-propdef-text-decoration\u2460"},{"id":"ref-for-propdef-text-decoration\u2461"}],"title":"2.4. \nText Decoration Shorthand: the text-decoration property"},{"refs":[{"id":"ref-for-propdef-text-decoration\u2462"}],"title":"2.5. \nText Underline Position: the text-underline-position property"},{"refs":[{"id":"ref-for-propdef-text-decoration\u2463"},{"id":"ref-for-propdef-text-decoration\u2464"},{"id":"ref-for-propdef-text-decoration\u2465"}],"title":"5.1. \nPainting Order of Text Decorations"}],"url":"#propdef-text-decoration"}, "propdef-text-decoration-color": {"dfnID":"propdef-text-decoration-color","dfnText":"text-decoration-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-decoration-color"}],"title":"2.3. \nText Decoration Color: the text-decoration-color property"},{"refs":[{"id":"ref-for-propdef-text-decoration-color\u2460"},{"id":"ref-for-propdef-text-decoration-color\u2461"},{"id":"ref-for-propdef-text-decoration-color\u2462"}],"title":"2.4. \nText Decoration Shorthand: the text-decoration property"}],"url":"#propdef-text-decoration-color"}, "propdef-text-decoration-line": {"dfnID":"propdef-text-decoration-line","dfnText":"text-decoration-line","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-decoration-line"}],"title":"2.1. \nText Decoration Lines: the text-decoration-line property"},{"refs":[{"id":"ref-for-propdef-text-decoration-line\u2460"}],"title":"2.3. \nText Decoration Color: the text-decoration-color property"},{"refs":[{"id":"ref-for-propdef-text-decoration-line\u2461"},{"id":"ref-for-propdef-text-decoration-line\u2462"}],"title":"2.4. \nText Decoration Shorthand: the text-decoration property"},{"refs":[{"id":"ref-for-propdef-text-decoration-line\u2463"}],"title":"\nAppendix B: Default UA Stylesheet"}],"url":"#propdef-text-decoration-line"}, "propdef-text-decoration-style": {"dfnID":"propdef-text-decoration-style","dfnText":"text-decoration-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-decoration-style"}],"title":"2.2. \nText Decoration Style: the text-decoration-style property"},{"refs":[{"id":"ref-for-propdef-text-decoration-style\u2460"},{"id":"ref-for-propdef-text-decoration-style\u2461"},{"id":"ref-for-propdef-text-decoration-style\u2462"}],"title":"2.4. \nText Decoration Shorthand: the text-decoration property"}],"url":"#propdef-text-decoration-style"}, "propdef-text-emphasis": {"dfnID":"propdef-text-emphasis","dfnText":"text-emphasis","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-emphasis"}],"title":"3. \nEmphasis Marks"},{"refs":[{"id":"ref-for-propdef-text-emphasis\u2460"}],"title":"3.3. \nEmphasis Mark Shorthand: the text-emphasis property"},{"refs":[{"id":"ref-for-propdef-text-emphasis\u2461"}],"title":"5.1. \nPainting Order of Text Decorations"},{"refs":[{"id":"ref-for-propdef-text-emphasis\u2462"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"#propdef-text-emphasis"}, "propdef-text-emphasis-color": {"dfnID":"propdef-text-emphasis-color","dfnText":"text-emphasis-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-emphasis-color"}],"title":"3. \nEmphasis Marks"},{"refs":[{"id":"ref-for-propdef-text-emphasis-color\u2460"},{"id":"ref-for-propdef-text-emphasis-color\u2461"}],"title":"3.2. \nEmphasis Mark Color: the text-emphasis-color property"},{"refs":[{"id":"ref-for-propdef-text-emphasis-color\u2462"},{"id":"ref-for-propdef-text-emphasis-color\u2463"}],"title":"3.3. \nEmphasis Mark Shorthand: the text-emphasis property"}],"url":"#propdef-text-emphasis-color"}, "propdef-text-emphasis-position": {"dfnID":"propdef-text-emphasis-position","dfnText":"text-emphasis-position","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-emphasis-position"}],"title":"3. \nEmphasis Marks"},{"refs":[{"id":"ref-for-propdef-text-emphasis-position\u2460"}],"title":"3.3. \nEmphasis Mark Shorthand: the text-emphasis property"},{"refs":[{"id":"ref-for-propdef-text-emphasis-position\u2461"},{"id":"ref-for-propdef-text-emphasis-position\u2462"}],"title":"3.4. \nEmphasis Mark Position: the text-emphasis-position property"},{"refs":[{"id":"ref-for-propdef-text-emphasis-position\u2463"},{"id":"ref-for-propdef-text-emphasis-position\u2464"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"#propdef-text-emphasis-position"}, "propdef-text-emphasis-style": {"dfnID":"propdef-text-emphasis-style","dfnText":"text-emphasis-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-emphasis-style"}],"title":"3. \nEmphasis Marks"},{"refs":[{"id":"ref-for-propdef-text-emphasis-style\u2460"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"},{"refs":[{"id":"ref-for-propdef-text-emphasis-style\u2461"},{"id":"ref-for-propdef-text-emphasis-style\u2462"}],"title":"3.3. \nEmphasis Mark Shorthand: the text-emphasis property"}],"url":"#propdef-text-emphasis-style"}, "propdef-text-shadow": {"dfnID":"propdef-text-shadow","dfnText":"text-shadow","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-shadow"}],"title":"2. \nLine Decoration: Underline, Overline, and Strike-Through"},{"refs":[{"id":"ref-for-propdef-text-shadow\u2460"}],"title":"4. \nText Shadows: the text-shadow property"},{"refs":[{"id":"ref-for-propdef-text-shadow\u2461"}],"title":"5.1. \nPainting Order of Text Decorations"},{"refs":[{"id":"ref-for-propdef-text-shadow\u2462"}],"title":"\nChanges since the August 2019 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-text-shadow\u2463"},{"id":"ref-for-propdef-text-shadow\u2464"},{"id":"ref-for-propdef-text-shadow\u2465"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"#propdef-text-shadow"}, "propdef-text-underline-position": {"dfnID":"propdef-text-underline-position","dfnText":"text-underline-position","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-underline-position"}],"title":"2.1. \nText Decoration Lines: the text-decoration-line property"},{"refs":[{"id":"ref-for-propdef-text-underline-position\u2460"}],"title":"2.4. \nText Decoration Shorthand: the text-decoration property"},{"refs":[{"id":"ref-for-propdef-text-underline-position\u2461"},{"id":"ref-for-propdef-text-underline-position\u2462"},{"id":"ref-for-propdef-text-underline-position\u2463"},{"id":"ref-for-propdef-text-underline-position\u2464"}],"title":"2.5. \nText Underline Position: the text-underline-position property"},{"refs":[{"id":"ref-for-propdef-text-underline-position\u2465"}],"title":"\nChanges since the July 2018 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-text-underline-position\u2466"},{"id":"ref-for-propdef-text-underline-position\u2467"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"#propdef-text-underline-position"}, "underline-auto": {"dfnID":"underline-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-underline-auto"},{"id":"ref-for-underline-auto\u2460"}],"title":"2.5. \nText Underline Position: the text-underline-position property"},{"refs":[{"id":"ref-for-underline-auto\u2461"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"#underline-auto"}, "underline-left": {"dfnID":"underline-left","dfnText":"left","external":false,"refSections":[{"refs":[{"id":"ref-for-underline-left"},{"id":"ref-for-underline-left\u2460"},{"id":"ref-for-underline-left\u2461"},{"id":"ref-for-underline-left\u2462"}],"title":"2.5. \nText Underline Position: the text-underline-position property"},{"refs":[{"id":"ref-for-underline-left\u2463"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"#underline-left"}, "underline-right": {"dfnID":"underline-right","dfnText":"right","external":false,"refSections":[{"refs":[{"id":"ref-for-underline-right"},{"id":"ref-for-underline-right\u2460"},{"id":"ref-for-underline-right\u2461"},{"id":"ref-for-underline-right\u2462"}],"title":"2.5. \nText Underline Position: the text-underline-position property"},{"refs":[{"id":"ref-for-underline-right\u2463"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"#underline-right"}, "underline-under": {"dfnID":"underline-under","dfnText":"under","external":false,"refSections":[{"refs":[{"id":"ref-for-underline-under"},{"id":"ref-for-underline-under\u2460"},{"id":"ref-for-underline-under\u2461"},{"id":"ref-for-underline-under\u2462"}],"title":"2.5. \nText Underline Position: the text-underline-position property"},{"refs":[{"id":"ref-for-underline-under\u2463"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"#underline-under"}, "valdef-text-decoration-line-blink": {"dfnID":"valdef-text-decoration-line-blink","dfnText":"blink","external":false,"refSections":[],"url":"#valdef-text-decoration-line-blink"}, "valdef-text-decoration-line-line-through": {"dfnID":"valdef-text-decoration-line-line-through","dfnText":"line-through","external":false,"refSections":[],"url":"#valdef-text-decoration-line-line-through"}, "valdef-text-decoration-line-none": {"dfnID":"valdef-text-decoration-line-none","dfnText":"none","external":false,"refSections":[],"url":"#valdef-text-decoration-line-none"}, "valdef-text-decoration-line-overline": {"dfnID":"valdef-text-decoration-line-overline","dfnText":"overline","external":false,"refSections":[],"url":"#valdef-text-decoration-line-overline"}, "valdef-text-decoration-line-underline": {"dfnID":"valdef-text-decoration-line-underline","dfnText":"underline","external":false,"refSections":[],"url":"#valdef-text-decoration-line-underline"}, "valdef-text-emphasis-position-left": {"dfnID":"valdef-text-emphasis-position-left","dfnText":"left","external":false,"refSections":[],"url":"#valdef-text-emphasis-position-left"}, "valdef-text-emphasis-position-over": {"dfnID":"valdef-text-emphasis-position-over","dfnText":"over","external":false,"refSections":[],"url":"#valdef-text-emphasis-position-over"}, "valdef-text-emphasis-position-right": {"dfnID":"valdef-text-emphasis-position-right","dfnText":"right","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-emphasis-position-right"}],"title":"3.4. \nEmphasis Mark Position: the text-emphasis-position property"},{"refs":[{"id":"ref-for-valdef-text-emphasis-position-right\u2460"}],"title":"\nChanges since the August 2013 Candidate Recommendation"}],"url":"#valdef-text-emphasis-position-right"}, "valdef-text-emphasis-position-under": {"dfnID":"valdef-text-emphasis-position-under","dfnText":"under","external":false,"refSections":[],"url":"#valdef-text-emphasis-position-under"}, "valdef-text-emphasis-style-circle": {"dfnID":"valdef-text-emphasis-style-circle","dfnText":"circle","external":false,"refSections":[],"url":"#valdef-text-emphasis-style-circle"}, "valdef-text-emphasis-style-dot": {"dfnID":"valdef-text-emphasis-style-dot","dfnText":"dot","external":false,"refSections":[],"url":"#valdef-text-emphasis-style-dot"}, "valdef-text-emphasis-style-double-circle": {"dfnID":"valdef-text-emphasis-style-double-circle","dfnText":"double-circle","external":false,"refSections":[],"url":"#valdef-text-emphasis-style-double-circle"}, "valdef-text-emphasis-style-filled": {"dfnID":"valdef-text-emphasis-style-filled","dfnText":"filled","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-emphasis-style-filled"},{"id":"ref-for-valdef-text-emphasis-style-filled\u2460"},{"id":"ref-for-valdef-text-emphasis-style-filled\u2461"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"}],"url":"#valdef-text-emphasis-style-filled"}, "valdef-text-emphasis-style-none": {"dfnID":"valdef-text-emphasis-style-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-emphasis-style-none"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"}],"url":"#valdef-text-emphasis-style-none"}, "valdef-text-emphasis-style-sesame": {"dfnID":"valdef-text-emphasis-style-sesame","dfnText":"sesame","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-emphasis-style-sesame"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"}],"url":"#valdef-text-emphasis-style-sesame"}, "valdef-text-emphasis-style-string": {"dfnID":"valdef-text-emphasis-style-string","dfnText":"<string>","external":false,"refSections":[],"url":"#valdef-text-emphasis-style-string"}, "valdef-text-emphasis-style-triangle": {"dfnID":"valdef-text-emphasis-style-triangle","dfnText":"triangle","external":false,"refSections":[],"url":"#valdef-text-emphasis-style-triangle"}, "valdef-text-text-emphasis-open": {"dfnID":"valdef-text-text-emphasis-open","dfnText":"open","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-text-text-emphasis-open"},{"id":"ref-for-valdef-text-text-emphasis-open\u2460"}],"title":"3.1. \nEmphasis Mark Style: the text-emphasis-style property"}],"url":"#valdef-text-text-emphasis-open"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "https://drafts.csswg.org/css-color-5/#typedef-color": "Expands to: <alpha-value> | aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | currentcolor | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | none | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | transparent | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen", "https://drafts.csswg.org/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-position-annos */ "use strict"; { function repositionAnnoPanels(){ const panels = [...document.querySelectorAll("[data-anno-for]")]; hydratePanels(panels); let vSoFar = 0; for(const panel of panels.sort(cmpTops)) { if(panel.top < vSoFar) { panel.top = vSoFar; panel.style.top = vSoFar + "px"; } vSoFar = panel.top + panel.height + 15; } } function hydratePanels(panels) { const main = document.querySelector("main"); let mainRect; if(main) mainRect = main.getBoundingClientRect(); // First display them all, if they're not already visible. for(const panel of panels) { panel.classList.remove("unpositioned"); } // Measure them all for(const panel of panels) { const dfn = document.getElementById(panel.getAttribute("data-anno-for")); if(!dfn) { console.log("Can't find the annotation panel target:", panel); continue; } panel.dfn = dfn; panel.top = window.scrollY + dfn.getBoundingClientRect().top; let panelRect = panel.getBoundingClientRect(); panel.height = panelRect.height; if(main) { panel.overlappingMain = panelRect.left < mainRect.right; } else { panel.overlappingMain = false; } } // And finally position them for(const panel of panels) { const dfn = panel.dfn; if(!dfn) continue; panel.style.top = panel.top + "px"; panel.classList.toggle("overlapping-main", panel.overlappingMain); } } function cmpTops(a,b) { return a.top - b.top; } window.addEventListener("load", repositionAnnoPanels); window.addEventListener("resize", repositionAnnoPanels); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#decorating-box": {"displayText":"decorating box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"decorating box","type":"dfn","url":"#decorating-box"}, "#propdef-text-decoration": {"displayText":"text-decoration","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"text-decoration","type":"property","url":"#propdef-text-decoration"}, "#propdef-text-decoration-color": {"displayText":"text-decoration-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"text-decoration-color","type":"property","url":"#propdef-text-decoration-color"}, "#propdef-text-decoration-line": {"displayText":"text-decoration-line","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"text-decoration-line","type":"property","url":"#propdef-text-decoration-line"}, "#propdef-text-decoration-style": {"displayText":"text-decoration-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"text-decoration-style","type":"property","url":"#propdef-text-decoration-style"}, "#propdef-text-emphasis": {"displayText":"text-emphasis","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"text-emphasis","type":"property","url":"#propdef-text-emphasis"}, "#propdef-text-emphasis-color": {"displayText":"text-emphasis-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"text-emphasis-color","type":"property","url":"#propdef-text-emphasis-color"}, "#propdef-text-emphasis-position": {"displayText":"text-emphasis-position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"text-emphasis-position","type":"property","url":"#propdef-text-emphasis-position"}, "#propdef-text-emphasis-style": {"displayText":"text-emphasis-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"text-emphasis-style","type":"property","url":"#propdef-text-emphasis-style"}, "#propdef-text-shadow": {"displayText":"text-shadow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"text-shadow","type":"property","url":"#propdef-text-shadow"}, "#propdef-text-underline-position": {"displayText":"text-underline-position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"text-underline-position","type":"property","url":"#propdef-text-underline-position"}, "#underline-auto": {"displayText":"auto","export":true,"for_":["text-underline-position"],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"auto","type":"value","url":"#underline-auto"}, "#underline-left": {"displayText":"left","export":true,"for_":["text-underline-position"],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"left","type":"value","url":"#underline-left"}, "#underline-right": {"displayText":"right","export":true,"for_":["text-underline-position"],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"right","type":"value","url":"#underline-right"}, "#underline-under": {"displayText":"under","export":true,"for_":["text-underline-position"],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"under","type":"value","url":"#underline-under"}, "#valdef-text-emphasis-position-right": {"displayText":"right","export":true,"for_":["text-emphasis-position"],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"right","type":"value","url":"#valdef-text-emphasis-position-right"}, "#valdef-text-emphasis-style-filled": {"displayText":"filled","export":true,"for_":["text-emphasis-style"],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"filled","type":"value","url":"#valdef-text-emphasis-style-filled"}, "#valdef-text-emphasis-style-none": {"displayText":"none","export":true,"for_":["text-emphasis-style"],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"none","type":"value","url":"#valdef-text-emphasis-style-none"}, "#valdef-text-emphasis-style-sesame": {"displayText":"sesame","export":true,"for_":["text-emphasis-style"],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"sesame","type":"value","url":"#valdef-text-emphasis-style-sesame"}, "#valdef-text-text-emphasis-open": {"displayText":"open","export":true,"for_":["text-text-emphasis"],"level":"3","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-3","status":"local","text":"open","type":"value","url":"#valdef-text-text-emphasis-open"}, "https://drafts.csswg.org/css-backgrounds-3/#box-shadow-none": {"displayText":"none","export":true,"for_":["box-shadow"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"none","type":"value","url":"https://drafts.csswg.org/css-backgrounds-3/#box-shadow-none"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow": {"displayText":"box-shadow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"box-shadow","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow"}, "https://drafts.csswg.org/css-break-3/#fragment": {"displayText":"fragment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"fragment","type":"dfn","url":"https://drafts.csswg.org/css-break-3/#fragment"}, "https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor": {"displayText":"currentcolor","export":true,"for_":["<color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"current","text":"currentcolor","type":"value","url":"https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor"}, "https://drafts.csswg.org/css-color-5/#typedef-color": {"displayText":"<color>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-color","spec":"css-color-5","status":"current","text":"<color>","type":"type","url":"https://drafts.csswg.org/css-color-5/#typedef-color"}, "https://drafts.csswg.org/css-display-3/#propdef-display": {"displayText":"display","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"current","text":"display","type":"property","url":"https://drafts.csswg.org/css-display-3/#propdef-display"}, "https://drafts.csswg.org/css-display-4/#anonymous": {"displayText":"anonymous","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"anonymous","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#anonymous"}, "https://drafts.csswg.org/css-display-4/#atomic-inline": {"displayText":"atomic inline","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"atomic inline","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#atomic-inline"}, "https://drafts.csswg.org/css-display-4/#block-container": {"displayText":"block container","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block container","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-container"}, "https://drafts.csswg.org/css-display-4/#block-level": {"displayText":"block-level","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block-level","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-level"}, "https://drafts.csswg.org/css-display-4/#box": {"displayText":"box","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#box"}, "https://drafts.csswg.org/css-display-4/#in-flow": {"displayText":"in-flow","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"in-flow","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#in-flow"}, "https://drafts.csswg.org/css-display-4/#inline-box": {"displayText":"inline box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline-box"}, "https://drafts.csswg.org/css-display-4/#inline-formatting-context": {"displayText":"inline formatting context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline formatting context","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline-formatting-context"}, "https://drafts.csswg.org/css-display-4/#inline-level": {"displayText":"inline-level","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline-level","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline-level"}, "https://drafts.csswg.org/css-display-4/#non-replaced": {"displayText":"non-replaced","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"non-replaced","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#non-replaced"}, "https://drafts.csswg.org/css-display-4/#propdef-visibility": {"displayText":"visibility","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"visibility","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-variant-position": {"displayText":"font-variant-position","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-variant-position","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-variant-position"}, "https://drafts.csswg.org/css-fonts-4/#valdef-font-variant-east-asian-ruby": {"displayText":"ruby","export":true,"for_":["font-variant-east-asian"],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"ruby","type":"value","url":"https://drafts.csswg.org/css-fonts-4/#valdef-font-variant-east-asian-ruby"}, "https://drafts.csswg.org/css-inline-3/#propdef-vertical-align": {"displayText":"vertical-align","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"vertical-align","type":"property","url":"https://drafts.csswg.org/css-inline-3/#propdef-vertical-align"}, "https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-baseline": {"displayText":"baseline","export":true,"for_":["alignment-baseline","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"baseline","type":"value","url":"https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-baseline"}, "https://drafts.csswg.org/css-overflow-3/#ink-overflow": {"displayText":"ink overflow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"ink overflow","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#ink-overflow"}, "https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region": {"displayText":"scrollable overflow area","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scrollable overflow area","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region"}, "https://drafts.csswg.org/css-ruby-1/#ruby-annotation-box": {"displayText":"ruby annotation","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-ruby","spec":"css-ruby-1","status":"current","text":"ruby annotation","type":"dfn","url":"https://drafts.csswg.org/css-ruby-1/#ruby-annotation-box"}, "https://drafts.csswg.org/css-ruby-1/#ruby-base-box": {"displayText":"ruby base","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-ruby","spec":"css-ruby-1","status":"current","text":"ruby base","type":"dfn","url":"https://drafts.csswg.org/css-ruby-1/#ruby-base-box"}, "https://drafts.csswg.org/css-ruby-1/#ruby-container": {"displayText":"ruby container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-ruby","spec":"css-ruby-1","status":"current","text":"ruby container","type":"dfn","url":"https://drafts.csswg.org/css-ruby-1/#ruby-container"}, "https://drafts.csswg.org/css-text-4/#character": {"displayText":"character","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"character","type":"dfn","url":"https://drafts.csswg.org/css-text-4/#character"}, "https://drafts.csswg.org/css-text-4/#typographic-character-unit": {"displayText":"typographic character unit","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"typographic character unit","type":"dfn","url":"https://drafts.csswg.org/css-text-4/#typographic-character-unit"}, "https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-style-wavy": {"displayText":"wavy","export":true,"for_":["text-decoration-style"],"level":"4","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-4","status":"current","text":"wavy","type":"value","url":"https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-style-wavy"}, "https://drafts.csswg.org/css-values-4/#comb-all": {"displayText":"&&","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"&&","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-all"}, "https://drafts.csswg.org/css-values-4/#comb-any": {"displayText":"||","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"||","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "https://drafts.csswg.org/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"|","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "https://drafts.csswg.org/css-values-4/#css-wide-keywords": {"displayText":"CSS-wide keywords","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css-wide keywords","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "https://drafts.csswg.org/css-values-4/#length-value": {"displayText":"<length>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<length>","type":"type","url":"https://drafts.csswg.org/css-values-4/#length-value"}, "https://drafts.csswg.org/css-values-4/#mult-comma": {"displayText":"#","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"#","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-comma"}, "https://drafts.csswg.org/css-values-4/#mult-num-range": {"displayText":"{A,B}","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"{a,b}","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-num-range"}, "https://drafts.csswg.org/css-values-4/#mult-opt": {"displayText":"?","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"?","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "https://drafts.csswg.org/css-values-4/#string-value": {"displayText":"<string>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<string>","type":"type","url":"https://drafts.csswg.org/css-values-4/#string-value"}, "https://drafts.csswg.org/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":"current","text":"writing-mode","type":"property","url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "https://drafts.csswg.org/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":"current","text":"typographic mode","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#typographic-mode"}, "https://drafts.csswg.org/css-writing-modes-4/#under": {"displayText":"under","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"under","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#under"}, "https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-lr": {"displayText":"sideways-lr","export":true,"for_":["writing-mode"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"sideways-lr","type":"value","url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-lr"}, "https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-rl": {"displayText":"sideways-rl","export":true,"for_":["writing-mode"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"sideways-rl","type":"value","url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-sideways-rl"}, "https://drafts.csswg.org/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":"current","text":"vertical writing mode","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode"}, "https://drafts.csswg.org/css-writing-modes-4/#writing-mode": {"displayText":"writing mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"writing mode","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#writing-mode"}, "https://html.spec.whatwg.org/multipage/edits.html#the-del-element": {"displayText":"del","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"del","type":"element","url":"https://html.spec.whatwg.org/multipage/edits.html#the-del-element"}, "https://html.spec.whatwg.org/multipage/edits.html#the-ins-element": {"displayText":"ins","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"ins","type":"element","url":"https://html.spec.whatwg.org/multipage/edits.html#the-ins-element"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const ref = refsData[url]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script>