changeset
merge
Fri, 16 Aug 2013 17:05:57 -0700
- author
- Tab Atkins Jr. <jackalmage@gmail.com>
- date
- Fri, 16 Aug 2013 17:05:57 -0700
- changeset 8869
- 9253e2d9fa55
- parent 8867
- 582043cffdc9
- parent 8868
- af6182cf409f
- child 8870
- 1a4eaf3f7f1d
merge
| css-writing-modes/Overview.html | file | annotate | diff | comparison | revisions | |
| css-writing-modes/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css-writing-modes/Overview.html Fri Aug 16 16:40:33 2013 -0700 1.2 +++ b/css-writing-modes/Overview.html Fri Aug 16 17:05:57 2013 -0700 1.3 @@ -1,994 +1,533 @@ 1.4 -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 1.5 +<!DOCTYPE html><html lang=en><head> 1.6 + <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 1.7 + <title>CSS Writing Modes Level 3</title> 1.8 + <link href=../default.css rel=stylesheet type=text/css> 1.9 + <link href=../csslogo.ico rel="shortcut icon" type=image/x-icon> 1.10 + <link href=https://www.w3.org/StyleSheets/TR/W3C-ED rel=stylesheet type=text/css> 1.11 +<script defer src=http://test.csswg.org/harness/annotate.js#css-writing-modes-3_dev></script> 1.12 1.13 -<html lang=en> 1.14 - <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 1.15 - <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 1.16 - <title>CSS Writing Modes Module Level 3</title> 1.17 1.18 - <link href="http://purl.org/dc/terms/" rel=schema.dcterms> 1.19 - <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.20 - rel=dcterms.rights> 1.21 - <meta content="CSS Writing Modes Module Level 3" name=dcterms.title> 1.22 - <meta content=text name=dcterms.type> 1.23 - <meta content=2013-07-26 name=dcterms.date> 1.24 - <meta content="Elika J. Etemad" name=dcterms.creator> 1.25 - <meta content="Koji Ishii" name=dcterms.creator> 1.26 - <meta content=W3C name=dcterms.publisher> 1.27 - <meta content="http://dev.w3.org/csswg/css3-writing-modes/" 1.28 - name=dcterms.identifier> 1.29 - <link href="../default.css" rel=stylesheet type="text/css"> 1.30 - <style type="text/css"> 1.31 - object { vertical-align: middle; } 1.32 - .sidebar { float: right; background: #eee; border: solid gray; margin: 1em; } 1.33 - .sidebar .figure { margin: 1em; } 1.34 - .sidebar object { margin: 0 auto; display: block; } 1.35 - .figurepair { display: table; margin: 1em auto; } 1.36 - .figurepair .figure { display: table-cell; } 1.37 - h2, .example { clear: both; } 1.38 - .figure img, 1.39 - .figure object, 1.40 - .example img, 1.41 - dd img { max-width: 100%; display: block; margin: 1em auto; } 1.42 - div.figure table { 1.43 - margin:auto; 1.44 - } 1.45 - </style> 1.46 - <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 1.47 - type="text/css"> 1.48 - <script defer=defer 1.49 - src="http://test.csswg.org/harness/annotate.js#css-writing-modes-3_dev" 1.50 - type="text/javascript"></script> 1.51 +</head> 1.52 +<body class=h-entry> 1.53 +<style scoped> 1.54 +object { vertical-align: middle; } 1.55 +.sidebar { float: right; background: #eee; border: solid gray; margin: 1em; } 1.56 +.sidebar .figure { margin: 1em; } 1.57 +.sidebar object { margin: 0 auto; display: block; } 1.58 +.figurepair { display: table; margin: 1em auto; } 1.59 +.figurepair .figure { display: table-cell; } 1.60 +h2, .example { clear: both; } 1.61 +.figure img, 1.62 +.figure object, 1.63 +.example img, 1.64 +dd img { max-width: 100%; display: block; margin: 1em auto; } 1.65 +div.figure table { 1.66 + margin:auto; 1.67 +} 1.68 +</style> 1.69 +<div class=head> 1.70 + <p data-fill-with=logo><a class=logo href=http://www.w3.org/> 1.71 + <img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72> 1.72 +</a></p> 1.73 + <h1 class="p-name no-ref" id=title>CSS Writing Modes Level 3</h1> 1.74 + <h2 class="no-num no-toc no-ref" id=subtitle><span class=content>Editor's Draft, 1.75 + <span class=dt-updated><span class=value-title title=20130817>17 August 2013</span></span></span></h2> 1.76 + <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-writing-modes-3/>http://dev.w3.org/csswg/css-writing-modes-3/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-writing-modes/>http://www.w3.org/TR/css3-writing-modes/</a><dt>Editor's Draft:<dd><a href=http://dev.w3.org/csswg/css-writing-modes-3/>http://dev.w3.org/csswg/css-writing-modes-3/</a> 1.77 +<dt>Feedback:</dt> 1.78 + <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-writing-modes%5D%20feedback">www-style@w3.org</a> 1.79 + with subject line 1.80 + “<kbd>[css-writing-modes] <var>… message topic …</var></kbd>” 1.81 + (<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd><a href=http://test.csswg.org/suites/css3-writing-modes/nightly-unstable/>http://test.csswg.org/suites/css3-writing-modes/nightly-unstable/</a><dt>Editors: 1.82 +<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact/>fantasai</a> (<span class="p-org org">Mozilla</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:koji.a.ishii@mail.rakuten.com>Koji Ishii</a> (<span class="p-org org">Rakuten Inc.</span>)<dt>Issues List:<dd><a href=http://www.w3.org/Style/CSS/Tracker/products/30>http://www.w3.org/Style/CSS/Tracker/products/30</a><dt>Previous Editors:<dd><a href=mailto:murakami@antenna.co.jp>Shinyu Murakami</a> (<a href=http://www.antenna.co.jp/>Antenna House</a>)<dd><a href=mailto:paulnel@microsoft.com>Paul Nelson</a> (<a href=http://www.microsoft.com/>Microsoft</a>)<dd><a href=mailto:michelsu@microsoft.com>Michel Suignard</a> (<a href=http://www.microsoft.com/>Microsoft</a>)<dt>Previous versions:<dd>http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/<dd>http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/<dd>http://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/<dd>http://www.w3.org/TR/2011/WD-css3-writing-modes-20110428/<dd>http://www.w3.org/TR/2011/WD-css3-writing-modes-20110201/<dd>http://www.w3.org/TR/2010/WD-css3-writing-modes-20101202/</dl></div> 1.83 + <div data-fill-with=warning></div> 1.84 + <p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2013 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.</p> 1.85 + <hr title="Separator for header"> 1.86 +</div> 1.87 1.88 - <body> 1.89 - <div class=head> <!--begin-logo--> 1.90 - <p><a href="http://www.w3.org/"><img alt=W3C height=48 1.91 - src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 1.92 +<h2 class="no-num no-toc no-ref" id=abstract><span class=content>Abstract</span></h2> 1.93 +<p class=p-summary data-fill-with=abstract>CSS Writing Modes Level 3 defines CSS support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).<br> Inherently bottom-to-top scripts are not handled in this version. See <a data-biblio-type=informative data-link-type=biblio href=#utn22 title=UTN22>[UTN22]</a> for an explanation of relevant issues. 1.94 +<a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents 1.95 +(such as HTML and XML) 1.96 +on screen, on paper, in speech, etc.</p> 1.97 1.98 - <h1>CSS Writing Modes Module Level 3</h1> 1.99 +<h2 class="no-num no-toc no-ref" id=status><span class=content>Status of this document</span></h2> 1.100 +<div data-fill-with=status><p> 1.101 + This is a public copy of the editors' draft. 1.102 + It is provided for discussion only and may change at any moment. 1.103 + Its publication here does not imply endorsement of its contents by W3C. 1.104 + Don't cite this document other than as work in progress. 1.105 1.106 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 July 2013</h2> 1.107 +<p> 1.108 + The (<a href=http://lists.w3.org/Archives/Public/www-style/>archived</a>) public mailing list 1.109 + <a href="mailto:www-style@w3.org?Subject=%5Bcss-writing-modes%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a> 1.110 + (see <a href=http://www.w3.org/Mail/Request>instructions</a>) 1.111 + is preferred for discussion of this specification. 1.112 + When sending e-mail, 1.113 + please put the text “css-writing-modes” in the subject, 1.114 + preferably like this: 1.115 + “[css-writing-modes] <em>…summary of comment…</em>” 1.116 1.117 - <dl> 1.118 - <dt>This version: 1.119 +<p> 1.120 + This document was produced by the <a href=/Style/CSS/members>CSS Working Group</a> 1.121 + (part of the <a href=/Style/>Style Activity</a>). 1.122 1.123 - <dd><a 1.124 - href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a> 1.125 - <!-- 1.126 - <dd><a href="http://www.w3.org/TR/2013/WD-css3-writing-modes-20130726/">http://dev.w3.org/csswg/css3-writing-modes/</a> 1.127 ---> 1.128 +<p> 1.129 + This document was produced by a group operating under 1.130 + the <a href=/Consortium/Patent-Policy-20040205/>5 February 2004 W3C Patent Policy</a>. 1.131 + W3C maintains a <a href=/2004/01/pp-impl/32061/status rel=disclosure>public list of any patent disclosures</a> 1.132 + made in connection with the deliverables of the group; 1.133 + that page also includes instructions for disclosing a patent. 1.134 + An individual who has actual knowledge of a patent which the individual believes contains <a href=/Consortium/Patent-Policy-20040205/#def-essential>Essential Claim(s)</a> 1.135 + must disclose the information in accordance with <a href=/Consortium/Patent-Policy-20040205/#sec-Disclosure>section 6 of the W3C Patent Policy</a>.</div> 1.136 +<div data-fill-with=at-risk><p>The following features are at-risk, and may be dropped during the CR period: 1.137 +<ul><li>The <a class=css data-link-type=maybe href=#valuedef-use-glyph-orientation>use-glyph-orientation</a> of <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a><li>The <span class=css data-link-type=maybe>digits</span> value of <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a>.</ul></div> 1.138 1.139 - <dt>Latest version: 1.140 +<h2 class="no-num no-toc no-ref" id=contents><span class=content>Table of contents</span></h2> 1.141 +<div data-fill-with=table-of-contents><ul class=toc><li><a href=#text-flow><span class=secno>1</span> 1.142 +Introduction to Writing Modes</a><ul class=toc><li><a href=#placement><span class=secno>1.1</span> 1.143 +Module Interactions</a><li><a href=#values><span class=secno>1.2</span> 1.144 +Values</a></ul><li><a href=#text-direction><span class=secno>2</span><span name=bidi title=""> 1.145 +Inline Direction and Bidirectionality</span></a><ul class=toc><li><a href=#direction><span class=secno>2.1</span> 1.146 +Specifying Directionality: the <span class=property data-link-type=propdesc title=direction>direction</span> property</a><li><a href=#unicode-bidi><span class=secno>2.2</span> 1.147 +Embeddings and Overrides: the <span class=property data-link-type=propdesc title=unicode-bidi>unicode-bidi</span> property</a><li><a href=#bidi-example><span class=secno>2.3</span> 1.148 +Example of Bidirectional Text</a><li><a href=#bidi-box-model><span class=secno>2.4</span> 1.149 +Box model for inline elements in bidirectional context</a></ul><li><a href=#vertical-intro><span class=secno>3</span> 1.150 +Introduction to Vertical Text</a><ul class=toc><li><a href=#writing-mode><span class=secno>3.1</span> 1.151 +Block Flow Direction: the <span class=property data-link-type=propdesc title=writing-mode>writing-mode</span> property</a><ul class=toc><li><a href=#svg-writing-mode><span class=secno>3.1.1</span> 1.152 +SVG1.1 <span class=property data-link-type=propdesc title=writing-mode>writing-mode</span> Values</a></ul></ul><li><a href=#inline-alignment><span class=secno>4</span> 1.153 +Inline-level Alignment</a><ul class=toc><li><a href=#intro-baselines><span class=secno>4.1</span> 1.154 +Introduction to Baselines</a><li><a href=#text-baselines><span class=secno>4.2</span> 1.155 +Text Baselines</a><li><a href=#replaced-baselines><span class=secno>4.3</span> 1.156 +Atomic Inline Baselines</a><li><a href=#baseline-alignment><span class=secno>4.4</span> 1.157 +Baseline Alignment</a></ul><li><a href=#intro-text-layout><span class=secno>5</span> 1.158 +Introduction to Vertical Text Layout</a><ul class=toc><li><a href=#text-orientation><span class=secno>5.1</span> 1.159 +Orienting Text: the <span class=property data-link-type=propdesc title=text-orientation>text-orientation</span> property</a><ul class=toc><li><a href=#vertical-orientations><span class=secno>5.1.1</span> 1.160 +Mixed Vertical Orientations</a><li><a href=#vertical-font-features><span class=secno>5.1.2</span> 1.161 +Vertical Typesetting and Font Features</a></ul></ul><li><a href=#abstract-box><span class=secno>6</span> 1.162 +Abstract Box Terminology</a><ul class=toc><li><a href=#abstract-dimensions><span class=secno>6.1</span> 1.163 +Abstract Dimensions</a><li><a href=#logical-directions><span class=secno>6.2</span> 1.164 +Flow-relative Directions</a><li><a href=#line-directions><span class=secno>6.3</span> 1.165 +Line-relative Directions</a><li><a href=#logical-to-physical><span class=secno>6.4</span> 1.166 +Abstract-to-Physical Mappings</a></ul><li><a href=#abstract-layout><span class=secno>7</span> 1.167 +Abstract Box Layout</a><ul class=toc><li><a href=#vertical-layout><span class=secno>7.1</span> 1.168 +Principles of Layout in Vertical Writing Modes</a><li><a href=#dimension-mapping><span class=secno>7.2</span> 1.169 +Dimensional Mapping</a><li><a href=#orthogonal-flows><span class=secno>7.3</span> 1.170 +Orthogonal Flows</a><ul class=toc><li><a href=#orthogonal-auto><span class=secno>7.3.1</span> 1.171 +Auto-sizing in Orthogonal Flows</a><li><a href=#auto-formula><span class=secno>7.3.2</span> 1.172 +Auto-measure formula for orthogonal flows</a><li><a href=#auto-multicol><span class=secno>7.3.3</span> 1.173 +Automatic Multi-column Layout in Orthogonal Flows</a><li><a href=#orthogonal-layout><span class=secno>7.3.4</span> 1.174 +Auto-sizing Orthogonal Flows</a><li><a href=#orthogonal-pagination><span class=secno>7.3.5</span> 1.175 +Fragmenting Orthogonal Flows</a></ul><li><a href=#logical-direction-layout><span class=secno>7.4</span> 1.176 +Flow-Relative Mappings</a><li><a href=#line-mappings><span class=secno>7.5</span> 1.177 +Line-Relative Mappings</a><li><a href=#physical-only><span class=secno>7.6</span> 1.178 +Purely Physical Mappings</a><li><a href=#caption-side><span class=secno>7.7</span> 1.179 +Table Caption Mappings: the <span class=property data-link-type=propdesc title=caption-side>caption-side</span> keywords</a></ul><li><a href=#page-direction><span class=secno>8</span> 1.180 +Page Flow: the page progression direction</a><li><a href=#text-combine><span class=secno>9</span> 1.181 +Glyph Composition</a><ul class=toc><li><a href=#text-combine-horizontal><span class=secno>9.1</span> 1.182 +Horizontal-in-Vertical Composition: the <span class=property data-link-type=propdesc title=text-combine-horizontal>text-combine-horizontal</span> property</a></ul><li><a href=#changes><span class=secno></span>Changes</a><ul class=toc><li><a href=#changes-2012050><span class=secno></span> 1.183 + Changes since the <span>November 1.184 + 2012 CSS Writing Modes Module Level 3 <spanbbr title="Working Draft">WD</spanbbr></span></a><li><a href=#changes-201205><span class=secno></span> 1.185 + Changes since the <span>May 1.186 + 2012 CSS Writing Modes Module Level 3 <spanbbr title="Working Draft">WD</spanbbr></span></a><li><a href=#changes-201109><span class=secno></span> 1.187 + Changes since the <span>September 1.188 + 2011 CSS Writing Modes Module Level 3 <spanbbr title="Working Draft">WD</spanbbr></span></a></ul><li><a href=#acknowledgements><span class=secno></span> 1.189 +Acknowledgements</a><li><a href=#character-properties><span class=secno></span>Appendix A. 1.190 +Characters and Properties</a><li><a href=#bidi-html><span class=secno></span> 1.191 +Appendix B: Bidi Rules for HTML 4</a><li><a href=#script-orientations><span class=secno></span>Appendix C: 1.192 +Vertical Scripts in Unicode</a><li><a href=#conformance><span class=secno></span> 1.193 +Conformance</a><ul class=toc><li><a href=#conventions><span class=secno></span> 1.194 +Document conventions</a><li><a href=#conformance-classes><span class=secno></span> 1.195 +Conformance classes</a><li><a href=#partial><span class=secno></span> 1.196 +Partial implementations</a><li><a href=#experimental><span class=secno></span> 1.197 +Experimental implementations</a><li><a href=#testing><span class=secno></span> 1.198 +Non-experimental implementations</a></ul><li><a href=#references><span class=secno></span> 1.199 +References</a><ul class=toc><li><a href=#normative><span class=secno></span> 1.200 +Normative References</a><li><a href=#informative><span class=secno></span> 1.201 +Informative References</a></ul><li><a href=#index><span class=secno></span> 1.202 +Index</a><li><a href=#property-index><span class=secno></span> 1.203 +Property index</a></ul></div> 1.204 1.205 - <dd><a 1.206 - href="http://www.w3.org/TR/css3-writing-modes/">http://www.w3.org/TR/css3-writing-modes/</a> 1.207 1.208 - <dt>Latest editor's draft: 1.209 1.210 - <dd><a 1.211 - href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a> 1.212 +<h2 data-level=1 id=text-flow><span class=secno>1 </span><span class=content> 1.213 +Introduction to Writing Modes</span><a class=section-link href=#text-flow>§</a></h2> 1.214 1.215 - <dt>Previous version: 1.216 + <p>CSS Writing Modes Level 3 defines CSS features to support for various international 1.217 + writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left 1.218 + (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and 1.219 + vertical (e.g. Asian scripts).</p> 1.220 1.221 - <dd><a 1.222 - href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/</a> 1.223 + <p>A <dfn data-dfn-type=dfn data-noexport="" id=writing-mode0>writing mode</dfn> in CSS is determined by the <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a>, 1.224 + <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a>, and <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> properties. It is defined primarily 1.225 + in terms of its <a href=#inline-base-direction>inline base direction</a> and <a href=#block-flow-direction>block flow direction</a>: 1.226 1.227 - <dt>Issues List: 1.228 - 1.229 - <dd><a 1.230 - href="http://www.w3.org/Style/CSS/Tracker/products/30">http://www.w3.org/Style/CSS/Tracker/products/30</a> 1.231 - 1.232 - <dt>Feedback: 1.233 - 1.234 - <dd><a 1.235 - href="mailto:www-style@w3.org?subject=%5Bcss-writing-modes%5D%20feedback">www-style@w3.org</a> 1.236 - with subject line “<kbd>[css-writing-modes <var>… message topic 1.237 - …</var></kbd>” (<a 1.238 - href="http://lists.w3.org/Archives/Public/www-style/" 1.239 - rel=discussion>archives</a>) 1.240 - 1.241 - <dt>Editors: 1.242 - 1.243 - <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> 1.244 - (Mozilla) 1.245 - 1.246 - <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> 1.247 - (Rakuten, Inc.) 1.248 - 1.249 - <dt>Previous Editors: 1.250 - 1.251 - <dd><a href="mailto:murakami@antenna.co.jp">Shinyu Murakami</a> (<a 1.252 - href="http://www.antenna.co.jp/">Antenna House</a>) 1.253 - 1.254 - <dd><a href="mailto:paulnel@microsoft.com">Paul Nelson</a> (<a 1.255 - href="http://www.microsoft.com/">Microsoft</a>) 1.256 - 1.257 - <dd><a href="mailto:michelsu@microsoft.com">Michel Suignard</a> (<a 1.258 - href="http://www.microsoft.com/">Microsoft</a>) 1.259 - 1.260 - <dt>Test Suite: 1.261 - 1.262 - <dd><a 1.263 - href="http://test.csswg.org/suites/css3-writing-modes/nightly-unstable/">http://test.csswg.org/suites/css3-writing-modes/nightly-unstable/</a> 1.264 - </dl> 1.265 - <!--begin-copyright--> 1.266 - <p class=copyright><a 1.267 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.268 - rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr 1.269 - title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 1.270 - href="http://www.csail.mit.edu/"><abbr 1.271 - title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 1.272 - href="http://www.ercim.eu/"><abbr 1.273 - title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 1.274 - <a href="http://www.keio.ac.jp/">Keio</a>, <a 1.275 - href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a 1.276 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 1.277 - <a 1.278 - href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 1.279 - and <a 1.280 - href="http://www.w3.org/Consortium/Legal/copyright-documents">document 1.281 - use</a> rules apply.</p> 1.282 - <!--end-copyright--> 1.283 - <hr title="Separator for header"> 1.284 + <div class=sidebar> 1.285 + <div class="figure right"> 1.286 + <a href=diagrams/text-flow-vectors-tb.svg> 1.287 + <img alt="Latin-based writing mode" class=landscape src=diagrams/text-flow-vectors-tb.png></a> 1.288 + <p class=caption>Latin-based writing mode 1.289 + </div> 1.290 + <div class="figure left"> 1.291 + <a href=diagrams/text-flow-vectors-lr-reverse.svg> 1.292 + <img alt="Mongolian-based writing mode" class=landscape src=diagrams/text-flow-vectors-lr-reverse.png></a> 1.293 + <p class=caption>Mongolian-based writing mode 1.294 + </div> 1.295 + <div class="figure right"> 1.296 + <a href=diagrams/text-flow-vectors-tb.svg> 1.297 + <img alt="Han-based writing mode" class=landscape src=diagrams/text-flow-vectors-tb.png></a> 1.298 + <a href=diagrams/text-flow-vectors-rl.svg> 1.299 + <img alt="Han-based writing mode" class=landscape src=diagrams/text-flow-vectors-rl.png></a> 1.300 + <p class=caption>Han-based writing mode 1.301 + </div> 1.302 </div> 1.303 1.304 - <h2 class="no-num no-toc" id=abstract> Abstract</h2> 1.305 + <p>The <dfn data-dfn-type=dfn data-noexport="" id=inline-base-direction>inline base direction</dfn> is the primary direction in which 1.306 + content is ordered on a line and defines on which sides the “start” 1.307 + and “end” of a line are. The <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property specifies the 1.308 + inline base direction of an element and, together with the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> 1.309 + property and the inherent directionality of any text content, determines 1.310 + the ordering of inline-level content within a line. 1.311 1.312 - <p>CSS Writing Modes Level 3 defines CSS support for various international 1.313 - writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left 1.314 - (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and 1.315 - vertical (e.g. Asian scripts). 1.316 + <p>The <dfn data-dfn-type=dfn data-noexport="" id=block-flow-direction>block flow direction</dfn> is the direction in which 1.317 + block-level boxes stack and the direction in which line boxes stack 1.318 + within a block container. The <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> property determines the 1.319 + block flow direction.</p> 1.320 1.321 - <p>Inherently bottom-to-top scripts are not handled in this version. See <a 1.322 - href="#UTN22" rel=biblioentry>[UTN22]<!--{{UTN22}}--></a> for an 1.323 - explanation of relevant issues. 1.324 + <p>A <dfn data-dfn-type=dfn data-noexport="" id=horizontal-writing-mode>horizontal writing mode</dfn> is one with horizontal lines of 1.325 + text, i.e. a downward or upward block flow. A <dfn data-dfn-type=dfn data-noexport="" id=vertical-writing----mode>vertical writing 1.326 + mode</dfn> is one with vertical lines of text, i.e. a leftward or 1.327 + rightward block flow. 1.328 1.329 - <h2 class="no-num no-toc" id=status> Status of this document</h2> 1.330 - <!--begin-status--> 1.331 + <p class=note>These terms should not be confused with 1.332 + <dfn data-dfn-type=dfn data-noexport="" id=vertical-block-flow>vertical block flow</dfn> (which is a downward or 1.333 + upward block flow) and <dfn data-dfn-type=dfn data-noexport="" id=horizontal-block-flow>horizontal block flow</dfn> (which is 1.334 + leftward or rightward block flow). To avoid confusion, CSS 1.335 + specifications avoid this latter set of terms.</p> 1.336 1.337 - <p>This is a public copy of the editors' draft. It is provided for 1.338 - discussion only and may change at any moment. Its publication here does 1.339 - not imply endorsement of its contents by W3C. Don't cite this document 1.340 - other than as work in progress. 1.341 - 1.342 - <p>The (<a 1.343 - href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 1.344 - mailing list <a 1.345 - href="mailto:www-style@w3.org?Subject=%5Bcss3-writing-modes%5D%20PUT%20SUBJECT%20HERE"> 1.346 - www-style@w3.org</a> (see <a 1.347 - href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for 1.348 - discussion of this specification. When sending e-mail, please put the text 1.349 - “css3-writing-modes” in the subject, preferably like this: 1.350 - “[<!---->css3-writing-modes<!---->] <em>…summary of comment…</em>” 1.351 - 1.352 - <p>This document was produced by the <a 1.353 - href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of 1.354 - the <a href="http://www.w3.org/Style/">Style Activity</a>). 1.355 - 1.356 - <p>This document was produced by a group operating under the <a 1.357 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 1.358 - 2004 W3C Patent Policy</a>. W3C maintains a <a 1.359 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 1.360 - rel=disclosure>public list of any patent disclosures</a> made in 1.361 - connection with the deliverables of the group; that page also includes 1.362 - instructions for disclosing a patent. An individual who has actual 1.363 - knowledge of a patent which the individual believes contains <a 1.364 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 1.365 - Claim(s)</a> must disclose the information in accordance with <a 1.366 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 1.367 - 6 of the W3C Patent Policy</a>.</p> 1.368 - <!--end-status--> 1.369 - 1.370 - <p>The following features are at-risk and may be dropped during CR: 1.371 - 1.372 + <p>Writing systems typically have one or two native writing modes. Some 1.373 + examples are: 1.374 <ul> 1.375 - <li>The ‘<a href="#use-glyph-orientation"><code 1.376 - class=css>use-glyph-orientation</code></a>’ of ‘<a 1.377 - href="#text-orientation0"><code 1.378 - class=property>text-orientation</code></a>’ 1.379 - 1.380 - <li>The ‘<code class=css>digits</code>’ value of ‘<a 1.381 - href="#text-combine-horizontal0"><code 1.382 - class=property>text-combine-horizontal</code></a>’. 1.383 + <li>Latin-based systems are typically written using a left-to-right inline 1.384 + direction with a downward (top-to-bottom) block flow direction. 1.385 + <li>Arabic-based systems are typically written using a right-to-left 1.386 + inline direction with a downward (top-to-bottom) block flow direction. 1.387 + <li>Mongolian-based systems are typically written using a top-to-bottom 1.388 + inline direction with a rightward (left-to-right) block flow direction. 1.389 + <li>Han-based systems are commonly written using a left-to-right inline direction 1.390 + with a downward (top-to-bottom) block flow direction, <strong>or</strong> 1.391 + a top-to-bottom inline direction with a leftward (right-to-left) block 1.392 + flow direction. Many magazines and newspapers will mix these two writing 1.393 + modes on the same page. 1.394 </ul> 1.395 1.396 - <h2 class="no-num no-toc" id=Contents> Table of Contents</h2> 1.397 - <!--begin-toc--> 1.398 + <p>The <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> component of the writing mode determines the 1.399 + <a href=#line-orientation>line orientation</a>, and controls 1.400 + details of text layout such as the <i>glyph orientation</i>. 1.401 1.402 - <ul class=toc> 1.403 - <li><a href="#text-flow"><span class=secno>1. </span> Introduction to 1.404 - Writing Modes</a> 1.405 - <ul class=toc> 1.406 - <li><a href="#placement"><span class=secno>1.1. </span> Module 1.407 - Interactions</a> 1.408 + <p class=note>See Unicode Technical Note #22 <a data-biblio-type=informative data-link-type=biblio href=#utn22 title=UTN22>[UTN22]</a> 1.409 + (<a href=http://fantasai.inkedblade.net/style/discuss/vertical-text/paper>HTML version</a>) 1.410 + for a more in-depth introduction to writing modes and vertical text. 1.411 1.412 - <li><a href="#values"><span class=secno>1.2. </span> Values</a> 1.413 - </ul> 1.414 +<h3 data-level=1.1 id=placement><span class=secno>1.1 </span><span class=content> 1.415 +Module Interactions</span><a class=section-link href=#placement>§</a></h3> 1.416 1.417 - <li><a href="#text-direction"><span class=secno>2. </span> Inline 1.418 - Direction and Bidirectionality</a> 1.419 - <ul class=toc> 1.420 - <li><a href="#direction"><span class=secno>2.1. </span> Specifying 1.421 - Directionality: the ‘<code class=property>direction</code>’ 1.422 - property</a> 1.423 + <p>This module replaces and extends the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> 1.424 + features defined in <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> sections 8.6 and 9.10. 1.425 1.426 - <li><a href="#unicode-bidi"><span class=secno>2.2. </span> Embeddings 1.427 - and Overrides: the ‘<code class=property>unicode-bidi</code>’ 1.428 - property</a> 1.429 +<h3 data-level=1.2 id=values><span class=secno>1.2 </span><span class=content> 1.430 +Values</span><a class=section-link href=#values>§</a></h3> 1.431 1.432 - <li><a href="#bidi-example"><span class=secno>2.3. </span> Example of 1.433 - Bidirectional Text</a> 1.434 + <p>This specification follows the 1.435 + <a href=http://www.w3.org/TR/CSS21/about.html#property-defs>CSS property 1.436 + definition conventions</a> from <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a>. Value types not defined in 1.437 + this specification are defined in CSS Level 2 Revision 1 <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a>. 1.438 + Other CSS modules may expand the definitions of these value types: for 1.439 + example <a data-biblio-type=informative data-link-type=biblio href=#css3color title=CSS3COLOR>[CSS3COLOR]</a>, when combined with this module, expands the 1.440 + definition of the <color> value type as used in this specification.</p> 1.441 + 1.442 + <p>In addition to the property-specific values listed in their definitions, 1.443 + all properties defined in this specification also accept the 1.444 + <a href=http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit>inherit</a> 1.445 + keyword as their property value. For readability it has not been repeated 1.446 + explicitly. 1.447 1.448 - <li><a href="#bidi-box-model"><span class=secno>2.4. </span> Box model 1.449 - for inline elements in bidirectional context</a> 1.450 - </ul> 1.451 1.452 - <li><a href="#vertical-intro"><span class=secno>3. </span> Introduction to 1.453 - Vertical Text</a> 1.454 - <ul class=toc> 1.455 - <li><a href="#writing-mode"><span class=secno>3.1. </span> Block Flow 1.456 - Direction: the ‘<code class=property>writing-mode</code>’ 1.457 - property</a> 1.458 - <ul class=toc> 1.459 - <li><a href="#svg-writing-mode"><span class=secno>3.1.1. </span> 1.460 - SVG1.1 ‘<code class=property>writing-mode</code>’ Values</a> 1.461 - </ul> 1.462 - </ul> 1.463 +<h2 data-level=2 id=text-direction><span class=secno>2 </span><span class=content><a name=bidi title=""> 1.464 +Inline Direction and Bidirectionality</a></span><a class=section-link href=#text-direction>§</a></h2> 1.465 1.466 - <li><a href="#inline-alignment"><span class=secno>4. </span> Inline-level 1.467 - Alignment</a> 1.468 - <ul class=toc> 1.469 - <li><a href="#intro-baselines"><span class=secno>4.1. </span> 1.470 - Introduction to Baselines</a> 1.471 + <p>While the characters in most scripts are written from left to right, 1.472 + certain scripts are written from right to left. In some documents, 1.473 + in particular those written with the Arabic or Hebrew script, and in 1.474 + some mixed-language contexts, text in a single (visually displayed) 1.475 + block may appear with mixed directionality. This phenomenon is called 1.476 + <dfn data-dfn-type=dfn data-noexport="" id=bidirectionality>bidirectionality</dfn>, or "bidi" for short.</p> 1.477 1.478 - <li><a href="#text-baselines"><span class=secno>4.2. </span> Text 1.479 - Baselines</a> 1.480 - 1.481 - <li><a href="#replaced-baselines"><span class=secno>4.3. </span> Atomic 1.482 - Inline Baselines</a> 1.483 - 1.484 - <li><a href="#baseline-alignment"><span class=secno>4.4. </span> 1.485 - Baseline Alignment</a> 1.486 - </ul> 1.487 - 1.488 - <li><a href="#intro-text-layout"><span class=secno>5. </span> Introduction 1.489 - to Vertical Text Layout</a> 1.490 - <ul class=toc> 1.491 - <li><a href="#text-orientation"><span class=secno>5.1. </span> Orienting 1.492 - Text: the ‘<code class=property>text-orientation</code>’ 1.493 - property</a> 1.494 - <ul class=toc> 1.495 - <li><a href="#vertical-orientations"><span class=secno>5.1.1. </span> 1.496 - Mixed Vertical Orientations</a> 1.497 - 1.498 - <li><a href="#vertical-font-features"><span class=secno>5.1.2. </span> 1.499 - Vertical Typesetting and Font Features</a> 1.500 - </ul> 1.501 - </ul> 1.502 - 1.503 - <li><a href="#abstract-box"><span class=secno>6. </span> Abstract Box 1.504 - Terminology</a> 1.505 - <ul class=toc> 1.506 - <li><a href="#abstract-dimensions"><span class=secno>6.1. </span> 1.507 - Abstract Dimensions</a> 1.508 - 1.509 - <li><a href="#logical-directions"><span class=secno>6.2. </span> 1.510 - Flow-relative Directions</a> 1.511 - 1.512 - <li><a href="#line-directions"><span class=secno>6.3. </span> 1.513 - Line-relative Directions</a> 1.514 - 1.515 - <li><a href="#logical-to-physical"><span class=secno>6.4. </span> 1.516 - Abstract-to-Physical Mappings</a> 1.517 - </ul> 1.518 - 1.519 - <li><a href="#abstract-layout"><span class=secno>7. </span> Abstract Box 1.520 - Layout</a> 1.521 - <ul class=toc> 1.522 - <li><a href="#vertical-layout"><span class=secno>7.1. </span> Principles 1.523 - of Layout in Vertical Writing Modes</a> 1.524 - 1.525 - <li><a href="#dimension-mapping"><span class=secno>7.2. </span> 1.526 - Dimensional Mapping</a> 1.527 - 1.528 - <li><a href="#orthogonal-flows"><span class=secno>7.3. </span> 1.529 - Orthogonal Flows</a> 1.530 - <ul class=toc> 1.531 - <li><a href="#orthogonal-auto"><span class=secno>7.3.1. </span> 1.532 - Auto-sizing in Orthogonal Flows</a> 1.533 - 1.534 - <li><a href="#orthogonal-multicol"><span class=secno>7.3.2. </span> 1.535 - Multi-column Layout in Orthogonal Flows</a> 1.536 - 1.537 - <li><a href="#orthogonal-pagination"><span class=secno>7.3.3. </span> 1.538 - Fragmenting Orthogonal Flows</a> 1.539 - </ul> 1.540 - 1.541 - <li><a href="#logical-direction-layout"><span class=secno>7.4. </span> 1.542 - Flow-Relative Mappings</a> 1.543 - 1.544 - <li><a href="#line-mappings"><span class=secno>7.5. </span> 1.545 - Line-Relative Mappings</a> 1.546 - 1.547 - <li><a href="#physical-only"><span class=secno>7.6. </span> Purely 1.548 - Physical Mappings</a> 1.549 - 1.550 - <li><a href="#caption-side"><span class=secno>7.7. </span> Table Caption 1.551 - Mappings: the ‘<code class=property>caption-side</code>’ 1.552 - keywords</a> 1.553 - </ul> 1.554 - 1.555 - <li><a href="#page-direction"><span class=secno>8. </span> Page Flow: the 1.556 - page progression direction</a> 1.557 - 1.558 - <li><a href="#text-combine"><span class=secno>9. </span> Glyph 1.559 - Composition</a> 1.560 - <ul class=toc> 1.561 - <li><a href="#text-combine-horizontal"><span class=secno>9.1. </span> 1.562 - Horizontal-in-Vertical Composition: the ‘<code 1.563 - class=property>text-combine-horizontal</code>’ property</a> 1.564 - </ul> 1.565 - 1.566 - <li class=no-num><a href="#changes">Changes</a> 1.567 - <ul class=toc> 1.568 - <li class=no-num><a href="#changes-201205"> Changes since the November 1.569 - 2012 CSS Writing Modes Module Level 3 <abbr 1.570 - title="Working Draft">WD</abbr></a> 1.571 - 1.572 - <li class=no-num><a href="#changes-201205"> Changes since the May 2012 1.573 - CSS Writing Modes Module Level 3 <abbr 1.574 - title="Working Draft">WD</abbr></a> 1.575 - 1.576 - <li class=no-num><a href="#changes-201109"> Changes since the September 1.577 - 2011 CSS Writing Modes Module Level 3 <abbr 1.578 - title="Working Draft">WD</abbr></a> 1.579 - </ul> 1.580 - 1.581 - <li><a href="#conformance"><span class=secno>10. </span> Conformance</a> 1.582 - <ul class=toc> 1.583 - <li><a href="#conventions"><span class=secno>10.1. </span> Document 1.584 - Conventions</a> 1.585 - 1.586 - <li><a href="#conformance-classes"><span class=secno>10.2. </span> 1.587 - Conformance Classes</a> 1.588 - 1.589 - <li><a href="#partial"><span class=secno>10.3. </span> Partial 1.590 - Implementations</a> 1.591 - 1.592 - <li><a href="#experimental"><span class=secno>10.4. </span> Experimental 1.593 - Implementations</a> 1.594 - 1.595 - <li><a href="#testing"><span class=secno>10.5. </span>Non-Experimental 1.596 - Implementations</a> 1.597 - 1.598 - <li><a href="#cr-exit-criteria"><span class=secno>10.6. </span> CR Exit 1.599 - Criteria</a> 1.600 - </ul> 1.601 - 1.602 - <li class=no-num><a href="#acknowledgements"> Acknowledgements</a> 1.603 - 1.604 - <li class=no-num><a href="#character-properties">Appendix A. Characters 1.605 - and Properties</a> 1.606 - 1.607 - <li class=no-num><a href="#bidi-html"> Appendix B: Bidi Rules for HTML 1.608 - 4</a> 1.609 - 1.610 - <li class=no-num><a href="#script-orientations">Appendix C: Vertical 1.611 - Scripts in Unicode</a> 1.612 - 1.613 - <li class=no-num><a href="#references"> References</a> 1.614 - <ul class=toc> 1.615 - <li class=no-num><a href="#normative-references"> Normative 1.616 - references</a> 1.617 - 1.618 - <li class=no-num><a href="#other-references"> Other references</a> 1.619 - </ul> 1.620 - 1.621 - <li class=no-num><a href="#property-index"> Property Index</a> 1.622 - </ul> 1.623 - <!--end-toc--> 1.624 - 1.625 - <h2 id=text-flow><span class=secno>1. </span> Introduction to Writing Modes</h2> 1.626 - 1.627 - <p>CSS Writing Modes Level 3 defines CSS features to support for various 1.628 - international writing modes, such as left-to-right (e.g. Latin or Indic), 1.629 - right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and 1.630 - Arabic) and vertical (e.g. Asian scripts). 1.631 - 1.632 - <p>A <dfn id=writing-mode0>writing mode</dfn> in CSS is determined by the 1.633 - ‘<a href="#writing-mode1"><code 1.634 - class=property>writing-mode</code></a>’, ‘<a href="#direction0"><code 1.635 - class=property>direction</code></a>’, and ‘<a 1.636 - href="#text-orientation0"><code 1.637 - class=property>text-orientation</code></a>’ properties. It is defined 1.638 - primarily in terms of its <a href="#inline-base-direction"><i>inline base 1.639 - direction</i></a> and <a href="#block-flow-direction"><i>block flow 1.640 - direction</i></a>: 1.641 - 1.642 - <div class=sidebar> 1.643 - <div class="figure right"> <a href="diagrams/text-flow-vectors-tb.svg" 1.644 - type="image/svg+xml"> <img alt="Latin-based writing mode" class=landscape 1.645 - src="diagrams/text-flow-vectors-tb.png"></a> 1.646 - <p class=caption>Latin-based writing mode 1.647 - </div> 1.648 - 1.649 - <div class="figure left"> <a 1.650 - href="diagrams/text-flow-vectors-lr-reverse.svg" type="image/svg+xml"> 1.651 - <img alt="Mongolian-based writing mode" class=landscape 1.652 - src="diagrams/text-flow-vectors-lr-reverse.png"></a> 1.653 - <p class=caption>Mongolian-based writing mode 1.654 - </div> 1.655 - 1.656 - <div class="figure right"> <a href="diagrams/text-flow-vectors-tb.svg" 1.657 - type="image/svg+xml"> <img alt="Han-based writing mode" class=landscape 1.658 - src="diagrams/text-flow-vectors-tb.png"></a> <a 1.659 - href="diagrams/text-flow-vectors-rl.svg" type="image/svg+xml"> <img 1.660 - alt="Han-based writing mode" class=landscape 1.661 - src="diagrams/text-flow-vectors-rl.png"></a> 1.662 - <p class=caption>Han-based writing mode 1.663 - </div> 1.664 + <div class=figure> 1.665 + <p><img alt="An example of bidirectional text is a Latin name in an Arabic 1.666 + sentence. The sentence overall is typeset right-to-left, but 1.667 + the letters in the Latin word in the middle are typeset 1.668 + left-to-right." src=diagrams/bidi.png> 1.669 + <p class=caption>Bidirectionality</p> 1.670 </div> 1.671 1.672 - <p>The <dfn id=inline-base-direction>inline base direction</dfn> is the 1.673 - primary direction in which content is ordered on a line and defines on 1.674 - which sides the “start” and “end” of a line are. The ‘<a 1.675 - href="#direction0"><code class=property>direction</code></a>’ property 1.676 - specifies the inline base direction of an element and, together with the 1.677 - ‘<a href="#unicode-bidi0"><code 1.678 - class=property>unicode-bidi</code></a>’ property and the inherent 1.679 - directionality of any text content, determines the ordering of 1.680 - inline-level content within a line. 1.681 + <p>The Unicode standard (<a href=http://www.unicode.org/reports/tr9/>Unicode Standard Annex #9</a>) defines a complex 1.682 + algorithm for determining the proper ordering of bidirectional text. The 1.683 + algorithm consists of an implicit part based on character properties, 1.684 + as well as explicit controls for embeddings and overrides. CSS relies 1.685 + on this algorithm to achieve proper bidirectional rendering. 1.686 1.687 - <p>The <dfn id=block-flow-direction>block flow direction</dfn> is the 1.688 - direction in which block-level boxes stack and the direction in which line 1.689 - boxes stack within a block container. The ‘<a 1.690 - href="#writing-mode1"><code class=property>writing-mode</code></a>’ 1.691 - property determines the block flow direction. 1.692 + <p>User agents that support bidirectional text must apply the Unicode 1.693 + bidirectional algorithm to every sequence of inline-level boxes uninterrupted 1.694 + by any block boundary or 1.695 + “<a href=http://www.unicode.org/reports/tr9/#Bidirectional_Character_Types>bidi type B</a>” 1.696 + <dfn data-dfn-type=dfn data-noexport="" id=forced-paragraph-break>forced paragraph break</dfn>. 1.697 + This sequence forms the <dfn data-dfn-type=dfn data-noexport="" id=paragraph title="bidi paragraph">paragraph</dfn> unit 1.698 + in the bidirectional algorithm. 1.699 + Additionally, any such sequence forming part or all of the contents of a 1.700 + <a href=#bidi-isolate>bidi-isolated</a> inline element also forms a <a href=#paragraph>bidi paragraph</a>. 1.701 1.702 - <p>A <dfn id=horizontal-writing-mode>horizontal writing mode</dfn> is one 1.703 - with horizontal lines of text, i.e. a downward or upward block flow. A 1.704 - <dfn id=vertical-writing-mode>vertical writing mode</dfn> is one with 1.705 - vertical lines of text, i.e. a leftward or rightward block flow. 1.706 + <p>Two CSS properties, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a>, 1.707 + provide explicit embedding, isolation, and override controls in the CSS layer. 1.708 + Because the base directionality of a text depends on the structure and 1.709 + semantics of the document, the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> properties 1.710 + should in most cases be used only to map bidi information in the markup 1.711 + to its corresponding CSS styles. 1.712 + <strong>If a document language provides markup features to control 1.713 + bidi, authors and users should use those features instead</strong> and not 1.714 + specify CSS rules to override them.</p> 1.715 1.716 - <p class=note>These terms should not be confused with <dfn 1.717 - id=vertical-block-flow>vertical block flow</dfn> (which is a downward or 1.718 - upward block flow) and <dfn id=horizontal-block-flow>horizontal block 1.719 - flow</dfn> (which is leftward or rightward block flow). To avoid 1.720 - confusion, CSS specifications avoid this latter set of terms. 1.721 + <p>In general, the paragraph embedding level is set according to 1.722 + the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property of the paragraph's containing block 1.723 + rather than by the heuristic given in steps P2 and P3 of the Unicode algorithm. <a data-biblio-type=normative data-link-type=biblio href=#uax9 title=UAX9>[UAX9]</a> 1.724 + When the computed <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> of the paragraph's containing block is <a class=css data-link-type=maybe href=#valuedef-plaintext>plaintext</a>, 1.725 + however, the Unicode heuristics (rules P2 and P3) are used instead. 1.726 1.727 - <p>Writing systems typically have one or two native writing modes. Some 1.728 - examples are: 1.729 + <p>The HTML specifications (<a data-biblio-type=informative data-link-type=biblio href=#html401 title=HTML401>[HTML401]</a>, section 8.2, and <a data-biblio-type=informative data-link-type=biblio href=#html5 title=HTML5>[HTML5]</a>, section 10.3.5) define 1.730 + bidirectionality behavior for HTML elements.</p> 1.731 1.732 - <ul> 1.733 - <li>Latin-based systems are typically written using a left-to-right inline 1.734 - direction with a downward (top-to-bottom) block flow direction. 1.735 + <p class=note>Because HTML UAs can turn off CSS styling, we advise HTML 1.736 + authors to use the HTML <code>dir</code> attribute and <bdo> element to 1.737 + ensure correct bidirectional layout in the absence of a style sheet.</p> 1.738 1.739 - <li>Arabic-based systems are typically written using a right-to-left 1.740 - inline direction with a downward (top-to-bottom) block flow direction. 1.741 +<h3 data-level=2.1 id=direction><span class=secno>2.1 </span><span class=content> 1.742 +Specifying Directionality: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property</span><a class=section-link href=#direction>§</a></h3> 1.743 1.744 - <li>Mongolian-based systems are typically written using a top-to-bottom 1.745 - inline direction with a rightward (left-to-right) block flow direction. 1.746 +<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-direction>direction</dfn><tr><th>Value:<td>ltr | rtl<tr><th>Initial:<td>ltr<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>yes<tr><th>Percentages:<td>n/a<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value</table> 1.747 + <p>This property specifies the inline base direction or directionality 1.748 + of any bidi paragraph, embedding, isolate, or override established by the element. 1.749 + (See <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a>.) <!-- except plaintext --> 1.750 + In addition, it informs the ordering of 1.751 + <a href=http://www.w3.org/TR/CSS21/tables.html>table</a> column layout, 1.752 + the direction of horizontal <a href=http://www.w3.org/TR/CSS21/visufx.html#overflow>overflow</a>, 1.753 + and the default alignment of text within a line, and other layout effects 1.754 + that depend on the element's inline base direction.</p> 1.755 1.756 - <li>Han-based systems are commonly written using a left-to-right inline 1.757 - direction with a downward (top-to-bottom) block flow direction, 1.758 - <strong>or</strong> a top-to-bottom inline direction with a leftward 1.759 - (right-to-left) block flow direction. Many magazines and newspapers will 1.760 - mix these two writing modes on the same page. 1.761 - </ul> 1.762 + <p>Values for this property have the following meanings:</p> 1.763 1.764 - <p>The ‘<a href="#text-orientation0"><code 1.765 - class=property>text-orientation</code></a>’ component of the writing 1.766 - mode determines the <a href="#line-orientation"><i>line 1.767 - orientation</i></a>, and controls details of text layout such as the 1.768 - <i>glyph orientation</i>. 1.769 + <dl data-dfn-for=direction data-dfn-type=value> 1.770 + <dt><dfn data-dfn-for=direction data-dfn-type=value data-export="" id=valuedef-ltr>ltr</dfn></dt> 1.771 + <dd>Left-to-right directionality.</dd> 1.772 + <dt><dfn data-dfn-for=direction data-dfn-type=value data-export="" id=valuedef-rtl>rtl</dfn></dt> 1.773 + <dd>Right-to-left directionality.</dd> 1.774 + </dl> 1.775 1.776 - <p class=note>See Unicode Technical Note #22 <a href="#UTN22" 1.777 - rel=biblioentry>[UTN22]<!--{{UTN22}}--></a> (<a 1.778 - href="http://fantasai.inkedblade.net/style/discuss/vertical-text/paper">HTML 1.779 - version</a>) for a more in-depth introduction to writing modes and 1.780 - vertical text. 1.781 + <p class=note>The <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property has no effect on bidi reordering 1.782 + when specified on inline elements whose <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> property's 1.783 + value is <a class=css data-link-type=maybe href=#valuedef-normal>normal</a>, because the element does not open an additional level 1.784 + of embedding with respect to the bidirectional algorithm.</p> 1.785 1.786 - <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3> 1.787 + <p>The value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property on the root element is also 1.788 + propagated to the initial containing block and, together with the 1.789 + <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> property, determines the document's principal writing 1.790 + mode. (See <a href=#principal-writing-mode>below</a>.) 1.791 1.792 - <p>This module replaces and extends the ‘<a href="#unicode-bidi0"><code 1.793 - class=property>unicode-bidi</code></a>’ and ‘<a 1.794 - href="#direction0"><code class=property>direction</code></a>’ features 1.795 - defined in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.796 - sections 8.6 and 9.10. 1.797 + <p class=note>Note that the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property of the HTML BODY 1.798 + element is <em>not</em> propagated to the viewport. That special 1.799 + behavior only applies to the background and overflow properties. 1.800 1.801 - <h3 id=values><span class=secno>1.2. </span> Values</h3> 1.802 + <p class=note>The <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> 1.803 + property, when specified for table column elements, is not inherited by 1.804 + cells in the column since columns are not the ancestors of the cells in 1.805 + the document tree. Thus, CSS cannot easily capture the "dir" attribute 1.806 + inheritance rules described in <a data-biblio-type=informative data-link-type=biblio href=#html401 title=HTML401>[HTML401]</a>, section 11.3.2.1. 1.807 1.808 - <p>This specification follows the <a 1.809 - href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 1.810 - definition conventions</a> from <a href="#CSS21" 1.811 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in 1.812 - this specification are defined in CSS Level 2 Revision 1 <a 1.813 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS 1.814 - modules may expand the definitions of these value types: for example <a 1.815 - href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, 1.816 - when combined with this module, expands the definition of the 1.817 - <color> value type as used in this specification. 1.818 +<h3 data-level=2.2 id=unicode-bidi><span class=secno>2.2 </span><span class=content> 1.819 +Embeddings and Overrides: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> property</span><a class=section-link href=#unicode-bidi>§</a></h3> 1.820 1.821 - <p>In addition to the property-specific values listed in their definitions, 1.822 - all properties defined in this specification also accept the <a 1.823 - href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 1.824 - keyword as their property value. For readability it has not been repeated 1.825 - explicitly. 1.826 +<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-unicode-bidi>unicode-bidi</dfn><tr><th>Value:<td>normal | embed | isolate | bidi-override | isolate-override | plaintext<tr><th>Initial:<td>normal<tr><th>Applies to:<td>all elements, but see prose<tr><th>Inherited:<td>no<tr><th>Percentages:<td>n/a<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value</table> 1.827 + <p>Normally (i.e. when <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> is <a class=css data-link-type=maybe href=#valuedef-normal>normal</a>) 1.828 + an inline element is transparent to the unicode bidi algorithm; 1.829 + content is ordered as if the element's boundaries were not there. 1.830 + Other values of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> property cause inline elements 1.831 + to create scopes within the algorithm, 1.832 + and to override the intrinsic directionality of text. 1.833 1.834 - <h2 id=text-direction><span class=secno>2. </span><a name=bidi> Inline 1.835 - Direction and Bidirectionality</a></h2> 1.836 + <p>The following informative table summarizes the element-internal and 1.837 + element-external effects of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a>: 1.838 1.839 - <p>While the characters in most scripts are written from left to right, 1.840 - certain scripts are written from right to left. In some documents, in 1.841 - particular those written with the Arabic or Hebrew script, and in some 1.842 - mixed-language contexts, text in a single (visually displayed) block may 1.843 - appear with mixed directionality. This phenomenon is called <span 1.844 - class=index-def id=bidirectionality0 title="bidirectionality (bidi)"><dfn 1.845 - id=bidirectionality>bidirectionality</dfn></span>, or "bidi" for short. 1.846 + <table class=data> 1.847 + <caption>Effect of non-<a class=css data-link-type=maybe href=#valuedef-normal>normal</a> values of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> on inline elements</caption> 1.848 + <colgroup span=2></colgroup> 1.849 + <colgroup span=3></colgroup> 1.850 + <thead> 1.851 + <tr><th colspan=2 rowspan=2> 1.852 + <th colspan=3 scope=rowgroup><abbr title="To surrounding contents, the element behaves as if its boundary were...">Outside</abbr> 1.853 + <tr><th><abbr title="a strong character of the element's 'direction'.">strong</abbr> 1.854 + <th><abbr title="a neutral character.">neutral</abbr> 1.855 + </thead> 1.856 + <tbody> 1.857 + <tr><th rowspan=3 scope=colgroup><abbr title="Within the element, content is ordered as if...">Inside</abbr> 1.858 + <th><abbr title="the element's boundaries were strong characters of the element's 'direction'.">scoped</abbr> 1.859 + <td><a class=css data-link-type=maybe href=#valuedef-embed>embed</a> 1.860 + <td><a class=css data-link-type=maybe href=#valuedef-isolate>isolate</a> 1.861 + <tr><th><abbr title="all text consisted of strong characters of the element's 'direction'.">override</abbr> 1.862 + <td><a class=css data-link-type=maybe href=#valuedef-bidi-override>bidi-override</a> 1.863 + <td><a class=css data-link-type=maybe href=#valuedef-isolate-override>isolate-override</a> 1.864 + <tr><th><abbr title="the element were a standalone paragraph ordered using UAX9 heuristics.">plaintext 1.865 + </abbr><td>— 1.866 + <td><a class=css data-link-type=maybe href=#valuedef-plaintext>plaintext</a> 1.867 + </tbody> 1.868 + </table> 1.869 1.870 - <div class=figure> 1.871 - <p><img 1.872 - alt="An example of bidirectional text is a Latin name in an Arabic sentence. The sentence overall is typeset right-to-left, but the letters in the Latin word in the middle are typeset left-to-right." 1.873 - src="diagrams/bidi.png"> 1.874 + <p>Values for this property have the following (normative) meanings:</p> 1.875 1.876 - <p class=caption>Bidirectionality 1.877 + <dl> 1.878 + <dt><dfn data-dfn-for=unicode-bidi data-dfn-type=value data-export="" id=valuedef-normal>normal</dfn></dt> 1.879 + <dd>The element does not open an additional level of embedding with 1.880 + respect to the bidirectional algorithm. For inline elements, 1.881 + implicit reordering works across element boundaries.</dd> 1.882 + <dt><dfn data-dfn-for=unicode-bidi data-dfn-type=value data-export="" id=valuedef-embed>embed</dfn></dt> 1.883 + <dd>If the element is inline, this value creates a <dfn data-dfn-type=dfn data-noexport="" id=directional-embedding>directional embedding</dfn> 1.884 + by opening an additional level of embedding with respect to the bidirectional algorithm. 1.885 + The direction of this embedding level is given by the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> 1.886 + property. Inside the element, reordering is done implicitly. This 1.887 + corresponds to adding a LRE (U+202A), for 'direction: ltr', or RLE 1.888 + (U+202B), for 'direction: rtl', at the start of the element and a PDF 1.889 + (U+202C) at the end of the element. 1.890 + <span class=note>This value has no effect on elements that are 1.891 + not inline.</span></dd> 1.892 + <dt><dfn data-dfn-for=unicode-bidi data-dfn-type=value data-export="" id=valuedef-isolate>isolate</dfn></dt> 1.893 + <dd>On an inline element, this <dfn data-dfn-type=dfn data-noexport="" id=bidi-isolate title="bidi-isolate|bidi-isolated|bidi isolation|isolation">bidi-isolates</dfn> its contents. 1.894 + This is similar to a directional embedding (and increases the embedding level accordingly) 1.895 + except that each sequence of inline-level boxes 1.896 + uninterrupted by any block boundary or <a href=#forced-paragraph-break>forced paragraph break</a> 1.897 + is treated as an <dfn data-dfn-type=dfn data-noexport="" id=isolated-sequence>isolated sequence</dfn>: 1.898 + <ul> 1.899 + <li>the content within the sequence is ordered 1.900 + as if inside an independent paragraph 1.901 + with the base directionality specified by the element's <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property. 1.902 + <li>for the purpose of bidi resolution in its containing bidi paragraph, 1.903 + the sequence is treated as if it were a single Object Replacement Character (U+FFFC). 1.904 + </ul> 1.905 + In effect, neither is the content inside the element bidi-affected 1.906 + by the content surrounding the element, 1.907 + nor is the content surrounding the element bidi-affected by the 1.908 + content or specified directionality of the element. 1.909 + However, <a href=#forced-paragraph-break>forced paragraph breaks</a> within the element still create 1.910 + a corresponding break in the containing paragraph. 1.911 + <p class=note>In Unicode 6.3 and beyond, 1.912 + this will correspond to adding an LRI (U+2066), for <span class=css data-link-type=maybe>direction: ltr</span>, 1.913 + or RLI (U+2067), for <span class=css data-link-type=maybe>direction: rtl</span>, at the start of the element, 1.914 + and a PDI (U+2069) at the end of the element. 1.915 + <p class=note>This value has no effect on elements that are not inline. 1.916 + <dt><dfn data-dfn-for=unicode-bidi data-dfn-type=value data-export="" id=valuedef-bidi-override>bidi-override</dfn></dt> 1.917 + <dd>This value puts the element's immediate content in a <dfn data-dfn-type=dfn data-noexport="" id=directional-override>directional override</dfn>. 1.918 + For an inline, this means that the element acts like a <a href=#directional-embedding>directional embedding</a> 1.919 + in the bidirectional algorithm, 1.920 + except that reordering within it is strictly in sequence according to the 1.921 + <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property; the implicit part of the bidirectional algorithm 1.922 + is ignored. This corresponds to adding a LRO (U+202D), for ''direction: 1.923 + ltr<span class=css data-link-type=maybe>, or RLO (U+202E), for </span>direction: rtl'', at the start of the 1.924 + element and a PDF (U+202C) at the end of the element. 1.925 + If the element is a block container, 1.926 + the override is applied to an anonymous inline element 1.927 + that surrounds all of its content.</dd> 1.928 + <dt><dfn data-dfn-for=unicode-bidi data-dfn-type=value data-export="" id=valuedef-isolate-override>isolate-override</dfn></dt> 1.929 + <dd>This combines the <a href=#bidi-isolate>isolation</a> behavior of <a class=css data-link-type=maybe href=#valuedef-isolate>isolate</a> with the 1.930 + <a href=#directional-override>directional override</a> behavior of <a class=css data-link-type=maybe href=#valuedef-bidi-override>bidi-override</a>: to surrounding content, 1.931 + it is equivalent to <a class=css data-link-type=maybe href=#valuedef-isolate>isolate</a>, but within the element content 1.932 + is ordered as if <a class=css data-link-type=maybe href=#valuedef-bidi-override>bidi-override</a> were specified. 1.933 + <dt><dfn data-dfn-for=unicode-bidi data-dfn-type=value data-export="" id=valuedef-plaintext>plaintext</dfn></dt> 1.934 + <dd><p>This value behaves as <a class=css data-link-type=maybe href=#valuedef-isolate>isolate</a> except that for the purposes of 1.935 + the Unicode bidirectional algorithm, the base directionality of each 1.936 + of the element's <a href=#paragraph>bidi paragraphs</a> (if a block container) 1.937 + or <a href=#isolated-sequence>isolated sequences</a> (if an inline) 1.938 + is determined by following the heuristic in rules P2 and P3 1.939 + of the Unicode bidirectional algorithm 1.940 + (rather than by using the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property of the element). 1.941 + <p class=note>In Unicode 6.3 and beyond, for inline elements 1.942 + this will correspond to adding an FSI (U+2068) at the start of the element, 1.943 + and a PDI (U+2069) at the end of the element. 1.944 + </dl> 1.945 + 1.946 + <p class=note>Because the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> property does not inherit, 1.947 + setting <a class=css data-link-type=maybe href=#valuedef-bidi-override>bidi-override</a> or <a class=css data-link-type=maybe href=#valuedef-plaintext>plaintext</a> on a block element will 1.948 + not affect any descendant blocks. Therefore these values are best 1.949 + used on blocks and inlines that do not contain any block-level 1.950 + structures. 1.951 + 1.952 + <p class=note>Note that <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> does not affect the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> 1.953 + property even in the case of <a class=css data-link-type=maybe href=#valuedef-plaintext>plaintext</a>, and thus does not affect 1.954 + <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a>-dependent layout calculations. 1.955 + 1.956 + <p>The final order of characters within each <a href=#paragraph>bidi paragraph</a> is the 1.957 + same as if the bidi control codes had been added as described above, 1.958 + markup had been stripped, and the resulting character sequence had 1.959 + been passed to an implementation of the Unicode bidirectional 1.960 + algorithm for plain text that produced the same line-breaks as the 1.961 + styled text. 1.962 + 1.963 + <p>In this process, replaced elements with <span class=css data-link-type=maybe>display: inline</span> 1.964 + are treated as neutral characters, 1.965 + unless their <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> property is either <a class=css data-link-type=maybe href=#valuedef-embed>embed</a> or <a class=css data-link-type=maybe href=#valuedef-bidi-override>bidi-override</a>, 1.966 + in which case they are treated as strong characters 1.967 + in the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> specified for the element. 1.968 + All other atomic inline-level boxes are treated as neutral characters 1.969 + always.</p> 1.970 + 1.971 + <p>If an inline element is broken around a <a href=#paragraph>bidi paragraph</a> 1.972 + boundary (e.g. if split by a block or <a href=#forced-paragraph-break>forced paragraph break</a>), then 1.973 + the bidi control codes assigned to the end of the element 1.974 + are added before the interruption and the codes assigned to the 1.975 + start of the element are added after it. (In other words, any embedding 1.976 + levels or overrides started by the element are closed at the paragraph 1.977 + break and reopened on the other side of it.) 1.978 + 1.979 + <div class=example> 1.980 + <p>For example, where <BR/> is a <a href=#forced-paragraph-break>forced paragraph break</a> 1.981 + the bidi ordering is identical between 1.982 +<pre><para>...<i1><i2>...<BR/>...</i2><i1>...</para></pre> <p>and 1.983 +<pre><para>...<i1><i2>...</i2><i1><BR/><i1><i2>...</i2><i1>...</para></pre> <p>for all values of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> on inline elements <i1> and <i2>. 1.984 </div> 1.985 1.986 - <p>The Unicode standard (<a 1.987 - href="http://www.unicode.org/reports/tr9/">Unicode Standard Annex #9</a>) 1.988 - defines a complex algorithm for determining the proper ordering of 1.989 - bidirectional text. The algorithm consists of an implicit part based on 1.990 - character properties, as well as explicit controls for embeddings and 1.991 - overrides. CSS relies on this algorithm to achieve proper bidirectional 1.992 - rendering. 1.993 + <p class=note> 1.994 + Because the Unicode algorithm has a limit of 61 levels of embedding, 1.995 + care should be taken not to use <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> 1.996 + with a value other than <a class=css data-link-type=maybe href=#valuedef-normal>normal</a> unless appropriate. 1.997 + In particular, a value of <span class=css data-link-type=maybe>inherit</span> 1.998 + should be used with extreme caution. However, for elements that are, 1.999 + in general, intended to be displayed as blocks, a setting of 1.1000 + <span class=css data-link-type=maybe>unicode-bidi: isolate</span> is preferred to keep the element together 1.1001 + in case the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#display title=display>display</a> is changed to <span class=css data-link-type=maybe>inline</span> 1.1002 + (see example below).</p> 1.1003 1.1004 - <p>User agents that support bidirectional text must apply the Unicode 1.1005 - bidirectional algorithm to every sequence of inline-level boxes 1.1006 - uninterrupted by any block boundary or “<a 1.1007 - href="http://www.unicode.org/reports/tr9/#Bidirectional_Character_Types">bidi 1.1008 - type B</a>” <dfn id=forced-paragraph-break>forced paragraph break</dfn>. 1.1009 - This sequence forms the <dfn id=paragraph 1.1010 - title="bidi paragraph">paragraph</dfn> unit in the bidirectional 1.1011 - algorithm. Additionally, any such sequence forming part or all of the 1.1012 - contents of a <a href="#bidi-isolate"><i>bidi-isolated</i></a> inline 1.1013 - element also forms a <a href="#paragraph"><i>bidi paragraph</i></a>. 1.1014 +<h3 data-level=2.3 id=bidi-example><span class=secno>2.3 </span><span class=content> 1.1015 +Example of Bidirectional Text</span><a class=section-link href=#bidi-example>§</a></h3> 1.1016 1.1017 - <p>Two CSS properties, ‘<a href="#direction0"><code 1.1018 - class=property>direction</code></a>’ and ‘<a 1.1019 - href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’, 1.1020 - provide explicit embedding, isolation, and override controls in the CSS 1.1021 - layer. Because the base directionality of a text depends on the structure 1.1022 - and semantics of the document, the ‘<a href="#direction0"><code 1.1023 - class=property>direction</code></a>’ and ‘<a 1.1024 - href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ 1.1025 - properties should in most cases be used only to map bidi information in 1.1026 - the markup to its corresponding CSS styles. <strong>If a document language 1.1027 - provides markup features to control bidi, authors and users should use 1.1028 - those features instead</strong> and not specify CSS rules to override 1.1029 - them. 1.1030 - 1.1031 - <p>In general, the paragraph embedding level is set according to the ‘<a 1.1032 - href="#direction0"><code class=property>direction</code></a>’ property 1.1033 - of the paragraph's containing block rather than by the heuristic given in 1.1034 - steps P2 and P3 of the Unicode algorithm. <a href="#UAX9" 1.1035 - rel=biblioentry>[UAX9]<!--{{!UAX9}}--></a> When the computed ‘<a 1.1036 - href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ of 1.1037 - the paragraph's containing block is ‘<a href="#plaintext"><code 1.1038 - class=css>plaintext</code></a>’, however, the Unicode heuristics (rules 1.1039 - P2 and P3) are used instead. 1.1040 - 1.1041 - <p>The HTML specifications (<a href="#HTML401" 1.1042 - rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, section 8.2, and <a 1.1043 - href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>, section 10.3.5) 1.1044 - define bidirectionality behavior for HTML elements. 1.1045 - 1.1046 - <p class=note>Because HTML UAs can turn off CSS styling, we advise HTML 1.1047 - authors to use the HTML ‘<code class=property>dir</code>’ attribute 1.1048 - and <bdo> element to ensure correct bidirectional layout in the 1.1049 - absence of a style sheet. 1.1050 - 1.1051 - <h3 id=direction><span class=secno>2.1. </span> Specifying Directionality: 1.1052 - the ‘<a href="#direction0"><code class=property>direction</code></a>’ 1.1053 - property</h3> 1.1054 - 1.1055 - <table class=propdef> 1.1056 - <tbody> 1.1057 - <tr> 1.1058 - <th>Name: 1.1059 - 1.1060 - <td><dfn id=direction0>direction</dfn> 1.1061 - 1.1062 - <tr> 1.1063 - <th><a href="#values">Value</a>: 1.1064 - 1.1065 - <td>ltr | rtl 1.1066 - 1.1067 - <tr> 1.1068 - <th>Initial: 1.1069 - 1.1070 - <td>ltr 1.1071 - 1.1072 - <tr> 1.1073 - <th>Applies to: 1.1074 - 1.1075 - <td>all elements 1.1076 - 1.1077 - <tr> 1.1078 - <th>Inherited: 1.1079 - 1.1080 - <td>yes 1.1081 - 1.1082 - <tr> 1.1083 - <th>Percentages: 1.1084 - 1.1085 - <td>N/A 1.1086 - 1.1087 - <tr> 1.1088 - <th>Media: 1.1089 - 1.1090 - <td>visual 1.1091 - 1.1092 - <tr> 1.1093 - <th>Computed value: 1.1094 - 1.1095 - <td>specified value 1.1096 - </table> 1.1097 - 1.1098 - <p>This property specifies the inline base direction or directionality of 1.1099 - any bidi paragraph, embedding, isolate, or override established by the 1.1100 - element. (See ‘<a href="#unicode-bidi0"><code 1.1101 - class=property>unicode-bidi</code></a>’.) <!-- except plaintext --> In 1.1102 - addition, it informs the ordering of <a 1.1103 - href="http://www.w3.org/TR/CSS21/tables.html">table</a> column layout, the 1.1104 - direction of horizontal <a 1.1105 - href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>, and 1.1106 - the default alignment of text within a line, and other layout effects that 1.1107 - depend on the element's inline base direction. 1.1108 - 1.1109 - <p>Values for this property have the following meanings: 1.1110 - 1.1111 - <dl> 1.1112 - <dt><dfn id=ltr>ltr</dfn> 1.1113 - 1.1114 - <dd>Left-to-right directionality. 1.1115 - 1.1116 - <dt><dfn id=rtl>rtl</dfn> 1.1117 - 1.1118 - <dd>Right-to-left directionality. 1.1119 - </dl> 1.1120 - 1.1121 - <p class=note>The ‘<a href="#direction0"><code 1.1122 - class=property>direction</code></a>’ property has no effect on bidi 1.1123 - reordering when specified on inline elements whose ‘<a 1.1124 - href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ 1.1125 - property's value is ‘<a href="#normal"><code 1.1126 - class=css>normal</code></a>’, because the element does not open an 1.1127 - additional level of embedding with respect to the bidirectional algorithm. 1.1128 - 1.1129 - <p>The value of the ‘<a href="#direction0"><code 1.1130 - class=property>direction</code></a>’ property on the root element is 1.1131 - also propagated to the initial containing block and, together with the 1.1132 - ‘<a href="#writing-mode1"><code 1.1133 - class=property>writing-mode</code></a>’ property, determines the 1.1134 - document's principal writing mode. (See <a 1.1135 - href="#principal-writing-mode">below</a>.) 1.1136 - 1.1137 - <p class=note>Note that the ‘<a href="#direction0"><code 1.1138 - class=property>direction</code></a>’ property of the HTML BODY element 1.1139 - is <em>not</em> propagated to the viewport. That special behavior only 1.1140 - applies to the background and overflow properties. 1.1141 - 1.1142 - <p class=note>The ‘<a href="#direction0"><code 1.1143 - class=property>direction</code></a>’ property, when specified for table 1.1144 - column elements, is not inherited by cells in the column since columns are 1.1145 - not the ancestors of the cells in the document tree. Thus, CSS cannot 1.1146 - easily capture the "dir" attribute inheritance rules described in <a 1.1147 - href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, section 1.1148 - 11.3.2.1. 1.1149 - 1.1150 - <h3 id=unicode-bidi><span class=secno>2.2. </span> Embeddings and 1.1151 - Overrides: the ‘<a href="#unicode-bidi0"><code 1.1152 - class=property>unicode-bidi</code></a>’ property</h3> 1.1153 - 1.1154 - <table class=propdef> 1.1155 - <tbody> 1.1156 - <tr> 1.1157 - <th>Name: 1.1158 - 1.1159 - <td><dfn id=unicode-bidi0>unicode-bidi</dfn> 1.1160 - 1.1161 - <tr> 1.1162 - <th><a href="#values">Value</a>: 1.1163 - 1.1164 - <td>normal | embed | isolate | bidi-override | isolate-override | 1.1165 - plaintext 1.1166 - 1.1167 - <tr> 1.1168 - <th>Initial: 1.1169 - 1.1170 - <td>normal 1.1171 - 1.1172 - <tr> 1.1173 - <th>Applies to: 1.1174 - 1.1175 - <td>all elements, but see prose 1.1176 - 1.1177 - <tr> 1.1178 - <th>Inherited: 1.1179 - 1.1180 - <td>no 1.1181 - 1.1182 - <tr> 1.1183 - <th>Percentages: 1.1184 - 1.1185 - <td>N/A 1.1186 - 1.1187 - <tr> 1.1188 - <th>Media: 1.1189 - 1.1190 - <td>visual 1.1191 - 1.1192 - <tr> 1.1193 - <th>Computed value: 1.1194 - 1.1195 - <td>specified value 1.1196 - </table> 1.1197 - 1.1198 - <p>Normally (i.e. when ‘<a href="#unicode-bidi0"><code 1.1199 - class=property>unicode-bidi</code></a>’ is ‘<a href="#normal"><code 1.1200 - class=css>normal</code></a>’) an inline element is transparent to the 1.1201 - unicode bidi algorithm; content is ordered as if the element's boundaries 1.1202 - were not there. Other values of the ‘<a href="#unicode-bidi0"><code 1.1203 - class=property>unicode-bidi</code></a>’ property cause inline elements 1.1204 - to create scopes within the algorithm, and to override the intrinsic 1.1205 - directionality of text. 1.1206 - 1.1207 - <p>The following informative table summarizes the element-internal and 1.1208 - element-external effects of ‘<a href="#unicode-bidi0"><code 1.1209 - class=property>unicode-bidi</code></a>’: 1.1210 - 1.1211 - <table class=data> 1.1212 - <caption>Effect of non-‘<a href="#normal"><code 1.1213 - class=css>normal</code></a>’ values of ‘<a 1.1214 - href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ on 1.1215 - inline elements</caption> 1.1216 - 1.1217 - <colgroup span=2></colgroup> 1.1218 - 1.1219 - <colgroup span=3></colgroup> 1.1220 - 1.1221 - <thead> 1.1222 - <tr> 1.1223 - <th colspan=2 rowspan=2> 1.1224 - 1.1225 - <th colspan=3 scope=rowgroup><abbr 1.1226 - title="To surrounding contents, the element behaves as if its boundary were...">Outside</abbr> 1.1227 - 1.1228 - <tr> 1.1229 - <th><abbr 1.1230 - title="a strong character of the element's 'direction'.">strong</abbr> 1.1231 - 1.1232 - <th><abbr title="a neutral character.">neutral</abbr> 1.1233 - 1.1234 - <tbody> 1.1235 - <tr> 1.1236 - <th rowspan=3 scope=colgroup><abbr 1.1237 - title="Within the element, content is ordered as if...">Inside</abbr> 1.1238 - 1.1239 - <th><abbr 1.1240 - title="the element's boundaries were strong characters of the element's 'direction'.">scoped</abbr> 1.1241 - 1.1242 - <td>‘<a href="#embed"><code class=css>embed</code></a>’ 1.1243 - 1.1244 - <td>‘<a href="#isolate"><code class=css>isolate</code></a>’ 1.1245 - 1.1246 - <tr> 1.1247 - <th><abbr 1.1248 - title="all text consisted of strong characters of the element's 'direction'.">override</abbr> 1.1249 - 1.1250 - <td>‘<a href="#bidi-override"><code 1.1251 - class=css>bidi-override</code></a>’ 1.1252 - 1.1253 - <td>‘<a href="#isolate-override"><code 1.1254 - class=css>isolate-override</code></a>’ 1.1255 - 1.1256 - <tr> 1.1257 - <th><abbr 1.1258 - title="the element were a standalone paragraph ordered using UAX9 heuristics.">plaintext 1.1259 - </abbr> 1.1260 - 1.1261 - <td>— 1.1262 - 1.1263 - <td>‘<a href="#plaintext"><code class=css>plaintext</code></a>’ 1.1264 - </table> 1.1265 - 1.1266 - <p>Values for this property have the following (normative) meanings: 1.1267 - 1.1268 - <dl> 1.1269 - <dt><dfn id=normal>normal</dfn> 1.1270 - 1.1271 - <dd>The element does not open an additional level of embedding with 1.1272 - respect to the bidirectional algorithm. For inline elements, implicit 1.1273 - reordering works across element boundaries. 1.1274 - 1.1275 - <dt><dfn id=embed>embed</dfn> 1.1276 - 1.1277 - <dd>If the element is inline, this value creates a <dfn 1.1278 - id=directional-embedding>directional embedding</dfn> by opening an 1.1279 - additional level of embedding with respect to the bidirectional 1.1280 - algorithm. The direction of this embedding level is given by the ‘<a 1.1281 - href="#direction0"><code class=property>direction</code></a>’ property. 1.1282 - Inside the element, reordering is done implicitly. This corresponds to 1.1283 - adding a LRE (U+202A), for ‘<code class=css>direction: ltr</code>’, 1.1284 - or RLE (U+202B), for ‘<code class=css>direction: rtl</code>’, at the 1.1285 - start of the element and a PDF (U+202C) at the end of the element. <span 1.1286 - class=note>This value has no effect on elements that are not 1.1287 - inline.</span> 1.1288 - 1.1289 - <dt><dfn id=isolate>isolate</dfn> 1.1290 - 1.1291 - <dd>On an inline element, this <dfn id=bidi-isolate 1.1292 - title="bidi-isolate|bidi isolation|isolation">bidi-isolates</dfn> its 1.1293 - contents. This is similar to a directional embedding (and increases the 1.1294 - embedding level accordingly) except that each sequence of inline-level 1.1295 - boxes uninterrupted by any block boundary or <a 1.1296 - href="#forced-paragraph-break"><i>forced paragraph break</i></a> is 1.1297 - treated as an <dfn id=isolated-sequence->isolated sequence<dfn id=x>: 1.1298 - </dfn></dfn> 1.1299 - <ul> 1.1300 - <li>the content within the sequence is ordered as if inside an 1.1301 - independent paragraph with the base directionality specified by the 1.1302 - element's ‘<a href="#direction0"><code 1.1303 - class=property>direction</code></a>’ property. 1.1304 - 1.1305 - <li>for the purpose of bidi resolution in its containing bidi paragraph, 1.1306 - the sequence is treated as if it were a single Object Replacement 1.1307 - Character (U+FFFC). 1.1308 - </ul> 1.1309 - In effect, neither is the content inside the element bidi-affected by the 1.1310 - content surrounding the element, nor is the content surrounding the 1.1311 - element bidi-affected by the content or specified directionality of the 1.1312 - element. However, <a href="#forced-paragraph-break"><i>forced paragraph 1.1313 - breaks</i></a> within the element still create a corresponding break in 1.1314 - the containing paragraph. 1.1315 - <p class=note>In Unicode 6.3 and beyond, this will correspond to adding 1.1316 - an LRI (U+2066), for ‘<code class=css>direction: ltr</code>’, or RLI 1.1317 - (U+2067), for ‘<code class=css>direction: rtl</code>’, at the start 1.1318 - of the element, and a PDI (U+2069) at the end of the element. 1.1319 - 1.1320 - <p class=note>This value has no effect on elements that are not inline. 1.1321 - 1.1322 - <dt><dfn id=bidi-override>bidi-override</dfn> 1.1323 - 1.1324 - <dd>This value puts the element's immediate content in a <dfn 1.1325 - id=directional-override>directional override</dfn>. For an inline, this 1.1326 - means that the element acts like a <a 1.1327 - href="#directional-embedding"><i>directional embedding</i></a> in the 1.1328 - bidirectional algorithm, except that reordering within it is strictly in 1.1329 - sequence according to the ‘<a href="#direction0"><code 1.1330 - class=property>direction</code></a>’ property; the implicit part of the 1.1331 - bidirectional algorithm is ignored. This corresponds to adding a LRO 1.1332 - (U+202D), for ‘<code class=css>direction: ltr</code>’, or RLO 1.1333 - (U+202E), for ‘<code class=css>direction: rtl</code>’, at the start 1.1334 - of the element and a PDF (U+202C) at the end of the element. If the 1.1335 - element is a block container, the override is applied to an anonymous 1.1336 - inline element that surrounds all of its content. 1.1337 - 1.1338 - <dt><dfn id=isolate-override>isolate-override<dfn id=x0></dfn></dfn> 1.1339 - 1.1340 - <dd>This combines the <a href="#bidi-isolate"><i>isolation</i></a> 1.1341 - behavior of ‘<a href="#isolate"><code class=css>isolate</code></a>’ 1.1342 - with the <i>override</i> behavior of ‘<a href="#bidi-override"><code 1.1343 - class=css>bidi-override</code></a>’: to surrounding content, it is 1.1344 - equivalent to ‘<a href="#isolate"><code 1.1345 - class=css>isolate</code></a>’, but within the element content is 1.1346 - ordered as if ‘<a href="#bidi-override"><code 1.1347 - class=css>bidi-override</code></a>’ were specified. 1.1348 - 1.1349 - <dt><dfn id=plaintext>plaintext</dfn> 1.1350 - 1.1351 - <dd> 1.1352 - <p>This value behaves as ‘<a href="#isolate"><code 1.1353 - class=css>isolate</code></a>’ except that for the purposes of the 1.1354 - Unicode bidirectional algorithm, the base directionality of each of the 1.1355 - element's <a href="#paragraph"><i>bidi paragraphs</i></a> (if a block 1.1356 - container) or <a href="#isolated-sequence-"><i>isolated 1.1357 - sequences</i></a> (if an inline) is determined by following the 1.1358 - heuristic in rules P2 and P3 of the Unicode bidirectional algorithm 1.1359 - (rather than by using the ‘<a href="#direction0"><code 1.1360 - class=property>direction</code></a>’ property of the element). 1.1361 - 1.1362 - <p class=note>In Unicode 6.3 and beyond, for inline elements this will 1.1363 - correspond to adding an FSI (U+2068) at the start of the element, and a 1.1364 - PDI (U+2069) at the end of the element. 1.1365 - </dl> 1.1366 - 1.1367 - <p class=note>Because the ‘<a href="#unicode-bidi0"><code 1.1368 - class=property>unicode-bidi</code></a>’ property does not inherit, 1.1369 - setting ‘<a href="#bidi-override"><code 1.1370 - class=css>bidi-override</code></a>’ or ‘<a href="#plaintext"><code 1.1371 - class=css>plaintext</code></a>’ on a block element will not affect any 1.1372 - descendant blocks. Therefore these values are best used on blocks and 1.1373 - inlines that do not contain any block-level structures. 1.1374 - 1.1375 - <p class=note>Note that ‘<a href="#unicode-bidi0"><code 1.1376 - class=property>unicode-bidi</code></a>’ does not affect the ‘<a 1.1377 - href="#direction0"><code class=property>direction</code></a>’ property 1.1378 - even in the case of ‘<a href="#plaintext"><code 1.1379 - class=css>plaintext</code></a>’, and thus does not affect ‘<a 1.1380 - href="#direction0"><code class=property>direction</code></a>’-dependent 1.1381 - layout calculations. 1.1382 - 1.1383 - <p>The final order of characters within each <a href="#paragraph"><i>bidi 1.1384 - paragraph</i></a> is the same as if the bidi control codes had been added 1.1385 - as described above, markup had been stripped, and the resulting character 1.1386 - sequence had been passed to an implementation of the Unicode bidirectional 1.1387 - algorithm for plain text that produced the same line-breaks as the styled 1.1388 - text. 1.1389 - 1.1390 - <p>In this process, replaced elements with ‘<code class=css>display: 1.1391 - inline</code>’ are treated as neutral characters, unless their ‘<a 1.1392 - href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ 1.1393 - property is either ‘<a href="#embed"><code 1.1394 - class=property>embed</code></a>’ or ‘<a href="#bidi-override"><code 1.1395 - class=property>bidi-override</code></a>’, in which case they are treated 1.1396 - as strong characters in the ‘<a href="#direction0"><code 1.1397 - class=property>direction</code></a>’ specified for the element. All 1.1398 - other atomic inline-level boxes are treated as neutral characters always. 1.1399 - 1.1400 - <p>If an inline element is broken around a <a href="#paragraph"><i>bidi 1.1401 - paragraph</i></a> boundary (e.g. if split by a block or <a 1.1402 - href="#forced-paragraph-break"><i>forced paragraph break</i></a>), then 1.1403 - the bidi control codes assigned to the end of the element are added before 1.1404 - the interruption and the codes assigned to the start of the element are 1.1405 - added after it. (In other words, any embedding levels or overrides started 1.1406 - by the element are closed at the paragraph break and reopened on the other 1.1407 - side of it.) 1.1408 + <p>The following example shows an SGML document with bidirectional 1.1409 + text. It illustrates an important design principle: document language 1.1410 + designers should take bidi into account both in the language proper 1.1411 + (elements and attributes) and in any accompanying style sheets. The 1.1412 + style sheets should be designed so that bidi rules are separate from 1.1413 + other style rules, and such rules should not be overridden by other 1.1414 + style sheets so that the document language's bidi behavior is preserved.</p> 1.1415 1.1416 <div class=example> 1.1417 - <p>For example, where <BR/> is a <a 1.1418 - href="#forced-paragraph-break"><i>forced paragraph break</i></a> the bidi 1.1419 - ordering is identical between 1.1420 + <p>In this example, lowercase letters stand for inherently left-to-right 1.1421 + characters and uppercase letters represent inherently right-to-left 1.1422 + characters. The text stream is shown in logical backing store order.</p> 1.1423 1.1424 - <pre><para>...<i1><i2>...<BR/>...</i2><i1>...</para></pre> 1.1425 - 1.1426 - <p>and 1.1427 - 1.1428 - <pre><para>...<i1><i2>...</i2><i1><BR/><i1><i2>...</i2><i1>...</para></pre> 1.1429 - 1.1430 - <p>for all values of ‘<a href="#unicode-bidi0"><code 1.1431 - class=property>unicode-bidi</code></a>’ on inline elements <i1> 1.1432 - and <i2>. 1.1433 - </div> 1.1434 - 1.1435 - <p class=note> Because the Unicode algorithm has a limit of 61 levels of 1.1436 - embedding, care should be taken not to use ‘<a 1.1437 - href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ with 1.1438 - a value other than ‘<a href="#normal"><code 1.1439 - class=property>normal</code></a>’ unless appropriate. In particular, a 1.1440 - value of ‘<code class=css>inherit</code>’ should be used with extreme 1.1441 - caution. However, for elements that are, in general, intended to be 1.1442 - displayed as blocks, a setting of ‘<code class=css>unicode-bidi: 1.1443 - isolate</code>’ is preferred to keep the element together in case the 1.1444 - ‘<code class=property>display</code>’ is changed to ‘<code 1.1445 - class=css>inline</code>’ (see example below). 1.1446 - 1.1447 - <h3 id=bidi-example><span class=secno>2.3. </span> Example of Bidirectional 1.1448 - Text</h3> 1.1449 - 1.1450 - <p>The following example shows an SGML document with bidirectional text. It 1.1451 - illustrates an important design principle: document language designers 1.1452 - should take bidi into account both in the language proper (elements and 1.1453 - attributes) and in any accompanying style sheets. The style sheets should 1.1454 - be designed so that bidi rules are separate from other style rules, and 1.1455 - such rules should not be overridden by other style sheets so that the 1.1456 - document language's bidi behavior is preserved. 1.1457 - 1.1458 - <div class=example> 1.1459 - <p>In this example, lowercase letters stand for inherently left-to-right 1.1460 - characters and uppercase letters represent inherently right-to-left 1.1461 - characters. The text stream is shown in logical backing store order. 1.1462 - 1.1463 - <pre class=xml-example><code class=xml> 1.1464 + <pre class=xml-example><code class=xml> 1.1465 <section dir=rtl> 1.1466 <para>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</para> 1.1467 <para>HEBREW6 <emphasis>HEBREW7</emphasis> HEBREW8</para> 1.1468 @@ -998,13 +537,11 @@ 1.1469 <para>english14 english15 english16</para> 1.1470 <para>english17 <quote dir=rtl>HEBREW18 english19 HEBREW20</quote></para> 1.1471 </section> 1.1472 - </code></pre> 1.1473 +</code></pre> 1.1474 + <p>Since this is arbitrary SGML, the style sheet is responsible for 1.1475 + setting the writing direction. This is the style sheet:</p> 1.1476 1.1477 - <p>Since this is arbitrary SGML, the style sheet is responsible for 1.1478 - setting the writing direction. This is the style sheet: 1.1479 - 1.1480 - <pre> 1.1481 -/* Rules for bidi */ 1.1482 + <pre>/* Rules for bidi */ 1.1483 [dir=ltr] {direction: rtl;} 1.1484 [dir=rtl] {direction: ltr;} 1.1485 quote {unicode-bidi: isolate;} 1.1486 @@ -1012,51 +549,43 @@ 1.1487 /* Rules for presentation */ 1.1488 section, para {display: block;} 1.1489 emphasis {font-weight: bold;} 1.1490 - </pre> 1.1491 +</pre> 1.1492 + <p>The first <code><section></code> element is a block with a right-to-left base direction, 1.1493 + the second <code><section></code> element is a block with a left-to-right base direction. 1.1494 + The <code><para></code>s are blocks that inherit the base direction from their parents. 1.1495 + Thus, the first two <code><para></code>s are read starting at the top right, 1.1496 + the final three are read starting at the top left.</p> 1.1497 1.1498 - <p>The first <code><section></code> element is a block with a 1.1499 - right-to-left base direction, the second <code><section></code> 1.1500 - element is a block with a left-to-right base direction. The 1.1501 - <code><para></code>s are blocks that inherit the base direction from 1.1502 - their parents. Thus, the first two <code><para></code>s are read 1.1503 - starting at the top right, the final three are read starting at the top 1.1504 - left. 1.1505 + <p>The <code><emphasis></code> element is inline-level, 1.1506 + and since its value for <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> is <a class=css data-link-type=maybe href=#valuedef-normal>normal</a> (the initial value), 1.1507 + it has no effect on the ordering of the text. 1.1508 + The <code><quote></code> element, on the other hand, 1.1509 + creates an <a href=#isolated-sequence>isolated sequence</a> with the given internal directionality. 1.1510 1.1511 - <p>The <code><emphasis></code> element is inline-level, and since its 1.1512 - value for ‘<a href="#unicode-bidi0"><code 1.1513 - class=property>unicode-bidi</code></a>’ is ‘<a href="#normal"><code 1.1514 - class=css>normal</code></a>’ (the initial value), it has no effect on 1.1515 - the ordering of the text. The <code><quote></code> element, on the 1.1516 - other hand, creates an <a href="#isolated-sequence-"><i>isolated 1.1517 - sequence</i></a> with the given internal directionality. 1.1518 + <p>The formatting of this text might look like this if the line length 1.1519 + is long:</p> 1.1520 1.1521 - <p>The formatting of this text might look like this if the line length is 1.1522 - long: 1.1523 + <pre class=ascii-art> 5WERBEH 4WERBEH english3 2WERBEH 1WERBEH 1.1524 1.1525 - <pre class=ascii-art> 1.1526 - 5WERBEH 4WERBEH english3 2WERBEH 1WERBEH 1.1527 - 1.1528 - 8WERBEH <b>7WERBEH</b> 6WERBEH 1.1529 + 8WERBEH <b>7WERBEH</b> 6WERBEH 1.1530 1.1531 english9 english10 english11 13WERBEH 12WERBEH 1.1532 1.1533 english14 english15 english16 1.1534 1.1535 english17 20WERBEH english19 18WERBEH 1.1536 - </pre> 1.1537 +</pre> 1.1538 + <p>Note that the <code><quote></code> embedding causes 1.1539 + <samp>HEBREW18</samp> to be to the right of <samp>english19</samp>. 1.1540 1.1541 - <p>Note that the <code><quote></code> embedding causes 1.1542 - <samp>HEBREW18</samp> to be to the right of <samp>english19</samp>. 1.1543 + <p>If lines have to be broken, it might be more like this:</p> 1.1544 1.1545 - <p>If lines have to be broken, it might be more like this: 1.1546 - 1.1547 - <pre class=ascii-art> 1.1548 - 2WERBEH 1WERBEH 1.1549 + <pre class=ascii-art> 2WERBEH 1WERBEH 1.1550 -EH 4WERBEH english3 1.1551 - 5WERB 1.1552 + 5WERB 1.1553 1.1554 -EH <b>7WERBEH</b> 6WERBEH 1.1555 - 8WERB 1.1556 + 8WERB 1.1557 1.1558 english9 english10 en- 1.1559 glish11 12WERBEH 1.1560 @@ -1067,975 +596,710 @@ 1.1561 1.1562 english17 18WERBEH 1.1563 20WERBEH english19 1.1564 - </pre> 1.1565 +</pre> 1.1566 + <p>Because <samp>HEBREW18</samp> must be read before english19, 1.1567 + it is on the line above <samp>english19</samp>. 1.1568 + Just breaking the long line from the earlier formatting would not have worked. 1.1569 + Note also that the first syllable from <samp>english19</samp> 1.1570 + might have fit on the previous line, 1.1571 + but hyphenation of left-to-right words in a right-to-left context, and vice versa, 1.1572 + is usually suppressed to avoid having to display a hyphen in the middle of a line. 1.1573 1.1574 - <p>Because <samp>HEBREW18</samp> must be read before english19, it is on 1.1575 - the line above <samp>english19</samp>. Just breaking the long line from 1.1576 - the earlier formatting would not have worked. Note also that the first 1.1577 - syllable from <samp>english19</samp> might have fit on the previous line, 1.1578 - but hyphenation of left-to-right words in a right-to-left context, and 1.1579 - vice versa, is usually suppressed to avoid having to display a hyphen in 1.1580 - the middle of a line. 1.1581 - </div> 1.1582 - <!-- example --> 1.1583 + </div><!-- example --> 1.1584 1.1585 - <h3 id=bidi-box-model><span class=secno>2.4. </span> Box model for inline 1.1586 - elements in bidirectional context</h3> 1.1587 +<h3 data-level=2.4 id=bidi-box-model><span class=secno>2.4 </span><span class=content> 1.1588 +Box model for inline elements in bidirectional context</span><a class=section-link href=#bidi-box-model>§</a></h3> 1.1589 1.1590 - <p>Since bidi reordering can split apart and reorder text that is logically 1.1591 - contiguous, bidirectional text can cause an inline box to be split and 1.1592 - reordered within a line. 1.1593 + <p>Since bidi reordering can split apart and reorder text that is 1.1594 + logically contiguous, bidirectional text can cause an inline box 1.1595 + to be split and reordered within a line. 1.1596 1.1597 <p class=note>Note that in order to be able to flow inline boxes in a 1.1598 - uniform direction (either entirely left-to-right or entirely 1.1599 - right-to-left), anonymous inline boxes may have to be created.</p> 1.1600 - <!-- CSS2.1 8.6 --> 1.1601 + uniform direction (either entirely left-to-right or entirely 1.1602 + right-to-left), anonymous inline boxes may have to be created.</p> 1.1603 1.1604 +<!-- CSS2.1 8.6 --> 1.1605 <p>For each line box, UAs must take the inline boxes generated for each 1.1606 - element and render the margins, borders and padding in visual order (not 1.1607 - logical order). The <a href="#start"><i>start</i></a>-most box on the 1.1608 - first line box in which the element appears has the <a 1.1609 - href="#start"><i>start</i></a> edge's margin, border, and padding; and the 1.1610 - end-most box on the last line box in which the element appears has the <a 1.1611 - href="#end"><i>end</i></a> edge's margin, border, and padding. For 1.1612 - example, in the ‘<a href="#horizontal-tb"><code 1.1613 - class=css>horizontal-tb</code></a>’ writing mode: 1.1614 + element and render the margins, borders and padding in visual order 1.1615 + (not logical order). The <a href=#start>start</a>-most box on the first line box 1.1616 + in which the element appears has the <a href=#start>start</a> edge's margin, border, 1.1617 + and padding; and the end-most box on the last line box in which the 1.1618 + element appears has the <a href=#end>end</a> edge's margin, border, and padding. 1.1619 + For example, in the <a class=css data-link-type=maybe href=#valuedef-horizontal-tb>horizontal-tb</a> writing mode: 1.1620 + <ul> 1.1621 + <li>When the parent's <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property is <a class=css data-link-type=maybe href=#valuedef-ltr>ltr</a>, the left-most 1.1622 + generated box of the first line box in which the element appears 1.1623 + has the left margin, left border and left padding, and the right-most 1.1624 + generated box of the last line box in which the element appears has 1.1625 + the right padding, right border and right margin. 1.1626 + <li>When the parent's <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property is <a class=css data-link-type=maybe href=#valuedef-rtl>rtl</a>, the right-most 1.1627 + generated box of the first line box in which the element appears has 1.1628 + the right padding, right border and right margin, and the left-most 1.1629 + generated box of the last line box in which the element appears has 1.1630 + the left margin, left border and left padding. 1.1631 + </ul> 1.1632 + <p>Analogous rules hold for vertical writing modes.</p> 1.1633 1.1634 - <ul> 1.1635 - <li>When the parent's ‘<a href="#direction0"><code 1.1636 - class=property>direction</code></a>’ property is ‘<a 1.1637 - href="#ltr"><code class=css>ltr</code></a>’, the left-most generated 1.1638 - box of the first line box in which the element appears has the left 1.1639 - margin, left border and left padding, and the right-most generated box of 1.1640 - the last line box in which the element appears has the right padding, 1.1641 - right border and right margin. 1.1642 + <p class=note>The <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#box-decoration-break title=box-decoration-break>box-decoration-break</a> property can override this 1.1643 + behavior to draw box decorations on both sides of each box. <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=CSS3BG>[CSS3BG]</a> </p> 1.1644 1.1645 - <li>When the parent's ‘<a href="#direction0"><code 1.1646 - class=property>direction</code></a>’ property is ‘<a 1.1647 - href="#rtl"><code class=css>rtl</code></a>’, the right-most generated 1.1648 - box of the first line box in which the element appears has the right 1.1649 - padding, right border and right margin, and the left-most generated box 1.1650 - of the last line box in which the element appears has the left margin, 1.1651 - left border and left padding. 1.1652 - </ul> 1.1653 +<h2 data-level=3 id=vertical-intro><span class=secno>3 </span><span class=content> 1.1654 +Introduction to Vertical Text</span><a class=section-link href=#vertical-intro>§</a></h2> 1.1655 1.1656 - <p>Analogous rules hold for vertical writing modes. 1.1657 - 1.1658 - <p class=note>The ‘<code class=property>box-decoration-break</code>’ 1.1659 - property can override this behavior to draw box decorations on both sides 1.1660 - of each box. <a href="#CSS3BG" 1.1661 - rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> 1.1662 - 1.1663 - <h2 id=vertical-intro><span class=secno>3. </span> Introduction to Vertical 1.1664 - Text</h2> 1.1665 - 1.1666 - <p><em>This subsection is non-normative.</em> 1.1667 + <p><em>This subsection is non-normative.</em></p> 1.1668 1.1669 <p>In addition to extensions to CSS2.1’s support for bidirectional text, 1.1670 - this module introduces the rules and properties needed to support vertical 1.1671 - text layout in CSS. 1.1672 + this module introduces the rules and properties needed to support vertical 1.1673 + text layout in CSS. 1.1674 1.1675 <p>Unlike languages that use the Latin script which are primarily laid out 1.1676 - horizontally, Asian languages such as Chinese and Japanese can be laid out 1.1677 - vertically. The Japanese example below shows the same text laid out 1.1678 - horizontally and vertically. In the horizontal case, text is read from 1.1679 - left to right, top to bottom. For the vertical case, the text is read top 1.1680 - to bottom, right to left. Indentation from the left edge in the 1.1681 - left-to-right horizontal case translates to indentation from the top edge 1.1682 - in the top-to-bottom vertical case. 1.1683 + horizontally, Asian languages such as Chinese and Japanese can be laid out 1.1684 + vertically. The Japanese example below shows the same text laid out 1.1685 + horizontally and vertically. In the horizontal case, text is read 1.1686 + from left to right, top to bottom. For the vertical case, the text is 1.1687 + read top to bottom, right to left. 1.1688 + Indentation from the left edge in the left-to-right horizontal case 1.1689 + translates to indentation from the top edge in the top-to-bottom vertical 1.1690 + case. 1.1691 1.1692 <div class=figure> 1.1693 - <p><img 1.1694 - alt="A comparison of horizontal and vertical Japanese shows that although the lines rotate, the characters remain upright. Some glyphs, however change: a period mark shifts from the bottom left of its glyph box to the top right. Running headers, however, may remain laid out horizontally across the top of the page." 1.1695 - src=vert-horiz-comparison.png> 1.1696 - 1.1697 - <p class=caption>Comparison of vertical and horizontal Japanese: iBunko 1.1698 - application (iOS) 1.1699 + <p><img alt="A comparison of horizontal and vertical Japanese shows that 1.1700 + although the lines rotate, the characters remain upright. 1.1701 + Some glyphs, however change: a period mark shifts from the 1.1702 + bottom left of its glyph box to the top right. Running 1.1703 + headers, however, may remain 1.1704 + laid out horizontally across the top of the page." src=vert-horiz-comparison.png></p> 1.1705 + <p class=caption>Comparison of vertical and horizontal Japanese: iBunko application (iOS)</p> 1.1706 </div> 1.1707 1.1708 - <p class=note>For Chinese and Japanese lines are ordered either right to 1.1709 - left or top to bottom, while for Mongolian and Manchu lines are ordered 1.1710 - left to right. 1.1711 + <p class=note>For Chinese and Japanese lines are ordered either right 1.1712 + to left or top to bottom, while for Mongolian and Manchu lines are 1.1713 + ordered left to right.</p> 1.1714 1.1715 <p>The change from horizontal to vertical writing can affect not just the 1.1716 - layout, but also the typesetting. For example, the position of a 1.1717 - punctuation mark within its spacing box can change from the horizontal to 1.1718 - the vertical case, and in some cases alternate glyphs are used. 1.1719 + layout, but also the typesetting. For example, the position of a punctuation 1.1720 + mark within its spacing box can change from the horizontal to the 1.1721 + vertical case, and in some cases alternate glyphs are used. 1.1722 1.1723 <p>Vertical text that includes Latin script text or text from other scripts 1.1724 - normally displayed horizontally can display that text in a number of ways. 1.1725 - For example, Latin words can be rotated sideways, or each letter can be 1.1726 - oriented upright: 1.1727 + normally displayed horizontally can display that text in a number of 1.1728 + ways. For example, Latin words can be rotated sideways, or each letter 1.1729 + can be oriented upright: 1.1730 1.1731 <div class=figure> 1.1732 - <p><img 1.1733 - alt="A dictionary definition for ヴィルス might write the English word 'virus' rotated 90° clockwise, but stack the letters of the initialisms 'RNA' and 'DNA' upright." 1.1734 - src=vert-latin-layouts.png> 1.1735 - 1.1736 - <p class=caption>Examples of Latin in vertical Japanese: Daijirin Viewer 1.1737 - 1.4 (iOS) 1.1738 + <p><img alt="A dictionary definition for ヴィルス 1.1739 + might write the English word 'virus' rotated 90° clockwise, 1.1740 + but stack the letters of the initialisms 'RNA' and 'DNA' upright." src=vert-latin-layouts.png></p> 1.1741 + <p class=caption>Examples of Latin in vertical Japanese: Daijirin Viewer 1.4 (iOS)<!--</p--> 1.1742 </div> 1.1743 1.1744 <p>In some special cases such as two-digit numbers in dates, text is fit 1.1745 - compactly into a single vertical character box: 1.1746 + compactly into a single vertical character box: 1.1747 1.1748 <div class=figure id=fig-mac> 1.1749 - <p><img 1.1750 - alt="An excerpt from MacFan shows several possible vertical layouts for numbers: the two-digit month and day are written as horizontal-in-vertical blocks; the years are written with each character upright; except in the English phrase “for Mac 2011”, where the date is rotated to match the rotated Latin." 1.1751 - src=vert-number-layouts.png> 1.1752 - 1.1753 - <p class=caption>Mac Fan, December 2010, p.49 1.1754 + <p><img alt="An excerpt from MacFan shows several possible vertical layouts 1.1755 + for numbers: the two-digit month and day are written as 1.1756 + horizontal-in-vertical blocks; the years are written with 1.1757 + each character upright; except in the English phrase 1.1758 + “for Mac 2011”, where the date is rotated to 1.1759 + match the rotated Latin." src=vert-number-layouts.png></p> 1.1760 + <p class=caption>Mac Fan, December 2010, p.49</p> 1.1761 </div> 1.1762 1.1763 <p>Layouts often involve a mixture of vertical and horizontal elements: 1.1764 1.1765 <div class=figure> 1.1766 - <p><img 1.1767 - alt="Magazines often mix horizontal and vertical layout; for example, using one orientation for the main article text and a different one for sidebar or illustrative content." 1.1768 - src=vert-horiz-combination.png> 1.1769 - 1.1770 - <p class=caption>Mixture of vertical and horizontal elements 1.1771 + <p><img alt="Magazines often mix horizontal and vertical layout; for 1.1772 + example, using one orientation for the main article text 1.1773 + and a different one for sidebar or illustrative content." src=vert-horiz-combination.png></p> 1.1774 + <p class=caption>Mixture of vertical and horizontal elements</p> 1.1775 </div> 1.1776 1.1777 <p>Vertical text layouts also need to handle bidirectional text layout; 1.1778 - clockwise-rotated Arabic, for example, is laid out bottom-to-top. 1.1779 + clockwise-rotated Arabic, for example, is laid out bottom-to-top. 1.1780 1.1781 - <h3 id=writing-mode><span class=secno>3.1. </span> Block Flow Direction: 1.1782 - the ‘<a href="#writing-mode1"><code 1.1783 - class=property>writing-mode</code></a>’ property</h3> 1.1784 1.1785 - <table class=propdef> 1.1786 - <tbody> 1.1787 - <tr> 1.1788 - <th>Name: 1.1789 +<h3 data-level=3.1 id=writing-mode><span class=secno>3.1 </span><span class=content> 1.1790 +Block Flow Direction: the <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> property</span><a class=section-link href=#writing-mode>§</a></h3> 1.1791 1.1792 - <td><dfn id=writing-mode1>writing-mode</dfn> 1.1793 +<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-writing-mode>writing-mode</dfn><tr><th>Value:<td>horizontal-tb | vertical-rl | vertical-lr<tr><th>Initial:<td>horizontal-tb<tr><th>Applies to:<td>All elements except table row groups, table column groups, table rows, and table columns<tr><th>Inherited:<td>yes<tr><th>Percentages:<td>n/a<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value</table> 1.1794 + <p>This property specifies whether lines of text are laid out horizontally 1.1795 + or vertically and the direction in which blocks progress. Possible 1.1796 + values:</p> 1.1797 1.1798 - <tr> 1.1799 - <th><a href="#values">Value</a>: 1.1800 - 1.1801 - <td>horizontal-tb | vertical-rl | vertical-lr 1.1802 - 1.1803 - <tr> 1.1804 - <th>Initial: 1.1805 - 1.1806 - <td>horizontal-tb 1.1807 - 1.1808 - <tr> 1.1809 - <th>Applies to: 1.1810 - 1.1811 - <td>All elements except table row groups, table column groups, table 1.1812 - rows, and table columns 1.1813 - 1.1814 - <tr> 1.1815 - <th>Inherited: 1.1816 - 1.1817 - <td>yes 1.1818 - 1.1819 - <tr> 1.1820 - <th>Percentages: 1.1821 - 1.1822 - <td>N/A 1.1823 - 1.1824 - <tr> 1.1825 - <th>Media: 1.1826 - 1.1827 - <td>visual 1.1828 - 1.1829 - <tr> 1.1830 - <th>Computed value: 1.1831 - 1.1832 - <td>specified value 1.1833 - </table> 1.1834 - 1.1835 - <p>This property specifies whether lines of text are laid out horizontally 1.1836 - or vertically and the direction in which blocks progress. Possible values: 1.1837 - 1.1838 - <dl> 1.1839 - <dt><dfn id=horizontal-tb>horizontal-tb</dfn> 1.1840 - 1.1841 - <dd>Top-to-bottom <a href="#block-flow-direction"><i>block flow 1.1842 - direction</i></a>. The <a href="#writing-mode0"><i>writing mode</i></a> 1.1843 - is horizontal. 1.1844 - 1.1845 - <dt><dfn id=vertical-rl>vertical-rl</dfn> 1.1846 - 1.1847 - <dd>Right-to-left <a href="#block-flow-direction"><i>block flow 1.1848 - direction</i></a>. The <a href="#writing-mode0"><i>writing mode</i></a> 1.1849 - is vertical. 1.1850 - 1.1851 - <dt><dfn id=vertical-lr>vertical-lr</dfn> 1.1852 - 1.1853 - <dd>Left-to-right <a href="#block-flow-direction"><i>block flow 1.1854 - direction</i></a>. The <a href="#writing-mode0"><i>writing mode</i></a> 1.1855 - is vertical. 1.1856 + <dl data-dfn-for=writing-mode data-dfn-type=value> 1.1857 + <dt><dfn data-dfn-for=writing-mode data-dfn-type=value data-export="" id=valuedef-horizontal-tb>horizontal-tb</dfn></dt> 1.1858 + <dd>Top-to-bottom <a href=#block-flow-direction>block flow direction</a>. 1.1859 + The <a href=#writing-mode0>writing mode</a> is horizontal.</dd> 1.1860 + <dt><dfn data-dfn-for=writing-mode data-dfn-type=value data-export="" id=valuedef-vertical-rl>vertical-rl</dfn></dt> 1.1861 + <dd>Right-to-left <a href=#block-flow-direction>block flow direction</a>. 1.1862 + The <a href=#writing-mode0>writing mode</a> is vertical.</dd> 1.1863 + <dt><dfn data-dfn-for=writing-mode data-dfn-type=value data-export="" id=valuedef-vertical-lr>vertical-lr</dfn></dt> 1.1864 + <dd>Left-to-right <a href=#block-flow-direction>block flow direction</a>. 1.1865 + The <a href=#writing-mode0>writing mode</a> is vertical.</dd> 1.1866 </dl> 1.1867 1.1868 - <p>The ‘<a href="#writing-mode1"><code 1.1869 - class=property>writing-mode</code></a>’ property specifies the <a 1.1870 - href="#block-flow-direction"><i>block flow direction</i></a>, which 1.1871 - determines the progression of block-level boxes in a block formatting 1.1872 - context; the progression of line boxes in a block container that contains 1.1873 - inlines; the progression of rows in a table; etc. By virtue of determining 1.1874 - the stacking direction of line boxes, the ‘<a 1.1875 - href="#writing-mode1"><code class=property>writing-mode</code></a>’ 1.1876 - property also determines whether the line boxes' orientation (and thus the 1.1877 - <a href="#writing-mode0"><i>writing mode</i></a>) is horizontal or 1.1878 - vertical. The ‘<a href="#text-orientation0"><code 1.1879 - class=property>text-orientation</code></a>’ property then determines how 1.1880 - text is laid out within the line box. 1.1881 + <p>The <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> property specifies the <a href=#block-flow-direction>block flow direction</a>, 1.1882 + which determines the progression of block-level boxes in a block formatting 1.1883 + context; the progression of line boxes in a block container that contains 1.1884 + inlines; the progression of rows in a table; etc. By virtue of determining 1.1885 + the stacking direction of line boxes, the <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> property also 1.1886 + determines whether the line boxes' orientation (and thus the <a href=#writing-mode0>writing mode</a>) 1.1887 + is horizontal or vertical. The <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> property then determines 1.1888 + how text is laid out within the line box. 1.1889 1.1890 - <p>The <dfn id=principal-writing-mode>principal writing mode</dfn> of the 1.1891 - document is determined by the ‘<a href="#writing-mode1"><code 1.1892 - class=property>writing-mode</code></a>’ and ‘<a 1.1893 - href="#direction0"><code class=property>direction</code></a>’ values 1.1894 - specified on the root element. This writing mode is used, for example, to 1.1895 - determine the default page progression direction. (See <a href="#CSS3PAGE" 1.1896 - rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>.) Like ‘<a 1.1897 - href="#direction0"><code class=property>direction</code></a>’, the ‘<a 1.1898 - href="#writing-mode1"><code class=property>writing-mode</code></a>’ 1.1899 - value of the root element is also propagated to the initial containing 1.1900 - block and sets the block flow direction of the initial block formatting 1.1901 - context. 1.1902 + <p>The <dfn data-dfn-type=dfn data-noexport="" id=principal-writing-mode>principal writing mode</dfn> of the 1.1903 + document is determined by the <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> values 1.1904 + specified on the root element. This writing mode is used, for example, 1.1905 + to determine the default page progression direction. (See <a data-biblio-type=informative data-link-type=biblio href=#css3page title=CSS3PAGE>[CSS3PAGE]</a>.) 1.1906 + Like <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a>, the <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> value of the root element is also 1.1907 + propagated to the initial containing block and sets the block flow 1.1908 + direction of the initial block formatting context. 1.1909 1.1910 - <p class=note>Note that the ‘<a href="#writing-mode1"><code 1.1911 - class=property>writing-mode</code></a>’ property of the HTML BODY 1.1912 - element is <em>not</em> propagated to the viewport. That special behavior 1.1913 - only applies to the background and overflow properties. 1.1914 + <p class=note>Note that the <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> property of the HTML BODY 1.1915 + element is <em>not</em> propagated to the viewport. That special 1.1916 + behavior only applies to the background and overflow properties. 1.1917 1.1918 <p>If an element has a different block flow direction than its containing 1.1919 - block: 1.1920 - 1.1921 + block: 1.1922 <ul> 1.1923 - <li>If the element has a specified ‘<code 1.1924 - class=property>display</code>’ of ‘<code class=css>inline</code>’, 1.1925 - its ‘<code class=property>display</code>’ computes to ‘<code 1.1926 - class=property>inline-block</code>’. <a href="#CSS21" 1.1927 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.1928 - 1.1929 - <li>If the element has a specified ‘<code 1.1930 - class=property>display</code>’ of ‘<code class=css>run-in</code>’, 1.1931 - its ‘<code class=property>display</code>’ computes to ‘<code 1.1932 - class=property>block</code>’. <a href="#CSS21" 1.1933 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.1934 - 1.1935 + <li>If the element has a specified <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#display title=display>display</a> of <span class=css data-link-type=maybe>inline</span>, its <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#display title=display>display</a> 1.1936 + computes to <span class=css data-link-type=maybe>inline-block</span>. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.1937 + <li>If the element has a specified <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#display title=display>display</a> of <span class=css data-link-type=maybe>run-in</span>, its <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#display title=display>display</a> 1.1938 + computes to <span class=css data-link-type=maybe>block</span>. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.1939 <li>If the element is a block container, then it establishes a new block 1.1940 - formatting context. 1.1941 + formatting context. 1.1942 </ul> 1.1943 1.1944 <p>The content of replaced elements do not rotate due to the writing mode: 1.1945 - images, for example, remain upright. However replaced content involving 1.1946 - text (such as MathML content or form elements) should match the replaced 1.1947 - element's writing mode and line orientation if the UA supports such a 1.1948 - vertical writing mode for the replaced content. 1.1949 + images, for example, remain upright. However replaced content 1.1950 + involving text (such as MathML content or form elements) should match 1.1951 + the replaced element's writing mode and line orientation if the UA 1.1952 + supports such a vertical writing mode for the replaced content. 1.1953 1.1954 <div class=example> 1.1955 - <p>In the following example, two block elements (1 and 3) separated by an 1.1956 - image (2) are presented in various flow writing modes. 1.1957 + <p>In the following example, two block elements (1 and 3) separated 1.1958 + by an image (2) are presented in various flow writing modes.</p> 1.1959 1.1960 - <p>Here is a diagram of horizontal writing mode (<code>writing-mode: 1.1961 - horizontal-tb</code>): 1.1962 + <p>Here is a diagram of horizontal writing mode (<code>writing-mode: horizontal-tb</code>):</p> 1.1963 1.1964 - <p><img 1.1965 - alt="Diagram of horizontal layout: blocks 1, 2, and 3 are stacked top-to-bottom" 1.1966 - height=300 src=horizontal.png width=219> 1.1967 + <p><img alt="Diagram of horizontal layout: blocks 1, 2, and 3 are stacked top-to-bottom" height=300 src=horizontal.png width=219></p> 1.1968 1.1969 - <p>Here is a diagram for the right-to-left vertical writing mode commonly 1.1970 - used in East Asia (<code>writing-mode: vertical-rl</code>): 1.1971 + <p>Here is a diagram for the right-to-left vertical writing mode commonly 1.1972 + used in East Asia (<code>writing-mode: vertical-rl</code>):</p> 1.1973 1.1974 - <p><img 1.1975 - alt="Diagram of a right-to-left vertical layout: blocks 1, 2, and 3 are arranged side by side from right to left" 1.1976 - height=191 src=vertical-rl.png width=297> 1.1977 + <p><img alt="Diagram of a right-to-left vertical layout: blocks 1, 2, 1.1978 + and 3 are arranged side by side from right to left" height=191 src=vertical-rl.png width=297></p> 1.1979 1.1980 - <p>And finally, here is a diagram for the left-to-right vertical writing 1.1981 - mode used for Manchu and Mongolian (<code>writing-mode: 1.1982 - vertical-lr</code>): 1.1983 + <p>And finally, here is a diagram for the left-to-right vertical 1.1984 + writing mode used for Manchu and Mongolian (<code>writing-mode: vertical-lr</code>):</p> 1.1985 1.1986 - <p><img 1.1987 - alt="Diagram of left-to-right vertical layout: blocks 1, 2, and 3 are arranged side by side from left to right" 1.1988 - height=191 src=vertical-lr.png width=300> 1.1989 + <p><img alt="Diagram of left-to-right vertical layout: blocks 1, 2, 1.1990 + and 3 are arranged side by side from left to right" height=191 src=vertical-lr.png width=300></p> 1.1991 + </div> 1.1992 + 1.1993 + <div class=example> 1.1994 + <p>In the following example, some form controls are rendered inside 1.1995 + a block with <a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a> writing mode. The form controls are 1.1996 + rendered to match the writing mode. 1.1997 + <pre><!-- --><style> 1.1998 +<!-- --> form { writing-mode: vertical-rl; } 1.1999 +<!-- --></style> 1.2000 +<!-- -->... 1.2001 +<!-- --><form> 1.2002 +<!-- --><p><label>姓名 <input value="艾俐俐"></label> 1.2003 +<!-- --><p><label>语文 <select><option>English 1.2004 +<!-- --> <option>français 1.2005 +<!-- --> <option>فارسی 1.2006 +<!-- --> <option>中文 1.2007 +<!-- --> <option>日本語</select></label> 1.2008 +<!-- --></form></pre> 1.2009 + <p><img alt="Screenshot of vertical layout: the input element is 1.2010 + laid lengthwise from top to bottom and its contents 1.2011 + rendered in a vertical writing mode, matching the 1.2012 + labels outside it. The drop-down selection control 1.2013 + after it slides out to the side (towards the after 1.2014 + edge of the block) rather than downward as it would 1.2015 + in horizontal writing modes." src=vertical-form.png></p> 1.2016 </div> 1.2017 1.2018 <div class=example> 1.2019 - <p>In the following example, some form controls are rendered inside a 1.2020 - block with ‘<a href="#vertical-rl"><code 1.2021 - class=css>vertical-rl</code></a>’ writing mode. The form controls are 1.2022 - rendered to match the writing mode. 1.2023 + <p>In this example, <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> sets the list markers upright 1.2024 + using the <span class=css data-link-type=maybe>::marker</span> pseudo-element. Vertical alignment ensures 1.2025 + that longer numbers will still align with the right of the first 1.2026 + line of text. <a data-biblio-type=informative data-link-type=biblio href=#css3list title=CSS3LIST>[CSS3LIST]</a> 1.2027 + <pre>::marker { writing-mode: horizontal-tb; 1.2028 +<!-- --> vertical-align: text-top; 1.2029 +<!-- --> color: blue; }</pre> <div class=figure> 1.2030 + <p><img alt="Diagram showing list markers of '1.', '2.', '3.' sitting 1.2031 + upright atop sideways vertical Latin list item text." class=example src=vertical-horizontal-list-markers.png> 1.2032 + <p class=caption>Example of horizontal list markers in a vertical list</p> 1.2033 + </div> 1.2034 + </div> 1.2035 1.2036 - <pre> 1.2037 -<!-- --><style> 1.2038 -<!-- --> form { writing-mode: vertical-rl; } 1.2039 -<!-- --></style> 1.2040 -<!-- -->... 1.2041 -<!-- --><form> 1.2042 -<!-- --><p><label>姓名 <input value="艾俐俐"></label> 1.2043 -<!-- --><p><label>语文 <select><option>English 1.2044 -<!-- --> <option>français 1.2045 -<!-- --> <option>فارسی 1.2046 -<!-- --> <option>中文 1.2047 -<!-- --> <option>日本語</select></label> 1.2048 -<!-- --></form></pre> 1.2049 +<h4 data-level=3.1.1 id=svg-writing-mode><span class=secno>3.1.1 </span><span class=content> 1.2050 +SVG1.1 <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> Values</span><a class=section-link href=#svg-writing-mode>§</a></h4> 1.2051 1.2052 - <p><img 1.2053 - alt="Screenshot of vertical layout: the input element is laid lengthwise from top to bottom and its contents rendered in a vertical writing mode, matching the labels outside it. The drop-down selection control after it slides out to the side (towards the after edge of the block) rather than downward as it would in horizontal writing modes." 1.2054 - src=vertical-form.png> 1.2055 + <p>SVG1.1 <a data-biblio-type=normative data-link-type=biblio href=#svg11 title=SVG11>[SVG11]</a> defines some additional values: <span class=css data-link-type=maybe>lr</span>, 1.2056 + <span class=css data-link-type=maybe>lr-tb</span>, <span class=css data-link-type=maybe>rl</span>, <span class=css data-link-type=maybe>rl-tb</span>, <span class=css data-link-type=maybe>tb</span>, and <span class=css data-link-type=maybe>tb-rl</span>. 1.2057 + 1.2058 + <p>These values are <em>deprecated</em> in any context except SVG1 documents. 1.2059 + Implementations that wish to support these values in the context of CSS 1.2060 + must treat them as follows: 1.2061 + 1.2062 + <table class=data> 1.2063 + <thead> 1.2064 + <tr><th>SVG1/Obsolete</th> <th>CSS</tr> 1.2065 + </thead> 1.2066 + <tbody> 1.2067 + <tr><td><span class=css data-link-type=maybe>lr</span></td> <td rowspan=3><a class=css data-link-type=maybe href=#valuedef-horizontal-tb>horizontal-tb</a></tr> 1.2068 + <tr><td><span class=css data-link-type=maybe>lr-tb</span></tr> 1.2069 + <tr><td><span class=css data-link-type=maybe>rl</span></tr> 1.2070 + <tr><td><span class=css data-link-type=maybe>tb</span></td> <td rowspan=2><a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a></tr> 1.2071 + <tr><td><span class=css data-link-type=maybe>tb-rl</span></tr> 1.2072 + </tbody> 1.2073 + </table> 1.2074 + 1.2075 + <p class=note>The SVG1.1 values were also present in an older revision 1.2076 + of the CSS <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> specification, which is obsoleted by this 1.2077 + specification. The additional <span class=css data-link-type=maybe>tb-lr</span> value of that revision is 1.2078 + replaced by <a class=css data-link-type=maybe href=#valuedef-vertical-lr>vertical-lr</a>. 1.2079 + 1.2080 + <p>In SVG1.1, these values set the <dfn data-dfn-type=dfn data-noexport="" id=inline-progression----direction>inline progression 1.2081 + direction</dfn>, in other words, the direction the current text position 1.2082 + advances each time a glyph is added. This is a geometric process that 1.2083 + happens <em>after</em> bidi reordering, and thus has no effect on the 1.2084 + interpretation of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property (which is independent of 1.2085 + <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a>). (See <a href=http://www.w3.org/TR/SVG/text.html#RelationshipWithBiDirectionality>Relationship 1.2086 + with bidirectionality</a>. <a data-biblio-type=normative data-link-type=biblio href=#svg11 title=SVG11>[SVG11]</a>) 1.2087 + <p class=note>There are varying interpretations 1.2088 + on whether this process causes "writing-mode: rl" to merely shift the 1.2089 + text string or reverse the order of all glyphs in the text.</p> 1.2090 + 1.2091 +<h2 data-level=4 id=inline-alignment><span class=secno>4 </span><span class=content> 1.2092 +Inline-level Alignment</span><a class=section-link href=#inline-alignment>§</a></h2> 1.2093 + 1.2094 + <p>When different kinds of inline-level content are placed together on a 1.2095 + line, the baselines of the content and the settings of the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align title=vertical-align>vertical-align</a> 1.2096 + property control how they are aligned in the transverse direction of the 1.2097 + line box. This section discusses what baselines are, how to find them, 1.2098 + and how they are used together with the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align title=vertical-align>vertical-align</a> property to 1.2099 + determine the alignment of inline-level content. 1.2100 + 1.2101 +<h3 data-level=4.1 id=intro-baselines><span class=secno>4.1 </span><span class=content> 1.2102 +Introduction to Baselines</span><a class=section-link href=#intro-baselines>§</a></h3> 1.2103 + 1.2104 + <p><em>This section is non-normative.</em></p> 1.2105 + 1.2106 + <p>A <dfn data-dfn-type=dfn data-noexport="" id=baseline>baseline</dfn> is a line along the <i>inline axis</i> of a line box 1.2107 + along which individual glyphs of text are aligned. Baselines guide the 1.2108 + design of glyphs in a font (for example, the bottom of most alphabetic 1.2109 + glyphs typically align with the alphabetic baseline), and they guide 1.2110 + the alignment of glyphs from different fonts or font sizes when typesetting. 1.2111 + 1.2112 + <div class=figure> 1.2113 + [Picture of alphabetic text in two font sizes with the baseline and 1.2114 + emboxes indicated.] 1.2115 + </div> 1.2116 + 1.2117 + <p>Different writing systems prefer different baseline tables.</p> 1.2118 + 1.2119 + <div class=figure> 1.2120 + <p><img alt="Latin prefers the alphabetic baseline, on top of which most 1.2121 + letters rest, though some have descenders that dangle below it. 1.2122 + Indic scripts are sometimes typeset with a hanging baseline, 1.2123 + since their glyph shapes appear to be hanging from a 1.2124 + horizontal line. 1.2125 + Han-based systems, whose glyphs are designed to fill a square, 1.2126 + tend to align on their bottoms." src=script-preferred-baselines.gif></p> 1.2127 + <p class=caption>Preferred baselines in various writing systems</p> 1.2128 + </div> 1.2129 + 1.2130 + <p>A well-constructed font contains a <dfn data-dfn-type=dfn data-noexport="" id=baseline-table>baseline table</dfn>, which 1.2131 + indicates the position of one or more baselines within the font's 1.2132 + design coordinate space. (The design coordinate space is scaled with 1.2133 + the font size.) 1.2134 + 1.2135 + <div class=figure> 1.2136 + <p><img alt="" src=baselines.gif></p> 1.2137 + <p class=caption>In a well-designed mixed-script font, the glyphs are 1.2138 + positioned in the coordinate space to harmonize with one another 1.2139 + when typeset together. The baseline table is then constructed to 1.2140 + match the shape of the glyphs, each baseline positioned to match 1.2141 + the glyphs from its preferred scripts.</p> 1.2142 + </div> 1.2143 + 1.2144 + <p>The baseline table is a property of the font, and the positions 1.2145 + of the various baselines apply to all glyphs in the font. 1.2146 + 1.2147 + <p>Different baseline tables can be provided for alignment in 1.2148 + horizontal and vertical text. UAs should use the vertical 1.2149 + tables in vertical writing modes and the horizontal tables 1.2150 + otherwise. 1.2151 + 1.2152 +<h3 data-level=4.2 id=text-baselines><span class=secno>4.2 </span><span class=content> 1.2153 +Text Baselines</span><a class=section-link href=#text-baselines>§</a></h3> 1.2154 + 1.2155 + <p>In this specification, only the following baselines are considered: 1.2156 + 1.2157 + <dl> 1.2158 + <dt>alphabetic</dt> 1.2159 + <dd>The <dfn data-dfn-type=dfn data-noexport="" id=alphabetic-baseline>alphabetic baseline</dfn>, which typically aligns with the 1.2160 + bottom of uppercase Latin glyphs. 1.2161 + 1.2162 + </dd> 1.2163 + <dt>central</dt> 1.2164 + <dd>The <dfn data-dfn-type=dfn data-noexport="" id=central-baseline>central baseline</dfn>, which typically crosses the center 1.2165 + of the em box. If the font is missing this baseline, 1.2166 + it is assumed to be halfway between the ascender (<a href=#over>over</a>) 1.2167 + and descender (<a href=#under>under</a>) edges of the em box. 1.2168 + </dd> 1.2169 + </dl> 1.2170 + 1.2171 + <p>In vertical writing mode, the <a href=#central-baseline>central baseline</a> is used as the 1.2172 + dominant baseline when <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> is <a class=css data-link-type=maybe href=#valuedef-mixed>mixed</a> or <a class=css data-link-type=maybe href=#valuedef-upright>upright</a>. 1.2173 + Otherwise the <a href=#alphabetic-baseline>alphabetic baseline</a> is used. 1.2174 + 1.2175 + <p class=note>A future CSS module will deal with baselines in more 1.2176 + detail and allow the choice of other dominant baselines and alignment 1.2177 + options.</p> 1.2178 + 1.2179 +<h3 data-level=4.3 id=replaced-baselines><span class=secno>4.3 </span><span class=content> 1.2180 +Atomic Inline Baselines</span><a class=section-link href=#replaced-baselines>§</a></h3> 1.2181 + 1.2182 + <p>If an <a href=http://www.w3.org/TR/CSS21/visuren.html#inline-boxes>atomic 1.2183 + inline</a> (such as an inline-block, inline-table, or replaced inline element) 1.2184 + is not capable of providing its own baseline information, then the 1.2185 + UA synthesizes a baseline table thus: 1.2186 + 1.2187 + <dl> 1.2188 + <dt>alphabetic</dt> 1.2189 + <dd>The alphabetic baseline is assumed to be at the <a href=#under>under</a> 1.2190 + margin edge.</dd> 1.2191 + <dt>central</dt> 1.2192 + <dd>The central baseline is assumed to be halfway between the 1.2193 + <a href=#under>under</a> and <a href=#over>over</a> margin edges of the box. 1.2194 + </dl> 1.2195 + 1.2196 +<h3 data-level=4.4 id=baseline-alignment><span class=secno>4.4 </span><span class=content> 1.2197 +Baseline Alignment</span><a class=section-link href=#baseline-alignment>§</a></h3> 1.2198 + 1.2199 + <p>The <dfn data-dfn-type=dfn data-noexport="" id=dominant-baseline>dominant baseline</dfn> 1.2200 + (which <a href=#text-baselines>can change</a> based on the writing mode) 1.2201 + is used in CSS for alignment in two cases: 1.2202 + <ul> 1.2203 + <li><strong>Aligning glyphs from different fonts within the same inline box.</strong> 1.2204 + The glyphs are aligned by matching up the positions of the dominant 1.2205 + baseline in their corresponding fonts. 1.2206 + <li><strong>Aligning a child inline-level box within its parent.</strong> 1.2207 + For the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align title=vertical-align>vertical-align</a> value of <a class=css data-link-type=maybe href=#baseline>baseline</a>, child is aligned to 1.2208 + the parent by matching the parent's dominant baseline to the same 1.2209 + baseline in the child. (E.g. if the parent's dominant baseline is 1.2210 + alphabetic, then the child's alphabetic baseline is matched to the 1.2211 + parent's alphabetic baseline, even if the child's dominant baseline 1.2212 + is something else.) 1.2213 + For values of <span class=css data-link-type=maybe>sub</span>, <span class=css data-link-type=maybe>super</span>, <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-values-3/#length-value><length></a>, and 1.2214 + <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-values-3/#percentage-value><percentage></a>, the baselines are aligned as for <a class=css data-link-type=maybe href=#baseline>baseline</a>, 1.2215 + but the child is shifted according to the offset given by its 1.2216 + <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align title=vertical-align>vertical-align</a> value. 1.2217 + <div class=example> 1.2218 + <p>Given following sample markup: 1.2219 +<pre><p><span class="outer">Ap <span class="inner"><i title="">ji</i></span></span></p></pre> <p>And the following style rule: 1.2220 +<pre>span.inner { font-size: .75em; }</pre> <p>The baseline tables of the parent (<code>.outer</code>) and the child 1.2221 + (<code>.inner</code>) will not match up due to the font size difference. 1.2222 + Since the dominant baseline is the alphabetic baseline, the child box 1.2223 + is aligned to its parent by matching up their alphabetic baselines. 1.2224 + <div class=figure> 1.2225 + <p><img alt="" src=baseline-align-sizes.gif> 1.2226 + </div> 1.2227 + </div> 1.2228 + 1.2229 + <div class=example> 1.2230 + <p>If we assign <span class=css data-link-type=maybe>vertical-align: super</span> to the <code>.inner</code> 1.2231 + element from the example above, the same rules are used to align 1.2232 + the <code>.inner</code> child to its parent; the only difference 1.2233 + is in addition to the baseline alignment, the child is shifted to 1.2234 + the superscript position. 1.2235 +<pre>span.inner { vertical-align: super; font-size: .75em; }</pre> <div class=figure> 1.2236 + <p><img alt="In this example, the resulting alignment is equivalent 1.2237 + to shifting the parent baseline table upwards by the 1.2238 + superscript offset, and then aligning the child's 1.2239 + alphabetic baseline to the shifted position of the 1.2240 + parent's alphabetic baseline." src=baseline-align-super.gif> 1.2241 + </div> 1.2242 + </div> 1.2243 + </ul> 1.2244 + 1.2245 +<h2 data-level=5 id=intro-text-layout><span class=secno>5 </span><span class=content> 1.2246 +Introduction to Vertical Text Layout</span><a class=section-link href=#intro-text-layout>§</a></h2> 1.2247 + 1.2248 + <p>Each writing system has one or more native orientations. Modern scripts 1.2249 + can therefore be classified into three orientational categories:</p> 1.2250 + 1.2251 + <dl> 1.2252 + <dt>horizontal-only</dt> 1.2253 + <dd>Scripts that have horizontal, but not vertical, native orientation. 1.2254 + Includes: Latin, Arabic, Hebrew, Devanagari 1.2255 + <dt>vertical-only</dt> 1.2256 + <dd>Scripts that have vertical, but not horizontal, native orientation. 1.2257 + Includes: Mongolian, Phags Pa 1.2258 + <dt>bi-orientational</dt> 1.2259 + <dd>Scripts that have both vertical and horizontal native orientation. 1.2260 + Includes: Han, Hangul, Japanese Kana 1.2261 + </dl> 1.2262 + 1.2263 + <p>A <dfn data-dfn-type=dfn data-noexport="" id=vertical-script>vertical script</dfn> is one that has a native vertical orientation: 1.2264 + i.e. one that is either vertical-only or that is bi-orientational. 1.2265 + A <dfn data-dfn-type=dfn data-noexport="" id=horizontal-script>horizontal script</dfn> is one that has a native horizontal orientation: 1.2266 + i.e. one that is either horizontal-only or that is bi-orientational. 1.2267 + (See <a href=#script-orientations>Appendix B</a> for a categorization of 1.2268 + scripts by native orientation.) 1.2269 + 1.2270 + <div class=figure> 1.2271 + <p><img alt="A Venn diagram of these distinctions would show two circles: 1.2272 + one labelled 'vertical', the other 'horizontal'. The overlapped 1.2273 + region would represent the bi-orientational scripts, while 1.2274 + horizontal-only and vertical-only scripts would occupy their 1.2275 + respective circles' exclusive regions." src=baseline-align-super.gif> 1.2276 + </div> 1.2277 + 1.2278 + <p>In modern typographic systems, all glyphs are assigned a horizontal 1.2279 + orientation, which is used when laying out text horizontally. 1.2280 + To lay out vertical text, the UA needs to transform the text from its 1.2281 + horizontal orientation. This transformation is the <dfn data-dfn-type=dfn data-noexport="" id=bi-orientational----transform>bi-orientational 1.2282 + transform</dfn>, and there are two types: 1.2283 + 1.2284 + <dl> 1.2285 + <dt>rotate</dt> 1.2286 + <dd>Rotate the glyph from horizontal to vertical 1.2287 + <a href=diagrams/glyph-right.svg> 1.2288 + <img alt="Rotate the glyph from horizontal to vertical" class=figure src=diagrams/glyph-right.png></a> 1.2289 + 1.2290 + <dt>translate</dt> 1.2291 + <dd>Translate the glyph from horizontal to vertical 1.2292 + <a href=diagrams/glyph-upright.svg> 1.2293 + <img alt="Translate the glyph from horizontal to vertical" class=figure src=diagrams/glyph-upright.png></a> 1.2294 + </dl> 1.2295 + 1.2296 + <p>Scripts with a native vertical orientation have an 1.2297 + intrinsic bi-orientational transform, which orients them correctly in 1.2298 + vertical text: most CJK (Chinese/Japanese/Korean) characters translate, 1.2299 + that is, they are always upright. Characters from other scripts, 1.2300 + such as Mongolian, rotate. 1.2301 + 1.2302 + <p>Scripts without a native vertical orientation can be either rotated 1.2303 + (set sideways) or translated (set upright): the transform used is a 1.2304 + stylistic preference depending on the text's usage, rather than a 1.2305 + matter of correctness. 1.2306 + The <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> property's <a class=css data-link-type=maybe href=#valuedef-mixed>mixed</a> and <a class=css data-link-type=maybe href=#valuedef-upright>upright</a> values 1.2307 + are provided to specify rotation vs. translation of horizontal-only text. 1.2308 + 1.2309 + <p class=note>The <a class=css data-link-type=maybe href=#valuedef-sideways-left>sideways-left</a>, <a class=css data-link-type=maybe href=#valuedef-sideways-right>sideways-right</a>, and <a class=css data-link-type=maybe href=#valuedef-sideways>sideways</a> 1.2310 + values of <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> are provided for decorative layout effects 1.2311 + and to work around limitations in CSS support for bottom-to-top scripts. 1.2312 + 1.2313 +<h3 data-level=5.1 id=text-orientation><span class=secno>5.1 </span><span class=content> 1.2314 +Orienting Text: the <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> property</span><a class=section-link href=#text-orientation>§</a></h3> 1.2315 + 1.2316 +<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-text-orientation>text-orientation</dfn><tr><th>Value:<td>mixed | upright | sideways-right | sideways-left | sideways | use-glyph-orientation<tr><th>Initial:<td>mixed<tr><th>Applies to:<td>all elements except table row groups, rows, column groups, and columns<tr><th>Inherited:<td>yes<tr><th>Percentages:<td>n/a<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value</table> 1.2317 + <p>This property specifies the orientation of text 1.2318 + within a line. Current values only have an effect in vertical writing 1.2319 + modes; the property has no effect on elements in horizontal writing modes. 1.2320 + 1.2321 + <p>For readability, the term <a href=#character>character</a> is used in place of 1.2322 + <em>extended grapheme cluster</em> in this section. 1.2323 + See <a href=#character-properties>Characters and Properties</a> 1.2324 + for further details. 1.2325 + 1.2326 + <p>Values have the following meanings:</p> 1.2327 + 1.2328 + <dl data-dfn-for=text-orientation data-dfn-type=value> 1.2329 + <dt><dfn data-dfn-for=text-orientation data-dfn-type=value data-export="" id=valuedef-mixed>mixed</dfn></dt> 1.2330 + <dd><p>In vertical writing modes, characters from horizontal-only 1.2331 + scripts are set sideways, i.e. 90° clockwise from their standard 1.2332 + orientation in horizontal text. 1.2333 + Characters from vertical scripts are set with their intrinsic orientation. 1.2334 + See <a href=#vertical-orientations>Vertical Orientations</a> for further details. 1.2335 + <p>This value is typical for layout of primarily vertical-script text. 1.2336 + <dt><dfn data-dfn-for=text-orientation data-dfn-type=value data-export="" id=valuedef-upright>upright</dfn></dt> 1.2337 + <dd><p>In vertical writing modes, characters from horizontal-only 1.2338 + scripts are rendered upright, i.e. in their standard horizontal 1.2339 + orientation. 1.2340 + Characters from vertical scripts are set with their intrinsic orientation 1.2341 + and shaped normally. 1.2342 + See <a href=#vertical-orientations>Vertical Orientations</a> for further details. 1.2343 + <p>For the purposes of bidi reordering, this value causes all 1.2344 + characters to be treated as strong LTR. 1.2345 + This value causes the used value of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> to be <a class=css data-link-type=maybe href=#valuedef-ltr>ltr</a>. 1.2346 + <dt><dfn data-dfn-for=text-orientation data-dfn-type=value data-export="" id=valuedef-sideways-right>sideways-right</dfn></dt> 1.2347 + <dd><p>In vertical writing modes, this causes text to be set as if 1.2348 + in a horizontal layout, but rotated 90° clockwise. 1.2349 + <dt><dfn data-dfn-for=text-orientation data-dfn-type=value data-export="" id=valuedef-sideways-left>sideways-left</dfn></dt> 1.2350 + <dd><p>In vertical writing modes, this causes text to be set as if 1.2351 + in a horizontal layout, but rotated 90° counter-clockwise. 1.2352 + <p>If set on a non-replaced inline whose parent is not <a class=css data-link-type=maybe href=#valuedef-sideways-left>sideways-left</a>, 1.2353 + this forces bidi isolation: the <a class=css data-link-type=maybe href=#valuedef-normal>normal</a> and <a class=css data-link-type=maybe href=#valuedef-embed>embed</a> values of 1.2354 + <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> compute to <a class=css data-link-type=maybe href=#valuedef-isolate>isolate</a>, and <a class=css data-link-type=maybe href=#valuedef-bidi-override>bidi-override</a> computes 1.2355 + to <a class=css data-link-type=maybe href=#valuedef-isolate-override>isolate-override</a>. 1.2356 + Layout of text is exactly as for <a class=css data-link-type=maybe href=#valuedef-sideways-right>sideways-right</a> except that the 1.2357 + baseline table of each of the element's inline boxes 1.2358 + is mirrored around a vertical axis along the center of its content box 1.2359 + and text layout is rotated 180° to match. 1.2360 + The positions of text decorations propagated from an ancestor inline 1.2361 + (including the block container's root inline) are not mirrored, but any 1.2362 + text decorations introduced by the element are positioned using the 1.2363 + mirrored baseline table. 1.2364 + <p>Similarly, if an inline child of the element has a <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> 1.2365 + value other than <a class=css data-link-type=maybe href=#valuedef-sideways-left>sideways-left</a>, an analogous transformation (and 1.2366 + bidi isolation) is applied. 1.2367 + <dt><dfn data-dfn-for=text-orientation data-dfn-type=value data-export="" id=valuedef-sideways>sideways</dfn></dt> 1.2368 + <dd><p>This value is equivalent to <a class=css data-link-type=maybe href=#valuedef-sideways-right>sideways-right</a> in <a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a> 1.2369 + writing mode and equivalent to <a class=css data-link-type=maybe href=#valuedef-sideways-left>sideways-left</a> in <a class=css data-link-type=maybe href=#valuedef-vertical-lr>vertical-lr</a> 1.2370 + writing mode. It can be useful when setting horizontal script text 1.2371 + vertically in a primarily horizontal-only document. 1.2372 + <dt><dfn data-dfn-for=text-orientation data-dfn-type=value data-export="" id=valuedef-use-glyph-orientation>use-glyph-orientation</dfn></dt> 1.2373 + <dd><p><a data-biblio-type=normative data-link-type=biblio href=#svg11 title=SVG11>[SVG11]</a> defines <a class=property data-link-type=propdesc title=glyph-orientation-vertical>glyph-orientation-vertical</a> and 1.2374 + <a class=property data-link-type=propdesc title=glyph-orientation-horizontal>glyph-orientation-horizontal</a> properties that were intended to control 1.2375 + text orientation. These properties are <em>deprecated</em> and do not 1.2376 + apply to non-SVG elements. If an implementation supports these properties, 1.2377 + the <a class=css data-link-type=maybe href=#valuedef-use-glyph-orientation>use-glyph-orientation</a> value when set on SVG elements indicates 1.2378 + that the SVG 1.2379 + <a class=property data-link-type=propdesc title=glyph-orientation-vertical>glyph-orientation-vertical</a> and <a class=property data-link-type=propdesc title=glyph-orientation-horizontal>glyph-orientation-horizontal</a> 1.2380 + behavior control the layout of text. Such UAs must set 1.2381 + <span class=css data-link-type=maybe>text-orientation: use-glyph-orientation</span> on all 1.2382 + <a href=http://www.w3.org/TR/SVG/intro.html#TermTextContentElement>SVG 1.2383 + text content elements</a> in their default UA style sheet for SVG. 1.2384 + <p>In all other contexts, and for implementations that do not support 1.2385 + the glyph orientation properties, the <a class=css data-link-type=maybe href=#valuedef-use-glyph-orientation>use-glyph-orientation</a> behavior 1.2386 + is the same as for <a class=css data-link-type=maybe href=#valuedef-mixed>mixed</a>. 1.2387 + <p class=note>This value is at-risk and may be dropped during CR. 1.2388 + </dl> 1.2389 + 1.2390 + <div class=figure id=fig-text-orientation> 1.2391 + <table class=data> 1.2392 + <tr> 1.2393 + <td> 1.2394 + <img alt="text-orientation: mixed" height=160 src=text-orientation-vr.png width=64> 1.2395 + </td> 1.2396 + <td> 1.2397 + <img alt="text-orientation: upright" height=160 src=text-orientation-up.png width=64> 1.2398 + </td> 1.2399 + <td> 1.2400 + <img alt="text-orientation: sideways-left" height=160 src=text-orientation-sl.png width=64> 1.2401 + </td> 1.2402 + <td> 1.2403 + <img alt="text-orientation: sideways-right" height=160 src=text-orientation-sr.png width=64> 1.2404 + </td> 1.2405 + </tr> 1.2406 + <tr> 1.2407 + <td><a class=css data-link-type=maybe href=#valuedef-mixed>mixed</a></td> 1.2408 + <td><a class=css data-link-type=maybe href=#valuedef-upright>upright</a></td> 1.2409 + <td><a class=css data-link-type=maybe href=#valuedef-sideways-left>sideways-left</a></td> 1.2410 + <td><a class=css data-link-type=maybe href=#valuedef-sideways-right>sideways-right</a></td> 1.2411 + </tr> 1.2412 + </table> 1.2413 + <p class=caption><a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> values (<a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> is <a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a>)</p> 1.2414 </div> 1.2415 1.2416 <div class=example> 1.2417 - <p>In this example, ‘<a href="#writing-mode1"><code 1.2418 - class=property>writing-mode</code></a>’ sets the list markers upright 1.2419 - using the ‘<code class=css>::marker</code>’ pseudo-element. Vertical 1.2420 - alignment ensures that longer numbers will still align with the right of 1.2421 - the first line of text. <a href="#CSS3LIST" 1.2422 - rel=biblioentry>[CSS3LIST]<!--{{CSS3LIST}}--></a> 1.2423 + <p>In the following example, the root element of a horizontal-only document 1.2424 + is set to use <a class=css data-link-type=maybe href=#valuedef-sideways>sideways</a>. In the rest of the document, the author 1.2425 + can just set <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> without worrying about whether the text is 1.2426 + <a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a> or <a class=css data-link-type=maybe href=#valuedef-vertical-lr>vertical-lr</a>. 1.2427 + <pre> :root { text-orientation: sideways; } 1.2428 + caption { caption-side: left; writing-mode: vertical-lr; } 1.2429 + thead th { writing-mode: vertical-lr; } 1.2430 + h1.banner { position: absolute; top: 0; right: 0; writing-mode: vertical-rl; } 1.2431 +</pre> </div> 1.2432 1.2433 - <pre>::marker { writing-mode: horizontal-tb; 1.2434 -<!-- --> vertical-align: text-top; 1.2435 -<!-- --> color: blue; }</pre> 1.2436 + <p class=note>Changing the value of this property may affect inline-level alignment. 1.2437 + Refer to <a href=#text-baselines>Text Baselines</a> for more details.</p> 1.2438 1.2439 - <div class=figure> 1.2440 - <p><img 1.2441 - alt="Diagram showing list markers of '1.', '2.', '3.' sitting upright atop sideways vertical Latin list item text." 1.2442 - class=example src=vertical-horizontal-list-markers.png> 1.2443 +<h4 data-level=5.1.1 id=vertical-orientations><span class=secno>5.1.1 </span><span class=content> 1.2444 +Mixed Vertical Orientations</span><a class=section-link href=#vertical-orientations>§</a></h4> 1.2445 1.2446 - <p class=caption>Example of horizontal list markers in a vertical list 1.2447 - </div> 1.2448 - </div> 1.2449 + <p> 1.2450 + <a data-biblio-type=normative data-link-type=biblio href=#utr50 title=UTR50>[UTR50]</a> defines the Vertical_Orientation property for the default character orientation of mixed-orientation vertical text. 1.2451 + When <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> is <a class=css data-link-type=maybe href=#valuedef-mixed>mixed</a>, 1.2452 + the UA must render a <a href=#character>character</a> upright if its orientation property is 1.2453 + <code>U</code>, <code>Tx</code>, or <code>Tu</code>; 1.2454 + or <a href=#typeset-sideways>typeset it sideways</a> (90° clockwise from horizontal) 1.2455 + if its orientation property is <code>R</code>. 1.2456 + For <code>Tr</code> <a href=#character>characters</a>, 1.2457 + which are intended to be either transformed or rotated sideways, 1.2458 + the UA may assume that appropriate glyphs for upright typesetting 1.2459 + are given in the font and render them upright; 1.2460 + alternately it may check for such glyphs first, 1.2461 + and fall back to typesetting them sideways if the appropriate glyphs are missing. 1.2462 1.2463 - <h4 id=svg-writing-mode><span class=secno>3.1.1. </span> SVG1.1 ‘<a 1.2464 - href="#writing-mode1"><code class=property>writing-mode</code></a>’ 1.2465 - Values</h4> 1.2466 + <p> 1.2467 + In some systems (e.g. when using OpenType fonts), 1.2468 + to correctly orient a <a href=#character>character</a> belonging to the Mongolian or Phags-pa script upright, 1.2469 + the UA must actually typeset it <a href=#typeset-sideways>sideways</a>. 1.2470 + <p class=note>This is because the "upright" orientation 1.2471 + in the Unicode code charts (which assume vertical typesetting) 1.2472 + and the "upright" orientation of the glyphs of these scripts 1.2473 + in most OpenType fonts (which assume horizontal typesetting) 1.2474 + don't match. 1.2475 + 1.2476 +<h4 data-level=5.1.2 id=vertical-font-features><span class=secno>5.1.2 </span><span class=content> 1.2477 +Vertical Typesetting and Font Features</span><a class=section-link href=#vertical-font-features>§</a></h4> 1.2478 1.2479 - <p>SVG1.1 <a href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> 1.2480 - defines some additional values: ‘<code class=css>lr</code>’, ‘<code 1.2481 - class=css>lr-tb</code>’, ‘<code class=css>rl</code>’, ‘<code 1.2482 - class=css>rl-tb</code>’, ‘<code class=css>tb</code>’, and ‘<code 1.2483 - class=css>tb-rl</code>’. 1.2484 - 1.2485 - <p>These values are <em>deprecated</em> in any context except SVG1 1.2486 - documents. Implementations that wish to support these values in the 1.2487 - context of CSS must treat them as follows: 1.2488 - 1.2489 - <table class=data> 1.2490 - <thead> 1.2491 - <tr> 1.2492 - <th>SVG1/Obsolete 1.2493 - 1.2494 - <th>CSS 1.2495 - 1.2496 - <tbody> 1.2497 - <tr> 1.2498 - <td>‘<code class=css>lr</code>’ 1.2499 - 1.2500 - <td rowspan=3>‘<a href="#horizontal-tb"><code 1.2501 - class=css>horizontal-tb</code></a>’ 1.2502 - 1.2503 - <tr> 1.2504 - <td>‘<code class=css>lr-tb</code>’ 1.2505 - 1.2506 - <tr> 1.2507 - <td>‘<code class=css>rl</code>’ 1.2508 - 1.2509 - <tr> 1.2510 - <td>‘<code class=css>tb</code>’ 1.2511 - 1.2512 - <td rowspan=2>‘<a href="#vertical-rl"><code 1.2513 - class=css>vertical-rl</code></a>’ 1.2514 - 1.2515 - <tr> 1.2516 - <td>‘<code class=css>tb-rl</code>’ 1.2517 - </table> 1.2518 - 1.2519 - <p class=note>The SVG1.1 values were also present in an older revision of 1.2520 - the CSS ‘<a href="#writing-mode1"><code 1.2521 - class=property>writing-mode</code></a>’ specification, which is 1.2522 - obsoleted by this specification. The additional ‘<code 1.2523 - class=css>tb-lr</code>’ value of that revision is replaced by ‘<a 1.2524 - href="#vertical-lr"><code class=css>vertical-lr</code></a>’. 1.2525 - 1.2526 - <p>In SVG1.1, these values set the <dfn 1.2527 - id=inline-progression-direction>inline progression direction</dfn>, in 1.2528 - other words, the direction the current text position advances each time a 1.2529 - glyph is added. This is a geometric process that happens <em>after</em> 1.2530 - bidi reordering, and thus has no effect on the interpretation of the ‘<a 1.2531 - href="#direction0"><code class=property>direction</code></a>’ property 1.2532 - (which is independent of ‘<a href="#writing-mode1"><code 1.2533 - class=property>writing-mode</code></a>’). (See <a 1.2534 - href="http://www.w3.org/TR/SVG/text.html#RelationshipWithBiDirectionality">Relationship 1.2535 - with bidirectionality</a>. <a href="#SVG11" 1.2536 - rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>) 1.2537 - 1.2538 - <p class=note>There are varying interpretations on whether this process 1.2539 - causes "writing-mode: rl" to merely shift the text string or reverse the 1.2540 - order of all glyphs in the text. 1.2541 - 1.2542 - <h2 id=inline-alignment><span class=secno>4. </span> Inline-level Alignment</h2> 1.2543 - 1.2544 - <p>When different kinds of inline-level content are placed together on a 1.2545 - line, the baselines of the content and the settings of the ‘<code 1.2546 - class=property>vertical-align</code>’ property control how they are 1.2547 - aligned in the transverse direction of the line box. This section 1.2548 - discusses what baselines are, how to find them, and how they are used 1.2549 - together with the ‘<code class=property>vertical-align</code>’ 1.2550 - property to determine the alignment of inline-level content. 1.2551 - 1.2552 - <h3 id=intro-baselines><span class=secno>4.1. </span> Introduction to 1.2553 - Baselines</h3> 1.2554 - 1.2555 - <p><em>This section is non-normative.</em> 1.2556 - 1.2557 - <p>A <dfn id=baseline>baseline</dfn> is a line along the <i>inline axis</i> 1.2558 - of a line box along which individual glyphs of text are aligned. Baselines 1.2559 - guide the design of glyphs in a font (for example, the bottom of most 1.2560 - alphabetic glyphs typically align with the alphabetic baseline), and they 1.2561 - guide the alignment of glyphs from different fonts or font sizes when 1.2562 - typesetting. 1.2563 - 1.2564 - <div class=figure> [Picture of alphabetic text in two font sizes with the 1.2565 - baseline and emboxes indicated.]</div> 1.2566 - 1.2567 - <p>Different writing systems prefer different baseline tables. 1.2568 - 1.2569 - <div class=figure> 1.2570 - <p><img 1.2571 - alt="Latin prefers the alphabetic baseline, on top of which most letters rest, though some have descenders that dangle below it. Indic scripts are sometimes typeset with a hanging baseline, since their glyph shapes appear to be hanging from a horizontal line. Han-based systems, whose glyphs are designed to fill a square, tend to align on their bottoms." 1.2572 - src=script-preferred-baselines.gif> 1.2573 - 1.2574 - <p class=caption>Preferred baselines in various writing systems 1.2575 - </div> 1.2576 - 1.2577 - <p>A well-constructed font contains a <dfn id=baseline-table>baseline 1.2578 - table</dfn>, which indicates the position of one or more baselines within 1.2579 - the font's design coordinate space. (The design coordinate space is scaled 1.2580 - with the font size.) 1.2581 - 1.2582 - <div class=figure> 1.2583 - <p><img alt="" src=baselines.gif> 1.2584 - 1.2585 - <p class=caption>In a well-designed mixed-script font, the glyphs are 1.2586 - positioned in the coordinate space to harmonize with one another when 1.2587 - typeset together. The baseline table is then constructed to match the 1.2588 - shape of the glyphs, each baseline positioned to match the glyphs from 1.2589 - its preferred scripts. 1.2590 - </div> 1.2591 - 1.2592 - <p>The baseline table is a property of the font, and the positions of the 1.2593 - various baselines apply to all glyphs in the font. 1.2594 - 1.2595 - <p>Different baseline tables can be provided for alignment in horizontal 1.2596 - and vertical text. UAs should use the vertical tables in vertical writing 1.2597 - modes and the horizontal tables otherwise. 1.2598 - 1.2599 - <h3 id=text-baselines><span class=secno>4.2. </span> Text Baselines</h3> 1.2600 - 1.2601 - <p>In this specification, only the following baselines are considered: 1.2602 - 1.2603 + <p>When typesetting text in <a class=css data-link-type=maybe href=#valuedef-mixed>mixed</a> and <a class=css data-link-type=maybe href=#valuedef-upright>upright</a> orientations: 1.2604 + 1.2605 <dl> 1.2606 - <dt>alphabetic 1.2607 - 1.2608 - <dd>The <dfn id=alphabetic-baseline>alphabetic baseline</dfn>, which 1.2609 - typically aligns with the bottom of uppercase Latin glyphs. 1.2610 - 1.2611 - <dt>central 1.2612 - 1.2613 - <dd>The <dfn id=central-baseline>central baseline</dfn>, which typically 1.2614 - crosses the center of the em box. If the font is missing this baseline, 1.2615 - it is assumed to be halfway between the ascender (<a 1.2616 - href="#over"><i>over</i></a>) and descender (<a 1.2617 - href="#under"><i>under</i></a>) edges of the em box. 1.2618 - </dl> 1.2619 - 1.2620 - <p>In vertical writing mode, the <a href="#central-baseline"><i>central 1.2621 - baseline</i></a> is used as the dominant baseline when ‘<a 1.2622 - href="#text-orientation0"><code 1.2623 - class=property>text-orientation</code></a>’ is ‘<a href="#mixed"><code 1.2624 - class=css>mixed</code></a>’ or ‘<a href="#upright"><code 1.2625 - class=css>upright</code></a>’. Otherwise the <a 1.2626 - href="#alphabetic-baseline"><i>alphabetic baseline</i></a> is used. 1.2627 - 1.2628 - <p class=note>A future CSS module will deal with baselines in more detail 1.2629 - and allow the choice of other dominant baselines and alignment options. 1.2630 - 1.2631 - <h3 id=replaced-baselines><span class=secno>4.3. </span> Atomic Inline 1.2632 - Baselines</h3> 1.2633 - 1.2634 - <p>If an <a 1.2635 - href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes">atomic 1.2636 - inline</a> (such as an inline-block, inline-table, or replaced inline 1.2637 - element) is not capable of providing its own baseline information, then 1.2638 - the UA synthesizes a baseline table thus: 1.2639 - 1.2640 - <dl> 1.2641 - <dt>alphabetic 1.2642 - 1.2643 - <dd>The alphabetic baseline is assumed to be at the <a 1.2644 - href="#under"><i>under</i></a> margin edge. 1.2645 - 1.2646 - <dt>central 1.2647 - 1.2648 - <dd>The central baseline is assumed to be halfway between the <a 1.2649 - href="#under"><i>under</i></a> and <a href="#over"><i>over</i></a> margin 1.2650 - edges of the box. 1.2651 - </dl> 1.2652 - 1.2653 - <h3 id=baseline-alignment><span class=secno>4.4. </span> Baseline Alignment</h3> 1.2654 - 1.2655 - <p>The <dfn id=dominant-baseline>dominant baseline</dfn> (which <a 1.2656 - href="#text-baselines">can change</a> based on the writing mode) is used 1.2657 - in CSS for alignment in two cases: 1.2658 - 1.2659 - <ul> 1.2660 - <li><strong>Aligning glyphs from different fonts within the same inline 1.2661 - box.</strong> The glyphs are aligned by matching up the positions of the 1.2662 - dominant baseline in their corresponding fonts. 1.2663 - 1.2664 - <li><strong>Aligning a child inline-level box within its parent.</strong> 1.2665 - For the ‘<code class=property>vertical-align</code>’ value of ‘<a 1.2666 - href="#baseline"><code class=css>baseline</code></a>’, child is aligned 1.2667 - to the parent by matching the parent's dominant baseline to the same 1.2668 - baseline in the child. (E.g. if the parent's dominant baseline is 1.2669 - alphabetic, then the child's alphabetic baseline is matched to the 1.2670 - parent's alphabetic baseline, even if the child's dominant baseline is 1.2671 - something else.) For values of ‘<code class=css>sub</code>’, ‘<code 1.2672 - class=css>super</code>’, ‘<code class=css><length></code>’, 1.2673 - and ‘<code class=css><percentage></code>’, the baselines are 1.2674 - aligned as for ‘<a href="#baseline"><code 1.2675 - class=css>baseline</code></a>’, but the child is shifted according to 1.2676 - the offset given by its ‘<code class=property>vertical-align</code>’ 1.2677 - value. 1.2678 - <div class=example> 1.2679 - <p>Given following sample markup: 1.2680 - 1.2681 - <pre><p><span class="outer">Ap <span class="inner"><i>ji</i></span></span></p></pre> 1.2682 - 1.2683 - <p>And the following style rule: 1.2684 - 1.2685 - <pre>span.inner { font-size: .75em; }</pre> 1.2686 - 1.2687 - <p>The baseline tables of the parent (<code>.outer</code>) and the child 1.2688 - (<code>.inner</code>) will not match up due to the font size 1.2689 - difference. Since the dominant baseline is the alphabetic baseline, the 1.2690 - child box is aligned to its parent by matching up their alphabetic 1.2691 - baselines. 1.2692 - 1.2693 - <div class=figure> 1.2694 - <p><img alt="" src=baseline-align-sizes.gif> 1.2695 - </div> 1.2696 - </div> 1.2697 - 1.2698 - <div class=example> 1.2699 - <p>If we assign ‘<code class=css>vertical-align: super</code>’ to 1.2700 - the <code>.inner</code> element from the example above, the same rules 1.2701 - are used to align the <code>.inner</code> child to its parent; the only 1.2702 - difference is in addition to the baseline alignment, the child is 1.2703 - shifted to the superscript position. 1.2704 - 1.2705 - <pre>span.inner { vertical-align: super; font-size: .75em; }</pre> 1.2706 - 1.2707 - <div class=figure> 1.2708 - <p><img 1.2709 - alt="In this example, the resulting alignment is equivalent to shifting the parent baseline table upwards by the superscript offset, and then aligning the child's alphabetic baseline to the shifted position of the parent's alphabetic baseline." 1.2710 - src=baseline-align-super.gif> 1.2711 - </div> 1.2712 - </div> 1.2713 - </ul> 1.2714 - 1.2715 - <h2 id=intro-text-layout><span class=secno>5. </span> Introduction to 1.2716 - Vertical Text Layout</h2> 1.2717 - 1.2718 - <p>Each writing system has one or more native orientations. Modern scripts 1.2719 - can therefore be classified into three orientational categories: 1.2720 - 1.2721 - <dl> 1.2722 - <dt>horizontal-only 1.2723 - 1.2724 - <dd>Scripts that have horizontal, but not vertical, native orientation. 1.2725 - Includes: Latin, Arabic, Hebrew, Devanagari 1.2726 - 1.2727 - <dt>vertical-only 1.2728 - 1.2729 - <dd>Scripts that have vertical, but not horizontal, native orientation. 1.2730 - Includes: Mongolian, Phags Pa 1.2731 - 1.2732 - <dt>bi-orientational 1.2733 - 1.2734 - <dd>Scripts that have both vertical and horizontal native orientation. 1.2735 - Includes: Han, Hangul, Japanese Kana 1.2736 - </dl> 1.2737 - 1.2738 - <p>A <dfn id=vertical-script>vertical script</dfn> is one that has a native 1.2739 - vertical orientation: i.e. one that is either vertical-only or that is 1.2740 - bi-orientational. A <dfn id=horizontal-script>horizontal script</dfn> is 1.2741 - one that has a native horizontal orientation: i.e. one that is either 1.2742 - horizontal-only or that is bi-orientational. (See <a 1.2743 - href="#script-orientations">Appendix B</a> for a categorization of scripts 1.2744 - by native orientation.) 1.2745 - 1.2746 - <div class=figure> 1.2747 - <p><img 1.2748 - alt="A Venn diagram of these distinctions would show two circles: one labelled 'vertical', the other 'horizontal'. The overlapped region would represent the bi-orientational scripts, while horizontal-only and vertical-only scripts would occupy their respective circles' exclusive regions." 1.2749 - src=baseline-align-super.gif> 1.2750 - </div> 1.2751 - 1.2752 - <p>In modern typographic systems, all glyphs are assigned a horizontal 1.2753 - orientation, which is used when laying out text horizontally. To lay out 1.2754 - vertical text, the UA needs to transform the text from its horizontal 1.2755 - orientation. This transformation is the <dfn 1.2756 - id=bi-orientational-transform>bi-orientational transform</dfn>, and there 1.2757 - are two types: 1.2758 - 1.2759 - <dl> 1.2760 - <dt>rotate 1.2761 - 1.2762 - <dd>Rotate the glyph from horizontal to vertical <a 1.2763 - href="diagrams/glyph-right.svg" type="image/svg+xml"> <img 1.2764 - alt="Rotate the glyph from horizontal to vertical" class=figure 1.2765 - src="diagrams/glyph-right.png"></a> 1.2766 - 1.2767 - <dt>translate 1.2768 - 1.2769 - <dd>Translate the glyph from horizontal to vertical <a 1.2770 - href="diagrams/glyph-upright.svg" type="image/svg+xml"> <img 1.2771 - alt="Translate the glyph from horizontal to vertical" class=figure 1.2772 - src="diagrams/glyph-upright.png"></a> 1.2773 - </dl> 1.2774 - 1.2775 - <p>Scripts with a native vertical orientation have an intrinsic 1.2776 - bi-orientational transform, which orients them correctly in vertical text: 1.2777 - most CJK (Chinese/Japanese/Korean) characters translate, that is, they are 1.2778 - always upright. Characters from other scripts, such as Mongolian, rotate. 1.2779 - 1.2780 - <p>Scripts without a native vertical orientation can be either rotated (set 1.2781 - sideways) or translated (set upright): the transform used is a stylistic 1.2782 - preference depending on the text's usage, rather than a matter of 1.2783 - correctness. The ‘<a href="#text-orientation0"><code 1.2784 - class=property>text-orientation</code></a>’ property's ‘<a 1.2785 - href="#mixed"><code class=css>mixed</code></a>’ and ‘<a 1.2786 - href="#upright"><code class=css>upright</code></a>’ values are provided 1.2787 - to specify rotation vs. translation of horizontal-only text. 1.2788 - 1.2789 - <p class=note>The ‘<a href="#sideways-left"><code 1.2790 - class=css>sideways-left</code></a>’, ‘<a href="#sideways-right"><code 1.2791 - class=css>sideways-right</code></a>’, and ‘<a href="#sideways"><code 1.2792 - class=css>sideways</code></a>’ values of ‘<a 1.2793 - href="#text-orientation0"><code 1.2794 - class=property>text-orientation</code></a>’ are provided for decorative 1.2795 - layout effects and to work around limitations in CSS support for 1.2796 - bottom-to-top scripts. 1.2797 - 1.2798 - <h3 id=text-orientation><span class=secno>5.1. </span> Orienting Text: the 1.2799 - ‘<a href="#text-orientation0"><code 1.2800 - class=property>text-orientation</code></a>’ property</h3> 1.2801 - 1.2802 - <table class=propdef> 1.2803 - <tbody> 1.2804 - <tr> 1.2805 - <th>Name: 1.2806 - 1.2807 - <td><dfn id=text-orientation0>text-orientation</dfn> 1.2808 - 1.2809 - <tr> 1.2810 - <th><a href="#values">Value</a>: 1.2811 - 1.2812 - <td>mixed | upright | sideways-right | sideways-left | sideways | 1.2813 - use-glyph-orientation 1.2814 - 1.2815 - <tr> 1.2816 - <th>Initial: 1.2817 - 1.2818 - <td>mixed 1.2819 - 1.2820 - <tr> 1.2821 - <th>Applies to: 1.2822 - 1.2823 - <td>all elements except table row groups, rows, column groups, and 1.2824 - columns 1.2825 - 1.2826 - <tr> 1.2827 - <th>Inherited: 1.2828 - 1.2829 - <td>yes 1.2830 - 1.2831 - <tr> 1.2832 - <th>Percentages: 1.2833 - 1.2834 - <td>N/A 1.2835 - 1.2836 - <tr> 1.2837 - <th>Media: 1.2838 - 1.2839 - <td>visual 1.2840 - 1.2841 - <tr> 1.2842 - <th>Computed value: 1.2843 - 1.2844 - <td>specified value 1.2845 - </table> 1.2846 - 1.2847 - <p>This property specifies the orientation of text within a line. Current 1.2848 - values only have an effect in vertical writing modes; the property has no 1.2849 - effect on elements in horizontal writing modes. 1.2850 - 1.2851 - <p>For readability, the term <a href="#character"><i>character</i></a> is 1.2852 - used in place of <em>extended grapheme cluster</em> in this section. See 1.2853 - <a href="#character-properties">Characters and Properties</a> for further 1.2854 - details. 1.2855 - 1.2856 - <p>Values have the following meanings: 1.2857 - 1.2858 - <dl> 1.2859 - <dt><dfn id=mixed>mixed</dfn> 1.2860 - 1.2861 - <dd> 1.2862 - <p>In vertical writing modes, characters from horizontal-only scripts are 1.2863 - set sideways, i.e. 90° clockwise from their standard orientation in 1.2864 - horizontal text. Characters from vertical scripts are set with their 1.2865 - intrinsic orientation. See <a href="#vertical-orientations">Vertical 1.2866 - Orientations</a> for further details. 1.2867 - 1.2868 - <p>This value is typical for layout of primarily vertical-script text. 1.2869 - 1.2870 - <dt><dfn id=upright>upright</dfn> 1.2871 - 1.2872 - <dd> 1.2873 - <p>In vertical writing modes, characters from horizontal-only scripts are 1.2874 - rendered upright, i.e. in their standard horizontal orientation. 1.2875 - Characters from vertical scripts are set with their intrinsic 1.2876 - orientation and shaped normally. See <a 1.2877 - href="#vertical-orientations">Vertical Orientations</a> for further 1.2878 - details. 1.2879 - 1.2880 - <p>For the purposes of bidi reordering, this value causes all characters 1.2881 - to be treated as strong LTR. This value causes the used value of ‘<a 1.2882 - href="#direction0"><code class=property>direction</code></a>’ to be 1.2883 - ‘<a href="#ltr"><code class=css>ltr</code></a>’. 1.2884 - 1.2885 - <dt><dfn id=sideways-right>sideways-right</dfn> 1.2886 - 1.2887 - <dd> 1.2888 - <p>In vertical writing modes, this causes text to be set as if in a 1.2889 - horizontal layout, but rotated 90° clockwise. 1.2890 - 1.2891 - <dt><dfn id=sideways-left>sideways-left</dfn> 1.2892 - 1.2893 - <dd> 1.2894 - <p>In vertical writing modes, this causes text to be set as if in a 1.2895 - horizontal layout, but rotated 90° counter-clockwise. 1.2896 - 1.2897 - <p>If set on a non-replaced inline whose parent is not ‘<a 1.2898 - href="#sideways-left"><code class=css>sideways-left</code></a>’, this 1.2899 - forces bidi isolation: the ‘<a href="#normal"><code 1.2900 - class=css>normal</code></a>’ and ‘<a href="#embed"><code 1.2901 - class=css>embed</code></a>’ values of ‘<a 1.2902 - href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ 1.2903 - compute to ‘<a href="#isolate"><code class=css>isolate</code></a>’, 1.2904 - and ‘<a href="#bidi-override"><code 1.2905 - class=css>bidi-override</code></a>’ computes to ‘<a 1.2906 - href="#isolate-override"><code class=css>isolate-override</code></a>’. 1.2907 - Layout of text is exactly as for ‘<a href="#sideways-right"><code 1.2908 - class=css>sideways-right</code></a>’ except that the baseline table of 1.2909 - each of the element's inline boxes is mirrored around a vertical axis 1.2910 - along the center of its content box and text layout is rotated 180° to 1.2911 - match. The positions of text decorations propagated from an ancestor 1.2912 - inline (including the block container's root inline) are not mirrored, 1.2913 - but any text decorations introduced by the element are positioned using 1.2914 - the mirrored baseline table. 1.2915 - 1.2916 - <p>Similarly, if an inline child of the element has a ‘<a 1.2917 - href="#text-orientation0"><code 1.2918 - class=property>text-orientation</code></a>’ value other than ‘<a 1.2919 - href="#sideways-left"><code class=css>sideways-left</code></a>’, an 1.2920 - analogous transformation (and bidi isolation) is applied. 1.2921 - 1.2922 - <dt><dfn id=sideways>sideways</dfn> 1.2923 - 1.2924 - <dd> 1.2925 - <p>This value is equivalent to ‘<a href="#sideways-right"><code 1.2926 - class=css>sideways-right</code></a>’ in ‘<a 1.2927 - href="#vertical-rl"><code class=css>vertical-rl</code></a>’ writing 1.2928 - mode and equivalent to ‘<a href="#sideways-left"><code 1.2929 - class=css>sideways-left</code></a>’ in ‘<a href="#vertical-lr"><code 1.2930 - class=css>vertical-lr</code></a>’ writing mode. It can be useful when 1.2931 - setting horizontal script text vertically in a primarily horizontal-only 1.2932 - document. 1.2933 - 1.2934 - <dt><dfn id=use-glyph-orientation>use-glyph-orientation</dfn> 1.2935 - 1.2936 - <dd> 1.2937 - <p><a href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> defines 1.2938 - ‘<code class=property>glyph-orientation-vertical</code>’ and 1.2939 - ‘<code class=property>glyph-orientation-horizontal</code>’ 1.2940 - properties that were intended to control text orientation. These 1.2941 - properties are <em>deprecated</em> and do not apply to non-SVG elements. 1.2942 - If an implementation supports these properties, the ‘<a 1.2943 - href="#use-glyph-orientation"><code 1.2944 - class=css>use-glyph-orientation</code></a>’ value when set on SVG 1.2945 - elements indicates that the SVG ‘<code 1.2946 - class=property>glyph-orientation-vertical</code>’ and ‘<code 1.2947 - class=property>glyph-orientation-horizontal</code>’ behavior control 1.2948 - the layout of text. Such UAs must set ‘<code 1.2949 - class=css>text-orientation: use-glyph-orientation</code>’ on all <a 1.2950 - href="http://www.w3.org/TR/SVG/intro.html#TermTextContentElement">SVG 1.2951 - text content elements</a> in their default UA style sheet for SVG. 1.2952 - 1.2953 - <p>In all other contexts, and for implementations that do not support the 1.2954 - glyph orientation properties, the ‘<a 1.2955 - href="#use-glyph-orientation"><code 1.2956 - class=css>use-glyph-orientation</code></a>’ behavior is the same as 1.2957 - for ‘<a href="#mixed"><code class=css>mixed</code></a>’. 1.2958 - 1.2959 - <p class=note>This value is at-risk and may be dropped during CR. 1.2960 - </dl> 1.2961 - 1.2962 - <div class=figure id=fig-text-orientation> 1.2963 - <table class=data> 1.2964 - <tbody> 1.2965 - <tr> 1.2966 - <td> <img alt="text-orientation: mixed" height=160 1.2967 - src=text-orientation-vr.png width=64> 1.2968 - 1.2969 - <td> <img alt="text-orientation: upright" height=160 1.2970 - src=text-orientation-up.png width=64> 1.2971 - 1.2972 - <td> <img alt="text-orientation: sideways-left" height=160 1.2973 - src=text-orientation-sl.png width=64> 1.2974 - 1.2975 - <td> <img alt="text-orientation: sideways-right" height=160 1.2976 - src=text-orientation-sr.png width=64> 1.2977 - 1.2978 - <tr> 1.2979 - <td>‘<a href="#mixed"><code class=css>mixed</code></a>’ 1.2980 - 1.2981 - <td>‘<a href="#upright"><code class=css>upright</code></a>’ 1.2982 - 1.2983 - <td>‘<a href="#sideways-left"><code 1.2984 - class=css>sideways-left</code></a>’ 1.2985 - 1.2986 - <td>‘<a href="#sideways-right"><code 1.2987 - class=css>sideways-right</code></a>’ 1.2988 - </table> 1.2989 - 1.2990 - <p class=caption>‘<a href="#text-orientation0"><code 1.2991 - class=property>text-orientation</code></a>’ values (‘<a 1.2992 - href="#writing-mode1"><code class=property>writing-mode</code></a>’ is 1.2993 - ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’) 1.2994 - </div> 1.2995 - 1.2996 - <div class=example> 1.2997 - <p>In the following example, the root element of a horizontal-only 1.2998 - document is set to use ‘<a href="#sideways"><code 1.2999 - class=css>sideways</code></a>’. In the rest of the document, the author 1.3000 - can just set ‘<a href="#writing-mode1"><code 1.3001 - class=property>writing-mode</code></a>’ without worrying about whether 1.3002 - the text is ‘<a href="#vertical-rl"><code 1.3003 - class=css>vertical-rl</code></a>’ or ‘<a href="#vertical-lr"><code 1.3004 - class=css>vertical-lr</code></a>’. 1.3005 - 1.3006 - <pre> 1.3007 - :root { text-orientation: sideways; } 1.3008 - caption { caption-side: left; writing-mode: vertical-lr; } 1.3009 - thead th { writing-mode: vertical-lr; } 1.3010 - h1.banner { position: absolute; top: 0; right: 0; writing-mode: vertical-rl; } 1.3011 - </pre> 1.3012 - </div> 1.3013 - 1.3014 - <p class=note>Changing the value of this property may affect inline-level 1.3015 - alignment. Refer to <a href="#text-baselines">Text Baselines</a> for more 1.3016 - details. 1.3017 - 1.3018 - <h4 id=vertical-orientations><span class=secno>5.1.1. </span> Mixed 1.3019 - Vertical Orientations</h4> 1.3020 - 1.3021 - <p> <a href="#UTR50" rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a> defines 1.3022 - the Vertical_Orientation property for the default character orientation of 1.3023 - mixed-orientation vertical text. When ‘<a 1.3024 - href="#text-orientation0"><code 1.3025 - class=property>text-orientation</code></a>’ is ‘<a href="#mixed"><code 1.3026 - class=css>mixed</code></a>’, the UA must render a <a 1.3027 - href="#character"><i>character</i></a> upright if its orientation property 1.3028 - is <code>U</code>, <code>Tx</code>, or <code>Tu</code>; or <a 1.3029 - href="#typeset-sideways">typeset it sideways</a> (90° clockwise from 1.3030 - horizontal) if its orientation property is <code>R</code>. For 1.3031 - <code>Tr</code> <a href="#character"><i>characters</i></a>, which are 1.3032 - intended to be either transformed or rotated sideways, the UA may assume 1.3033 - that appropriate glyphs for upright typesetting are given in the font and 1.3034 - render them upright; alternately it may check for such glyphs first, and 1.3035 - fall back to typesetting them sideways if the appropriate glyphs are 1.3036 - missing. 1.3037 - 1.3038 - <p> In some systems (e.g. when using OpenType fonts), to correctly orient a 1.3039 - <a href="#character"><i>character</i></a> belonging to the Mongolian or 1.3040 - Phags-pa script upright, the UA must actually typeset it <a 1.3041 - href="#typeset-sideways">sideways</a>. 1.3042 - 1.3043 - <p class=note>This is because the "upright" orientation in the Unicode code 1.3044 - charts (which assume vertical typesetting) and the "upright" orientation 1.3045 - of the glyphs of these scripts in most OpenType fonts (which assume 1.3046 - horizontal typesetting) don't match. 1.3047 - 1.3048 - <h4 id=vertical-font-features><span class=secno>5.1.2. </span> Vertical 1.3049 - Typesetting and Font Features</h4> 1.3050 - 1.3051 - <p>When typesetting text in ‘<a href="#mixed"><code 1.3052 - class=css>mixed</code></a>’ and ‘<a href="#upright"><code 1.3053 - class=css>upright</code></a>’ orientations: 1.3054 - 1.3055 - <dl> 1.3056 - <dt>upright characters 1.3057 - 1.3058 - <dd> Are typeset upright with vertical font metrics. The UA must 1.3059 - synthesize vertical font metrics for fonts that lack them. (This 1.3060 - specification does not define heuristics for synthesizing such metrics.) 1.3061 - Additionally, font features (such as alternate glyphs and other 1.3062 - transformation) intended for use in vertical typesetting must be used. 1.3063 - (E.g. the OpenType ‘<code class=css>vert</code>’ feature must be 1.3064 - enabled.) Furthermore, characters from horizontal cursive scripts (such 1.3065 - as Arabic) are shaped in their isolated forms when typeset upright. 1.3066 - <p class=note>Note that even when typeset "upright", some glyphs should 1.3067 - appear rotated. For example, dashes and enclosing punctuation (such as 1.3068 - 〈 LEFT ANGLE BRACKET U+3008) should be oriented relative to the inline 1.3069 - axis. In OpenType, this is typically handled by glyph substitution, 1.3070 - although not all fonts have alternate glyphs for all relevant 1.3071 - codepoints. (East Asian fonts usually provide alternates for East Asian 1.3072 - codepoints, but Western fonts typically lack any vertical typesetting 1.3073 - features.) Unicode published draft data on which <a 1.3074 - href="#character"><i>characters</i></a> should appear sideways as the 1.3075 - SVO property in <a 1.3076 - href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this 1.3077 - data file</a>; however, this property has been abandoned for the current 1.3078 - revision of <a href="#UTR50" 1.3079 - rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a>. 1.3080 - 1.3081 - <dt id=typeset-sideways>sideways characters 1.3082 - 1.3083 - <dd> Are typeset rotated 90° sideways with horizontal metrics, and 1.3084 - vertical typesetting features are not used. However, if the font has 1.3085 - features meant to be enabled for sideways text that is typeset in 1.3086 - vertical lines (e.g. to adjust brush stroke angles or alignment), those 1.3087 - features are used. 1.3088 - <!--<p class="issue">Propose 'svrt' as an OpenType substitution feature 1.3089 + <dt>upright characters 1.3090 + <dd> 1.3091 + Are typeset upright with vertical font metrics. 1.3092 + The UA must synthesize vertical font metrics for fonts that lack them. 1.3093 + (This specification does not define heuristics for synthesizing such metrics.) 1.3094 + Additionally, font features (such as alternate glyphs and other transformation) 1.3095 + intended for use in vertical typesetting must be used. 1.3096 + (E.g. the OpenType <span class=css data-link-type=maybe>vert</span> feature must be enabled.) 1.3097 + Furthermore, characters from horizontal cursive scripts (such as Arabic) 1.3098 + are shaped in their isolated forms when typeset upright. 1.3099 + <p class=note>Note that even when typeset "upright", 1.3100 + some glyphs should appear rotated. 1.3101 + For example, dashes and enclosing punctuation 1.3102 + (such as 〈 LEFT ANGLE BRACKET U+3008) 1.3103 + should be oriented relative to the inline axis. 1.3104 + In OpenType, this is typically handled by glyph substitution, 1.3105 + although not all fonts have alternate glyphs for all relevant codepoints. 1.3106 + (East Asian fonts usually provide alternates for East Asian codepoints, 1.3107 + but Western fonts typically lack any vertical typesetting features.) 1.3108 + Unicode published draft data on which <a href=#character>characters</a> should appear sideways 1.3109 + as the SVO property in <a href=http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt>this data file</a>; 1.3110 + however, this property has been abandoned for the current revision of <a data-biblio-type=normative data-link-type=biblio href=#utr50 title=UTR50>[UTR50]</a>. 1.3111 + <dt id=typeset-sideways>sideways characters 1.3112 + <dd> 1.3113 + Are typeset rotated 90° sideways with horizontal metrics, 1.3114 + and vertical typesetting features are not used. 1.3115 + However, if the font has features meant to be enabled 1.3116 + for sideways text that is typeset in vertical lines 1.3117 + (e.g. to adjust brush stroke angles or alignment), 1.3118 + those features are used. 1.3119 + <!--<p class="issue">Propose 'svrt' as an OpenType substitution feature 1.3120 that is applied to rotated horizontal text in vertical text runs, 1.3121 to handle these cases.--> 1.3122 </dl> 1.3123 1.3124 - <p> All text in ‘<a href="#sideways"><code 1.3125 - class=css>sideways</code></a>’, ‘<a href="#sideways-right"><code 1.3126 - class=css>sideways-right</code></a>’, and ‘<a 1.3127 - href="#sideways-left"><code class=css>sideways-left</code></a>’ 1.3128 - orientations is typeset using horizontal font metrics and the normal set 1.3129 - of features used for horizontal text runs. Vertical metrics, vertical 1.3130 - glyph variations, and any other features meant for text typeset in 1.3131 - vertical lines are <em>not</em> used. 1.3132 + <p> 1.3133 + All text in <a class=css data-link-type=maybe href=#valuedef-sideways>sideways</a>, <a class=css data-link-type=maybe href=#valuedef-sideways-right>sideways-right</a>, and <a class=css data-link-type=maybe href=#valuedef-sideways-left>sideways-left</a> orientations is 1.3134 + typeset using horizontal font metrics and the normal set of features 1.3135 + used for horizontal text runs. 1.3136 + Vertical metrics, vertical glyph variations, and any other features meant 1.3137 + for text typeset in vertical lines are <em>not</em> used. 1.3138 1.3139 - <p class=note> The OpenType ‘<code class=css>vrt2</code>’ feature, 1.3140 - which is intended for mixed-orientation typesetting, is not used by CSS. 1.3141 - It delegates the responsibility for orienting glyphs to the font designer. 1.3142 - CSS instead dictates the orientation through <a href="#UTR50" 1.3143 - rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a> and orients glyphs by 1.3144 - typesetting them sideways or upright as appropriate. 1.3145 + <p class=note> 1.3146 + The OpenType <span class=css data-link-type=maybe>vrt2</span> feature, which is intended for mixed-orientation typesetting, 1.3147 + is not used by CSS. 1.3148 + It delegates the responsibility for orienting glyphs to the font designer. 1.3149 + CSS instead dictates the orientation through <a data-biblio-type=normative data-link-type=biblio href=#utr50 title=UTR50>[UTR50]</a> 1.3150 + and orients glyphs by typesetting them sideways or upright as appropriate. 1.3151 1.3152 <p class=issue>This section needs additional work. Suggestions are welcome. 1.3153 - <!-- random notes 1.3154 + 1.3155 +<!-- random notes 1.3156 Property to customize text-orientation (and line breaking class) of various 1.3157 characters (yes, the name is horrible, we need a better one): 1.3158 text-symbolize: latin || 1.3159 @@ -2046,615 +1310,445 @@ 1.3160 currency || /* Sc */ 1.3161 rotate-symbols || /* other So */ 1.3162 1.3163 - Do symbols NFC-fold to Latin/Greek? If so we might have a problem there. 1.3164 +<p> Do symbols NFC-fold to Latin/Greek? If so we might have a problem there. 1.3165 1.3166 - Roman numerals are poorly handled right now. If we make them upright, we 1.3167 +<p> Roman numerals are poorly handled right now. If we make them upright, we 1.3168 get the right behavior in most cases. But as soon as you get to 13, you 1.3169 have a problem. 1.3170 --> 1.3171 1.3172 - <h2 id=abstract-box><span class=secno>6. </span> Abstract Box Terminology</h2> 1.3173 +<h2 data-level=6 id=abstract-box><span class=secno>6 </span><span class=content> 1.3174 +Abstract Box Terminology</span><a class=section-link href=#abstract-box>§</a></h2> 1.3175 1.3176 - <p>CSS2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.3177 - defines the box layout model of CSS in detail, but only for the ‘<a 1.3178 - href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ writing 1.3179 - mode. Layout is analogous in writing modes other than ‘<a 1.3180 - href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’; however 1.3181 - directional and dimensional terms in CSS2.1 must be abstracted and 1.3182 - remapped appropriately. 1.3183 - 1.3184 + <p>CSS2.1 <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> defines the box layout model of CSS in detail, 1.3185 + but only for the <a class=css data-link-type=maybe href=#valuedef-horizontal-tb>horizontal-tb</a> writing mode. Layout is analogous 1.3186 + in writing modes other than <a class=css data-link-type=maybe href=#valuedef-horizontal-tb>horizontal-tb</a>; however directional 1.3187 + and dimensional terms in CSS2.1 must be abstracted and remapped 1.3188 + appropriately. 1.3189 + 1.3190 <p>This section defines abstract directional and dimensional terms and 1.3191 - their mappings in order to define box layout for other writing modes, and 1.3192 - to provide terminology for future specs to define their layout concepts 1.3193 - abstractly. (The next section explains how to apply them to CSS2.1 layout 1.3194 - calculations and how to handle <a href="#orthogonal-flows">orthogonal 1.3195 - flows</a>.) Although they derive from the behavior of text, these abstract 1.3196 - mappings exist even for boxes that do not contain any line boxes: they are 1.3197 - calculated directly from the values of the ‘<a 1.3198 - href="#writing-mode1"><code class=property>writing-mode</code></a>’, 1.3199 - ‘<a href="#text-orientation0"><code 1.3200 - class=property>text-orientation</code></a>’, and ‘<a 1.3201 - href="#direction0"><code class=property>direction</code></a>’ 1.3202 - properties. 1.3203 + their mappings in order to define box layout for other writing modes, 1.3204 + and to provide terminology for future specs to define their layout 1.3205 + concepts abstractly. (The next section explains how to apply them to 1.3206 + CSS2.1 layout calculations and how to handle 1.3207 + <a href=#orthogonal-flows>orthogonal flows</a>.) 1.3208 + Although they derive from the behavior of text, these abstract 1.3209 + mappings exist even for boxes that do not contain any line boxes: 1.3210 + they are calculated directly from the values of the <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a>, 1.3211 + <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a>, and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> properties. 1.3212 1.3213 <p>There are three sets of directional terms in CSS: 1.3214 + 1.3215 + <dl> 1.3216 + <dt>physical 1.3217 + <dd>Interpreted relative to the page, independent of writing mode. 1.3218 + The physical directions are <i>left</i>, <i>right</i>, <i>top</i>, and 1.3219 + <i>bottom</i>. 1.3220 + <dt><a href=#logical-directions>flow-relative</a> 1.3221 + <dd>Interpreted relative to the flow of content. 1.3222 + The flow-relative directions are <a href=#start>start</a> and <a href=#end>end</a>, 1.3223 + or <a href=#block-start>block-start</a>, <a href=#block-end>block-end</a>, <a href=#inline-start>inline-start</a>, and <a href=#inline-end>inline-end</a> 1.3224 + if the dimension is also ambiguous. 1.3225 + <dt><a href=#line-directions>line-relative</a> 1.3226 + <dd>Interpreted relative to the orientation of the line box. 1.3227 + The line-relative directions are <a href=#line-left>line-left</a>, <a href=#line-right>line-right</a>, 1.3228 + <a href=#over>over</a>, and <a href=#under>under</a>. 1.3229 + </dl> 1.3230 + 1.3231 + <p>The <dfn data-dfn-type=dfn data-noexport="" id=physical-dimensions>physical dimensions</dfn> are <i>width</i> and <i>height</i>, 1.3232 + which correspond to measurements along the <i>x-axis</i> 1.3233 + (<i>vertical dimension</i>) and <i>y-axis</i> (<i>horizontal dimension</i>), 1.3234 + respectively. <a href=#abstract-dimensions>Abstract dimensions</a> 1.3235 + are identical in both flow-relative and line-relative terms, so there 1.3236 + is only one set of these terms. 1.3237 + 1.3238 + <p class=note> 1.3239 + Note: <a data-biblio-type=informative data-link-type=biblio href=#css3-flexbox title=CSS3-FLEXBOX>[CSS3-FLEXBOX]</a> also defines <a href=http://www.w3.org/TR/css3-flexbox/#box-model>flex-relative terms</a>, 1.3240 + which are used in describing flex layout. 1.3241 + 1.3242 +<h3 data-level=6.1 id=abstract-dimensions><span class=secno>6.1 </span><span class=content> 1.3243 +Abstract Dimensions</span><a class=section-link href=#abstract-dimensions>§</a></h3> 1.3244 + 1.3245 + <p>The <dfn data-dfn-type=dfn data-noexport="" id=abstract-dimensions0>abstract dimensions</dfn> are defined below: 1.3246 1.3247 <dl> 1.3248 - <dt>physical 1.3249 - 1.3250 - <dd>Interpreted relative to the page, independent of writing mode. The 1.3251 - physical directions are <i>left</i>, <i>right</i>, <i>top</i>, and 1.3252 - <i>bottom</i>. 1.3253 - 1.3254 - <dt><a href="#logical-directions">flow-relative</a> 1.3255 - 1.3256 - <dd>Interpreted relative to the flow of content. The flow-relative 1.3257 - directions are <a href="#start"><i>start</i></a> and <a 1.3258 - href="#end"><i>end</i></a>, or <a 1.3259 - href="#block-start"><i>block-start</i></a>, <a 1.3260 - href="#block-end"><i>block-end</i></a>, <a 1.3261 - href="#inline-start"><i>inline-start</i></a>, and <a 1.3262 - href="#inline-end"><i>inline-end</i></a> if the dimension is also 1.3263 - ambiguous. 1.3264 - 1.3265 - <dt><a href="#line-directions">line-relative</a> 1.3266 - 1.3267 - <dd>Interpreted relative to the orientation of the line box. The 1.3268 - line-relative directions are <a href="#line-left"><i>line-left</i></a>, 1.3269 - <a href="#line-right"><i>line-right</i></a>, <a 1.3270 - href="#over"><i>over</i></a>, and <a href="#under"><i>under</i></a>. 1.3271 + <dt><dfn data-dfn-type=dfn data-noexport="" id=block-dimension>block dimension</dfn></dt> 1.3272 + <dd>The dimension perpendicular to the flow of text within a line, i.e. 1.3273 + the <i>vertical dimension</i> in horizontal writing modes, and 1.3274 + the <i>horizontal dimension</i> in vertical writing modes.</dd> 1.3275 + <dt><dfn data-dfn-type=dfn data-noexport="" id=inline-dimension>inline dimension</dfn></dt> 1.3276 + <dd>The dimension parallel to the flow of text within a line, i.e. 1.3277 + the <i>horizontal dimension</i> in horizontal writing modes, and 1.3278 + the <i>vertical dimension</i> in vertical writing modes.</dd> 1.3279 + <dt><dfn data-dfn-type=dfn data-noexport="" id=block-axis>block-axis</dfn></dt> 1.3280 + <dd>The axis in the block dimension, 1.3281 + i.e. the <i>vertical axis</i> in horizontal writing modes 1.3282 + and the <i>horizontal axis</i> in vertical writing modes.</dd> 1.3283 + <dt><dfn data-dfn-type=dfn data-noexport="" id=inline-axis>inline-axis</dfn></dt> 1.3284 + <dd>The axis in the inline dimension, i.e. the <i>horizontal 1.3285 + axis</i> in horizontal writing modes and the <i>vertical axis</i> 1.3286 + in vertical writing modes.</dd> 1.3287 + <dt><dfn data-dfn-type=dfn data-noexport="" id=extent>extent</dfn> or <dfn data-dfn-type=dfn data-noexport="" id=logical-height>logical height</dfn><dt> 1.3288 + <dd>A measurement in the block dimension: refers to the 1.3289 + physical height (vertical dimension) in horizontal writing 1.3290 + modes, and to the physical width (horizontal dimension) in 1.3291 + vertical writing modes.</dd> 1.3292 + <dt><dfn data-dfn-type=dfn data-noexport="" id=measure>measure</dfn> or <dfn data-dfn-type=dfn data-noexport="" id=logical-width>logical width</dfn><dt> 1.3293 + <dd>A measurement in the inline dimension: refers to the 1.3294 + physical width (horizontal dimension) in horizontal writing 1.3295 + modes, and to the physical height (vertical dimension) in 1.3296 + vertical writing modes. (The term <a href=#measure>measure</a> derives 1.3297 + from its <a href=http://en.wikipedia.org/wiki/Measure_%28typography%29>use 1.3298 + in typography</a>.)</dd> 1.3299 </dl> 1.3300 1.3301 - <p>The <dfn id=physical-dimensions>physical dimensions</dfn> are 1.3302 - <i>width</i> and <i>height</i>, which correspond to measurements along the 1.3303 - <i>x-axis</i> (<i>vertical dimension</i>) and <i>y-axis</i> (<i>horizontal 1.3304 - dimension</i>), respectively. <a href="#abstract-dimensions">Abstract 1.3305 - dimensions</a> are identical in both flow-relative and line-relative 1.3306 - terms, so there is only one set of these terms. 1.3307 +<h3 data-level=6.2 id=logical-directions><span class=secno>6.2 </span><span class=content> 1.3308 +Flow-relative Directions</span><a class=section-link href=#logical-directions>§</a></h3> 1.3309 1.3310 - <p class=note> Note: [[CSS-FLEXBOX]] also defines <a 1.3311 - href="http://www.w3.org/TR/css3-flexbox/#box-model">flex-relative 1.3312 - terms</a>, which are used in describing flex layout. 1.3313 - 1.3314 - <h3 id=abstract-dimensions><span class=secno>6.1. </span> Abstract 1.3315 - Dimensions</h3> 1.3316 - 1.3317 - <p>The <dfn id=abstract-dimensions0>abstract dimensions</dfn> are defined 1.3318 - below: 1.3319 + <p>The <dfn data-dfn-type=dfn data-noexport="" id=flow-relative-directions>flow-relative directions</dfn>, 1.3320 + <a href=#block-start>block-start</a>, <a href=#block-end>block-end</a>, <a href=#inline-start>inline-start</a>, and <a href=#inline-end>inline-end</a>, 1.3321 + are defined relative to the flow of content on the page. 1.3322 + In an <abbr title=left-to-right>LTR</abbr> 1.3323 + <a class=css data-link-type=maybe href=#valuedef-horizontal-tb>horizontal-tb</a> writing mode, they correspond to the 1.3324 + top, bottom, left, and right directions, respectively. 1.3325 + They are defined as follows: 1.3326 1.3327 <dl> 1.3328 - <dt><dfn id=block-dimension>block dimension</dfn> 1.3329 - 1.3330 - <dd>The dimension perpendicular to the flow of text within a line, i.e. 1.3331 - the <i>vertical dimension</i> in horizontal writing modes, and the 1.3332 - <i>horizontal dimension</i> in vertical writing modes. 1.3333 - 1.3334 - <dt><dfn id=inline-dimension>inline dimension</dfn> 1.3335 - 1.3336 - <dd>The dimension parallel to the flow of text within a line, i.e. the 1.3337 - <i>horizontal dimension</i> in horizontal writing modes, and the 1.3338 - <i>vertical dimension</i> in vertical writing modes. 1.3339 - 1.3340 - <dt><dfn id=block-axis>block-axis</dfn> 1.3341 - 1.3342 - <dd>The axis in the block dimension, i.e. the <i>vertical axis</i> in 1.3343 - horizontal writing modes and the <i>horizontal axis</i> in vertical 1.3344 - writing modes. 1.3345 - 1.3346 - <dt><dfn id=inline-axis>inline-axis</dfn> 1.3347 - 1.3348 - <dd>The axis in the inline dimension, i.e. the <i>horizontal axis</i> in 1.3349 - horizontal writing modes and the <i>vertical axis</i> in vertical writing 1.3350 - modes. 1.3351 - 1.3352 - <dt><dfn id=extent>extent</dfn> or <dfn id=logical-height>logical 1.3353 - height</dfn> 1.3354 - 1.3355 - <dt> 1.3356 - 1.3357 - <dd>A measurement in the block dimension: refers to the physical height 1.3358 - (vertical dimension) in horizontal writing modes, and to the physical 1.3359 - width (horizontal dimension) in vertical writing modes. 1.3360 - 1.3361 - <dt><dfn id=measure>measure</dfn> or <dfn id=logical-width>logical 1.3362 - width</dfn> 1.3363 - 1.3364 - <dt> 1.3365 - 1.3366 - <dd>A measurement in the inline dimension: refers to the physical width 1.3367 - (horizontal dimension) in horizontal writing modes, and to the physical 1.3368 - height (vertical dimension) in vertical writing modes. (The term <a 1.3369 - href="#measure"><i>measure</i></a> derives from its <a 1.3370 - href="http://en.wikipedia.org/wiki/Measure_%28typography%29">use in 1.3371 - typography</a>.) 1.3372 + <dt><dfn data-dfn-type=dfn data-noexport="" id=block-start>block-start</dfn> 1.3373 + <dd>Nominally the side that comes earlier in the block progression, 1.3374 + as determined by the <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> property: 1.3375 + the physical top in <a class=css data-link-type=maybe href=#valuedef-horizontal-tb>horizontal-tb</a> mode, 1.3376 + the right in <a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a>, and the left in <a class=css data-link-type=maybe href=#valuedef-vertical-lr>vertical-lr</a>. 1.3377 + <dt><dfn data-dfn-type=dfn data-noexport="" id=block-end>block-end</dfn> 1.3378 + <dd>The side opposite <a href=#block-start>block-start</a>. 1.3379 + <dt><dfn data-dfn-type=dfn data-noexport="" id=inline-start>inline-start</dfn> 1.3380 + <dd>Nominally the side from which text of its inline base direction will start. 1.3381 + For boxes with a used <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> value of <a class=css data-link-type=maybe href=#valuedef-ltr>ltr</a>, this means the <a href=#line-left>line-left</a> side. 1.3382 + For boxes with a used <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> value of <a class=css data-link-type=maybe href=#valuedef-rtl>rtl</a>, this means the <a href=#line-right>line-right</a> side. 1.3383 + <dt><dfn data-dfn-type=dfn data-noexport="" id=inline-end>inline-end</dfn> 1.3384 + <dd>The side opposite <a href=#start>start</a>. 1.3385 </dl> 1.3386 1.3387 - <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative 1.3388 - Directions</h3> 1.3389 + <p>Where unambiguous (or dual-meaning), 1.3390 + the terms <dfn data-dfn-type=dfn data-noexport="" id=start>start</dfn> and <dfn data-dfn-type=dfn data-noexport="" id=end>end</dfn> 1.3391 + are used in place of <a href=#block-start>block-start</a>/<a href=#inline-start>inline-start</a> 1.3392 + and <a href=#block-end>block-end</a>/<a href=#inline-end>inline-end</a>, respectively. 1.3393 1.3394 - <p>The <dfn id=flow-relative-directions>flow-relative directions</dfn>, <a 1.3395 - href="#block-start"><i>block-start</i></a>, <a 1.3396 - href="#block-end"><i>block-end</i></a>, <a 1.3397 - href="#inline-start"><i>inline-start</i></a>, and <a 1.3398 - href="#inline-end"><i>inline-end</i></a>, are defined relative to the flow 1.3399 - of content on the page. In an <abbr title=left-to-right>LTR</abbr> ‘<a 1.3400 - href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ writing 1.3401 - mode, they correspond to the top, bottom, left, and right directions, 1.3402 - respectively. They are defined as follows: 1.3403 - 1.3404 - <dl> 1.3405 - <dt><dfn id=block-start>block-start</dfn> 1.3406 - 1.3407 - <dd>Nominally the side that comes earlier in the block progression, as 1.3408 - determined by the ‘<a href="#writing-mode1"><code 1.3409 - class=property>writing-mode</code></a>’ property: the physical top in 1.3410 - ‘<a href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ 1.3411 - mode, the right in ‘<a href="#vertical-rl"><code 1.3412 - class=css>vertical-rl</code></a>’, and the left in ‘<a 1.3413 - href="#vertical-lr"><code class=css>vertical-lr</code></a>’. 1.3414 - 1.3415 - <dt><dfn id=block-end>block-end</dfn> 1.3416 - 1.3417 - <dd>The side opposite <a href="#block-start"><i>block-start</i></a>. 1.3418 - 1.3419 - <dt><dfn id=inline-start>inline-start</dfn> 1.3420 - 1.3421 - <dd>Nominally the side from which text of its inline base direction will 1.3422 - start. For boxes with a used ‘<a href="#direction0"><code 1.3423 - class=property>direction</code></a>’ value of ‘<a href="#ltr"><code 1.3424 - class=css>ltr</code></a>’, this means the <a 1.3425 - href="#line-left"><i>line-left</i></a> side. For boxes with a used ‘<a 1.3426 - href="#direction0"><code class=property>direction</code></a>’ value of 1.3427 - ‘<a href="#rtl"><code class=css>rtl</code></a>’, this means the <a 1.3428 - href="#line-right"><i>line-right</i></a> side. 1.3429 - 1.3430 - <dt><dfn id=inline-end>inline-end</dfn> 1.3431 - 1.3432 - <dd>The side opposite <a href="#start"><i>start</i></a>. 1.3433 - </dl> 1.3434 - 1.3435 - <p>Where unambiguous (or dual-meaning), the terms <dfn id=start>start</dfn> 1.3436 - and <dfn id=end>end</dfn> are used in place of <a 1.3437 - href="#block-start"><i>block-start</i></a>/<a 1.3438 - href="#inline-start"><i>inline-start</i></a> and <a 1.3439 - href="#block-end"><i>block-end</i></a>/<a 1.3440 - href="#inline-end"><i>inline-end</i></a>, respectively. 1.3441 - 1.3442 - <p class=note>Note that while determining the <a 1.3443 - href="#block-start"><i>block-start</i></a> and <a 1.3444 - href="#block-end"><i>block-end</i></a> sides of a box depends only on the 1.3445 - ‘<a href="#writing-mode1"><code 1.3446 - class=property>writing-mode</code></a>’ property, determining the <a 1.3447 - href="#inline-start"><i>inline-start</i></a> and <a 1.3448 - href="#inline-end"><i>inline-end</i></a> sides of a box depends not only 1.3449 - on the ‘<a href="#writing-mode1"><code 1.3450 - class=property>writing-mode</code></a>’ property but also the ‘<a 1.3451 - href="#direction0"><code class=property>direction</code></a>’ 1.3452 - <em>and</em> ‘<a href="#text-orientation0"><code 1.3453 - class=property>text-orientation</code></a>’ properties. 1.3454 + <p class=note>Note that while determining the <a href=#block-start>block-start</a> and 1.3455 + <a href=#block-end>block-end</a> sides of a box depends only on the <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> property, 1.3456 + determining the <a href=#inline-start>inline-start</a> and <a href=#inline-end>inline-end</a> sides of a box depends 1.3457 + not only on the <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> property but also the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> <em>and</em> 1.3458 + <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> properties.</p> 1.3459 1.3460 <div class=example> 1.3461 - <p>An English (LTR-TB) block: 1.3462 + <p>An English (LTR-TB) block:</p> 1.3463 + <pre class=ascii-art> <----- width / measure -----> 1.3464 1.3465 - <pre class=ascii-art> 1.3466 - <----- width / measure -----> 1.3467 + top side/ 1.3468 + block-start side 1.3469 + +------------------------------+ A 1.3470 + left side/ | ---inline direction ---> | right side/ | 1.3471 +inline-start side | | | inline-end side | 1.3472 + | | block * horizontal * | height/ 1.3473 + | | direction *writing mode* | extent 1.3474 + | V | | 1.3475 + +------------------------------+ V 1.3476 + bottom side/ 1.3477 + block-end side 1.3478 +</pre> </div> 1.3479 + <div class=example> 1.3480 + <p>A vertical Japanese block (TTB-RL):</p> 1.3481 + <pre class=ascii-art> <----- width / extent ------> 1.3482 1.3483 - top side/ 1.3484 - block-start side 1.3485 - +------------------------------+ A 1.3486 - left side/ | ---inline direction ---> | right side/ | 1.3487 -inline-start side | | | inline-end side | 1.3488 - | | block * horizontal * | height/ 1.3489 - | | direction *writing mode* | extent 1.3490 - | V | | 1.3491 - +------------------------------+ V 1.3492 - bottom side/ 1.3493 - block-end side 1.3494 - </pre> 1.3495 - </div> 1.3496 + top side/ 1.3497 + inline-start side 1.3498 + +------------------------------+ A 1.3499 + left side/ | <---block direction--- | right side/ | 1.3500 + block-end side | | | block-start side | 1.3501 + | * vertical * inline| | height/ 1.3502 + | *writing mode* direction| | measure 1.3503 + | V | | 1.3504 + +------------------------------+ V 1.3505 + bottom side/ 1.3506 + inline-end side 1.3507 +</pre> </div> 1.3508 1.3509 - <div class=example> 1.3510 - <p>A vertical Japanese block (TTB-RL): 1.3511 +<h3 data-level=6.3 id=line-directions><span class=secno>6.3 </span><span class=content> 1.3512 +Line-relative Directions</span><a class=section-link href=#line-directions>§</a></h3> 1.3513 1.3514 - <pre class=ascii-art> 1.3515 - <----- width / extent ------> 1.3516 + <p>The <dfn data-dfn-type=dfn data-noexport="" id=line-orientation>line orientation</dfn> determines which side of a line 1.3517 + box is the logical “top” (ascender side). It is given by a combination 1.3518 + of <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> and <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a>. Usually the line-relative “top” 1.3519 + corresponds to the <a href=#block-start>block-start</a> side, but this is not always the case: 1.3520 + in Mongolian typesetting (and thus by default in <a class=css data-link-type=maybe href=#valuedef-vertical-lr>vertical-lr</a> writing 1.3521 + modes), the line-relative “top” corresponds to the <a href=#block-end>block-end</a> side. 1.3522 + Hence the need for distinct terminology. 1.3523 1.3524 - top side/ 1.3525 - inline-start side 1.3526 - +------------------------------+ A 1.3527 - left side/ | <---block direction--- | right side/ | 1.3528 - block-end side | | | block-start side | 1.3529 - | * vertical * inline| | height/ 1.3530 - | *writing mode* direction| | measure 1.3531 - | V | | 1.3532 - +------------------------------+ V 1.3533 - bottom side/ 1.3534 - inline-end side 1.3535 - </pre> 1.3536 - </div> 1.3537 - 1.3538 - <h3 id=line-directions><span class=secno>6.3. </span> Line-relative 1.3539 - Directions</h3> 1.3540 - 1.3541 - <p>The <dfn id=line-orientation>line orientation</dfn> determines which 1.3542 - side of a line box is the logical “top” (ascender side). It is given 1.3543 - by a combination of ‘<a href="#text-orientation0"><code 1.3544 - class=property>text-orientation</code></a>’ and ‘<a 1.3545 - href="#writing-mode1"><code class=property>writing-mode</code></a>’. 1.3546 - Usually the line-relative “top” corresponds to the <a 1.3547 - href="#block-start"><i>block-start</i></a> side, but this is not always 1.3548 - the case: in Mongolian typesetting (and thus by default in ‘<a 1.3549 - href="#vertical-lr"><code class=css>vertical-lr</code></a>’ writing 1.3550 - modes), the line-relative “top” corresponds to the <a 1.3551 - href="#block-end"><i>block-end</i></a> side. Hence the need for distinct 1.3552 - terminology. 1.3553 - 1.3554 - <div class=figure> <img alt="Mongolian mixed with English" 1.3555 - src=mongolian-lr.jpg> 1.3556 - <p class=caption>A primarily Mongolian document, such as the one above, is 1.3557 - written in vertical lines stacking left to right, but lays its Latin text 1.3558 - with the tops of the glyphs towards the right. This makes the text run in 1.3559 - the same inline direction as Mongolian (top-to-bottom) and face the same 1.3560 - direction it does in other East Asian layouts (which have vertical lines 1.3561 - stacking right to left), but the glyphs' tops are facing the bottom of 1.3562 - the line stack rather than the top, which in an English paragraph would 1.3563 - be upside-down. (See this <a 1.3564 - href="diagrams/text-flow-vectors-lr-reverse.svg">Diagram of Mongolian 1.3565 + <div class=figure> 1.3566 + <img alt="Mongolian mixed with English" src=mongolian-lr.jpg> 1.3567 + <p class=caption>A primarily Mongolian document, such as the one above, is written in 1.3568 + vertical lines stacking left to right, but lays its Latin text with 1.3569 + the tops of the glyphs towards the right. This makes the text run in 1.3570 + the same inline direction as Mongolian (top-to-bottom) and face the 1.3571 + same direction it does in other East Asian layouts (which have vertical 1.3572 + lines stacking right to left), but the glyphs' tops are facing the 1.3573 + bottom of the line stack rather than the top, which in an English 1.3574 + paragraph would be upside-down. (See this 1.3575 + <a href=diagrams/text-flow-vectors-lr-reverse.svg>Diagram of Mongolian 1.3576 Text Layout</a>.) 1.3577 </div> 1.3578 1.3579 - <p>In addition to a line-relative “top” and “bottom” to map things 1.3580 - like ‘<code class=css>vertical-align: top</code>’, CSS also needs to 1.3581 - refer to a line-relative “left” and “right” in order to map things 1.3582 - like ‘<code class=css>text-align: left</code>’. Thus there are four 1.3583 - <dfn id=line-relative-directions>line-relative directions</dfn>, which are 1.3584 - defined relative to the <a href="#line-orientation"><i>line 1.3585 - orientation</i></a> as follows: 1.3586 + <p>In addition to a line-relative “top” and “bottom” to map things like 1.3587 + 'vertical-align: top', CSS also needs to refer to a line-relative 1.3588 + “left” and “right” in order to map things like <span class=css data-link-type=maybe>text-align: left</span>. 1.3589 + Thus there are four <dfn data-dfn-type=dfn data-noexport="" id=line-relative-directions>line-relative directions</dfn>, which are 1.3590 + defined relative to the <a href=#line-orientation>line orientation</a> as follows: 1.3591 1.3592 <dl> 1.3593 - <dt><dfn id=over>over</dfn> 1.3594 - 1.3595 - <dd>Nominally the side that corresponds to the ascender side or “top” 1.3596 - side of a line box. (The side overlines are typically drawn on.) 1.3597 - 1.3598 - <dt><dfn id=under>under</dfn> 1.3599 - 1.3600 - <dd>Opposite of <a href="#over"><i>over</i></a>: the line-relative 1.3601 - “bottom” or descender side. (The side underlines are typically drawn 1.3602 - on.) 1.3603 - 1.3604 - <dt><dfn id=line-left>line-left</dfn> 1.3605 - 1.3606 - <dd>Nominally the side from which <abbr title=left-to-right>LTR</abbr> 1.3607 + <dt><dfn data-dfn-type=dfn data-noexport="" id=over>over</dfn> 1.3608 + <dd>Nominally the side that corresponds to the ascender side or “top” 1.3609 + side of a line box. (The side overlines are typically drawn on.) 1.3610 + <dt><dfn data-dfn-type=dfn data-noexport="" id=under>under</dfn> 1.3611 + <dd>Opposite of <a href=#over>over</a>: the line-relative “bottom” or descender side. 1.3612 + (The side underlines are typically drawn on.) 1.3613 + <dt><dfn data-dfn-type=dfn data-noexport="" id=line-left>line-left</dfn> 1.3614 + <dd>Nominally the side from which <abbr title=left-to-right>LTR</abbr> 1.3615 text would start. 1.3616 - 1.3617 - <dt><dfn id=line-right>line-right</dfn> 1.3618 - 1.3619 - <dd>Nominally the side from which <abbr title=right-to-left>RTL</abbr> 1.3620 - text would start. (Opposite of <a 1.3621 - href="#line-left"><i>line-left</i></a>.) 1.3622 + <dt><dfn data-dfn-type=dfn data-noexport="" id=line-right>line-right</dfn> 1.3623 + <dd>Nominally the side from which <abbr title=right-to-left>RTL</abbr> 1.3624 + text would start. (Opposite of <a href=#line-left>line-left</a>.) 1.3625 </dl> 1.3626 1.3627 - <p>See the <a href="#logical-to-physical">table below</a> for the exact 1.3628 - mappings between physical and line-relative directions. 1.3629 + <p>See the <a href=#logical-to-physical>table below</a> for the exact 1.3630 + mappings between physical and line-relative directions. 1.3631 1.3632 - <div class=figure> <a href="diagrams/line-orient-up.svg" 1.3633 - type="image/svg+xml"> <img alt="Line orientation compass" class=landscape 1.3634 - src="diagrams/line-orient-up.png"></a> 1.3635 - <p class=caption>Line orientation compass 1.3636 + <div class=figure> 1.3637 + <a href=diagrams/line-orient-up.svg> 1.3638 + <img alt="Line orientation compass" class=landscape src=diagrams/line-orient-up.png></a> 1.3639 + <p class=caption>Line orientation compass</p> 1.3640 </div> 1.3641 1.3642 <div class=figurepair> 1.3643 - <div class=figure> <a href="diagrams/line-orient-right.svg" 1.3644 - type="image/svg+xml"> <img alt="Typical orientation in vertical" 1.3645 - class=portrait src="diagrams/line-orient-right.png"></a> 1.3646 - <p class=caption>Typical orientation in vertical 1.3647 - </div> 1.3648 + <div class=figure> 1.3649 + <a href=diagrams/line-orient-right.svg> 1.3650 + <img alt="Typical orientation in vertical" class=portrait src=diagrams/line-orient-right.png></a> 1.3651 + <p class=caption>Typical orientation in vertical</p> 1.3652 + </div> 1.3653 1.3654 - <div class=figure> <a href="diagrams/line-orient-left.svg" 1.3655 - type="image/svg+xml"> <img 1.3656 - alt="Line orientation with ''text-orientation: sideways-left''" 1.3657 - class=portrait src="diagrams/line-orient-left.png"></a> 1.3658 - <p class=caption>Line orientation with ‘<code 1.3659 - class=css>text-orientation: sideways-left</code>’ 1.3660 - </div> 1.3661 + <div class=figure> 1.3662 + <a href=diagrams/line-orient-left.svg> 1.3663 + <img alt="Line orientation with ‘text-orientation: sideways-left’" class=portrait src=diagrams/line-orient-left.png></a> 1.3664 + <p class=caption>Line orientation with <span class=css data-link-type=maybe>text-orientation: sideways-left</span></p> 1.3665 + </div> 1.3666 </div> 1.3667 1.3668 - <h3 id=logical-to-physical><span class=secno>6.4. </span> 1.3669 - Abstract-to-Physical Mappings</h3> 1.3670 +<h3 data-level=6.4 id=logical-to-physical><span class=secno>6.4 </span><span class=content> 1.3671 +Abstract-to-Physical Mappings</span><a class=section-link href=#logical-to-physical>§</a></h3> 1.3672 1.3673 - <p>The following table summarizes the abstract-to-physical mappings: 1.3674 + <p>The following table summarizes the abstract-to-physical mappings:</p> 1.3675 1.3676 <table class="complex data"> 1.3677 - <caption>Abstract-Physical Mapping</caption> 1.3678 - 1.3679 - <colgroup class=header></colgroup> 1.3680 - 1.3681 - <colgroup span=10></colgroup> 1.3682 - 1.3683 - <thead> 1.3684 - <tr> 1.3685 - <th scope=row>‘<a href="#writing-mode1"><code 1.3686 - class=property>writing-mode</code></a>’ 1.3687 - 1.3688 - <th colspan=2>‘<a href="#horizontal-tb"><code 1.3689 - class=css>horizontal-tb</code></a>’ 1.3690 - 1.3691 - <th colspan=4>‘<a href="#vertical-rl"><code 1.3692 - class=css>vertical-rl</code></a>’ 1.3693 - 1.3694 - <th colspan=4>‘<a href="#vertical-lr"><code 1.3695 - class=css>vertical-lr</code></a>’ 1.3696 - 1.3697 - <tr> 1.3698 - <th scope=row>‘<a href="#text-orientation0"><code 1.3699 - class=property>text-orientation</code></a>’ 1.3700 - 1.3701 - <th colspan=2>— 1.3702 - 1.3703 - <th colspan=2>‘<a href="#sideways-left"><code 1.3704 - class=css>sideways-left</code></a>’ 1.3705 - 1.3706 - <th colspan=2><abbr title="mixed, upright, sideways-right">*right</abbr> 1.3707 - 1.3708 - <th colspan=2>‘<a href="#sideways-left"><code 1.3709 - class=css>sideways-left</code></a>’ 1.3710 - 1.3711 - <th colspan=2><abbr title="mixed, upright, sideways-right">*right</abbr> 1.3712 - 1.3713 - <tr> 1.3714 - <th scope=row>‘<a href="#direction0"><code 1.3715 - class=property>direction</code></a>’ 1.3716 - 1.3717 - <th>‘<a href="#ltr"><code class=css>ltr</code></a>’ 1.3718 - 1.3719 - <th>‘<a href="#rtl"><code class=css>rtl</code></a>’ 1.3720 - 1.3721 - <th>‘<a href="#ltr"><code class=css>ltr</code></a>’ 1.3722 - 1.3723 - <th>‘<a href="#rtl"><code class=css>rtl</code></a>’ 1.3724 - 1.3725 - <th>‘<a href="#ltr"><code class=css>ltr</code></a>’ 1.3726 - 1.3727 - <th>‘<a href="#rtl"><code class=css>rtl</code></a>’ 1.3728 - 1.3729 - <th>‘<a href="#ltr"><code class=css>ltr</code></a>’ 1.3730 - 1.3731 - <th>‘<a href="#rtl"><code class=css>rtl</code></a>’ 1.3732 - 1.3733 - <th>‘<a href="#ltr"><code class=css>ltr</code></a>’ 1.3734 - 1.3735 - <th>‘<a href="#rtl"><code class=css>rtl</code></a>’ 1.3736 - 1.3737 - <tbody> 1.3738 - <tr> 1.3739 - <th scope=row>extent 1.3740 - 1.3741 - <td colspan=2>height 1.3742 - 1.3743 - <td colspan=8>width 1.3744 - 1.3745 - <tr> 1.3746 - <th scope=row>measure 1.3747 - 1.3748 - <td colspan=2>width 1.3749 - 1.3750 - <td colspan=8>height 1.3751 - 1.3752 - <tr> 1.3753 - <th scope=row>block-start 1.3754 - 1.3755 - <td colspan=2>top 1.3756 - 1.3757 - <td colspan=4>right 1.3758 - 1.3759 - <td colspan=4>left 1.3760 - 1.3761 - <tr> 1.3762 - <th scope=row>block-end 1.3763 - 1.3764 - <td colspan=2>bottom 1.3765 - 1.3766 - <td colspan=4>left 1.3767 - 1.3768 - <td colspan=4>right 1.3769 - 1.3770 - <tr> 1.3771 - <th scope=row>inline-start 1.3772 - 1.3773 - <td>left 1.3774 - 1.3775 - <td>right 1.3776 - 1.3777 - <td>bottom 1.3778 - 1.3779 - <td>top 1.3780 - 1.3781 - <td>top 1.3782 - 1.3783 - <td>bottom 1.3784 - 1.3785 - <td>bottom 1.3786 - 1.3787 - <td>top 1.3788 - 1.3789 - <td>top 1.3790 - 1.3791 - <td>bottom 1.3792 - 1.3793 - <tr> 1.3794 - <th scope=row>inline-end 1.3795 - 1.3796 - <td>right 1.3797 - 1.3798 - <td>left 1.3799 - 1.3800 - <td>top 1.3801 - 1.3802 - <td>bottom 1.3803 - 1.3804 - <td>bottom 1.3805 - 1.3806 - <td>top 1.3807 - 1.3808 - <td>top 1.3809 - 1.3810 - <td>bottom 1.3811 - 1.3812 - <td>bottom 1.3813 - 1.3814 - <td>top 1.3815 - 1.3816 - <tbody> 1.3817 - <tr> 1.3818 - <th scope=row>over 1.3819 - 1.3820 - <td colspan=2>top 1.3821 - 1.3822 - <td colspan=2>left 1.3823 - 1.3824 - <td colspan=2>right 1.3825 - 1.3826 - <td colspan=2>left 1.3827 - 1.3828 - <td colspan=2>right 1.3829 - 1.3830 - <tr> 1.3831 - <th scope=row>under 1.3832 - 1.3833 - <td colspan=2>bottom 1.3834 - 1.3835 - <td colspan=2>right 1.3836 - 1.3837 - <td colspan=2>left 1.3838 - 1.3839 - <td colspan=2>right 1.3840 - 1.3841 - <td colspan=2>left 1.3842 - 1.3843 - <tr> 1.3844 - <th scope=row>line-left 1.3845 - 1.3846 - <td colspan=2>left 1.3847 - 1.3848 - <td colspan=2>bottom 1.3849 - 1.3850 - <td colspan=2>top 1.3851 - 1.3852 - <td colspan=2>bottom 1.3853 - 1.3854 - <td colspan=2>top 1.3855 - 1.3856 - <tr> 1.3857 - <th scope=row>line-right 1.3858 - 1.3859 - <td colspan=2>right 1.3860 - 1.3861 - <td colspan=2>top 1.3862 - 1.3863 - <td colspan=2>bottom 1.3864 - 1.3865 - <td colspan=2>top 1.3866 - 1.3867 - <td colspan=2>bottom 1.3868 + <caption>Abstract-Physical Mapping</caption> 1.3869 + <colgroup class=header></colgroup> 1.3870 + <colgroup span=10></colgroup> 1.3871 + <thead> 1.3872 + <tr> 1.3873 + <th scope=row><a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a></th> 1.3874 + <th colspan=2><a class=css data-link-type=maybe href=#valuedef-horizontal-tb>horizontal-tb</a></th> 1.3875 + <th colspan=4><a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a></th> 1.3876 + <th colspan=4><a class=css data-link-type=maybe href=#valuedef-vertical-lr>vertical-lr</a></th> 1.3877 + </tr> 1.3878 + <tr> 1.3879 + <th scope=row><a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a></th> 1.3880 + <th colspan=2>—</th> 1.3881 + <th colspan=2><a class=css data-link-type=maybe href=#valuedef-sideways-left>sideways-left</a></th> 1.3882 + <th colspan=2><abbr title="mixed, upright, sideways-right">*right</abbr></th> 1.3883 + <th colspan=2><a class=css data-link-type=maybe href=#valuedef-sideways-left>sideways-left</a></th> 1.3884 + <th colspan=2><abbr title="mixed, upright, sideways-right">*right</abbr></th> 1.3885 + </tr> 1.3886 + <tr> 1.3887 + <th scope=row><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a></th> 1.3888 + <th><a class=css data-link-type=maybe href=#valuedef-ltr>ltr</a></th> 1.3889 + <th><a class=css data-link-type=maybe href=#valuedef-rtl>rtl</a></th> 1.3890 + <th><a class=css data-link-type=maybe href=#valuedef-ltr>ltr</a></th> 1.3891 + <th><a class=css data-link-type=maybe href=#valuedef-rtl>rtl</a></th> 1.3892 + <th><a class=css data-link-type=maybe href=#valuedef-ltr>ltr</a></th> 1.3893 + <th><a class=css data-link-type=maybe href=#valuedef-rtl>rtl</a></th> 1.3894 + <th><a class=css data-link-type=maybe href=#valuedef-ltr>ltr</a></th> 1.3895 + <th><a class=css data-link-type=maybe href=#valuedef-rtl>rtl</a></th> 1.3896 + <th><a class=css data-link-type=maybe href=#valuedef-ltr>ltr</a></th> 1.3897 + <th><a class=css data-link-type=maybe href=#valuedef-rtl>rtl</a></th> 1.3898 + </tr> 1.3899 + </thead> 1.3900 + <tbody> 1.3901 + <tr> 1.3902 + <th scope=row>extent</th> 1.3903 + <td colspan=2>height</td> 1.3904 + <td colspan=8>width</td> 1.3905 + </tr> 1.3906 + <tr> 1.3907 + <th scope=row>measure</th> 1.3908 + <td colspan=2>width</td> 1.3909 + <td colspan=8>height</td> 1.3910 + </tr> 1.3911 + <tr> 1.3912 + <th scope=row>block-start</th> 1.3913 + <td colspan=2>top</td> 1.3914 + <td colspan=4>right</td> 1.3915 + <td colspan=4>left</td> 1.3916 + </tr> 1.3917 + <tr> 1.3918 + <th scope=row>block-end</th> 1.3919 + <td colspan=2>bottom</td> 1.3920 + <td colspan=4>left</td> 1.3921 + <td colspan=4>right</td> 1.3922 + </tr> 1.3923 + <tr> 1.3924 + <th scope=row>inline-start</th> 1.3925 + <td>left</td> 1.3926 + <td>right</td> 1.3927 + <td>bottom</td> 1.3928 + <td>top</td> 1.3929 + <td>top</td> 1.3930 + <td>bottom</td> 1.3931 + <td>bottom</td> 1.3932 + <td>top</td> 1.3933 + <td>top</td> 1.3934 + <td>bottom</td> 1.3935 + </tr> 1.3936 + <tr> 1.3937 + <th scope=row>inline-end</th> 1.3938 + <td>right</td> 1.3939 + <td>left</td> 1.3940 + <td>top</td> 1.3941 + <td>bottom</td> 1.3942 + <td>bottom</td> 1.3943 + <td>top</td> 1.3944 + <td>top</td> 1.3945 + <td>bottom</td> 1.3946 + <td>bottom</td> 1.3947 + <td>top</td> 1.3948 + </tr> 1.3949 + </tbody> 1.3950 + <tbody> 1.3951 + <tr> 1.3952 + <th scope=row>over</th> 1.3953 + <td colspan=2>top</td> 1.3954 + <td colspan=2>left</td> 1.3955 + <td colspan=2>right</td> 1.3956 + <td colspan=2>left</td> 1.3957 + <td colspan=2>right</td> 1.3958 + </tr> 1.3959 + <tr> 1.3960 + <th scope=row>under</th> 1.3961 + <td colspan=2>bottom</td> 1.3962 + <td colspan=2>right</td> 1.3963 + <td colspan=2>left</td> 1.3964 + <td colspan=2>right</td> 1.3965 + <td colspan=2>left</td> 1.3966 + </tr> 1.3967 + <tr> 1.3968 + <th scope=row>line-left</th> 1.3969 + <td colspan=2>left</td> 1.3970 + <td colspan=2>bottom</td> 1.3971 + <td colspan=2>top</td> 1.3972 + <td colspan=2>bottom</td> 1.3973 + <td colspan=2>top</td> 1.3974 + </tr> 1.3975 + <tr> 1.3976 + <th scope=row>line-right</th> 1.3977 + <td colspan=2>right</td> 1.3978 + <td colspan=2>top</td> 1.3979 + <td colspan=2>bottom</td> 1.3980 + <td colspan=2>top</td> 1.3981 + <td colspan=2>bottom</td> 1.3982 + </tr> 1.3983 + </tbody> 1.3984 </table> 1.3985 1.3986 - <h2 id=abstract-layout><span class=secno>7. </span> Abstract Box Layout</h2> 1.3987 +<h2 data-level=7 id=abstract-layout><span class=secno>7 </span><span class=content> 1.3988 +Abstract Box Layout</span><a class=section-link href=#abstract-layout>§</a></h2> 1.3989 1.3990 - <h3 id=vertical-layout><span class=secno>7.1. </span> Principles of Layout 1.3991 - in Vertical Writing Modes</h3> 1.3992 +<h3 data-level=7.1 id=vertical-layout><span class=secno>7.1 </span><span class=content> 1.3993 +Principles of Layout in Vertical Writing Modes</span><a class=section-link href=#vertical-layout>§</a></h3> 1.3994 1.3995 - <p>CSS box layout in vertical writing modes is analogous to layout in the 1.3996 - horizontal writing modes, following the principles outlined below: 1.3997 + <p>CSS box layout in vertical writing modes is analogous to layout in 1.3998 + the horizontal writing modes, following the principles outlined below: 1.3999 1.4000 - <p>Layout calculation rules (such as those in CSS2.1, Section 10.3) that 1.4001 - apply to the horizontal dimension in horizontal writing modes instead 1.4002 - apply to the vertical dimension in vertical writing modes. Likewise, 1.4003 - layout calculation rules (such as those in CSS2.1, Section 10.6) that 1.4004 - apply to the vertical dimension in horizontal writing modes instead apply 1.4005 - to the horizontal dimension in vertical writing modes. Thus: 1.4006 - 1.4007 + <p>Layout calculation rules (such as those in CSS2.1, Section 10.3) 1.4008 + that apply to the horizontal dimension in horizontal writing modes 1.4009 + instead apply to the vertical dimension in vertical writing modes. 1.4010 + Likewise, layout calculation rules (such as those in CSS2.1, Section 10.6) 1.4011 + that apply to the vertical dimension in horizontal writing modes 1.4012 + instead apply to the horizontal dimension in vertical writing modes. 1.4013 + Thus: 1.4014 <ul> 1.4015 - <li> 1.4016 - <p>Layout rules that refer to the width use the height instead, and vice 1.4017 - versa. 1.4018 - 1.4019 - <li> 1.4020 - <p>Layout rules that refer to the ‘<code class=css>*-left</code>’ and 1.4021 - ‘<code class=css>*-right</code>’ box properties (border, margin, 1.4022 - padding) use ‘<code class=css>*-top</code>’ and ‘<code 1.4023 - class=css>*-bottom</code>’ instead, and vice versa. Which side of the 1.4024 - box the property applies to doesn't change: only which values are inputs 1.4025 - to which layout calculations changes. The ‘<code 1.4026 - class=property>margin-left</code>’ property still affects the lefthand 1.4027 - margin, for example; however in a ‘<a href="#vertical-rl"><code 1.4028 - class=css>vertical-rl</code></a>’ writing mode it takes part in margin 1.4029 - collapsing in place of ‘<code class=property>margin-bottom</code>’. 1.4030 - 1.4031 - <li> 1.4032 - <p>Layout rules that depend on the ‘<a href="#direction0"><code 1.4033 - class=property>direction</code></a>’ property to choose between left 1.4034 - and right (e.g. overflow, overconstraint resolution, the initial value 1.4035 - for ‘<code class=property>text-align</code>’, table column ordering) 1.4036 - are abstracted to the <a href="#start"><i>start</i></a> and <a 1.4037 - href="#end"><i>end</i></a> sides and applied appropriately. 1.4038 + <li><p>Layout rules that refer to the width use the height instead, 1.4039 + and vice versa. 1.4040 + <li><p>Layout rules that refer to the <a class=property data-link-type=propdesc title=*-left>*-left</a> and <a class=property data-link-type=propdesc title=*-right>*-right</a> box 1.4041 + properties (border, margin, padding) use <a class=property data-link-type=propdesc title=*-top>*-top</a> and <a class=property data-link-type=propdesc title=*-bottom>*-bottom</a> 1.4042 + instead, and vice versa. Which side of the 1.4043 + box the property applies to doesn't change: only which values 1.4044 + are inputs to which layout calculations changes. The <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/box.html#propdef-margin-left title=margin-left>margin-left</a> 1.4045 + property still affects the lefthand margin, for example; however 1.4046 + in a <a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a> writing mode it takes part in margin collapsing 1.4047 + in place of <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom title=margin-bottom>margin-bottom</a>.</p> 1.4048 + <li><p>Layout rules that depend on the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> property to choose between 1.4049 + left and right (e.g. overflow, overconstraint resolution, the initial 1.4050 + value for <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-3/#text-align0 title=text-align>text-align</a>, table column ordering) 1.4051 + are abstracted to the <a href=#start>start</a> and <a href=#end>end</a> sides 1.4052 + and applied appropriately.</li> 1.4053 </ul> 1.4054 1.4055 <div class=example> 1.4056 - <p>For example, in vertical writing modes, table rows are vertical and 1.4057 - table columns are horizontal. In a ‘<a href="#vertical-rl"><code 1.4058 - class=css>vertical-rl</code></a>’ ‘<a href="#mixed"><code 1.4059 - class=css>mixed</code></a>’ ‘<a href="#rtl"><code 1.4060 - class=css>rtl</code></a>’ table, the first column would be on the 1.4061 - bottom (the <a href="#inline-start"><i>inline-start</i></a> side), and 1.4062 - the first row on the right (the <a 1.4063 - href="#block-start"><i>block-start</i></a> side). The table's ‘<code 1.4064 - class=property>margin-right</code>’ and ‘<code 1.4065 - class=property>margin-left</code>’ would collapse with margins before 1.4066 - (on the right) and after (on the left) the table, respectively, and if 1.4067 - the table had ‘<code class=css>auto</code>’ values for ‘<code 1.4068 - class=property>margin-top</code>’ and ‘<code 1.4069 - class=property>margin-bottom</code>’ it would be centered vertically 1.4070 - within its block flow. 1.4071 + <p>For example, in vertical writing modes, 1.4072 + table rows are vertical and table columns are horizontal. 1.4073 + In a <a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a> <a class=css data-link-type=maybe href=#valuedef-mixed>mixed</a> <a class=css data-link-type=maybe href=#valuedef-rtl>rtl</a> table, 1.4074 + the first column would be on the bottom (the <a href=#inline-start>inline-start</a> side), 1.4075 + and the first row on the right (the <a href=#block-start>block-start</a> side). 1.4076 + The table's <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/box.html#propdef-margin-right title=margin-right>margin-right</a> and <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/box.html#propdef-margin-left title=margin-left>margin-left</a> would collapse 1.4077 + with margins before (on the right) and after (on the left) the table, respectively, 1.4078 + and if the table had <span class=css data-link-type=maybe>auto</span> values for <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/box.html#propdef-margin-top title=margin-top>margin-top</a> and <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom title=margin-bottom>margin-bottom</a> 1.4079 + it would be centered vertically within its block flow. 1.4080 + <div class=figure> 1.4081 + <p><a href=diagrams/vertical-table.svg> 1.4082 + <img alt="Diagram of a vertical-rl mixed rtl table in a 1.4083 + vertical block formatting context, showing the ordering of rows, 1.4084 + cells, and columns as described above." class=example src=diagrams/vertical-table.png></a> 1.4085 + <p class=caption>Table in <a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a> RTL writing mode</p> 1.4086 + </div> 1.4087 1.4088 - <div class=figure> 1.4089 - <p><a href="diagrams/vertical-table.svg" type="image/svg+xml"> <img 1.4090 - alt="Diagram of a vertical-rl mixed rtl table in a vertical block formatting context, showing the ordering of rows, cells, and columns as described above." 1.4091 - class=example src="diagrams/vertical-table.png"></a> 1.4092 - 1.4093 - <p class=caption>Table in ‘<a href="#vertical-rl"><code 1.4094 - class=css>vertical-rl</code></a>’ RTL writing mode 1.4095 - </div> 1.4096 </div> 1.4097 1.4098 - <p>For features such as text alignment, floating, and list marker 1.4099 - positioning, that primarily reference the left or right sides of the line 1.4100 - box or its longitudinal parallels and therefore have no top or bottom 1.4101 - equivalent, the <a href="#line-left">line left</a> and <a 1.4102 - href="#line-right">line right</a> sides are used as the reference for the 1.4103 - left and right sides respectively. 1.4104 + <p>For features such as text alignment, floating, and list marker positioning, 1.4105 + that primarily reference the left or right sides of the line box or 1.4106 + its longitudinal parallels and therefore have no top or bottom equivalent, 1.4107 + the <a href=#line-left>line left</a> and <a href=#line-right>line 1.4108 + right</a> sides are used as the reference for the left and right sides 1.4109 + respectively. 1.4110 1.4111 - <p>Likewise for features such as underlining, overlining, and baseline 1.4112 - alignment (the unfortunately-named ‘<code 1.4113 - class=property>vertical-align</code>’), that primarily reference the top 1.4114 - or bottom sides of the linebox or its transversal parallels and therefore 1.4115 - have no left or right equivalent, the <a href="#over">over</a> and <a 1.4116 - href="#under">under</a> sides are used as the reference for the top and 1.4117 - bottom sides respectively. 1.4118 + <p>Likewise for features such as underlining, overlining, and baseline alignment 1.4119 + (the unfortunately-named <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align title=vertical-align>vertical-align</a>), that primarily reference the 1.4120 + top or bottom sides of the linebox or its transversal parallels and 1.4121 + therefore have no left or right equivalent, the <a href=#over>over</a> 1.4122 + and <a href=#under>under</a> sides are used as the reference for the 1.4123 + top and bottom sides respectively. 1.4124 1.4125 <p>The details of these mappings are provided below. 1.4126 1.4127 - <h3 id=dimension-mapping><span class=secno>7.2. </span> Dimensional Mapping</h3> 1.4128 - <!-- 1.4129 +<h3 data-level=7.2 id=dimension-mapping><span class=secno>7.2 </span><span class=content> 1.4130 +Dimensional Mapping</span><a class=section-link href=#dimension-mapping>§</a></h3> 1.4131 + 1.4132 +<!-- 1.4133 <p>Properties that are named in terms of the x and y axes are 1.4134 logical with respect to the block flow direction rather than absolute 1.4135 with respect to the page. Specifically: 1.4136 1.4137 - <ul> 1.4138 - <li>The ''repeat-x'' keyword of 'background-repeat' tiles in the 1.4139 +<p> <ul> 1.4140 + <li>The <span data-link-type="maybe" class="css">repeat-x</span> keyword of 'background-repeat' tiles in the 1.4141 inline dimension of the element, which is not necessarily the 1.4142 horizontal dimension. [[!CSS21]] [[!CSS3BG]] 1.4143 - <li>The ''repeat-y'' keyword of 'background-repeat' tiles in the 1.4144 + <li>The <span data-link-type="maybe" class="css">repeat-y</span> keyword of 'background-repeat' tiles in the 1.4145 block flow dimension of the element, which is not necessarily 1.4146 the vertical dimension. [[!CSS21]] [[!CSS3BG]] 1.4147 <li>The 'overflow-x' property controls overflow in the inline 1.4148 @@ -2665,456 +1759,374 @@ 1.4149 --> 1.4150 1.4151 <p>Certain properties behave logically as follows: 1.4152 - 1.4153 <ul> 1.4154 - <li>The first and second values of the ‘<code 1.4155 - class=property>border-spacing</code>’ property represent spacing 1.4156 - between columns and rows respectively, not necessarily the horizontal and 1.4157 - vertical spacing respectively. <a href="#CSS21" 1.4158 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.4159 - 1.4160 - <li>The ‘<code class=property>line-height</code>’ property always 1.4161 - refers to the logical height. <a href="#CSS21" 1.4162 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.4163 + <li>The first and second values of the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing title=border-spacing>border-spacing</a> property 1.4164 + represent spacing between columns and rows respectively, not 1.4165 + necessarily the horizontal and vertical spacing respectively. 1.4166 + <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4167 + <li>The <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height title=line-height>line-height</a> property always refers to the logical 1.4168 + height. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4169 </ul> 1.4170 1.4171 - <p>The height properties (‘<code class=property>height</code>’, 1.4172 - ‘<code class=property>min-height</code>’, and ‘<code 1.4173 - class=property>max-height</code>’) refer to the physical height, and the 1.4174 - width properties (‘<code class=property>width</code>’, ‘<code 1.4175 - class=property>min-width</code>’, and ‘<code 1.4176 - class=property>max-width</code>’) refer to the physical width. However, 1.4177 - the rules used to calculate box dimensions and positions are logical. 1.4178 + <p>The height properties (<a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-height title=height>height</a>, <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height title=min-height>min-height</a>, and <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-max-height title=max-height>max-height</a>) 1.4179 + refer to the physical height, and the width properties (<a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-width title=width>width</a>, 1.4180 + <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width title=min-width>min-width</a>, and <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-max-width title=max-width>max-width</a>) refer to the physical width. However, 1.4181 + the rules used to calculate box dimensions and positions are logical. 1.4182 1.4183 - <p>For example, the calculation rules in <a 1.4184 - href="http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins">CSS2.1 1.4185 - Section 10.3</a> are used for the inline dimension measurements: they 1.4186 - apply to the measure (which could be either the physical width or physical 1.4187 - height) and to the <a href="#inline-start"><i>inline-start</i></a> and <a 1.4188 - href="#inline-end"><i>inline-end</i></a> margins, padding, and border. 1.4189 - Likewise the calculation rules in <a 1.4190 - href="http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins">CSS2.1 1.4191 - Section 10.6</a> are used in the block dimension: they apply to the <a 1.4192 - href="#extent"><i>extent</i></a> and to the <a 1.4193 - href="#block-start"><i>block-start</i></a> and <a 1.4194 - href="#block-end"><i>block-end</i></a> margins, padding, and border. <a 1.4195 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.4196 + <p>For example, the calculation rules in 1.4197 + <a href=http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins>CSS2.1 Section 10.3</a> 1.4198 + are used for the inline dimension measurements: 1.4199 + they apply to the measure (which could be either the physical width or physical height) 1.4200 + and to the <a href=#inline-start>inline-start</a> and <a href=#inline-end>inline-end</a> margins, padding, and border. 1.4201 + Likewise the calculation rules in 1.4202 + <a href=http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins>CSS2.1 Section 10.6</a> 1.4203 + are used in the block dimension: they apply to the <a href=#extent>extent</a> and to 1.4204 + the <a href=#block-start>block-start</a> and <a href=#block-end>block-end</a> margins, padding, and border. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4205 1.4206 - <p>As a corollary, percentages on the margin and padding properties, which 1.4207 - are always calculated with respect to the containing block width in 1.4208 - CSS2.1, are calculated with respect to the <a 1.4209 - href="#measure"><em>measure</em></a> of the containing block in CSS3. 1.4210 + <p>As a corollary, percentages on the margin and padding properties, 1.4211 + which are always calculated with respect to the containing block 1.4212 + width in CSS2.1, are calculated with respect to the <em>measure</em> 1.4213 + of the containing block in CSS3. 1.4214 1.4215 - <h3 id=orthogonal-flows><span class=secno>7.3. </span> Orthogonal Flows</h3> 1.4216 +<h3 data-level=7.3 id=orthogonal-flows><span class=secno>7.3 </span><span class=content> 1.4217 +Orthogonal Flows</span><a class=section-link href=#orthogonal-flows>§</a></h3> 1.4218 1.4219 - <p>When an element has a different ‘<a href="#writing-mode1"><code 1.4220 - class=property>writing-mode</code></a>’ from its containing block two 1.4221 - cases are possible: 1.4222 + <p>When an element has a different <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> from its 1.4223 + containing block two cases are possible: 1.4224 1.4225 - <ul> 1.4226 - <li>The two writing modes are parallel to each other. (For example, ‘<a 1.4227 - href="#vertical-rl"><code class=css>vertical-rl</code></a>’ and ‘<a 1.4228 - href="#vertical-lr"><code class=css>vertical-lr</code></a>’). 1.4229 - 1.4230 - <li>The two writing modes are perpendicular to each other. (For example, 1.4231 - ‘<a href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ 1.4232 - and ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’). 1.4233 +<p> <ul> 1.4234 + <li>The two writing modes are parallel to each other. (For example, 1.4235 + <a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a> and <a class=css data-link-type=maybe href=#valuedef-vertical-lr>vertical-lr</a>).</li> 1.4236 + <li>The two writing modes are perpendicular to each other. (For 1.4237 + example, <a class=css data-link-type=maybe href=#valuedef-horizontal-tb>horizontal-tb</a> and <a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a>).</li> 1.4238 </ul> 1.4239 1.4240 - <p> When an element has a writing mode that is perpendicular to its 1.4241 - containing block it is said to be in, or establish, an <dfn 1.4242 - id=orthogonal-flow 1.4243 - title="establish an orthogonal flow | orthogonal flow">orthogonal 1.4244 - flow</dfn>. 1.4245 + <p> 1.4246 + When an element has a writing mode that is perpendicular to its containing block 1.4247 + it is said to be in, or establish, an <dfn data-dfn-type=dfn data-noexport="" id=orthogonal-flow title="establish an orthogonal flow | orthogonal flow">orthogonal flow</dfn>. 1.4248 1.4249 - <p> To handle this case, CSS layout calculations are divided into two 1.4250 - phases: sizing a box, and positioning the box within its flow. 1.4251 + <p> 1.4252 + To handle this case, CSS layout calculations are divided into 1.4253 + two phases: sizing a box, and positioning the box within its flow. 1.4254 1.4255 - <ul> 1.4256 - <li> In the sizing phase—calculating the width and height of the 1.4257 - box—the dimensions of the box and the containing block are mapped to 1.4258 - the measure and extent and calculations are performed accordingly using 1.4259 - the writing mode of the <em>element</em>. 1.4260 - 1.4261 - <li> In the positioning phase—calculating the positioning offsets, 1.4262 - margins, borders, and padding—the dimensions of the box and its 1.4263 - containing block are mapped to the measure and extent and calculations 1.4264 - are performed according to the writing mode of the <em>containing 1.4265 - block</em>. 1.4266 +<p> <ul> 1.4267 + <li> 1.4268 + In the sizing phase—calculating the width and height of the 1.4269 + box—the dimensions of the box and the containing block 1.4270 + are mapped to the measure and extent and calculations are performed 1.4271 + accordingly using the writing mode of the <em>element</em>. 1.4272 + <li> 1.4273 + In the positioning phase—calculating the positioning offsets, 1.4274 + margins, borders, and padding—the dimensions of the box and 1.4275 + its containing block are mapped to the measure and extent and 1.4276 + calculations are performed according to the writing mode of the 1.4277 + <em>containing block</em>. 1.4278 </ul> 1.4279 1.4280 - <p>Since ‘<code class=css>auto</code>’ margins are resolved consistent 1.4281 - with the containing block's writing mode, a box establishing an <a 1.4282 - href="#orthogonal-flow"><i>orthogonal flow</i></a> can, once sized, be 1.4283 - aligned or centered within its containing block just like other 1.4284 - block-level elements by using auto margins. 1.4285 + <p>Since <span class=css data-link-type=maybe>auto</span> margins are resolved consistent with the containing 1.4286 + block's writing mode, a box establishing an <a href=#orthogonal-flow>orthogonal flow</a> can, 1.4287 + once sized, be aligned or centered within its containing block just 1.4288 + like other block-level elements by using auto margins. 1.4289 1.4290 <div class=example> 1.4291 - <p> For example, if a vertical block is placed inside a horizontal block, 1.4292 - then when calculating the physical height (which is the measure) of the 1.4293 - child block the physical height of the parent block is used as the 1.4294 - child's containing block measure, even though the physical height is the 1.4295 - extent, not the measure, of the parent block. 1.4296 + <p> 1.4297 + For example, if a vertical block is placed inside a horizontal 1.4298 + block, then when calculating the physical height (which is the 1.4299 + measure) of the child block the physical height of the parent 1.4300 + block is used as the child's containing block measure, even 1.4301 + though the physical height is the extent, not the measure, of 1.4302 + the parent block. 1.4303 1.4304 - <p> On the other hand, because the containing block is in a horizontal 1.4305 - writing mode, the vertical margins on the child participate in 1.4306 - margin-collapsing, even though they are in the inline-axis of the child, 1.4307 - and horizontal auto margins will expand to fill the containing block, 1.4308 - even though they are in the block-axis of the child. 1.4309 + <p> 1.4310 + On the other hand, 1.4311 + because the containing block is in a horizontal writing mode, 1.4312 + the vertical margins on the child participate in margin-collapsing, 1.4313 + even though they are in the inline-axis of the child, 1.4314 + and horizontal auto margins will expand to fill the containing block, 1.4315 + even though they are in the block-axis of the child. 1.4316 1.4317 - <p class=issue> Add a picture. 1.4318 + <p class=issue> 1.4319 + Add a picture. 1.4320 </div> 1.4321 1.4322 - <p>It is common in CSS for a containing block to have a definite measure, 1.4323 - but not a definite extent. This typically happens in CSS2.1 when a 1.4324 - containing block has an ‘<code class=css>auto</code>’ height, for 1.4325 - example: its width is given by the calculations in <a 1.4326 - href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>, but 1.4327 - its extent depends on its contents. In such cases the <i>available 1.4328 - measure</i> is defined as the measure of the containing block; but the 1.4329 - <i>available extent</i>, which would otherwise be the extent of the 1.4330 - containing block, is infinite. 1.4331 1.4332 - <p>Putting a box in an <a href="#orthogonal-flow"><i>orthogonal 1.4333 - flow</i></a> allows the opposite to happen: for the <i>available 1.4334 - extent</i> to be defined, but the <i>available measure</i> to be 1.4335 - indefinite. In such cases a percentage of the containing block measure 1.4336 - cannot be defined, and inline-axis computations cannot be resolved. In 1.4337 - these cases, the initial containing block's size is used as a 1.4338 - <i>fallback</i> variable in place of the <i>available measure</i> for 1.4339 - calculations that require a definite <i>available measure</i>. 1.4340 +<h4 data-level=7.3.1 id=orthogonal-auto><span class=secno>7.3.1 </span><span class=content> 1.4341 +Auto-sizing in Orthogonal Flows</span><a class=section-link href=#orthogonal-auto>§</a></h4> 1.4342 1.4343 - <h4 id=orthogonal-auto><span class=secno>7.3.1. </span> Auto-sizing in 1.4344 - Orthogonal Flows</h4> 1.4345 + <p>It is common in CSS for a containing block to have a definite 1.4346 + measure, but not a definite extent. This typically happens in 1.4347 + CSS2.1 when a containing block has an <span class=css data-link-type=maybe>auto</span> height, for 1.4348 + example: its width is given by the calculations in 1.4349 + <a href=http://www.w3.org/TR/CSS21/visudet.html#blockwidth>10.3.3</a>, 1.4350 + but its extent depends on its contents. In such cases the 1.4351 + <i>available measure</i> is defined as the measure of the 1.4352 + containing block; but the <i>available extent</i>, which 1.4353 + would otherwise be the extent of the containing block, is 1.4354 + infinite. 1.4355 + 1.4356 + <p>Putting a box in an <a href=#orthogonal-flow>orthogonal flow</a> allows the opposite to happen: 1.4357 + for the <i>available extent</i> to be defined, but the <i>available 1.4358 + measure</i> to be indefinite. In such cases a percentage of the 1.4359 + containing block measure cannot be defined, and inline-axis 1.4360 + computations cannot be resolved. In these cases, the initial 1.4361 + containing block's size is used as a <i>fallback</i> variable 1.4362 + in place of the <i>available measure</i> for calculations that 1.4363 + require a definite <i>available measure</i>. 1.4364 1.4365 - <p class=issue> This section needs careful review for whether it is a) 1.4366 - correct and b) sensible. 1.4367 + <p class=issue> 1.4368 + This section needs careful review for whether it is a) correct and b) sensible. 1.4369 1.4370 - <p> If the UA does not support CSS Multi-column Layout <a href="#CSS3COL" 1.4371 - rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> and the element is a 1.4372 - block container, when the computed measure of the element establishing an 1.4373 - orthogonal flow is ‘<code class=css>auto</code>’, then the used inner 1.4374 - measure is calculated as: 1.4375 +<h4 data-level=7.3.2 id=auto-formula><span class=secno>7.3.2 </span><span class=content> 1.4376 +Auto-measure formula for orthogonal flows</span><a class=section-link href=#auto-formula>§</a></h4> 1.4377 1.4378 - <p> <code>min(<var>max-content</var>, max(<var>min-content</var>, 1.4379 - min(<var>fill-available</var>, <var>fill-fallback</var>)))</code>, where: 1.4380 + <p> 1.4381 + If the UA does not support CSS Multi-column Layout <a data-biblio-type=normative data-link-type=biblio href=#css3col title=CSS3COL>[CSS3COL]</a> 1.4382 + and the element is a block container, 1.4383 + when the computed measure of the element establishing an orthogonal flow is <span class=css data-link-type=maybe>auto</span>, 1.4384 + then the used inner measure is calculated as: 1.4385 + 1.4386 + <p> 1.4387 + <code>min(<var>max-content</var>, max(<var>min-content</var>, min(<var>fill-available</var>, <var>fill-fallback</var>)))</code>, 1.4388 + where: 1.4389 1.4390 <dl> 1.4391 - <dt><var>min-content</var> 1.4392 + <dt><var>min-content</var> 1.4393 + <dd>the <a href=http://www.w3.org/TR/css3-sizing/#min-content-measure>min-content measure</a> of the element 1.4394 1.4395 - <dd>the <a 1.4396 - href="http://www.w3.org/TR/css3-sizing/#min-content-measure">min-content 1.4397 - measure</a> of the element 1.4398 + <dt><var>max-content</var> 1.4399 + <dd>the <a href=http://www.w3.org/TR/css3-sizing/#max-content-measure>max-content measure</a> of the element 1.4400 1.4401 - <dt><var>max-content</var> 1.4402 + <dt><var>fill-available</var> 1.4403 + <dd>the <a href=http://www.w3.org/TR/css3-sizing/#fill-available-fit>fill-available fit</a> into the element's containing block's size in the element's inline axis 1.4404 1.4405 - <dd>the <a 1.4406 - href="http://www.w3.org/TR/css3-sizing/#max-content-measure">max-content 1.4407 - measure</a> of the element 1.4408 - 1.4409 - <dt><var>fill-available</var> 1.4410 - 1.4411 - <dd>the <a 1.4412 - href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available 1.4413 - fit</a> into the element's containing block's size in the element's 1.4414 - inline axis 1.4415 - 1.4416 - <dt><var>fill-fallback</var> 1.4417 - 1.4418 - <dd>the <a 1.4419 - href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available 1.4420 - fit</a> into the initial containing block's size in the element's inline 1.4421 - axis 1.4422 + <dt><var>fill-fallback</var> 1.4423 + <dd>the <a href=http://www.w3.org/TR/css3-sizing/#fill-available-fit>fill-available fit</a> into the initial containing block's size in the element's inline axis 1.4424 </dl> 1.4425 1.4426 - <p> See <a href="#CSS3-SIZING" 1.4427 - rel=biblioentry>[CSS3-SIZING]<!--{{!CSS3-SIZING}}--></a> for further 1.4428 - details. 1.4429 + <p> 1.4430 + See <a data-biblio-type=normative data-link-type=biblio href=#css3-sizing title=CSS3-SIZING>[CSS3-SIZING]</a> for further details. 1.4431 1.4432 - <h4 id=orthogonal-multicol><span class=secno>7.3.2. </span> Multi-column 1.4433 - Layout in Orthogonal Flows</h4> 1.4434 +<h4 data-level=7.3.3 id=auto-multicol><span class=secno>7.3.3 </span><span class=content> 1.4435 +Automatic Multi-column Layout in Orthogonal Flows</span><a class=section-link href=#auto-multicol>§</a></h4> 1.4436 1.4437 - <p> If the UA supports CSS Multi-column Layout <a href="#CSS3COL" 1.4438 - rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> and the element is a 1.4439 - block container or multi-column element, for the case where the element's 1.4440 - extent or available extent is <i>definite</i> but the element's measure is 1.4441 - ‘<code class=css>auto</code>’: 1.4442 + <p> 1.4443 + If the UA supports CSS Multi-column Layout <a data-biblio-type=normative data-link-type=biblio href=#css3col title=CSS3COL>[CSS3COL]</a> 1.4444 + and the element is a block container or multi-column element, 1.4445 + for the case where the element's extent or available extent is 1.4446 + <i>definite</i> but the element's measure is <span class=css data-link-type=maybe>auto</span>: 1.4447 1.4448 <ol> 1.4449 - <li> If ‘<code class=property>column-count</code>’ and ‘<code 1.4450 - class=property>column-width</code>’ are both ‘<code 1.4451 - class=css>auto</code>’, calculate the used ‘<code 1.4452 - class=property>column-width</code>’ as the inner measure for ‘<code 1.4453 - class=css>auto</code>’-sized elements, as defined above. 1.4454 - 1.4455 - <li> If the columns' extent is <i>indefinite</i>, the <i>fill-available 1.4456 - extent</i> of the element is used. 1.4457 - 1.4458 - <li> The used ‘<code class=property>column-count</code>’ then follows 1.4459 - from filling the resulting columns with the element's content. 1.4460 + <li> 1.4461 + If <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#column-count title=column-count>column-count</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#column-width title=column-width>column-width</a> are both <span class=css data-link-type=maybe>auto</span>, 1.4462 + calculate the used <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#column-width title=column-width>column-width</a> as 1.4463 + the inner measure for <span class=css data-link-type=maybe>auto</span>-sized elements, as defined above. 1.4464 + <li> 1.4465 + If the columns' extent is <i>indefinite</i>, 1.4466 + the <i>fill-available extent</i> of the element is used. 1.4467 + <li> 1.4468 + The used <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#column-count title=column-count>column-count</a> then follows from filling the resulting columns with the element's content. 1.4469 </ol> 1.4470 1.4471 - <p> The used measure of the resulting multi-column element is then 1.4472 - calculated: if the content neither line-wraps nor fragments within the 1.4473 - multi-column element, then the used measure is the <i>max-content 1.4474 - measure</i> of the element's contents; else it is calculated from the used 1.4475 - ‘<code class=property>column-width</code>’, ‘<code 1.4476 - class=property>column-count</code>’, and ‘<code 1.4477 - class=property>column-gap</code>’. 1.4478 + <p> 1.4479 + The used measure of the resulting multi-column element is then calculated: 1.4480 + if the content neither line-wraps nor fragments within the multi-column element, 1.4481 + then the used measure is the <i>max-content measure</i> of the element's contents; 1.4482 + else it is calculated from the used <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#column-width title=column-width>column-width</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#column-count title=column-count>column-count</a>, and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-multicol-1/#column-gap0 title=column-gap>column-gap</a>. 1.4483 1.4484 - <p> The used extent of the element is either the used column extent (if 1.4485 - multiple columns were used) or the <i>max-content extent</i> of the 1.4486 - content. 1.4487 + <p> 1.4488 + The used extent of the element is either the used column extent 1.4489 + (if multiple columns were used) 1.4490 + or the <i>max-content extent</i> of the content. 1.4491 1.4492 <p class=note>This should behave the same as the auto-sizing algorithm 1.4493 - defined in the previous section, except overflowing content, instead of 1.4494 - continuing off the side of the containing block, is wrapped into columns 1.4495 - in the flow direction of the containing block, thus avoiding T-shaped 1.4496 - documents. 1.4497 + defined in the previous section, except overflowing content, instead of 1.4498 + continuing off the side of the containing block, is wrapped into 1.4499 + columns in the flow direction of the containing block, thus avoiding 1.4500 + T-shaped documents.</p> 1.4501 1.4502 - <h4 id=orthogonal-pagination><span class=secno>7.3.3. </span> Fragmenting 1.4503 - Orthogonal Flows</h4> 1.4504 1.4505 - <p><em>This section is informative.</em> 1.4506 +<h4 data-level=7.3.4 id=orthogonal-layout><span class=secno>7.3.4 </span><span class=content> 1.4507 +Auto-sizing Orthogonal Flows</span><a class=section-link href=#orthogonal-layout>§</a></h4> 1.4508 + 1.4509 + <p>In order to limit the length of lines, 1.4510 + block containers have special auto-sizing behavior 1.4511 + when their <i>available measure</i> is infinite 1.4512 + (which typically occurs when they establish an orthogonal flow). 1.4513 + 1.4514 + <p>Other layout models simply shrink-wrap (as floats do) into the infinite <i>available measure</i>; 1.4515 + but pass through the infinite limit to block containers they contain: 1.4516 + 1.4517 +<p> <ul> 1.4518 + <li>A table or flex container establishing an orthogonal flow is laid out into the given <i>available space</i>. 1.4519 + If the <i>available measure</i> is infinite, this effectively lays the element out at its max-content size. 1.4520 + However, any table cells or <i>flex items</i> that are <i>block containers</i> are laid out assuming infinite <i>available space</i> 1.4521 + and so behave accordingly, possibly limiting their <a href=#measure>measure</a> to the size of the initial containing block 1.4522 + or triggering multi-column layout so that they grow in the direction of the infinite measure. 1.4523 + </ul> 1.4524 + 1.4525 + 1.4526 +<h4 data-level=7.3.5 id=orthogonal-pagination><span class=secno>7.3.5 </span><span class=content> 1.4527 +Fragmenting Orthogonal Flows</span><a class=section-link href=#orthogonal-pagination>§</a></h4> 1.4528 + 1.4529 + <p><em>This section is informative.</em></p> 1.4530 1.4531 <p>With regards to fragmentation, the rules in CSS2.1 still hold in 1.4532 - vertical writing modes and orthogonal flows: break opportunities do not 1.4533 - occur inside line boxes, only between them. UAs that support <a 1.4534 - href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> may break 1.4535 - in the (potentially zero-width) gap between columns, however. 1.4536 + vertical writing modes and orthogonal flows: break opportunities 1.4537 + do not occur inside line boxes, only between them. 1.4538 + UAs that support <a data-biblio-type=normative data-link-type=biblio href=#css3col title=CSS3COL>[CSS3COL]</a> may break in the (potentially zero-width) 1.4539 + gap between columns, however. 1.4540 1.4541 - <p>Note that if content spills outside the pagination stream established by 1.4542 - the root element, the UA is not required to print such content. Authors 1.4543 - wishing to mix writing modes with long streams of text are thus encouraged 1.4544 - to use CSS columns to keep all content flowing in the document's 1.4545 - pagination direction. 1.4546 + <p>Note that if content spills outside the pagination stream 1.4547 + established by the root element, the UA is not required to print 1.4548 + such content. Authors wishing to mix writing modes with long streams 1.4549 + of text are thus encouraged to use CSS columns to keep all content 1.4550 + flowing in the document's pagination direction. 1.4551 1.4552 <div class=note> 1.4553 - <p>In other words, if your document would require two scrollbars on the 1.4554 - screen it probably won't all print. Fix your layout, e.g. by using <a 1.4555 - href="http://www.w3.org/TR/css3-multicol/">columns</a> so that it all 1.4556 - scrolls (and therefore paginates) in one direction if you want to make 1.4557 - sure it'll all print. T-shaped documents tend not to print well. 1.4558 + <p>In other words, if your document would require two scrollbars on 1.4559 + the screen it probably won't all print. Fix your layout, e.g. by 1.4560 + using <a href=http://www.w3.org/TR/css3-multicol/>columns</a> so 1.4561 + that it all scrolls (and therefore paginates) in one direction if 1.4562 + you want to make sure it'll all print. T-shaped documents tend not 1.4563 + to print well. 1.4564 </div> 1.4565 1.4566 - <h3 id=logical-direction-layout><span class=secno>7.4. </span> 1.4567 - Flow-Relative Mappings</h3> 1.4568 +<h3 data-level=7.4 id=logical-direction-layout><span class=secno>7.4 </span><span class=content> 1.4569 +Flow-Relative Mappings</span><a class=section-link href=#logical-direction-layout>§</a></h3> 1.4570 1.4571 - <p>Flow-relative directions are calculated with respect to the writing mode 1.4572 - of the <em>containing block</em> of the element and used to abstract 1.4573 - layout rules related to the box properties (margins, borders, padding) and 1.4574 - any properties related to positioning the box within its containing block 1.4575 - (‘<code class=property>float</code>’, ‘<code 1.4576 - class=property>clear</code>’, ‘<code class=property>top</code>’, 1.4577 - ‘<code class=property>bottom</code>’, ‘<code 1.4578 - class=property>left</code>’, ‘<code class=property>right</code>’) 1.4579 - For inline-level elements, the writing mode of the <em>parent element</em> 1.4580 - is used instead. 1.4581 + <p>Flow-relative directions are calculated with respect to 1.4582 + the writing mode of the <em>containing block</em> of the 1.4583 + element and used to abstract layout rules related to the 1.4584 + box properties (margins, borders, padding) and any properties 1.4585 + related to positioning the box within its containing block 1.4586 + (<a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-float title=float>float</a>, <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-clear title=clear>clear</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#top title=top>top</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#bottom title=bottom>bottom</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#left title=left>left</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#right title=right>right</a>) 1.4587 + For inline-level elements, the writing mode of the <em>parent 1.4588 + element</em> is used instead. 1.4589 1.4590 - <p>For example, the margin that is dropped when a box's inline dimension is 1.4591 - <a 1.4592 - href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">over-constrained</a> 1.4593 - is the end margin as determined by the writing mode of the containing 1.4594 - block. 1.4595 + <p>For example, the margin that is dropped when a box's inline 1.4596 + dimension is 1.4597 + <a href=http://www.w3.org/TR/CSS21/visudet.html#blockwidth>over-constrained</a> 1.4598 + is the end margin as determined by the writing mode of the 1.4599 + containing block. 1.4600 1.4601 - <p>The <a 1.4602 - href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">margin 1.4603 - collapsing rules</a> apply exactly with the <em><a 1.4604 - href="#block-start"><i>block-start</i></a> margin</em> substituted for the 1.4605 - top margin and the <em><a href="#block-end"><i>block-end</i></a> 1.4606 - margin</em> substituted for the bottom margin. Similarly the <a 1.4607 - href="#block-start"><i>block-start</i></a> padding and border are 1.4608 - substituted for the top padding and border, and the <a 1.4609 - href="#block-end"><i>block-end</i></a> padding and border substituted for 1.4610 - the bottom padding and border. Note this means only <a 1.4611 - href="#block-start"><i>block-start</i></a> and <a 1.4612 - href="#block-end"><i>block-end</i></a> margins ever collapse. 1.4613 + <p>The <a href=http://www.w3.org/TR/CSS21/box.html#collapsing-margins>margin 1.4614 + collapsing rules</a> apply exactly with the <em><a href=#block-start>block-start</a> 1.4615 + margin</em> substituted for the top margin and the 1.4616 + <em><a href=#block-end>block-end</a> margin</em> substituted for the bottom margin. 1.4617 + Similarly the <a href=#block-start>block-start</a> padding and border are substituted 1.4618 + for the top padding and border, and the <a href=#block-end>block-end</a> padding and 1.4619 + border substituted for the bottom padding and border. 1.4620 + Note this means only <a href=#block-start>block-start</a> and <a href=#block-end>block-end</a> margins ever collapse. 1.4621 1.4622 - <p>Flow-relative directions are calculated with respect to the writing mode 1.4623 - of the element and used to abstract layout related to the element's 1.4624 - contents: 1.4625 + <p>Flow-relative directions are calculated with respect to 1.4626 + the writing mode of the element and used to abstract layout 1.4627 + related to the element's contents: 1.4628 1.4629 - <ul> 1.4630 - <li>The initial value of the ‘<code class=property>text-align</code>’ 1.4631 - property aligns to the <a href="#start"><i>start</i></a> edge of the line 1.4632 - box. 1.4633 - 1.4634 - <li>The ‘<code class=property>text-indent</code>’ property indents 1.4635 - from the <a href="#start"><i>start</i></a> edge of the line box. 1.4636 - 1.4637 - <li>For tables, the ordering of columns begins on the <a 1.4638 - href="#inline-start"><i>inline-start</i></a> side of the table, and the 1.4639 - ordering of rows begins on the <a 1.4640 - href="#block-start"><i>block-start</i></a> side of the table. 1.4641 +<p> <ul> 1.4642 + <li>The initial value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-3/#text-align0 title=text-align>text-align</a> property 1.4643 + aligns to the <a href=#start>start</a> edge of the line box. 1.4644 + <li>The <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-3/#text-indent0 title=text-indent>text-indent</a> property indents from the <a href=#start>start</a> 1.4645 + edge of the line box. 1.4646 + <li>For tables, the ordering of columns begins on the <a href=#inline-start>inline-start</a> 1.4647 + side of the table, and the ordering of rows begins on the 1.4648 + <a href=#block-start>block-start</a> side of the table. 1.4649 </ul> 1.4650 1.4651 - <h3 id=line-mappings><span class=secno>7.5. </span> Line-Relative Mappings</h3> 1.4652 +<h3 data-level=7.5 id=line-mappings><span class=secno>7.5 </span><span class=content> 1.4653 +Line-Relative Mappings</span><a class=section-link href=#line-mappings>§</a></h3> 1.4654 1.4655 - <p>The <dfn id=line-relative-directions0>line-relative directions</dfn> are 1.4656 - <a href="#over">over</a>, <a href="#under">under</a>, <a 1.4657 - href="#line-left">line-left</a>, and <a href="#line-right">line-right</a>. 1.4658 - In an <abbr title=left-to-right>LTR</abbr> ‘<a 1.4659 - href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ writing 1.4660 - mode, they correspond to the top, bottom, left, and right directions, 1.4661 - respectively. 1.4662 + <p>The <a href=#line-relative-directions>line-relative directions</a> are 1.4663 + <a href=#over>over</a>, 1.4664 + <a href=#under>under</a>, 1.4665 + <a href=#line-left>line-left</a>, and 1.4666 + <a href=#line-right>line-right</a>. In an 1.4667 + <abbr title=left-to-right>LTR</abbr> 1.4668 + <a class=css data-link-type=maybe href=#valuedef-horizontal-tb>horizontal-tb</a> writing mode, they correspond to the 1.4669 + top, bottom, left, and right directions, respectively. 1.4670 1.4671 - <p>The line-right and line-left directions are calculated with respect to 1.4672 - the writing mode of the element and used to interpret the ‘<code 1.4673 - class=css>left</code>’ and ‘<code class=css>right</code>’ values of 1.4674 - the following properties: 1.4675 - 1.4676 + <p>The line-right and line-left directions are calculated 1.4677 + with respect to the writing mode of the element and used 1.4678 + to interpret the <span class=css data-link-type=maybe>left</span> and <span class=css data-link-type=maybe>right</span> values of the 1.4679 + following properties: 1.4680 <ul> 1.4681 - <li>the ‘<code class=property>text-align</code>’ property <a 1.4682 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.4683 + <li>the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-3/#text-align0 title=text-align>text-align</a> property <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4684 </ul> 1.4685 1.4686 - <p>The line-right and line-left directions are calculated with respect to 1.4687 - the writing mode of the <em>containing block</em> of the element and used 1.4688 - to interpret the ‘<code class=css>left</code>’ and ‘<code 1.4689 - class=css>right</code>’ values of the following properties: 1.4690 - 1.4691 + <p>The line-right and line-left directions are calculated 1.4692 + with respect to the writing mode of the <em>containing 1.4693 + block</em> of the element and used to interpret the <span class=css data-link-type=maybe>left</span> 1.4694 + and <span class=css data-link-type=maybe>right</span> values of the following properties: 1.4695 <ul> 1.4696 - <li>the ‘<code class=property>float</code>’ property <a href="#CSS21" 1.4697 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.4698 - 1.4699 - <li>the ‘<code class=property>clear</code>’ property <a href="#CSS21" 1.4700 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.4701 + <li>the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-float title=float>float</a> property <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4702 + <li>the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-clear title=clear>clear</a> property <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4703 </ul> 1.4704 1.4705 - <p>The over and under directions are calculated with respect to the writing 1.4706 - mode of the element and used to define the interpretation of the "top" 1.4707 - (over edge) and "bottom" (under edge) of the line box as follows: 1.4708 + <p>The over and under directions are calculated with respect to 1.4709 + the writing mode of the element and used to define the 1.4710 + interpretation of the "top" (over edge) and "bottom" (under 1.4711 + edge) of the line box as follows: 1.4712 1.4713 - <ul> 1.4714 - <li>For the ‘<code class=property>vertical-align</code>’ property, the 1.4715 - "top" of the line box is the over edge; the "bottom" of the line box is 1.4716 - the under edge. Positive length and percentage values shift the baseline 1.4717 - towards the over edge. <a href="#CSS21" 1.4718 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.4719 - 1.4720 - <li>For the ‘<code class=property>text-decoration</code>’ property, 1.4721 - the underline is drawn on the under side of the text; the overline is 1.4722 - drawn on the over side of the text. <a href="#CSS21" 1.4723 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <span class=note>Note that 1.4724 - the CSS Text Module defines this in more detail and provides additional 1.4725 - controls for controlling the position of underlines and overlines. <a 1.4726 - href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a></span> 1.4727 +<p> <ul> 1.4728 + <li>For the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align title=vertical-align>vertical-align</a> property, the "top" of the 1.4729 + line box is the over edge; the "bottom" of the line box 1.4730 + is the under edge. Positive length and percentage values 1.4731 + shift the baseline towards the over edge. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4732 + <li>For the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-decor-3/#text-decoration title=text-decoration>text-decoration</a> property, the underline is 1.4733 + drawn on the under side of the text; the overline is 1.4734 + drawn on the over side of the text. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4735 + <span class=note>Note that the CSS Text Module defines 1.4736 + this in more detail and provides additional controls for 1.4737 + controlling the position of underlines and overlines. 1.4738 + <a data-biblio-type=informative data-link-type=biblio href=#css3text title=CSS3TEXT>[CSS3TEXT]</a></span> 1.4739 </ul> 1.4740 1.4741 - <h3 id=physical-only><span class=secno>7.6. </span> Purely Physical 1.4742 - Mappings</h3> 1.4743 +<h3 data-level=7.6 id=physical-only><span class=secno>7.6 </span><span class=content> 1.4744 +Purely Physical Mappings</span><a class=section-link href=#physical-only>§</a></h3> 1.4745 1.4746 - <p>The following values are purely physical in their definitions and do not 1.4747 - respond to changes in writing mode: 1.4748 + <p>The following values are purely physical in their definitions 1.4749 + and do not respond to changes in writing mode: 1.4750 1.4751 - <ul> 1.4752 - <li>the ‘<code class=css>rect()</code>’ notation of the ‘<code 1.4753 - class=property>clip</code>’ property <a href="#CSS21" 1.4754 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.4755 - 1.4756 - <li>the background properties <a href="#CSS21" 1.4757 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <a href="#CSS3BG" 1.4758 - rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> 1.4759 - 1.4760 - <li>the border-image properties <a href="#CSS3BG" 1.4761 - rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> 1.4762 - 1.4763 - <li>the offsets of the ‘<code class=property>box-shadow</code>’ and 1.4764 - ‘<code class=property>text-shadow</code>’ properties 1.4765 +<p> <ul> 1.4766 + <li>the <span class=css data-link-type=maybe>rect()</span> notation of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#clip title=clip>clip</a> property <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4767 + <li>the background properties <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=CSS3BG>[CSS3BG]</a> 1.4768 + <li>the border-image properties <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=CSS3BG>[CSS3BG]</a> 1.4769 + <li>the offsets of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#box-shadow title=box-shadow>box-shadow</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-decor-3/#text-shadow title=text-shadow>text-shadow</a> properties 1.4770 </ul> 1.4771 1.4772 - <h3 id=caption-side><span class=secno>7.7. </span> Table Caption Mappings: 1.4773 - the ‘<code class=property>caption-side</code>’ keywords</h3> 1.4774 +<h3 data-level=7.7 id=caption-side><span class=secno>7.7 </span><span class=content> 1.4775 +Table Caption Mappings: the <a class=property data-link-type=propdesc href=#propdef-caption-side title=caption-side>caption-side</a> keywords</span><a class=section-link href=#caption-side>§</a></h3> 1.4776 1.4777 - <table class=propdef> 1.4778 - <tbody> 1.4779 - <tr> 1.4780 - <th>Property: 1.4781 +<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-caption-side>caption-side</dfn><tr><th>New Values:<td>block-start | block-end</table> 1.4782 + <p>This module introduces two new values to the <a class=property data-link-type=propdesc href=#propdef-caption-side title=caption-side>caption-side</a> property: 1.4783 + <dfn data-dfn-for=caption-side data-dfn-type=value data-export="" id=valuedef-block-start>block-start</dfn> and <dfn data-dfn-for=caption-side data-dfn-type=value data-export="" id=valuedef-block-end>block-end</dfn>, 1.4784 + which position the caption before and after the table box, respectively. 1.4785 + For tables with <a class=css data-link-type=maybe href=#valuedef-horizontal-tb>horizontal-tb</a> writing mode, 1.4786 + they are equivalent to the existing <span class=css data-link-type=maybe>top</span> and <span class=css data-link-type=maybe>bottom</span> values, respectively. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4787 1.4788 - <td>‘<code class=property>caption-side</code>’ 1.4789 + <p class=note>For implementations that support the <span class=css data-link-type=maybe>top-outside</span> 1.4790 + and <span class=css data-link-type=maybe>bottom-outside</span> model, corresponding <span class=css data-link-type=maybe>start-outside</span> and 1.4791 + <span class=css data-link-type=maybe>end-outside</span> are similarly introduced. 1.4792 1.4793 - <tr> 1.4794 - <th>New Values: 1.4795 + <p>Implementations that support the <span class=css data-link-type=maybe>top</span> and <span class=css data-link-type=maybe>bottom</span> values 1.4796 + of the <a class=property data-link-type=propdesc href=#propdef-caption-side title=caption-side>caption-side</a> property but do not support side captions 1.4797 + (i.e. <span class=css data-link-type=maybe>left</span> and <span class=css data-link-type=maybe>right</span> captions in horizontal writing modes) 1.4798 + must treat both <span class=css data-link-type=maybe>top</span> and <span class=css data-link-type=maybe>bottom</span> as <a data-link-for=caption-side data-link-type=value href=#valuedef-block-start>block-start</a>, 1.4799 + when the table is in a vertical writing mode. 1.4800 1.4801 - <td>‘<a href="#block-start"><code class=css>block-start</code></a>’ 1.4802 - | ‘<a href="#block-end"><code class=css>block-end</code></a>’ 1.4803 + <p>For implementations that do support side captions 1.4804 + (i.e. the <span class=css data-link-type=maybe>left</span> and <span class=css data-link-type=maybe>right</span> values from the obsolete CSS 2.0 specification <a data-biblio-type=informative data-link-type=biblio href=#css2 title=CSS2>[CSS2]</a>), 1.4805 + this module also introduces the <a class=css data-link-type=maybe href=#inline-start>inline-start</a> and <a class=css data-link-type=maybe href=#inline-end>inline-end</a> values, 1.4806 + which behave similarly and which position the 1.4807 + caption on the <a href=#inline-start>inline-start</a> and <a href=#inline-end>inline-end</a> sides of the table box, 1.4808 + calculated with respect to the writing mode of the table element. 1.4809 + For such implementations, the <span class=css data-link-type=maybe>top</span> and <span class=css data-link-type=maybe>bottom</span> values must place the 1.4810 + caption on the top and bottom sides of the table box, respectively. 1.4811 1.4812 - <tr> 1.4813 - <th>Initial: 1.4814 + <p class=note>The CSS2.0 side caption model had some 1.4815 + <a href=http://lists.w3.org/Archives/Public/www-style/2002Dec/0142.html>problems</a> 1.4816 + and will likely have a different definition in CSS3.</p> 1.4817 1.4818 - <td>start 1.4819 - 1.4820 - <tr> 1.4821 - <th>Applies to: 1.4822 - 1.4823 - <td>same as CSS2.1 1.4824 - 1.4825 - <tr> 1.4826 - <th>Inherited: 1.4827 - 1.4828 - <td>same as CSS2.1 1.4829 - 1.4830 - <tr> 1.4831 - <th>Percentages: 1.4832 - 1.4833 - <td>same as CSS2.1 1.4834 - 1.4835 - <tr> 1.4836 - <th>Media: 1.4837 - 1.4838 - <td>same as CSS2.1 1.4839 - 1.4840 - <tr> 1.4841 - <th>Computed value: 1.4842 - 1.4843 - <td>specified value 1.4844 - </table> 1.4845 - 1.4846 - <p>This module introduces two new values to the ‘<code 1.4847 - class=property>caption-side</code>’ property: ‘<a 1.4848 - href="#block-start"><code class=css>block-start</code></a>’ and ‘<a 1.4849 - href="#block-end"><code class=css>block-end</code></a>’, which position 1.4850 - the caption before and after the table box, respectively. For tables with 1.4851 - ‘<a href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ 1.4852 - writing mode, they are equivalent to the existing ‘<code 1.4853 - class=css>top</code>’ and ‘<code class=css>bottom</code>’ values, 1.4854 - respectively. <a href="#CSS21" 1.4855 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.4856 - 1.4857 - <p class=note>For implementations that support the ‘<code 1.4858 - class=css>top-outside</code>’ and ‘<code 1.4859 - class=css>bottom-outside</code>’ model, corresponding ‘<code 1.4860 - class=css>start-outside</code>’ and ‘<code 1.4861 - class=css>end-outside</code>’ are similarly introduced. 1.4862 - 1.4863 - <p>Implementations that support the ‘<code class=css>top</code>’ and 1.4864 - ‘<code class=css>bottom</code>’ values of the ‘<code 1.4865 - class=property>caption-side</code>’ property but do not support side 1.4866 - captions (i.e. ‘<code class=css>left</code>’ and ‘<code 1.4867 - class=css>right</code>’ captions in horizontal writing modes) must treat 1.4868 - both ‘<code class=css>top</code>’ and ‘<code 1.4869 - class=css>bottom</code>’ as ‘<a href="#block-start"><code 1.4870 - class=css>block-start</code></a>’, when the table is in a vertical 1.4871 - writing mode. 1.4872 - 1.4873 - <p>For implementations that do support side captions (i.e. the ‘<code 1.4874 - class=css>left</code>’ and ‘<code class=css>right</code>’ values 1.4875 - from the obsolete CSS 2.0 specification <a href="#CSS2" 1.4876 - rel=biblioentry>[CSS2]<!--{{CSS2}}--></a>), this module also introduces 1.4877 - the ‘<a href="#inline-start"><code class=css>inline-start</code></a>’ 1.4878 - and ‘<a href="#inline-end"><code class=css>inline-end</code></a>’ 1.4879 - values, which behave similarly and which position the caption on the <a 1.4880 - href="#inline-start"><i>inline-start</i></a> and <a 1.4881 - href="#inline-end"><i>inline-end</i></a> sides of the table box, 1.4882 - calculated with respect to the writing mode of the table element. For such 1.4883 - implementations, the ‘<code class=css>top</code>’ and ‘<code 1.4884 - class=css>bottom</code>’ values must place the caption on the top and 1.4885 - bottom sides of the table box, respectively. 1.4886 - 1.4887 - <p class=note>The CSS2.0 side caption model had some <a 1.4888 - href="http://lists.w3.org/Archives/Public/www-style/2002Dec/0142.html">problems</a> 1.4889 - and will likely have a different definition in CSS3.</p> 1.4890 - <!-- 1.4891 +<!-- 1.4892 <h3 id="html-attributes">HTML Attributes</h3> 1.4893 1.4894 <p>This section defines the mapping of HTML presentational attributes 1.4895 @@ -3157,7 +2169,7 @@ 1.4896 <p>The following attributes behave the same way as their corresponding 1.4897 CSS properties:</p> 1.4898 1.4899 - <ul> 1.4900 +<p> <ul> 1.4901 <li><code>align</code> as 'float' or 'text-align'</li> 1.4902 <li><code>clear</code> as 'clear'</li> 1.4903 <li><code>valign</code> as 'vertical-align'</li> 1.4904 @@ -3168,7 +2180,7 @@ 1.4905 <p>The following attributes are logical and, as margins, are logical 1.4906 with respect to the writing mode of the <em>parent</em> element.</p> 1.4907 1.4908 - <ul> 1.4909 +<p> <ul> 1.4910 <li><code>hspace</code> as inline-start and inline-end margins</li> 1.4911 <li><code>vspace</code> as block-start and block-end margins</li> 1.4912 <li>marginwidth</li> 1.4913 @@ -3176,241 +2188,143 @@ 1.4914 </ul> 1.4915 --> 1.4916 1.4917 - <h2 id=page-direction><span class=secno>8. </span> Page Flow: the page 1.4918 - progression direction</h2> 1.4919 +<h2 data-level=8 id=page-direction><span class=secno>8 </span><span class=content> 1.4920 +Page Flow: the page progression direction</span><a class=section-link href=#page-direction>§</a></h2> 1.4921 1.4922 - <p>In paged media CSS2.1 classifies all pages as either left or right 1.4923 - pages. The page progression direction, which determines whether the left 1.4924 - or right page in a spread is first in the flow and whether the first page 1.4925 - is by default a left or right page, depends on the writing direction as 1.4926 - follows: 1.4927 + <p>In paged media CSS2.1 classifies all pages as either left or right pages. 1.4928 + The page progression direction, which determines whether the left or right 1.4929 + page in a spread is first in the flow and whether the first page is by 1.4930 + default a left or right page, depends on the writing direction as follows: 1.4931 1.4932 - <ul> 1.4933 - <li>The page progression is right-to-left if the root element's ‘<a 1.4934 - href="#writing-mode1"><code class=property>writing-mode</code></a>’ is 1.4935 - ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’ or if 1.4936 - the root element's ‘<a href="#writing-mode1"><code 1.4937 - class=property>writing-mode</code></a>’ is ‘<a 1.4938 - href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ and its 1.4939 - ‘<a href="#direction0"><code class=property>direction</code></a>’ is 1.4940 - ‘<a href="#rtl"><code class=css>rtl</code></a>’. 1.4941 - 1.4942 - <li>The page progression is left-to-right if the root element's ‘<a 1.4943 - href="#writing-mode1"><code class=property>writing-mode</code></a>’ is 1.4944 - ‘<a href="#vertical-lr"><code class=css>vertical-lr</code></a>’ or if 1.4945 - the root element's ‘<a href="#writing-mode1"><code 1.4946 - class=property>writing-mode</code></a>’ is ‘<a 1.4947 - href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ and its 1.4948 - ‘<a href="#direction0"><code class=property>direction</code></a>’ is 1.4949 - ‘<a href="#ltr"><code class=css>ltr</code></a>’. 1.4950 +<p> <ul> 1.4951 + <li>The page progression is right-to-left if the root element's 1.4952 + <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> is <a class=css data-link-type=maybe href=#valuedef-vertical-rl>vertical-rl</a> or if the root element's <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> 1.4953 + is <a class=css data-link-type=maybe href=#valuedef-horizontal-tb>horizontal-tb</a> and its <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> is <a class=css data-link-type=maybe href=#valuedef-rtl>rtl</a>. 1.4954 + <li>The page progression is left-to-right if the root element's 1.4955 + <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> is <a class=css data-link-type=maybe href=#valuedef-vertical-lr>vertical-lr</a> or if the root element's <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> 1.4956 + is <a class=css data-link-type=maybe href=#valuedef-horizontal-tb>horizontal-tb</a> and its <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#direction0 title=direction>direction</a> is <a class=css data-link-type=maybe href=#valuedef-ltr>ltr</a>. 1.4957 </ul> 1.4958 1.4959 <p>(Unless otherwise overridden, the first page of a document begins on the 1.4960 - second half of a spread, e.g. on the right page in a left-to-right page 1.4961 - progression.) 1.4962 + second half of a spread, e.g. on the right page in a left-to-right page 1.4963 + progression.) 1.4964 1.4965 - <h2 id=text-combine><span class=secno>9. </span> Glyph Composition</h2> 1.4966 +<h2 data-level=9 id=text-combine><span class=secno>9 </span><span class=content> 1.4967 +Glyph Composition</span><a class=section-link href=#text-combine>§</a></h2> 1.4968 1.4969 - <h3 id=text-combine-horizontal><span class=secno>9.1. </span> 1.4970 - Horizontal-in-Vertical Composition: the ‘<a 1.4971 - href="#text-combine-horizontal0"><code 1.4972 - class=property>text-combine-horizontal</code></a>’ property</h3> 1.4973 +<h3 data-level=9.1 id=text-combine-horizontal><span class=secno>9.1 </span><span class=content> 1.4974 +Horizontal-in-Vertical Composition: the <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a> property</span><a class=section-link href=#text-combine-horizontal>§</a></h3> 1.4975 1.4976 - <table class=propdef> 1.4977 - <tbody> 1.4978 - <tr> 1.4979 - <th>Name: 1.4980 - 1.4981 - <td><dfn id=text-combine-horizontal0>text-combine-horizontal</dfn> 1.4982 - 1.4983 - <tr> 1.4984 - <th><a href="#values">Value</a>: 1.4985 - 1.4986 - <td>none | all | [ digits <integer>? ] <!-- 1.4987 - | [ [ numeric <integer> | digits <integer> ] 1.4988 - || [ alpha <integer> | latin <integer> ] 1.4989 - || alphanumeric <integer> ] 1.4990 - --> 1.4991 - 1.4992 - <tr> 1.4993 - <th>Initial: 1.4994 - 1.4995 - <td>none 1.4996 - 1.4997 - <tr> 1.4998 - <th>Applies to: 1.4999 - 1.5000 - <td>non-replaced inline elements 1.5001 - 1.5002 - <tr> 1.5003 - <th>Inherited: 1.5004 - 1.5005 - <td><a class=issue 1.5006 - href="http://lists.w3.org/Archives/Public/www-style/2013Jul/0154.html">???</a> 1.5007 - 1.5008 - <tr> 1.5009 - <th>Percentages: 1.5010 - 1.5011 - <td>N/A 1.5012 - 1.5013 - <tr> 1.5014 - <th>Media: 1.5015 - 1.5016 - <td>visual 1.5017 - 1.5018 - <tr> 1.5019 - <th>Computed value: 1.5020 - 1.5021 - <td>specified value 1.5022 - </table> 1.5023 - 1.5024 +<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-text-combine-horizontal>text-combine-horizontal</dfn><tr><th>Value:<td>none | all | [ digits <integer>? ]<tr><th>Initial:<td>none<tr><th>Applies to:<td>non-replaced inline elements<tr><th>Inherited:<td><a class=issue href=http://lists.w3.org/Archives/Public/www-style/2013Jul/0154.html>???</a><tr><th>Percentages:<td>n/a<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified keyword, plus integer if <span class=css data-link-type=maybe>digits</span></table> 1.5025 <p>This property allows the combination of multiple characters into the 1.5026 - space of a single character. This property only has an effect in vertical 1.5027 - writing modes. Values have the following meanings: 1.5028 + space of a single character. This property only has an effect 1.5029 + in vertical writing modes. Values have the following meanings:</p> 1.5030 1.5031 <dl> 1.5032 - <dt><dfn id=none title="text-combine-horizontal:none">none</dfn> 1.5033 + <dt><dfn data-dfn-for=text-combine-horizontal data-dfn-type=value data-export="" id=valuedef-none>none</dfn> 1.5034 + <dd>No special processing.</dd> 1.5035 1.5036 - <dd>No special processing. 1.5037 - 1.5038 - <dt><dfn id=all title="text-combine-horizontal:all">all</dfn> 1.5039 - 1.5040 - <dd>In vertical writing modes, attempt to display the text contents of the 1.5041 - element horizontally within the vertical line box. If the contents are 1.5042 - wider than 1em, the UA must fit the contents within 1em, see below. The 1.5043 - resulting composition is treated as a single glyph for the purposes of 1.5044 - layout and decoration. If the content contains any element boundaries 1.5045 - this is treated as ‘<code class=css>text-combine-horizontal: 1.5046 - none</code>’ on the element and any descendants. <!-- 1.5047 - <dt><dfn title="text-combine-horizontal:numeric">numeric</dfn> 1.5048 + <dt><dfn data-dfn-for=text-combine-horizontal data-dfn-type=value data-export="" id=valuedef-all>all</dfn> 1.5049 + <dd>In vertical writing modes, 1.5050 + attempt to display the text contents of the element horizontally within the vertical line box. 1.5051 + If the contents are wider than 1em, the UA must fit the contents within 1em, see below. 1.5052 + The resulting composition is treated as a single glyph for the purposes 1.5053 + of layout and decoration. 1.5054 + If the content contains any element boundaries this is treated as 1.5055 + <span class=css data-link-type=maybe>text-combine-horizontal: none</span> on the element and any descendants. 1.5056 +<!-- 1.5057 + <dt><dfn value for=text-combine-horizontal>numeric</dfn> 1.5058 <dd>Within the element, each sequence of consecutive horizontal numbers 1.5059 that has as many or fewer characters than the integer given is treated 1.5060 as if it were in an anonymous inline box with 1.5061 - ''text-combine-horizontal: all''. 1.5062 + <span data-link-type="maybe" class="css">text-combine-horizontal: all</span>. 1.5063 For this property, a <dfn>horizontal number</dfn> is any character 1.5064 belonging to a Number category (N*) that does not belong to a 1.5065 <a href="#script-orientations">vertical script</a>. 1.5066 --> 1.5067 - 1.5068 - <dt><dfn id=digits-ltinteger title="text-combine-horizontal:digits">digits 1.5069 - <var><integer></var>?</dfn> 1.5070 - 1.5071 - <dd>Within the element, each maximal sequence of consecutive ASCII digits 1.5072 - (U+0030–U+0039) that has as many or fewer characters than the integer 1.5073 - given is treated as if it were in an anonymous inline box with ‘<code 1.5074 - class=css>text-combine-horizontal: all</code>’. When the integer is 1.5075 - omitted, 2 is used. Integers outside the range 1-4 are invalid. <!-- 1.5076 - <dt><dfn title="text-combine-horizontal:alpha">alpha</dfn> 1.5077 + <dt><dfn data-dfn-for=text-combine-horizontal data-dfn-type=value data-export="" id=valuedef-digits-integer>digits <var><integer></var>?</dfn> 1.5078 + <dd>Within the element, each maximal sequence of consecutive ASCII digits (U+0030–U+0039) 1.5079 + that has as many or fewer characters than the integer given is treated 1.5080 + as if it were in an anonymous inline box with 1.5081 + <span class=css data-link-type=maybe>text-combine-horizontal: all</span>. 1.5082 + When the integer is omitted, 2 is used. 1.5083 + Integers outside the range 1-4 are invalid. 1.5084 +<!-- 1.5085 + <dt><dfn value for=text-combine-horizontal>alpha</dfn> 1.5086 <dd>Within the element, each sequence of consecutive horizontal letters 1.5087 that has as many or fewer characters than the integer given is treated 1.5088 as if it were in an anonymous inline box with 1.5089 - ''text-combine-horizontal: all''. 1.5090 + <span data-link-type="maybe" class="css">text-combine-horizontal: all</span>. 1.5091 For this property, a <dfn>horizontal letter</dfn> is any character belonging 1.5092 to a Letter category (L*) that does not belong to a 1.5093 <a href="#script-orientations">vertical script</a>. 1.5094 - <dt><dfn title="text-combine-horizontal:latin">latin</dfn> 1.5095 + <dt><dfn value for=text-combine-horizontal>latin</dfn> 1.5096 <dd>Within the element, each sequence of Latin letters 1.5097 that has as many or fewer characters than the integer given is treated 1.5098 as if it were in an anonymous inline box with 1.5099 - ''text-combine-horizontal: all''. 1.5100 + <span data-link-type="maybe" class="css">text-combine-horizontal: all</span>. 1.5101 For this property, a <dfn>Latin letter</dfn> is any character belonging to 1.5102 a Letter category (L*) that also belongs to the Latin script. 1.5103 - <p class="issue">This definition could replace ''alpha'' as a simplification. 1.5104 - However, it wouldn't work for greek or mixtures of greek and latin (e.g. μm). 1.5105 - <dt><dfn title="text-combine-horizontal:alphanumeric">alphanumeric</dfn> 1.5106 + <p class="issue">This definition could replace <span data-link-type="maybe" class="css">alpha</span> as a simplification. 1.5107 + However, it wouldn't work for greek or mixtures of greek and latin (e.g. μm). 1.5108 + <dt><dfn value for=text-combine-horizontal>alphanumeric</dfn> 1.5109 <dd>Within the element, each sequence of consecutive horizontal digits and/or 1.5110 letters that has as many or fewer characters than the integer given is treated 1.5111 as if it were in an anonymous inline box with 1.5112 - ''text-combine-horizontal: all''. 1.5113 + <span data-link-type="maybe" class="css">text-combine-horizontal: all</span>. 1.5114 --> 1.5115 </dl> 1.5116 1.5117 <div class=example> 1.5118 - <p>In East Asian documents, the ‘<a 1.5119 - href="#text-combine-horizontal0"><code 1.5120 - class=css>text-combine-horizontal</code></a>’ effect is often used to 1.5121 - display Latin-based strings such as components of a date or letters of an 1.5122 - initialism, always in a horizontal writing mode regardless of the writing 1.5123 - mode of the line: 1.5124 + <p>In East Asian documents, the <span class=css data-link-type=maybe>text-combine-horizontal</span> effect is often 1.5125 + used to display Latin-based strings such as components of a date or 1.5126 + letters of an initialism, always in a horizontal writing mode 1.5127 + regardless of the writing mode of the line:</p> 1.5128 1.5129 - <div class=figure> 1.5130 - <p><img 1.5131 - alt="Diagram of tate-chu-yoko, showing the two digits of a date set halfwidth side-by-side in a vertical column of text" 1.5132 - class=example src=tate-chu-yoko.png> 1.5133 + <div class=figure> 1.5134 + <p><img alt="Diagram of tate-chu-yoko, showing the two digits of a date 1.5135 + set halfwidth side-by-side in a vertical column of text" class=example src=tate-chu-yoko.png> 1.5136 + <p class=caption>Example of horizontal-in-vertical <i lang=ja title="">tate-chu-yoko</i></p> 1.5137 + </div> 1.5138 1.5139 - <p class=caption>Example of horizontal-in-vertical <i 1.5140 - lang=ja>tate-chu-yoko</i> 1.5141 - </div> 1.5142 - 1.5143 - <p>The figure is the result of the rules 1.5144 - 1.5145 - <pre> 1.5146 -<!-- -->date { text-combine-horizontal: digits 2; } 1.5147 - </pre> 1.5148 - 1.5149 - <p>and the following markup: 1.5150 - 1.5151 - <pre> 1.5152 -<!-- --><date>平成20年4月16日に</date> 1.5153 - </pre> 1.5154 - 1.5155 - <p>In Japanese, this effect is known as <i lang=ja>tate-chu-yoko</i>. 1.5156 + <p>The figure is the result of the rules</p> 1.5157 + <pre><!-- -->date { text-combine-horizontal: digits 2; } 1.5158 +</pre> <p>and the following markup:</p> 1.5159 + <pre><!-- --><date>平成20年4月16日に</date> 1.5160 +</pre> 1.5161 + <p>In Japanese, this effect is known as <i lang=ja title="">tate-chu-yoko</i>. 1.5162 </div> 1.5163 1.5164 <div class=example> 1.5165 - <p>The following example shows that applying ‘<code 1.5166 - class=css>text-combine-horizontal: digits 2</code>’ to an entire 1.5167 - document, rather than to a segment with a known type of numeric content, 1.5168 - can have unintended consequences: 1.5169 - 1.5170 - <pre><p>あれは10,000円ですよ！</p></pre> 1.5171 - 1.5172 - <div class=figure> 1.5173 - <p><img 1.5174 - alt="Rendering of the above markup with 'text-combine-horizontal: digits': the first two digits of the number are rendered as tate-chu-yoko while the rest of the number is rendered sideways." 1.5175 - class=example src=bad-tate-chu-yoko.png> 1.5176 - 1.5177 - <p class=caption>Example of mis-applied <i lang=ja>tate-chu-yoko</i> 1.5178 - </div> 1.5179 + <p>The following example shows that applying <span class=css data-link-type=maybe>text-combine-horizontal: digits 2</span> 1.5180 + to an entire document, rather than to a segment with a known type of 1.5181 + numeric content, can have unintended consequences: 1.5182 +<pre><p>あれは10,000円ですよ！</p></pre> <div class=figure> 1.5183 + <p><img alt="Rendering of the above markup with 'text-combine-horizontal: digits': 1.5184 + the first two digits of the number are rendered as tate-chu-yoko 1.5185 + while the rest of the number is rendered sideways." class=example src=bad-tate-chu-yoko.png> 1.5186 + <p class=caption>Example of mis-applied <i lang=ja title="">tate-chu-yoko</i></p> 1.5187 + </div> 1.5188 </div> 1.5189 1.5190 <p>In order to preserve typographic color when compressing the text to 1em, 1.5191 - when the combined text consists of more than one <a 1.5192 - href="#character"><i>character</i></a>, then any full-width <a 1.5193 - href="#character"><i>characters</i></a> must first be converted to their 1.5194 - non-full-width equivalents by reversing the algorithm defined for ‘<code 1.5195 - class=css>text-transform: full-width</code>’ in <a href="#CSS3TEXT" 1.5196 - rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>. Also, a ‘<code 1.5197 - class=property>font-variant</code>’ value of ‘<code 1.5198 - class=css>full-width</code>’ must be ignored in such cases: whether 1.5199 - applied via ‘<code class=css>@font-face</code>’ descriptor or property 1.5200 - declaration, within the combined text this value does not not cause the UA 1.5201 - to enable that font feature. <a href="#CSS3-FONTS" 1.5202 - rel=biblioentry>[CSS3-FONTS]<!--{{!CSS3-FONTS}}--></a> 1.5203 + when the combined text consists of more than one <a href=#character>character</a>, 1.5204 + then any full-width <a href=#character>characters</a> must first be converted to their non-full-width equivalents 1.5205 + by reversing the algorithm defined for <span class=css data-link-type=maybe>text-transform: full-width</span> in <a data-biblio-type=normative data-link-type=biblio href=#css3text title=CSS3TEXT>[CSS3TEXT]</a>. 1.5206 + Also, a <a data-link-type=property href=http://dev.w3.org/csswg/css-fonts-3/#propdef-font-variant>font-variant</a> value of <span class=css data-link-type=maybe>full-width</span> must be ignored in such cases: 1.5207 + whether applied via <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a> descriptor or property declaration, 1.5208 + within the combined text this value does not not cause the UA to enable that font feature. <a data-biblio-type=normative data-link-type=biblio href=#css3-fonts title=CSS3-FONTS>[CSS3-FONTS]</a> 1.5209 1.5210 <div class=example> 1.5211 - <p>For example, an author might apply both ‘<code 1.5212 - class=property>text-transform</code>’ and ‘<a 1.5213 - href="#text-combine-horizontal0"><code 1.5214 - class=property>text-combine-horizontal</code></a>’ to a date set in 1.5215 - vertical text. 1.5216 - 1.5217 - <pre>date { text-combine-horizontal: digits 2; text-transform: full-width; }</pre> 1.5218 - 1.5219 - <p>Suppose this style rule is applied to a date such as. 1.5220 - 1.5221 - <pre><date>2010年2月23日</date></pre> 1.5222 - 1.5223 - <p>The "2010" is too long to be combined (4 digits), but the "2" and "23" 1.5224 - will be affected. Since "23" is more than one character, it will not be 1.5225 - affected by ‘<code class=css>text-transform: full-width</code>’. 1.5226 - However since the "2" is only one character, it will be transformed to a 1.5227 - fullwidth "２". Since the "2010" was not combined, its digits, too, will 1.5228 - be transformed to fullwidth "２０１０"; and being fullwidth, they 1.5229 - will be typeset upright, giving the following result: 1.5230 - 1.5231 - <pre style="text-align: center"> 1.5232 -<!-- -->２ 1.5233 + <p>For example, an author might apply both <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-3/#text-transform0 title=text-transform>text-transform</a> and <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a> 1.5234 + to a date set in vertical text. 1.5235 +<pre>date { text-combine-horizontal: digits 2; text-transform: full-width; }</pre> <p>Suppose this style rule is applied to a date such as. 1.5236 +<pre><date>2010年2月23日</date></pre> <p>The "2010" is too long to be combined (4 digits), but the "2" and "23" will be affected. 1.5237 + Since "23" is more than one character, it will not be affected by <span class=css data-link-type=maybe>text-transform: full-width</span>. 1.5238 + However since the "2" is only one character, it will be transformed to a fullwidth "２". 1.5239 + Since the "2010" was not combined, its digits, too, will be transformed to fullwidth "２０１０"; 1.5240 + and being fullwidth, they will be typeset upright, giving the following result: 1.5241 + <pre style="text-align: center"><!-- -->２ 1.5242 <!-- -->０ 1.5243 <!-- -->１ 1.5244 <!-- -->０ 1.5245 @@ -3418,125 +2332,79 @@ 1.5246 <!-- -->２ 1.5247 <!-- -->月 1.5248 <!-- -->23 1.5249 -<!-- -->日</pre> 1.5250 - </div> 1.5251 +<!-- -->日</pre> </div> 1.5252 1.5253 - <p>When combining text as for ‘<code class=css>text-combine-horizontal: 1.5254 - all</code>’, the glyphs of the combined text are composed horizontally 1.5255 - (ignoring ‘<code class=property>letter-spacing</code>’ and any forced 1.5256 - line breaks, but using the specified font settings), similar to the 1.5257 - contents of an inline-box with a horizontal writing mode and a line-height 1.5258 - of 1em. The effective size of the composition is assumed to be 1em square; 1.5259 - anything outside the square is not measured for layout purposes. The UA 1.5260 - should center the glyphs horizontally and vertically within the measured 1.5261 - 1em square. The baseline of the resulting composition must be chosen such 1.5262 - that the square is centered between the text-over and text-under baselines 1.5263 - of its parent inline box prior to any baseline alignment shift (‘<code 1.5264 - class=property>vertical-align</code>’). For bidi reordering, the 1.5265 - composition is treated the same as a character with ‘<code 1.5266 - class=css>text-orientation: upright</code>’. For line breaking before 1.5267 - and after the composition, it is treated as a regular inline with its 1.5268 - actual contents. For other text layout purposes, e.g. emphasis marks, 1.5269 - text-decoration, spacing, etc. the resulting composition is treated as a 1.5270 - single glyph representing the Object Replacement Character U+FFFC. 1.5271 + <p>When combining text as for <span class=css data-link-type=maybe>text-combine-horizontal: all</span>, 1.5272 + the glyphs of the combined text are composed horizontally 1.5273 + (ignoring <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-3/#letter-spacing0 title=letter-spacing>letter-spacing</a> and any forced line breaks, but using the specified font settings), 1.5274 + similar to the contents of an inline-box with a horizontal writing mode and a line-height of 1em. 1.5275 + The effective size of the composition is assumed to be 1em square; 1.5276 + anything outside the square is not measured for layout purposes. 1.5277 + The UA should center the glyphs horizontally and vertically within the measured 1em square. 1.5278 + The baseline of the resulting composition must be chosen such that the square is centered 1.5279 + between the text-over and text-under baselines of its parent inline box prior to any baseline alignment shift (<a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align title=vertical-align>vertical-align</a>). 1.5280 + For bidi reordering, the composition is treated the same as a character with <span class=css data-link-type=maybe>text-orientation: upright</span>. 1.5281 + For line breaking before and after the composition, it is treated as a regular inline with its actual contents. 1.5282 + For other text layout purposes, 1.5283 + e.g. emphasis marks, text-decoration, spacing, 1.5284 + etc. the resulting composition is treated as a single glyph 1.5285 + representing the Object Replacement Character U+FFFC. 1.5286 1.5287 <p>The UA must ensure that the combined advance width of the composition 1.5288 - fits within 1em by compressing the combined text if necessary. (This does 1.5289 - not necessarily mean that the glyphs will fit within 1em, as some glyphs 1.5290 - are designed to draw outside their geometric boundaries.) OpenType 1.5291 - implementations <em>must</em> use width-specific variants (OpenType 1.5292 - features <code>hwid</code>/<code>twid</code>/<code>qwid</code>) to 1.5293 - compress text in cases where those variants are available for all <a 1.5294 - href="#character"><i>characters</i></a> in the composition. Otherwise, the 1.5295 - UA may use any means to compress the text, including substituting 1.5296 - half-width, third-width, and/or quarter-width glyphs provided by the font, 1.5297 - using other font features designed to compress text horizontally, scaling 1.5298 - the text geometrically, or any combination thereof. 1.5299 + fits within 1em by compressing the combined text if necessary. 1.5300 + (This does not necessarily mean that the glyphs will fit within 1em, 1.5301 + as some glyphs are designed to draw outside their geometric boundaries.) 1.5302 + OpenType implementations <em>must</em> use width-specific variants 1.5303 + (OpenType features <code>hwid</code>/<code>twid</code>/<code>qwid</code>) 1.5304 + to compress text 1.5305 + in cases where those variants are available for all <a href=#character>characters</a> in the composition. 1.5306 + Otherwise, the UA may use any means to compress the text, 1.5307 + including substituting half-width, third-width, and/or quarter-width glyphs provided by the font, 1.5308 + using other font features designed to compress text horizontally, 1.5309 + scaling the text geometrically, 1.5310 + or any combination thereof. 1.5311 1.5312 <div class=example> 1.5313 - <p>For example, a simple OpenType-based implementation might compress the 1.5314 - text as follows: 1.5315 - 1.5316 - <ol> 1.5317 - <li>Enable 1/<var>n</var>-width glyphs for combined text of <var>n</var> 1.5318 - <a href="#character"><i>characters</i></a>. (I.e. Use OpenType 1.5319 - <code>hwid</code> for 2 <a href="#character"><i>characters</i></a>, 1.5320 - <code>twid</code> for 3 <a href="#character"><i>characters</i></a>, 1.5321 - etc.) Note that the number of <a href="#character"><i>characters</i></a> 1.5322 - ≠ number of Unicode codepoints! 1.5323 - 1.5324 - <li>Horizontally scale the result to 1em if it is not yet 1em or 1.5325 - narrower. 1.5326 - </ol> 1.5327 - 1.5328 - <p>A more sophisticated OpenType implementation might compose the text 1.5329 - first with normal (proportional-width) glyphs to see if that fits, then 1.5330 - substitute in half-width or third-width forms as available and necessary, 1.5331 + <p>For example, a simple OpenType-based implementation might compress the text as follows: 1.5332 + <ol> 1.5333 + <li>Enable 1/<var>n</var>-width glyphs for combined text of <var>n</var> <a href=#character>characters</a>. 1.5334 + (I.e. Use OpenType <code>hwid</code> for 2 <a href=#character>characters</a>, <code>twid</code> for 3 <a href=#character>characters</a>, etc.) 1.5335 + Note that the number of <a href=#character>characters</a> ≠ number of Unicode codepoints! 1.5336 + <li>Horizontally scale the result to 1em if it is not yet 1em or narrower. 1.5337 + </ol> 1.5338 + <p>A more sophisticated OpenType implementation might compose the text 1.5339 + first with normal (proportional-width) glyphs to see if that fits, 1.5340 + then substitute in half-width or third-width forms as available and necessary, 1.5341 possibly adjusting its approach or combining it with scaling operations 1.5342 depending on the available glyph substitutions. 1.5343 </div> 1.5344 1.5345 - <p>In some fonts, the ideographic glyphs are given a compressed design such 1.5346 - that they are 1em wide but shorter than 1em tall. To accommodate such 1.5347 - fonts, the UA may vertically scale the the composition to match the 1.5348 - advance height of 水 U+6C34. 1.5349 - <!-- 水 U+6C34 was chosen because it is a very basic character common to 1.5350 + <p>In some fonts, the ideographic glyphs are given a compressed design 1.5351 + such that they are 1em wide but shorter than 1em tall. 1.5352 + To accommodate such fonts, the UA may vertically scale the the composition 1.5353 + to match the advance height of 水 U+6C34. 1.5354 + <!-- 水 U+6C34 was chosen because it is a very basic character common to 1.5355 all Han-based scripts, so would have to appear in any usable ideographic 1.5356 font; and its shape is very full in both dimensions, so it would be 1.5357 unlikely to be shortened in a proportional font --> 1.5358 - <!-- 1.5359 + 1.5360 +<!-- 1.5361 <h3 id="text-combine-mode"> 1.5362 Horizontal-in-Vertical Glyph Scaling: the 'text-combine-mode' property</h3> 1.5363 1.5364 - <table class="propdef"> 1.5365 - <tbody> 1.5366 - <tr> 1.5367 - <th>Name: 1.5368 - <td><dfn>text-combine-mode</dfn> 1.5369 - </tr> 1.5370 - <tr> 1.5371 - <th><a href="#values">Value</a>: 1.5372 - <td>auto | compress | [ no-compress || use-glyphs ] 1.5373 - </tr> 1.5374 - <tr> 1.5375 - <th>Initial: 1.5376 - <td>auto 1.5377 - </tr> 1.5378 - <tr> 1.5379 - <th>Applies to: 1.5380 - <td>non-replaced inline elements 1.5381 - </tr> 1.5382 - <tr> 1.5383 - <th>Inherited: 1.5384 - <td>yes 1.5385 - </tr> 1.5386 - <tr> 1.5387 - <th>Percentages: 1.5388 - <td>N/A 1.5389 - </tr> 1.5390 - <tr> 1.5391 - <th>Media: 1.5392 - <td>visual 1.5393 - </tr> 1.5394 - <tr> 1.5395 - <th>Computed value: 1.5396 - <td>specified value 1.5397 - </tr> 1.5398 - </tbody> 1.5399 - </table> 1.5400 - 1.5401 +<table class='propdef'><tr><th>Name:<td>text-combine-mode<tr><th>Value:<td>auto | compress | [ no-compress || use-glyphs ]<tr><th>Initial:<td>auto<tr><th>Applies to:<td>non-replaced inline elements<tr><th>Inherited:<td>yes<tr><th>Percentages:<td>n/a<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value</table> 1.5402 <p>This property controls how multiple characters are combined into the 1.5403 space of a single character when specified to do so via 1.5404 'text-combine-horizontal'. Values have the following meanings:</p> 1.5405 1.5406 - <dl> 1.5407 - <dt><dfn title="text-combine-mode:auto">auto</dfn> 1.5408 + <dl dfn-for=text-combine-mode dfn-type=value> 1.5409 + <dt><dfn>auto</dfn> 1.5410 <dd>If the contents are wider than 1em, the UA must attempt to fit the 1.5411 contents within 1em, but may use any method to do so. 1.5412 - <dt><dfn title="text-combine-mode:compress">compress</dfn> 1.5413 + <dt><dfn>compress</dfn> 1.5414 <dd>Compress the composition (horizontally) as a whole until it fits within 1em. 1.5415 Do not substitute alternate-width glyphs. 1.5416 - <dt><dfn title="text-combine-mode:use-glyphs">use-glyphs</dfn> 1.5417 + <dt><dfn>use-glyphs</dfn> 1.5418 <dd>Attempt to substitute narrower glyphs as necessary to make the 1.5419 composition fit within 1em: 1.5420 <ul> 1.5421 @@ -3547,354 +2415,121 @@ 1.5422 </ul> 1.5423 <p>Since even fonts that have fractional-width glyphs available do 1.5424 not have such glyphs for all characters, the UA must ensure the 1.5425 - expected advance width for ''use-glyphs'' by either compressing or 1.5426 + expected advance width for <span data-link-type="maybe" class="css">use-glyphs</span> by either compressing or 1.5427 padding (equally on both sides) each glyph individually if it does 1.5428 not match the required advance width. (This step does not apply if 1.5429 - ''no-compress'' is specified.) 1.5430 - <dt><dfn title="text-combine-mode:no-compress">no-compress</dfn> 1.5431 + <span data-link-type="maybe" class="css">no-compress</span> is specified.) 1.5432 + <dt><dfn>no-compress</dfn> 1.5433 <dd>Do not compress the composition or perform any glyph substitution 1.5434 in order to make the composition fit within 1em. 1.5435 - When combined with ''use-glyphs'', however, this indicates to perform 1.5436 - glyph substitution if possible per ''use-glyphs'' but not to compress 1.5437 + When combined with <span data-link-type="maybe" class="css">use-glyphs</span>, however, this indicates to perform 1.5438 + glyph substitution if possible per <span data-link-type="maybe" class="css">use-glyphs</span> but not to compress 1.5439 the glyphs if they do not fit the size requirements. 1.5440 This value may cause the glyphs to overflow the line significantly. 1.5441 </dl> 1.5442 --> 1.5443 - 1.5444 - <h2 class=no-num id=changes>Changes</h2> 1.5445 - 1.5446 - <h3 class=no-num id=changes-201205> Changes since the <a 1.5447 - href="http://www.w3.org/TR/2012/WD-css3-writing-modes-2012115/">November 1.5448 - 2012 CSS Writing Modes Module Level 3 <abbr 1.5449 - title="Working Draft">WD</abbr></a></h3> 1.5450 - 1.5451 +<h2 class=no-num id=changes><span class=content>Changes</span><a class=section-link href=#changes>§</a></h2> 1.5452 + <h3 class=no-num id=changes-2012050><span class=content> 1.5453 + Changes since the <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-2012115/>November 1.5454 + 2012 CSS Writing Modes Module Level 3 <abbr title="Working Draft">WD</abbr></a></span><a class=section-link href=#changes-2012050>§</a></h3> 1.5455 <ul> 1.5456 - <li>Added back ‘<code class=css>digits</code>’ value of ‘<a 1.5457 - href="#text-combine-horizontal0"><code 1.5458 - class=property>text-combine-horizontal</code></a>’ and tightened up 1.5459 - rules for compressing text. 1.5460 - 1.5461 - <li>Various fixes/clarifications to orthogonal flows. 1.5462 + <li>Added back <span class=css data-link-type=maybe>digits</span> value of <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a> and tightened up rules for compressing text. 1.5463 + <li>Various fixes/clarifications to orthogonal flows. 1.5464 </ul> 1.5465 1.5466 - <h3 class=no-num id=changes-201205> Changes since the <a 1.5467 - href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">May 2012 1.5468 - CSS Writing Modes Module Level 3 <abbr title="Working Draft">WD</abbr></a></h3> 1.5469 + <h3 class=no-num id=changes-201205><span class=content> 1.5470 + Changes since the <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/>May 1.5471 + 2012 CSS Writing Modes Module Level 3 <abbr title="Working Draft">WD</abbr></a></span><a class=section-link href=#changes-201205>§</a></h3> 1.5472 1.5473 - <p>Major changes include: 1.5474 - 1.5475 + <p>Major changes include:</p> 1.5476 <ul> 1.5477 - <li>Replaced ‘<a href="#unicode-bidi0"><code 1.5478 - class=property>unicode-bidi</code></a>’ value of ‘<code 1.5479 - class=css>isolate bidi-override</code>’ with single keyword ‘<a 1.5480 - href="#isolate-override"><code class=css>isolate-override</code></a>’. 1.5481 - 1.5482 - <li>Clarified that bidi isolated content does not affect plaintext 1.5483 - heuristics of the containing paragraph. 1.5484 - 1.5485 - <li>Lots of other clarifications to bidi. 1.5486 - 1.5487 - <li>Renamed ‘<code class=css>mixed-right</code>’ value of ‘<a 1.5488 - href="#text-orientation0"><code 1.5489 - class=property>text-orientation</code></a>’ to ‘<a 1.5490 - href="#mixed"><code class=css>mixed</code></a>’. 1.5491 - 1.5492 - <li>Updated references to UTR50 for orientation of characters in Unicode 1.5493 - and improved text defining vertical typesetting rules. 1.5494 - 1.5495 - <li>Fixed errors and clarified auto-sizing rules for orthogonal flows. 1.5496 - 1.5497 - <li>Replaced Appendix D with references to the new <a href="#CSS3-SIZING" 1.5498 - rel=biblioentry>[CSS3-SIZING]<!--{{!CSS3-SIZING}}--></a> module. 1.5499 - 1.5500 - <li>Removed ‘<code class=property>text-combine-mode</code>’ property. 1.5501 - 1.5502 - <li>Removed all ‘<a href="#text-combine-horizontal0"><code 1.5503 - class=property>text-combine-horizontal</code></a>’ values except 1.5504 - ‘<code class=css>none</code>’ and ‘<code class=css>all</code>’. 1.5505 - 1.5506 - <li>Defined effect of ‘<a href="#text-combine-horizontal0"><code 1.5507 - class=property>text-combine-horizontal</code></a>’ on line-breaking. 1.5508 + <li>Replaced <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#unicode-bidi0 title=unicode-bidi>unicode-bidi</a> value of <span class=css data-link-type=maybe>isolate bidi-override</span> with single keyword <a class=css data-link-type=maybe href=#valuedef-isolate-override>isolate-override</a>. 1.5509 + <li>Clarified that bidi isolated content does not affect plaintext heuristics of the containing paragraph. 1.5510 + <li>Lots of other clarifications to bidi. 1.5511 + <li>Renamed <span class=css data-link-type=maybe>mixed-right</span> value of <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a> to <a class=css data-link-type=maybe href=#valuedef-mixed>mixed</a>. 1.5512 + <li>Updated references to UTR50 for orientation of characters in Unicode 1.5513 + and improved text defining vertical typesetting rules. 1.5514 + <li>Fixed errors and clarified auto-sizing rules for orthogonal flows. 1.5515 + <li>Replaced Appendix D with references to the new <a data-biblio-type=normative data-link-type=biblio href=#css3-sizing title=CSS3-SIZING>[CSS3-SIZING]</a> module. 1.5516 + <li>Removed <a class=property data-link-type=propdesc title=text-combine-mode>text-combine-mode</a> property. 1.5517 + <li>Removed all <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a> values except <a class=css data-link-type=maybe href=#valuedef-none>none</a> and <a class=css data-link-type=maybe href=#valuedef-all>all</a>. 1.5518 + <li>Defined effect of <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a> on line-breaking. 1.5519 </ul> 1.5520 1.5521 - <h3 class=no-num id=changes-201109> Changes since the <a 1.5522 - href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/">September 1.5523 - 2011 CSS Writing Modes Module Level 3 <abbr 1.5524 - title="Working Draft">WD</abbr></a></h3> 1.5525 + <h3 class=no-num id=changes-201109><span class=content> 1.5526 + Changes since the <a href=http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/>September 1.5527 + 2011 CSS Writing Modes Module Level 3 <abbr title="Working Draft">WD</abbr></a></span><a class=section-link href=#changes-201109>§</a></h3> 1.5528 1.5529 - <p>Major changes include: 1.5530 - 1.5531 + <p>Major changes include:</p> 1.5532 <ul> 1.5533 - <li>Hooked up vertical typesetting details to UTR50. 1.5534 - 1.5535 - <li>Removed concept of "typographic modes". 1.5536 - 1.5537 - <li>Altered <a href="#orthogonal-auto">orthogonal sizing</a> to take into 1.5538 - account the fill-available size; now the minimum of the fill-available 1.5539 - and ICB size is used to resolve ‘<code class=property>auto</code>’ 1.5540 - sizes. 1.5541 - 1.5542 - <li>Renamed ‘<code class=css>digits</code>’ to ‘<code 1.5543 - class=css>numeric</code>’ and ‘<code class=css>ascii-digits</code>’ 1.5544 - to ‘<code class=css>digits</code>’ for ‘<a 1.5545 - href="#text-combine-horizontal0"><code 1.5546 - class=property>text-combine-horizontal</code></a>’. 1.5547 - 1.5548 - <li>Defined interaction of ‘<a href="#text-combine-horizontal0"><code 1.5549 - class=property>text-combine-horizontal</code></a>’ and ‘<code 1.5550 - class=property>text-transform</code>’. 1.5551 + <li>Hooked up vertical typesetting details to UTR50. 1.5552 + <li>Removed concept of "typographic modes". 1.5553 + <li>Altered <a href=#orthogonal-auto>orthogonal sizing</a> 1.5554 + to take into account the fill-available size; now the minimum of the 1.5555 + fill-available and ICB size is used to resolve <span class=css data-link-type=maybe>auto</span> sizes. 1.5556 + <li>Renamed <span class=css data-link-type=maybe>digits</span> to <span class=css data-link-type=maybe>numeric</span> and <span class=css data-link-type=maybe>ascii-digits</span> to <span class=css data-link-type=maybe>digits</span> for <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a>. 1.5557 + <li>Defined interaction of <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-3/#text-transform0 title=text-transform>text-transform</a>. 1.5558 </ul> 1.5559 1.5560 - <h2 id=conformance><span class=secno>10. </span> Conformance</h2> 1.5561 1.5562 - <h3 id=conventions><span class=secno>10.1. </span> Document Conventions</h3> 1.5563 +<h2 class=no-num id=acknowledgements><span class=content> 1.5564 +Acknowledgements</span><a class=section-link href=#acknowledgements>§</a></h2> 1.5565 1.5566 - <p>Conformance requirements are expressed with a combination of descriptive 1.5567 - assertions and RFC 2119 terminology. The key words “MUST”, “MUST 1.5568 - NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 1.5569 - “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 1.5570 - normative parts of this document are to be interpreted as described in RFC 1.5571 - 2119. However, for readability, these words do not appear in all uppercase 1.5572 - letters in this specification. 1.5573 +<p>John Daggett, Martin Heijdra, Laurentiu Iancu, 1.5574 +Yasuo Kida, Tatsuo Kobayashi, Toshi Kobayashi, 1.5575 +Ken Lunde, Nat McCully, Eric Muller, 1.5576 +Paul Nelson, Kenzou Onozawa, Dwayne Robinson, 1.5577 +Michel Suignard, Taro Yamamoto, Steve Zilles</p> 1.5578 1.5579 - <p>All of the text of this specification is normative except sections 1.5580 - explicitly marked as non-normative, examples, and notes. <a 1.5581 - href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 1.5582 +<h2 class=no-num id=character-properties><span class=content>Appendix A. 1.5583 +Characters and Properties</span><a class=section-link href=#character-properties>§</a></h2> 1.5584 1.5585 - <p>Examples in this specification are introduced with the words “for 1.5586 - example” or are set apart from the normative text with 1.5587 - <code>class="example"</code>, like this: 1.5588 - 1.5589 - <div class=example> 1.5590 - <p>This is an example of an informative example. 1.5591 - </div> 1.5592 - 1.5593 - <p>Informative notes begin with the word “Note” and are set apart from 1.5594 - the normative text with <code>class="note"</code>, like this: 1.5595 - 1.5596 - <p class=note>Note, this is an informative note. 1.5597 - 1.5598 - <h3 id=conformance-classes><span class=secno>10.2. </span> Conformance 1.5599 - Classes</h3> 1.5600 - 1.5601 - <p>Conformance to CSS Writing Modes Level 3 is defined for three 1.5602 - conformance classes: 1.5603 - 1.5604 + <p>Unicode defines three codepoint-level properties that are referenced 1.5605 + in CSS Writing Modes: 1.5606 <dl> 1.5607 - <dt><dfn id=style-sheet title="style sheet!!as conformance class">style 1.5608 - sheet</dfn> 1.5609 - 1.5610 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 1.5611 - style sheet</a>. 1.5612 - 1.5613 - <dt><dfn id=renderer>renderer</dfn> 1.5614 - 1.5615 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 1.5616 - that interprets the semantics of a style sheet and renders documents that 1.5617 - use them. 1.5618 - 1.5619 - <dt><dfn id=authoring-tool>authoring tool</dfn> 1.5620 - 1.5621 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 1.5622 - that writes a style sheet. 1.5623 + <dt><a href=http://www.unicode.org/reports/tr11/#Definitions>East Asian width</a> 1.5624 + <dd>Defined in <a data-biblio-type=normative data-link-type=biblio href=#uax11 title=UAX11>[UAX11]</a> and given as the East_Asian_Width property 1.5625 + in the Unicode Character Database <a data-biblio-type=normative data-link-type=biblio href=#uax44 title=UAX44>[UAX44]</a>. 1.5626 + <dt><a href=http://www.unicode.org/reports/tr44/#General_Category_Values>General Category</a> 1.5627 + <dd>Defined in <a data-biblio-type=normative data-link-type=biblio href=#uax44 title=UAX44>[UAX44]</a> and given as the General_Category property 1.5628 + in the Unicode Character Database <a data-biblio-type=normative data-link-type=biblio href=#uax44 title=UAX44>[UAX44]</a>. 1.5629 + <dt><a href=http://www.unicode.org/reports/tr24/#Values>Script property</a> 1.5630 + <dd>Defined in <a data-biblio-type=normative data-link-type=biblio href=#uax24 title=UAX24>[UAX24]</a> and given as the Script property 1.5631 + in the Unicode Character Database <a data-biblio-type=normative data-link-type=biblio href=#uax44 title=UAX44>[UAX44]</a>. (UAs should 1.5632 + include any ScriptExtensions.txt assignments in this mapping.) 1.5633 </dl> 1.5634 1.5635 - <p>A style sheet is conformant to CSS Writing Modes Level 3 if all of its 1.5636 - declarations that use properties defined in this module have values that 1.5637 - are valid according to the generic CSS grammar and the individual grammars 1.5638 - of each property as given in this module. 1.5639 + <p id=grapheme-cluster>In several sections (as noted), the term 1.5640 + <dfn data-dfn-type=dfn data-noexport="" id=character>character</dfn> is defined as <em>extended grapheme cluster</em> 1.5641 + per <a data-biblio-type=normative data-link-type=biblio href=#uax29 title=UAX29>[UAX29]</a>. It is roughly equivalent to what a language user 1.5642 + considers to be a character or a basic unit of the script (which 1.5643 + might not be a single Unicode codepoint). 1.5644 + The UA may further tailor this definition as appropriate to match 1.5645 + typographic convention. For example, when typesetting <a class=css data-link-type=maybe href=#valuedef-upright>upright</a>, 1.5646 + Tibetan tsek and shad marks are kept with the preceding letters, 1.5647 + rather than treated as an independent cluster. 1.5648 1.5649 - <p>A renderer is conformant to CSS Writing Modes Level 3 if, in addition to 1.5650 - interpreting the style sheet as defined by the appropriate specifications, 1.5651 - it supports all the features defined by CSS Writing Modes Level 3 by 1.5652 - parsing them correctly and rendering the document accordingly. However, 1.5653 - the inability of a UA to correctly render a document due to limitations of 1.5654 - the device does not make the UA non-conformant. (For example, a UA is not 1.5655 - required to render color on a monochrome monitor.) 1.5656 - 1.5657 - <p>An authoring tool is conformant to CSS Writing Modes Level 3 if it 1.5658 - writes style sheets that are syntactically correct according to the 1.5659 - generic CSS grammar and the individual grammars of each feature in this 1.5660 - module, and meet all other conformance requirements of style sheets as 1.5661 - described in this module. 1.5662 - 1.5663 - <h3 id=partial><span class=secno>10.3. </span> Partial Implementations</h3> 1.5664 - 1.5665 - <p>So that authors can exploit the forward-compatible parsing rules to 1.5666 - assign fallback values, CSS renderers <strong>must</strong> treat as 1.5667 - invalid (and <a 1.5668 - href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as 1.5669 - appropriate</a>) any at-rules, properties, property values, keywords, and 1.5670 - other syntactic constructs for which they have no usable level of support. 1.5671 - In particular, user agents <strong>must not</strong> selectively ignore 1.5672 - unsupported component values and honor supported values in a single 1.5673 - multi-value property declaration: if any value is considered invalid (as 1.5674 - unsupported values must be), CSS requires that the entire declaration be 1.5675 - ignored. 1.5676 - 1.5677 - <h3 id=experimental><span class=secno>10.4. </span> Experimental 1.5678 - Implementations</h3> 1.5679 - 1.5680 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 1.5681 - reserves a <a 1.5682 - href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 1.5683 - syntax</a> for proprietary and experimental extensions to CSS. 1.5684 - 1.5685 - <p>Prior to a specification reaching the Candidate Recommendation stage in 1.5686 - the W3C process, all implementations of a CSS feature are considered 1.5687 - experimental. The CSS Working Group recommends that implementations use a 1.5688 - vendor-prefixed syntax for such features, including those in W3C Working 1.5689 - Drafts. This avoids incompatibilities with future changes in the draft. 1.5690 - 1.5691 - <h3 id=testing><span class=secno>10.5. </span>Non-Experimental 1.5692 - Implementations</h3> 1.5693 - 1.5694 - <p>Once a specification reaches the Candidate Recommendation stage, 1.5695 - non-experimental implementations are possible, and implementors should 1.5696 - release an unprefixed implementation of any CR-level feature they can 1.5697 - demonstrate to be correctly implemented according to spec. 1.5698 - 1.5699 - <p>To establish and maintain the interoperability of CSS across 1.5700 - implementations, the CSS Working Group requests that non-experimental CSS 1.5701 - renderers submit an implementation report (and, if necessary, the 1.5702 - testcases used for that implementation report) to the W3C before releasing 1.5703 - an unprefixed implementation of any CSS features. Testcases submitted to 1.5704 - W3C are subject to review and correction by the CSS Working Group. 1.5705 - 1.5706 - <p>Further information on submitting testcases and implementation reports 1.5707 - can be found from on the CSS Working Group's website at <a 1.5708 - href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 1.5709 - Questions should be directed to the <a 1.5710 - href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 1.5711 - mailing list. 1.5712 - 1.5713 - <h3 id=cr-exit-criteria><span class=secno>10.6. </span> CR Exit Criteria</h3> 1.5714 - 1.5715 - <p> For this specification to be advanced to Proposed Recommendation, there 1.5716 - must be at least two independent, interoperable implementations of each 1.5717 - feature. Each feature may be implemented by a different set of products, 1.5718 - there is no requirement that all features be implemented by a single 1.5719 - product. For the purposes of this criterion, we define the following 1.5720 - terms: 1.5721 - 1.5722 - <dl> 1.5723 - <dt>independent 1.5724 - 1.5725 - <dd>each implementation must be developed by a different party and cannot 1.5726 - share, reuse, or derive from code used by another qualifying 1.5727 - implementation. Sections of code that have no bearing on the 1.5728 - implementation of this specification are exempt from this requirement. 1.5729 - 1.5730 - <dt>interoperable 1.5731 - 1.5732 - <dd>passing the respective test case(s) in the official CSS test suite, 1.5733 - or, if the implementation is not a Web browser, an equivalent test. Every 1.5734 - relevant test in the test suite should have an equivalent test created if 1.5735 - such a user agent (UA) is to be used to claim interoperability. In 1.5736 - addition if such a UA is to be used to claim interoperability, then there 1.5737 - must one or more additional UAs which can also pass those equivalent 1.5738 - tests in the same way for the purpose of interoperability. The equivalent 1.5739 - tests must be made publicly available for the purposes of peer review. 1.5740 - 1.5741 - <dt>implementation 1.5742 - 1.5743 - <dd>a user agent which: 1.5744 - <ol class=inline> 1.5745 - <li>implements the specification. 1.5746 - 1.5747 - <li>is available to the general public. The implementation may be a 1.5748 - shipping product or other publicly available version (i.e., beta 1.5749 - version, preview release, or “nightly build”). Non-shipping product 1.5750 - releases must have implemented the feature(s) for a period of at least 1.5751 - one month in order to demonstrate stability. 1.5752 - 1.5753 - <li>is not experimental (i.e., a version specifically designed to pass 1.5754 - the test suite and is not intended for normal usage going forward). 1.5755 - </ol> 1.5756 - </dl> 1.5757 - 1.5758 - <p>The specification will remain Candidate Recommendation for at least six 1.5759 - months. 1.5760 - 1.5761 - <h2 class=no-num id=acknowledgements> Acknowledgements</h2> 1.5762 - 1.5763 - <p>John Daggett, Martin Heijdra, Laurentiu Iancu, Yasuo Kida, Tatsuo 1.5764 - Kobayashi, Toshi Kobayashi, Ken Lunde, Nat McCully, Eric Muller, Paul 1.5765 - Nelson, Kenzou Onozawa, Dwayne Robinson, Michel Suignard, Taro Yamamoto, 1.5766 - Steve Zilles 1.5767 - 1.5768 - <h2 class=no-num id=character-properties>Appendix A. Characters and 1.5769 - Properties</h2> 1.5770 - 1.5771 - <p>Unicode defines three codepoint-level properties that are referenced in 1.5772 - CSS Writing Modes: 1.5773 - 1.5774 - <dl> 1.5775 - <dt><a href="http://www.unicode.org/reports/tr11/#Definitions">East Asian 1.5776 - width</a> 1.5777 - 1.5778 - <dd>Defined in <a href="#UAX11" 1.5779 - rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a> and given as the 1.5780 - East_Asian_Width property in the Unicode Character Database <a 1.5781 - href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>. 1.5782 - 1.5783 - <dt><a 1.5784 - href="http://www.unicode.org/reports/tr44/#General_Category_Values">General 1.5785 - Category</a> 1.5786 - 1.5787 - <dd>Defined in <a href="#UAX44" 1.5788 - rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a> and given as the 1.5789 - General_Category property in the Unicode Character Database <a 1.5790 - href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>. 1.5791 - 1.5792 - <dt><a href="http://www.unicode.org/reports/tr24/#Values">Script 1.5793 - property</a> 1.5794 - 1.5795 - <dd>Defined in <a href="#UAX24" 1.5796 - rel=biblioentry>[UAX24]<!--{{!UAX24}}--></a> and given as the Script 1.5797 - property in the Unicode Character Database <a href="#UAX44" 1.5798 - rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>. (UAs should include any 1.5799 - ScriptExtensions.txt assignments in this mapping.) 1.5800 - </dl> 1.5801 - 1.5802 - <p id=grapheme-cluster>In several sections (as noted), the term <dfn 1.5803 - id=character>character</dfn> is defined as <em>extended grapheme 1.5804 - cluster</em> per <a href="#UAX29" 1.5805 - rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a>. It is roughly equivalent to 1.5806 - what a language user considers to be a character or a basic unit of the 1.5807 - script (which might not be a single Unicode codepoint). The UA may further 1.5808 - tailor this definition as appropriate to match typographic convention. For 1.5809 - example, when typesetting ‘<a href="#upright"><code 1.5810 - class=css>upright</code></a>’, Tibetan tsek and shad marks are kept with 1.5811 - the preceding letters, rather than treated as an independent cluster. 1.5812 - 1.5813 - <p>Unicode defines properties for characters, but for ‘<a 1.5814 - href="#text-orientation0"><code 1.5815 - class=property>text-orientation</code></a>’, it is necessary to 1.5816 - determine the properties of a grapheme cluster. For the purposes of CSS 1.5817 - Writing Modes, the properties of a grapheme cluster are given by its base 1.5818 - character—except in two cases: 1.5819 - 1.5820 + <p>Unicode defines properties for characters, but for <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a>, 1.5821 + it is necessary to determine the properties of a grapheme cluster. 1.5822 + For the purposes of CSS Writing Modes, the properties of a grapheme 1.5823 + cluster are given by its base character—except in two cases: 1.5824 <ul> 1.5825 - <li>Grapheme clusters formed with an Enclosing Mark (Me) of the Common 1.5826 - script are considered to be Other Symbols (So) in the Common script. They 1.5827 - are assumed to have the same Unicode properties as the Replacement 1.5828 - Character U+FFFD. 1.5829 - 1.5830 - <li>Grapheme clusters formed with a Space Separator (Zs) as the base are 1.5831 - considered to be Modifier Symbols (Sk). They are assumed to have the same 1.5832 - East Asian Width property as the base, but take their other properties 1.5833 - from the first combining character in the sequence. 1.5834 + <li>Grapheme clusters formed with an Enclosing Mark (Me) of the Common 1.5835 + script are considered to be Other Symbols (So) in the Common script. 1.5836 + They are assumed to have the same Unicode properties as the 1.5837 + Replacement Character U+FFFD. 1.5838 + <li>Grapheme clusters formed with a Space Separator (Zs) as the base 1.5839 + are considered to be Modifier Symbols (Sk). They are assumed to have 1.5840 + the same East Asian Width property as the base, but take their other 1.5841 + properties from the first combining character in the sequence. 1.5842 </ul> 1.5843 1.5844 - <h2 class=no-num id=bidi-html> Appendix B: Bidi Rules for HTML 4</h2> 1.5845 +<h2 class=no-num id=bidi-html><span class=content> 1.5846 +Appendix B: Bidi Rules for HTML 4</span><a class=section-link href=#bidi-html>§</a></h2> 1.5847 1.5848 - <p>The style sheet rules that would achieve the bidi behaviors specified in 1.5849 - <a href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a> for the 1.5850 - HTML Strict doctype are given below: 1.5851 - 1.5852 - <pre> 1.5853 -/* HTML dir attribute creates an embedding */ 1.5854 +<p>The style sheet rules that would achieve the bidi behaviors specified 1.5855 +in <a data-biblio-type=informative data-link-type=biblio href=#html401 title=HTML401>[HTML401]</a> for the HTML Strict doctype are given below: 1.5856 + <pre>/* HTML dir attribute creates an embedding */ 1.5857 *[dir="ltr"] { direction: ltr; unicode-bidi: embed; } 1.5858 *[dir="rtl"] { direction: rtl; unicode-bidi: embed; } 1.5859 1.5860 @@ -3909,503 +2544,276 @@ 1.5861 fieldset, form, 1.5862 h1, h2, h3, h4, h5, h6, 1.5863 { unicode-bidi: isolate; } 1.5864 - </pre> 1.5865 +</pre> 1.5866 +<h2 class=no-num id=script-orientations><span class=content>Appendix C: 1.5867 +Vertical Scripts in Unicode</span><a class=section-link href=#script-orientations>§</a></h2> 1.5868 + <p><em>This section is informative.</em></p> 1.5869 1.5870 - <h2 class=no-num id=script-orientations>Appendix C: Vertical Scripts in 1.5871 - Unicode</h2> 1.5872 - 1.5873 - <p><em>This section is informative.</em> 1.5874 - 1.5875 - <p>This appendix lists the vertical and bi-orientational scripts in Unicode 1.5876 - 6.0 <a href="#UNICODE" rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a> 1.5877 - and their transformation from horizontal to vertical orientation. Any 1.5878 - script not listed explicitly is assumed to be <i>horizontal-only</i>. The 1.5879 - script classification of Unicode characters is given by <a href="#UAX24" 1.5880 - rel=biblioentry>[UAX24]<!--{{!UAX24}}--></a>. 1.5881 + <p>This appendix lists the vertical and bi-orientational scripts in Unicode 6.0 1.5882 + <a data-biblio-type=normative data-link-type=biblio href=#unicode title=UNICODE>[UNICODE]</a> and their transformation from horizontal to vertical orientation. 1.5883 + Any script not listed explicitly is assumed to be <i>horizontal-only</i>. 1.5884 + The script classification of Unicode characters is given by <a data-biblio-type=normative data-link-type=biblio href=#uax24 title=UAX24>[UAX24]</a>. 1.5885 1.5886 <table class=data> 1.5887 - <caption>Vertical Scripts in Unicode</caption> 1.5888 - 1.5889 - <thead> 1.5890 - <tr> 1.5891 - <th>Code 1.5892 - 1.5893 - <th>Name 1.5894 - 1.5895 - <th>Transform (Clockwise) 1.5896 - 1.5897 - <th>Vertical Intrinsic Direction 1.5898 - 1.5899 - <tbody> 1.5900 - <tr> 1.5901 - <td>Bopo 1.5902 - 1.5903 - <td>Bopomofo 1.5904 - 1.5905 - <th>0° 1.5906 - 1.5907 - <th>ttb 1.5908 - 1.5909 - <tr> 1.5910 - <td>Egyp 1.5911 - 1.5912 - <td>Egyptian Hieroglyphs 1.5913 - 1.5914 - <th>0° 1.5915 - 1.5916 - <th>ttb 1.5917 - 1.5918 - <tr> 1.5919 - <td>Hira 1.5920 - 1.5921 - <td>Hiragana 1.5922 - 1.5923 - <th>0° 1.5924 - 1.5925 - <th>ttb 1.5926 - 1.5927 - <tr> 1.5928 - <td>Kana 1.5929 - 1.5930 - <td>Katakana 1.5931 - 1.5932 - <th>0° 1.5933 - 1.5934 - <th>ttb 1.5935 - 1.5936 - <tr> 1.5937 - <td>Hani 1.5938 - 1.5939 - <td>Han 1.5940 - 1.5941 - <th>0° 1.5942 - 1.5943 - <th>ttb 1.5944 - 1.5945 - <tr> 1.5946 - <td>Hang 1.5947 - 1.5948 - <td>Hangul 1.5949 - 1.5950 - <th>0° 1.5951 - 1.5952 - <th>ttb 1.5953 - 1.5954 - <tr> 1.5955 - <td>Merc 1.5956 - 1.5957 - <td>Meroitic Cursive 1.5958 - 1.5959 - <th>0° 1.5960 - 1.5961 - <th>ttb 1.5962 - 1.5963 - <tr> 1.5964 - <td>Mero 1.5965 - 1.5966 - <td>Meroitic Hieroglyphs 1.5967 - 1.5968 - <th>0° 1.5969 - 1.5970 - <th>ttb 1.5971 - 1.5972 - <tr> 1.5973 - <td>Mong 1.5974 - 1.5975 - <td>Mongolian 1.5976 - 1.5977 - <th>90° 1.5978 - 1.5979 - <th>ttb 1.5980 - 1.5981 - <tr> 1.5982 - <td>Ogam 1.5983 - 1.5984 - <td>Ogham 1.5985 - 1.5986 - <th>-90° 1.5987 - 1.5988 - <th>btt 1.5989 - 1.5990 - <tr> 1.5991 - <td>Orkh 1.5992 - 1.5993 - <td>Old Turkic 1.5994 - 1.5995 - <th>-90° 1.5996 - 1.5997 - <th>ttb 1.5998 - 1.5999 - <tr> 1.6000 - <td>Phag 1.6001 - 1.6002 - <td>Phags Pa 1.6003 - 1.6004 - <th>90° 1.6005 - 1.6006 - <th>ttb 1.6007 - 1.6008 - <tr> 1.6009 - <td>Yiii 1.6010 - 1.6011 - <td>Yi 1.6012 - 1.6013 - <th>0° 1.6014 - 1.6015 - <th>ttb 1.6016 + <caption>Vertical Scripts in Unicode</caption> 1.6017 + <thead> 1.6018 + <tr><th>Code <th>Name <th>Transform (Clockwise) <th>Vertical Intrinsic Direction 1.6019 + </thead> 1.6020 + <tbody> 1.6021 + <tr><td>Bopo <td>Bopomofo <th>0° <th>ttb 1.6022 + <tr><td>Egyp <td>Egyptian Hieroglyphs <th>0° <th>ttb 1.6023 + <tr><td>Hira <td>Hiragana <th>0° <th>ttb 1.6024 + <tr><td>Kana <td>Katakana <th>0° <th>ttb 1.6025 + <tr><td>Hani <td>Han <th>0° <th>ttb 1.6026 + <tr><td>Hang <td>Hangul <th>0° <th>ttb 1.6027 + <tr><td>Merc <td>Meroitic Cursive <th>0° <th>ttb 1.6028 + <tr><td>Mero <td>Meroitic Hieroglyphs <th>0° <th>ttb 1.6029 + <tr><td>Mong <td>Mongolian <th>90° <th>ttb 1.6030 + <tr><td>Ogam <td>Ogham <th>-90° <th>btt 1.6031 + <tr><td>Orkh <td>Old Turkic <th>-90° <th>ttb 1.6032 + <tr><td>Phag <td>Phags Pa <th>90° <th>ttb 1.6033 + <tr><td>Yiii <td>Yi <th>0° <th>ttb 1.6034 + </tbody> 1.6035 </table> 1.6036 1.6037 - <p><strong>Exceptions:</strong> For the purposes of this specification, all 1.6038 - fullwidth (F) and wide (W) characters are treated as belonging to a 1.6039 - vertical script, and halfwidth characters (H) are treated as belonging ot 1.6040 - a horizontal script. <a href="#UAX11" 1.6041 - rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a> 1.6042 + <p><strong>Exceptions:</strong> 1.6043 + For the purposes of this specification, all fullwidth (F) and wide (W) characters 1.6044 + are treated as belonging to a vertical script, 1.6045 + and halfwidth characters (H) are treated as belonging ot a horizontal script. 1.6046 + <a data-biblio-type=normative data-link-type=biblio href=#uax11 title=UAX11>[UAX11]</a> 1.6047 1.6048 - <p class=note> CSS3 Writing Modes cannot correctly handle either Ogham or 1.6049 - Old Turkic. It is recommended that ‘<code class=css>text-orientation: 1.6050 - sideways-left</code>’ be used to typeset these scripts. A future version 1.6051 - of CSS may define automatic handling of these scripts. 1.6052 + <p class=note> 1.6053 + CSS3 Writing Modes cannot correctly handle either Ogham or Old Turkic. 1.6054 + It is recommended that <span class=css data-link-type=maybe>text-orientation: sideways-left</span> be used to typeset these scripts. 1.6055 + A future version of CSS may define automatic handling of these scripts. 1.6056 1.6057 - <p class=note>Note that for vertical-only characters (such as Mongolian and 1.6058 - Phags Pa letters), the glyphs in the Unicode code charts are shown in 1.6059 - their vertical orientation. In horizontal text, they are typeset in a 90° 1.6060 - counter-clockwise rotation from this orientation. 1.6061 + <p class=note>Note that for vertical-only characters (such as Mongolian and Phags Pa letters), 1.6062 + the glyphs in the Unicode code charts are shown in their vertical orientation. 1.6063 + In horizontal text, they are typeset in a 90° counter-clockwise 1.6064 + rotation from this orientation. 1.6065 1.6066 - <h2 class=no-num id=references> References</h2> 1.6067 +<h2 class="no-ref no-num" id=conformance><span class=content> 1.6068 +Conformance</span><a class=section-link href=#conformance>§</a></h2> 1.6069 1.6070 - <h3 class=no-num id=normative-references> Normative references</h3> 1.6071 - <!--begin-normative--> 1.6072 - <!-- Sorted by label --> 1.6073 +<h3 class=no-ref id=conventions><span class=content> 1.6074 +Document conventions</span><a class=section-link href=#conventions>§</a></h3> 1.6075 1.6076 - <dl class=bibliography> 1.6077 - <dd style="display: none"><!-- keeps the doc valid if the DL is empty --> 1.6078 - <!----> 1.6079 + <p>Conformance requirements are expressed with a combination of 1.6080 + descriptive assertions and RFC 2119 terminology. The key words "MUST", 1.6081 + "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", 1.6082 + "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this 1.6083 + document are to be interpreted as described in RFC 2119. 1.6084 + However, for readability, these words do not appear in all uppercase 1.6085 + letters in this specification. 1.6086 1.6087 - <dt id=CSS21>[CSS21] 1.6088 + <p>All of the text of this specification is normative except sections 1.6089 + explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#rfc2119 title=RFC2119>[RFC2119]</a></p> 1.6090 1.6091 - <dd>Bert Bos; et al. <a 1.6092 - href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 1.6093 - Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 1.6094 - 2011. W3C Recommendation. URL: <a 1.6095 - href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 1.6096 - </dd> 1.6097 - <!----> 1.6098 + <p>Examples in this specification are introduced with the words "for example" 1.6099 + or are set apart from the normative text with <code>class="example"</code>, 1.6100 + like this: 1.6101 1.6102 - <dt id=CSS3-FONTS>[CSS3-FONTS] 1.6103 + <div class=example> 1.6104 + <p>This is an example of an informative example.</p> 1.6105 + </div> 1.6106 1.6107 - <dd>John Daggett. <a 1.6108 - href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/"><cite>CSS Fonts 1.6109 - Module Level 3.</cite></a> 12 February 2013. W3C Working Draft. (Work in 1.6110 - progress.) URL: <a 1.6111 - href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a> 1.6112 - </dd> 1.6113 - <!----> 1.6114 + <p>Informative notes begin with the word "Note" and are set apart from the 1.6115 + normative text with <code>class="note"</code>, like this: 1.6116 1.6117 - <dt id=CSS3-SIZING>[CSS3-SIZING] 1.6118 + <p class=note>Note, this is an informative note.</p> 1.6119 1.6120 - <dd>Tab Atkins Jr.; Elika J. Etemad. <a 1.6121 - href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/"><cite>CSS 1.6122 - Intrinsic & Extrinsic Sizing Module Level 3.</cite></a> 27 September 1.6123 - 2012. W3C Working Draft. (Work in progress.) URL: <a 1.6124 - href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/">http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a> 1.6125 - </dd> 1.6126 - <!----> 1.6127 +<h3 class=no-ref id=conformance-classes><span class=content> 1.6128 +Conformance classes</span><a class=section-link href=#conformance-classes>§</a></h3> 1.6129 1.6130 - <dt id=CSS3BG>[CSS3BG] 1.6131 + <p>Conformance to this specification 1.6132 + is defined for three conformance classes: 1.6133 + <dl> 1.6134 + <dt>style sheet 1.6135 + <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#style-sheet>CSS 1.6136 + style sheet</a>. 1.6137 + <dt>renderer 1.6138 + <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> 1.6139 + that interprets the semantics of a style sheet and renders 1.6140 + documents that use them. 1.6141 + <dt>authoring tool 1.6142 + <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> 1.6143 + that writes a style sheet. 1.6144 + </dl> 1.6145 1.6146 - <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a 1.6147 - href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS 1.6148 - Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C 1.6149 - Candidate Recommendation. (Work in progress.) URL: <a 1.6150 - href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 1.6151 - </dd> 1.6152 - <!----> 1.6153 + <p>A style sheet is conformant to this specification 1.6154 + if all of its statements that use syntax defined in this module are valid 1.6155 + according to the generic CSS grammar and the individual grammars of each 1.6156 + feature defined in this module. 1.6157 1.6158 - <dt id=CSS3COL>[CSS3COL] 1.6159 + <p>A renderer is conformant to this specification 1.6160 + if, in addition to interpreting the style sheet as defined by the 1.6161 + appropriate specifications, it supports all the features defined 1.6162 + by this specification by parsing them correctly 1.6163 + and rendering the document accordingly. However, the inability of a 1.6164 + UA to correctly render a document due to limitations of the device 1.6165 + does not make the UA non-conformant. (For example, a UA is not 1.6166 + required to render color on a monochrome monitor.) 1.6167 1.6168 - <dd>Håkon Wium Lie. <a 1.6169 - href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS 1.6170 - Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate 1.6171 - Recommendation. (Work in progress.) URL: <a 1.6172 - href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a> 1.6173 - </dd> 1.6174 - <!----> 1.6175 + <p>An authoring tool is conformant to this specification 1.6176 + if it writes style sheets that are syntactically correct according to the 1.6177 + generic CSS grammar and the individual grammars of each feature in 1.6178 + this module, and meet all other conformance requirements of style sheets 1.6179 + as described in this module. 1.6180 1.6181 - <dt id=CSS3TEXT>[CSS3TEXT] 1.6182 +<h3 class=no-ref id=partial><span class=content> 1.6183 +Partial implementations</span><a class=section-link href=#partial>§</a></h3> 1.6184 1.6185 - <dd>Elika J. Etemad; Koji Ishii. <a 1.6186 - href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text 1.6187 - Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in 1.6188 - progress.) URL: <a 1.6189 - href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a> 1.6190 - </dd> 1.6191 - <!----> 1.6192 + <p>So that authors can exploit the forward-compatible parsing rules to 1.6193 + assign fallback values, CSS renderers <strong>must</strong> 1.6194 + treat as invalid (and <a href=http://www.w3.org/TR/CSS21/conform.html#ignore>ignore 1.6195 + as appropriate</a>) any at-rules, properties, property values, keywords, 1.6196 + and other syntactic constructs for which they have no usable level of 1.6197 + support. In particular, user agents <strong>must not</strong> selectively 1.6198 + ignore unsupported component values and honor supported values in a single 1.6199 + multi-value property declaration: if any value is considered invalid 1.6200 + (as unsupported values must be), CSS requires that the entire declaration 1.6201 + be ignored.</p> 1.6202 1.6203 - <dt id=RFC2119>[RFC2119] 1.6204 +<h3 class=no-ref id=experimental><span class=content> 1.6205 +Experimental implementations</span><a class=section-link href=#experimental>§</a></h3> 1.6206 1.6207 - <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 1.6208 - words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 1.6209 - RFC 2119. URL: <a 1.6210 - href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 1.6211 - </dd> 1.6212 - <!----> 1.6213 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 1.6214 + reserves a <a href=http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords>prefixed 1.6215 + syntax</a> for proprietary and experimental extensions to CSS. 1.6216 1.6217 - <dt id=SVG11>[SVG11] 1.6218 + <p>Prior to a specification reaching the Candidate Recommendation stage 1.6219 + in the W3C process, all implementations of a CSS feature are considered 1.6220 + experimental. The CSS Working Group recommends that implementations 1.6221 + use a vendor-prefixed syntax for such features, including those in 1.6222 + W3C Working Drafts. This avoids incompatibilities with future changes 1.6223 + in the draft. 1.6224 + </p> 1.6225 1.6226 - <dd>Erik Dahlström; et al. <a 1.6227 - href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable 1.6228 - Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011. 1.6229 - W3C Recommendation. URL: <a 1.6230 - href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a> 1.6231 - </dd> 1.6232 - <!----> 1.6233 +<h3 class=no-ref id=testing><span class=content> 1.6234 +Non-experimental implementations</span><a class=section-link href=#testing>§</a></h3> 1.6235 1.6236 - <dt id=UAX11>[UAX11] 1.6237 + <p>Once a specification reaches the Candidate Recommendation stage, 1.6238 + non-experimental implementations are possible, and implementors should 1.6239 + release an unprefixed implementation of any CR-level feature they 1.6240 + can demonstrate to be correctly implemented according to spec. 1.6241 1.6242 - <dd>Asmus Freytag. <a 1.6243 - href="http://www.unicode.org/reports/tr11/"><cite>East Asian 1.6244 - Width.</cite></a> 17 January 2012. Unicode Standard Annex #11. URL: <a 1.6245 - href="http://www.unicode.org/reports/tr11/">http://www.unicode.org/reports/tr11/</a> 1.6246 - </dd> 1.6247 - <!----> 1.6248 + <p>To establish and maintain the interoperability of CSS across 1.6249 + implementations, the CSS Working Group requests that non-experimental 1.6250 + CSS renderers submit an implementation report (and, if necessary, the 1.6251 + testcases used for that implementation report) to the W3C before 1.6252 + releasing an unprefixed implementation of any CSS features. Testcases 1.6253 + submitted to W3C are subject to review and correction by the CSS 1.6254 + Working Group. 1.6255 1.6256 - <dt id=UAX24>[UAX24] 1.6257 + <p>Further information on submitting testcases and implementation reports 1.6258 + can be found from on the CSS Working Group's website at 1.6259 + <a href=http://www.w3.org/Style/CSS/Test/>http://www.w3.org/Style/CSS/Test/</a>. 1.6260 + Questions should be directed to the 1.6261 + <a href=http://lists.w3.org/Archives/Public/public-css-testsuite>public-css-testsuite@w3.org</a> 1.6262 + mailing list. 1.6263 1.6264 - <dd>Mark Davis; Ken Whistler. <a 1.6265 - href="http://www.unicode.org/reports/tr24/"><cite>Unicode Script 1.6266 - Property.</cite></a> 13 January 2012. Unicode Standard Annex #24. URL: <a 1.6267 - href="http://www.unicode.org/reports/tr24/">http://www.unicode.org/reports/tr24/</a> 1.6268 - </dd> 1.6269 - <!----> 1.6270 +<h2 class="no-num no-ref" id=references><span class=content> 1.6271 +References</span><a class=section-link href=#references>§</a></h2> 1.6272 1.6273 - <dt id=UAX29>[UAX29] 1.6274 +<h3 class="no-num no-ref" id=normative><span class=content> 1.6275 +Normative References</span><a class=section-link href=#normative>§</a></h3> 1.6276 +<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607/>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607/>http://www.w3.org/TR/2011/REC-CSS2-20110607/</a><dt id=css3-fonts title=CSS3-FONTS>[CSS3-FONTS]<dd>John Daggett. <a href=http://www.w3.org/TR/2012/WD-css3-fonts-20121211/>CSS Fonts Module Level 3</a>. 11 December 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-fonts-20121211/>http://www.w3.org/TR/2012/WD-css3-fonts-20121211/</a><dt id=css3-sizing title=CSS3-SIZING>[CSS3-SIZING]<dd>Tab Atkins Jr.; Elika J. Etemad. <a href=http://www.w3.org/TR/2012/WD-css3-sizing-20120927/>CSS Intrinsic & Extrinsic Sizing Module Level 3</a>. 27 September 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-sizing-20120927/>http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a><dt id=css3bg title=CSS3BG>[CSS3BG]<dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a href=http://www.w3.org/TR/2012/CR-css3-background-20120724/>CSS Backgrounds and Borders Module Level 3</a>. 24 July 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-background-20120724/>http://www.w3.org/TR/2012/CR-css3-background-20120724/</a><dt id=css3col title=CSS3COL>[CSS3COL]<dd>Håkon Wium Lie. <a href=http://www.w3.org/TR/2011/CR-css3-multicol-20110412>CSS Multi-column Layout Module</a>. 12 April 2011. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/CR-css3-multicol-20110412>http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a><dt id=css3text title=CSS3TEXT>[CSS3TEXT]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-text-20121113/>CSS Text Module Level 3</a>. 13 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-text-20121113/>http://www.w3.org/TR/2012/WD-css3-text-20121113/</a><dt id=rfc2119 title=RFC2119>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a><dt id=svg11 title=SVG11>[SVG11]<dd>Erik Dahlström; et al. <a href=http://www.w3.org/TR/2011/REC-SVG11-20110816/>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-SVG11-20110816/>http://www.w3.org/TR/2011/REC-SVG11-20110816/</a><dt id=uax11 title=UAX11>[UAX11]<dd>Asmus Freytag. <a href=http://www.unicode.org/reports/tr11/>East Asian Width</a>. 17 January 2012. URL: <a href=http://www.unicode.org/reports/tr11/>http://www.unicode.org/reports/tr11/</a><dt id=uax24 title=UAX24>[UAX24]<dd>Mark Davis; Ken Whistler. <a href=http://www.unicode.org/reports/tr24/>Unicode Script Property</a>. 13 January 2012. URL: <a href=http://www.unicode.org/reports/tr24/>http://www.unicode.org/reports/tr24/</a><dt id=uax29 title=UAX29>[UAX29]<dd>Mark Davis. <a href=http://www.unicode.org/reports/tr29/>Unicode Text Segmentation</a>. 12 September 2012. URL: <a href=http://www.unicode.org/reports/tr29/>http://www.unicode.org/reports/tr29/</a><dt id=uax44 title=UAX44>[UAX44]<dd>Mark Davis; Ken Whistler. <a href=http://www.unicode.org/reports/tr44/>Unicode Character Database</a>. 23 January 2012. URL: <a href=http://www.unicode.org/reports/tr44/>http://www.unicode.org/reports/tr44/</a><dt id=uax9 title=UAX9>[UAX9]<dd>Mark Davis. <a href=http://www.unicode.org/reports/tr9/>Unicode Bidirectional Algorithm</a>. 16 January 2012. URL: <a href=http://www.unicode.org/reports/tr9/>http://www.unicode.org/reports/tr9/</a><dt id=unicode title=UNICODE>[UNICODE]<dd>The Unicode Consortium. <a href=http://www.unicode.org/standard/versions/enumeratedversions.html>The Unicode Standard</a>. 2012. Defined by: The Unicode Standard, Version 6.2.0 (Mountain View, CA: The Unicode Consortium, 2012. ISBN 978-1-936213-07-8), as updated from time to time by the publication of new versions URL: <a href=http://www.unicode.org/standard/versions/enumeratedversions.html>http://www.unicode.org/standard/versions/enumeratedversions.html</a><dt id=utr50 title=UTR50>[UTR50]<dd>Eric Muller. <a href=http://www.unicode.org/reports/tr50/tr50-5.html>Unicode Properties for Vertical Text Layout</a>. 17 May 2012. URL: <a href=http://www.unicode.org/reports/tr50/tr50-5.html>http://www.unicode.org/reports/tr50/tr50-5.html</a></dl></div> 1.6277 1.6278 - <dd>Mark Davis. <a 1.6279 - href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text 1.6280 - Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29. 1.6281 - URL: <a 1.6282 - href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a> 1.6283 - </dd> 1.6284 - <!----> 1.6285 +<h3 class="no-num no-ref" id=informative><span class=content> 1.6286 +Informative References</span><a class=section-link href=#informative>§</a></h3> 1.6287 +<div data-fill-with=informative-references><dl><dt id=css2 title=CSS2>[CSS2]<dd>Ian Jacobs; et al. <a href=http://www.w3.org/TR/2008/REC-CSS2-20080411>Cascading Style Sheets, level 2 (CSS2) Specification</a>. 11 April 2008. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2008/REC-CSS2-20080411>http://www.w3.org/TR/2008/REC-CSS2-20080411</a><dt id=css3-flexbox title=CSS3-FLEXBOX>[CSS3-FLEXBOX]<dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/>CSS Flexible Box Layout Module</a>. 18 September 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/>http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</a><dt id=css3color title=CSS3COLOR>[CSS3COLOR]<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>http://www.w3.org/TR/2011/REC-css3-color-20110607</a><dt id=css3list title=CSS3LIST>[CSS3LIST]<dd>Tab Atkins Jr.. <a href=http://www.w3.org/TR/2011/WD-css3-lists-20110524>CSS Lists and Counters Module Level 3</a>. 24 May 2011. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/WD-css3-lists-20110524>http://www.w3.org/TR/2011/WD-css3-lists-20110524</a><dt id=css3page title=CSS3PAGE>[CSS3PAGE]<dd>Håkon Wium Lie; Melinda Grant. <a href=http://www.w3.org/TR/2006/WD-css3-page-20061010>CSS3 Module: Paged Media</a>. 10 October 2006. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2006/WD-css3-page-20061010>http://www.w3.org/TR/2006/WD-css3-page-20061010</a><dt id=html401 title=HTML401>[HTML401]<dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a href=http://www.w3.org/TR/1999/REC-html401-19991224>HTML 4.01 Specification</a>. 24 December 1999. W3C Recommendation. URL: <a href=http://www.w3.org/TR/1999/REC-html401-19991224>http://www.w3.org/TR/1999/REC-html401-19991224</a><dt id=html5 title=HTML5>[HTML5]<dd>Ian Hickson. <a href=http://www.w3.org/TR/2012/CR-html5-20121217/>HTML5</a>. 17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-html5-20121217/>http://www.w3.org/TR/2012/CR-html5-20121217/</a><dt id=utn22 title=UTN22>[UTN22]<dd>Elika J. Etemad. <a href=http://unicode.org/notes/tn22/>Robust Vertical Text Layout</a>. 25 April 2005. URL: <a href=http://unicode.org/notes/tn22/>http://unicode.org/notes/tn22/</a></dl></div> 1.6288 1.6289 - <dt id=UAX44>[UAX44] 1.6290 +<h2 class="no-num no-ref" id=index><span class=content> 1.6291 +Index</span><a class=section-link href=#index>§</a></h2> 1.6292 +<div data-fill-with=index><ul class=indexlist> 1.6293 +<li>abstract dimensions, <a href=#abstract-dimensions0 title="section 6.1">6.1</a> 1.6294 +<li>all (value), <a href=#valuedef-all title="section 9.1">9.1</a> 1.6295 +<li>alphabetic baseline, <a href=#alphabetic-baseline title="section 4.2">4.2</a> 1.6296 +<li>baseline, <a href=#baseline title="section 4.1">4.1</a> 1.6297 +<li>baseline table, <a href=#baseline-table title="section 4.1">4.1</a> 1.6298 +<li>bidi-isolate, <a href=#bidi-isolate title="section 2.2">2.2</a> 1.6299 +<li>bidi-isolated, <a href=#bidi-isolate title="section 2.2">2.2</a> 1.6300 +<li>bidi isolation, <a href=#bidi-isolate title="section 2.2">2.2</a> 1.6301 +<li>bidi-override (value), <a href=#valuedef-bidi-override title="section 2.2">2.2</a> 1.6302 +<li>bidi paragraph, <a href=#paragraph title="section 2">2</a> 1.6303 +<li>bidirectionality, <a href=#bidirectionality title="section 2">2</a> 1.6304 +<li>bi-orientational 1.6305 + transform, <a href=#bi-orientational----transform title="section 5">5</a> 1.6306 +<li>block-axis, <a href=#block-axis title="section 6.1">6.1</a> 1.6307 +<li>block dimension, <a href=#block-dimension title="section 6.1">6.1</a> 1.6308 +<li>block-end, <a href=#block-end title="section 6.2">6.2</a> 1.6309 +<li>block-end (value), <a href=#valuedef-block-end title="section 7.7">7.7</a> 1.6310 +<li>block flow direction, <a href=#block-flow-direction title="section 1">1</a> 1.6311 +<li>block-start, <a href=#block-start title="section 6.2">6.2</a> 1.6312 +<li>block-start (value), <a href=#valuedef-block-start title="section 7.7">7.7</a> 1.6313 +<li>central baseline, <a href=#central-baseline title="section 4.2">4.2</a> 1.6314 +<li>character, <a href=#character title="section Unnumbered section">Unnumbered section</a> 1.6315 +<li>digits <integer>? (value), <a href=#valuedef-digits-integer title="section 9.1">9.1</a> 1.6316 +<li>directional embedding, <a href=#directional-embedding title="section 2.2">2.2</a> 1.6317 +<li>directional override, <a href=#directional-override title="section 2.2">2.2</a> 1.6318 +<li>dominant baseline, <a href=#dominant-baseline title="section 4.4">4.4</a> 1.6319 +<li>embed (value), <a href=#valuedef-embed title="section 2.2">2.2</a> 1.6320 +<li>end, <a href=#end title="section 6.2">6.2</a> 1.6321 +<li>establish an orthogonal flow, <a href=#orthogonal-flow title="section 7.3">7.3</a> 1.6322 +<li>extent, <a href=#extent title="section 6.1">6.1</a> 1.6323 +<li>flow-relative directions, <a href=#flow-relative-directions title="section 6.2">6.2</a> 1.6324 +<li>forced paragraph break, <a href=#forced-paragraph-break title="section 2">2</a> 1.6325 +<li>horizontal block flow, <a href=#horizontal-block-flow title="section 1">1</a> 1.6326 +<li>horizontal script, <a href=#horizontal-script title="section 5">5</a> 1.6327 +<li>horizontal-tb (value), <a href=#valuedef-horizontal-tb title="section 3.1">3.1</a> 1.6328 +<li>horizontal writing mode, <a href=#horizontal-writing-mode title="section 1">1</a> 1.6329 +<li>inline-axis, <a href=#inline-axis title="section 6.1">6.1</a> 1.6330 +<li>inline base direction, <a href=#inline-base-direction title="section 1">1</a> 1.6331 +<li>inline dimension, <a href=#inline-dimension title="section 6.1">6.1</a> 1.6332 +<li>inline-end, <a href=#inline-end title="section 6.2">6.2</a> 1.6333 +<li>inline progression 1.6334 + direction, <a href=#inline-progression----direction title="section 3.1.1">3.1.1</a> 1.6335 +<li>inline-start, <a href=#inline-start title="section 6.2">6.2</a> 1.6336 +<li>isolated sequence, <a href=#isolated-sequence title="section 2.2">2.2</a> 1.6337 +<li>isolate-override (value), <a href=#valuedef-isolate-override title="section 2.2">2.2</a> 1.6338 +<li>isolate (value), <a href=#valuedef-isolate title="section 2.2">2.2</a> 1.6339 +<li>isolation, <a href=#bidi-isolate title="section 2.2">2.2</a> 1.6340 +<li>line-left, <a href=#line-left title="section 6.3">6.3</a> 1.6341 +<li>line orientation, <a href=#line-orientation title="section 6.3">6.3</a> 1.6342 +<li>line-relative directions, <a href=#line-relative-directions title="section 6.3">6.3</a> 1.6343 +<li>line-right, <a href=#line-right title="section 6.3">6.3</a> 1.6344 +<li>logical height, <a href=#logical-height title="section 6.1">6.1</a> 1.6345 +<li>logical width, <a href=#logical-width title="section 6.1">6.1</a> 1.6346 +<li>ltr (value), <a href=#valuedef-ltr title="section 2.1">2.1</a> 1.6347 +<li>measure, <a href=#measure title="section 6.1">6.1</a> 1.6348 +<li>mixed (value), <a href=#valuedef-mixed title="section 5.1">5.1</a> 1.6349 +<li>none (value), <a href=#valuedef-none title="section 9.1">9.1</a> 1.6350 +<li>normal (value), <a href=#valuedef-normal title="section 2.2">2.2</a> 1.6351 +<li>orthogonal flow, <a href=#orthogonal-flow title="section 7.3">7.3</a> 1.6352 +<li>over, <a href=#over title="section 6.3">6.3</a> 1.6353 +<li>physical dimensions, <a href=#physical-dimensions title="section 6">6</a> 1.6354 +<li>plaintext (value), <a href=#valuedef-plaintext title="section 2.2">2.2</a> 1.6355 +<li>principal writing mode, <a href=#principal-writing-mode title="section 3.1">3.1</a> 1.6356 +<li>rtl (value), <a href=#valuedef-rtl title="section 2.1">2.1</a> 1.6357 +<li>sideways-left (value), <a href=#valuedef-sideways-left title="section 5.1">5.1</a> 1.6358 +<li>sideways-right (value), <a href=#valuedef-sideways-right title="section 5.1">5.1</a> 1.6359 +<li>sideways (value), <a href=#valuedef-sideways title="section 5.1">5.1</a> 1.6360 +<li>start, <a href=#start title="section 6.2">6.2</a> 1.6361 +<li>under, <a href=#under title="section 6.3">6.3</a> 1.6362 +<li>upright (value), <a href=#valuedef-upright title="section 5.1">5.1</a> 1.6363 +<li>use-glyph-orientation (value), <a href=#valuedef-use-glyph-orientation title="section 5.1">5.1</a> 1.6364 +<li>vertical block flow, <a href=#vertical-block-flow title="section 1">1</a> 1.6365 +<li>vertical-lr (value), <a href=#valuedef-vertical-lr title="section 3.1">3.1</a> 1.6366 +<li>vertical-rl (value), <a href=#valuedef-vertical-rl title="section 3.1">3.1</a> 1.6367 +<li>vertical script, <a href=#vertical-script title="section 5">5</a> 1.6368 +<li>vertical writing 1.6369 + mode, <a href=#vertical-writing----mode title="section 1">1</a> 1.6370 +<li>writing mode, <a href=#writing-mode0 title="section 1">1</a> 1.6371 +</ul></div> 1.6372 1.6373 - <dd>Mark Davis; Ken Whistler. <a 1.6374 - href="http://www.unicode.org/reports/tr44/"><cite>Unicode Character 1.6375 - Database.</cite></a> 23 January 2012. Unicode Standard Annex #44. URL: <a 1.6376 - href="http://www.unicode.org/reports/tr44/">http://www.unicode.org/reports/tr44/</a> 1.6377 - </dd> 1.6378 - <!----> 1.6379 +<h2 class="no-num no-ref" id=property-index><span class=content> 1.6380 +Property index</span><a class=section-link href=#property-index>§</a></h2> 1.6381 +<div data-fill-with=property-index><table class=proptable><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>Media<th scope=col>Applies to<th scope=col>Computed value<th scope=col>New Values<tbody> 1.6382 +<tr><th scope=row><a data-property="">direction</a><td>ltr | rtl<td>ltr<td><td>yes<td>n/a<td>visual<td>all elements<td>specified value<td> 1.6383 +<tr><th scope=row><a data-property="">unicode-bidi</a><td>normal | embed | isolate | bidi-override | isolate-override | plaintext<td>normal<td><td>no<td>n/a<td>visual<td>all elements, but see prose<td>specified value<td> 1.6384 +<tr><th scope=row><a data-property="">writing-mode</a><td>horizontal-tb | vertical-rl | vertical-lr<td>horizontal-tb<td><td>yes<td>n/a<td>visual<td>All elements except table row groups, table column groups, table rows, and table columns<td>specified value<td> 1.6385 +<tr><th scope=row><a data-property="">text-orientation</a><td>mixed | upright | sideways-right | sideways-left | sideways | use-glyph-orientation<td>mixed<td><td>yes<td>n/a<td>visual<td>all elements except table row groups, rows, column groups, and columns<td>specified value<td> 1.6386 +<tr><th scope=row><a data-property="">caption-side</a><td><td><td><td><td><td><td><td><td>block-start | block-end 1.6387 +<tr><th scope=row><a data-property="">text-combine-horizontal</a><td>none | all | [ digits <integer>? ]</integer><td>none<td><td><a class=issue href=http://lists.w3.org/Archives/Public/www-style/2013Jul/0154.html>???</a><td>n/a<td>visual<td>non-replaced inline elements<td>specified keyword, plus integer if <span class=css data-link-type=maybe>digits</span><td></table></div> 1.6388 1.6389 - <dt id=UAX9>[UAX9] 1.6390 1.6391 - <dd>Mark Davis. <a 1.6392 - href="http://www.unicode.org/reports/tr9/"><cite>Unicode Bidirectional 1.6393 - Algorithm.</cite></a> 16 January 2012. Unicode Standard Annex #9. URL: <a 1.6394 - href="http://www.unicode.org/reports/tr9/">http://www.unicode.org/reports/tr9/</a> 1.6395 - </dd> 1.6396 - <!----> 1.6397 - 1.6398 - <dt id=UNICODE>[UNICODE] 1.6399 - 1.6400 - <dd>The Unicode Consortium. <a 1.6401 - href="http://www.unicode.org/standard/versions/enumeratedversions.html"><cite>The 1.6402 - Unicode Standard.</cite></a> 2012. Defined by: The Unicode Standard, 1.6403 - Version 6.2.0 (Mountain View, CA: The Unicode Consortium, 2012. ISBN 1.6404 - 978-1-936213-07-8), as updated from time to time by the publication of 1.6405 - new versions URL: <a 1.6406 - href="http://www.unicode.org/standard/versions/enumeratedversions.html">http://www.unicode.org/standard/versions/enumeratedversions.html</a> 1.6407 - </dd> 1.6408 - <!----> 1.6409 - 1.6410 - <dt id=UTR50>[UTR50] 1.6411 - 1.6412 - <dd>Koji Ishii. <a 1.6413 - href="http://www.unicode.org/reports/tr50/"><cite>Unicode Properties for 1.6414 - Vertical Text Layout.</cite></a> 28 May 2013. Proposed Draft Unicode 1.6415 - Technical Report #50. URL: <a 1.6416 - href="http://www.unicode.org/reports/tr50/">http://www.unicode.org/reports/tr50/</a> 1.6417 - </dd> 1.6418 - <!----> 1.6419 - </dl> 1.6420 - <!--end-normative--> 1.6421 - 1.6422 - <h3 class=no-num id=other-references> Other references</h3> 1.6423 - <!--begin-informative--> 1.6424 - <!-- Sorted by label --> 1.6425 - 1.6426 - <dl class=bibliography> 1.6427 - <dd style="display: none"><!-- keeps the doc valid if the DL is empty --> 1.6428 - <!----> 1.6429 - 1.6430 - <dt id=CSS2>[CSS2] 1.6431 - 1.6432 - <dd>Ian Jacobs; et al. <a 1.6433 - href="http://www.w3.org/TR/2008/REC-CSS2-20080411"><cite>Cascading Style 1.6434 - Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C 1.6435 - Recommendation. URL: <a 1.6436 - href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a> 1.6437 - </dd> 1.6438 - <!----> 1.6439 - 1.6440 - <dt id=CSS3COLOR>[CSS3COLOR] 1.6441 - 1.6442 - <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 1.6443 - href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 1.6444 - Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 1.6445 - href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 1.6446 - </dd> 1.6447 - <!----> 1.6448 - 1.6449 - <dt id=CSS3LIST>[CSS3LIST] 1.6450 - 1.6451 - <dd>Tab Atkins Jr. <a 1.6452 - href="http://www.w3.org/TR/2011/WD-css3-lists-20110524"><cite>CSS Lists 1.6453 - and Counters Module Level 3.</cite></a> 24 May 2011. W3C Working Draft. 1.6454 - (Work in progress.) URL: <a 1.6455 - href="http://www.w3.org/TR/2011/WD-css3-lists-20110524">http://www.w3.org/TR/2011/WD-css3-lists-20110524</a> 1.6456 - </dd> 1.6457 - <!----> 1.6458 - 1.6459 - <dt id=CSS3PAGE>[CSS3PAGE] 1.6460 - 1.6461 - <dd>Melinda Grant; et al. <a 1.6462 - href="http://www.w3.org/TR/2013/WD-css3-page-20130314/"><cite>CSS Paged 1.6463 - Media Module Level 3.</cite></a> 14 March 2013. W3C Working Draft. (Work 1.6464 - in progress.) URL: <a 1.6465 - href="http://www.w3.org/TR/2013/WD-css3-page-20130314/">http://www.w3.org/TR/2013/WD-css3-page-20130314/</a> 1.6466 - </dd> 1.6467 - <!----> 1.6468 - 1.6469 - <dt id=HTML401>[HTML401] 1.6470 - 1.6471 - <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a 1.6472 - href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01 1.6473 - Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a 1.6474 - href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a> 1.6475 - </dd> 1.6476 - <!----> 1.6477 - 1.6478 - <dt id=HTML5>[HTML5] 1.6479 - 1.6480 - <dd>Ian Hickson. <a 1.6481 - href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a> 1.6482 - 17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL: 1.6483 - <a 1.6484 - href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a> 1.6485 - </dd> 1.6486 - <!----> 1.6487 - 1.6488 - <dt id=UTN22>[UTN22] 1.6489 - 1.6490 - <dd>Elika J. Etemad. <a href="http://unicode.org/notes/tn22/"><cite>Robust 1.6491 - Vertical Text Layout.</cite></a> 25 April 2005. Unicode Technical Note 1.6492 - #22. URL: <a 1.6493 - href="http://unicode.org/notes/tn22/">http://unicode.org/notes/tn22/</a></dd> 1.6494 - <!----> 1.6495 - </dl> 1.6496 - <!--end-informative--> 1.6497 - 1.6498 - <h2 class=no-num id=property-index> Property Index</h2> 1.6499 - <!--begin-properties--> 1.6500 - 1.6501 - <table class=proptable> 1.6502 - <thead> 1.6503 - <tr> 1.6504 - <th>Property 1.6505 - 1.6506 - <th>Values 1.6507 - 1.6508 - <th>Initial 1.6509 - 1.6510 - <th>Applies to 1.6511 - 1.6512 - <th>Inh. 1.6513 - 1.6514 - <th>Percentages 1.6515 - 1.6516 - <th>Media 1.6517 - 1.6518 - <tbody> 1.6519 - <tr> 1.6520 - <th><a class=property href="#direction0">direction</a> 1.6521 - 1.6522 - <td>ltr | rtl 1.6523 - 1.6524 - <td>ltr 1.6525 - 1.6526 - <td>all elements 1.6527 - 1.6528 - <td>yes 1.6529 - 1.6530 - <td>N/A 1.6531 - 1.6532 - <td>visual 1.6533 - 1.6534 - <tr> 1.6535 - <th><a class=property 1.6536 - href="#text-combine-horizontal0">text-combine-horizontal</a> 1.6537 - 1.6538 - <td>none | all | [ digits <integer>? ] 1.6539 - 1.6540 - <td>none 1.6541 - 1.6542 - <td>non-replaced inline elements 1.6543 - 1.6544 - <td>??? 1.6545 - 1.6546 - <td>N/A 1.6547 - 1.6548 - <td>visual 1.6549 - 1.6550 - <tr> 1.6551 - <th><a class=property href="#text-orientation0">text-orientation</a> 1.6552 - 1.6553 - <td>mixed | upright | sideways-right | sideways-left | sideways | 1.6554 - use-glyph-orientation 1.6555 - 1.6556 - <td>mixed 1.6557 - 1.6558 - <td>all elements except table row groups, rows, column groups, and 1.6559 - columns 1.6560 - 1.6561 - <td>yes 1.6562 - 1.6563 - <td>N/A 1.6564 - 1.6565 - <td>visual 1.6566 - 1.6567 - <tr> 1.6568 - <th><a class=property href="#unicode-bidi0">unicode-bidi</a> 1.6569 - 1.6570 - <td>normal | embed | isolate | bidi-override | isolate-override | 1.6571 - plaintext 1.6572 - 1.6573 - <td>normal 1.6574 - 1.6575 - <td>all elements, but see prose 1.6576 - 1.6577 - <td>no 1.6578 - 1.6579 - <td>N/A 1.6580 - 1.6581 - <td>visual 1.6582 - 1.6583 - <tr> 1.6584 - <th><a class=property href="#writing-mode1">writing-mode</a> 1.6585 - 1.6586 - <td>horizontal-tb | vertical-rl | vertical-lr 1.6587 - 1.6588 - <td>horizontal-tb 1.6589 - 1.6590 - <td>All elements except table row groups, table column groups, table 1.6591 - rows, and table columns 1.6592 - 1.6593 - <td>yes 1.6594 - 1.6595 - <td>N/A 1.6596 - 1.6597 - <td>visual 1.6598 - </table> 1.6599 - <!--end-properties--> 1.6600 - <!-- Add alphabetic index? -->
2.1 --- a/css-writing-modes/Overview.src.html Fri Aug 16 16:40:33 2013 -0700 2.2 +++ b/css-writing-modes/Overview.src.html Fri Aug 16 17:05:57 2013 -0700 2.3 @@ -1,99 +1,49 @@ 2.4 -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2.5 -<html lang="en"> 2.6 -<head> 2.7 - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 2.8 - <title>CSS Writing Modes Module Level 3</title> 2.9 - <link rel="stylesheet" type="text/css" href="../default.css"> 2.10 - <style type="text/css"> 2.11 - object { vertical-align: middle; } 2.12 - .sidebar { float: right; background: #eee; border: solid gray; margin: 1em; } 2.13 - .sidebar .figure { margin: 1em; } 2.14 - .sidebar object { margin: 0 auto; display: block; } 2.15 - .figurepair { display: table; margin: 1em auto; } 2.16 - .figurepair .figure { display: table-cell; } 2.17 - h2, .example { clear: both; } 2.18 - .figure img, 2.19 - .figure object, 2.20 - .example img, 2.21 - dd img { max-width: 100%; display: block; margin: 1em auto; } 2.22 - div.figure table { 2.23 - margin:auto; 2.24 - } 2.25 - </style> 2.26 - <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"> 2.27 - <script src='http://test.csswg.org/harness/annotate.js#css-writing-modes-3_dev' type='text/javascript' defer></script> 2.28 -</head> 2.29 +<h1>CSS Writing Modes Level 3</h1> 2.30 2.31 -<body> 2.32 +<pre class='metadata'> 2.33 +Shortname: css-writing-modes 2.34 +Level: 3 2.35 +Status: ED 2.36 +ED: http://dev.w3.org/csswg/css-writing-modes-3/ 2.37 +TR: http://www.w3.org/TR/css3-writing-modes/ 2.38 +Previous versions: http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/ 2.39 +Previous versions: http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/ 2.40 +Previous versions: http://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/ 2.41 +Previous versions: http://www.w3.org/TR/2011/WD-css3-writing-modes-20110428/ 2.42 +Previous versions: http://www.w3.org/TR/2011/WD-css3-writing-modes-20110201/ 2.43 +Previous versions: http://www.w3.org/TR/2010/WD-css3-writing-modes-20101202/ 2.44 +Issues List: <a href="http://www.w3.org/Style/CSS/Tracker/products/30">http://www.w3.org/Style/CSS/Tracker/products/30</a> 2.45 +Editor: fantasai, Mozilla, http://fantasai.inkedblade.net/contact/ 2.46 +Editor: Koji Ishii, Rakuten Inc., koji.a.ishii@mail.rakuten.com 2.47 +Previous Editors: <a href="mailto:murakami@antenna.co.jp">Shinyu Murakami</a> (<a href="http://www.antenna.co.jp/">Antenna House</a>) 2.48 +Previous Editors: <a href="mailto:paulnel@microsoft.com">Paul Nelson</a> (<a href="http://www.microsoft.com/">Microsoft</a>) 2.49 +Previous Editors: <a href="mailto:michelsu@microsoft.com">Michel Suignard</a> (<a href="http://www.microsoft.com/">Microsoft</a>) 2.50 +Test Suite: http://test.csswg.org/suites/css3-writing-modes/nightly-unstable/ 2.51 +Abstract: CSS Writing Modes Level 3 defines CSS support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).<br> Inherently bottom-to-top scripts are not handled in this version. See [[UTN22]] for an explanation of relevant issues. 2.52 +At Risk: The ''use-glyph-orientation'' of 'text-orientation' 2.53 +At Risk: The ''digits'' value of 'text-combine-horizontal'. 2.54 +Ignored Terms: glyph orientation, inline axis, glyph-orientation-vertical, glyph-orientation-horizontal, left, right, top, bottom, width, height, x-axis, y-axis, vertical dimension, horizontal dimension, vertical axis, horizontal axis, *-left, *-right, *-top, *-bottom, available measure, available extent, fallback, definite, indefinite, fill-available extent, max-content measure, max-content extent, available space, flex items, block containers, text-combine-mode, horizontal-only 2.55 +Link Defaults: css-display-3 (property) display, css21 (property) min-height/max-height/min-width/max-width, css-position-3 (property) clip 2.56 +</pre> 2.57 2.58 -<div class="head"> 2.59 +<style> 2.60 +object { vertical-align: middle; } 2.61 +.sidebar { float: right; background: #eee; border: solid gray; margin: 1em; } 2.62 +.sidebar .figure { margin: 1em; } 2.63 +.sidebar object { margin: 0 auto; display: block; } 2.64 +.figurepair { display: table; margin: 1em auto; } 2.65 +.figurepair .figure { display: table-cell; } 2.66 +h2, .example { clear: both; } 2.67 +.figure img, 2.68 +.figure object, 2.69 +.example img, 2.70 +dd img { max-width: 100%; display: block; margin: 1em auto; } 2.71 +div.figure table { 2.72 + margin:auto; 2.73 +} 2.74 +</style> 2.75 +<script src='http://test.csswg.org/harness/annotate.js#css-writing-modes-3_dev' defer></script> 2.76 2.77 -<!--logo--> 2.78 - 2.79 -<h1>CSS Writing Modes Module Level 3</h1> 2.80 - 2.81 -<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 2.82 -<dl> 2.83 - <dt>This version:</dt> 2.84 - <dd><a href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a> 2.85 -<!-- 2.86 - <dd><a href="http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/">[VERSION]</a> 2.87 ---> 2.88 - <dt>Latest version:</dt> 2.89 - <dd><a 2.90 - href="http://www.w3.org/TR/css3-writing-modes/">http://www.w3.org/TR/css3-writing-modes/</a></dd> 2.91 - <dt>Latest editor's draft:</dt> 2.92 - <dd><a href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a></dd> 2.93 - <dt>Previous version:</dt> 2.94 - <dd><a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/</a></dd> 2.95 - <dt>Issues List:</dt> 2.96 - <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/30">http://www.w3.org/Style/CSS/Tracker/products/30</a> 2.97 - <dt>Feedback:</dt> 2.98 - <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-writing-modes%5D%20feedback">www-style@w3.org</a> 2.99 - with subject line “<kbd>[css-writing-modes <var>… message topic …</var></kbd>” 2.100 - (<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/">archives</a>) 2.101 - <dt>Editors:</dt> 2.102 - <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Mozilla)</dd> 2.103 - <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> (Rakuten, Inc.)</dd> 2.104 - <dt>Previous Editors:</dt> 2.105 - <dd><a href="mailto:murakami@antenna.co.jp">Shinyu Murakami</a> (<a href="http://www.antenna.co.jp/">Antenna House</a>)</dd> 2.106 - <dd><a href="mailto:paulnel@microsoft.com">Paul Nelson</a> (<a href="http://www.microsoft.com/">Microsoft</a>)</dd> 2.107 - <dd><a href="mailto:michelsu@microsoft.com">Michel Suignard</a> (<a href="http://www.microsoft.com/">Microsoft</a>)</dd> 2.108 - <dt>Test Suite:</dt> 2.109 - <dd><a href="http://test.csswg.org/suites/css3-writing-modes/nightly-unstable/">http://test.csswg.org/suites/css3-writing-modes/nightly-unstable/</a></dd> 2.110 -</dl> 2.111 - 2.112 -<!--copyright--> 2.113 - 2.114 -<hr title="Separator for header"> 2.115 -</div> 2.116 - 2.117 -<h2 class="no-num no-toc" id="abstract"> 2.118 -Abstract</h2> 2.119 - 2.120 - <p>CSS Writing Modes Level 3 defines CSS support for various international 2.121 - writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left 2.122 - (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and 2.123 - vertical (e.g. Asian scripts).</p> 2.124 - 2.125 - <p>Inherently bottom-to-top scripts are not handled in this version. See 2.126 - [[UTN22]] for an explanation of relevant issues.</p> 2.127 - 2.128 -<h2 class="no-num no-toc" id="status"> 2.129 -Status of this document</h2> 2.130 - 2.131 -<!--status--> 2.132 - 2.133 -<p>The following features are at-risk and may be dropped during CR: 2.134 -<ul> 2.135 - <li>The ''use-glyph-orientation'' of 'text-orientation' 2.136 - <li>The ''digits'' value of 'text-combine-horizontal'. 2.137 -</ul> 2.138 - 2.139 -<h2 class="no-num no-toc" id="Contents"> 2.140 -Table of Contents</h2> 2.141 - 2.142 -<!--toc--> 2.143 2.144 <h2 id="text-flow"> 2.145 Introduction to Writing Modes</h2> 2.146 @@ -105,27 +55,26 @@ 2.147 2.148 <p>A <dfn>writing mode</dfn> in CSS is determined by the 'writing-mode', 2.149 'direction', and 'text-orientation' properties. It is defined primarily 2.150 - in terms of its <i>inline base direction</i> and <i>block flow 2.151 - direction</i>: 2.152 + in terms of its <i>inline base direction</i> and <i>block flow direction</i>: 2.153 2.154 <div class="sidebar"> 2.155 <div class="figure right"> 2.156 - <a href="diagrams/text-flow-vectors-tb.svg" type="image/svg+xml"> 2.157 + <a href="diagrams/text-flow-vectors-tb.svg"> 2.158 <img src="diagrams/text-flow-vectors-tb.png" class="landscape" 2.159 alt="Latin-based writing mode"></a> 2.160 <p class="caption">Latin-based writing mode 2.161 </div> 2.162 <div class="figure left"> 2.163 - <a href="diagrams/text-flow-vectors-lr-reverse.svg" type="image/svg+xml"> 2.164 + <a href="diagrams/text-flow-vectors-lr-reverse.svg"> 2.165 <img src="diagrams/text-flow-vectors-lr-reverse.png" class="landscape" 2.166 alt="Mongolian-based writing mode"></a> 2.167 <p class="caption">Mongolian-based writing mode 2.168 </div> 2.169 <div class="figure right"> 2.170 - <a href="diagrams/text-flow-vectors-tb.svg" type="image/svg+xml"> 2.171 + <a href="diagrams/text-flow-vectors-tb.svg"> 2.172 <img src="diagrams/text-flow-vectors-tb.png" class="landscape" 2.173 alt="Han-based writing mode"></a> 2.174 - <a href="diagrams/text-flow-vectors-rl.svg" type="image/svg+xml"> 2.175 + <a href="diagrams/text-flow-vectors-rl.svg"> 2.176 <img src="diagrams/text-flow-vectors-rl.png" class="landscape" 2.177 alt="Han-based writing mode"></a> 2.178 <p class="caption">Han-based writing mode 2.179 @@ -203,7 +152,7 @@ 2.180 explicitly. 2.181 2.182 2.183 -<h2 id="text-direction"><a name="bidi"> 2.184 +<h2 id="text-direction"><a name="bidi" title=''> 2.185 Inline Direction and Bidirectionality</a></h2> 2.186 2.187 <p>While the characters in most scripts are written from left to right, 2.188 @@ -211,8 +160,7 @@ 2.189 in particular those written with the Arabic or Hebrew script, and in 2.190 some mixed-language contexts, text in a single (visually displayed) 2.191 block may appear with mixed directionality. This phenomenon is called 2.192 - <span class="index-def" title="bidirectionality (bidi)"><dfn>bidirectionality</dfn></span>, or 2.193 - "bidi" for short.</p> 2.194 + <dfn>bidirectionality</dfn>, or "bidi" for short.</p> 2.195 2.196 <div class="figure"> 2.197 <p><img src="diagrams/bidi.png" 2.198 @@ -237,7 +185,7 @@ 2.199 This sequence forms the <dfn title="bidi paragraph">paragraph</dfn> unit 2.200 in the bidirectional algorithm. 2.201 Additionally, any such sequence forming part or all of the contents of a 2.202 - <a href="#bidi-isolate"><i>bidi-isolated</i></a> inline element also forms a <i>bidi paragraph</i>. 2.203 + <i>bidi-isolated</i> inline element also forms a <i>bidi paragraph</i>. 2.204 2.205 <p>Two CSS properties, 'direction' and 'unicode-bidi', 2.206 provide explicit embedding, isolation, and override controls in the CSS layer. 2.207 @@ -259,48 +207,22 @@ 2.208 bidirectionality behavior for HTML elements.</p> 2.209 2.210 <p class="note">Because HTML UAs can turn off CSS styling, we advise HTML 2.211 - authors to use the HTML 'dir' attribute and <bdo> element to 2.212 + authors to use the HTML <code>dir</code> attribute and <bdo> element to 2.213 ensure correct bidirectional layout in the absence of a style sheet.</p> 2.214 2.215 <h3 id="direction"> 2.216 Specifying Directionality: the 'direction' property</h3> 2.217 2.218 - <table class="propdef"> 2.219 - <tbody> 2.220 - <tr> 2.221 - <th>Name:</th> 2.222 - <td><dfn>direction</dfn></td> 2.223 - </tr> 2.224 - <tr> 2.225 - <th><a href="#values">Value</a>:</th> 2.226 - <td>ltr | rtl </td> 2.227 - </tr> 2.228 - <tr> 2.229 - <th>Initial:</th> 2.230 - <td>ltr</td> 2.231 - </tr> 2.232 - <tr> 2.233 - <th>Applies to:</th> 2.234 - <td>all elements</td> 2.235 - </tr> 2.236 - <tr> 2.237 - <th>Inherited:</th> 2.238 - <td>yes</td> 2.239 - </tr> 2.240 - <tr> 2.241 - <th>Percentages:</th> 2.242 - <td>N/A</td> 2.243 - </tr> 2.244 - <tr> 2.245 - <th>Media:</th> 2.246 - <td>visual</td> 2.247 - </tr> 2.248 - <tr> 2.249 - <th>Computed value:</th> 2.250 - <td>specified value</td> 2.251 - </tr> 2.252 - </tbody> 2.253 - </table> 2.254 + <pre class='propdef'> 2.255 + Name: direction 2.256 + Value: ltr | rtl 2.257 + Initial: ltr 2.258 + Applies to: all elements 2.259 + Inherited: yes 2.260 + Percentages: n/a 2.261 + Media: visual 2.262 + Computed value: specified value 2.263 + </pre> 2.264 2.265 <p>This property specifies the inline base direction or directionality 2.266 of any bidi paragraph, embedding, isolate, or override established by the element. 2.267 @@ -313,7 +235,7 @@ 2.268 2.269 <p>Values for this property have the following meanings:</p> 2.270 2.271 - <dl> 2.272 + <dl dfn-for=direction dfn-type=value> 2.273 <dt><dfn>ltr</dfn></dt> 2.274 <dd>Left-to-right directionality.</dd> 2.275 <dt><dfn>rtl</dfn></dt> 2.276 @@ -343,42 +265,16 @@ 2.277 <h3 id="unicode-bidi"> 2.278 Embeddings and Overrides: the 'unicode-bidi' property</h3> 2.279 2.280 - <table class="propdef"> 2.281 - <tbody> 2.282 - <tr> 2.283 - <th>Name:</th> 2.284 - <td><dfn>unicode-bidi</dfn></td> 2.285 - </tr> 2.286 - <tr> 2.287 - <th><a href="#values">Value</a>:</th> 2.288 - <td>normal | embed | isolate | bidi-override | isolate-override | plaintext 2.289 - </tr> 2.290 - <tr> 2.291 - <th>Initial:</th> 2.292 - <td>normal</td> 2.293 - </tr> 2.294 - <tr> 2.295 - <th>Applies to:</th> 2.296 - <td>all elements, but see prose</td> 2.297 - </tr> 2.298 - <tr> 2.299 - <th>Inherited:</th> 2.300 - <td>no</td> 2.301 - </tr> 2.302 - <tr> 2.303 - <th>Percentages:</th> 2.304 - <td>N/A</td> 2.305 - </tr> 2.306 - <tr> 2.307 - <th>Media:</th> 2.308 - <td>visual</td> 2.309 - </tr> 2.310 - <tr> 2.311 - <th>Computed value:</th> 2.312 - <td>specified value</td> 2.313 - </tr> 2.314 - </tbody> 2.315 - </table> 2.316 + <pre class='propdef'> 2.317 + Name: unicode-bidi 2.318 + Value: normal | embed | isolate | bidi-override | isolate-override | plaintext 2.319 + Initial: normal 2.320 + Applies to: all elements, but see prose 2.321 + Inherited: no 2.322 + Percentages: n/a 2.323 + Media: visual 2.324 + Computed value: specified value 2.325 + </pre> 2.326 2.327 <p>Normally (i.e. when 'unicode-bidi' is ''normal'') 2.328 an inline element is transparent to the unicode bidi algorithm; 2.329 @@ -417,11 +313,11 @@ 2.330 <p>Values for this property have the following (normative) meanings:</p> 2.331 2.332 <dl> 2.333 - <dt><dfn>normal</dfn></dt> 2.334 + <dt><dfn value for=unicode-bidi>normal</dfn></dt> 2.335 <dd>The element does not open an additional level of embedding with 2.336 respect to the bidirectional algorithm. For inline elements, 2.337 implicit reordering works across element boundaries.</dd> 2.338 - <dt><dfn>embed</dfn></dt> 2.339 + <dt><dfn value for=unicode-bidi>embed</dfn></dt> 2.340 <dd>If the element is inline, this value creates a <dfn>directional embedding</dfn> 2.341 by opening an additional level of embedding with respect to the bidirectional algorithm. 2.342 The direction of this embedding level is given by the 'direction' 2.343 @@ -431,12 +327,12 @@ 2.344 (U+202C) at the end of the element. 2.345 <span class="note">This value has no effect on elements that are 2.346 not inline.</span></dd> 2.347 - <dt><dfn>isolate</dfn></dt> 2.348 - <dd>On an inline element, this <dfn id=bidi-isolate title="bidi-isolate|bidi isolation|isolation">bidi-isolates</dfn> its contents. 2.349 + <dt><dfn value for=unicode-bidi>isolate</dfn></dt> 2.350 + <dd>On an inline element, this <dfn id=bidi-isolate title="bidi-isolate|bidi-isolated|bidi isolation|isolation">bidi-isolates</dfn> its contents. 2.351 This is similar to a directional embedding (and increases the embedding level accordingly) 2.352 except that each sequence of inline-level boxes 2.353 uninterrupted by any block boundary or <i>forced paragraph break</i> 2.354 - is treated as an <dfn>isolated sequence<dfn>: 2.355 + is treated as an <dfn>isolated sequence</dfn>: 2.356 <ul> 2.357 <li>the content within the sequence is ordered 2.358 as if inside an independent paragraph 2.359 @@ -455,7 +351,7 @@ 2.360 or RLI (U+2067), for ''direction: rtl'', at the start of the element, 2.361 and a PDI (U+2069) at the end of the element. 2.362 <p class="note">This value has no effect on elements that are not inline.</span> 2.363 - <dt><dfn>bidi-override</dfn></dt> 2.364 + <dt><dfn value for=unicode-bidi>bidi-override</dfn></dt> 2.365 <dd>This value puts the element's immediate content in a <dfn>directional override</dfn>. 2.366 For an inline, this means that the element acts like a <i>directional embedding</i> 2.367 in the bidirectional algorithm, 2.368 @@ -467,12 +363,12 @@ 2.369 If the element is a block container, 2.370 the override is applied to an anonymous inline element 2.371 that surrounds all of its content.</dd> 2.372 - <dt><dfn>isolate-override<dfn></dt> 2.373 + <dt><dfn value for=unicode-bidi>isolate-override</dfn></dt> 2.374 <dd>This combines the <i>isolation</i> behavior of ''isolate'' with the 2.375 - <i>override</i> behavior of ''bidi-override'': to surrounding content, 2.376 + <i>directional override</i> behavior of ''bidi-override'': to surrounding content, 2.377 it is equivalent to ''isolate'', but within the element content 2.378 is ordered as if ''bidi-override'' were specified. 2.379 - <dt><dfn>plaintext</dfn></dt> 2.380 + <dt><dfn value for=unicode-bidi>plaintext</dfn></dt> 2.381 <dd><p>This value behaves as ''isolate'' except that for the purposes of 2.382 the Unicode bidirectional algorithm, the base directionality of each 2.383 of the element's <i>bidi paragraphs</i> (if a block container) 2.384 @@ -504,7 +400,7 @@ 2.385 2.386 <p>In this process, replaced elements with ''display: inline'' 2.387 are treated as neutral characters, 2.388 - unless their 'unicode-bidi' property is either 'embed' or 'bidi-override', 2.389 + unless their 'unicode-bidi' property is either ''embed'' or ''bidi-override'', 2.390 in which case they are treated as strong characters 2.391 in the 'direction' specified for the element. 2.392 All other atomic inline-level boxes are treated as neutral characters 2.393 @@ -530,7 +426,7 @@ 2.394 <p class="note"> 2.395 Because the Unicode algorithm has a limit of 61 levels of embedding, 2.396 care should be taken not to use 'unicode-bidi' 2.397 - with a value other than 'normal' unless appropriate. 2.398 + with a value other than ''normal'' unless appropriate. 2.399 In particular, a value of ''inherit'' 2.400 should be used with extreme caution. However, for elements that are, 2.401 in general, intended to be displayed as blocks, a setting of 2.402 @@ -760,48 +656,22 @@ 2.403 <h3 id="writing-mode"> 2.404 Block Flow Direction: the 'writing-mode' property</h3> 2.405 2.406 - <table class="propdef"> 2.407 - <tbody> 2.408 - <tr> 2.409 - <th>Name:</th> 2.410 - <td><dfn>writing-mode</dfn></td> 2.411 - </tr> 2.412 - <tr> 2.413 - <th><a href="#values">Value</a>:</th> 2.414 - <td>horizontal-tb | vertical-rl | vertical-lr</td> 2.415 - </tr> 2.416 - <tr> 2.417 - <th>Initial:</th> 2.418 - <td>horizontal-tb</td> 2.419 - </tr> 2.420 - <tr> 2.421 - <th>Applies to:</th> 2.422 - <td>All elements except table row groups, table column groups, table rows, and table columns</td> 2.423 - </tr> 2.424 - <tr> 2.425 - <th>Inherited:</th> 2.426 - <td>yes</td> 2.427 - </tr> 2.428 - <tr> 2.429 - <th>Percentages:</th> 2.430 - <td>N/A</td> 2.431 - </tr> 2.432 - <tr> 2.433 - <th>Media:</th> 2.434 - <td>visual</td> 2.435 - </tr> 2.436 - <tr> 2.437 - <th>Computed value:</th> 2.438 - <td>specified value</td> 2.439 - </tr> 2.440 - </tbody> 2.441 - </table> 2.442 + <pre class='propdef'> 2.443 + Name: writing-mode 2.444 + Value: horizontal-tb | vertical-rl | vertical-lr 2.445 + Initial: horizontal-tb 2.446 + Applies to: All elements except table row groups, table column groups, table rows, and table columns 2.447 + Inherited: yes 2.448 + Percentages: n/a 2.449 + Media: visual 2.450 + Computed value: specified value 2.451 + </pre> 2.452 2.453 <p>This property specifies whether lines of text are laid out horizontally 2.454 or vertically and the direction in which blocks progress. Possible 2.455 values:</p> 2.456 2.457 - <dl> 2.458 + <dl dfn-for=writing-mode dfn-type=value> 2.459 <dt><dfn>horizontal-tb</dfn></dt> 2.460 <dd>Top-to-bottom <i>block flow direction</i>. 2.461 The <i>writing mode</i> is horizontal.</dd> 2.462 @@ -838,9 +708,9 @@ 2.463 block: 2.464 <ul> 2.465 <li>If the element has a specified 'display' of ''inline'', its 'display' 2.466 - computes to 'inline-block'. [[!CSS21]] 2.467 + computes to ''inline-block''. [[!CSS21]] 2.468 <li>If the element has a specified 'display' of ''run-in'', its 'display' 2.469 - computes to 'block'. [[!CSS21]] 2.470 + computes to ''block''. [[!CSS21]] 2.471 <li>If the element is a block container, then it establishes a new block 2.472 formatting context. 2.473 </ul> 2.474 @@ -1088,7 +958,7 @@ 2.475 'vertical-align' value. 2.476 <div class="example"> 2.477 <p>Given following sample markup: 2.478 - <pre><p><span class="outer">Ap <span class="inner"><i>ji</i></span></span></p></pre> 2.479 + <pre><p><span class="outer">Ap <span class="inner"><i title=''>ji</i></span></span></p></pre> 2.480 <p>And the following style rule: 2.481 <pre>span.inner { font-size: .75em; }</pre> 2.482 <p>The baseline tables of the parent (<code>.outer</code>) and the child 2.483 @@ -1161,13 +1031,13 @@ 2.484 <dl> 2.485 <dt>rotate</dt> 2.486 <dd>Rotate the glyph from horizontal to vertical 2.487 - <a href="diagrams/glyph-right.svg" type="image/svg+xml"> 2.488 + <a href="diagrams/glyph-right.svg"> 2.489 <img src="diagrams/glyph-right.png" class="figure" 2.490 alt="Rotate the glyph from horizontal to vertical"></a> 2.491 2.492 <dt>translate</dt> 2.493 <dd>Translate the glyph from horizontal to vertical 2.494 - <a href="diagrams/glyph-upright.svg" type="image/svg+xml"> 2.495 + <a href="diagrams/glyph-upright.svg"> 2.496 <img src="diagrams/glyph-upright.png" class="figure" 2.497 alt="Translate the glyph from horizontal to vertical"></a> 2.498 </dl> 2.499 @@ -1192,43 +1062,16 @@ 2.500 <h3 id="text-orientation"> 2.501 Orienting Text: the 'text-orientation' property</h3> 2.502 2.503 - <table class="propdef"> 2.504 - <tbody> 2.505 - <tr> 2.506 - <th>Name:</th> 2.507 - <td><dfn>text-orientation</dfn></td> 2.508 - </tr> 2.509 - <tr> 2.510 - <th><a href="#values">Value</a>:</th> 2.511 - <td>mixed | upright | sideways-right | sideways-left | sideways 2.512 - | use-glyph-orientation 2.513 - </tr> 2.514 - <tr> 2.515 - <th>Initial:</th> 2.516 - <td>mixed</td> 2.517 - </tr> 2.518 - <tr> 2.519 - <th>Applies to:</th> 2.520 - <td>all elements except table row groups, rows, column groups, and columns</td> 2.521 - </tr> 2.522 - <tr> 2.523 - <th>Inherited:</th> 2.524 - <td>yes</td> 2.525 - </tr> 2.526 - <tr> 2.527 - <th>Percentages:</th> 2.528 - <td>N/A</td> 2.529 - </tr> 2.530 - <tr> 2.531 - <th>Media:</th> 2.532 - <td>visual</td> 2.533 - </tr> 2.534 - <tr> 2.535 - <th>Computed value:</th> 2.536 - <td>specified value</td> 2.537 - </tr> 2.538 - </tbody> 2.539 - </table> 2.540 + <pre class='propdef'> 2.541 + Name: text-orientation 2.542 + Value: mixed | upright | sideways-right | sideways-left | sideways | use-glyph-orientation 2.543 + Initial: mixed 2.544 + Applies to: all elements except table row groups, rows, column groups, and columns 2.545 + Inherited: yes 2.546 + Percentages: n/a 2.547 + Media: visual 2.548 + Computed value: specified value 2.549 + </pre> 2.550 2.551 <p>This property specifies the orientation of text 2.552 within a line. Current values only have an effect in vertical writing 2.553 @@ -1241,7 +1084,7 @@ 2.554 2.555 <p>Values have the following meanings:</p> 2.556 2.557 - <dl> 2.558 + <dl dfn-for=text-orientation dfn-type=value> 2.559 <dt><dfn>mixed</dfn></dt> 2.560 <dd><p>In vertical writing modes, characters from horizontal-only 2.561 scripts are set sideways, i.e. 90° clockwise from their standard 2.562 @@ -1501,7 +1344,7 @@ 2.563 is only one set of these terms. 2.564 2.565 <p class="note"> 2.566 - Note: [[CSS-FLEXBOX]] also defines <a href="http://www.w3.org/TR/css3-flexbox/#box-model">flex-relative terms</a>, 2.567 + Note: [[CSS3-FLEXBOX]] also defines <a href="http://www.w3.org/TR/css3-flexbox/#box-model">flex-relative terms</a>, 2.568 which are used in describing flex layout. 2.569 2.570 <h3 id="abstract-dimensions"> 2.571 @@ -1519,9 +1362,9 @@ 2.572 the <i>horizontal dimension</i> in horizontal writing modes, and 2.573 the <i>vertical dimension</i> in vertical writing modes.</dd> 2.574 <dt><dfn>block-axis</dfn></dt> 2.575 - <dd>The axis in the block dimension, i.e. the <i>vertical 2.576 - axis</i> in horizontal writing modes and the <i>horizontal 2.577 - axis</i> in vertical writing modes.</dd> 2.578 + <dd>The axis in the block dimension, 2.579 + i.e. the <i>vertical axis</i> in horizontal writing modes 2.580 + and the <i>horizontal axis</i> in vertical writing modes.</dd> 2.581 <dt><dfn>inline-axis</dfn></dt> 2.582 <dd>The axis in the inline dimension, i.e. the <i>horizontal 2.583 axis</i> in horizontal writing modes and the <i>vertical axis</i> 2.584 @@ -1665,7 +1508,7 @@ 2.585 mappings between physical and line-relative directions. 2.586 2.587 <div class="figure"> 2.588 - <a href="diagrams/line-orient-up.svg" type="image/svg+xml"> 2.589 + <a href="diagrams/line-orient-up.svg"> 2.590 <img src="diagrams/line-orient-up.png" class="landscape" 2.591 alt="Line orientation compass"></a> 2.592 <p class="caption">Line orientation compass</p> 2.593 @@ -1673,16 +1516,16 @@ 2.594 2.595 <div class="figurepair"> 2.596 <div class="figure"> 2.597 - <a href="diagrams/line-orient-right.svg" type="image/svg+xml"> 2.598 + <a href="diagrams/line-orient-right.svg"> 2.599 <img src="diagrams/line-orient-right.png" class="portrait" 2.600 alt="Typical orientation in vertical"></a> 2.601 <p class="caption">Typical orientation in vertical</p> 2.602 </div> 2.603 2.604 <div class="figure"> 2.605 - <a href="diagrams/line-orient-left.svg" type="image/svg+xml"> 2.606 + <a href="diagrams/line-orient-left.svg"> 2.607 <img src="diagrams/line-orient-left.png" class="portrait" 2.608 - alt="Line orientation with ''text-orientation: sideways-left''"></a> 2.609 + alt="Line orientation with ‘text-orientation: sideways-left’"></a> 2.610 <p class="caption">Line orientation with ''text-orientation: sideways-left''</p> 2.611 </div> 2.612 </div> 2.613 @@ -1856,7 +1699,7 @@ 2.614 and if the table had ''auto'' values for 'margin-top' and 'margin-bottom' 2.615 it would be centered vertically within its block flow. 2.616 <div class="figure"> 2.617 - <p><a href="diagrams/vertical-table.svg" type="image/svg+xml"> 2.618 + <p><a href="diagrams/vertical-table.svg"> 2.619 <img alt="Diagram of a vertical-rl mixed rtl table in a 2.620 vertical block formatting context, showing the ordering of rows, 2.621 cells, and columns as described above." 2.622 @@ -2108,6 +1951,7 @@ 2.623 However, any table cells or <i>flex items</i> that are <i>block containers</i> are laid out assuming infinite <i>available space</i> 2.624 and so behave accordingly, possibly limiting their <i>measure</i> to the size of the initial containing block 2.625 or triggering multi-column layout so that they grow in the direction of the infinite measure. 2.626 + </ul> 2.627 2.628 2.629 <h4 id="orthogonal-pagination"> 2.630 @@ -2180,7 +2024,7 @@ 2.631 <h3 id="line-mappings"> 2.632 Line-Relative Mappings</h3> 2.633 2.634 - <p>The <dfn>line-relative directions</dfn> are 2.635 + <p>The <a>line-relative directions</a> are 2.636 <a href="#over">over</a>, 2.637 <a href="#under">under</a>, 2.638 <a href="#line-left">line-left</a>, and 2.639 @@ -2241,45 +2085,13 @@ 2.640 <h3 id="caption-side"> 2.641 Table Caption Mappings: the 'caption-side' keywords</h3> 2.642 2.643 - <table class="propdef"> 2.644 - <tbody> 2.645 - <tr> 2.646 - <th>Property:</th> 2.647 - <td>'caption-side'</td> 2.648 - </tr> 2.649 - <tr> 2.650 - <th>New Values:</th> 2.651 - <td>''block-start'' | ''block-end''</td> 2.652 - </tr> 2.653 - <tr> 2.654 - <th>Initial:</th> 2.655 - <td>start</td> 2.656 - </tr> 2.657 - <tr> 2.658 - <th>Applies to:</th> 2.659 - <td>same as CSS2.1</td> 2.660 - </tr> 2.661 - <tr> 2.662 - <th>Inherited:</th> 2.663 - <td>same as CSS2.1</td> 2.664 - </tr> 2.665 - <tr> 2.666 - <th>Percentages:</th> 2.667 - <td>same as CSS2.1</td> 2.668 - </tr> 2.669 - <tr> 2.670 - <th>Media:</th> 2.671 - <td>same as CSS2.1</td> 2.672 - </tr> 2.673 - <tr> 2.674 - <th>Computed value:</th> 2.675 - <td>specified value</td> 2.676 - </tr> 2.677 - </tbody> 2.678 - </table> 2.679 + <pre class='propdef'> 2.680 + Name: caption-side 2.681 + New Values: block-start | block-end 2.682 + </pre> 2.683 2.684 <p>This module introduces two new values to the 'caption-side' property: 2.685 - ''block-start'' and ''block-end'', 2.686 + <dfn value for='caption-side'>block-start</dfn> and <dfn value for='caption-side'>block-end</dfn>, 2.687 which position the caption before and after the table box, respectively. 2.688 For tables with ''horizontal-tb'' writing mode, 2.689 they are equivalent to the existing ''top'' and ''bottom'' values, respectively. [[!CSS21]] 2.690 @@ -2291,7 +2103,7 @@ 2.691 <p>Implementations that support the ''top'' and ''bottom'' values 2.692 of the 'caption-side' property but do not support side captions 2.693 (i.e. ''left'' and ''right'' captions in horizontal writing modes) 2.694 - must treat both ''top'' and ''bottom'' as ''block-start'', 2.695 + must treat both ''top'' and ''bottom'' as <a value for=caption-side>block-start</a>, 2.696 when the table is in a vertical writing mode. 2.697 2.698 <p>For implementations that do support side captions 2.699 @@ -2396,57 +2208,26 @@ 2.700 <h3 id="text-combine-horizontal"> 2.701 Horizontal-in-Vertical Composition: the 'text-combine-horizontal' property</h3> 2.702 2.703 - <table class="propdef"> 2.704 - <tbody> 2.705 - <tr> 2.706 - <th>Name:</th> 2.707 - <td><dfn>text-combine-horizontal</dfn></td> 2.708 - </tr> 2.709 - <tr> 2.710 - <th><a href="#values">Value</a>:</th> 2.711 - <td>none | all 2.712 - | [ digits <integer>? ] 2.713 - <!-- 2.714 - | [ [ numeric <integer> | digits <integer> ] 2.715 - || [ alpha <integer> | latin <integer> ] 2.716 - || alphanumeric <integer> ] 2.717 - --> 2.718 - </tr> 2.719 - <tr> 2.720 - <th>Initial:</th> 2.721 - <td>none</td> 2.722 - </tr> 2.723 - <tr> 2.724 - <th>Applies to:</th> 2.725 - <td>non-replaced inline elements</td> 2.726 - </tr> 2.727 - <tr> 2.728 - <th>Inherited:</th> 2.729 - <td><a href="http://lists.w3.org/Archives/Public/www-style/2013Jul/0154.html" class="issue">???</a></td> 2.730 - </tr> 2.731 - <tr> 2.732 - <th>Percentages:</th> 2.733 - <td>N/A</td> 2.734 - </tr> 2.735 - <tr> 2.736 - <th>Media:</th> 2.737 - <td>visual</td> 2.738 - </tr> 2.739 - <tr> 2.740 - <th>Computed value:</th> 2.741 - <td>specified keyword, plus integer if ''digits''</td> 2.742 - </tr> 2.743 - </tbody> 2.744 - </table> 2.745 + <pre class='propdef'> 2.746 + Name: text-combine-horizontal 2.747 + Value: none | all | [ digits <integer>? ] 2.748 + Initial: none 2.749 + Applies to: non-replaced inline elements 2.750 + Inherited: <a href="http://lists.w3.org/Archives/Public/www-style/2013Jul/0154.html" class="issue">???</a> 2.751 + Percentages: n/a 2.752 + Media: visual 2.753 + Computed value: specified keyword, plus integer if ''digits'' 2.754 + </pre> 2.755 2.756 <p>This property allows the combination of multiple characters into the 2.757 space of a single character. This property only has an effect 2.758 in vertical writing modes. Values have the following meanings:</p> 2.759 2.760 <dl> 2.761 - <dt><dfn title="text-combine-horizontal:none">none</dfn> 2.762 + <dt><dfn value for=text-combine-horizontal>none</dfn> 2.763 <dd>No special processing.</dd> 2.764 - <dt><dfn title="text-combine-horizontal:all">all</dfn> 2.765 + 2.766 + <dt><dfn value for=text-combine-horizontal>all</dfn> 2.767 <dd>In vertical writing modes, 2.768 attempt to display the text contents of the element horizontally within the vertical line box. 2.769 If the contents are wider than 1em, the UA must fit the contents within 1em, see below. 2.770 @@ -2455,7 +2236,7 @@ 2.771 If the content contains any element boundaries this is treated as 2.772 ''text-combine-horizontal: none'' on the element and any descendants. 2.773 <!-- 2.774 - <dt><dfn title="text-combine-horizontal:numeric">numeric</dfn> 2.775 + <dt><dfn value for=text-combine-horizontal>numeric</dfn> 2.776 <dd>Within the element, each sequence of consecutive horizontal numbers 2.777 that has as many or fewer characters than the integer given is treated 2.778 as if it were in an anonymous inline box with 2.779 @@ -2464,7 +2245,7 @@ 2.780 belonging to a Number category (N*) that does not belong to a 2.781 <a href="#script-orientations">vertical script</a>. 2.782 --> 2.783 - <dt><dfn title="text-combine-horizontal:digits">digits <var><integer></var>?</dfn> 2.784 + <dt><dfn value for=text-combine-horizontal>digits <var><integer></var>?</dfn> 2.785 <dd>Within the element, each maximal sequence of consecutive ASCII digits (U+0030–U+0039) 2.786 that has as many or fewer characters than the integer given is treated 2.787 as if it were in an anonymous inline box with 2.788 @@ -2472,7 +2253,7 @@ 2.789 When the integer is omitted, 2 is used. 2.790 Integers outside the range 1-4 are invalid. 2.791 <!-- 2.792 - <dt><dfn title="text-combine-horizontal:alpha">alpha</dfn> 2.793 + <dt><dfn value for=text-combine-horizontal>alpha</dfn> 2.794 <dd>Within the element, each sequence of consecutive horizontal letters 2.795 that has as many or fewer characters than the integer given is treated 2.796 as if it were in an anonymous inline box with 2.797 @@ -2480,7 +2261,7 @@ 2.798 For this property, a <dfn>horizontal letter</dfn> is any character belonging 2.799 to a Letter category (L*) that does not belong to a 2.800 <a href="#script-orientations">vertical script</a>. 2.801 - <dt><dfn title="text-combine-horizontal:latin">latin</dfn> 2.802 + <dt><dfn value for=text-combine-horizontal>latin</dfn> 2.803 <dd>Within the element, each sequence of Latin letters 2.804 that has as many or fewer characters than the integer given is treated 2.805 as if it were in an anonymous inline box with 2.806 @@ -2489,7 +2270,7 @@ 2.807 a Letter category (L*) that also belongs to the Latin script. 2.808 <p class="issue">This definition could replace ''alpha'' as a simplification. 2.809 However, it wouldn't work for greek or mixtures of greek and latin (e.g. μm). 2.810 - <dt><dfn title="text-combine-horizontal:alphanumeric">alphanumeric</dfn> 2.811 + <dt><dfn value for=text-combine-horizontal>alphanumeric</dfn> 2.812 <dd>Within the element, each sequence of consecutive horizontal digits and/or 2.813 letters that has as many or fewer characters than the integer given is treated 2.814 as if it were in an anonymous inline box with 2.815 @@ -2507,7 +2288,7 @@ 2.816 <p><img alt="Diagram of tate-chu-yoko, showing the two digits of a date 2.817 set halfwidth side-by-side in a vertical column of text" 2.818 class="example" src="tate-chu-yoko.png"> 2.819 - <p class="caption">Example of horizontal-in-vertical <i lang="ja">tate-chu-yoko</i></p> 2.820 + <p class="caption">Example of horizontal-in-vertical <i lang="ja" title=''>tate-chu-yoko</i></p> 2.821 </div> 2.822 2.823 <p>The figure is the result of the rules</p> 2.824 @@ -2519,7 +2300,7 @@ 2.825 <!-- --><date>平成20年4月16日に</date> 2.826 </pre> 2.827 2.828 - <p>In Japanese, this effect is known as <i lang="ja">tate-chu-yoko</i>. 2.829 + <p>In Japanese, this effect is known as <i lang="ja" title=''>tate-chu-yoko</i>. 2.830 </div> 2.831 2.832 <div class="example"> 2.833 @@ -2532,7 +2313,7 @@ 2.834 the first two digits of the number are rendered as tate-chu-yoko 2.835 while the rest of the number is rendered sideways." 2.836 class="example" src="bad-tate-chu-yoko.png"> 2.837 - <p class="caption">Example of mis-applied <i lang="ja">tate-chu-yoko</i></p> 2.838 + <p class="caption">Example of mis-applied <i lang="ja" title=''>tate-chu-yoko</i></p> 2.839 </div> 2.840 </div> 2.841 2.842 @@ -2540,7 +2321,7 @@ 2.843 when the combined text consists of more than one <i>character</i>, 2.844 then any full-width <i>characters</i> must first be converted to their non-full-width equivalents 2.845 by reversing the algorithm defined for ''text-transform: full-width'' in [[!CSS3TEXT]]. 2.846 - Also, a 'font-variant' value of ''full-width'' must be ignored in such cases: 2.847 + Also, a <a property>font-variant</a> value of ''full-width'' must be ignored in such cases: 2.848 whether applied via ''@font-face'' descriptor or property declaration, 2.849 within the combined text this value does not not cause the UA to enable that font feature. [[!CSS3-FONTS]] 2.850 2.851 @@ -2625,55 +2406,29 @@ 2.852 <h3 id="text-combine-mode"> 2.853 Horizontal-in-Vertical Glyph Scaling: the 'text-combine-mode' property</h3> 2.854 2.855 - <table class="propdef"> 2.856 - <tbody> 2.857 - <tr> 2.858 - <th>Name: 2.859 - <td><dfn>text-combine-mode</dfn> 2.860 - </tr> 2.861 - <tr> 2.862 - <th><a href="#values">Value</a>: 2.863 - <td>auto | compress | [ no-compress || use-glyphs ] 2.864 - </tr> 2.865 - <tr> 2.866 - <th>Initial: 2.867 - <td>auto 2.868 - </tr> 2.869 - <tr> 2.870 - <th>Applies to: 2.871 - <td>non-replaced inline elements 2.872 - </tr> 2.873 - <tr> 2.874 - <th>Inherited: 2.875 - <td>yes 2.876 - </tr> 2.877 - <tr> 2.878 - <th>Percentages: 2.879 - <td>N/A 2.880 - </tr> 2.881 - <tr> 2.882 - <th>Media: 2.883 - <td>visual 2.884 - </tr> 2.885 - <tr> 2.886 - <th>Computed value: 2.887 - <td>specified value 2.888 - </tr> 2.889 - </tbody> 2.890 - </table> 2.891 + <pre class='propdef'>q 2.892 + Name: text-combine-mode 2.893 + Value: auto | compress | [ no-compress || use-glyphs ] 2.894 + Initial: auto 2.895 + Applies to: non-replaced inline elements 2.896 + Inherited: yes 2.897 + Percentages: n/a 2.898 + Media: visual 2.899 + Computed value: specified value 2.900 + </pre> 2.901 2.902 <p>This property controls how multiple characters are combined into the 2.903 space of a single character when specified to do so via 2.904 'text-combine-horizontal'. Values have the following meanings:</p> 2.905 2.906 - <dl> 2.907 - <dt><dfn title="text-combine-mode:auto">auto</dfn> 2.908 + <dl dfn-for=text-combine-mode dfn-type=value> 2.909 + <dt><dfn>auto</dfn> 2.910 <dd>If the contents are wider than 1em, the UA must attempt to fit the 2.911 contents within 1em, but may use any method to do so. 2.912 - <dt><dfn title="text-combine-mode:compress">compress</dfn> 2.913 + <dt><dfn>compress</dfn> 2.914 <dd>Compress the composition (horizontally) as a whole until it fits within 1em. 2.915 Do not substitute alternate-width glyphs. 2.916 - <dt><dfn title="text-combine-mode:use-glyphs">use-glyphs</dfn> 2.917 + <dt><dfn>use-glyphs</dfn> 2.918 <dd>Attempt to substitute narrower glyphs as necessary to make the 2.919 composition fit within 1em: 2.920 <ul> 2.921 @@ -2688,7 +2443,7 @@ 2.922 padding (equally on both sides) each glyph individually if it does 2.923 not match the required advance width. (This step does not apply if 2.924 ''no-compress'' is specified.) 2.925 - <dt><dfn title="text-combine-mode:no-compress">no-compress</dfn> 2.926 + <dt><dfn>no-compress</dfn> 2.927 <dd>Do not compress the composition or perform any glyph substitution 2.928 in order to make the composition fit within 1em. 2.929 When combined with ''use-glyphs'', however, this indicates to perform 2.930 @@ -2735,179 +2490,11 @@ 2.931 <li>Removed concept of "typographic modes". 2.932 <li>Altered <a href="#orthogonal-auto">orthogonal sizing</a> 2.933 to take into account the fill-available size; now the minimum of the 2.934 - fill-available and ICB size is used to resolve 'auto' sizes. 2.935 + fill-available and ICB size is used to resolve ''auto'' sizes. 2.936 <li>Renamed ''digits'' to ''numeric'' and ''ascii-digits'' to ''digits'' for 'text-combine-horizontal'. 2.937 <li>Defined interaction of 'text-combine-horizontal' and 'text-transform'. 2.938 </ul> 2.939 2.940 -<h2 id="conformance"> 2.941 -Conformance</h2> 2.942 - 2.943 -<h3 id="conventions"> 2.944 -Document Conventions</h3> 2.945 - 2.946 - <p>Conformance requirements are expressed with a combination of 2.947 - descriptive assertions and RFC 2119 terminology. The key words “MUST”, 2.948 - “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 2.949 - “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 2.950 - document are to be interpreted as described in RFC 2119. 2.951 - However, for readability, these words do not appear in all uppercase 2.952 - letters in this specification. 2.953 - 2.954 - <p>All of the text of this specification is normative except sections 2.955 - explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> 2.956 - 2.957 - <p>Examples in this specification are introduced with the words “for example” 2.958 - or are set apart from the normative text with <code>class="example"</code>, 2.959 - like this: 2.960 - 2.961 - <div class="example"> 2.962 - <p>This is an example of an informative example.</p> 2.963 - </div> 2.964 - 2.965 - <p>Informative notes begin with the word “Note” and are set apart from the 2.966 - normative text with <code>class="note"</code>, like this: 2.967 - 2.968 - <p class="note">Note, this is an informative note.</p> 2.969 - 2.970 -<h3 id="conformance-classes"> 2.971 -Conformance Classes</h3> 2.972 - 2.973 - <p>Conformance to CSS Writing Modes Level 3 2.974 - is defined for three conformance classes: 2.975 - <dl> 2.976 - <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> 2.977 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 2.978 - style sheet</a>. 2.979 - <dt><dfn>renderer</dfn></dt> 2.980 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.981 - that interprets the semantics of a style sheet and renders 2.982 - documents that use them. 2.983 - <dt><dfn id="authoring-tool">authoring tool</dfn></dt> 2.984 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.985 - that writes a style sheet. 2.986 - </dl> 2.987 - 2.988 - <p>A style sheet is conformant to CSS Writing Modes Level 3 2.989 - if all of its declarations that use properties defined in this module 2.990 - have values that are valid according to the generic CSS grammar and the 2.991 - individual grammars of each property as given in this module. 2.992 - 2.993 - <p>A renderer is conformant to CSS Writing Modes Level 3 2.994 - if, in addition to interpreting the style sheet as defined by the 2.995 - appropriate specifications, it supports all the features defined 2.996 - by CSS Writing Modes Level 3 by parsing them correctly 2.997 - and rendering the document accordingly. However, the inability of a 2.998 - UA to correctly render a document due to limitations of the device 2.999 - does not make the UA non-conformant. (For example, a UA is not 2.1000 - required to render color on a monochrome monitor.) 2.1001 - 2.1002 - <p>An authoring tool is conformant to CSS Writing Modes Level 3 2.1003 - if it writes style sheets that are syntactically correct according to the 2.1004 - generic CSS grammar and the individual grammars of each feature in 2.1005 - this module, and meet all other conformance requirements of style sheets 2.1006 - as described in this module. 2.1007 - 2.1008 -<h3 id="partial"> 2.1009 -Partial Implementations</h3> 2.1010 - 2.1011 - <p>So that authors can exploit the forward-compatible parsing rules to 2.1012 - assign fallback values, CSS renderers <strong>must</strong> 2.1013 - treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 2.1014 - as appropriate</a>) any at-rules, properties, property values, keywords, 2.1015 - and other syntactic constructs for which they have no usable level of 2.1016 - support. In particular, user agents <strong>must not</strong> selectively 2.1017 - ignore unsupported component values and honor supported values in a single 2.1018 - multi-value property declaration: if any value is considered invalid 2.1019 - (as unsupported values must be), CSS requires that the entire declaration 2.1020 - be ignored.</p> 2.1021 - 2.1022 -<h3 id="experimental"> 2.1023 -Experimental Implementations</h3> 2.1024 - 2.1025 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 2.1026 - reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 2.1027 - syntax</a> for proprietary and experimental extensions to CSS. 2.1028 - 2.1029 - <p>Prior to a specification reaching the Candidate Recommendation stage 2.1030 - in the W3C process, all implementations of a CSS feature are considered 2.1031 - experimental. The CSS Working Group recommends that implementations 2.1032 - use a vendor-prefixed syntax for such features, including those in 2.1033 - W3C Working Drafts. This avoids incompatibilities with future changes 2.1034 - in the draft. 2.1035 - </p> 2.1036 - 2.1037 -<h3 id="testing">Non-Experimental Implementations</h3> 2.1038 - 2.1039 - <p>Once a specification reaches the Candidate Recommendation stage, 2.1040 - non-experimental implementations are possible, and implementors should 2.1041 - release an unprefixed implementation of any CR-level feature they 2.1042 - can demonstrate to be correctly implemented according to spec. 2.1043 - 2.1044 - <p>To establish and maintain the interoperability of CSS across 2.1045 - implementations, the CSS Working Group requests that non-experimental 2.1046 - CSS renderers submit an implementation report (and, if necessary, the 2.1047 - testcases used for that implementation report) to the W3C before 2.1048 - releasing an unprefixed implementation of any CSS features. Testcases 2.1049 - submitted to W3C are subject to review and correction by the CSS 2.1050 - Working Group. 2.1051 - 2.1052 - <p>Further information on submitting testcases and implementation reports 2.1053 - can be found from on the CSS Working Group's website at 2.1054 - <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 2.1055 - Questions should be directed to the 2.1056 - <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 2.1057 - mailing list. 2.1058 - 2.1059 -<h3 id="cr-exit-criteria"> 2.1060 -CR Exit Criteria</h3> 2.1061 - 2.1062 - <p> 2.1063 - For this specification to be advanced to Proposed Recommendation, 2.1064 - there must be at least two independent, interoperable implementations 2.1065 - of each feature. Each feature may be implemented by a different set of 2.1066 - products, there is no requirement that all features be implemented by 2.1067 - a single product. For the purposes of this criterion, we define the 2.1068 - following terms: 2.1069 - 2.1070 - <dl> 2.1071 - <dt>independent <dd>each implementation must be developed by a 2.1072 - different party and cannot share, reuse, or derive from code 2.1073 - used by another qualifying implementation. Sections of code that 2.1074 - have no bearing on the implementation of this specification are 2.1075 - exempt from this requirement. 2.1076 - 2.1077 - <dt>interoperable <dd>passing the respective test case(s) in the 2.1078 - official CSS test suite, or, if the implementation is not a Web 2.1079 - browser, an equivalent test. Every relevant test in the test 2.1080 - suite should have an equivalent test created if such a user 2.1081 - agent (UA) is to be used to claim interoperability. In addition 2.1082 - if such a UA is to be used to claim interoperability, then there 2.1083 - must one or more additional UAs which can also pass those 2.1084 - equivalent tests in the same way for the purpose of 2.1085 - interoperability. The equivalent tests must be made publicly 2.1086 - available for the purposes of peer review. 2.1087 - 2.1088 - <dt>implementation <dd>a user agent which: 2.1089 - 2.1090 - <ol class=inline> 2.1091 - <li>implements the specification. 2.1092 - 2.1093 - <li>is available to the general public. The implementation may 2.1094 - be a shipping product or other publicly available version 2.1095 - (i.e., beta version, preview release, or “nightly build”). 2.1096 - Non-shipping product releases must have implemented the 2.1097 - feature(s) for a period of at least one month in order to 2.1098 - demonstrate stability. 2.1099 - 2.1100 - <li>is not experimental (i.e., a version specifically designed 2.1101 - to pass the test suite and is not intended for normal usage 2.1102 - going forward). 2.1103 - </ol> 2.1104 - </dl> 2.1105 - 2.1106 - <p>The specification will remain Candidate Recommendation for at least 2.1107 - six months. 2.1108 2.1109 <h2 class="no-num" id="acknowledgements"> 2.1110 Acknowledgements</h2> 2.1111 @@ -3030,22 +2617,3 @@ 2.1112 the glyphs in the Unicode code charts are shown in their vertical orientation. 2.1113 In horizontal text, they are typeset in a 90° counter-clockwise 2.1114 rotation from this orientation. 2.1115 - 2.1116 -<h2 class="no-num"> 2.1117 -References</h2> 2.1118 - 2.1119 -<h3 class="no-num"> 2.1120 -Normative references</h3> 2.1121 -<!--normative--> 2.1122 - 2.1123 -<h3 class="no-num"> 2.1124 -Other references</h3> 2.1125 -<!--informative--> 2.1126 - 2.1127 - 2.1128 -<h2 class="no-num"> 2.1129 -Property Index</h2> 2.1130 -<!-- properties --> 2.1131 -<!-- Add alphabetic index? --> 2.1132 -</body> 2.1133 -</html>
