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 Speech Module Level 1</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-speech-1/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="1f4e5de6538eeaed2378d127300a62f95146562f" 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-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 Speech Module Level 1</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-speech-1/">https://drafts.csswg.org/css-speech-1/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-speech-1/">https://www.w3.org/TR/css-speech-1/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2020/CR-css-speech-1-20200310/" rel="prev">https://www.w3.org/TR/2020/CR-css-speech-1-20200310/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-speech-1">CSSWG Issues Repository</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="44692"><a class="p-name fn u-email email" href="mailto:lwatson@tetralogical.com">Léonie Watson</a> (Tetralogical) <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple) <dt class="editor">Former Editors: <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:dweck@daisy.org">Daniel Weck</a> (DAISY Consortium) <dd class="editor p-author h-card vcard">Claudio Santambrogio (Opera Software) <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:dsr@w3.org">Dave Raggett</a> (W3C / Canon) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-speech-1/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> The Speech module defines aural CSS properties that enable authors to declaratively control the rendering of documents via speech synthesis, and using optional audio cues. Note that this standard was developed in cooperation with the <a href="http://www.w3.org/Voice/">Voice Browser Activity</a>. <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-speech” in the title, like this: “[css-speech] …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-speech%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><a class="property css" data-link-type="property" href="#propdef-voice-balance" id="ref-for-propdef-voice-balance">voice-balance</a>, <a class="property css" data-link-type="property" href="#propdef-voice-duration" id="ref-for-propdef-voice-duration">voice-duration</a>, <a class="property css" data-link-type="property" href="#propdef-voice-pitch" id="ref-for-propdef-voice-pitch">voice-pitch</a>, <a class="property css" data-link-type="property" href="#propdef-voice-range" id="ref-for-propdef-voice-range">voice-range</a>, and <a class="property css" data-link-type="property" href="#propdef-voice-stress" id="ref-for-propdef-voice-stress">voice-stress</a> </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, design goals</a> <li><a href="#background">2 Background information, CSS 2.1</a> <li> <a href="#ssml-rel">3 Relationship with SSML</a> <ol class="toc"> <li><a href="#values">3.1 Value Definitions</a> </ol> <li><a href="#example">4 Example</a> <li><a href="#aural-model">5 The aural formatting model</a> <li> <a href="#mixing-props">6 Mixing properties</a> <ol class="toc"> <li><a href="#mixing-props-voice-volume">6.1 The voice-volume property</a> <li><a href="#mixing-props-voice-balance">6.2 The voice-balance property</a> </ol> <li> <a href="#speaking-props">7 Speaking properties</a> <ol class="toc"> <li><a href="#speaking-props-speak">7.1 The speak property</a> <li><a href="#speaking-props-speak-as">7.2 The speak-as property</a> </ol> <li> <a href="#pause-props">8 Pause properties </a> <ol class="toc"> <li><a href="#pause-props-pause-before-after">8.1 The pause-before and pause-after properties</a> <li><a href="#pause-props-pause">8.2 The pause shorthand property</a> <li><a href="#collapsed-pauses">8.3 Collapsing pauses</a> </ol> <li> <a href="#rest-props">9 Rest properties</a> <ol class="toc"> <li><a href="#rest-props-rest-before-after">9.1 The rest-before and rest-after properties</a> <li><a href="#rest-props-rest">9.2 The rest shorthand property</a> </ol> <li> <a href="#cue-props">10 Cue properties</a> <ol class="toc"> <li><a href="#cue-props-cue-before-after">10.1 The cue-before and cue-after properties</a> <li><a href="#cue-props-volume">10.2 Relation between audio cues and speech synthesis volume levels</a> <li><a href="#cue-props-cue">10.3 The cue shorthand property</a> </ol> <li> <a href="#voice-char-props">11 Voice characteristic properties</a> <ol class="toc"> <li><a href="#voice-props-voice-family">11.1 The voice-family property</a> <li><a href="#voice-props-voice-rate">11.2 The voice-rate property</a> <li><a href="#voice-props-voice-pitch">11.3 The voice-pitch property</a> <li><a href="#voice-props-voice-range">11.4 The voice-range property</a> <li><a href="#voice-props-voice-stress">11.5 The voice-stress property</a> </ol> <li> <a href="#duration-props">12 Voice duration property</a> <ol class="toc"> <li><a href="#mixing-props-voice-duration">12.1 The voice-duration property</a> </ol> <li><a href="#lists">13 List items and counters styles</a> <li><a href="#content">14 Inserted and replaced content</a> <li> <a href="#pronunciation">15 Pronunciation, phonemes </a> <ol class="toc"> <li><a href="#glossary"> Glossary</a> </ol> <li><a href="#ack"> Appendix D — Acknowledgements</a> <li><a href="#changes"> Appendix E — Changes</a> <li><a href="#privacy"> Privacy Considerations</a> <li><a href="#security"> Security Considerations</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#property-index"> Property Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction, design goals<a class="self-link" href="#intro"></a></h2> This section is non-normative. The aural presentation of information is commonly used by people who are blind, visually-impaired, or otherwise print-disabled. For instance, “screen readers” allow users to interact with visual interfaces that would otherwise be inaccessible to them. There are also circumstances in which listening to content (as opposed to reading) is preferred, or sometimes even required, irrespective of a person’s physical ability to access information. For instance: playing an e-book whilst driving a vehicle, learning how to manipulate industrial and medical devices, interacting with home entertainment systems, teaching young children how to read. The CSS properties defined in this Speech module enable authors to declaratively control the presentation of a document in the aural dimension. The aural rendering of a document combines speech synthesis (also known as “TTS”, the acronym for “Text to Speech”) and auditory icons (which are referred-to as “audio cues” in this specification). The CSS Speech properties provide the ability to control speech pitch and rate, sound levels, TTS voices, etc. These stylesheet properties can be used together with visual properties (mixed media), or as a complete aural alternative to a visual presentation. <h2 class="heading settled" data-level="2" id="background">2. Background information, CSS 2.1<a class="self-link" href="#background"></a></h2> This section is non-normative. The CSS Speech module is a re-work of the informative <a href="https://www.w3.org/TR/CSS2/aural.html">CSS2.1 Aural appendix</a>, within which the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/mediaqueries-5/#valdef-media-aural" id="ref-for-valdef-media-aural">aural</a> media type was described, but also deprecated (in favor of the speech media type, which has now also been deprecated). Although the <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> specification reserved the speech media type, it didn’t actually define the corresponding properties. The Speech module describes the CSS properties that apply to speech output, and defines a new “box” model specifically for the aural dimension. Content creators can include CSS properties for user agents with text to speech synthesis capabilities for any media type - though generally, they will only make sense for all and screen. These styles are simply ignored by user agents that do not support the Speech module. <h2 class="heading settled" data-level="3" id="ssml-rel">3. Relationship with SSML<a class="self-link" href="#ssml-rel"></a></h2> This section is non-normative. Some of the features in this specification are conceptually similar to functionality described in the Speech Synthesis Markup Language (SSML) Version 1.1 <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>. However, the specificities of the CSS model mean that compatibility with SSML in terms of syntax and/or semantics is only partially achievable. The definition of each property in the Speech module includes informative statements, wherever necessary, to clarify their relationship with similar functionality from SSML. <h3 class="heading settled" data-level="3.1" id="values">3.1. 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. <h2 class="heading settled" data-level="4" id="example">4. Example<a class="self-link" href="#example"></a></h2> <div class="example" id="example-ee54fc10"> <a class="self-link" href="#example-ee54fc10"></a> This example shows how authors can tell the speech synthesizer to speak HTML headings with a voice called "paul", using "moderate" emphasis (which is more than normal) and how to insert an audio cue (pre-recorded audio clip located at the given URL) before the start of TTS rendering for each heading. In a stereo-capable sound system, paragraphs marked with the CSS class <code>heidi</code> are rendered on the left audio channel (and with a female voice, etc.), whilst the class <code>peter</code> corresponds to the right channel (and to a male voice, etc.). The volume level of text spans marked with the class <code>special</code> is lower than normal, and a prosodic boundary is created by introducing a strong pause after it is spoken (note how the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element" id="ref-for-the-span-element">span</a></code> inherits the voice-family from its parent paragraph). <pre>h1, h2, h3, h4, h5, h6 { voice-family: paul; voice-stress: moderate; cue-before: url(../audio/ping.wav); voice-volume: medium 6dB; } p.heidi { voice-family: female; voice-balance: left; voice-pitch: high; voice-volume: -6dB; } p.peter { voice-family: male; voice-balance: right; voice-rate: fast; } span.special { voice-volume: soft; pause-after: strong; } ... <h1>I am Paul, and I speak headings.</h1> Hello, I am Heidi. Can you hear me ? I am Peter. </pre> </div> <h2 class="heading settled" data-level="5" id="aural-model">5. The aural formatting model<a class="self-link" href="#aural-model"></a></h2> The CSS formatting model for aural media is based on a sequence of sounds and silences that occur within a nested context similar to the <a href="https://www.w3.org/TR/css-box-3/#box-model">visual box model</a>, which we name the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="aural box model" id="aural-box-model">aural “box” model</dfn>. The aural “canvas” consists of a two-channel (stereo) space and of a temporal dimension, within which synthetic speech and audio cues coexist. The selected element is surrounded by <a class="property css" data-link-type="property" href="#propdef-rest" id="ref-for-propdef-rest">rest</a>, <a class="property css" data-link-type="property" href="#propdef-cue" id="ref-for-propdef-cue">cue</a> and <a class="property css" data-link-type="property" href="#propdef-pause" id="ref-for-propdef-pause">pause</a> properties (from the innermost to the outermost position). These can be seen as aural equivalents to <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding" id="ref-for-propdef-padding">padding</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border" id="ref-for-propdef-border">border</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin" id="ref-for-propdef-margin">margin</a>, respectively. When used, the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before">::before</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-after" id="ref-for-selectordef-after">::after</a> pseudo-elements <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> get inserted between the element’s contents and the rest. The following diagram illustrates the equivalence between properties of the visual and aural box models, applied to the selected <element>: <img alt="The aural 'box' model, illustrated by a diagram: the selected element is positioned in the center, on its left side are (from innermost to outermost) rest-before, cue-before, pause-before, on its right side are (from innermost to outermost) rest-after, cue-after, pause-after, where rest is conceptually similar to padding, cue is similar to border, pause is similar to margin." height="331" id="aural-box" src="images/aural-box.png" title="The aural 'box' model, illustrated by a diagram: the selected element is positioned in the center, on its left side are (from innermost to outermost) rest-before, cue-before, pause-before, on its right side are (from innermost to outermost) rest-after, cue-after, pause-after, where rest is conceptually similar to padding, cue is similar to border, pause is similar to margin." width="363"> <h2 class="heading settled" data-level="6" id="mixing-props">6. Mixing properties<a class="self-link" href="#mixing-props"></a></h2> <h3 class="heading settled" data-level="6.1" id="mixing-props-voice-volume">6.1. The <a class="property css" data-link-type="property" href="#propdef-voice-volume" id="ref-for-propdef-voice-volume">voice-volume</a> property<a class="self-link" href="#mixing-props-voice-volume"></a></h3> <table class="def propdef" data-link-for-hint="voice-volume"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-voice-volume">voice-volume</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">silent <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> [[x-soft | soft | medium | loud | x-loud] <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="type" href="#typedef-voice-volume-decibel" id="ref-for-typedef-voice-volume-decibel"><decibel></a>] <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>medium <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><a class="css" data-link-type="maybe" href="#valdef-voice-volume-silent" id="ref-for-valdef-voice-volume-silent">silent</a>, or a keyword value and optionally also a decibel offset (if not zero) <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-voice-volume" id="ref-for-propdef-voice-volume①">voice-volume</a> property allows authors to control the amplitude of the audio waveform generated by the speech synthesizer, and is also used to adjust the relative volume level of <a href="#cue-props">audio cues</a> within the <a data-link-type="dfn" href="#aural-box-model" id="ref-for-aural-box-model">aural box model</a> of the selected element. Note: Although the functionality provided by this property is similar to the <a href="https://www.w3.org/TR/speech-synthesis11/#edef_prosody"><code>volume</code> attribute of the <code>prosody</code> element</a> from the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>, there are notable discrepancies. For example, CSS Speech volume keywords and decibels units are not mutually-exclusive, due to how values are inherited and combined for selected elements. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="voice-volume" data-dfn-type="value" data-export id="valdef-voice-volume-silent">silent</dfn> <dd> Specifies that no sound is generated (the text is read "silently"). Note: This has the same effect as using negative infinity decibels. Also note that there is a difference between an element whose <a class="property css" data-link-type="property" href="#propdef-voice-volume" id="ref-for-propdef-voice-volume②">voice-volume</a> property has a value of <a class="css" data-link-type="maybe" href="#valdef-voice-volume-silent" id="ref-for-valdef-voice-volume-silent①">silent</a>, and an element whose <a class="property css" data-link-type="property" href="#propdef-speak" id="ref-for-propdef-speak">speak</a> property has the value none. With the former, the selected element takes up the same time as if it was spoken, including any pause before and after the element, but no sound is generated (and descendants within the <a data-link-type="dfn" href="#aural-box-model" id="ref-for-aural-box-model①">aural box model</a> of the selected element can override the voice-volume value, and may therefore generate audio output). With the latter, the selected element is not rendered in the aural dimension and no time is allocated for playback (descendants within the aural box model of the selected element can override the speak value, and may therefore generate audio output). <dt><dfn class="dfn-paneled css" data-dfn-for="voice-volume" data-dfn-type="value" data-export id="valdef-voice-volume-x-soft">x-soft</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-volume" data-dfn-type="value" data-export id="valdef-voice-volume-soft">soft</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-volume" data-dfn-type="value" data-export id="valdef-voice-volume-medium">medium</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-volume" data-dfn-type="value" data-export id="valdef-voice-volume-loud">loud</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-volume" data-dfn-type="value" data-export id="valdef-voice-volume-x-loud">x-loud</dfn> <dd> This sequence of keywords corresponds to monotonically non-decreasing volume levels, mapped to implementation-dependent values that meet the listener’s requirements with regards to perceived loudness. These audio levels are typically provided via a preference mechanism that allow users to calibrate sound options according to their auditory environment. The keyword <a class="css" data-link-type="maybe" href="#valdef-voice-volume-x-soft" id="ref-for-valdef-voice-volume-x-soft">x-soft</a> maps to the user’s minimum audible volume level, <a class="css" data-link-type="maybe" href="#valdef-voice-volume-x-loud" id="ref-for-valdef-voice-volume-x-loud">x-loud</a> maps to the user’s maximum tolerable volume level, <a class="css" data-link-type="maybe" href="#valdef-voice-volume-medium" id="ref-for-valdef-voice-volume-medium">medium</a> maps to the user’s preferred volume level, <a class="css" data-link-type="maybe" href="#valdef-voice-volume-soft" id="ref-for-valdef-voice-volume-soft">soft</a> and <a class="css" data-link-type="maybe" href="#valdef-voice-volume-loud" id="ref-for-valdef-voice-volume-loud">loud</a> map to intermediary values. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-volume" data-dfn-type="value" data-export id="valdef-voice-volume-decibel"><a class="production css" data-link-type="type" href="#typedef-voice-volume-decibel" id="ref-for-typedef-voice-volume-decibel①"><decibel></a></dfn> <dd> This represents a change (positive or negative) relative to the given keyword value (see enumeration above), or to the default value for the root element, or otherwise to the inherited volume level (which may itself be a combination of a keyword value and decibel offset, in which case the decibel values are combined additively). When the inherited volume level is <a class="css" data-link-type="maybe" href="#valdef-voice-volume-silent" id="ref-for-valdef-voice-volume-silent②">silent</a>, this <a class="property css" data-link-type="property" href="#propdef-voice-volume" id="ref-for-propdef-voice-volume④">voice-volume</a> resolves to silent too, regardless of the specified <a class="production css" data-link-type="type" href="#typedef-voice-volume-decibel" id="ref-for-typedef-voice-volume-decibel②"><decibel></a> value. The <dfn class="dfn-paneled css" data-dfn-for="voice-volume" data-dfn-type="type" data-export id="typedef-voice-volume-decibel"><a class="production css" data-link-type="type" href="#typedef-voice-volume-decibel" id="ref-for-typedef-voice-volume-decibel③"><decibel></a></dfn> type denotes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#dimension" id="ref-for-dimension">dimension</a> with a "dB" (decibel unit) unit identifier. Decibels represent the ratio of the squares of the new signal amplitude <var>a1</var> and the current amplitude <var>a0</var>, as per the following logarithmic equation: volume(dB) = 20 × log10(<var>a1</var> / <var>a0</var>). Note: -6.0dB is approximately half the amplitude of the audio signal, and +6.0dB is approximately twice the amplitude. </dl> Note: Perceived loudness depends on various factors, such as the listening environment, user preferences or physical abilities. The effective volume variation between <a class="css" data-link-type="maybe" href="#valdef-voice-volume-x-soft" id="ref-for-valdef-voice-volume-x-soft①">x-soft</a> and <a class="css" data-link-type="maybe" href="#valdef-voice-volume-x-loud" id="ref-for-valdef-voice-volume-x-loud①">x-loud</a> represents the dynamic range (in terms of loudness) of the audio output. Typically, this range would be compressed in a noisy context, i.e. the perceived loudness corresponding to x-soft would effectively be closer to x-loud than it would be in a quiet environment. There may also be situations where both x-soft and x-loud would map to low volume levels, such as in listening environments requiring discretion (e.g. library, night-reading). <h3 class="heading settled" data-level="6.2" id="mixing-props-voice-balance">6.2. The <a class="property css" data-link-type="property" href="#propdef-voice-balance" id="ref-for-propdef-voice-balance①">voice-balance</a> property<a class="self-link" href="#mixing-props-voice-balance"></a></h3> <table class="def propdef" data-link-for-hint="voice-balance"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-voice-balance">voice-balance</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-values-4/#number-value" id="ref-for-number-value"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> left | center | right | leftwards | rightwards <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>center <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>the specified value resolved to a <number> between -100 and 100 (inclusive) <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-voice-balance" id="ref-for-propdef-voice-balance②">voice-balance</a> property controls the spatial distribution of audio output across a lateral sound stage: one extremity is on the left, the other extremity is on the right hand side, relative to the listener’s position. Authors can specify intermediary steps between left hand right extremities, to represent the audio separation along the resulting left-right axis. Note: The functionality provided by this property has no match in the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="voice-balance" data-dfn-type="value" data-export id="valdef-voice-balance-number"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①"><number></a></dfn> <dd> A <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#number" id="ref-for-number">number</a> between -100 and 100 (inclusive). Values smaller than -100 are clamped to -100. Values greater than 100 are clamped to 100. The value -100 represents the left side, and the value 100 represents the right side. The value 0 represents the center point whereby there is no discernible audio separation between left and right sides. (In a stereo sound system, this corresponds to equal distribution of audio signals between left and right speakers). <dt><dfn class="dfn-paneled css" data-dfn-for="voice-balance" data-dfn-type="value" data-export id="valdef-voice-balance-left">left</dfn> <dd> Same as -100. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-balance" data-dfn-type="value" data-export id="valdef-voice-balance-center">center</dfn> <dd> Same as 0. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-balance" data-dfn-type="value" data-export id="valdef-voice-balance-right">right</dfn> <dd> Same as 100. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-balance" data-dfn-type="value" data-export id="valdef-voice-balance-leftwards">leftwards</dfn> <dd> Moves the sound to the left by subtracting 20 from the inherited <a class="property css" data-link-type="property" href="#propdef-voice-balance" id="ref-for-propdef-voice-balance③">voice-balance</a> value (and by clamping the resulting number to -100). <dt><dfn class="dfn-paneled css" data-dfn-for="voice-balance" data-dfn-type="value" data-export id="valdef-voice-balance-rightwards">rightwards</dfn> <dd> Moves the sound to the right, by adding 20 to the inherited <a class="property css" data-link-type="property" href="#propdef-voice-balance" id="ref-for-propdef-voice-balance④">voice-balance</a> value (and by clamping the resulting number to 100). </dl> User agents can be connected to different kinds of sound systems, featuring varying audio mixing capabilities. The expected behavior for mono, stereo, and surround sound systems is defined as follows: <ul> <li data-md> When user agents produce audio via a mono-aural sound system (i.e. single-speaker setup), the <a class="property css" data-link-type="property" href="#propdef-voice-balance" id="ref-for-propdef-voice-balance⑤">voice-balance</a> property has no effect. <li data-md> When user agents produce audio through a stereo sound system (e.g. two speakers, or a pair of headphones), the left-right distribution of audio signals can precisely match the authored values for the <a class="property css" data-link-type="property" href="#propdef-voice-balance" id="ref-for-propdef-voice-balance⑥">voice-balance</a> property. <li data-md> When user agents are capable of mixing audio signals through more than 2 channels (e.g. 5-speakers surround sound system, including a dedicated center channel), the physical distribution of audio signals resulting from the application of the <a class="property css" data-link-type="property" href="#propdef-voice-balance" id="ref-for-propdef-voice-balance⑦">voice-balance</a> property should be performed so that the listener perceives sound as if it was coming from a basic stereo layout. For example, the center channel as well as the left/right speakers may be used all together in order to emulate the behavior of the <a class="css" data-link-type="maybe" href="#valdef-voice-balance-center" id="ref-for-valdef-voice-balance-center">center</a> value. </ul> Future revisions of the CSS Speech module may include support for three-dimensional audio, which would effectively enable authors to specify “azimuth” and “elevation” values. In the future, content authored using the current specification may therefore be consumed by user agents which are compliant with the version of CSS Speech that supports three-dimensional audio. In order to prepare for this possibility, the values enabled by the current <a class="property css" data-link-type="property" href="#propdef-voice-balance" id="ref-for-propdef-voice-balance⑧">voice-balance</a> property are designed to remain compatible with “azimuth” angles. More precisely, the mapping between the current left-right audio axis (lateral sound stage) and the envisioned 360 degrees plane around the listener’s position is defined as follows: <ul> <li data-md> The value 0 maps to zero degrees (<a class="css" data-link-type="maybe" href="#valdef-voice-balance-center" id="ref-for-valdef-voice-balance-center①">center</a>). This is in "front" of the listener, not from "behind". <li data-md> The value -100 maps to -40 degrees (<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a>). Negative angles are in the counter-clockwise direction (assuming the audio stage is seen from the top). <li data-md> The value 100 maps to 40 degrees (<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right">right</a>). Positive angles are in the clockwise direction (assuming the audio stage is seen from the top). <li data-md> Intermediary values on the scale from 100 to 100 map to the angles between -40 and 40 degrees in a numerically linearly-proportional manner. For example, -50 maps to -20 degrees. </ul> Note: Sound systems can be configured by users in such a way that it would interfere with the left-right audio distribution specified by document authors. Typically, the various “surround” modes available in modern sound systems (including systems based on basic stereo speakers) tend to greatly alter the perceived spatial arrangement of audio signals. The illusion of a three-dimensional sound stage is often achieved using a combination of phase shifting, digital delay, volume control (channel mixing), and other techniques. Some users may even configure their system to “downgrade” any rendered sound to a single mono channel, in which case the effect of the <a class="property css" data-link-type="property" href="#propdef-voice-balance" id="ref-for-propdef-voice-balance⑨">voice-balance</a> property would obviously not be perceivable at all. The rendering fidelity of authored content is therefore dependent on such user customizations, and the voice-balance property merely specifies the desired end-result. Note: Many speech synthesizers only generate mono sound, and therefore do not intrinsically support the <a class="property css" data-link-type="property" href="#propdef-voice-balance" id="ref-for-propdef-voice-balance①①">voice-balance</a> property. The sound distribution along the left-right axis consequently occurs at post-synthesis stage (when the speech-enabled user agent mixes the various audio sources authored within the document) <h2 class="heading settled" data-level="7" id="speaking-props">7. Speaking properties<a class="self-link" href="#speaking-props"></a></h2> <h3 class="heading settled" data-level="7.1" id="speaking-props-speak">7.1. The <a class="property css" data-link-type="property" href="#propdef-speak" id="ref-for-propdef-speak②">speak</a> property<a class="self-link" href="#speaking-props-speak"></a></h3> <table class="def propdef" data-link-for-hint="speak"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-speak">speak</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> never | always <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 value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-speak" id="ref-for-propdef-speak③">speak</a> property determines whether or not to render text aurally. Note: The functionality provided by this property has no match in the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="speak" data-dfn-type="value" data-export id="valdef-speak-auto">auto</dfn> <dd> Resolves to a computed value of <a class="css" data-link-type="maybe" href="#valdef-speak-never" id="ref-for-valdef-speak-never">never</a> when <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display">display</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-none" id="ref-for-valdef-display-none">none</a>, otherwise resolves to a computed value of <a class="css" data-link-type="maybe" href="#valdef-speak-auto" id="ref-for-valdef-speak-auto">auto</a>. The used value of a computed auto is equivalent to <a class="css" data-link-type="maybe" href="#valdef-speak-always" id="ref-for-valdef-speak-always">always</a> if <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> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-visibility-visible" id="ref-for-valdef-visibility-visible">visible</a> and to never otherwise. Note: The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-none" id="ref-for-valdef-display-none①">none</a> value of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display①">display</a> property cannot be overridden by descendants of the selected element, but the <a class="css" data-link-type="maybe" href="#valdef-speak-auto" id="ref-for-valdef-speak-auto②">auto</a> value of <a class="property css" data-link-type="property" href="#propdef-speak" id="ref-for-propdef-speak④">speak</a> can, however, be overridden using either of <a class="css" data-link-type="maybe" href="#valdef-speak-never" id="ref-for-valdef-speak-never②">never</a> or <a class="css" data-link-type="maybe" href="#valdef-speak-always" id="ref-for-valdef-speak-always①">always</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="speak" data-dfn-type="value" data-export id="valdef-speak-never">never</dfn> <dd> This value causes an element (including pauses, cues, rests and actual content) to not be rendered (i.e., the element has no effect in the aural dimension). Note: Any of the descendants of the affected element are allowed to override this value, so descendants can actually take part in the aural rendering despite using <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display②">display: none</a> at this level. However, the pauses, cues, and rests of the ancestor element remain “deactivated” in the aural dimension, and therefore do not contribute to the <a href="#collapsed-pauses">collapsing of pauses</a> or additive behavior of adjoining rests. <dt><dfn class="dfn-paneled css" data-dfn-for="speak" data-dfn-type="value" data-export id="valdef-speak-always">always</dfn> <dd> The element is rendered aurally (regardless of its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display③">display</a> value, or the display or <a class="property css" data-link-type="property" href="#propdef-speak" id="ref-for-propdef-speak⑤">speak</a> values of its ancestors). Note: Using this value can result in the element being rendered in the aural dimension even though it would not be rendered on the visual canvas. </dl> <h3 class="heading settled" data-level="7.2" id="speaking-props-speak-as">7.2. The <a class="property css" data-link-type="property" href="#propdef-speak-as" id="ref-for-propdef-speak-as">speak-as</a> property<a class="self-link" href="#speaking-props-speak-as"></a></h3> <table class="def propdef" data-link-for-hint="speak-as"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-speak-as">speak-as</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> spell-out <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any①">||</a> digits || [ literal-punctuation | no-punctuation ] <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>normal <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-speak-as" id="ref-for-propdef-speak-as①">speak-as</a> property determines in what manner text gets rendered aurally, based upon a predefined list of possibilities. Note: The functionality provided by this property is conceptually similar to the <a href="https://www.w3.org/TR/speech-synthesis11/#edef_say-as"><code>say-as</code> element</a> from the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a> (whose possible values are described in the <a data-link-type="biblio" href="#biblio-ssml-sayas" title="SSML 1.0 say-as attribute values">[SSML-SAYAS]</a> W3C Note). Although the design goals are similar, the CSS model is limited to a basic set of pronunciation rules. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="speak-as" data-dfn-type="value" data-export id="valdef-speak-as-normal">normal</dfn> <dd> Uses language-dependent pronunciation rules for rendering the element’s content. For example, punctuation is not spoken as-is, but instead rendered naturally as appropriate pauses. <dt><dfn class="dfn-paneled css" data-dfn-for="speak-as" data-dfn-type="value" data-export id="valdef-speak-as-spell-out">spell-out</dfn> <dd> Spells the text one letter at a time (useful for acronyms and abbreviations). In languages where accented characters are rare, it is permitted to drop accents in favor of alternative unaccented spellings. As an example, in English, the word “rôle” can also be written as “role”. A conforming implementation would thus be able to spell-out “rôle” as “R O L E”. <dt><dfn class="dfn-paneled css" data-dfn-for="speak-as" data-dfn-type="value" data-export id="valdef-speak-as-digits">digits</dfn> <dd> Speak numbers one digit at a time, for instance, “twelve” would be spoken as “one two”, and “31” as “three one”. Note: Speech synthesizers are knowledgeable about what a number is. The <a class="property css" data-link-type="property" href="#propdef-speak-as" id="ref-for-propdef-speak-as②">speak-as</a> property enables some level of control on how user agents render numbers, and may be implemented as a preprocessing step before passing the text to the actual speech synthesizer. <dt><dfn class="dfn-paneled css" data-dfn-for="speak-as" data-dfn-type="value" data-export id="valdef-speak-as-literal-punctuation">literal-punctuation</dfn> <dd> Punctuation such as semicolons, braces, and so on is named aloud (i.e. spoken literally) rather than rendered naturally as appropriate pauses. <dt><dfn class="dfn-paneled css" data-dfn-for="speak-as" data-dfn-type="value" data-export id="valdef-speak-as-no-punctuation">no-punctuation</dfn> <dd> Punctuation is not rendered: neither spoken nor rendered as pauses. </dl> <h2 class="heading settled" data-level="8" id="pause-props">8. Pause properties <a class="self-link" href="#pause-props"></a></h2> <h3 class="heading settled" data-level="8.1" id="pause-props-pause-before-after">8.1. The <a class="property css" data-link-type="property" href="#propdef-pause-before" id="ref-for-propdef-pause-before">pause-before</a> and <a class="property css" data-link-type="property" href="#propdef-pause-after" id="ref-for-propdef-pause-after">pause-after</a> properties<a class="self-link" href="#pause-props-pause-before-after"></a></h3> <table class="def propdef" data-link-for-hint="pause-before"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-pause-before">pause-before</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-pause-after">pause-after</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><time [0s<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma">,</a>∞]> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> none | x-weak | weak | medium | strong | x-strong <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 <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-pause-before" id="ref-for-propdef-pause-before①">pause-before</a> and <a class="property css" data-link-type="property" href="#propdef-pause-after" id="ref-for-propdef-pause-after①">pause-after</a> properties specify a prosodic boundary (silence with a specific duration) that occurs before (or after) the speech synthesis rendition of the element, or if any <a class="property css" data-link-type="property" href="#propdef-cue-before" id="ref-for-propdef-cue-before">cue-before</a> (or <a class="property css" data-link-type="property" href="#propdef-cue-after" id="ref-for-propdef-cue-after">cue-after</a>) is specified, before (or after) the cue within the <a data-link-type="dfn" href="#aural-box-model" id="ref-for-aural-box-model③">aural box model</a>. Note Although the functionality provided by this property is similar to the <a href="https://www.w3.org/TR/speech-synthesis11/#edef_break"><code>break</code> element</a> from the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>, the application of <a class="property css" data-link-type="property" href="#propdef-pause" id="ref-for-propdef-pause①">pause</a> prosodic boundaries within the <a data-link-type="dfn" href="#aural-box-model" id="ref-for-aural-box-model④">aural box model</a> of CSS Speech requires special considerations (e.g. <a href="#collapsed-pauses">"collapsed" pauses</a>). <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="pause-before,pause-after" data-dfn-type="value" data-export id="valdef-pause-before-time-0s"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#time-value" id="ref-for-time-value"><time [0s,∞]></a></dfn> <dd> Expresses the pause in absolute time units (seconds and milliseconds, e.g. "+3s", "250ms"). Only non-negative values are allowed. <dt><dfn class="dfn-paneled css" data-dfn-for="pause-before,pause-after" data-dfn-type="value" data-export id="valdef-pause-before-none">none</dfn> <dd> Equivalent to 0ms (no prosodic break is produced by the speech processor). <dt><dfn class="dfn-paneled css" data-dfn-for="pause-before,pause-after" data-dfn-type="value" data-export id="valdef-pause-before-x-weak">x-weak</dfn>, <dfn class="dfn-paneled css" data-dfn-for="pause-before,pause-after" data-dfn-type="value" data-export id="valdef-pause-before-weak">weak</dfn>, <dfn class="dfn-paneled css" data-dfn-for="pause-before,pause-after" data-dfn-type="value" data-export id="valdef-pause-before-medium">medium</dfn>, <dfn class="dfn-paneled css" data-dfn-for="pause-before,pause-after" data-dfn-type="value" data-export id="valdef-pause-before-strong">strong</dfn>, and <dfn class="dfn-paneled css" data-dfn-for="pause-before,pause-after" data-dfn-type="value" data-export id="valdef-pause-before-x-strong">x-strong</dfn> <dd> Expresses the pause by the strength of the prosodic break in speech output. The exact time is implementation-dependent. The values indicate monotonically non-decreasing (conceptually increasing) break strength between elements. </dl> Note: Stronger content boundaries are typically accompanied by pauses. For example, the breaks between paragraphs are typically much more substantial than the breaks between words within a sentence. <div class="example" id="example-1bceb2dc"> <a class="self-link" href="#example-1bceb2dc"></a> This example illustrates how the default strengths of prosodic breaks for specific elements (which are defined by the user agent stylesheet) can be overridden by authored styles. <pre>p { pause: none } /* pause-before: none; pause-after: none */ </pre> </div> <h3 class="heading settled" data-level="8.2" id="pause-props-pause">8.2. The <a class="property css" data-link-type="property" href="#propdef-pause" id="ref-for-propdef-pause②">pause</a> shorthand property<a class="self-link" href="#pause-props-pause"></a></h3> <table class="def propdef" data-link-for-hint="pause"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-pause">pause</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-pause-before" id="ref-for-propdef-pause-before②"><'pause-before'></a> <a class="production css" data-link-type="property" href="#propdef-pause-after" id="ref-for-propdef-pause-after②"><'pause-after'></a><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>N/A (see individual properties) <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>N/A (see individual properties) <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-pause" id="ref-for-propdef-pause③">pause</a> property is a shorthand property for <a class="property css" data-link-type="property" href="#propdef-pause-before" id="ref-for-propdef-pause-before③">pause-before</a> and <a class="property css" data-link-type="property" href="#propdef-pause-after" id="ref-for-propdef-pause-after③">pause-after</a>. If two values are given, the first value is pause-before and the second is pause-after. If only one value is given, it applies to both properties. <div class="example" id="example-377a7cf6"> <a class="self-link" href="#example-377a7cf6"></a> Examples of property values: <pre>h1 { pause: 20ms; } /* pause-before: 20ms; pause-after: 20ms */ h2 { pause: 30ms 40ms; } /* pause-before: 30ms; pause-after: 40ms */ h3 { pause-after: 10ms; } /* pause-before: unspecified; pause-after: 10ms */ </pre> </div> <h3 class="heading settled" data-level="8.3" id="collapsed-pauses">8.3. Collapsing pauses<a class="self-link" href="#collapsed-pauses"></a></h3> The pause defines the minimum distance of the aural "box" to the aural "boxes" before and after it. Adjoining pauses are merged by selecting the strongest named break and the longest absolute time interval. For example, "strong" is selected when merging "strong" and "weak", "1s" is selected when merging "1s" and "250ms", and "strong" and "250ms" take effect additively when merging "strong" and "250ms". The following pauses are adjoining: <ul> <li>The <a class="property css" data-link-type="property" href="#propdef-pause-after" id="ref-for-propdef-pause-after⑤">pause-after</a> of an aural "box" and the pause-after of its last child, provided the former has no <a class="property css" data-link-type="property" href="#propdef-rest-after" id="ref-for-propdef-rest-after">rest-after</a> and no <a class="property css" data-link-type="property" href="#propdef-cue-after" id="ref-for-propdef-cue-after①">cue-after</a>. <li>The <a class="property css" data-link-type="property" href="#propdef-pause-before" id="ref-for-propdef-pause-before⑤">pause-before</a> of an aural "box" and the pause-before of its first child, provided the former has no <a class="property css" data-link-type="property" href="#propdef-rest-before" id="ref-for-propdef-rest-before">rest-before</a> and no <a class="property css" data-link-type="property" href="#propdef-cue-before" id="ref-for-propdef-cue-before①">cue-before</a>. <li>The <a class="property css" data-link-type="property" href="#propdef-pause-after" id="ref-for-propdef-pause-after⑦">pause-after</a> of an aural "box" and the <a class="property css" data-link-type="property" href="#propdef-pause-before" id="ref-for-propdef-pause-before⑦">pause-before</a> of its next sibling. <li>The <a class="property css" data-link-type="property" href="#propdef-pause-before" id="ref-for-propdef-pause-before⑧">pause-before</a> and <a class="property css" data-link-type="property" href="#propdef-pause-after" id="ref-for-propdef-pause-after⑧">pause-after</a> of an aural "box", if the "box" has a <a class="property css" data-link-type="property" href="#propdef-voice-duration" id="ref-for-propdef-voice-duration①">voice-duration</a> of "0ms" and no <a class="property css" data-link-type="property" href="#propdef-rest-before" id="ref-for-propdef-rest-before①">rest-before</a> or <a class="property css" data-link-type="property" href="#propdef-rest-after" id="ref-for-propdef-rest-after①">rest-after</a> and no <a class="property css" data-link-type="property" href="#propdef-cue-before" id="ref-for-propdef-cue-before②">cue-before</a> or <a class="property css" data-link-type="property" href="#propdef-cue-after" id="ref-for-propdef-cue-after②">cue-after</a>, or if the "box" has no rendered content at all (see <a class="property css" data-link-type="property" href="#propdef-speak" id="ref-for-propdef-speak⑥">speak</a>). </ul> A collapsed pause is considered adjoining to another pause if any of its component pauses is adjoining to that pause. Note: <a class="property css" data-link-type="property" href="#propdef-pause" id="ref-for-propdef-pause④">pause</a> has been moved from between the element’s contents and any <a class="property css" data-link-type="property" href="#propdef-cue" id="ref-for-propdef-cue①">cue</a> to outside the cue. This is not backwards compatible with the informative CSS2.1 Aural appendix <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. <h2 class="heading settled" data-level="9" id="rest-props">9. Rest properties<a class="self-link" href="#rest-props"></a></h2> <h3 class="heading settled" data-level="9.1" id="rest-props-rest-before-after">9.1. The <a class="property css" data-link-type="property" href="#propdef-rest-before" id="ref-for-propdef-rest-before②">rest-before</a> and <a class="property css" data-link-type="property" href="#propdef-rest-after" id="ref-for-propdef-rest-after②">rest-after</a> properties<a class="self-link" href="#rest-props-rest-before-after"></a></h3> <table class="def propdef" data-link-for-hint="rest-before"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-rest-before">rest-before</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-rest-after">rest-after</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-values-4/#time-value" id="ref-for-time-value①"><time [0s,∞]></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a> none | x-weak | weak | medium | strong | x-strong <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 <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-rest-before" id="ref-for-propdef-rest-before③">rest-before</a> and <a class="property css" data-link-type="property" href="#propdef-rest-after" id="ref-for-propdef-rest-after③">rest-after</a> properties specify a prosodic boundary (silence with a specific duration) that occurs before (or after) the speech synthesis rendition of an element within the <a data-link-type="dfn" href="#aural-box-model" id="ref-for-aural-box-model⑤">aural box model</a>. Note: Although the functionality provided by this property is similar to the <a href="https://www.w3.org/TR/speech-synthesis11/#edef_break"><code>break</code> element</a> from the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>, the application of <a class="property css" data-link-type="property" href="#propdef-rest" id="ref-for-propdef-rest②">rest</a> prosodic boundaries within the <a data-link-type="dfn" href="#aural-box-model" id="ref-for-aural-box-model⑥">aural box model</a> of CSS Speech requires special considerations (e.g. interspersed audio cues, additive adjacent rests). <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="rest-before,rest-after" data-dfn-type="value" data-export id="valdef-rest-before-time-0s"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#time-value" id="ref-for-time-value②"><time [0s,∞]></a></dfn> <dd> Expresses the rest in absolute time units (seconds and milliseconds, e.g. "+3s", "250ms"). Only non-negative values are allowed. <dt><dfn class="dfn-paneled css" data-dfn-for="rest-before,rest-after" data-dfn-type="value" data-export id="valdef-rest-before-none">none</dfn> <dd> Equivalent to 0ms. (No prosodic break is produced by the speech processor.) <dt><dfn class="dfn-paneled css" data-dfn-for="rest-before,rest-after" data-dfn-type="value" data-export id="valdef-rest-before-x-weak">x-weak</dfn>, <dfn class="dfn-paneled css" data-dfn-for="rest-before,rest-after" data-dfn-type="value" data-export id="valdef-rest-before-weak">weak</dfn>, <dfn class="dfn-paneled css" data-dfn-for="rest-before,rest-after" data-dfn-type="value" data-export id="valdef-rest-before-medium">medium</dfn>, <dfn class="dfn-paneled css" data-dfn-for="rest-before,rest-after" data-dfn-type="value" data-export id="valdef-rest-before-strong">strong</dfn>, and <dfn class="dfn-paneled css" data-dfn-for="rest-before,rest-after" data-dfn-type="value" data-export id="valdef-rest-before-x-strong">x-strong</dfn> <dd> Expresses the rest by the strength of the prosodic break in speech output. The exact time is implementation-dependent. The values indicate monotonically non-decreasing (conceptually increasing) break strength between elements. </dl> As opposed to <a href="#pause-props">pause properties</a>, the rest is inserted between the element’s content and any <a class="property css" data-link-type="property" href="#propdef-cue-before" id="ref-for-propdef-cue-before③">cue-before</a> or <a class="property css" data-link-type="property" href="#propdef-cue-after" id="ref-for-propdef-cue-after③">cue-after</a> content. Adjoining rests are treated additively, and do not collapse. <h3 class="heading settled" data-level="9.2" id="rest-props-rest">9.2. The <a class="property css" data-link-type="property" href="#propdef-rest" id="ref-for-propdef-rest③">rest</a> shorthand property<a class="self-link" href="#rest-props-rest"></a></h3> <table class="def propdef" data-link-for-hint="rest"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-rest">rest</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-rest-before" id="ref-for-propdef-rest-before④"><'rest-before'></a> <a class="production css" data-link-type="property" href="#propdef-rest-after" id="ref-for-propdef-rest-after④"><'rest-after'></a><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>N/A (see individual properties) <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>N/A (see individual properties) <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-rest" id="ref-for-propdef-rest④">rest</a> property is a shorthand for <a class="property css" data-link-type="property" href="#propdef-rest-before" id="ref-for-propdef-rest-before⑤">rest-before</a> and <a class="property css" data-link-type="property" href="#propdef-rest-after" id="ref-for-propdef-rest-after⑤">rest-after</a>. If two values are given, the first value is rest-before and the second is rest-after. If only one value is given, it applies to both properties. <h2 class="heading settled" data-level="10" id="cue-props">10. Cue properties<a class="self-link" href="#cue-props"></a></h2> <h3 class="heading settled" data-level="10.1" id="cue-props-cue-before-after">10.1. The <a class="property css" data-link-type="property" href="#propdef-cue-before" id="ref-for-propdef-cue-before④">cue-before</a> and <a class="property css" data-link-type="property" href="#propdef-cue-after" id="ref-for-propdef-cue-after④">cue-after</a> properties<a class="self-link" href="#cue-props-cue-before-after"></a></h3> <table class="def propdef" data-link-for-hint="cue-before"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-cue-before">cue-before</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-cue-after">cue-after</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/css2/#value-def-uri" id="ref-for-value-def-uri"><uri></a> <a class="production css" data-link-type="type" href="#typedef-voice-volume-decibel" id="ref-for-typedef-voice-volume-decibel④"><decibel></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-one" id="ref-for-comb-one②⑥">|</a> none <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 <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-cue-before" id="ref-for-propdef-cue-before⑤">cue-before</a> and <a class="property css" data-link-type="property" href="#propdef-cue-after" id="ref-for-propdef-cue-after⑤">cue-after</a> properties specify auditory icons (i.e. pre-recorded / pre-generated sound clips) to be played before (or after) the element within the <a href="#aural-model">aural box model</a>. Note: Although the functionality provided by this property may appear related to the <a href="https://www.w3.org/TR/speech-synthesis11/#edef_audio"><code>audio</code> element</a> from the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>, there are in fact major discrepancies. For example, the <a data-link-type="dfn" href="#aural-box-model" id="ref-for-aural-box-model⑦">aural box model</a> means that audio cues are associated to the element’s volume level; and CSS Speech’s auditory icons provide limited functionality compared to SSML’s <code>audio</code> element. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="cue-before,cue-after" data-dfn-type="value" data-export id="valdef-cue-before-uri"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css2/#value-def-uri" id="ref-for-value-def-uri①"><uri></a></dfn> <dd> The URI designates an auditory icon resource. When a user agent is not able to render the specified auditory icon (e.g. missing file resource, or unsupported audio codec), it is recommended to produce an alternative cue, such as a bell sound. <dt>none <dd> Specifies that no auditory icon is used. <dt><a class="production css" data-link-type="type" href="#typedef-voice-volume-decibel" id="ref-for-typedef-voice-volume-decibel⑤"><decibel></a> <dd> Represents a change (positive or negative) relative to the computed value of the <a class="property css" data-link-type="property" href="#propdef-voice-volume" id="ref-for-propdef-voice-volume⑤">voice-volume</a> property within the <a data-link-type="dfn" href="#aural-box-model" id="ref-for-aural-box-model⑧">aural box model</a> of the selected element. (As a result, the volume level of an audio cue changes when the voice-volume property changes). When omitted, the implied value computes to 0dB. When the computed value of the <a class="property css" data-link-type="property" href="#propdef-voice-volume" id="ref-for-propdef-voice-volume⑦">voice-volume</a> property is <a class="css" data-link-type="maybe" href="#valdef-voice-volume-silent" id="ref-for-valdef-voice-volume-silent④">silent</a>, the audio cue is also set to silent (regardless of this specified <a class="production css" data-link-type="type" href="#typedef-voice-volume-decibel" id="ref-for-typedef-voice-volume-decibel⑥"><decibel></a> value). Otherwise (when not silent), voice-volume values are always specified relatively to the volume level keywords (see the definition of voice-volume), which map to a user-calibrated scale of "preferred" loudness settings. If the inherited voice-volume value already contains a decibel offset, the dB offset specific to the audio cue is combined additively. Note: There is a difference between an audio cue whose volume is set to <a class="css" data-link-type="maybe" href="#valdef-voice-volume-silent" id="ref-for-valdef-voice-volume-silent⑦">silent</a> and one whose value is none. In the former case, the audio cue takes up the same time as if it had been played, but no sound is generated. In the latter case, the there is no manifestation of the audio cue at all (i.e. no time is allocated for the cue in the aural dimension). </dl> <div class="example" id="example-7f061363"> <a class="self-link" href="#example-7f061363"></a> Examples of property values: <pre>a { cue-before: url(/audio/bell.aiff) -3dB; cue-after: url(dong.wav); } h1 { cue-before: url(../clips-1/pop.au) +6dB; cue-after: url(../clips-2/pop.au) 6dB; } div.caution { cue-before: url(./audio/caution.wav) +8dB; } </pre> </div> <h3 class="heading settled" data-level="10.2" id="cue-props-volume">10.2. Relation between audio cues and speech synthesis volume levels<a class="self-link" href="#cue-props-volume"></a></h3> This section is non-normative. The volume levels of audio cues and of speech synthesis within the <a data-link-type="dfn" href="#aural-box-model" id="ref-for-aural-box-model⑨">aural box model</a> of a selected element are related. For example, the desired effect of an audio cue whose volume level is set at +0dB (as specified by the <a class="production css" data-link-type="type" href="#typedef-voice-volume-decibel" id="ref-for-typedef-voice-volume-decibel⑦"><decibel></a> value) is that its perceived loudness during playback is close to that of the speech synthesis rendition of the selected element, as dictated by the computed value of the <a class="property css" data-link-type="property" href="#propdef-voice-volume" id="ref-for-propdef-voice-volume①①">voice-volume</a> property. Note that a <a class="css" data-link-type="maybe" href="#valdef-voice-volume-silent" id="ref-for-valdef-voice-volume-silent⑧">silent</a> computed value for the voice-volume property results in audio cues being "forcefully" silenced as well (i.e. regardless of the specified audio cue <decibel> value) The volume keywords of the <a class="property css" data-link-type="property" href="#propdef-voice-volume" id="ref-for-propdef-voice-volume①③">voice-volume</a> property are user-calibrated to match requirements not known at authoring time (e.g. auditory environment, personal preferences). Therefore, in order to achieve this approximate loudness alignment of audio cues and speech synthesis, authors should ensure that the volume level of audio cues (on average, as there may be discrete variations of perceived loudness due to changes in the audio stream, such as intonation, stress, etc.) matches the output of a speech synthesis rendition based on the <a class="property css" data-link-type="property" href="#propdef-voice-family" id="ref-for-propdef-voice-family">voice-family</a> intended for use, given "typical" listening conditions (i.e. default system volume levels, centered equalization across the frequency spectrum). As speech processors are capable of directly controlling the waveform amplitude of generated text-to-speech audio, and because user agents are able to adjust the volume output of audio cues (i.e. amplify or attenuate audio signals based on the intrinsic waveform amplitude of digitized sound clips), this sets a baseline that enables implementations to manage the loudness of both TTS and cue audio streams within the aural box model, relative to user-calibrated volume levels (see the keywords defined in the voice-volume property). Due to the complex relationship between perceived audio characteristics (e.g. loudness) and the processing applied to the digitized audio signal (e.g. signal compression), we refer to a simple scenario whereby the attenuation is indicated in decibels, typically ranging from 0dB (i.e. maximum audio input, near clipping threshold) to -60dB (i.e. total silence). Given this context, a "standard" audio clip would oscillate between these values, the loudest peak levels would be close to -3dB (to avoid distortion), and the relevant audible passages would have average (RMS) volume levels as high as possible (i.e. not too quiet, to avoid background noise during amplification). This would roughly provide an audio experience that could be seamlessly combined with text-to-speech output (i.e. there would be no discernible difference in volume levels when switching from pre-recorded audio to speech synthesis). Although there exists no industry-wide standard to support such convention, different TTS engines tend to generate comparably-loud audio signals when no gain or attenuation is specified. For voice and soft music, -15dB RMS seems to be pretty standard. <h3 class="heading settled" data-level="10.3" id="cue-props-cue">10.3. The <a class="property css" data-link-type="property" href="#propdef-cue" id="ref-for-propdef-cue③">cue</a> shorthand property<a class="self-link" href="#cue-props-cue"></a></h3> <table class="def propdef" data-link-for-hint="cue"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-cue">cue</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-cue-before" id="ref-for-propdef-cue-before⑥"><'cue-before'></a> <a class="production css" data-link-type="property" href="#propdef-cue-after" id="ref-for-propdef-cue-after⑥"><'cue-after'></a><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>N/A (see individual properties) <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>N/A (see individual properties) <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-cue" id="ref-for-propdef-cue④">cue</a> property is a shorthand for <a class="property css" data-link-type="property" href="#propdef-cue-before" id="ref-for-propdef-cue-before⑦">cue-before</a> and <a class="property css" data-link-type="property" href="#propdef-cue-after" id="ref-for-propdef-cue-after⑦">cue-after</a>. If two values are given the first value is cue-before and the second is cue-after. If only one value is given, it applies to both properties. <div class="example" id="example-ef7757db"> <a class="self-link" href="#example-ef7757db"></a> Example of shorthand notation: <pre>h1 { cue-before: url(pop.au); cue-after: url(pop.au); } /* ...is equivalent to: */ h1 { cue: url(pop.au); } </pre> </div> <h2 class="heading settled" data-level="11" id="voice-char-props">11. Voice characteristic properties<a class="self-link" href="#voice-char-props"></a></h2> <h3 class="heading settled" data-level="11.1" id="voice-props-voice-family">11.1. The <a class="property css" data-link-type="property" href="#propdef-voice-family" id="ref-for-propdef-voice-family①">voice-family</a> property<a class="self-link" href="#voice-props-voice-family"></a></h3> <table class="def propdef" data-link-for-hint="voice-family"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-voice-family">voice-family</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[[<family-name> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑦">|</a> <generic-voice>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma①">,</a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus">*</a> [<family-name> | <generic-voice>] | preserve <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>implementation-dependent <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-voice-family" id="ref-for-propdef-voice-family②">voice-family</a> property specifies a prioritized list of component values that are separated by commas to indicate that they are alternatives. (This is analogous to <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-family" id="ref-for-propdef-font-family">font-family</a> in visual style sheets.) Each component value potentially designates a speech synthesis voice instance, by specifying match criteria. See the <a href="#voice-selection">voice selection</a> section on this topic. <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-generic-voice"><a class="production css" data-link-type="type" href="#typedef-generic-voice" id="ref-for-typedef-generic-voice"><generic-voice></a></dfn> = [<a class="production css" data-link-type="type" href="#typedef-voice-family-age" id="ref-for-typedef-voice-family-age"><age></a>? <a class="production css" data-link-type="type" href="#typedef-voice-family-gender" id="ref-for-typedef-voice-family-gender"><gender></a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value"><integer></a>?] Note: Although the functionality provided by this property is similar to the <a href="https://www.w3.org/TR/speech-synthesis11/#edef_voice"><code>voice</code> element</a> from the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>, CSS Speech does not provide an equivalent to SSML’s sophisticated voice language selection. This technical limitation may be alleviated in a future revision of the Speech module. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="voice-family" data-dfn-type="value" data-export id="valdef-voice-family-family-name"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-fonts-4/#family-name-value" id="ref-for-family-name-value"><family-name></a></dfn> <dd> Values are specific voice instances (e.g., Mike, comedian, mary, carlos2, "valley girl"). Like <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-family" id="ref-for-propdef-font-family①">font-family</a> names, voice names must either be given quoted as <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string">strings</a>, or unquoted as a sequence of one or more <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-css-identifier" id="ref-for-css-css-identifier">CSS identifiers</a>. Note: As a result, most punctuation characters, or digits at the start of each token, must be escaped in unquoted voice names. If a sequence of identifiers is given as a voice name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces. Voice names that happen to be the same as the gender keywords (<a class="css" data-link-type="maybe" href="#valdef-voice-family-male" id="ref-for-valdef-voice-family-male">male</a>, <a class="css" data-link-type="maybe" href="#valdef-voice-family-female" id="ref-for-valdef-voice-family-female">female</a> and <a class="css" data-link-type="maybe" href="#valdef-voice-family-neutral" id="ref-for-valdef-voice-family-neutral">neutral</a>) or that happen to match 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> or <a class="css" data-link-type="maybe" href="#valdef-voice-family-preserve" id="ref-for-valdef-voice-family-preserve">preserve</a> must be quoted to disambiguate with these keywords. The keyword default is reserved for future use and must also be quoted when used as voice names. Note: In <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>, voice names are space-separated and cannot contain whitespace characters. It is recommended to quote voice names that contain white space, digits, or punctuation characters other than hyphens—even if these voice names are valid in unquoted form—in order to improve code clarity. For example: <code>voice-family: "john doe", "Henry the-8th";</code> <dt><dfn class="dfn-paneled css" data-dfn-for="voice-family" data-dfn-type="type" data-export id="typedef-voice-family-age"><a class="production css" data-link-type="type" href="#typedef-voice-family-age" id="ref-for-typedef-voice-family-age①"><age></a></dfn> <dd> Possible values are <dfn class="dfn-paneled css" data-dfn-for="voice-family" data-dfn-type="value" data-export id="valdef-voice-family-child">child</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-family" data-dfn-type="value" data-export id="valdef-voice-family-young">young</dfn> and <dfn class="dfn-paneled css" data-dfn-for="voice-family" data-dfn-type="value" data-export id="valdef-voice-family-old">old</dfn>, indicating the preferred age category to match during voice selection. Note: A recommended mapping with <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a> ages is: <a class="css" data-link-type="maybe" href="#valdef-voice-family-child" id="ref-for-valdef-voice-family-child">child</a> = 6 y/o, <a class="css" data-link-type="maybe" href="#valdef-voice-family-young" id="ref-for-valdef-voice-family-young">young</a> = 24 y/o, <a class="css" data-link-type="maybe" href="#valdef-voice-family-old" id="ref-for-valdef-voice-family-old">old</a> = 75 y/o. More flexible age ranges may be used by the processor-dependent voice-matching algorithm. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-family" data-dfn-type="type" data-export id="typedef-voice-family-gender"><a class="production css" data-link-type="type" href="#typedef-voice-family-gender" id="ref-for-typedef-voice-family-gender①"><gender></a></dfn> <dd> One of the keywords <dfn class="dfn-paneled css" data-dfn-for="voice-family" data-dfn-type="value" data-export id="valdef-voice-family-male">male</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-family" data-dfn-type="value" data-export id="valdef-voice-family-female">female</dfn>, or <dfn class="dfn-paneled css" data-dfn-for="voice-family" data-dfn-type="value" data-export id="valdef-voice-family-neutral">neutral</dfn>, specifying a male, female, or neutral voice, respectively. Note: The interpretation of the relationship between a person’s age or gender, and a recognizable type of voice, cannot realistically be defined in a universal manner as it effectively depends on numerous criteria (cultural, linguistic, biological, etc.). The functionality provided by this specification therefore represent a simplified model that can be reasonably applied to a broad variety of speech contexts, albeit at the cost of a certain degree of approximation. Future versions of this specification may refine the level of precision of the voice-matching algorithm, as speech processor implementations become more standardized. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-family" data-dfn-type="value" data-export id="valdef-voice-family-integer"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value①"><integer></a></dfn> <dd> An integer indicating the preferred variant (e.g. "the second male child voice"). Only positive integers (i.e. excluding zero) are allowed. The value 1 refers to the first of all matching voices. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-family" data-dfn-type="value" data-export id="valdef-voice-family-preserve">preserve</dfn> <dd> Indicates that the <a class="property css" data-link-type="property" href="#propdef-voice-family" id="ref-for-propdef-voice-family③">voice-family</a> value gets inherited and used regardless of any potential language change within the content markup (see the section below about voice selection and language handling). This value behaves as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit" id="ref-for-valdef-all-inherit">inherit</a> when applied to the root element. Note: Descendants of the element automatically inherit the <a class="css" data-link-type="maybe" href="#valdef-voice-family-preserve" id="ref-for-valdef-voice-family-preserve①">preserve</a> value, unless it is explicitly overridden by other voice-family values (e.g. name, gender, age). </dl> <div class="example" id="example-63e6e87d"> <a class="self-link" href="#example-63e6e87d"></a> Examples of invalid declarations: <pre>voice-family: john/doe; /* forward slash character should be escaped */ voice-family: john "doe"; /* identifier sequence cannot contain strings */ voice-family: john!; /* exclamation mark should be escaped */ voice-family: john@doe; /* "at" character should be escaped */ voice-family: #john; /* identifier cannot start with hash character */ voice-family: john 1st; /* identifier cannot start with digit */ </pre> </div> <h4 class="no-toc heading settled" data-level="11.1.1" id="voice-selection">11.1.1. Voice selection, content language<a class="self-link" href="#voice-selection"></a></h4> The <a class="property css" data-link-type="property" href="#propdef-voice-family" id="ref-for-propdef-voice-family⑤">voice-family</a> property is used to guide the selection of the speech synthesis voice instance. As part of this selection process, speech-capable user agents must also take into account the language of the selected element within the markup content. The "name", "gender", "age", and preferred "variant" (index) are voice selection hints that get carried down the content hierarchy as the voice-family property value gets inherited by descendant elements. At any point within the content structure, the language takes precedence (i.e. has a higher priority) over the specified CSS voice characteristics. The following list outlines the voice selection algorithm (note that the definition of "language" is loose here, in order to cater for dialectic variations): <ul> <li>If only a single voice instance is available for the language of the selected content, then this voice must be used, regardless of the specified CSS voice characteristics. <li>If several voice instances are available for the language of the selected content, then the chosen voice is the one that most closely matches the specified name, or gender, age, and preferred voice variant. The actual definition of "best match" is processor-dependent. For example, in a system that only has male and female adult voices available, a reasonable match for "voice-family: young male" may well be a higher-pitched female voice, as this tone of voice would be closer to that of a young boy. If no voice instance matches the characteristics provided by any of the <a class="property css" data-link-type="property" href="#propdef-voice-family" id="ref-for-propdef-voice-family⑦">voice-family</a> component values, the first available voice instance (amongst those suitable for the language of the selected content) must be used. <li>If no voice is available for the language of the selected content, it is recommended that user agents let the user know about the lack of appropriate TTS voice. </ul> The speech synthesizer voice must be re-evaluated (i.e. the selection process must take place once again) whenever any of the CSS voice characteristics change within the content flow. The voice must also be re-calculated whenever the content language changes, unless the <a class="css" data-link-type="maybe" href="#valdef-voice-family-preserve" id="ref-for-valdef-voice-family-preserve②">preserve</a> keyword is used (this may be useful in cases where embedded foreign language text can be spoken using a voice not designed for this language, as demonstrated by the example below). Note: Dynamically computing a voice may lead to unexpected lag, so user agents should try to resolve concrete voice instances in the document tree before the playback starts. <div class="example" id="example-10e6a43e"> <a class="self-link" href="#example-10e6a43e"></a> Examples of property values: <pre>h1 { voice-family: announcer, old male; } p.romeo { voice-family: romeo, young male; } p.juliet { voice-family: juliet, young female; } p.mercutio { voice-family: young male; } p.tybalt { voice-family: young male; } p.nurse { voice-family: amelie; } ... The French text below will be spoken with an English voice: Bonjour monsieur ! The English text below will be spoken with a voice different than that corresponding to the class "romeo" (which is inherited from the "p" parent element): Hello sir! </pre> </div> <h3 class="heading settled" data-level="11.2" id="voice-props-voice-rate">11.2. The <a class="property css" data-link-type="property" href="#propdef-voice-rate" id="ref-for-propdef-voice-rate">voice-rate</a> property<a class="self-link" href="#voice-props-voice-rate"></a></h3> <table class="def propdef" data-link-for-hint="voice-rate"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-voice-rate">voice-rate</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⓪">|</a> x-slow | slow | medium | fast | x-fast] <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="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value"><percentage [0,∞]></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>normal <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><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>refer to default value <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>a keyword value, and optionally also a percentage relative to the keyword (if not 100%) <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-voice-rate" id="ref-for-propdef-voice-rate①">voice-rate</a> property manipulates the rate of generated synthetic speech in terms of words per minute. Note: Although the functionality provided by this property is similar to the <a href="https://www.w3.org/TR/speech-synthesis11/#edef_prosody"><code>rate</code> attribute of the <code>prosody</code> element</a> from the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>, there are notable discrepancies. For example, CSS Speech rate keywords and percentage modifiers are not mutually-exclusive, due to how values are inherited and combined for selected elements. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="voice-rate" data-dfn-type="value" data-export id="valdef-voice-rate-normal">normal</dfn> <dd> Represents the default rate produced by the speech synthesizer for the currently active voice. This is processor-specific and depends on the language and dialect, and on the "personality" of the voice. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-rate" data-dfn-type="value" data-export id="valdef-voice-rate-x-slow">x-slow</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-rate" data-dfn-type="value" data-export id="valdef-voice-rate-slow">slow</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-rate" data-dfn-type="value" data-export id="valdef-voice-rate-medium">medium</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-rate" data-dfn-type="value" data-export id="valdef-voice-rate-fast">fast</dfn> and <dfn class="dfn-paneled css" data-dfn-for="voice-rate" data-dfn-type="value" data-export id="valdef-voice-rate-x-fast">x-fast</dfn> <dd> A sequence of monotonically non-decreasing speaking rates that are implementation- and voice-specific. For example, typical values for the English language are (in words per minute) x-slow = 80, slow = 120, medium = between 180 and 200, fast = 500. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-rate" data-dfn-type="value" data-export id="valdef-voice-rate-percentage-0"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①"><percentage [0,∞]></a></dfn> <dd> Only non-negative <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#percentage" id="ref-for-percentage">percentage</a> values are allowed. This represents a change relative to the given keyword value (see enumeration above), or to the default value for the root element, or otherwise to the inherited speaking rate (which may itself be a combination of a keyword value and of a percentage, in which case percentages are combined multiplicatively). For example, 50% means that the speaking rate gets multiplied by 0.5 (half the value). Percentages above 100% result in faster speaking rates (relative to the base keyword), whereas percentages below 100% result in slower speaking rates. </dl> <div class="example" id="example-0f17967a"> <a class="self-link" href="#example-0f17967a"></a> Examples of inherited values: <pre><body> <e1> <e2> <e3> ... </e3> </e2> </e1> </body> body { voice-rate: inherit; } /* the initial value is 'normal' (the actual speaking rate value depends on the active voice) */ e1 { voice-rate: +50%; } /* the computed value is ['normal' and 50%], which will resolve to the rate corresponding to 'normal' multiplied by 0.5 (half the speaking rate) */ e2 { voice-rate: fast 120%; } /* the computed value is ['fast' and 120%], which will resolve to the rate corresponding to 'fast' multiplied by 1.2 */ e3 { voice-rate: normal; /* "resets" the speaking rate to the intrinsic voice value, the computed value is 'normal' (see comment below for actual value) */ voice-family: "another-voice"; } /* because the voice is different, the calculated speaking rate may vary compared to "body" (even though the computed 'voice-rate' value is the same) */ </pre> </div> <h3 class="heading settled" data-level="11.3" id="voice-props-voice-pitch">11.3. The <a class="property css" data-link-type="property" href="#propdef-voice-pitch" id="ref-for-propdef-voice-pitch①">voice-pitch</a> property<a class="self-link" href="#voice-props-voice-pitch"></a></h3> <table class="def propdef" data-link-for-hint="voice-pitch"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-voice-pitch">voice-pitch</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-values-4/#frequency-value" id="ref-for-frequency-value"><frequency [0Hz,∞]></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-all" id="ref-for-comb-all">&&</a> absolute <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⑤">|</a> [[x-low | low | medium | high | x-high] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any④">||</a> [<frequency> | <a class="production css" data-link-type="type" href="#typedef-voice-pitch-semitones" id="ref-for-typedef-voice-pitch-semitones"><semitones></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②"><percentage></a>]] <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>medium <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>refer to inherited value <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>one of the predefined pitch keywords if only the keyword is specified by itself, otherwise an absolute frequency calculated by converting the keyword value (if any) to a fixed frequency based on the current voice-family and by applying the specified relative offset (if any) <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-voice-pitch" id="ref-for-propdef-voice-pitch②">voice-pitch</a> property specifies the "baseline" pitch of the generated speech output, which depends on the used <a class="property css" data-link-type="property" href="#propdef-voice-family" id="ref-for-propdef-voice-family⑧">voice-family</a> instance, and varies across speech synthesis processors (it approximately corresponds to the average pitch of the output). For example, the common pitch for a male voice is around 120Hz, whereas it is around 210Hz for a female voice. Note: Although the functionality provided by this property is similar to the <a href="https://www.w3.org/TR/speech-synthesis11/#edef_prosody"><code>pitch</code> attribute of the <code>prosody</code> element</a> from the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>, there are notable discrepancies. For example, CSS Speech pitch keywords and relative changes (frequency, semitone or percentage) are not mutually-exclusive, due to how values are inherited and combined for selected elements. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="voice-pitch" data-dfn-type="value" data-export id="valdef-voice-pitch-frequency"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#frequency-value" id="ref-for-frequency-value②"><frequency></a></dfn> <dd> A value in frequency units (Hertz or kiloHertz, e.g. 100Hz, +2kHz). Values are restricted to positive numbers when the <a class="css" data-link-type="maybe" href="#valdef-voice-pitch-absolute" id="ref-for-valdef-voice-pitch-absolute">absolute</a> keyword is specified. Otherwise (when the absolute keyword is not specified), a negative value represents a decrement, and a positive value represents an increment, relative to the inherited value. For example, 2kHz is a positive offset (strictly equivalent to +2kHz), and +2kHz absolute is an absolute frequency (strictly equivalent to 2kHz absolute). <dt><dfn class="dfn-paneled css" data-dfn-for="voice-pitch" data-dfn-type="value" data-export id="valdef-voice-pitch-absolute">absolute</dfn> <dd> If specified, this keyword indicates that the specified frequency represents an absolute value. If a negative frequency is specified, the computed frequency will be zero. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-pitch" data-dfn-type="value" data-export id="valdef-voice-pitch-semitones"><a class="production css" data-link-type="type" href="#typedef-voice-pitch-semitones" id="ref-for-typedef-voice-pitch-semitones①"><semitones></a></dfn> <dd> Specifies a relative change (decrement or increment) to the inherited value. The syntax of <dfn class="dfn-paneled css" data-dfn-for="voice-pitch" data-dfn-type="type" data-export id="typedef-voice-pitch-semitones"><a class="production css" data-link-type="type" href="#typedef-voice-pitch-semitones" id="ref-for-typedef-voice-pitch-semitones②"><semitones></a></dfn> allowed values is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#dimension" id="ref-for-dimension①">dimension</a> with the unit identifier st (semitones). A <dfn class="dfn-paneled" data-dfn-for="voice-pitch" data-dfn-type="dfn" data-noexport id="voice-pitch-semitone">semitone</dfn> interval corresponds to the step between each note on an equal temperament chromatic scale. A <a data-link-type="dfn" href="#voice-pitch-semitone" id="ref-for-voice-pitch-semitone">semitone</a> can therefore be quantified as the difference between two consecutive pitch frequencies on such scale. The ratio between two consecutive frequencies separated by exactly one semitone is the twelfth root of two (approximately 11011/10393, which equals exactly 1.0594631). As a result, the value in Hertz corresponding to a semitone offset is relative to the initial frequency the offset is applied to. (In other words, a semitone doesn’t correspond to a fixed numerical value in Hertz.) <dt><dfn class="dfn-paneled css" data-dfn-for="voice-pitch" data-dfn-type="value" data-export id="valdef-voice-pitch-percentage"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③"><percentage></a></dfn> <dd> Positive and negative <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#percentage" id="ref-for-percentage①">percentage</a> values are allowed, to represent an increment or decrement (respectively) relative to the inherited value. Computed values are calculated by adding (or subtracting) the specified fraction of the inherited value, to (from) the inherited value. For example, 50% (which is equivalent to +50%) with a inherited value of 200Hz results in <code>200 + (200*0.5)</code> = 300Hz. Conversely, -50% results in <code>200-(200*0.5)</code> = 100Hz. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-pitch" data-dfn-type="value" data-export id="valdef-voice-pitch-x-low">x-low</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-pitch" data-dfn-type="value" data-export id="valdef-voice-pitch-low">low</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-pitch" data-dfn-type="value" data-export id="valdef-voice-pitch-medium">medium</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-pitch" data-dfn-type="value" data-export id="valdef-voice-pitch-high">high</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-pitch" data-dfn-type="value" data-export id="valdef-voice-pitch-x-high">x-high</dfn> <dd> A sequence of monotonically non-decreasing pitch levels that are implementation and voice specific. When the computed value for a given element is only a keyword (i.e. no relative offset is specified), then the corresponding absolute frequency will be re-evaluated on a voice change. Conversely, the application of a relative offset requires the calculation of the resulting frequency based on the current voice at the point at which the relative offset is specified, so the computed frequency will inherit absolutely regardless of any voice change further down the style cascade. Authors should therefore only use keyword values in cases where they wish that voice changes trigger the re-evaluation of the conversion from a keyword to a concrete, voice-dependent frequency. </dl> Computed absolute frequencies that are negative are clamped to zero Hertz. Speech-capable user agents are likely to support a specific range of values rather than the full range of possible calculated numerical values for frequencies. The actual values in user agents may therefore be clamped to implementation-dependent minimum and maximum boundaries. For example, although the 0Hz frequency can be legitimately calculated, it may be clamped to a more meaningful value in the context of the speech synthesizer. <div class="example" id="example-0279cd20"> <a class="self-link" href="#example-0279cd20"></a> Examples of property values: <pre>h1 { voice-pitch: 250Hz; } /* positive offset relative to the inherited absolute frequency */ h1 { voice-pitch: +250Hz; } /* identical to the line above */ h2 { voice-pitch: +30Hz absolute; } /* not an increment */ h2 { voice-pitch: absolute 30Hz; } /* identical to the line above */ h3 { voice-pitch: -20Hz; } /* negative offset (decrement) relative to the inherited absolute frequency */ h4 { voice-pitch: -20Hz absolute; } /* illegal syntax => value ignored ("absolute" keyword not allowed with negative frequency) */ h5 { voice-pitch: -3.5st; } /* semitones, negative offset */ h6 { voice-pitch: 25%; } /* this means "add a quarter of the inherited value, to the inherited value" */ h6 { voice-pitch: +25%; } /* identical to the line above */ </pre> </div> <h3 class="heading settled" data-level="11.4" id="voice-props-voice-range">11.4. The <a class="property css" data-link-type="property" href="#propdef-voice-range" id="ref-for-propdef-voice-range①">voice-range</a> property<a class="self-link" href="#voice-props-voice-range"></a></h3> <table class="def propdef" data-link-for-hint="voice-range"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-voice-range">voice-range</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-values-4/#frequency-value" id="ref-for-frequency-value③"><frequency [0Hz,∞]></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-all" id="ref-for-comb-all①">&&</a> absolute <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④②">|</a> [[x-low | low | medium | high | x-high] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any⑤">||</a> [<frequency> | <a class="production css" data-link-type="type" href="#typedef-voice-pitch-semitones" id="ref-for-typedef-voice-pitch-semitones③"><semitones></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value④"><percentage></a>]] <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>medium <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>refer to inherited value <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>one of the predefined pitch keywords if only the keyword is specified by itself, otherwise an absolute frequency calculated by converting the keyword value (if any) to a fixed frequency based on the current voice-family and by applying the specified relative offset (if any) <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-voice-range" id="ref-for-propdef-voice-range②">voice-range</a> property specifies the variability in the "baseline" pitch, i.e. how much the fundamental frequency may deviate from the average pitch of the speech output. The dynamic pitch range of the generated speech generally increases for a highly animated voice, for example when variations in inflection are used to convey meaning and emphasis in speech. Typically, a low range produces a flat, monotonic voice, whereas a high range produces an animated voice. Note: Although the functionality provided by this property is similar to the <a href="https://www.w3.org/TR/speech-synthesis11/#edef_prosody"><code>range</code> attribute of the <code>prosody</code> element</a> from the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>, there are notable discrepancies. For example, CSS Speech pitch range keywords and relative changes (frequency, semitone or percentage) are not mutually-exclusive, due to how values are inherited and combined for selected elements. <dl> <dt><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#frequency-value" id="ref-for-frequency-value⑤"><frequency></a> <dd> A value in frequency units (Hertz or kiloHertz, e.g. 100Hz, +2kHz). Values are restricted to positive numbers when the <a class="css" data-link-type="maybe" href="#valdef-voice-range-absolute" id="ref-for-valdef-voice-range-absolute">absolute</a> keyword is specified. Otherwise (when the absolute keyword is not specified), a negative value represents a decrement, and a positive value represents an increment, relative to the inherited value. For example, 2kHz is a positive offset (strictly equivalent to +2kHz), and +2kHz absolute is an absolute frequency (strictly equivalent to 2kHz absolute). <dt><dfn class="dfn-paneled css" data-dfn-for="voice-range" data-dfn-type="value" data-export id="valdef-voice-range-absolute">absolute</dfn> <dd> If specified, this keyword indicates that the specified frequency represents an absolute value. If a negative frequency is specified, the computed frequency will be zero. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-range" data-dfn-type="value" data-export id="valdef-voice-range-semitones"><a class="production css" data-link-type="type" href="#typedef-voice-pitch-semitones" id="ref-for-typedef-voice-pitch-semitones④"><semitones></a></dfn> <dd> Specifies a relative change (decrement or increment) to the inherited value as a <a data-link-type="dfn" href="#voice-pitch-semitone" id="ref-for-voice-pitch-semitone③">semitone</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-range" data-dfn-type="value" data-export id="valdef-voice-range-percentage"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value⑤"><percentage></a></dfn> <dd> Positive and negative <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#percentage" id="ref-for-percentage②">percentage</a> values represent an increment or decrement (respectively) relative to the inherited value. Computed values are calculated by adding (or subtracting) the specified fraction of the inherited value, to (from) the inherited value. For example, 50% (which is equivalent to +50%) with a inherited value of 200Hz results in <code>200 + (200*0.5)</code> = 300Hz. Conversely, -50% results in <code>200-(200*0.5)</code> = 100Hz. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-range" data-dfn-type="value" data-export id="valdef-voice-range-x-low">x-low</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-range" data-dfn-type="value" data-export id="valdef-voice-range-low">low</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-range" data-dfn-type="value" data-export id="valdef-voice-range-medium">medium</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-range" data-dfn-type="value" data-export id="valdef-voice-range-high">high</dfn>, <dfn class="dfn-paneled css" data-dfn-for="voice-range" data-dfn-type="value" data-export id="valdef-voice-range-x-high">x-high</dfn> <dd> A sequence of monotonically non-decreasing pitch levels that are implementation and voice specific. When the computed value for a given element is only a keyword (i.e. no relative offset is specified), then the corresponding absolute frequency will be re-evaluated on a voice change. Conversely, the application of a relative offset requires the calculation of the resulting frequency based on the current voice at the point at which the relative offset is specified, so the computed frequency will inherit absolutely regardless of any voice change further down the style cascade. Authors should therefore only use keyword values in cases where they wish that voice changes trigger the re-evaluation of the conversion from a keyword to a concrete, voice-dependent frequency. </dl> Computed absolute frequencies that are negative are clamped to zero Hertz. Speech-capable user agents are likely to support a specific range of values rather than the full range of possible calculated numerical values for frequencies. The actual values in user agents may therefore be clamped to implementation-dependent minimum and maximum boundaries. For example: although the 0Hz frequency can be legitimately calculated, it may be clamped to a more meaningful value in the context of the speech synthesizer. <div class="example" id="example-fdd5062c"> <a class="self-link" href="#example-fdd5062c"></a> Examples of inherited values: <pre><body> <e1> <e2> <e3> <e4> <e5> <e6> ... </e6> </e5> </e4> </e3> </e2> </e1> </body> body { voice-range: inherit; } /* the initial value is 'medium' (the actual frequency value depends on the current voice) */ e1 { voice-range: +25%; } /* the computed value is ['medium' + 25%] which resolves to the frequency corresponding to 'medium' plus 0.25 times the frequency corresponding to 'medium' */ e2 { voice-range: +10Hz; } /* the computed value is [FREQ + 10Hz] where "FREQ" is the absolute frequency calculated in the "e1" rule above. */ e3 { voice-range: inherit; /* this could be omitted, but we explicitly specify it for clarity purposes */ voice-family: "another-voice"; } /* this voice change would have resulted in the re-evaluation of the initial 'medium' keyword inherited by the "body" element (i.e. conversion from a voice-dependent keyword value to a concrete, absolute frequency), but because relative offsets were applied down the style cascade, the inherited value is actually the frequency calculated at the "e2" rule above. */ e4 { voice-range: 200Hz absolute; } /* override with an absolute frequency which doesn’t depend on the current voice */ e5 { voice-range: 2st; } /* the computed value is an absolute frequency, which is the result of the calculation: 200Hz + two semitones (reminder: the actual frequency corresponding to a semitone depends on the base value to which it applies) */ e6 { voice-range: inherit; /* this could be omitted, but we explicitly specify it for clarity purposes */ voice-family: "yet-another-voice"; } /* despite the voice change, the computed value is the same as for "e5" (i.e. an absolute frequency value, independent from the current voice) */ </pre> </div> <h3 class="heading settled" data-level="11.5" id="voice-props-voice-stress">11.5. The <a class="property css" data-link-type="property" href="#propdef-voice-stress" id="ref-for-propdef-voice-stress①">voice-stress</a> property<a class="self-link" href="#voice-props-voice-stress"></a></h3> <table class="def propdef" data-link-for-hint="voice-stress"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-voice-stress">voice-stress</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑨">|</a> strong | moderate | none | reduced <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>normal <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-voice-stress" id="ref-for-propdef-voice-stress②">voice-stress</a> property manipulates the strength of emphasis, which is normally applied using a combination of pitch change, timing changes, loudness and other acoustic differences. The precise meaning of the values therefore depend on the language being spoken. Note: The functionality provided by this property is similar to the <a href="https://www.w3.org/TR/speech-synthesis11/#edef_emphasis"><code>emphasis</code> element</a> from the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="voice-stress" data-dfn-type="value" data-export id="valdef-voice-stress-normal">normal</dfn> <dd> Represents the default emphasis produced by the speech synthesizer. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-stress" data-dfn-type="value" data-export id="valdef-voice-stress-none">none</dfn> <dd> Prevents the synthesizer from emphasizing text it would normally emphasize. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-stress" data-dfn-type="value" data-export id="valdef-voice-stress-moderate">moderate</dfn> and <dfn class="dfn-paneled css" data-dfn-for="voice-stress" data-dfn-type="value" data-export id="valdef-voice-stress-strong">strong</dfn> <dd> These values are monotonically non-decreasing in strength. Their application results in more emphasis than what the speech synthesizer would normally produce (i.e. more than the value corresponding to <a class="css" data-link-type="maybe" href="#valdef-voice-stress-normal" id="ref-for-valdef-voice-stress-normal">normal</a>). <dt><dfn class="dfn-paneled css" data-dfn-for="voice-stress" data-dfn-type="value" data-export id="valdef-voice-stress-reduced">reduced</dfn> <dd> Effectively the opposite of emphasizing a word. </dl> <div class="example" id="example-4d45cfc2"> <a class="self-link" href="#example-4d45cfc2"></a> Examples of property values, with HTML sample: <pre>.default-emphasis { voice-stress: normal; } .lowered-emphasis { voice-stress: reduced; } .removed-emphasis { voice-stress: none; } .normal-emphasis { voice-stress: moderate; } .huge-emphasis { voice-stress: strong; } ... This is a big car.  This is a big car. This car is massive!  This car is massive!  This is a big car! This is a big car!!! </pre> </div> <h2 class="heading settled" data-level="12" id="duration-props">12. Voice duration property<a class="self-link" href="#duration-props"></a></h2> <h3 class="heading settled" data-level="12.1" id="mixing-props-voice-duration">12.1. The <a class="property css" data-link-type="property" href="#propdef-voice-duration" id="ref-for-propdef-voice-duration②">voice-duration</a> property<a class="self-link" href="#mixing-props-voice-duration"></a></h3> <table class="def propdef" data-link-for-hint="voice-duration"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-voice-duration">voice-duration</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> <time [0s<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma②">,</a>∞]> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a 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 value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-voice-duration" id="ref-for-propdef-voice-duration③">voice-duration</a> property specifies how long it should take to render the selected element’s content (not including <a href="#cue-props">audio cues</a>, <a href="#pause-props">pauses</a> and <a href="#rest-props">rests</a> ). Unless the value <a class="css" data-link-type="maybe" href="#valdef-voice-duration-auto" id="ref-for-valdef-voice-duration-auto">auto</a> is specified, this property takes precedence over the <a class="property css" data-link-type="property" href="#propdef-voice-rate" id="ref-for-propdef-voice-rate②">voice-rate</a> property, and should be used to determine a suitable speaking rate for the voice. An element for which the voice-duration property value is not auto can have descendants for which the voice-duration and voice-rate properties are specified, but these must be ignored. In other words, when a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#time-value" id="ref-for-time-value③"><time></a> is specified for the voice-duration of a selected element, it applies to the entire element subtree (children cannot override the property). Note: The functionality provided by this property is similar to the the <a href="https://www.w3.org/TR/speech-synthesis11/#edef_prosody"><code>duration</code> attribute of the <code>prosody</code> element</a> from the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="voice-duration" data-dfn-type="value" data-export id="valdef-voice-duration-auto">auto</dfn> <dd> Resolves to a used value corresponding to the duration of the speech synthesis when using the inherited <a class="property css" data-link-type="property" href="#propdef-voice-rate" id="ref-for-propdef-voice-rate④">voice-rate</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="voice-duration" data-dfn-type="value" data-export id="valdef-voice-duration-time-0s"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#time-value" id="ref-for-time-value④"><time [0s,∞]></a></dfn> <dd> Specifies a value in absolute time units (seconds and milliseconds, e.g. "+3s", "250ms"). Only non-negative values are allowed. </dl> <h2 class="heading settled" data-level="13" id="lists">13. List items and counters styles<a class="self-link" href="#lists"></a></h2> The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-type" id="ref-for-propdef-list-style-type">list-style-type</a> property of <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> specifies three types of list item markers: glyphs, numbering systems, and alphabetic systems. The values allowed for this property are also used for the counter() function of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content">content</a> property. The CSS Speech module defines how to render these styles in the aural dimension, using speech synthesis. The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-image" id="ref-for-propdef-list-style-image">list-style-image</a> property of [CSS2] is ignored, and instead the list-style-type is used. Note: The speech rendering of new features from the CSS Lists and Counters Module Level 3 <a data-link-type="biblio" href="#biblio-css3list" title="CSS Lists and Counters Module Level 3">[CSS3LIST]</a> is not covered in this level of CSS Speech, but may be defined in a future specification. <dl> <dt>disc, circle, square <dd> For these list item styles, the user agent defines (possibly based on user preferences) what equivalent phrase is spoken or what audio cue is played. List items with graphical bullets are therefore announced appropriately in an implementation-dependent manner. <dt><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#decimal" id="ref-for-decimal">decimal</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#decimal-leading-zero" id="ref-for-decimal-leading-zero">decimal-leading-zero</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#lower-roman" id="ref-for-lower-roman">lower-roman</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#upper-roman" id="ref-for-upper-roman">upper-roman</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#georgian" id="ref-for-georgian">georgian</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#armenian" id="ref-for-armenian">armenian</a> <dd> For these list item styles, corresponding numbers are spoken as-is by the speech synthesizer, and may be complemented with additional audio cues or speech phrases in the document’s language (i.e. with the same TTS voice used to speak the list item content) in order to indicate the presence of list items. For example, when using the English language, the list item counter could be prefixed with the word "Item", which would result in list items being announced with "Item one", "Item two", etc. <dt><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#lower-latin" id="ref-for-lower-latin">lower-latin</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#lower-alpha" id="ref-for-lower-alpha">lower-alpha</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#upper-latin" id="ref-for-upper-latin">upper-latin</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#upper-alpha" id="ref-for-upper-alpha">upper-alpha</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#lower-greek" id="ref-for-lower-greek">lower-greek</a> <dd> These list item styles are spelled out letter-by-letter by the speech synthesizer, in the document language (i.e. with the same TTS voice used to speak the list item content). For example, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#lower-greek" id="ref-for-lower-greek①">lower-greek</a> in English would be read out as "alpha", "beta", "gamma", etc. Similarly, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#upper-latin" id="ref-for-upper-latin①">upper-latin</a> in French would be read out as /a/, /be/, /se/, etc. (phonetic notation) </dl> Note: It is common for user agents such as screen readers to announce the nesting depth of list items, or more generally, to indicate additional structural information pertaining to complex hierarchical content. The verbosity of these additional audio cues and/or speech output can usually be controlled by users, and contribute to increasing usability. These navigation aids are implementation-dependent, but it is recommended that user agents supporting the CSS Speech module ensure that these additional audio cues and speech output don’t generate redundancies or create inconsistencies (for example: duplicated or different list item numbering scheme). <h2 class="heading settled" data-level="14" id="content">14. Inserted and replaced content<a class="self-link" href="#content"></a></h2> This section is non-normative. Sometimes, authors will want to specify a mapping from the source text into another string prior to the application of the regular pronunciation rules. This may be used for uncommon abbreviations or acronyms which are unlikely to be recognized by the synthesizer. The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content①">content</a> property can be used to replace one string by another. The functionality provided by this property is similar to the <a href="https://www.w3.org/TR/speech-synthesis11/#edef_sub"><code>alias</code> attribute of the <code>sub</code> element</a> from the SSML markup language <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a>. <div class="example" id="example-ac939a61"> <a class="self-link" href="#example-ac939a61"></a> In this example, the abbreviation is rendered using the content of the title attribute instead of the element’s content. <pre>/* This replaces the content of the selected element by the string "World Wide Web Consortium". */ abbr { content: attr(title); } ... <abbr title="World Wide Web Consortium">W3C</abbr> </pre> </div> In a similar way, text strings in a document can be replaced by a previously recorded version. <div class="example" id="example-0137c97f"> <a class="self-link" href="#example-0137c97f"></a> In this example—assuming the format is supported, the file is available, and the UA is configured to do so—a recording of Sir John Gielgud’s declamation of the famous monologue is played. Otherwise the UA falls back to render the text using synthesized speech. <pre>.hamlet { content: url(./audio/gielgud.wav); } ... <div class="hamlet"> To be, or not to be: that is the question: </div></pre> </div> Furthermore, authors (or users via a user stylesheet) may add some information to ease the understanding of structures during non-visual interaction with the document. They can do so by using the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before①">::before</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-after" id="ref-for-selectordef-after①">::after</a> pseudo-elements. Note that different stylesheets can be used to define the level of verbosity for additional information spoken by screen readers. <div class="example" id="example-b5d2d6ce"> <a class="self-link" href="#example-b5d2d6ce"></a> This example inserts the string "Start list: " before a list and the string "List item: " before the content of each list item. Likewise, the string "List end: " gets inserted after the list to inform the user that the list speech output is over. <pre>ul::before { content: "Start list: "; } ul::after { content: "List end. "; } li::before { content: "List item: "; }</pre> </div> Detailed information can be found in the CSS3 Generated and Replaced Content module <a data-link-type="biblio" href="#biblio-css3gencon" title="CSS Generated Content Module Level 3">[CSS3GENCON]</a>. <h2 class="heading settled" data-level="15" id="pronunciation">15. Pronunciation, phonemes <a class="self-link" href="#pronunciation"></a></h2> This section is non-normative. CSS does not specify how to define the pronunciation (expressed using a well-defined phonetic alphabet) of a particular piece of text within the markup document. A "phonemes" property was described in earlier drafts of this specification, but objections were raised due to breaking the principle of separation between content and presentation. (The "phonemes" authored within aural CSS stylesheets would have needed to be updated each time text changed within the markup document.) The "phonemes" functionality is therefore considered out-of-scope in CSS (the presentation layer) and should be addressed in the markup / content layer. The <a href="http://microformats.org/wiki/rel-pronunciation">"pronunciation"</a> <code>rel</code> value allows importing pronunciation lexicons in HTML documents using the <code>link</code> element (similar to how CSS stylesheets can be included). The W3C PLS (Pronunciation Lexicon Specification) <a data-link-type="biblio" href="#biblio-pronunciation-lexicon" title="Pronunciation Lexicon Specification (PLS) Version 1.0">[PRONUNCIATION-LEXICON]</a> is one format that can be used to describe such a lexicon. Additionally, an attribute-based mechanism can be used within the markup to author text-pronunciation associations At the time of writing, such mechanism isn’t formally defined in the W3C HTML standard(s). However, the <a href="http://idpf.org/epub/30">EPUB 3.0 specification</a> allows (x)HTML5 documents to contain attributes derived from the <a data-link-type="biblio" href="#biblio-ssml" title="Speech Synthesis Markup Language (SSML) Version 1.1">[SSML]</a> specification, that describe how to pronounce text based on a particular phonetic alphabet. <h3 class="no-num heading settled" id="glossary">Glossary<a class="self-link" href="#glossary"></a></h3> The following terms and abbreviations are used in this module. <dl> <dt> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="ua">UA</dfn> <dt> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="user-agent">user agent</dfn> <dd> A program that reads and/or writes CSS style sheets on behalf of a user in either or both of these categories: programs whose purpose is to render documents (e.g., browsers) and programs whose purpose is to create style sheets (e.g., editors). A UA may fall into both categories. (There are other programs that read or write style sheets, but this module gives no rules for them.) <dt> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="document" title="document|documents">document</dfn> <dd> A tree-structured document with elements and attributes, such as an SGML or XML document <a data-link-type="biblio" href="#biblio-xml11" title="Extensible Markup Language (XML) 1.1 (Second Edition)">[XML11]</a>. <dt> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="style-sheet">style sheet</dfn> <dd> A <a href="https://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS style sheet</a> </dl> <h2 class="no-num heading settled" id="ack"> Appendix D — Acknowledgements<a class="self-link" href="#ack"></a></h2> The editors would like to thank the members of the W3C Voice Browser and Cascading Style Sheets working groups for their assistance in preparing this specification. Special thanks to Ellen Eide (IBM) for her detailed comments, and to Elika Etemad (Fantasai) for her thorough reviews. <h2 class="no-num heading settled" id="changes"> Appendix E — Changes<a class="self-link" href="#changes"></a></h2> The following changes have been made since the <a href="https://www.w3.org/TR/2012/CR-css3-speech-20120320/">2012 Candidate Recommendation</a>: <ul> <li>Renamed the none and normal values of <a class="property css" data-link-type="property" href="#propdef-speak" id="ref-for-propdef-speak⑦">speak</a> to <a class="css" data-link-type="maybe" href="#valdef-speak-never" id="ref-for-valdef-speak-never③">never</a> and <a class="css" data-link-type="maybe" href="#valdef-speak-always" id="ref-for-valdef-speak-always②">always</a> for clarity. See <a href="https://github.com/w3c/csswg-drafts/issues/510">Issue 510</a>. <li>Made the <a class="css" data-link-type="maybe" href="#valdef-speak-auto" id="ref-for-valdef-speak-auto③">auto</a> value of <a class="property css" data-link-type="property" href="#propdef-speak" id="ref-for-propdef-speak⑧">speak</a> respond to <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>. See <a href="https://github.com/w3c/csswg-drafts/issues/511">Issue 511</a>. </ul> In addition there have been some minor editorial fixes. and the source has been converted to <a href="https://speced.github.io/bikeshed/">Bikeshed</a> format. <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> absolute <ul> <li><a href="#valdef-voice-pitch-absolute">value for voice-pitch</a>, in § 11.3 <li><a href="#valdef-voice-range-absolute">value for voice-range</a>, in § 11.4 </ul> <li><a href="#typedef-voice-family-age"><age></a>, in § 11.1 <li><a href="#valdef-speak-always">always</a>, in § 7.1 <li><a href="#aural-box-model">aural box model</a>, in § 5 <li> auto <ul> <li><a href="#valdef-speak-auto">value for speak</a>, in § 7.1 <li><a href="#valdef-voice-duration-auto">value for voice-duration</a>, in § 12.1 </ul> <li><a href="#valdef-voice-balance-center">center</a>, in § 6.2 <li><a href="#valdef-voice-family-child">child</a>, in § 11.1 <li><a href="#propdef-cue">cue</a>, in § 10.3 <li><a href="#propdef-cue-after">cue-after</a>, in § 10.1 <li><a href="#propdef-cue-before">cue-before</a>, in § 10.1 <li> <decibel> <ul> <li><a href="#typedef-voice-volume-decibel">type for voice-volume</a>, in § 6.1 <li><a href="#valdef-voice-volume-decibel">value for voice-volume</a>, in § 6.1 </ul> <li><a href="#valdef-speak-as-digits">digits</a>, in § 7.2 <li><a href="#document">document</a>, in § 15 <li><a href="#valdef-voice-family-family-name"><family-name></a>, in § 11.1 <li><a href="#valdef-voice-rate-fast">fast</a>, in § 11.2 <li><a href="#valdef-voice-family-female">female</a>, in § 11.1 <li><a href="#valdef-voice-pitch-frequency"><frequency></a>, in § 11.3 <li><a href="#typedef-voice-family-gender"><gender></a>, in § 11.1 <li><a href="#typedef-generic-voice"><generic-voice></a>, in § 11.1 <li> high <ul> <li><a href="#valdef-voice-pitch-high">value for voice-pitch</a>, in § 11.3 <li><a href="#valdef-voice-range-high">value for voice-range</a>, in § 11.4 </ul> <li><a href="#valdef-voice-family-integer"><integer></a>, in § 11.1 <li><a href="#valdef-voice-balance-left">left</a>, in § 6.2 <li><a href="#valdef-voice-balance-leftwards">leftwards</a>, in § 6.2 <li><a href="#valdef-speak-as-literal-punctuation">literal-punctuation</a>, in § 7.2 <li><a href="#valdef-voice-volume-loud">loud</a>, in § 6.1 <li> low <ul> <li><a href="#valdef-voice-pitch-low">value for voice-pitch</a>, in § 11.3 <li><a href="#valdef-voice-range-low">value for voice-range</a>, in § 11.4 </ul> <li><a href="#valdef-voice-family-male">male</a>, in § 11.1 <li> medium <ul> <li><a href="#valdef-pause-before-medium">value for pause-before, pause-after</a>, in § 8.1 <li><a href="#valdef-rest-before-medium">value for rest-before, rest-after</a>, in § 9.1 <li><a href="#valdef-voice-pitch-medium">value for voice-pitch</a>, in § 11.3 <li><a href="#valdef-voice-range-medium">value for voice-range</a>, in § 11.4 <li><a href="#valdef-voice-rate-medium">value for voice-rate</a>, in § 11.2 <li><a href="#valdef-voice-volume-medium">value for voice-volume</a>, in § 6.1 </ul> <li><a href="#valdef-voice-stress-moderate">moderate</a>, in § 11.5 <li><a href="#valdef-voice-family-neutral">neutral</a>, in § 11.1 <li><a href="#valdef-speak-never">never</a>, in § 7.1 <li> none <ul> <li><a href="#valdef-pause-before-none">value for pause-before, pause-after</a>, in § 8.1 <li><a href="#valdef-rest-before-none">value for rest-before, rest-after</a>, in § 9.1 <li><a href="#valdef-voice-stress-none">value for voice-stress</a>, in § 11.5 </ul> <li><a href="#valdef-speak-as-no-punctuation">no-punctuation</a>, in § 7.2 <li> normal <ul> <li><a href="#valdef-speak-as-normal">value for speak-as</a>, in § 7.2 <li><a href="#valdef-voice-rate-normal">value for voice-rate</a>, in § 11.2 <li><a href="#valdef-voice-stress-normal">value for voice-stress</a>, in § 11.5 </ul> <li><a href="#valdef-voice-balance-number"><number></a>, in § 6.2 <li><a href="#valdef-voice-family-old">old</a>, in § 11.1 <li><a href="#propdef-pause">pause</a>, in § 8.2 <li><a href="#propdef-pause-after">pause-after</a>, in § 8.1 <li><a href="#propdef-pause-before">pause-before</a>, in § 8.1 <li> <percentage> <ul> <li><a href="#valdef-voice-pitch-percentage">value for voice-pitch</a>, in § 11.3 <li><a href="#valdef-voice-range-percentage">value for voice-range</a>, in § 11.4 </ul> <li><a href="#valdef-voice-rate-percentage-0"><percentage [0,∞]></a>, in § 11.2 <li><a href="#valdef-voice-family-preserve">preserve</a>, in § 11.1 <li><a href="#valdef-voice-stress-reduced">reduced</a>, in § 11.5 <li><a href="#propdef-rest">rest</a>, in § 9.2 <li><a href="#propdef-rest-after">rest-after</a>, in § 9.1 <li><a href="#propdef-rest-before">rest-before</a>, in § 9.1 <li><a href="#valdef-voice-balance-right">right</a>, in § 6.2 <li><a href="#valdef-voice-balance-rightwards">rightwards</a>, in § 6.2 <li><a href="#voice-pitch-semitone">semitone</a>, in § 11.3 <li> <semitones> <ul> <li><a href="#typedef-voice-pitch-semitones">type for voice-pitch</a>, in § 11.3 <li><a href="#valdef-voice-pitch-semitones">value for voice-pitch</a>, in § 11.3 <li><a href="#valdef-voice-range-semitones">value for voice-range</a>, in § 11.4 </ul> <li><a href="#valdef-voice-volume-silent">silent</a>, in § 6.1 <li><a href="#valdef-voice-rate-slow">slow</a>, in § 11.2 <li><a href="#valdef-voice-volume-soft">soft</a>, in § 6.1 <li><a href="#propdef-speak">speak</a>, in § 7.1 <li><a href="#propdef-speak-as">speak-as</a>, in § 7.2 <li><a href="#valdef-speak-as-spell-out">spell-out</a>, in § 7.2 <li> strong <ul> <li><a href="#valdef-pause-before-strong">value for pause-before, pause-after</a>, in § 8.1 <li><a href="#valdef-rest-before-strong">value for rest-before, rest-after</a>, in § 9.1 <li><a href="#valdef-voice-stress-strong">value for voice-stress</a>, in § 11.5 </ul> <li><a href="#style-sheet">style sheet</a>, in § 15 <li> <time [0s,∞]> <ul> <li><a href="#valdef-pause-before-time-0s">value for pause-before, pause-after</a>, in § 8.1 <li><a href="#valdef-rest-before-time-0s">value for rest-before, rest-after</a>, in § 9.1 <li><a href="#valdef-voice-duration-time-0s">value for voice-duration</a>, in § 12.1 </ul> <li><a href="#ua">UA</a>, in § 15 <li><a href="#valdef-cue-before-uri"><uri></a>, in § 10.1 <li><a href="#user-agent">user agent</a>, in § 15 <li><a href="#propdef-voice-balance">voice-balance</a>, in § 6.2 <li><a href="#propdef-voice-duration">voice-duration</a>, in § 12.1 <li><a href="#propdef-voice-family">voice-family</a>, in § 11.1 <li><a href="#propdef-voice-pitch">voice-pitch</a>, in § 11.3 <li><a href="#propdef-voice-range">voice-range</a>, in § 11.4 <li><a href="#propdef-voice-rate">voice-rate</a>, in § 11.2 <li><a href="#propdef-voice-stress">voice-stress</a>, in § 11.5 <li><a href="#propdef-voice-volume">voice-volume</a>, in § 6.1 <li> weak <ul> <li><a href="#valdef-pause-before-weak">value for pause-before, pause-after</a>, in § 8.1 <li><a href="#valdef-rest-before-weak">value for rest-before, rest-after</a>, in § 9.1 </ul> <li><a href="#valdef-voice-rate-x-fast">x-fast</a>, in § 11.2 <li> x-high <ul> <li><a href="#valdef-voice-pitch-x-high">value for voice-pitch</a>, in § 11.3 <li><a href="#valdef-voice-range-x-high">value for voice-range</a>, in § 11.4 </ul> <li><a href="#valdef-voice-volume-x-loud">x-loud</a>, in § 6.1 <li> x-low <ul> <li><a href="#valdef-voice-pitch-x-low">value for voice-pitch</a>, in § 11.3 <li><a href="#valdef-voice-range-x-low">value for voice-range</a>, in § 11.4 </ul> <li><a href="#valdef-voice-rate-x-slow">x-slow</a>, in § 11.2 <li><a href="#valdef-voice-volume-x-soft">x-soft</a>, in § 6.1 <li> x-strong <ul> <li><a href="#valdef-pause-before-x-strong">value for pause-before, pause-after</a>, in § 8.1 <li><a href="#valdef-rest-before-x-strong">value for rest-before, rest-after</a>, in § 9.1 </ul> <li> x-weak <ul> <li><a href="#valdef-pause-before-x-weak">value for pause-before, pause-after</a>, in § 8.1 <li><a href="#valdef-rest-before-x-weak">value for rest-before, rest-after</a>, in § 9.1 </ul> <li><a href="#valdef-voice-family-young">young</a>, in § 11.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>border </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li>margin <li>padding </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>inherit </ul> <li> <a data-link-type="biblio">[CSS-COUNTER-STYLES-3]</a> defines the following terms: <ul> <li>armenian <li>decimal <li>decimal-leading-zero <li>georgian <li>lower-alpha <li>lower-greek <li>lower-latin <li>lower-roman <li>upper-alpha <li>upper-latin <li>upper-roman </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>display <li>none <li>visibility <li>visible </ul> <li> <a data-link-type="biblio">[CSS-FONTS-4]</a> defines the following terms: <ul> <li><family-name> <li>font-family </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li>left <li>right </ul> <li> <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms: <ul> <li>::after <li>::before </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li>&& <li>* <li>, <li><frequency> <li><integer> <li><number> <li><percentage> <li><time> <li>? <li>CSS identifier <li>CSS-wide keywords <li>dimension <li>number <li>percentage <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li><uri> </ul> <li> <a data-link-type="biblio">[CSS3GENCON]</a> defines the following terms: <ul> <li>content </ul> <li> <a data-link-type="biblio">[CSS3LIST]</a> defines the following terms: <ul> <li>list-style-image <li>list-style-type </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>span </ul> <li> <a data-link-type="biblio">[INFRA]</a> defines the following terms: <ul> <li>string </ul> <li> <a data-link-type="biblio">[MEDIAQUERIES-5]</a> defines the following terms: <ul> <li>aural </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://drafts.csswg.org/css-backgrounds/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-box-4/">https://drafts.csswg.org/css-box-4/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-5/">https://drafts.csswg.org/css-cascade-5/</a> <dt id="biblio-css-counter-styles-3">[CSS-COUNTER-STYLES-3] <dd>Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-counter-styles/"><cite>CSS Counter Styles Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-counter-styles/">https://drafts.csswg.org/css-counter-styles/</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-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-position-3">[CSS-POSITION-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-position-3/">https://drafts.csswg.org/css-position-3/</a> <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4] <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://drafts.csswg.org/css-pseudo-4/"><cite>CSS Pseudo-Elements Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-pseudo-4/">https://drafts.csswg.org/css-pseudo-4/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-3/">https://drafts.csswg.org/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-css22">[CSS22] <dd>Bert Bos. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-css3gencon">[CSS3GENCON] <dd>Elika Etemad; Dave Cramer. <a href="https://drafts.csswg.org/css-content-3/"><cite>CSS Generated Content Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-content-3/">https://drafts.csswg.org/css-content-3/</a> <dt id="biblio-css3list">[CSS3LIST] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-lists-3/"><cite>CSS Lists and Counters Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-lists-3/">https://drafts.csswg.org/css-lists-3/</a> <dt id="biblio-infra">[INFRA] <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/"><cite>Infra Standard</cite></a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a> <dt id="biblio-mediaqueries-5">[MEDIAQUERIES-5] <dd>Dean Jackson; et al. <a href="https://drafts.csswg.org/mediaqueries-5/"><cite>Media Queries Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/mediaqueries-5/">https://drafts.csswg.org/mediaqueries-5/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-ssml">[SSML] <dd>Daniel Burnett; Zhi Wei Shuang. <a href="https://www.w3.org/TR/speech-synthesis11/"><cite>Speech Synthesis Markup Language (SSML) Version 1.1</cite></a>. 7 September 2010. REC. URL: <a href="https://www.w3.org/TR/speech-synthesis11/">https://www.w3.org/TR/speech-synthesis11/</a> <dt id="biblio-xml11">[XML11] <dd>Tim Bray; et al. <a href="https://www.w3.org/TR/xml11/"><cite>Extensible Markup Language (XML) 1.1 (Second Edition)</cite></a>. 16 August 2006. REC. URL: <a href="https://www.w3.org/TR/xml11/">https://www.w3.org/TR/xml11/</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-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> <dt id="biblio-pronunciation-lexicon">[PRONUNCIATION-LEXICON] <dd>Paolo Baggia. <a href="https://www.w3.org/TR/pronunciation-lexicon/"><cite>Pronunciation Lexicon Specification (PLS) Version 1.0</cite></a>. 14 October 2008. REC. URL: <a href="https://www.w3.org/TR/pronunciation-lexicon/">https://www.w3.org/TR/pronunciation-lexicon/</a> <dt id="biblio-ssml-sayas">[SSML-SAYAS] <dd>Daniel Burnett; et al. <a href="https://www.w3.org/TR/ssml-sayas/"><cite>SSML 1.0 say-as attribute values</cite></a>. 26 May 2005. NOTE. URL: <a href="https://www.w3.org/TR/ssml-sayas/">https://www.w3.org/TR/ssml-sayas/</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">Canonical order <th scope="col">Computed value <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-cue" id="ref-for-propdef-cue⑤">cue</a> <td><'cue-before'> <'cue-after'>? <td>N/A (see individual properties) <td>all elements <td>no <td>N/A <td>per grammar <td>N/A (see individual properties) <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-cue-after" id="ref-for-propdef-cue-after⑨">cue-after</a> <td><uri> <decibel>? | none <td>none <td>all elements <td>no <td>N/A <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-cue-before" id="ref-for-propdef-cue-before⑨">cue-before</a> <td><uri> <decibel>? | none <td>none <td>all elements <td>no <td>N/A <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-pause" id="ref-for-propdef-pause⑤">pause</a> <td><'pause-before'> <'pause-after'>? <td>N/A (see individual properties) <td>all elements <td>no <td>N/A <td>per grammar <td>N/A (see individual properties) <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-pause-after" id="ref-for-propdef-pause-after⑨">pause-after</a> <td><time [0s,∞]> | none | x-weak | weak | medium | strong | x-strong <td>none <td>all elements <td>no <td>N/A <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-pause-before" id="ref-for-propdef-pause-before⑨">pause-before</a> <td><time [0s,∞]> | none | x-weak | weak | medium | strong | x-strong <td>none <td>all elements <td>no <td>N/A <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-rest" id="ref-for-propdef-rest⑤">rest</a> <td><'rest-before'> <'rest-after'>? <td>N/A (see individual properties) <td>all elements <td>no <td>N/A <td>per grammar <td>N/A (see individual properties) <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-rest-after" id="ref-for-propdef-rest-after⑦">rest-after</a> <td><time [0s,∞]> | none | x-weak | weak | medium | strong | x-strong <td>none <td>all elements <td>no <td>N/A <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-rest-before" id="ref-for-propdef-rest-before⑦">rest-before</a> <td><time [0s,∞]> | none | x-weak | weak | medium | strong | x-strong <td>none <td>all elements <td>no <td>N/A <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-speak" id="ref-for-propdef-speak⑨">speak</a> <td>auto | never | always <td>auto <td>all elements <td>yes <td>N/A <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-speak-as" id="ref-for-propdef-speak-as③">speak-as</a> <td>normal | spell-out || digits || [ literal-punctuation | no-punctuation ] <td>normal <td>all elements <td>yes <td>N/A <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-voice-balance" id="ref-for-propdef-voice-balance①②">voice-balance</a> <td><number> | left | center | right | leftwards | rightwards <td>center <td>all elements <td>yes <td>N/A <td>per grammar <td>the specified value resolved to a <number> between -100 and 100 (inclusive) <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-voice-duration" id="ref-for-propdef-voice-duration⑦">voice-duration</a> <td>auto | <time [0s,∞]> <td>auto <td>all elements <td>no <td>N/A <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-voice-family" id="ref-for-propdef-voice-family⑨">voice-family</a> <td>[[<family-name> | <generic-voice>],]* [<family-name> | <generic-voice>] | preserve <td>implementation-dependent <td>all elements <td>yes <td>N/A <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-voice-pitch" id="ref-for-propdef-voice-pitch③">voice-pitch</a> <td><frequency [0Hz,∞]> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]] <td>medium <td>all elements <td>yes <td>refer to inherited value <td>per grammar <td>one of the predefined pitch keywords if only the keyword is specified by itself, otherwise an absolute frequency calculated by converting the keyword value (if any) to a fixed frequency based on the current voice-family and by applying the specified relative offset (if any) <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-voice-range" id="ref-for-propdef-voice-range③">voice-range</a> <td><frequency [0Hz,∞]> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]] <td>medium <td>all elements <td>yes <td>refer to inherited value <td>per grammar <td>one of the predefined pitch keywords if only the keyword is specified by itself, otherwise an absolute frequency calculated by converting the keyword value (if any) to a fixed frequency based on the current voice-family and by applying the specified relative offset (if any) <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-voice-rate" id="ref-for-propdef-voice-rate⑤">voice-rate</a> <td>[normal | x-slow | slow | medium | fast | x-fast] || <percentage [0,∞]> <td>normal <td>all elements <td>yes <td>refer to default value <td>per grammar <td>a keyword value, and optionally also a percentage relative to the keyword (if not 100%) <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-voice-stress" id="ref-for-propdef-voice-stress③">voice-stress</a> <td>normal | strong | moderate | none | reduced <td>normal <td>all elements <td>yes <td>N/A <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-voice-volume" id="ref-for-propdef-voice-volume①⑤">voice-volume</a> <td>silent | [[x-soft | soft | medium | loud | x-loud] || <decibel>] <td>medium <td>all elements <td>yes <td>N/A <td>per grammar <td>silent, or a keyword value and optionally also a decibel offset (if not zero) </table> </div> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "03570f9e": {"dfnID":"03570f9e","dfnText":"<time>","external":true,"refSections":[{"refs":[{"id":"ref-for-time-value"}],"title":"8.1. \nThe pause-before and pause-after properties"},{"refs":[{"id":"ref-for-time-value\u2460"},{"id":"ref-for-time-value\u2461"}],"title":"9.1. \nThe rest-before and rest-after properties"},{"refs":[{"id":"ref-for-time-value\u2462"},{"id":"ref-for-time-value\u2463"}],"title":"12.1. \nThe voice-duration property"}],"url":"https://drafts.csswg.org/css-values-4/#time-value"}, "0698d556": {"dfnID":"0698d556","dfnText":"string","external":true,"refSections":[{"refs":[{"id":"ref-for-string"}],"title":"11.1. \nThe voice-family property"}],"url":"https://infra.spec.whatwg.org/#string"}, "12f8fb07": {"dfnID":"12f8fb07","dfnText":"visibility","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-visibility"}],"title":"7.1. \nThe speak property"},{"refs":[{"id":"ref-for-propdef-visibility\u2460"}],"title":"\nAppendix E \u2014 Changes"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "15f5b381": {"dfnID":"15f5b381","dfnText":"<percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-percentage-value"},{"id":"ref-for-percentage-value\u2460"}],"title":"11.2. \nThe voice-rate property"},{"refs":[{"id":"ref-for-percentage-value\u2461"},{"id":"ref-for-percentage-value\u2462"}],"title":"11.3. \nThe voice-pitch property"},{"refs":[{"id":"ref-for-percentage-value\u2463"},{"id":"ref-for-percentage-value\u2464"}],"title":"11.4. \nThe voice-range property"}],"url":"https://drafts.csswg.org/css-values-4/#percentage-value"}, "16310992": {"dfnID":"16310992","dfnText":"<number>","external":true,"refSections":[{"refs":[{"id":"ref-for-number-value"},{"id":"ref-for-number-value\u2460"}],"title":"6.2. \nThe voice-balance property"}],"url":"https://drafts.csswg.org/css-values-4/#number-value"}, "1f90c5c7": {"dfnID":"1f90c5c7","dfnText":"decimal-leading-zero","external":true,"refSections":[{"refs":[{"id":"ref-for-decimal-leading-zero"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#decimal-leading-zero"}, "2467179e": {"dfnID":"2467179e","dfnText":"content","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-content"}],"title":"13. \nList items and counters styles"},{"refs":[{"id":"ref-for-propdef-content\u2460"}],"title":"14. \nInserted and replaced content"}],"url":"https://drafts.csswg.org/css-content-3/#propdef-content"}, "269ee415": {"dfnID":"269ee415","dfnText":"lower-roman","external":true,"refSections":[{"refs":[{"id":"ref-for-lower-roman"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#lower-roman"}, "29a4aea4": {"dfnID":"29a4aea4","dfnText":"<frequency>","external":true,"refSections":[{"refs":[{"id":"ref-for-frequency-value"},{"id":"ref-for-frequency-value\u2460"},{"id":"ref-for-frequency-value\u2461"}],"title":"11.3. \nThe voice-pitch property"},{"refs":[{"id":"ref-for-frequency-value\u2462"},{"id":"ref-for-frequency-value\u2463"},{"id":"ref-for-frequency-value\u2464"}],"title":"11.4. \nThe voice-range property"}],"url":"https://drafts.csswg.org/css-values-4/#frequency-value"}, "2e466b95": {"dfnID":"2e466b95","dfnText":"lower-alpha","external":true,"refSections":[{"refs":[{"id":"ref-for-lower-alpha"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#lower-alpha"}, "358fd6ff": {"dfnID":"358fd6ff","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"3.1. \nValue Definitions"},{"refs":[{"id":"ref-for-css-wide-keywords\u2460"}],"title":"11.1. \nThe voice-family property"}],"url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "48ba888a": {"dfnID":"48ba888a","dfnText":"upper-latin","external":true,"refSections":[{"refs":[{"id":"ref-for-upper-latin"},{"id":"ref-for-upper-latin\u2460"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#upper-latin"}, "494d86c0": {"dfnID":"494d86c0","dfnText":"upper-alpha","external":true,"refSections":[{"refs":[{"id":"ref-for-upper-alpha"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#upper-alpha"}, "537cf076": {"dfnID":"537cf076","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"}],"title":"8.2. \nThe pause shorthand property"},{"refs":[{"id":"ref-for-mult-opt\u2460"}],"title":"9.2. \nThe rest shorthand property"},{"refs":[{"id":"ref-for-mult-opt\u2461"}],"title":"10.1. \nThe cue-before and cue-after properties"},{"refs":[{"id":"ref-for-mult-opt\u2462"}],"title":"10.3. \nThe cue shorthand property"}],"url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "55e8f5de": {"dfnID":"55e8f5de","dfnText":"none","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-none"},{"id":"ref-for-valdef-display-none\u2460"}],"title":"7.1. \nThe speak property"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-none"}, "5869f885": {"dfnID":"5869f885","dfnText":"::before","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-before"}],"title":"5. \nThe aural formatting model"},{"refs":[{"id":"ref-for-selectordef-before\u2460"}],"title":"14. \nInserted and replaced content"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-before"}, "6420cb11": {"dfnID":"6420cb11","dfnText":"visible","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-visibility-visible"}],"title":"7.1. \nThe speak property"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-visibility-visible"}, "68150e76": {"dfnID":"68150e76","dfnText":"*","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-zero-plus"}],"title":"11.1. \nThe voice-family property"}],"url":"https://drafts.csswg.org/css-values-4/#mult-zero-plus"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"},{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"},{"id":"ref-for-comb-one\u2462"},{"id":"ref-for-comb-one\u2463"}],"title":"6.1. \nThe voice-volume property"},{"refs":[{"id":"ref-for-comb-one\u2464"},{"id":"ref-for-comb-one\u2465"},{"id":"ref-for-comb-one\u2466"},{"id":"ref-for-comb-one\u2467"},{"id":"ref-for-comb-one\u2468"}],"title":"6.2. \nThe voice-balance property"},{"refs":[{"id":"ref-for-comb-one\u2460\u24ea"},{"id":"ref-for-comb-one\u2460\u2460"}],"title":"7.1. \nThe speak property"},{"refs":[{"id":"ref-for-comb-one\u2460\u2461"},{"id":"ref-for-comb-one\u2460\u2462"}],"title":"7.2. \nThe speak-as property"},{"refs":[{"id":"ref-for-comb-one\u2460\u2463"},{"id":"ref-for-comb-one\u2460\u2464"},{"id":"ref-for-comb-one\u2460\u2465"},{"id":"ref-for-comb-one\u2460\u2466"},{"id":"ref-for-comb-one\u2460\u2467"},{"id":"ref-for-comb-one\u2460\u2468"}],"title":"8.1. \nThe pause-before and pause-after properties"},{"refs":[{"id":"ref-for-comb-one\u2461\u24ea"},{"id":"ref-for-comb-one\u2461\u2460"},{"id":"ref-for-comb-one\u2461\u2461"},{"id":"ref-for-comb-one\u2461\u2462"},{"id":"ref-for-comb-one\u2461\u2463"},{"id":"ref-for-comb-one\u2461\u2464"}],"title":"9.1. \nThe rest-before and rest-after properties"},{"refs":[{"id":"ref-for-comb-one\u2461\u2465"}],"title":"10.1. \nThe cue-before and cue-after properties"},{"refs":[{"id":"ref-for-comb-one\u2461\u2466"},{"id":"ref-for-comb-one\u2461\u2467"},{"id":"ref-for-comb-one\u2461\u2468"}],"title":"11.1. \nThe voice-family property"},{"refs":[{"id":"ref-for-comb-one\u2462\u24ea"},{"id":"ref-for-comb-one\u2462\u2460"},{"id":"ref-for-comb-one\u2462\u2461"},{"id":"ref-for-comb-one\u2462\u2462"},{"id":"ref-for-comb-one\u2462\u2463"}],"title":"11.2. \nThe voice-rate property"},{"refs":[{"id":"ref-for-comb-one\u2462\u2464"},{"id":"ref-for-comb-one\u2462\u2465"},{"id":"ref-for-comb-one\u2462\u2466"},{"id":"ref-for-comb-one\u2462\u2467"},{"id":"ref-for-comb-one\u2462\u2468"},{"id":"ref-for-comb-one\u2463\u24ea"},{"id":"ref-for-comb-one\u2463\u2460"}],"title":"11.3. \nThe voice-pitch property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2461"},{"id":"ref-for-comb-one\u2463\u2462"},{"id":"ref-for-comb-one\u2463\u2463"},{"id":"ref-for-comb-one\u2463\u2464"},{"id":"ref-for-comb-one\u2463\u2465"},{"id":"ref-for-comb-one\u2463\u2466"},{"id":"ref-for-comb-one\u2463\u2467"}],"title":"11.4. \nThe voice-range property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2468"},{"id":"ref-for-comb-one\u2464\u24ea"},{"id":"ref-for-comb-one\u2464\u2460"},{"id":"ref-for-comb-one\u2464\u2461"}],"title":"11.5. \nThe voice-stress property"},{"refs":[{"id":"ref-for-comb-one\u2464\u2462"}],"title":"12.1. \nThe voice-duration property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "70c9f859": {"dfnID":"70c9f859","dfnText":"<integer>","external":true,"refSections":[{"refs":[{"id":"ref-for-integer-value"},{"id":"ref-for-integer-value\u2460"}],"title":"11.1. \nThe voice-family property"}],"url":"https://drafts.csswg.org/css-values-4/#integer-value"}, "8343cc0f": {"dfnID":"8343cc0f","dfnText":"aural","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-media-aural"}],"title":"2. \nBackground information, CSS 2.1"}],"url":"https://drafts.csswg.org/mediaqueries-5/#valdef-media-aural"}, "8a82fda1": {"dfnID":"8a82fda1","dfnText":"||","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-any"}],"title":"6.1. \nThe voice-volume property"},{"refs":[{"id":"ref-for-comb-any\u2460"},{"id":"ref-for-comb-any\u2461"}],"title":"7.2. \nThe speak-as property"},{"refs":[{"id":"ref-for-comb-any\u2462"}],"title":"11.2. \nThe voice-rate property"},{"refs":[{"id":"ref-for-comb-any\u2463"}],"title":"11.3. \nThe voice-pitch property"},{"refs":[{"id":"ref-for-comb-any\u2464"}],"title":"11.4. \nThe voice-range property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "9f9120ff": {"dfnID":"9f9120ff","dfnText":",","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-comma"}],"title":"8.1. \nThe pause-before and pause-after properties"},{"refs":[{"id":"ref-for-comb-comma\u2460"}],"title":"11.1. \nThe voice-family property"},{"refs":[{"id":"ref-for-comb-comma\u2461"}],"title":"12.1. \nThe voice-duration property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-comma"}, "a1900547": {"dfnID":"a1900547","dfnText":"upper-roman","external":true,"refSections":[{"refs":[{"id":"ref-for-upper-roman"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#upper-roman"}, "a8aeaafc": {"dfnID":"a8aeaafc","dfnText":"georgian","external":true,"refSections":[{"refs":[{"id":"ref-for-georgian"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#georgian"}, "a9734ee4": {"dfnID":"a9734ee4","dfnText":"border","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border"}],"title":"5. \nThe aural formatting model"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border"}, "a9cd92d9": {"dfnID":"a9cd92d9","dfnText":"lower-greek","external":true,"refSections":[{"refs":[{"id":"ref-for-lower-greek"},{"id":"ref-for-lower-greek\u2460"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#lower-greek"}, "aural-box-model": {"dfnID":"aural-box-model","dfnText":"aural \u201cbox\u201d model","external":false,"refSections":[{"refs":[{"id":"ref-for-aural-box-model"},{"id":"ref-for-aural-box-model\u2460"},{"id":"ref-for-aural-box-model\u2461"}],"title":"6.1. \nThe voice-volume property"},{"refs":[{"id":"ref-for-aural-box-model\u2462"},{"id":"ref-for-aural-box-model\u2463"}],"title":"8.1. \nThe pause-before and pause-after properties"},{"refs":[{"id":"ref-for-aural-box-model\u2464"},{"id":"ref-for-aural-box-model\u2465"}],"title":"9.1. \nThe rest-before and rest-after properties"},{"refs":[{"id":"ref-for-aural-box-model\u2466"},{"id":"ref-for-aural-box-model\u2467"}],"title":"10.1. \nThe cue-before and cue-after properties"},{"refs":[{"id":"ref-for-aural-box-model\u2468"}],"title":"10.2. \nRelation between audio cues and speech synthesis volume levels"}],"url":"#aural-box-model"}, "b0b8d8c0": {"dfnID":"b0b8d8c0","dfnText":"right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-right"}],"title":"6.2. \nThe voice-balance property"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-right"}, "b32b852a": {"dfnID":"b32b852a","dfnText":"span","external":true,"refSections":[{"refs":[{"id":"ref-for-the-span-element"}],"title":"4. \nExample"}],"url":"https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element"}, "b5418f3e": {"dfnID":"b5418f3e","dfnText":"padding","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding"}],"title":"5. \nThe aural formatting model"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding"}, "ba80b0b1": {"dfnID":"ba80b0b1","dfnText":"<family-name>","external":true,"refSections":[{"refs":[{"id":"ref-for-family-name-value"}],"title":"11.1. \nThe voice-family property"}],"url":"https://drafts.csswg.org/css-fonts-4/#family-name-value"}, "c33ace41": {"dfnID":"c33ace41","dfnText":"CSS identifier","external":true,"refSections":[{"refs":[{"id":"ref-for-css-css-identifier"}],"title":"11.1. \nThe voice-family property"}],"url":"https://drafts.csswg.org/css-values-4/#css-css-identifier"}, "c388d253": {"dfnID":"c388d253","dfnText":"inherit","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-all-inherit"}],"title":"11.1. \nThe voice-family property"}],"url":"https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit"}, "c7965b42": {"dfnID":"c7965b42","dfnText":"percentage","external":true,"refSections":[{"refs":[{"id":"ref-for-percentage"}],"title":"11.2. \nThe voice-rate property"},{"refs":[{"id":"ref-for-percentage\u2460"}],"title":"11.3. \nThe voice-pitch property"},{"refs":[{"id":"ref-for-percentage\u2461"}],"title":"11.4. \nThe voice-range property"}],"url":"https://drafts.csswg.org/css-values-4/#percentage"}, "cecbe9cd": {"dfnID":"cecbe9cd","dfnText":"margin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin"}],"title":"5. \nThe aural formatting model"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin"}, "d4922c84": {"dfnID":"d4922c84","dfnText":"lower-latin","external":true,"refSections":[{"refs":[{"id":"ref-for-lower-latin"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#lower-latin"}, "d65d17df": {"dfnID":"d65d17df","dfnText":"font-family","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-family"},{"id":"ref-for-propdef-font-family\u2460"}],"title":"11.1. \nThe voice-family property"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-family"}, "d6a1ad1b": {"dfnID":"d6a1ad1b","dfnText":"<uri>","external":true,"refSections":[{"refs":[{"id":"ref-for-value-def-uri"},{"id":"ref-for-value-def-uri\u2460"}],"title":"10.1. \nThe cue-before and cue-after properties"}],"url":"https://drafts.csswg.org/css2/#value-def-uri"}, "da00cf5b": {"dfnID":"da00cf5b","dfnText":"armenian","external":true,"refSections":[{"refs":[{"id":"ref-for-armenian"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#armenian"}, "dde41168": {"dfnID":"dde41168","dfnText":"left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-left"}],"title":"6.2. \nThe voice-balance property"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-left"}, "de56fbfe": {"dfnID":"de56fbfe","dfnText":"list-style-type","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-list-style-type"},{"id":"ref-for-propdef-list-style-type\u2460"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style-type"}, "document": {"dfnID":"document","dfnText":"document","external":false,"refSections":[],"url":"#document"}, "e149ddf7": {"dfnID":"e149ddf7","dfnText":"decimal","external":true,"refSections":[{"refs":[{"id":"ref-for-decimal"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#decimal"}, "e450523b": {"dfnID":"e450523b","dfnText":"list-style-image","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-list-style-image"}],"title":"13. \nList items and counters styles"}],"url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style-image"}, "e510368f": {"dfnID":"e510368f","dfnText":"dimension","external":true,"refSections":[{"refs":[{"id":"ref-for-dimension"}],"title":"6.1. \nThe voice-volume property"},{"refs":[{"id":"ref-for-dimension\u2460"}],"title":"11.3. \nThe voice-pitch property"}],"url":"https://drafts.csswg.org/css-values-4/#dimension"}, "e7f0dd6c": {"dfnID":"e7f0dd6c","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"},{"id":"ref-for-propdef-display\u2460"},{"id":"ref-for-propdef-display\u2461"},{"id":"ref-for-propdef-display\u2462"},{"id":"ref-for-propdef-display\u2463"}],"title":"7.1. \nThe speak property"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "f0809abc": {"dfnID":"f0809abc","dfnText":"&&","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-all"}],"title":"11.3. \nThe voice-pitch property"},{"refs":[{"id":"ref-for-comb-all\u2460"}],"title":"11.4. \nThe voice-range property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-all"}, "f0ba04de": {"dfnID":"f0ba04de","dfnText":"number","external":true,"refSections":[{"refs":[{"id":"ref-for-number"}],"title":"6.2. \nThe voice-balance property"}],"url":"https://drafts.csswg.org/css-values-4/#number"}, "fd0c9e35": {"dfnID":"fd0c9e35","dfnText":"::after","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-after"}],"title":"5. \nThe aural formatting model"},{"refs":[{"id":"ref-for-selectordef-after\u2460"}],"title":"14. \nInserted and replaced content"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-after"}, "propdef-cue": {"dfnID":"propdef-cue","dfnText":"cue","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-cue"}],"title":"5. \nThe aural formatting model"},{"refs":[{"id":"ref-for-propdef-cue\u2460"},{"id":"ref-for-propdef-cue\u2461"}],"title":"8.3. \nCollapsing pauses"},{"refs":[{"id":"ref-for-propdef-cue\u2462"},{"id":"ref-for-propdef-cue\u2463"}],"title":"10.3. \nThe cue shorthand property"}],"url":"#propdef-cue"}, "propdef-cue-after": {"dfnID":"propdef-cue-after","dfnText":"cue-after","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-cue-after"}],"title":"8.1. \nThe pause-before and pause-after properties"},{"refs":[{"id":"ref-for-propdef-cue-after\u2460"},{"id":"ref-for-propdef-cue-after\u2461"}],"title":"8.3. \nCollapsing pauses"},{"refs":[{"id":"ref-for-propdef-cue-after\u2462"}],"title":"9.1. \nThe rest-before and rest-after properties"},{"refs":[{"id":"ref-for-propdef-cue-after\u2463"},{"id":"ref-for-propdef-cue-after\u2464"}],"title":"10.1. \nThe cue-before and cue-after properties"},{"refs":[{"id":"ref-for-propdef-cue-after\u2465"},{"id":"ref-for-propdef-cue-after\u2466"},{"id":"ref-for-propdef-cue-after\u2467"}],"title":"10.3. \nThe cue shorthand property"}],"url":"#propdef-cue-after"}, "propdef-cue-before": {"dfnID":"propdef-cue-before","dfnText":"cue-before","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-cue-before"}],"title":"8.1. \nThe pause-before and pause-after properties"},{"refs":[{"id":"ref-for-propdef-cue-before\u2460"},{"id":"ref-for-propdef-cue-before\u2461"}],"title":"8.3. \nCollapsing pauses"},{"refs":[{"id":"ref-for-propdef-cue-before\u2462"}],"title":"9.1. \nThe rest-before and rest-after properties"},{"refs":[{"id":"ref-for-propdef-cue-before\u2463"},{"id":"ref-for-propdef-cue-before\u2464"}],"title":"10.1. \nThe cue-before and cue-after properties"},{"refs":[{"id":"ref-for-propdef-cue-before\u2465"},{"id":"ref-for-propdef-cue-before\u2466"},{"id":"ref-for-propdef-cue-before\u2467"}],"title":"10.3. \nThe cue shorthand property"}],"url":"#propdef-cue-before"}, "propdef-pause": {"dfnID":"propdef-pause","dfnText":"pause","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-pause"}],"title":"5. \nThe aural formatting model"},{"refs":[{"id":"ref-for-propdef-pause\u2460"}],"title":"8.1. \nThe pause-before and pause-after properties"},{"refs":[{"id":"ref-for-propdef-pause\u2461"},{"id":"ref-for-propdef-pause\u2462"}],"title":"8.2. \nThe pause shorthand property"},{"refs":[{"id":"ref-for-propdef-pause\u2463"}],"title":"8.3. \nCollapsing pauses"}],"url":"#propdef-pause"}, "propdef-pause-after": {"dfnID":"propdef-pause-after","dfnText":"pause-after","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-pause-after"},{"id":"ref-for-propdef-pause-after\u2460"}],"title":"8.1. \nThe pause-before and pause-after properties"},{"refs":[{"id":"ref-for-propdef-pause-after\u2461"},{"id":"ref-for-propdef-pause-after\u2462"},{"id":"ref-for-propdef-pause-after\u2463"}],"title":"8.2. \nThe pause shorthand property"},{"refs":[{"id":"ref-for-propdef-pause-after\u2464"},{"id":"ref-for-propdef-pause-after\u2465"},{"id":"ref-for-propdef-pause-after\u2466"},{"id":"ref-for-propdef-pause-after\u2467"}],"title":"8.3. \nCollapsing pauses"}],"url":"#propdef-pause-after"}, "propdef-pause-before": {"dfnID":"propdef-pause-before","dfnText":"pause-before","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-pause-before"},{"id":"ref-for-propdef-pause-before\u2460"}],"title":"8.1. \nThe pause-before and pause-after properties"},{"refs":[{"id":"ref-for-propdef-pause-before\u2461"},{"id":"ref-for-propdef-pause-before\u2462"},{"id":"ref-for-propdef-pause-before\u2463"}],"title":"8.2. \nThe pause shorthand property"},{"refs":[{"id":"ref-for-propdef-pause-before\u2464"},{"id":"ref-for-propdef-pause-before\u2465"},{"id":"ref-for-propdef-pause-before\u2466"},{"id":"ref-for-propdef-pause-before\u2467"}],"title":"8.3. \nCollapsing pauses"}],"url":"#propdef-pause-before"}, "propdef-rest": {"dfnID":"propdef-rest","dfnText":"rest","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-rest"},{"id":"ref-for-propdef-rest\u2460"}],"title":"5. \nThe aural formatting model"},{"refs":[{"id":"ref-for-propdef-rest\u2461"}],"title":"9.1. \nThe rest-before and rest-after properties"},{"refs":[{"id":"ref-for-propdef-rest\u2462"},{"id":"ref-for-propdef-rest\u2463"}],"title":"9.2. \nThe rest shorthand property"}],"url":"#propdef-rest"}, "propdef-rest-after": {"dfnID":"propdef-rest-after","dfnText":"rest-after","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-rest-after"},{"id":"ref-for-propdef-rest-after\u2460"}],"title":"8.3. \nCollapsing pauses"},{"refs":[{"id":"ref-for-propdef-rest-after\u2461"},{"id":"ref-for-propdef-rest-after\u2462"}],"title":"9.1. \nThe rest-before and rest-after properties"},{"refs":[{"id":"ref-for-propdef-rest-after\u2463"},{"id":"ref-for-propdef-rest-after\u2464"},{"id":"ref-for-propdef-rest-after\u2465"}],"title":"9.2. \nThe rest shorthand property"}],"url":"#propdef-rest-after"}, "propdef-rest-before": {"dfnID":"propdef-rest-before","dfnText":"rest-before","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-rest-before"},{"id":"ref-for-propdef-rest-before\u2460"}],"title":"8.3. \nCollapsing pauses"},{"refs":[{"id":"ref-for-propdef-rest-before\u2461"},{"id":"ref-for-propdef-rest-before\u2462"}],"title":"9.1. \nThe rest-before and rest-after properties"},{"refs":[{"id":"ref-for-propdef-rest-before\u2463"},{"id":"ref-for-propdef-rest-before\u2464"},{"id":"ref-for-propdef-rest-before\u2465"}],"title":"9.2. \nThe rest shorthand property"}],"url":"#propdef-rest-before"}, "propdef-speak": {"dfnID":"propdef-speak","dfnText":"speak","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-speak"},{"id":"ref-for-propdef-speak\u2460"}],"title":"6.1. \nThe voice-volume property"},{"refs":[{"id":"ref-for-propdef-speak\u2461"},{"id":"ref-for-propdef-speak\u2462"},{"id":"ref-for-propdef-speak\u2463"},{"id":"ref-for-propdef-speak\u2464"}],"title":"7.1. \nThe speak property"},{"refs":[{"id":"ref-for-propdef-speak\u2465"}],"title":"8.3. \nCollapsing pauses"},{"refs":[{"id":"ref-for-propdef-speak\u2466"},{"id":"ref-for-propdef-speak\u2467"}],"title":"\nAppendix E \u2014 Changes"}],"url":"#propdef-speak"}, "propdef-speak-as": {"dfnID":"propdef-speak-as","dfnText":"speak-as","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-speak-as"},{"id":"ref-for-propdef-speak-as\u2460"},{"id":"ref-for-propdef-speak-as\u2461"}],"title":"7.2. \nThe speak-as property"}],"url":"#propdef-speak-as"}, "propdef-voice-balance": {"dfnID":"propdef-voice-balance","dfnText":"voice-balance","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-voice-balance\u2460"},{"id":"ref-for-propdef-voice-balance\u2461"},{"id":"ref-for-propdef-voice-balance\u2462"},{"id":"ref-for-propdef-voice-balance\u2463"},{"id":"ref-for-propdef-voice-balance\u2464"},{"id":"ref-for-propdef-voice-balance\u2465"},{"id":"ref-for-propdef-voice-balance\u2466"},{"id":"ref-for-propdef-voice-balance\u2467"},{"id":"ref-for-propdef-voice-balance\u2468"},{"id":"ref-for-propdef-voice-balance\u2460\u24ea"},{"id":"ref-for-propdef-voice-balance\u2460\u2460"}],"title":"6.2. \nThe voice-balance property"}],"url":"#propdef-voice-balance"}, "propdef-voice-duration": {"dfnID":"propdef-voice-duration","dfnText":"voice-duration","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-voice-duration\u2460"}],"title":"8.3. \nCollapsing pauses"},{"refs":[{"id":"ref-for-propdef-voice-duration\u2461"},{"id":"ref-for-propdef-voice-duration\u2462"},{"id":"ref-for-propdef-voice-duration\u2463"},{"id":"ref-for-propdef-voice-duration\u2464"},{"id":"ref-for-propdef-voice-duration\u2465"}],"title":"12.1. \nThe voice-duration property"}],"url":"#propdef-voice-duration"}, "propdef-voice-family": {"dfnID":"propdef-voice-family","dfnText":"voice-family","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-voice-family"}],"title":"10.2. \nRelation between audio cues and speech synthesis volume levels"},{"refs":[{"id":"ref-for-propdef-voice-family\u2460"},{"id":"ref-for-propdef-voice-family\u2461"},{"id":"ref-for-propdef-voice-family\u2462"},{"id":"ref-for-propdef-voice-family\u2463"}],"title":"11.1. \nThe voice-family property"},{"refs":[{"id":"ref-for-propdef-voice-family\u2464"},{"id":"ref-for-propdef-voice-family\u2465"},{"id":"ref-for-propdef-voice-family\u2466"}],"title":"11.1.1. \nVoice selection, content language"},{"refs":[{"id":"ref-for-propdef-voice-family\u2467"}],"title":"11.3. \nThe voice-pitch property"}],"url":"#propdef-voice-family"}, "propdef-voice-pitch": {"dfnID":"propdef-voice-pitch","dfnText":"voice-pitch","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-voice-pitch\u2460"},{"id":"ref-for-propdef-voice-pitch\u2461"}],"title":"11.3. \nThe voice-pitch property"}],"url":"#propdef-voice-pitch"}, "propdef-voice-range": {"dfnID":"propdef-voice-range","dfnText":"voice-range","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-voice-range\u2460"},{"id":"ref-for-propdef-voice-range\u2461"}],"title":"11.4. \nThe voice-range property"}],"url":"#propdef-voice-range"}, "propdef-voice-rate": {"dfnID":"propdef-voice-rate","dfnText":"voice-rate","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-voice-rate"},{"id":"ref-for-propdef-voice-rate\u2460"}],"title":"11.2. \nThe voice-rate property"},{"refs":[{"id":"ref-for-propdef-voice-rate\u2461"},{"id":"ref-for-propdef-voice-rate\u2462"},{"id":"ref-for-propdef-voice-rate\u2463"}],"title":"12.1. \nThe voice-duration property"}],"url":"#propdef-voice-rate"}, "propdef-voice-stress": {"dfnID":"propdef-voice-stress","dfnText":"voice-stress","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-voice-stress\u2460"},{"id":"ref-for-propdef-voice-stress\u2461"}],"title":"11.5. \nThe voice-stress property"}],"url":"#propdef-voice-stress"}, "propdef-voice-volume": {"dfnID":"propdef-voice-volume","dfnText":"voice-volume","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-voice-volume"},{"id":"ref-for-propdef-voice-volume\u2460"},{"id":"ref-for-propdef-voice-volume\u2461"},{"id":"ref-for-propdef-voice-volume\u2462"},{"id":"ref-for-propdef-voice-volume\u2463"}],"title":"6.1. \nThe voice-volume property"},{"refs":[{"id":"ref-for-propdef-voice-volume\u2464"},{"id":"ref-for-propdef-voice-volume\u2465"},{"id":"ref-for-propdef-voice-volume\u2466"},{"id":"ref-for-propdef-voice-volume\u2467"},{"id":"ref-for-propdef-voice-volume\u2468"},{"id":"ref-for-propdef-voice-volume\u2460\u24ea"}],"title":"10.1. \nThe cue-before and cue-after properties"},{"refs":[{"id":"ref-for-propdef-voice-volume\u2460\u2460"},{"id":"ref-for-propdef-voice-volume\u2460\u2461"},{"id":"ref-for-propdef-voice-volume\u2460\u2462"},{"id":"ref-for-propdef-voice-volume\u2460\u2463"}],"title":"10.2. \nRelation between audio cues and speech synthesis volume levels"}],"url":"#propdef-voice-volume"}, "style-sheet": {"dfnID":"style-sheet","dfnText":"style sheet","external":false,"refSections":[],"url":"#style-sheet"}, "typedef-generic-voice": {"dfnID":"typedef-generic-voice","dfnText":"<generic-voice>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-generic-voice"}],"title":"11.1. \nThe voice-family property"}],"url":"#typedef-generic-voice"}, "typedef-voice-family-age": {"dfnID":"typedef-voice-family-age","dfnText":"<age>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-voice-family-age"},{"id":"ref-for-typedef-voice-family-age\u2460"}],"title":"11.1. \nThe voice-family property"}],"url":"#typedef-voice-family-age"}, "typedef-voice-family-gender": {"dfnID":"typedef-voice-family-gender","dfnText":"<gender>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-voice-family-gender"},{"id":"ref-for-typedef-voice-family-gender\u2460"}],"title":"11.1. \nThe voice-family property"}],"url":"#typedef-voice-family-gender"}, "typedef-voice-pitch-semitones": {"dfnID":"typedef-voice-pitch-semitones","dfnText":"<semitones>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-voice-pitch-semitones"},{"id":"ref-for-typedef-voice-pitch-semitones\u2460"},{"id":"ref-for-typedef-voice-pitch-semitones\u2461"}],"title":"11.3. \nThe voice-pitch property"},{"refs":[{"id":"ref-for-typedef-voice-pitch-semitones\u2462"},{"id":"ref-for-typedef-voice-pitch-semitones\u2463"}],"title":"11.4. \nThe voice-range property"}],"url":"#typedef-voice-pitch-semitones"}, "typedef-voice-volume-decibel": {"dfnID":"typedef-voice-volume-decibel","dfnText":"<decibel>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-voice-volume-decibel"},{"id":"ref-for-typedef-voice-volume-decibel\u2460"},{"id":"ref-for-typedef-voice-volume-decibel\u2461"},{"id":"ref-for-typedef-voice-volume-decibel\u2462"}],"title":"6.1. \nThe voice-volume property"},{"refs":[{"id":"ref-for-typedef-voice-volume-decibel\u2463"},{"id":"ref-for-typedef-voice-volume-decibel\u2464"},{"id":"ref-for-typedef-voice-volume-decibel\u2465"}],"title":"10.1. \nThe cue-before and cue-after properties"},{"refs":[{"id":"ref-for-typedef-voice-volume-decibel\u2466"},{"id":"ref-for-typedef-voice-volume-decibel\u2467"}],"title":"10.2. \nRelation between audio cues and speech synthesis volume levels"}],"url":"#typedef-voice-volume-decibel"}, "ua": {"dfnID":"ua","dfnText":"UA","external":false,"refSections":[],"url":"#ua"}, "user-agent": {"dfnID":"user-agent","dfnText":"user agent","external":false,"refSections":[],"url":"#user-agent"}, "valdef-cue-before-uri": {"dfnID":"valdef-cue-before-uri","dfnText":"<uri>","external":false,"refSections":[],"url":"#valdef-cue-before-uri"}, "valdef-pause-before-medium": {"dfnID":"valdef-pause-before-medium","dfnText":"medium","external":false,"refSections":[],"url":"#valdef-pause-before-medium"}, "valdef-pause-before-none": {"dfnID":"valdef-pause-before-none","dfnText":"none","external":false,"refSections":[],"url":"#valdef-pause-before-none"}, "valdef-pause-before-strong": {"dfnID":"valdef-pause-before-strong","dfnText":"strong","external":false,"refSections":[],"url":"#valdef-pause-before-strong"}, "valdef-pause-before-time-0s": {"dfnID":"valdef-pause-before-time-0s","dfnText":"<time [0s,\u221e]>","external":false,"refSections":[],"url":"#valdef-pause-before-time-0s"}, "valdef-pause-before-weak": {"dfnID":"valdef-pause-before-weak","dfnText":"weak","external":false,"refSections":[],"url":"#valdef-pause-before-weak"}, "valdef-pause-before-x-strong": {"dfnID":"valdef-pause-before-x-strong","dfnText":"x-strong","external":false,"refSections":[],"url":"#valdef-pause-before-x-strong"}, "valdef-pause-before-x-weak": {"dfnID":"valdef-pause-before-x-weak","dfnText":"x-weak","external":false,"refSections":[],"url":"#valdef-pause-before-x-weak"}, "valdef-rest-before-medium": {"dfnID":"valdef-rest-before-medium","dfnText":"medium","external":false,"refSections":[],"url":"#valdef-rest-before-medium"}, "valdef-rest-before-none": {"dfnID":"valdef-rest-before-none","dfnText":"none","external":false,"refSections":[],"url":"#valdef-rest-before-none"}, "valdef-rest-before-strong": {"dfnID":"valdef-rest-before-strong","dfnText":"strong","external":false,"refSections":[],"url":"#valdef-rest-before-strong"}, "valdef-rest-before-time-0s": {"dfnID":"valdef-rest-before-time-0s","dfnText":"<time [0s,\u221e]>","external":false,"refSections":[],"url":"#valdef-rest-before-time-0s"}, "valdef-rest-before-weak": {"dfnID":"valdef-rest-before-weak","dfnText":"weak","external":false,"refSections":[],"url":"#valdef-rest-before-weak"}, "valdef-rest-before-x-strong": {"dfnID":"valdef-rest-before-x-strong","dfnText":"x-strong","external":false,"refSections":[],"url":"#valdef-rest-before-x-strong"}, "valdef-rest-before-x-weak": {"dfnID":"valdef-rest-before-x-weak","dfnText":"x-weak","external":false,"refSections":[],"url":"#valdef-rest-before-x-weak"}, "valdef-speak-always": {"dfnID":"valdef-speak-always","dfnText":"always","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-speak-always"},{"id":"ref-for-valdef-speak-always\u2460"}],"title":"7.1. \nThe speak property"},{"refs":[{"id":"ref-for-valdef-speak-always\u2461"}],"title":"\nAppendix E \u2014 Changes"}],"url":"#valdef-speak-always"}, "valdef-speak-as-digits": {"dfnID":"valdef-speak-as-digits","dfnText":"digits","external":false,"refSections":[],"url":"#valdef-speak-as-digits"}, "valdef-speak-as-literal-punctuation": {"dfnID":"valdef-speak-as-literal-punctuation","dfnText":"literal-punctuation","external":false,"refSections":[],"url":"#valdef-speak-as-literal-punctuation"}, "valdef-speak-as-no-punctuation": {"dfnID":"valdef-speak-as-no-punctuation","dfnText":"no-punctuation","external":false,"refSections":[],"url":"#valdef-speak-as-no-punctuation"}, "valdef-speak-as-normal": {"dfnID":"valdef-speak-as-normal","dfnText":"normal","external":false,"refSections":[],"url":"#valdef-speak-as-normal"}, "valdef-speak-as-spell-out": {"dfnID":"valdef-speak-as-spell-out","dfnText":"spell-out","external":false,"refSections":[],"url":"#valdef-speak-as-spell-out"}, "valdef-speak-auto": {"dfnID":"valdef-speak-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-speak-auto"},{"id":"ref-for-valdef-speak-auto\u2460"},{"id":"ref-for-valdef-speak-auto\u2461"}],"title":"7.1. \nThe speak property"},{"refs":[{"id":"ref-for-valdef-speak-auto\u2462"}],"title":"\nAppendix E \u2014 Changes"}],"url":"#valdef-speak-auto"}, "valdef-speak-never": {"dfnID":"valdef-speak-never","dfnText":"never","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-speak-never"},{"id":"ref-for-valdef-speak-never\u2460"},{"id":"ref-for-valdef-speak-never\u2461"}],"title":"7.1. \nThe speak property"},{"refs":[{"id":"ref-for-valdef-speak-never\u2462"}],"title":"\nAppendix E \u2014 Changes"}],"url":"#valdef-speak-never"}, "valdef-voice-balance-center": {"dfnID":"valdef-voice-balance-center","dfnText":"center","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-balance-center"},{"id":"ref-for-valdef-voice-balance-center\u2460"}],"title":"6.2. \nThe voice-balance property"}],"url":"#valdef-voice-balance-center"}, "valdef-voice-balance-left": {"dfnID":"valdef-voice-balance-left","dfnText":"left","external":false,"refSections":[],"url":"#valdef-voice-balance-left"}, "valdef-voice-balance-leftwards": {"dfnID":"valdef-voice-balance-leftwards","dfnText":"leftwards","external":false,"refSections":[],"url":"#valdef-voice-balance-leftwards"}, "valdef-voice-balance-number": {"dfnID":"valdef-voice-balance-number","dfnText":"<number>","external":false,"refSections":[],"url":"#valdef-voice-balance-number"}, "valdef-voice-balance-right": {"dfnID":"valdef-voice-balance-right","dfnText":"right","external":false,"refSections":[],"url":"#valdef-voice-balance-right"}, "valdef-voice-balance-rightwards": {"dfnID":"valdef-voice-balance-rightwards","dfnText":"rightwards","external":false,"refSections":[],"url":"#valdef-voice-balance-rightwards"}, "valdef-voice-duration-auto": {"dfnID":"valdef-voice-duration-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-duration-auto"},{"id":"ref-for-valdef-voice-duration-auto\u2460"}],"title":"12.1. \nThe voice-duration property"}],"url":"#valdef-voice-duration-auto"}, "valdef-voice-duration-time-0s": {"dfnID":"valdef-voice-duration-time-0s","dfnText":"<time [0s,\u221e]>","external":false,"refSections":[],"url":"#valdef-voice-duration-time-0s"}, "valdef-voice-family-child": {"dfnID":"valdef-voice-family-child","dfnText":"child","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-family-child"}],"title":"11.1. \nThe voice-family property"}],"url":"#valdef-voice-family-child"}, "valdef-voice-family-family-name": {"dfnID":"valdef-voice-family-family-name","dfnText":"<family-name>","external":false,"refSections":[],"url":"#valdef-voice-family-family-name"}, "valdef-voice-family-female": {"dfnID":"valdef-voice-family-female","dfnText":"female","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-family-female"}],"title":"11.1. \nThe voice-family property"}],"url":"#valdef-voice-family-female"}, "valdef-voice-family-integer": {"dfnID":"valdef-voice-family-integer","dfnText":"<integer>","external":false,"refSections":[],"url":"#valdef-voice-family-integer"}, "valdef-voice-family-male": {"dfnID":"valdef-voice-family-male","dfnText":"male","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-family-male"}],"title":"11.1. \nThe voice-family property"}],"url":"#valdef-voice-family-male"}, "valdef-voice-family-neutral": {"dfnID":"valdef-voice-family-neutral","dfnText":"neutral","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-family-neutral"}],"title":"11.1. \nThe voice-family property"}],"url":"#valdef-voice-family-neutral"}, "valdef-voice-family-old": {"dfnID":"valdef-voice-family-old","dfnText":"old","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-family-old"}],"title":"11.1. \nThe voice-family property"}],"url":"#valdef-voice-family-old"}, "valdef-voice-family-preserve": {"dfnID":"valdef-voice-family-preserve","dfnText":"preserve","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-family-preserve"},{"id":"ref-for-valdef-voice-family-preserve\u2460"}],"title":"11.1. \nThe voice-family property"},{"refs":[{"id":"ref-for-valdef-voice-family-preserve\u2461"}],"title":"11.1.1. \nVoice selection, content language"}],"url":"#valdef-voice-family-preserve"}, "valdef-voice-family-young": {"dfnID":"valdef-voice-family-young","dfnText":"young","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-family-young"}],"title":"11.1. \nThe voice-family property"}],"url":"#valdef-voice-family-young"}, "valdef-voice-pitch-absolute": {"dfnID":"valdef-voice-pitch-absolute","dfnText":"absolute","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-pitch-absolute"},{"id":"ref-for-valdef-voice-pitch-absolute\u2460"}],"title":"11.3. \nThe voice-pitch property"}],"url":"#valdef-voice-pitch-absolute"}, "valdef-voice-pitch-frequency": {"dfnID":"valdef-voice-pitch-frequency","dfnText":"<frequency>","external":false,"refSections":[],"url":"#valdef-voice-pitch-frequency"}, "valdef-voice-pitch-high": {"dfnID":"valdef-voice-pitch-high","dfnText":"high","external":false,"refSections":[],"url":"#valdef-voice-pitch-high"}, "valdef-voice-pitch-low": {"dfnID":"valdef-voice-pitch-low","dfnText":"low","external":false,"refSections":[],"url":"#valdef-voice-pitch-low"}, "valdef-voice-pitch-medium": {"dfnID":"valdef-voice-pitch-medium","dfnText":"medium","external":false,"refSections":[],"url":"#valdef-voice-pitch-medium"}, "valdef-voice-pitch-percentage": {"dfnID":"valdef-voice-pitch-percentage","dfnText":"<percentage>","external":false,"refSections":[],"url":"#valdef-voice-pitch-percentage"}, "valdef-voice-pitch-semitones": {"dfnID":"valdef-voice-pitch-semitones","dfnText":"<semitones>","external":false,"refSections":[],"url":"#valdef-voice-pitch-semitones"}, "valdef-voice-pitch-x-high": {"dfnID":"valdef-voice-pitch-x-high","dfnText":"x-high","external":false,"refSections":[],"url":"#valdef-voice-pitch-x-high"}, "valdef-voice-pitch-x-low": {"dfnID":"valdef-voice-pitch-x-low","dfnText":"x-low","external":false,"refSections":[],"url":"#valdef-voice-pitch-x-low"}, "valdef-voice-range-absolute": {"dfnID":"valdef-voice-range-absolute","dfnText":"absolute","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-range-absolute"},{"id":"ref-for-valdef-voice-range-absolute\u2460"}],"title":"11.4. \nThe voice-range property"}],"url":"#valdef-voice-range-absolute"}, "valdef-voice-range-high": {"dfnID":"valdef-voice-range-high","dfnText":"high","external":false,"refSections":[],"url":"#valdef-voice-range-high"}, "valdef-voice-range-low": {"dfnID":"valdef-voice-range-low","dfnText":"low","external":false,"refSections":[],"url":"#valdef-voice-range-low"}, "valdef-voice-range-medium": {"dfnID":"valdef-voice-range-medium","dfnText":"medium","external":false,"refSections":[],"url":"#valdef-voice-range-medium"}, "valdef-voice-range-percentage": {"dfnID":"valdef-voice-range-percentage","dfnText":"<percentage>","external":false,"refSections":[],"url":"#valdef-voice-range-percentage"}, "valdef-voice-range-semitones": {"dfnID":"valdef-voice-range-semitones","dfnText":"<semitones>","external":false,"refSections":[],"url":"#valdef-voice-range-semitones"}, "valdef-voice-range-x-high": {"dfnID":"valdef-voice-range-x-high","dfnText":"x-high","external":false,"refSections":[],"url":"#valdef-voice-range-x-high"}, "valdef-voice-range-x-low": {"dfnID":"valdef-voice-range-x-low","dfnText":"x-low","external":false,"refSections":[],"url":"#valdef-voice-range-x-low"}, "valdef-voice-rate-fast": {"dfnID":"valdef-voice-rate-fast","dfnText":"fast","external":false,"refSections":[],"url":"#valdef-voice-rate-fast"}, "valdef-voice-rate-medium": {"dfnID":"valdef-voice-rate-medium","dfnText":"medium","external":false,"refSections":[],"url":"#valdef-voice-rate-medium"}, "valdef-voice-rate-normal": {"dfnID":"valdef-voice-rate-normal","dfnText":"normal","external":false,"refSections":[],"url":"#valdef-voice-rate-normal"}, "valdef-voice-rate-percentage-0": {"dfnID":"valdef-voice-rate-percentage-0","dfnText":"<percentage [0,\u221e]>","external":false,"refSections":[],"url":"#valdef-voice-rate-percentage-0"}, "valdef-voice-rate-slow": {"dfnID":"valdef-voice-rate-slow","dfnText":"slow","external":false,"refSections":[],"url":"#valdef-voice-rate-slow"}, "valdef-voice-rate-x-fast": {"dfnID":"valdef-voice-rate-x-fast","dfnText":"x-fast","external":false,"refSections":[],"url":"#valdef-voice-rate-x-fast"}, "valdef-voice-rate-x-slow": {"dfnID":"valdef-voice-rate-x-slow","dfnText":"x-slow","external":false,"refSections":[],"url":"#valdef-voice-rate-x-slow"}, "valdef-voice-stress-moderate": {"dfnID":"valdef-voice-stress-moderate","dfnText":"moderate","external":false,"refSections":[],"url":"#valdef-voice-stress-moderate"}, "valdef-voice-stress-none": {"dfnID":"valdef-voice-stress-none","dfnText":"none","external":false,"refSections":[],"url":"#valdef-voice-stress-none"}, "valdef-voice-stress-normal": {"dfnID":"valdef-voice-stress-normal","dfnText":"normal","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-stress-normal"}],"title":"11.5. \nThe voice-stress property"}],"url":"#valdef-voice-stress-normal"}, "valdef-voice-stress-reduced": {"dfnID":"valdef-voice-stress-reduced","dfnText":"reduced","external":false,"refSections":[],"url":"#valdef-voice-stress-reduced"}, "valdef-voice-stress-strong": {"dfnID":"valdef-voice-stress-strong","dfnText":"strong","external":false,"refSections":[],"url":"#valdef-voice-stress-strong"}, "valdef-voice-volume-decibel": {"dfnID":"valdef-voice-volume-decibel","dfnText":"<decibel>","external":false,"refSections":[],"url":"#valdef-voice-volume-decibel"}, "valdef-voice-volume-loud": {"dfnID":"valdef-voice-volume-loud","dfnText":"loud","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-volume-loud"}],"title":"6.1. \nThe voice-volume property"}],"url":"#valdef-voice-volume-loud"}, "valdef-voice-volume-medium": {"dfnID":"valdef-voice-volume-medium","dfnText":"medium","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-volume-medium"}],"title":"6.1. \nThe voice-volume property"}],"url":"#valdef-voice-volume-medium"}, "valdef-voice-volume-silent": {"dfnID":"valdef-voice-volume-silent","dfnText":"silent","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-volume-silent"},{"id":"ref-for-valdef-voice-volume-silent\u2460"},{"id":"ref-for-valdef-voice-volume-silent\u2461"},{"id":"ref-for-valdef-voice-volume-silent\u2462"}],"title":"6.1. \nThe voice-volume property"},{"refs":[{"id":"ref-for-valdef-voice-volume-silent\u2463"},{"id":"ref-for-valdef-voice-volume-silent\u2464"},{"id":"ref-for-valdef-voice-volume-silent\u2465"},{"id":"ref-for-valdef-voice-volume-silent\u2466"}],"title":"10.1. \nThe cue-before and cue-after properties"},{"refs":[{"id":"ref-for-valdef-voice-volume-silent\u2467"}],"title":"10.2. \nRelation between audio cues and speech synthesis volume levels"}],"url":"#valdef-voice-volume-silent"}, "valdef-voice-volume-soft": {"dfnID":"valdef-voice-volume-soft","dfnText":"soft","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-volume-soft"}],"title":"6.1. \nThe voice-volume property"}],"url":"#valdef-voice-volume-soft"}, "valdef-voice-volume-x-loud": {"dfnID":"valdef-voice-volume-x-loud","dfnText":"x-loud","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-volume-x-loud"},{"id":"ref-for-valdef-voice-volume-x-loud\u2460"},{"id":"ref-for-valdef-voice-volume-x-loud\u2461"},{"id":"ref-for-valdef-voice-volume-x-loud\u2462"}],"title":"6.1. \nThe voice-volume property"}],"url":"#valdef-voice-volume-x-loud"}, "valdef-voice-volume-x-soft": {"dfnID":"valdef-voice-volume-x-soft","dfnText":"x-soft","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-voice-volume-x-soft"},{"id":"ref-for-valdef-voice-volume-x-soft\u2460"},{"id":"ref-for-valdef-voice-volume-x-soft\u2461"},{"id":"ref-for-valdef-voice-volume-x-soft\u2462"}],"title":"6.1. \nThe voice-volume property"}],"url":"#valdef-voice-volume-x-soft"}, "voice-pitch-semitone": {"dfnID":"voice-pitch-semitone","dfnText":"semitone","external":false,"refSections":[{"refs":[{"id":"ref-for-voice-pitch-semitone"},{"id":"ref-for-voice-pitch-semitone\u2460"},{"id":"ref-for-voice-pitch-semitone\u2461"}],"title":"11.3. \nThe voice-pitch property"},{"refs":[{"id":"ref-for-voice-pitch-semitone\u2462"}],"title":"11.4. \nThe voice-range property"}],"url":"#voice-pitch-semitone"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "https://drafts.csswg.org/css-values-4/#time-value": "Expands to: ms | s", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#aural-box-model": {"displayText":"aural box model","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"aural box model","type":"dfn","url":"#aural-box-model"}, "#propdef-cue": {"displayText":"cue","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"cue","type":"property","url":"#propdef-cue"}, "#propdef-cue-after": {"displayText":"cue-after","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"cue-after","type":"property","url":"#propdef-cue-after"}, "#propdef-cue-before": {"displayText":"cue-before","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"cue-before","type":"property","url":"#propdef-cue-before"}, "#propdef-pause": {"displayText":"pause","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"pause","type":"property","url":"#propdef-pause"}, "#propdef-pause-after": {"displayText":"pause-after","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"pause-after","type":"property","url":"#propdef-pause-after"}, "#propdef-pause-before": {"displayText":"pause-before","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"pause-before","type":"property","url":"#propdef-pause-before"}, "#propdef-rest": {"displayText":"rest","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"rest","type":"property","url":"#propdef-rest"}, "#propdef-rest-after": {"displayText":"rest-after","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"rest-after","type":"property","url":"#propdef-rest-after"}, "#propdef-rest-before": {"displayText":"rest-before","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"rest-before","type":"property","url":"#propdef-rest-before"}, "#propdef-speak": {"displayText":"speak","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"speak","type":"property","url":"#propdef-speak"}, "#propdef-speak-as": {"displayText":"speak-as","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"speak-as","type":"property","url":"#propdef-speak-as"}, "#propdef-voice-balance": {"displayText":"voice-balance","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"voice-balance","type":"property","url":"#propdef-voice-balance"}, "#propdef-voice-duration": {"displayText":"voice-duration","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"voice-duration","type":"property","url":"#propdef-voice-duration"}, "#propdef-voice-family": {"displayText":"voice-family","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"voice-family","type":"property","url":"#propdef-voice-family"}, "#propdef-voice-pitch": {"displayText":"voice-pitch","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"voice-pitch","type":"property","url":"#propdef-voice-pitch"}, "#propdef-voice-range": {"displayText":"voice-range","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"voice-range","type":"property","url":"#propdef-voice-range"}, "#propdef-voice-rate": {"displayText":"voice-rate","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"voice-rate","type":"property","url":"#propdef-voice-rate"}, "#propdef-voice-stress": {"displayText":"voice-stress","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"voice-stress","type":"property","url":"#propdef-voice-stress"}, "#propdef-voice-volume": {"displayText":"voice-volume","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"voice-volume","type":"property","url":"#propdef-voice-volume"}, "#typedef-generic-voice": {"displayText":"<generic-voice>","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"<generic-voice>","type":"type","url":"#typedef-generic-voice"}, "#typedef-voice-family-age": {"displayText":"<age>","export":true,"for_":["voice-family"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"<age>","type":"type","url":"#typedef-voice-family-age"}, "#typedef-voice-family-gender": {"displayText":"<gender>","export":true,"for_":["voice-family"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"<gender>","type":"type","url":"#typedef-voice-family-gender"}, "#typedef-voice-pitch-semitones": {"displayText":"<semitones>","export":true,"for_":["voice-pitch"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"<semitones>","type":"type","url":"#typedef-voice-pitch-semitones"}, "#typedef-voice-volume-decibel": {"displayText":"<decibel>","export":true,"for_":["voice-volume"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"<decibel>","type":"type","url":"#typedef-voice-volume-decibel"}, "#valdef-speak-always": {"displayText":"always","export":true,"for_":["speak"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"always","type":"value","url":"#valdef-speak-always"}, "#valdef-speak-auto": {"displayText":"auto","export":true,"for_":["speak"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"auto","type":"value","url":"#valdef-speak-auto"}, "#valdef-speak-never": {"displayText":"never","export":true,"for_":["speak"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"never","type":"value","url":"#valdef-speak-never"}, "#valdef-voice-balance-center": {"displayText":"center","export":true,"for_":["voice-balance"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"center","type":"value","url":"#valdef-voice-balance-center"}, "#valdef-voice-duration-auto": {"displayText":"auto","export":true,"for_":["voice-duration"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"auto","type":"value","url":"#valdef-voice-duration-auto"}, "#valdef-voice-family-child": {"displayText":"child","export":true,"for_":["voice-family"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"child","type":"value","url":"#valdef-voice-family-child"}, "#valdef-voice-family-female": {"displayText":"female","export":true,"for_":["voice-family"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"female","type":"value","url":"#valdef-voice-family-female"}, "#valdef-voice-family-male": {"displayText":"male","export":true,"for_":["voice-family"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"male","type":"value","url":"#valdef-voice-family-male"}, "#valdef-voice-family-neutral": {"displayText":"neutral","export":true,"for_":["voice-family"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"neutral","type":"value","url":"#valdef-voice-family-neutral"}, "#valdef-voice-family-old": {"displayText":"old","export":true,"for_":["voice-family"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"old","type":"value","url":"#valdef-voice-family-old"}, "#valdef-voice-family-preserve": {"displayText":"preserve","export":true,"for_":["voice-family"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"preserve","type":"value","url":"#valdef-voice-family-preserve"}, "#valdef-voice-family-young": {"displayText":"young","export":true,"for_":["voice-family"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"young","type":"value","url":"#valdef-voice-family-young"}, "#valdef-voice-pitch-absolute": {"displayText":"absolute","export":true,"for_":["voice-pitch"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"absolute","type":"value","url":"#valdef-voice-pitch-absolute"}, "#valdef-voice-range-absolute": {"displayText":"absolute","export":true,"for_":["voice-range"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"absolute","type":"value","url":"#valdef-voice-range-absolute"}, "#valdef-voice-stress-normal": {"displayText":"normal","export":true,"for_":["voice-stress"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"normal","type":"value","url":"#valdef-voice-stress-normal"}, "#valdef-voice-volume-loud": {"displayText":"loud","export":true,"for_":["voice-volume"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"loud","type":"value","url":"#valdef-voice-volume-loud"}, "#valdef-voice-volume-medium": {"displayText":"medium","export":true,"for_":["voice-volume"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"medium","type":"value","url":"#valdef-voice-volume-medium"}, "#valdef-voice-volume-silent": {"displayText":"silent","export":true,"for_":["voice-volume"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"silent","type":"value","url":"#valdef-voice-volume-silent"}, "#valdef-voice-volume-soft": {"displayText":"soft","export":true,"for_":["voice-volume"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"soft","type":"value","url":"#valdef-voice-volume-soft"}, "#valdef-voice-volume-x-loud": {"displayText":"x-loud","export":true,"for_":["voice-volume"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"x-loud","type":"value","url":"#valdef-voice-volume-x-loud"}, "#valdef-voice-volume-x-soft": {"displayText":"x-soft","export":true,"for_":["voice-volume"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"x-soft","type":"value","url":"#valdef-voice-volume-x-soft"}, "#voice-pitch-semitone": {"displayText":"semitone","export":true,"for_":["voice-pitch"],"level":"1","normative":true,"shortname":"css-speech","spec":"css-speech-1","status":"local","text":"semitone","type":"dfn","url":"#voice-pitch-semitone"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border": {"displayText":"border","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border"}, "https://drafts.csswg.org/css-box-4/#propdef-margin": {"displayText":"margin","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin"}, "https://drafts.csswg.org/css-box-4/#propdef-padding": {"displayText":"padding","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding"}, "https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit": {"displayText":"inherit","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"inherit","type":"value","url":"https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit"}, "https://drafts.csswg.org/css-content-3/#propdef-content": {"displayText":"content","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-content","spec":"css-content-3","status":"current","text":"content","type":"property","url":"https://drafts.csswg.org/css-content-3/#propdef-content"}, "https://drafts.csswg.org/css-counter-styles-3/#armenian": {"displayText":"armenian","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"armenian","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#armenian"}, "https://drafts.csswg.org/css-counter-styles-3/#decimal": {"displayText":"decimal","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"decimal","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#decimal"}, "https://drafts.csswg.org/css-counter-styles-3/#decimal-leading-zero": {"displayText":"decimal-leading-zero","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"decimal-leading-zero","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#decimal-leading-zero"}, "https://drafts.csswg.org/css-counter-styles-3/#georgian": {"displayText":"georgian","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"georgian","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#georgian"}, "https://drafts.csswg.org/css-counter-styles-3/#lower-alpha": {"displayText":"lower-alpha","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"lower-alpha","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#lower-alpha"}, "https://drafts.csswg.org/css-counter-styles-3/#lower-greek": {"displayText":"lower-greek","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"lower-greek","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#lower-greek"}, "https://drafts.csswg.org/css-counter-styles-3/#lower-latin": {"displayText":"lower-latin","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"lower-latin","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#lower-latin"}, "https://drafts.csswg.org/css-counter-styles-3/#lower-roman": {"displayText":"lower-roman","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"lower-roman","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#lower-roman"}, "https://drafts.csswg.org/css-counter-styles-3/#upper-alpha": {"displayText":"upper-alpha","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"upper-alpha","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#upper-alpha"}, "https://drafts.csswg.org/css-counter-styles-3/#upper-latin": {"displayText":"upper-latin","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"upper-latin","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#upper-latin"}, "https://drafts.csswg.org/css-counter-styles-3/#upper-roman": {"displayText":"upper-roman","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"upper-roman","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#upper-roman"}, "https://drafts.csswg.org/css-display-4/#propdef-display": {"displayText":"display","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"display","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "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-display-4/#valdef-display-none": {"displayText":"none","export":true,"for_":["display","<display-box>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"none","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-none"}, "https://drafts.csswg.org/css-display-4/#valdef-visibility-visible": {"displayText":"visible","export":true,"for_":["visibility"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"visible","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-visibility-visible"}, "https://drafts.csswg.org/css-fonts-4/#family-name-value": {"displayText":"<family-name>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"<family-name>","type":"type","url":"https://drafts.csswg.org/css-fonts-4/#family-name-value"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-family": {"displayText":"font-family","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-family","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-family"}, "https://drafts.csswg.org/css-lists-3/#propdef-list-style-image": {"displayText":"list-style-image","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"current","text":"list-style-image","type":"property","url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style-image"}, "https://drafts.csswg.org/css-lists-3/#propdef-list-style-type": {"displayText":"list-style-type","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"current","text":"list-style-type","type":"property","url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style-type"}, "https://drafts.csswg.org/css-position-3/#propdef-left": {"displayText":"left","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"left","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-left"}, "https://drafts.csswg.org/css-position-3/#propdef-right": {"displayText":"right","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"right","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-right"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-after": {"displayText":"::after","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::after","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-after"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-before": {"displayText":"::before","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::before","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-before"}, "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-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/#comb-comma"}, "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-css-identifier": {"displayText":"CSS identifier","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css identifier","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-css-identifier"}, "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/#dimension": {"displayText":"dimension","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"dimension","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#dimension"}, "https://drafts.csswg.org/css-values-4/#frequency-value": {"displayText":"<frequency>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<frequency>","type":"type","url":"https://drafts.csswg.org/css-values-4/#frequency-value"}, "https://drafts.csswg.org/css-values-4/#integer-value": {"displayText":"<integer>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<integer>","type":"type","url":"https://drafts.csswg.org/css-values-4/#integer-value"}, "https://drafts.csswg.org/css-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/#mult-zero-plus": {"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-zero-plus"}, "https://drafts.csswg.org/css-values-4/#number": {"displayText":"number","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"number","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#number"}, "https://drafts.csswg.org/css-values-4/#number-value": {"displayText":"<number>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<number>","type":"type","url":"https://drafts.csswg.org/css-values-4/#number-value"}, "https://drafts.csswg.org/css-values-4/#percentage": {"displayText":"percentage","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"percentage","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#percentage"}, "https://drafts.csswg.org/css-values-4/#percentage-value": {"displayText":"<percentage>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<percentage>","type":"type","url":"https://drafts.csswg.org/css-values-4/#percentage-value"}, "https://drafts.csswg.org/css-values-4/#time-value": {"displayText":"<time>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<time>","type":"type","url":"https://drafts.csswg.org/css-values-4/#time-value"}, "https://drafts.csswg.org/css2/#value-def-uri": {"displayText":"<uri>","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"<uri>","type":"type","url":"https://drafts.csswg.org/css2/#value-def-uri"}, "https://drafts.csswg.org/mediaqueries-5/#valdef-media-aural": {"displayText":"aural","export":true,"for_":["@media"],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"current","text":"aural","type":"value","url":"https://drafts.csswg.org/mediaqueries-5/#valdef-media-aural"}, "https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element": {"displayText":"span","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"span","type":"element","url":"https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element"}, "https://infra.spec.whatwg.org/#string": {"displayText":"string","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"string","type":"dfn","url":"https://infra.spec.whatwg.org/#string"}, }; 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>