css-writing-modes/Overview.html

Tue, 16 Jul 2013 16:29:52 -0700

author
fantasai <fantasai.cvs@inkedblade.net>
date
Tue, 16 Jul 2013 16:29:52 -0700
changeset 8705
9a46d52c3a86
parent 8678
2369a5ba443d
child 8706
92aa893ac8ca
permissions
-rwxr-xr-x

[css-writing-modes] Require hwid/twid/qwid for OT implementations of TCY compression when they are available for all characters in the composition

fantasai@7057 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
fantasai@7057 2
fantasai@7057 3 <html lang=en>
fantasai@7057 4 <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
fantasai@7057 5 <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
fantasai@7057 6 <title>CSS Writing Modes Module Level 3</title>
fantasai@7057 7
fantasai@7057 8 <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
fantasai@7057 9 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
fantasai@7057 10 rel=dcterms.rights>
fantasai@7057 11 <meta content="CSS Writing Modes Module Level 3" name=dcterms.title>
fantasai@7057 12 <meta content=text name=dcterms.type>
fantasai@8705 13 <meta content=2013-07-16 name=dcterms.date>
fantasai@7057 14 <meta content="Elika J. Etemad" name=dcterms.creator>
fantasai@7057 15 <meta content="Koji Ishii" name=dcterms.creator>
fantasai@7057 16 <meta content=W3C name=dcterms.publisher>
fantasai@8130 17 <meta content="http://dev.w3.org/csswg/css3-writing-modes/"
fantasai@7057 18 name=dcterms.identifier>
fantasai@7057 19 <link href="../default.css" rel=stylesheet type="text/css">
fantasai@7057 20 <style type="text/css">
fantasai@7057 21 object { vertical-align: middle; }
fantasai@7057 22 .sidebar { float: right; background: #eee; border: solid gray; margin: 1em; }
fantasai@7057 23 .sidebar .figure { margin: 1em; }
fantasai@7057 24 .sidebar object { margin: 0 auto; display: block; }
fantasai@7057 25 .figurepair { display: table; margin: 1em auto; }
fantasai@7057 26 .figurepair .figure { display: table-cell; }
fantasai@7057 27 h2, .example { clear: both; }
fantasai@7057 28 .figure img,
fantasai@7057 29 .figure object,
fantasai@7057 30 .example img,
fantasai@7057 31 dd img { max-width: 100%; display: block; margin: 1em auto; }
fantasai@7057 32 div.figure table {
fantasai@7057 33 margin:auto;
fantasai@7057 34 }
fantasai@7057 35 </style>
fantasai@7057 36 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
fantasai@7057 37 type="text/css">
simon@8439 38 <script defer=defer
simon@8439 39 src="http://test.csswg.org/harness/annotate.js#CSS3-WRITING-MODES_DEV"
simon@8439 40 type="text/javascript"></script>
fantasai@7057 41
fantasai@7057 42 <body>
fantasai@7057 43 <div class=head> <!--begin-logo-->
fantasai@7057 44 <p><a href="http://www.w3.org/"><img alt=W3C height=48
fantasai@7057 45 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
fantasai@7057 46
fantasai@7057 47 <h1>CSS Writing Modes Module Level 3</h1>
fantasai@7057 48
fantasai@8705 49 <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 July 2013</h2>
fantasai@7057 50
fantasai@7057 51 <dl>
fantasai@7057 52 <dt>This version:
fantasai@7057 53
fantasai@7057 54 <dd><a
fantasai@7057 55 href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a>
fantasai@7057 56 <!--
fantasai@8705 57 <dd><a href="http://www.w3.org/TR/2013/WD-css3-writing-modes-20130716/">http://dev.w3.org/csswg/css3-writing-modes/</a>
fantasai@7057 58 -->
fantasai@7057 59
fantasai@7057 60 <dt>Latest version:
fantasai@7057 61
fantasai@7057 62 <dd><a
fantasai@7057 63 href="http://www.w3.org/TR/css3-writing-modes/">http://www.w3.org/TR/css3-writing-modes/</a>
fantasai@7057 64
fantasai@7057 65 <dt>Latest editor's draft:
fantasai@7057 66
fantasai@7057 67 <dd><a
fantasai@7057 68 href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a>
fantasai@7057 69
fantasai@7057 70 <dt>Previous version:
fantasai@7057 71
fantasai@7057 72 <dd><a
fantasai@7057 73 href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/</a>
fantasai@7057 74
fantasai@7057 75 <dt>Issues List:
fantasai@7057 76
fantasai@7057 77 <dd><a
fantasai@7057 78 href="http://www.w3.org/Style/CSS/Tracker/products/30">http://www.w3.org/Style/CSS/Tracker/products/30</a>
fantasai@7057 79
fantasai@8130 80 <dt>Feedback:
fantasai@8130 81
fantasai@8130 82 <dd><a
fantasai@8130 83 href="mailto:www-style@w3.org?subject=%5Bcss-writing-modes%5D%20feedback">www-style@w3.org</a>
fantasai@8130 84 with subject line “<kbd>[css-writing-modes <var>… message topic
fantasai@8130 85 …</var></kbd>” (<a
fantasai@8130 86 href="http://lists.w3.org/Archives/Public/www-style/"
fantasai@8130 87 rel=discussion>archives</a>)
fantasai@7057 88
fantasai@7057 89 <dt>Editors:
fantasai@7057 90
fantasai@7057 91 <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>
fantasai@7057 92 (Mozilla)
fantasai@7057 93
fantasai@7057 94 <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a>
fantasai@7057 95 (Rakuten, Inc.)
fantasai@7057 96
fantasai@7057 97 <dt>Previous Editors:
fantasai@7057 98
fantasai@7057 99 <dd><a href="mailto:murakami@antenna.co.jp">Shinyu Murakami</a> (<a
fantasai@7057 100 href="http://www.antenna.co.jp/">Antenna House</a>)
fantasai@7057 101
fantasai@7057 102 <dd><a href="mailto:paulnel@microsoft.com">Paul Nelson</a> (<a
fantasai@7057 103 href="http://www.microsoft.com/">Microsoft</a>)
fantasai@7057 104
fantasai@7057 105 <dd><a href="mailto:michelsu@microsoft.com">Michel Suignard</a> (<a
fantasai@7057 106 href="http://www.microsoft.com/">Microsoft</a>)
fantasai@8670 107
fantasai@8670 108 <dt>Test Suite:
fantasai@8670 109
fantasai@8670 110 <dd><a
fantasai@8670 111 href="http://test.csswg.org/suites/css3-writing-modes/nightly-unstable/">http://test.csswg.org/suites/css3-writing-modes/nightly-unstable/</a>
fantasai@7057 112 </dl>
fantasai@7057 113 <!--begin-copyright-->
fantasai@7057 114 <p class=copyright><a
fantasai@7057 115 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
kojiishi@7378 116 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
fantasai@7057 117 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
fantasai@7057 118 href="http://www.csail.mit.edu/"><abbr
fantasai@7057 119 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
fantasai@7057 120 href="http://www.ercim.eu/"><abbr
fantasai@7057 121 title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
kojiishi@7378 122 <a href="http://www.keio.ac.jp/">Keio</a>, <a
kojiishi@7378 123 href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
fantasai@7057 124 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
fantasai@7057 125 <a
fantasai@7057 126 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
fantasai@7057 127 and <a
fantasai@7057 128 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
fantasai@7057 129 use</a> rules apply.</p>
fantasai@7057 130 <!--end-copyright-->
fantasai@7057 131 <hr title="Separator for header">
fantasai@7057 132 </div>
fantasai@7057 133
fantasai@7057 134 <h2 class="no-num no-toc" id=abstract> Abstract</h2>
fantasai@7057 135
fantasai@7057 136 <p>CSS Writing Modes Level 3 defines CSS support for various international
fantasai@7057 137 writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left
fantasai@7057 138 (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and
fantasai@7057 139 vertical (e.g. Asian scripts).
fantasai@7057 140
fantasai@7057 141 <p>Inherently bottom-to-top scripts are not handled in this version. See <a
fantasai@7057 142 href="#UTN22" rel=biblioentry>[UTN22]<!--{{UTN22}}--></a> for an
fantasai@7057 143 explanation of relevant issues.
fantasai@7057 144
fantasai@7057 145 <h2 class="no-num no-toc" id=status> Status of this document</h2>
fantasai@7057 146 <!--begin-status-->
fantasai@7057 147
fantasai@7057 148 <p>This is a public copy of the editors' draft. It is provided for
fantasai@7057 149 discussion only and may change at any moment. Its publication here does
fantasai@7057 150 not imply endorsement of its contents by W3C. Don't cite this document
fantasai@7057 151 other than as work in progress.
fantasai@7057 152
fantasai@7057 153 <p>The (<a
fantasai@7057 154 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
fantasai@7057 155 mailing list <a
fantasai@7057 156 href="mailto:www-style@w3.org?Subject=%5Bcss3-writing-modes%5D%20PUT%20SUBJECT%20HERE">
fantasai@7057 157 www-style@w3.org</a> (see <a
fantasai@7057 158 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
fantasai@7057 159 discussion of this specification. When sending e-mail, please put the text
fantasai@7057 160 “css3-writing-modes” in the subject, preferably like this:
fantasai@7057 161 “[<!---->css3-writing-modes<!---->] <em>…summary of comment…</em>”
fantasai@7057 162
fantasai@8130 163 <p>This document was produced by the <a
fantasai@8130 164 href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
fantasai@8130 165 the <a href="http://www.w3.org/Style/">Style Activity</a>).
fantasai@7057 166
fantasai@7057 167 <p>This document was produced by a group operating under the <a
fantasai@8130 168 href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
fantasai@8130 169 2004 W3C Patent Policy</a>. W3C maintains a <a
fantasai@8130 170 href="http://www.w3.org/2004/01/pp-impl/32061/status"
fantasai@7057 171 rel=disclosure>public list of any patent disclosures</a> made in
fantasai@7057 172 connection with the deliverables of the group; that page also includes
fantasai@7057 173 instructions for disclosing a patent. An individual who has actual
fantasai@7057 174 knowledge of a patent which the individual believes contains <a
fantasai@8130 175 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
fantasai@7057 176 Claim(s)</a> must disclose the information in accordance with <a
fantasai@8130 177 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
fantasai@8130 178 6 of the W3C Patent Policy</a>.</p>
fantasai@7057 179 <!--end-status-->
fantasai@7057 180
fantasai@7057 181 <p>The following features are at-risk and may be dropped during CR:
fantasai@7057 182
fantasai@7057 183 <ul>
fantasai@7057 184 <li>The ‘<a href="#use-glyph-orientation"><code
fantasai@7057 185 class=css>use-glyph-orientation</code></a>’ of ‘<a
fantasai@7057 186 href="#text-orientation0"><code
fantasai@7057 187 class=property>text-orientation</code></a>’
fantasai@7057 188
kojiishi@7378 189 <li>The ‘<code class=css>digits</code>’ value of ‘<a
kojiishi@7378 190 href="#text-combine-horizontal0"><code
fantasai@7057 191 class=property>text-combine-horizontal</code></a>’.
fantasai@7057 192 </ul>
fantasai@7057 193
fantasai@7057 194 <h2 class="no-num no-toc" id=Contents> Table of Contents</h2>
fantasai@7057 195 <!--begin-toc-->
fantasai@7057 196
fantasai@7057 197 <ul class=toc>
fantasai@7057 198 <li><a href="#text-flow"><span class=secno>1. </span> Introduction to
fantasai@7057 199 Writing Modes</a>
fantasai@7057 200 <ul class=toc>
fantasai@7057 201 <li><a href="#placement"><span class=secno>1.1. </span> Module
fantasai@7057 202 Interactions</a>
fantasai@7057 203
fantasai@7057 204 <li><a href="#values"><span class=secno>1.2. </span> Values</a>
fantasai@7057 205 </ul>
fantasai@7057 206
fantasai@7057 207 <li><a href="#text-direction"><span class=secno>2. </span> Inline
fantasai@7057 208 Direction and Bidirectionality</a>
fantasai@7057 209 <ul class=toc>
fantasai@7057 210 <li><a href="#direction"><span class=secno>2.1. </span> Specifying
fantasai@7057 211 Directionality: the ‘<code class=property>direction</code>’
fantasai@7057 212 property</a>
fantasai@7057 213
fantasai@7057 214 <li><a href="#unicode-bidi"><span class=secno>2.2. </span> Embeddings
fantasai@7057 215 and Overrides: the ‘<code class=property>unicode-bidi</code>’
fantasai@7057 216 property</a>
fantasai@7057 217
fantasai@7057 218 <li><a href="#bidi-example"><span class=secno>2.3. </span> Example of
fantasai@7057 219 Bidirectional Text</a>
fantasai@7057 220
fantasai@7057 221 <li><a href="#bidi-box-model"><span class=secno>2.4. </span> Box model
fantasai@7057 222 for inline elements in bidirectional context</a>
fantasai@7057 223 </ul>
fantasai@7057 224
fantasai@7057 225 <li><a href="#vertical-intro"><span class=secno>3. </span> Introduction to
fantasai@7057 226 Vertical Text</a>
fantasai@7057 227 <ul class=toc>
fantasai@7057 228 <li><a href="#writing-mode"><span class=secno>3.1. </span> Block Flow
fantasai@7057 229 Direction: the ‘<code class=property>writing-mode</code>’
fantasai@7057 230 property</a>
fantasai@7057 231 <ul class=toc>
fantasai@7057 232 <li><a href="#svg-writing-mode"><span class=secno>3.1.1. </span>
fantasai@7057 233 SVG1.1 ‘<code class=property>writing-mode</code>’ Values</a>
fantasai@7057 234 </ul>
fantasai@7057 235 </ul>
fantasai@7057 236
fantasai@7057 237 <li><a href="#inline-alignment"><span class=secno>4. </span> Inline-level
fantasai@7057 238 Alignment</a>
fantasai@7057 239 <ul class=toc>
fantasai@7057 240 <li><a href="#intro-baselines"><span class=secno>4.1. </span>
fantasai@7057 241 Introduction to Baselines</a>
fantasai@7057 242
fantasai@7057 243 <li><a href="#text-baselines"><span class=secno>4.2. </span> Text
fantasai@7057 244 Baselines</a>
fantasai@7057 245
fantasai@7057 246 <li><a href="#replaced-baselines"><span class=secno>4.3. </span> Atomic
fantasai@7057 247 Inline Baselines</a>
fantasai@7057 248
fantasai@7057 249 <li><a href="#baseline-alignment"><span class=secno>4.4. </span>
fantasai@7057 250 Baseline Alignment</a>
fantasai@7057 251 </ul>
fantasai@7057 252
fantasai@7057 253 <li><a href="#intro-text-layout"><span class=secno>5. </span> Introduction
fantasai@7057 254 to Vertical Text Layout</a>
fantasai@7057 255 <ul class=toc>
fantasai@7057 256 <li><a href="#text-orientation"><span class=secno>5.1. </span> Orienting
fantasai@7057 257 Text: the ‘<code class=property>text-orientation</code>’
fantasai@7057 258 property</a>
fantasai@7057 259 <ul class=toc>
fantasai@7057 260 <li><a href="#vertical-orientations"><span class=secno>5.1.1. </span>
fantasai@7057 261 Mixed Vertical Orientations</a>
fantasai@7057 262
fantasai@7057 263 <li><a href="#vertical-font-features"><span class=secno>5.1.2. </span>
fantasai@7057 264 Vertical Typesetting and Font Features</a>
fantasai@7057 265 </ul>
fantasai@7057 266 </ul>
fantasai@7057 267
fantasai@7057 268 <li><a href="#abstract-box"><span class=secno>6. </span> Abstract Box
fantasai@7057 269 Terminology</a>
fantasai@7057 270 <ul class=toc>
fantasai@7057 271 <li><a href="#abstract-dimensions"><span class=secno>6.1. </span>
fantasai@7057 272 Abstract Dimensions</a>
fantasai@7057 273
fantasai@7057 274 <li><a href="#logical-directions"><span class=secno>6.2. </span>
fantasai@7057 275 Flow-relative Directions</a>
fantasai@7057 276
fantasai@7057 277 <li><a href="#line-directions"><span class=secno>6.3. </span>
fantasai@7057 278 Line-relative Directions</a>
fantasai@7057 279
fantasai@7057 280 <li><a href="#logical-to-physical"><span class=secno>6.4. </span>
fantasai@7057 281 Abstract-to-Physical Mappings</a>
fantasai@7057 282 </ul>
fantasai@7057 283
fantasai@7057 284 <li><a href="#abstract-layout"><span class=secno>7. </span> Abstract Box
fantasai@7057 285 Layout</a>
fantasai@7057 286 <ul class=toc>
fantasai@7057 287 <li><a href="#vertical-layout"><span class=secno>7.1. </span> Principles
fantasai@7057 288 of Layout in Vertical Writing Modes</a>
fantasai@7057 289
fantasai@7057 290 <li><a href="#dimension-mapping"><span class=secno>7.2. </span>
fantasai@7057 291 Dimensional Mapping</a>
fantasai@7057 292
fantasai@7057 293 <li><a href="#orthogonal-flows"><span class=secno>7.3. </span>
fantasai@7057 294 Orthogonal Flows</a>
fantasai@7057 295 <ul class=toc>
fantasai@7057 296 <li><a href="#orthogonal-auto"><span class=secno>7.3.1. </span>
fantasai@7057 297 Auto-sizing in Orthogonal Flows</a>
fantasai@7057 298
fantasai@7057 299 <li><a href="#orthogonal-multicol"><span class=secno>7.3.2. </span>
fantasai@7057 300 Multi-column Layout in Orthogonal Flows</a>
fantasai@7057 301
fantasai@7057 302 <li><a href="#orthogonal-pagination"><span class=secno>7.3.3. </span>
fantasai@7057 303 Fragmenting Orthogonal Flows</a>
fantasai@7057 304 </ul>
fantasai@7057 305
fantasai@7057 306 <li><a href="#logical-direction-layout"><span class=secno>7.4. </span>
fantasai@7057 307 Flow-Relative Mappings</a>
fantasai@7057 308
fantasai@7057 309 <li><a href="#line-mappings"><span class=secno>7.5. </span>
fantasai@7057 310 Line-Relative Mappings</a>
fantasai@7057 311
fantasai@7057 312 <li><a href="#physical-only"><span class=secno>7.6. </span> Purely
fantasai@7057 313 Physical Mappings</a>
fantasai@7057 314
fantasai@7057 315 <li><a href="#caption-side"><span class=secno>7.7. </span> Table Caption
fantasai@7057 316 Mappings: the ‘<code class=property>caption-side</code>’
fantasai@7057 317 keywords</a>
fantasai@7057 318 </ul>
fantasai@7057 319
fantasai@7057 320 <li><a href="#page-direction"><span class=secno>8. </span> Page Flow: the
fantasai@7057 321 page progression direction</a>
fantasai@7057 322
fantasai@7057 323 <li><a href="#text-combine"><span class=secno>9. </span> Glyph
fantasai@7057 324 Composition</a>
fantasai@7057 325 <ul class=toc>
fantasai@7057 326 <li><a href="#text-combine-horizontal"><span class=secno>9.1. </span>
fantasai@7057 327 Horizontal-in-Vertical Composition: the ‘<code
fantasai@7057 328 class=property>text-combine-horizontal</code>’ property</a>
fantasai@7057 329 </ul>
fantasai@7057 330
fantasai@7057 331 <li class=no-num><a href="#changes">Changes</a>
fantasai@7057 332 <ul class=toc>
fantasai@7057 333 <li class=no-num><a href="#recent-changes"> Changes since the May 2012
fantasai@7057 334 CSS Writing Modes Module Level 3 <abbr
fantasai@7057 335 title="Working Draft">WD</abbr></a>
fantasai@7057 336
fantasai@7057 337 <li class=no-num><a href="#changes-201109"> Changes since the September
fantasai@7057 338 2011 CSS Writing Modes Module Level 3 <abbr
fantasai@7057 339 title="Working Draft">WD</abbr></a>
fantasai@7057 340 </ul>
fantasai@7057 341
fantasai@7057 342 <li><a href="#conformance"><span class=secno>10. </span> Conformance</a>
fantasai@7057 343 <ul class=toc>
fantasai@7057 344 <li><a href="#conventions"><span class=secno>10.1. </span> Document
fantasai@7057 345 Conventions</a>
fantasai@7057 346
fantasai@7057 347 <li><a href="#conformance-classes"><span class=secno>10.2. </span>
fantasai@7057 348 Conformance Classes</a>
fantasai@7057 349
fantasai@7057 350 <li><a href="#partial"><span class=secno>10.3. </span> Partial
fantasai@7057 351 Implementations</a>
fantasai@7057 352
fantasai@7057 353 <li><a href="#experimental"><span class=secno>10.4. </span> Experimental
fantasai@7057 354 Implementations</a>
fantasai@7057 355
fantasai@7057 356 <li><a href="#testing"><span class=secno>10.5. </span>Non-Experimental
fantasai@7057 357 Implementations</a>
fantasai@7057 358
fantasai@7057 359 <li><a href="#cr-exit-criteria"><span class=secno>10.6. </span> CR Exit
fantasai@7057 360 Criteria</a>
fantasai@7057 361 </ul>
fantasai@7057 362
fantasai@7057 363 <li class=no-num><a href="#acknowledgements"> Acknowledgements</a>
fantasai@7057 364
fantasai@7057 365 <li class=no-num><a href="#character-properties">Appendix A. Characters
fantasai@7057 366 and Properties</a>
fantasai@7057 367
fantasai@7057 368 <li class=no-num><a href="#bidi-html"> Appendix B: Bidi Rules for HTML
fantasai@7057 369 4</a>
fantasai@7057 370
fantasai@7057 371 <li class=no-num><a href="#script-orientations">Appendix C: Vertical
fantasai@7057 372 Scripts in Unicode</a>
fantasai@7057 373
fantasai@7057 374 <li class=no-num><a href="#references"> References</a>
fantasai@7057 375 <ul class=toc>
fantasai@7057 376 <li class=no-num><a href="#normative-references"> Normative
fantasai@7057 377 references</a>
fantasai@7057 378
fantasai@7057 379 <li class=no-num><a href="#other-references"> Other references</a>
fantasai@7057 380 </ul>
fantasai@7057 381
fantasai@7057 382 <li class=no-num><a href="#property-index"> Property Index</a>
fantasai@7057 383 </ul>
fantasai@7057 384 <!--end-toc-->
fantasai@7057 385
fantasai@7057 386 <h2 id=text-flow><span class=secno>1. </span> Introduction to Writing Modes</h2>
fantasai@7057 387
fantasai@7057 388 <p>CSS Writing Modes Level 3 defines CSS features to support for various
fantasai@7057 389 international writing modes, such as left-to-right (e.g. Latin or Indic),
fantasai@7057 390 right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and
fantasai@7057 391 Arabic) and vertical (e.g. Asian scripts).
fantasai@7057 392
fantasai@7057 393 <p>A <dfn id=writing-mode0>writing mode</dfn> in CSS is determined by the
fantasai@7057 394 ‘<a href="#writing-mode1"><code
fantasai@7057 395 class=property>writing-mode</code></a>’, ‘<a href="#direction0"><code
fantasai@7057 396 class=property>direction</code></a>’, and ‘<a
fantasai@7057 397 href="#text-orientation0"><code
fantasai@7057 398 class=property>text-orientation</code></a>’ properties. It is defined
fantasai@7057 399 primarily in terms of its <a href="#inline-base-direction"><i>inline base
fantasai@7057 400 direction</i></a> and <a href="#block-flow-direction"><i>block flow
fantasai@7057 401 direction</i></a>:
fantasai@7057 402
fantasai@7057 403 <div class=sidebar>
fantasai@7057 404 <div class="figure right"> <a href="diagrams/text-flow-vectors-tb.svg"
fantasai@7057 405 type="image/svg+xml"> <img alt="Latin-based writing mode" class=landscape
fantasai@7057 406 src="diagrams/text-flow-vectors-tb.png"></a>
fantasai@7057 407 <p class=caption>Latin-based writing mode
fantasai@7057 408 </div>
fantasai@7057 409
fantasai@7057 410 <div class="figure left"> <a
fantasai@7057 411 href="diagrams/text-flow-vectors-lr-reverse.svg" type="image/svg+xml">
fantasai@7057 412 <img alt="Mongolian-based writing mode" class=landscape
fantasai@7057 413 src="diagrams/text-flow-vectors-lr-reverse.png"></a>
fantasai@7057 414 <p class=caption>Mongolian-based writing mode
fantasai@7057 415 </div>
fantasai@7057 416
fantasai@7057 417 <div class="figure right"> <a href="diagrams/text-flow-vectors-tb.svg"
fantasai@7057 418 type="image/svg+xml"> <img alt="Han-based writing mode" class=landscape
fantasai@7057 419 src="diagrams/text-flow-vectors-tb.png"></a> <a
fantasai@7057 420 href="diagrams/text-flow-vectors-rl.svg" type="image/svg+xml"> <img
fantasai@7057 421 alt="Han-based writing mode" class=landscape
fantasai@7057 422 src="diagrams/text-flow-vectors-rl.png"></a>
fantasai@7057 423 <p class=caption>Han-based writing mode
fantasai@7057 424 </div>
fantasai@7057 425 </div>
fantasai@7057 426
fantasai@7057 427 <p>The <dfn id=inline-base-direction>inline base direction</dfn> is the
fantasai@7057 428 primary direction in which content is ordered on a line and defines on
fantasai@8130 429 which sides the “start” and “end” of a line are. The ‘<a
fantasai@7057 430 href="#direction0"><code class=property>direction</code></a>’ property
fantasai@7057 431 specifies the inline base direction of an element and, together with the
fantasai@7057 432 ‘<a href="#unicode-bidi0"><code
fantasai@7057 433 class=property>unicode-bidi</code></a>’ property and the inherent
fantasai@7057 434 directionality of any text content, determines the ordering of
fantasai@7057 435 inline-level content within a line.
fantasai@7057 436
fantasai@7057 437 <p>The <dfn id=block-flow-direction>block flow direction</dfn> is the
fantasai@7057 438 direction in which block-level boxes stack and the direction in which line
fantasai@7057 439 boxes stack within a block container. The ‘<a
fantasai@7057 440 href="#writing-mode1"><code class=property>writing-mode</code></a>’
fantasai@7057 441 property determines the block flow direction.
fantasai@7057 442
fantasai@7057 443 <p>A <dfn id=horizontal-writing-mode>horizontal writing mode</dfn> is one
fantasai@7057 444 with horizontal lines of text, i.e. a downward or upward block flow. A
fantasai@7057 445 <dfn id=vertical-writing-mode>vertical writing mode</dfn> is one with
fantasai@7057 446 vertical lines of text, i.e. a leftward or rightward block flow.
fantasai@7057 447
fantasai@7057 448 <p class=note>These terms should not be confused with <dfn
fantasai@7057 449 id=vertical-block-flow>vertical block flow</dfn> (which is a downward or
fantasai@7057 450 upward block flow) and <dfn id=horizontal-block-flow>horizontal block
fantasai@7057 451 flow</dfn> (which is leftward or rightward block flow). To avoid
fantasai@7057 452 confusion, CSS specifications avoid this latter set of terms.
fantasai@7057 453
fantasai@7057 454 <p>Writing systems typically have one or two native writing modes. Some
fantasai@7057 455 examples are:
fantasai@7057 456
fantasai@7057 457 <ul>
fantasai@7057 458 <li>Latin-based systems are typically written using a left-to-right inline
fantasai@7057 459 direction with a downward (top-to-bottom) block flow direction.
fantasai@7057 460
fantasai@7057 461 <li>Arabic-based systems are typically written using a right-to-left
fantasai@7057 462 inline direction with a downward (top-to-bottom) block flow direction.
fantasai@7057 463
fantasai@7057 464 <li>Mongolian-based systems are typically written using a top-to-bottom
fantasai@7057 465 inline direction with a rightward (left-to-right) block flow direction.
fantasai@7057 466
fantasai@7057 467 <li>Han-based systems are commonly written using a left-to-right inline
fantasai@7057 468 direction with a downward (top-to-bottom) block flow direction,
fantasai@7057 469 <strong>or</strong> a top-to-bottom inline direction with a leftward
fantasai@7057 470 (right-to-left) block flow direction. Many magazines and newspapers will
fantasai@7057 471 mix these two writing modes on the same page.
fantasai@7057 472 </ul>
fantasai@7057 473
fantasai@7057 474 <p>The ‘<a href="#text-orientation0"><code
fantasai@7057 475 class=property>text-orientation</code></a>’ component of the writing
fantasai@7057 476 mode determines the <a href="#line-orientation"><i>line
fantasai@7057 477 orientation</i></a>, and controls details of text layout such as the
fantasai@7057 478 <i>glyph orientation</i>.
fantasai@7057 479
fantasai@7057 480 <p class=note>See Unicode Technical Note #22 <a href="#UTN22"
fantasai@7057 481 rel=biblioentry>[UTN22]<!--{{UTN22}}--></a> (<a
fantasai@7057 482 href="http://fantasai.inkedblade.net/style/discuss/vertical-text/paper">HTML
fantasai@7057 483 version</a>) for a more in-depth introduction to writing modes and
fantasai@7057 484 vertical text.
fantasai@7057 485
fantasai@7057 486 <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
fantasai@7057 487
fantasai@7057 488 <p>This module replaces and extends the ‘<a href="#unicode-bidi0"><code
fantasai@7057 489 class=property>unicode-bidi</code></a>’ and ‘<a
fantasai@7057 490 href="#direction0"><code class=property>direction</code></a>’ features
fantasai@7057 491 defined in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 492 sections 8.6 and 9.10.
fantasai@7057 493
fantasai@7057 494 <h3 id=values><span class=secno>1.2. </span> Values</h3>
fantasai@7057 495
fantasai@7057 496 <p>This specification follows the <a
fantasai@7057 497 href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
fantasai@7057 498 definition conventions</a> from <a href="#CSS21"
fantasai@7057 499 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
fantasai@7057 500 this specification are defined in CSS Level 2 Revision 1 <a
fantasai@7057 501 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
fantasai@7057 502 modules may expand the definitions of these value types: for example <a
fantasai@7057 503 href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
fantasai@7057 504 when combined with this module, expands the definition of the
fantasai@7057 505 &lt;color&gt; value type as used in this specification.
fantasai@7057 506
fantasai@7057 507 <p>In addition to the property-specific values listed in their definitions,
fantasai@7057 508 all properties defined in this specification also accept the <a
fantasai@7057 509 href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
fantasai@7057 510 keyword as their property value. For readability it has not been repeated
fantasai@7057 511 explicitly.
fantasai@7057 512
fantasai@7057 513 <h2 id=text-direction><span class=secno>2. </span><a name=bidi> Inline
fantasai@7057 514 Direction and Bidirectionality</a></h2>
fantasai@7057 515
fantasai@7057 516 <p>While the characters in most scripts are written from left to right,
fantasai@7057 517 certain scripts are written from right to left. In some documents, in
fantasai@7057 518 particular those written with the Arabic or Hebrew script, and in some
fantasai@7057 519 mixed-language contexts, text in a single (visually displayed) block may
fantasai@7057 520 appear with mixed directionality. This phenomenon is called <span
fantasai@8130 521 class=index-def id=bidirectionality0 title="bidirectionality (bidi)"><dfn
fantasai@8130 522 id=bidirectionality>bidirectionality</dfn></span>, or "bidi" for short.
fantasai@7057 523
fantasai@7057 524 <div class=figure>
fantasai@7057 525 <p><img
fantasai@7057 526 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."
fantasai@7057 527 src="diagrams/bidi.png">
fantasai@7057 528
fantasai@7057 529 <p class=caption>Bidirectionality
fantasai@7057 530 </div>
fantasai@7057 531
fantasai@7057 532 <p>The Unicode standard (<a
fantasai@7057 533 href="http://www.unicode.org/reports/tr9/">Unicode Standard Annex #9</a>)
fantasai@7057 534 defines a complex algorithm for determining the proper ordering of
fantasai@7057 535 bidirectional text. The algorithm consists of an implicit part based on
fantasai@7057 536 character properties, as well as explicit controls for embeddings and
fantasai@7057 537 overrides. CSS relies on this algorithm to achieve proper bidirectional
fantasai@7057 538 rendering.
fantasai@7057 539
fantasai@7057 540 <p>User agents that support bidirectional text must apply the Unicode
fantasai@7057 541 bidirectional algorithm to every sequence of inline-level boxes
fantasai@7057 542 uninterrupted by any block boundary or “<a
fantasai@7057 543 href="http://www.unicode.org/reports/tr9/#Bidirectional_Character_Types">bidi
fantasai@7057 544 type B</a>” <dfn id=forced-paragraph-break>forced paragraph break</dfn>.
fantasai@7057 545 This sequence forms the <dfn id=paragraph
fantasai@7057 546 title="bidi paragraph">paragraph</dfn> unit in the bidirectional
fantasai@7057 547 algorithm. Additionally, any such sequence forming part or all of the
fantasai@7057 548 contents of a <a href="#bidi-isolate"><i>bidi-isolated</i></a> inline
fantasai@7057 549 element also forms a <a href="#paragraph"><i>bidi paragraph</i></a>.
fantasai@7057 550
fantasai@7057 551 <p>Two CSS properties, ‘<a href="#direction0"><code
fantasai@7057 552 class=property>direction</code></a>’ and ‘<a
fantasai@7057 553 href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’,
fantasai@7057 554 provide explicit embedding, isolation, and override controls in the CSS
fantasai@7057 555 layer. Because the base directionality of a text depends on the structure
fantasai@7057 556 and semantics of the document, the ‘<a href="#direction0"><code
fantasai@7057 557 class=property>direction</code></a>’ and ‘<a
fantasai@7057 558 href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’
fantasai@7057 559 properties should in most cases be used only to map bidi information in
fantasai@7057 560 the markup to its corresponding CSS styles. <strong>If a document language
fantasai@7057 561 provides markup features to control bidi, authors and users should use
fantasai@7057 562 those features instead</strong> and not specify CSS rules to override
fantasai@7057 563 them.
fantasai@7057 564
fantasai@7057 565 <p>In general, the paragraph embedding level is set according to the ‘<a
fantasai@7057 566 href="#direction0"><code class=property>direction</code></a>’ property
fantasai@7057 567 of the paragraph's containing block rather than by the heuristic given in
fantasai@7057 568 steps P2 and P3 of the Unicode algorithm. <a href="#UAX9"
fantasai@7057 569 rel=biblioentry>[UAX9]<!--{{!UAX9}}--></a> When the computed ‘<a
fantasai@7057 570 href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ of
fantasai@7057 571 the paragraph's containing block is ‘<a href="#plaintext"><code
fantasai@7057 572 class=css>plaintext</code></a>’, however, the Unicode heuristics (rules
fantasai@7057 573 P2 and P3) are used instead.
fantasai@7057 574
fantasai@7057 575 <p>The HTML specifications (<a href="#HTML401"
fantasai@7057 576 rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, section 8.2, and <a
fantasai@7057 577 href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>, section 10.3.5)
fantasai@7057 578 define bidirectionality behavior for HTML elements.
fantasai@7057 579
fantasai@7057 580 <p class=note>Because HTML UAs can turn off CSS styling, we advise HTML
fantasai@7057 581 authors to use the HTML ‘<code class=property>dir</code>’ attribute
fantasai@7057 582 and &lt;bdo&gt; element to ensure correct bidirectional layout in the
fantasai@7057 583 absence of a style sheet.
fantasai@7057 584
fantasai@7057 585 <h3 id=direction><span class=secno>2.1. </span> Specifying Directionality:
fantasai@7057 586 the ‘<a href="#direction0"><code class=property>direction</code></a>’
fantasai@7057 587 property</h3>
fantasai@7057 588
fantasai@7057 589 <table class=propdef>
fantasai@7057 590 <tbody>
fantasai@7057 591 <tr>
fantasai@7057 592 <th>Name:
fantasai@7057 593
fantasai@7057 594 <td><dfn id=direction0>direction</dfn>
fantasai@7057 595
fantasai@7057 596 <tr>
fantasai@7057 597 <th><a href="#values">Value</a>:
fantasai@7057 598
fantasai@7057 599 <td>ltr | rtl
fantasai@7057 600
fantasai@7057 601 <tr>
fantasai@7057 602 <th>Initial:
fantasai@7057 603
fantasai@7057 604 <td>ltr
fantasai@7057 605
fantasai@7057 606 <tr>
fantasai@7057 607 <th>Applies to:
fantasai@7057 608
fantasai@7057 609 <td>all elements
fantasai@7057 610
fantasai@7057 611 <tr>
fantasai@7057 612 <th>Inherited:
fantasai@7057 613
fantasai@7057 614 <td>yes
fantasai@7057 615
fantasai@7057 616 <tr>
fantasai@7057 617 <th>Percentages:
fantasai@7057 618
fantasai@7057 619 <td>N/A
fantasai@7057 620
fantasai@7057 621 <tr>
fantasai@7057 622 <th>Media:
fantasai@7057 623
fantasai@7057 624 <td>visual
fantasai@7057 625
fantasai@7057 626 <tr>
fantasai@7057 627 <th>Computed value:
fantasai@7057 628
fantasai@7057 629 <td>specified value
fantasai@7057 630 </table>
fantasai@7057 631
fantasai@7057 632 <p>This property specifies the inline base direction or directionality of
fantasai@7057 633 any bidi paragraph, embedding, isolate, or override established by the
fantasai@7057 634 element. (See ‘<a href="#unicode-bidi0"><code
fantasai@7057 635 class=property>unicode-bidi</code></a>’.) <!-- except plaintext --> In
fantasai@7057 636 addition, it informs the ordering of <a
fantasai@7057 637 href="http://www.w3.org/TR/CSS21/tables.html">table</a> column layout, the
fantasai@7057 638 direction of horizontal <a
fantasai@7057 639 href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>, and
fantasai@7057 640 the default alignment of text within a line, and other layout effects that
fantasai@7057 641 depend on the element's inline base direction.
fantasai@7057 642
fantasai@7057 643 <p>Values for this property have the following meanings:
fantasai@7057 644
fantasai@7057 645 <dl>
fantasai@7057 646 <dt><dfn id=ltr>ltr</dfn>
fantasai@7057 647
fantasai@7057 648 <dd>Left-to-right directionality.
fantasai@7057 649
fantasai@7057 650 <dt><dfn id=rtl>rtl</dfn>
fantasai@7057 651
fantasai@7057 652 <dd>Right-to-left directionality.
fantasai@7057 653 </dl>
fantasai@7057 654
fantasai@7057 655 <p class=note>The ‘<a href="#direction0"><code
fantasai@7057 656 class=property>direction</code></a>’ property has no effect on bidi
fantasai@7057 657 reordering when specified on inline elements whose ‘<a
fantasai@7057 658 href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’
fantasai@7057 659 property's value is ‘<a href="#normal"><code
fantasai@7057 660 class=css>normal</code></a>’, because the element does not open an
fantasai@7057 661 additional level of embedding with respect to the bidirectional algorithm.
fantasai@7057 662
fantasai@7057 663 <p>The value of the ‘<a href="#direction0"><code
fantasai@7057 664 class=property>direction</code></a>’ property on the root element is
fantasai@7057 665 also propagated to the initial containing block and, together with the
fantasai@7057 666 ‘<a href="#writing-mode1"><code
fantasai@7057 667 class=property>writing-mode</code></a>’ property, determines the
fantasai@7057 668 document's principal writing mode. (See <a
fantasai@7057 669 href="#principal-writing-mode">below</a>.)
fantasai@7057 670
fantasai@7057 671 <p class=note>Note that the ‘<a href="#direction0"><code
fantasai@7057 672 class=property>direction</code></a>’ property of the HTML BODY element
fantasai@7057 673 is <em>not</em> propagated to the viewport. That special behavior only
fantasai@7057 674 applies to the background and overflow properties.
fantasai@7057 675
fantasai@7057 676 <p class=note>The ‘<a href="#direction0"><code
fantasai@7057 677 class=property>direction</code></a>’ property, when specified for table
fantasai@7057 678 column elements, is not inherited by cells in the column since columns are
fantasai@7057 679 not the ancestors of the cells in the document tree. Thus, CSS cannot
fantasai@7057 680 easily capture the "dir" attribute inheritance rules described in <a
fantasai@7057 681 href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, section
fantasai@7057 682 11.3.2.1.
fantasai@7057 683
fantasai@7057 684 <h3 id=unicode-bidi><span class=secno>2.2. </span> Embeddings and
fantasai@7057 685 Overrides: the ‘<a href="#unicode-bidi0"><code
fantasai@7057 686 class=property>unicode-bidi</code></a>’ property</h3>
fantasai@7057 687
fantasai@7057 688 <table class=propdef>
fantasai@7057 689 <tbody>
fantasai@7057 690 <tr>
fantasai@7057 691 <th>Name:
fantasai@7057 692
fantasai@7057 693 <td><dfn id=unicode-bidi0>unicode-bidi</dfn>
fantasai@7057 694
fantasai@7057 695 <tr>
fantasai@7057 696 <th><a href="#values">Value</a>:
fantasai@7057 697
fantasai@7057 698 <td>normal | embed | isolate | bidi-override | isolate-override |
fantasai@7057 699 plaintext
fantasai@7057 700
fantasai@7057 701 <tr>
fantasai@7057 702 <th>Initial:
fantasai@7057 703
fantasai@7057 704 <td>normal
fantasai@7057 705
fantasai@7057 706 <tr>
fantasai@7057 707 <th>Applies to:
fantasai@7057 708
fantasai@7057 709 <td>all elements, but see prose
fantasai@7057 710
fantasai@7057 711 <tr>
fantasai@7057 712 <th>Inherited:
fantasai@7057 713
fantasai@7057 714 <td>no
fantasai@7057 715
fantasai@7057 716 <tr>
fantasai@7057 717 <th>Percentages:
fantasai@7057 718
fantasai@7057 719 <td>N/A
fantasai@7057 720
fantasai@7057 721 <tr>
fantasai@7057 722 <th>Media:
fantasai@7057 723
fantasai@7057 724 <td>visual
fantasai@7057 725
fantasai@7057 726 <tr>
fantasai@7057 727 <th>Computed value:
fantasai@7057 728
fantasai@7057 729 <td>specified value
fantasai@7057 730 </table>
fantasai@7057 731
fantasai@7057 732 <p>Normally (i.e. when ‘<a href="#unicode-bidi0"><code
fantasai@7057 733 class=property>unicode-bidi</code></a>’ is ‘<a href="#normal"><code
fantasai@7057 734 class=css>normal</code></a>’) an inline element is transparent to the
fantasai@7057 735 unicode bidi algorithm; content is ordered as if the element's boundaries
fantasai@7057 736 were not there. Other values of the ‘<a href="#unicode-bidi0"><code
fantasai@7057 737 class=property>unicode-bidi</code></a>’ property cause inline elements
fantasai@7057 738 to create scopes within the algorithm, and to override the intrinsic
fantasai@7057 739 directionality of text.
fantasai@7057 740
fantasai@7057 741 <p>The following informative table summarizes the element-internal and
fantasai@7057 742 element-external effects of ‘<a href="#unicode-bidi0"><code
fantasai@7057 743 class=property>unicode-bidi</code></a>’:
fantasai@7057 744
fantasai@7057 745 <table class=data>
fantasai@7057 746 <caption>Effect of non-‘<a href="#normal"><code
fantasai@7057 747 class=css>normal</code></a>’ values of ‘<a
fantasai@7057 748 href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ on
fantasai@7057 749 inline elements</caption>
fantasai@7057 750
fantasai@7057 751 <colgroup span=2></colgroup>
fantasai@7057 752
fantasai@7057 753 <colgroup span=3></colgroup>
fantasai@7057 754
fantasai@7057 755 <thead>
fantasai@7057 756 <tr>
fantasai@7057 757 <th colspan=2 rowspan=2>
fantasai@7057 758
fantasai@7057 759 <th colspan=3 scope=rowgroup><abbr
fantasai@7057 760 title="To surrounding contents, the element behaves as if its boundary were...">Outside</abbr>
fantasai@7057 761
fantasai@7057 762 <tr>
fantasai@7057 763 <th><abbr
fantasai@7057 764 title="a strong character of the element's 'direction'.">strong</abbr>
fantasai@7057 765
fantasai@7057 766 <th><abbr title="a neutral character.">neutral</abbr>
fantasai@7057 767
fantasai@7057 768 <tbody>
fantasai@7057 769 <tr>
fantasai@7057 770 <th rowspan=3 scope=colgroup><abbr
fantasai@7057 771 title="Within the element, content is ordered as if...">Inside</abbr>
fantasai@7057 772
fantasai@7057 773 <th><abbr
fantasai@7057 774 title="the element's boundaries were strong characters of the element's 'direction'.">scoped</abbr>
fantasai@7057 775
fantasai@7057 776 <td>‘<a href="#embed"><code class=css>embed</code></a>’
fantasai@7057 777
fantasai@7057 778 <td>‘<a href="#isolate"><code class=css>isolate</code></a>’
fantasai@7057 779
fantasai@7057 780 <tr>
fantasai@7057 781 <th><abbr
fantasai@7057 782 title="all text consisted of strong characters of the element's 'direction'.">override</abbr>
fantasai@7057 783
fantasai@7057 784 <td>‘<a href="#bidi-override"><code
fantasai@7057 785 class=css>bidi-override</code></a>’
fantasai@7057 786
fantasai@7057 787 <td>‘<a href="#isolate-override"><code
fantasai@7057 788 class=css>isolate-override</code></a>’
fantasai@7057 789
fantasai@7057 790 <tr>
fantasai@7057 791 <th><abbr
fantasai@7057 792 title="the element were a standalone paragraph ordered using UAX9 heuristics.">plaintext
fantasai@7057 793 </abbr>
fantasai@7057 794
fantasai@7057 795 <td>—
fantasai@7057 796
fantasai@7057 797 <td>‘<a href="#plaintext"><code class=css>plaintext</code></a>’
fantasai@7057 798 </table>
fantasai@7057 799
fantasai@7057 800 <p>Values for this property have the following (normative) meanings:
fantasai@7057 801
fantasai@7057 802 <dl>
fantasai@7057 803 <dt><dfn id=normal>normal</dfn>
fantasai@7057 804
fantasai@7057 805 <dd>The element does not open an additional level of embedding with
fantasai@7057 806 respect to the bidirectional algorithm. For inline elements, implicit
fantasai@7057 807 reordering works across element boundaries.
fantasai@7057 808
fantasai@7057 809 <dt><dfn id=embed>embed</dfn>
fantasai@7057 810
fantasai@7057 811 <dd>If the element is inline, this value creates a <dfn
fantasai@7057 812 id=directional-embedding>directional embedding</dfn> by opening an
fantasai@7057 813 additional level of embedding with respect to the bidirectional
fantasai@7057 814 algorithm. The direction of this embedding level is given by the ‘<a
fantasai@7057 815 href="#direction0"><code class=property>direction</code></a>’ property.
fantasai@7057 816 Inside the element, reordering is done implicitly. This corresponds to
fantasai@7057 817 adding a LRE (U+202A), for ‘<code class=css>direction: ltr</code>’,
fantasai@7057 818 or RLE (U+202B), for ‘<code class=css>direction: rtl</code>’, at the
fantasai@7057 819 start of the element and a PDF (U+202C) at the end of the element. <span
fantasai@7057 820 class=note>This value has no effect on elements that are not
fantasai@7057 821 inline.</span>
fantasai@7057 822
fantasai@7057 823 <dt><dfn id=isolate>isolate</dfn>
fantasai@7057 824
fantasai@7057 825 <dd>On an inline element, this <dfn id=bidi-isolate
fantasai@7057 826 title="bidi-isolate|bidi isolation|isolation">bidi-isolates</dfn> its
fantasai@7057 827 contents. This is similar to a directional embedding (and increases the
fantasai@7057 828 embedding level accordingly) except that each sequence of inline-level
fantasai@7057 829 boxes uninterrupted by any block boundary or <a
fantasai@7057 830 href="#forced-paragraph-break"><i>forced paragraph break</i></a> is
fantasai@7057 831 treated as an <dfn id=isolated-sequence->isolated sequence<dfn id=x>:
fantasai@7057 832 </dfn></dfn>
fantasai@7057 833 <ul>
fantasai@7057 834 <li>the content within the sequence is ordered as if inside an
fantasai@7057 835 independent paragraph with the base directionality specified by the
fantasai@7057 836 element's ‘<a href="#direction0"><code
fantasai@7057 837 class=property>direction</code></a>’ property.
fantasai@7057 838
fantasai@7057 839 <li>for the purpose of bidi resolution in its containing bidi paragraph,
fantasai@7057 840 the sequence is treated as if it were a single Object Replacement
fantasai@7057 841 Character (U+FFFC).
fantasai@7057 842 </ul>
fantasai@7057 843 In effect, neither is the content inside the element bidi-affected by the
fantasai@7057 844 content surrounding the element, nor is the content surrounding the
fantasai@7057 845 element bidi-affected by the content or specified directionality of the
fantasai@7057 846 element. However, <a href="#forced-paragraph-break"><i>forced paragraph
fantasai@7057 847 breaks</i></a> within the element still create a corresponding break in
fantasai@7057 848 the containing paragraph.
fantasai@7057 849 <p class=note>In Unicode 6.3 and beyond, this will correspond to adding
fantasai@7057 850 an LRI (U+2066), for ‘<code class=css>direction: ltr</code>’, or RLI
fantasai@7057 851 (U+2067), for ‘<code class=css>direction: rtl</code>’, at the start
fantasai@7057 852 of the element, and a PDI (U+2069) at the end of the element.
fantasai@7057 853
fantasai@7057 854 <p class=note>This value has no effect on elements that are not inline.
fantasai@7057 855
fantasai@7057 856 <dt><dfn id=bidi-override>bidi-override</dfn>
fantasai@7057 857
fantasai@7057 858 <dd>This value puts the element's immediate content in a <dfn
fantasai@7057 859 id=directional-override>directional override</dfn>. For an inline, this
fantasai@7057 860 means that the element acts like a <a
fantasai@7057 861 href="#directional-embedding"><i>directional embedding</i></a> in the
fantasai@7057 862 bidirectional algorithm, except that reordering within it is strictly in
fantasai@7057 863 sequence according to the ‘<a href="#direction0"><code
fantasai@7057 864 class=property>direction</code></a>’ property; the implicit part of the
fantasai@7057 865 bidirectional algorithm is ignored. This corresponds to adding a LRO
fantasai@7057 866 (U+202D), for ‘<code class=css>direction: ltr</code>’, or RLO
fantasai@7057 867 (U+202E), for ‘<code class=css>direction: rtl</code>’, at the start
fantasai@7057 868 of the element and a PDF (U+202C) at the end of the element. If the
fantasai@7057 869 element is a block container, the override is applied to an anonymous
fantasai@7057 870 inline element that surrounds all of its content.
fantasai@7057 871
fantasai@7057 872 <dt><dfn id=isolate-override>isolate-override<dfn id=x0></dfn></dfn>
fantasai@7057 873
fantasai@7057 874 <dd>This combines the <a href="#bidi-isolate"><i>isolation</i></a>
fantasai@7057 875 behavior of ‘<a href="#isolate"><code class=css>isolate</code></a>’
fantasai@7057 876 with the <i>override</i> behavior of ‘<a href="#bidi-override"><code
fantasai@7057 877 class=css>bidi-override</code></a>’: to surrounding content, it is
fantasai@7057 878 equivalent to ‘<a href="#isolate"><code
fantasai@7057 879 class=css>isolate</code></a>’, but within the element content is
fantasai@7057 880 ordered as if ‘<a href="#bidi-override"><code
fantasai@7057 881 class=css>bidi-override</code></a>’ were specified.
fantasai@7057 882
fantasai@7057 883 <dt><dfn id=plaintext>plaintext</dfn>
fantasai@7057 884
fantasai@7057 885 <dd>
fantasai@7057 886 <p>This value behaves as ‘<a href="#isolate"><code
fantasai@7057 887 class=css>isolate</code></a>’ except that for the purposes of the
fantasai@7057 888 Unicode bidirectional algorithm, the base directionality of each of the
fantasai@7057 889 element's <a href="#paragraph"><i>bidi paragraphs</i></a> (if a block
fantasai@7057 890 container) or <a href="#isolated-sequence-"><i>isolated
fantasai@7057 891 sequences</i></a> (if an inline) is determined by following the
fantasai@7057 892 heuristic in rules P2 and P3 of the Unicode bidirectional algorithm
fantasai@7057 893 (rather than by using the ‘<a href="#direction0"><code
fantasai@7057 894 class=property>direction</code></a>’ property of the element).
fantasai@7057 895
fantasai@7057 896 <p class=note>In Unicode 6.3 and beyond, for inline elements this will
fantasai@7057 897 correspond to adding an FSI (U+2068) at the start of the element, and a
fantasai@7057 898 PDI (U+2069) at the end of the element.
fantasai@7057 899 </dl>
fantasai@7057 900
fantasai@7057 901 <p class=note>Because the ‘<a href="#unicode-bidi0"><code
fantasai@7057 902 class=property>unicode-bidi</code></a>’ property does not inherit,
fantasai@7057 903 setting ‘<a href="#bidi-override"><code
fantasai@7057 904 class=css>bidi-override</code></a>’ or ‘<a href="#plaintext"><code
fantasai@7057 905 class=css>plaintext</code></a>’ on a block element will not affect any
fantasai@7057 906 descendant blocks. Therefore these values are best used on blocks and
fantasai@7057 907 inlines that do not contain any block-level structures.
fantasai@7057 908
fantasai@7057 909 <p class=note>Note that ‘<a href="#unicode-bidi0"><code
fantasai@7057 910 class=property>unicode-bidi</code></a>’ does not affect the ‘<a
fantasai@7057 911 href="#direction0"><code class=property>direction</code></a>’ property
fantasai@7057 912 even in the case of ‘<a href="#plaintext"><code
fantasai@7057 913 class=css>plaintext</code></a>’, and thus does not affect ‘<a
fantasai@7057 914 href="#direction0"><code class=property>direction</code></a>’-dependent
fantasai@7057 915 layout calculations.
fantasai@7057 916
fantasai@7057 917 <p>The final order of characters within each <a href="#paragraph"><i>bidi
fantasai@7057 918 paragraph</i></a> is the same as if the bidi control codes had been added
fantasai@7057 919 as described above, markup had been stripped, and the resulting character
fantasai@7057 920 sequence had been passed to an implementation of the Unicode bidirectional
fantasai@7057 921 algorithm for plain text that produced the same line-breaks as the styled
fantasai@7057 922 text.
fantasai@7057 923
fantasai@7057 924 <p>In this process, replaced elements with ‘<code class=css>display:
fantasai@7057 925 inline</code>’ are treated as neutral characters, unless their ‘<a
fantasai@7057 926 href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’
fantasai@7057 927 property is either ‘<a href="#embed"><code
fantasai@7057 928 class=property>embed</code></a>’ or ‘<a href="#bidi-override"><code
fantasai@7057 929 class=property>bidi-override</code></a>’, in which case they are treated
fantasai@7057 930 as strong characters in the ‘<a href="#direction0"><code
fantasai@7057 931 class=property>direction</code></a>’ specified for the element. All
fantasai@7057 932 other atomic inline-level boxes are treated as neutral characters always.
fantasai@7057 933
fantasai@7057 934 <p>If an inline element is broken around a <a href="#paragraph"><i>bidi
fantasai@7057 935 paragraph</i></a> boundary (e.g. if split by a block or <a
fantasai@7057 936 href="#forced-paragraph-break"><i>forced paragraph break</i></a>), then
fantasai@7057 937 the bidi control codes assigned to the end of the element are added before
fantasai@7057 938 the interruption and the codes assigned to the start of the element are
fantasai@7057 939 added after it. (In other words, any embedding levels or overrides started
fantasai@7057 940 by the element are closed at the paragraph break and reopened on the other
fantasai@7057 941 side of it.)
fantasai@7057 942
fantasai@7057 943 <div class=example>
fantasai@7057 944 <p>For example, where &lt;BR/&gt; is a <a
fantasai@7057 945 href="#forced-paragraph-break"><i>forced paragraph break</i></a> the bidi
fantasai@7057 946 ordering is identical between
fantasai@7057 947
fantasai@7057 948 <pre>&lt;para>...&lt;i1>&lt;i2>...&lt;BR/>...&lt;/i2>&lt;i1>...&lt;/para></pre>
fantasai@7057 949
fantasai@7057 950 <p>and
fantasai@7057 951
fantasai@7057 952 <pre>&lt;para>...&lt;i1>&lt;i2>...&lt;/i2>&lt;i1>&lt;BR/>&lt;i1>&lt;i2>...&lt;/i2>&lt;i1>...&lt;/para></pre>
fantasai@7057 953
fantasai@7057 954 <p>for all values of ‘<a href="#unicode-bidi0"><code
fantasai@7057 955 class=property>unicode-bidi</code></a>’ on inline elements &lt;i1&gt;
fantasai@7057 956 and &lt;i2&gt;.
fantasai@7057 957 </div>
fantasai@7057 958
fantasai@7057 959 <p class=note> Because the Unicode algorithm has a limit of 61 levels of
fantasai@7057 960 embedding, care should be taken not to use ‘<a
fantasai@7057 961 href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ with
fantasai@7057 962 a value other than ‘<a href="#normal"><code
fantasai@7057 963 class=property>normal</code></a>’ unless appropriate. In particular, a
fantasai@7057 964 value of ‘<code class=css>inherit</code>’ should be used with extreme
fantasai@7057 965 caution. However, for elements that are, in general, intended to be
fantasai@7057 966 displayed as blocks, a setting of ‘<code class=css>unicode-bidi:
fantasai@7057 967 isolate</code>’ is preferred to keep the element together in case the
fantasai@7057 968 ‘<code class=property>display</code>’ is changed to ‘<code
fantasai@7057 969 class=css>inline</code>’ (see example below).
fantasai@7057 970
fantasai@7057 971 <h3 id=bidi-example><span class=secno>2.3. </span> Example of Bidirectional
fantasai@7057 972 Text</h3>
fantasai@7057 973
fantasai@7057 974 <p>The following example shows an SGML document with bidirectional text. It
fantasai@7057 975 illustrates an important design principle: document language designers
fantasai@7057 976 should take bidi into account both in the language proper (elements and
fantasai@7057 977 attributes) and in any accompanying style sheets. The style sheets should
fantasai@7057 978 be designed so that bidi rules are separate from other style rules, and
fantasai@7057 979 such rules should not be overridden by other style sheets so that the
fantasai@7057 980 document language's bidi behavior is preserved.
fantasai@7057 981
fantasai@7057 982 <div class=example>
fantasai@7057 983 <p>In this example, lowercase letters stand for inherently left-to-right
fantasai@7057 984 characters and uppercase letters represent inherently right-to-left
fantasai@7057 985 characters. The text stream is shown in logical backing store order.
fantasai@7057 986
fantasai@7057 987 <pre class=xml-example><code class=xml>
fantasai@7057 988 &lt;section dir=rtl&gt;
fantasai@7057 989 &lt;para&gt;HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5&lt;/para&gt;
fantasai@7057 990 &lt;para&gt;HEBREW6 &lt;emphasis&gt;HEBREW7&lt;/emphasis&gt; HEBREW8&lt;/para&gt;
fantasai@7057 991 &lt;/section&gt;
fantasai@8481 992 &lt;section dir=ltr&gt;
fantasai@7057 993 &lt;para&gt;english9 english10 english11 HEBREW12 HEBREW13&lt;/para&gt;
fantasai@7057 994 &lt;para&gt;english14 english15 english16&lt;/para&gt;
fantasai@7057 995 &lt;para&gt;english17 &lt;quote dir=rtl&gt;HEBREW18 english19 HEBREW20&lt;/quote&gt;&lt;/para&gt;
fantasai@7057 996 &lt;/section&gt;
fantasai@7057 997 </code></pre>
fantasai@7057 998
fantasai@7057 999 <p>Since this is arbitrary SGML, the style sheet is responsible for
fantasai@7057 1000 setting the writing direction. This is the style sheet:
fantasai@7057 1001
fantasai@7057 1002 <pre>
fantasai@7057 1003 /* Rules for bidi */
fantasai@7057 1004 [dir=ltr] {direction: rtl;}
fantasai@7057 1005 [dir=rtl] {direction: ltr;}
fantasai@7057 1006 quote {unicode-bidi: isolate;}
fantasai@7057 1007
fantasai@7057 1008 /* Rules for presentation */
fantasai@7057 1009 section, para {display: block;}
fantasai@7057 1010 emphasis {font-weight: bold;}
fantasai@7057 1011 </pre>
fantasai@7057 1012
fantasai@7057 1013 <p>The first <code>&lt;section></code> element is a block with a
fantasai@7057 1014 right-to-left base direction, the second <code>&lt;section></code>
fantasai@7057 1015 element is a block with a left-to-right base direction. The
fantasai@7057 1016 <code>&lt;para></code>s are blocks that inherit the base direction from
fantasai@7057 1017 their parents. Thus, the first two <code>&lt;para></code>s are read
fantasai@7057 1018 starting at the top right, the final three are read starting at the top
fantasai@7057 1019 left.
fantasai@7057 1020
fantasai@7057 1021 <p>The <code>&lt;emphasis></code> element is inline-level, and since its
fantasai@7057 1022 value for ‘<a href="#unicode-bidi0"><code
fantasai@7057 1023 class=property>unicode-bidi</code></a>’ is ‘<a href="#normal"><code
fantasai@7057 1024 class=css>normal</code></a>’ (the initial value), it has no effect on
fantasai@7057 1025 the ordering of the text. The <code>&lt;quote></code> element, on the
fantasai@7057 1026 other hand, creates an <a href="#isolated-sequence-"><i>isolated
fantasai@7057 1027 sequence</i></a> with the given internal directionality.
fantasai@7057 1028
fantasai@7057 1029 <p>The formatting of this text might look like this if the line length is
fantasai@7057 1030 long:
fantasai@7057 1031
fantasai@7057 1032 <pre class=ascii-art>
fantasai@7057 1033 5WERBEH 4WERBEH english3 2WERBEH 1WERBEH
fantasai@7057 1034
fantasai@7057 1035 8WERBEH <b>7WERBEH</b> 6WERBEH
fantasai@7057 1036
fantasai@7057 1037 english9 english10 english11 13WERBEH 12WERBEH
fantasai@7057 1038
fantasai@7057 1039 english14 english15 english16
fantasai@7057 1040
fantasai@7057 1041 english17 20WERBEH english19 18WERBEH
fantasai@7057 1042 </pre>
fantasai@7057 1043
fantasai@7057 1044 <p>Note that the <code>&lt;quote></code> embedding causes
fantasai@7057 1045 <samp>HEBREW18</samp> to be to the right of <samp>english19</samp>.
fantasai@7057 1046
fantasai@7057 1047 <p>If lines have to be broken, it might be more like this:
fantasai@7057 1048
fantasai@7057 1049 <pre class=ascii-art>
fantasai@7057 1050 2WERBEH 1WERBEH
fantasai@7057 1051 -EH 4WERBEH english3
fantasai@7057 1052 5WERB
fantasai@7057 1053
fantasai@7057 1054 -EH <b>7WERBEH</b> 6WERBEH
fantasai@7057 1055 8WERB
fantasai@7057 1056
fantasai@7057 1057 english9 english10 en-
fantasai@7057 1058 glish11 12WERBEH
fantasai@7057 1059 13WERBEH
fantasai@7057 1060
fantasai@7057 1061 english14 english15
fantasai@7057 1062 english16
fantasai@7057 1063
fantasai@7057 1064 english17 18WERBEH
fantasai@7057 1065 20WERBEH english19
fantasai@7057 1066 </pre>
fantasai@7057 1067
fantasai@7057 1068 <p>Because <samp>HEBREW18</samp> must be read before english19, it is on
fantasai@7057 1069 the line above <samp>english19</samp>. Just breaking the long line from
fantasai@7057 1070 the earlier formatting would not have worked. Note also that the first
fantasai@7057 1071 syllable from <samp>english19</samp> might have fit on the previous line,
fantasai@7057 1072 but hyphenation of left-to-right words in a right-to-left context, and
fantasai@7057 1073 vice versa, is usually suppressed to avoid having to display a hyphen in
fantasai@7057 1074 the middle of a line.
fantasai@7057 1075 </div>
fantasai@7057 1076 <!-- example -->
fantasai@7057 1077
fantasai@7057 1078 <h3 id=bidi-box-model><span class=secno>2.4. </span> Box model for inline
fantasai@7057 1079 elements in bidirectional context</h3>
fantasai@7057 1080
fantasai@7057 1081 <p>Since bidi reordering can split apart and reorder text that is logically
fantasai@7057 1082 contiguous, bidirectional text can cause an inline box to be split and
fantasai@7057 1083 reordered within a line.
fantasai@7057 1084
fantasai@7057 1085 <p class=note>Note that in order to be able to flow inline boxes in a
fantasai@7057 1086 uniform direction (either entirely left-to-right or entirely
fantasai@7057 1087 right-to-left), anonymous inline boxes may have to be created.</p>
fantasai@7057 1088 <!-- CSS2.1 8.6 -->
fantasai@7057 1089
fantasai@7057 1090 <p>For each line box, UAs must take the inline boxes generated for each
fantasai@7057 1091 element and render the margins, borders and padding in visual order (not
fantasai@7057 1092 logical order). The <a href="#start"><i>start</i></a>-most box on the
fantasai@7057 1093 first line box in which the element appears has the <a
fantasai@7057 1094 href="#start"><i>start</i></a> edge's margin, border, and padding; and the
fantasai@7057 1095 end-most box on the last line box in which the element appears has the <a
fantasai@7057 1096 href="#end"><i>end</i></a> edge's margin, border, and padding. For
fantasai@7057 1097 example, in the ‘<a href="#horizontal-tb"><code
fantasai@7057 1098 class=css>horizontal-tb</code></a>’ writing mode:
fantasai@7057 1099
fantasai@7057 1100 <ul>
fantasai@7057 1101 <li>When the parent's ‘<a href="#direction0"><code
fantasai@7057 1102 class=property>direction</code></a>’ property is ‘<a
fantasai@7057 1103 href="#ltr"><code class=css>ltr</code></a>’, the left-most generated
fantasai@7057 1104 box of the first line box in which the element appears has the left
fantasai@7057 1105 margin, left border and left padding, and the right-most generated box of
fantasai@7057 1106 the last line box in which the element appears has the right padding,
fantasai@7057 1107 right border and right margin.
fantasai@7057 1108
fantasai@7057 1109 <li>When the parent's ‘<a href="#direction0"><code
fantasai@7057 1110 class=property>direction</code></a>’ property is ‘<a
fantasai@7057 1111 href="#rtl"><code class=css>rtl</code></a>’, the right-most generated
fantasai@7057 1112 box of the first line box in which the element appears has the right
fantasai@7057 1113 padding, right border and right margin, and the left-most generated box
fantasai@7057 1114 of the last line box in which the element appears has the left margin,
fantasai@7057 1115 left border and left padding.
fantasai@7057 1116 </ul>
fantasai@7057 1117
fantasai@7057 1118 <p>Analogous rules hold for vertical writing modes.
fantasai@7057 1119
fantasai@7057 1120 <p class=note>The ‘<code class=property>box-decoration-break</code>’
fantasai@7057 1121 property can override this behavior to draw box decorations on both sides
fantasai@7057 1122 of each box. <a href="#CSS3BG"
fantasai@7057 1123 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
fantasai@7057 1124
fantasai@7057 1125 <h2 id=vertical-intro><span class=secno>3. </span> Introduction to Vertical
fantasai@7057 1126 Text</h2>
fantasai@7057 1127
fantasai@7057 1128 <p><em>This subsection is non-normative.</em>
fantasai@7057 1129
fantasai@7057 1130 <p>In addition to extensions to CSS2.1’s support for bidirectional text,
fantasai@7057 1131 this module introduces the rules and properties needed to support vertical
fantasai@7057 1132 text layout in CSS.
fantasai@7057 1133
fantasai@7057 1134 <p>Unlike languages that use the Latin script which are primarily laid out
fantasai@7057 1135 horizontally, Asian languages such as Chinese and Japanese can be laid out
fantasai@7057 1136 vertically. The Japanese example below shows the same text laid out
fantasai@7057 1137 horizontally and vertically. In the horizontal case, text is read from
fantasai@7057 1138 left to right, top to bottom. For the vertical case, the text is read top
fantasai@7057 1139 to bottom, right to left. Indentation from the left edge in the
fantasai@7057 1140 left-to-right horizontal case translates to indentation from the top edge
fantasai@7057 1141 in the top-to-bottom vertical case.
fantasai@7057 1142
fantasai@7057 1143 <div class=figure>
fantasai@7057 1144 <p><img
fantasai@7057 1145 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."
fantasai@7057 1146 src=vert-horiz-comparison.png>
fantasai@7057 1147
fantasai@7057 1148 <p class=caption>Comparison of vertical and horizontal Japanese: iBunko
fantasai@7057 1149 application (iOS)
fantasai@7057 1150 </div>
fantasai@7057 1151
fantasai@7057 1152 <p class=note>For Chinese and Japanese lines are ordered either right to
fantasai@7057 1153 left or top to bottom, while for Mongolian and Manchu lines are ordered
fantasai@7057 1154 left to right.
fantasai@7057 1155
fantasai@7057 1156 <p>The change from horizontal to vertical writing can affect not just the
fantasai@7057 1157 layout, but also the typesetting. For example, the position of a
fantasai@7057 1158 punctuation mark within its spacing box can change from the horizontal to
fantasai@7057 1159 the vertical case, and in some cases alternate glyphs are used.
fantasai@7057 1160
fantasai@7057 1161 <p>Vertical text that includes Latin script text or text from other scripts
fantasai@7057 1162 normally displayed horizontally can display that text in a number of ways.
fantasai@7057 1163 For example, Latin words can be rotated sideways, or each letter can be
fantasai@7057 1164 oriented upright:
fantasai@7057 1165
fantasai@7057 1166 <div class=figure>
fantasai@7057 1167 <p><img
fantasai@7057 1168 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."
fantasai@7057 1169 src=vert-latin-layouts.png>
fantasai@7057 1170
fantasai@7057 1171 <p class=caption>Examples of Latin in vertical Japanese: Daijirin Viewer
fantasai@7057 1172 1.4 (iOS)
fantasai@7057 1173 </div>
fantasai@7057 1174
fantasai@7057 1175 <p>In some special cases such as two-digit numbers in dates, text is fit
fantasai@7057 1176 compactly into a single vertical character box:
fantasai@7057 1177
fantasai@7057 1178 <div class=figure id=fig-mac>
fantasai@7057 1179 <p><img
fantasai@7057 1180 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."
fantasai@7057 1181 src=vert-number-layouts.png>
fantasai@7057 1182
fantasai@7057 1183 <p class=caption>Mac Fan, December 2010, p.49
fantasai@7057 1184 </div>
fantasai@7057 1185
fantasai@7057 1186 <p>Layouts often involve a mixture of vertical and horizontal elements:
fantasai@7057 1187
fantasai@7057 1188 <div class=figure>
fantasai@7057 1189 <p><img
fantasai@7057 1190 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."
fantasai@7057 1191 src=vert-horiz-combination.png>
fantasai@7057 1192
fantasai@7057 1193 <p class=caption>Mixture of vertical and horizontal elements
fantasai@7057 1194 </div>
fantasai@7057 1195
fantasai@7057 1196 <p>Vertical text layouts also need to handle bidirectional text layout;
fantasai@7057 1197 clockwise-rotated Arabic, for example, is laid out bottom-to-top.
fantasai@7057 1198
fantasai@7057 1199 <h3 id=writing-mode><span class=secno>3.1. </span> Block Flow Direction:
fantasai@7057 1200 the ‘<a href="#writing-mode1"><code
fantasai@7057 1201 class=property>writing-mode</code></a>’ property</h3>
fantasai@7057 1202
fantasai@7057 1203 <table class=propdef>
fantasai@7057 1204 <tbody>
fantasai@7057 1205 <tr>
fantasai@7057 1206 <th>Name:
fantasai@7057 1207
fantasai@7057 1208 <td><dfn id=writing-mode1>writing-mode</dfn>
fantasai@7057 1209
fantasai@7057 1210 <tr>
fantasai@7057 1211 <th><a href="#values">Value</a>:
fantasai@7057 1212
fantasai@7057 1213 <td>horizontal-tb | vertical-rl | vertical-lr
fantasai@7057 1214
fantasai@7057 1215 <tr>
fantasai@7057 1216 <th>Initial:
fantasai@7057 1217
fantasai@7057 1218 <td>horizontal-tb
fantasai@7057 1219
fantasai@7057 1220 <tr>
fantasai@7057 1221 <th>Applies to:
fantasai@7057 1222
fantasai@7057 1223 <td>All elements except table row groups, table column groups, table
fantasai@7057 1224 rows, and table columns
fantasai@7057 1225
fantasai@7057 1226 <tr>
fantasai@7057 1227 <th>Inherited:
fantasai@7057 1228
fantasai@7057 1229 <td>yes
fantasai@7057 1230
fantasai@7057 1231 <tr>
fantasai@7057 1232 <th>Percentages:
fantasai@7057 1233
fantasai@7057 1234 <td>N/A
fantasai@7057 1235
fantasai@7057 1236 <tr>
fantasai@7057 1237 <th>Media:
fantasai@7057 1238
fantasai@7057 1239 <td>visual
fantasai@7057 1240
fantasai@7057 1241 <tr>
fantasai@7057 1242 <th>Computed value:
fantasai@7057 1243
fantasai@7057 1244 <td>specified value
fantasai@7057 1245 </table>
fantasai@7057 1246
fantasai@7057 1247 <p>This property specifies whether lines of text are laid out horizontally
fantasai@7057 1248 or vertically and the direction in which blocks progress. Possible values:
fantasai@7057 1249
fantasai@7057 1250 <dl>
fantasai@7057 1251 <dt><dfn id=horizontal-tb>horizontal-tb</dfn>
fantasai@7057 1252
fantasai@7057 1253 <dd>Top-to-bottom <a href="#block-flow-direction"><i>block flow
fantasai@7057 1254 direction</i></a>. The <a href="#writing-mode0"><i>writing mode</i></a>
fantasai@7057 1255 is horizontal.
fantasai@7057 1256
fantasai@7057 1257 <dt><dfn id=vertical-rl>vertical-rl</dfn>
fantasai@7057 1258
fantasai@7057 1259 <dd>Right-to-left <a href="#block-flow-direction"><i>block flow
fantasai@7057 1260 direction</i></a>. The <a href="#writing-mode0"><i>writing mode</i></a>
fantasai@7057 1261 is vertical.
fantasai@7057 1262
fantasai@7057 1263 <dt><dfn id=vertical-lr>vertical-lr</dfn>
fantasai@7057 1264
fantasai@7057 1265 <dd>Left-to-right <a href="#block-flow-direction"><i>block flow
fantasai@7057 1266 direction</i></a>. The <a href="#writing-mode0"><i>writing mode</i></a>
fantasai@7057 1267 is vertical.
fantasai@7057 1268 </dl>
fantasai@7057 1269
fantasai@7057 1270 <p>The ‘<a href="#writing-mode1"><code
fantasai@7057 1271 class=property>writing-mode</code></a>’ property specifies the <a
fantasai@7057 1272 href="#block-flow-direction"><i>block flow direction</i></a>, which
fantasai@7057 1273 determines the progression of block-level boxes in a block formatting
fantasai@7057 1274 context; the progression of line boxes in a block container that contains
fantasai@7057 1275 inlines; the progression of rows in a table; etc. By virtue of determining
fantasai@7057 1276 the stacking direction of line boxes, the ‘<a
fantasai@7057 1277 href="#writing-mode1"><code class=property>writing-mode</code></a>’
fantasai@7057 1278 property also determines whether the line boxes' orientation (and thus the
fantasai@7057 1279 <a href="#writing-mode0"><i>writing mode</i></a>) is horizontal or
fantasai@7057 1280 vertical. The ‘<a href="#text-orientation0"><code
fantasai@7057 1281 class=property>text-orientation</code></a>’ property then determines how
fantasai@7057 1282 text is laid out within the line box.
fantasai@7057 1283
fantasai@7057 1284 <p>The <dfn id=principal-writing-mode>principal writing mode</dfn> of the
fantasai@7057 1285 document is determined by the ‘<a href="#writing-mode1"><code
fantasai@7057 1286 class=property>writing-mode</code></a>’ and ‘<a
fantasai@7057 1287 href="#direction0"><code class=property>direction</code></a>’ values
fantasai@7057 1288 specified on the root element. This writing mode is used, for example, to
fantasai@7057 1289 determine the default page progression direction. (See <a href="#CSS3PAGE"
fantasai@7057 1290 rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>.) Like ‘<a
fantasai@7057 1291 href="#direction0"><code class=property>direction</code></a>’, the ‘<a
fantasai@7057 1292 href="#writing-mode1"><code class=property>writing-mode</code></a>’
fantasai@7057 1293 value of the root element is also propagated to the initial containing
fantasai@7057 1294 block and sets the block flow direction of the initial block formatting
fantasai@7057 1295 context.
fantasai@7057 1296
fantasai@7057 1297 <p class=note>Note that the ‘<a href="#writing-mode1"><code
fantasai@7057 1298 class=property>writing-mode</code></a>’ property of the HTML BODY
fantasai@7057 1299 element is <em>not</em> propagated to the viewport. That special behavior
fantasai@7057 1300 only applies to the background and overflow properties.
fantasai@7057 1301
fantasai@7057 1302 <p>If an element has a different block flow direction than its containing
fantasai@7057 1303 block:
fantasai@7057 1304
fantasai@7057 1305 <ul>
fantasai@7057 1306 <li>If the element has a specified ‘<code
fantasai@7057 1307 class=property>display</code>’ of ‘<code class=css>inline</code>’,
fantasai@7057 1308 its ‘<code class=property>display</code>’ computes to ‘<code
fantasai@7057 1309 class=property>inline-block</code>’. <a href="#CSS21"
fantasai@7057 1310 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 1311
fantasai@7057 1312 <li>If the element has a specified ‘<code
fantasai@7057 1313 class=property>display</code>’ of ‘<code class=css>run-in</code>’,
fantasai@7057 1314 its ‘<code class=property>display</code>’ computes to ‘<code
fantasai@7057 1315 class=property>block</code>’. <a href="#CSS21"
fantasai@7057 1316 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 1317
fantasai@7057 1318 <li>If the element is a block container, then it establishes a new block
fantasai@7057 1319 formatting context.
fantasai@7057 1320 </ul>
fantasai@7057 1321
fantasai@7057 1322 <p>The content of replaced elements do not rotate due to the writing mode:
fantasai@7057 1323 images, for example, remain upright. However replaced content involving
fantasai@7057 1324 text (such as MathML content or form elements) should match the replaced
fantasai@7057 1325 element's writing mode and line orientation if the UA supports such a
fantasai@7057 1326 vertical writing mode for the replaced content.
fantasai@7057 1327
fantasai@7057 1328 <div class=example>
fantasai@7057 1329 <p>In the following example, two block elements (1 and 3) separated by an
fantasai@7057 1330 image (2) are presented in various flow writing modes.
fantasai@7057 1331
fantasai@7057 1332 <p>Here is a diagram of horizontal writing mode (<code>writing-mode:
fantasai@7057 1333 horizontal-tb</code>):
fantasai@7057 1334
fantasai@7057 1335 <p><img
fantasai@7057 1336 alt="Diagram of horizontal layout: blocks 1, 2, and 3 are stacked top-to-bottom"
fantasai@7057 1337 height=300 src=horizontal.png width=219>
fantasai@7057 1338
fantasai@7057 1339 <p>Here is a diagram for the right-to-left vertical writing mode commonly
fantasai@7057 1340 used in East Asia (<code>writing-mode: vertical-rl</code>):
fantasai@7057 1341
fantasai@7057 1342 <p><img
fantasai@7057 1343 alt="Diagram of a right-to-left vertical layout: blocks 1, 2, and 3 are arranged side by side from right to left"
fantasai@7057 1344 height=191 src=vertical-rl.png width=297>
fantasai@7057 1345
fantasai@7057 1346 <p>And finally, here is a diagram for the left-to-right vertical writing
fantasai@7057 1347 mode used for Manchu and Mongolian (<code>writing-mode:
fantasai@7057 1348 vertical-lr</code>):
fantasai@7057 1349
fantasai@7057 1350 <p><img
fantasai@7057 1351 alt="Diagram of left-to-right vertical layout: blocks 1, 2, and 3 are arranged side by side from left to right"
fantasai@7057 1352 height=191 src=vertical-lr.png width=300>
fantasai@7057 1353 </div>
fantasai@7057 1354
fantasai@7057 1355 <div class=example>
fantasai@7057 1356 <p>In the following example, some form controls are rendered inside a
fantasai@7057 1357 block with ‘<a href="#vertical-rl"><code
fantasai@7057 1358 class=css>vertical-rl</code></a>’ writing mode. The form controls are
fantasai@7057 1359 rendered to match the writing mode.
fantasai@7057 1360
fantasai@7057 1361 <pre>
fantasai@7057 1362 <!-- -->&lt;style>
fantasai@7057 1363 <!-- --> form { writing-mode: vertical-rl; }
fantasai@7057 1364 <!-- -->&lt;/style>
fantasai@7057 1365 <!-- -->...
fantasai@7057 1366 <!-- -->&lt;form>
fantasai@7057 1367 <!-- -->&lt;p>&lt;label>姓名 &lt;input value="艾俐俐">&lt;/label>
fantasai@7057 1368 <!-- -->&lt;p>&lt;label>语文 &lt;select>&lt;option>English
fantasai@7057 1369 <!-- --> &lt;option>français
fantasai@7057 1370 <!-- --> &lt;option>فارسی
fantasai@7057 1371 <!-- --> &lt;option>中文
fantasai@7057 1372 <!-- --> &lt;option>日本語&lt;/select>&lt;/label>
fantasai@7057 1373 <!-- -->&lt;/form></pre>
fantasai@7057 1374
fantasai@7057 1375 <p><img
fantasai@7057 1376 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."
fantasai@7057 1377 src=vertical-form.png>
fantasai@7057 1378 </div>
fantasai@7057 1379
fantasai@7057 1380 <div class=example>
fantasai@7057 1381 <p>In this example, ‘<a href="#writing-mode1"><code
fantasai@7057 1382 class=property>writing-mode</code></a>’ sets the list markers upright
fantasai@7057 1383 using the ‘<code class=css>::marker</code>’ pseudo-element. Vertical
fantasai@7057 1384 alignment ensures that longer numbers will still align with the right of
fantasai@7057 1385 the first line of text. <a href="#CSS3LIST"
fantasai@7057 1386 rel=biblioentry>[CSS3LIST]<!--{{CSS3LIST}}--></a>
fantasai@7057 1387
fantasai@7057 1388 <pre>::marker { writing-mode: horizontal-tb;
fantasai@7057 1389 <!-- --> vertical-align: text-top;
fantasai@7057 1390 <!-- --> color: blue; }</pre>
fantasai@7057 1391
fantasai@7057 1392 <div class=figure>
fantasai@7057 1393 <p><img
fantasai@7057 1394 alt="Diagram showing list markers of '1.', '2.', '3.' sitting upright atop sideways vertical Latin list item text."
fantasai@7057 1395 class=example src=vertical-horizontal-list-markers.png>
fantasai@7057 1396
fantasai@7057 1397 <p class=caption>Example of horizontal list markers in a vertical list
fantasai@7057 1398 </div>
fantasai@7057 1399 </div>
fantasai@7057 1400
fantasai@7057 1401 <h4 id=svg-writing-mode><span class=secno>3.1.1. </span> SVG1.1 ‘<a
fantasai@7057 1402 href="#writing-mode1"><code class=property>writing-mode</code></a>’
fantasai@7057 1403 Values</h4>
fantasai@7057 1404
fantasai@7057 1405 <p>SVG1.1 <a href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>
fantasai@7057 1406 defines some additional values: ‘<code class=css>lr</code>’, ‘<code
fantasai@7057 1407 class=css>lr-tb</code>’, ‘<code class=css>rl</code>’, ‘<code
fantasai@7057 1408 class=css>rl-tb</code>’, ‘<code class=css>tb</code>’, and ‘<code
fantasai@7057 1409 class=css>tb-rl</code>’.
fantasai@7057 1410
fantasai@7057 1411 <p>These values are <em>deprecated</em> in any context except SVG1
fantasai@7057 1412 documents. Implementations that wish to support these values in the
fantasai@7057 1413 context of CSS must treat them as follows:
fantasai@7057 1414
fantasai@7057 1415 <table class=data>
fantasai@7057 1416 <thead>
fantasai@7057 1417 <tr>
fantasai@7057 1418 <th>SVG1/Obsolete
fantasai@7057 1419
fantasai@7057 1420 <th>CSS
fantasai@7057 1421
fantasai@7057 1422 <tbody>
fantasai@7057 1423 <tr>
fantasai@7057 1424 <td>‘<code class=css>lr</code>’
fantasai@7057 1425
fantasai@7057 1426 <td rowspan=3>‘<a href="#horizontal-tb"><code
fantasai@7057 1427 class=css>horizontal-tb</code></a>’
fantasai@7057 1428
fantasai@7057 1429 <tr>
fantasai@7057 1430 <td>‘<code class=css>lr-tb</code>’
fantasai@7057 1431
fantasai@7057 1432 <tr>
fantasai@7057 1433 <td>‘<code class=css>rl</code>’
fantasai@7057 1434
fantasai@7057 1435 <tr>
fantasai@7057 1436 <td>‘<code class=css>tb</code>’
fantasai@7057 1437
fantasai@7057 1438 <td rowspan=2>‘<a href="#vertical-rl"><code
fantasai@7057 1439 class=css>vertical-rl</code></a>’
fantasai@7057 1440
fantasai@7057 1441 <tr>
fantasai@7057 1442 <td>‘<code class=css>tb-rl</code>’
fantasai@7057 1443 </table>
fantasai@7057 1444
fantasai@7057 1445 <p class=note>The SVG1.1 values were also present in an older revision of
fantasai@7057 1446 the CSS ‘<a href="#writing-mode1"><code
fantasai@7057 1447 class=property>writing-mode</code></a>’ specification, which is
fantasai@7057 1448 obsoleted by this specification. The additional ‘<code
fantasai@7057 1449 class=css>tb-lr</code>’ value of that revision is replaced by ‘<a
fantasai@7057 1450 href="#vertical-lr"><code class=css>vertical-lr</code></a>’.
fantasai@7057 1451
fantasai@7057 1452 <p>In SVG1.1, these values set the <dfn
fantasai@7057 1453 id=inline-progression-direction>inline progression direction</dfn>, in
fantasai@7057 1454 other words, the direction the current text position advances each time a
fantasai@8130 1455 glyph is added. This is a geometric process that happens <em>after</em>
fantasai@8130 1456 bidi reordering, and thus has no effect on the interpretation of the ‘<a
fantasai@8130 1457 href="#direction0"><code class=property>direction</code></a>’ property
fantasai@8130 1458 (which is independent of ‘<a href="#writing-mode1"><code
fantasai@7057 1459 class=property>writing-mode</code></a>’). (See <a
fantasai@7057 1460 href="http://www.w3.org/TR/SVG/text.html#RelationshipWithBiDirectionality">Relationship
fantasai@7057 1461 with bidirectionality</a>. <a href="#SVG11"
fantasai@7057 1462 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>)
fantasai@7057 1463
fantasai@7057 1464 <p class=note>There are varying interpretations on whether this process
fantasai@7057 1465 causes "writing-mode: rl" to merely shift the text string or reverse the
fantasai@7057 1466 order of all glyphs in the text.
fantasai@7057 1467
fantasai@7057 1468 <h2 id=inline-alignment><span class=secno>4. </span> Inline-level Alignment</h2>
fantasai@7057 1469
fantasai@7057 1470 <p>When different kinds of inline-level content are placed together on a
fantasai@7057 1471 line, the baselines of the content and the settings of the ‘<code
fantasai@7057 1472 class=property>vertical-align</code>’ property control how they are
fantasai@7057 1473 aligned in the transverse direction of the line box. This section
fantasai@7057 1474 discusses what baselines are, how to find them, and how they are used
fantasai@7057 1475 together with the ‘<code class=property>vertical-align</code>’
fantasai@7057 1476 property to determine the alignment of inline-level content.
fantasai@7057 1477
fantasai@7057 1478 <h3 id=intro-baselines><span class=secno>4.1. </span> Introduction to
fantasai@7057 1479 Baselines</h3>
fantasai@7057 1480
fantasai@7057 1481 <p><em>This section is non-normative.</em>
fantasai@7057 1482
fantasai@7057 1483 <p>A <dfn id=baseline>baseline</dfn> is a line along the <i>inline axis</i>
fantasai@7057 1484 of a line box along which individual glyphs of text are aligned. Baselines
fantasai@7057 1485 guide the design of glyphs in a font (for example, the bottom of most
fantasai@7057 1486 alphabetic glyphs typically align with the alphabetic baseline), and they
fantasai@7057 1487 guide the alignment of glyphs from different fonts or font sizes when
fantasai@7057 1488 typesetting.
fantasai@7057 1489
fantasai@7057 1490 <div class=figure> [Picture of alphabetic text in two font sizes with the
fantasai@7057 1491 baseline and emboxes indicated.]</div>
fantasai@7057 1492
fantasai@7057 1493 <p>Different writing systems prefer different baseline tables.
fantasai@7057 1494
fantasai@7057 1495 <div class=figure>
fantasai@7057 1496 <p><img
fantasai@7057 1497 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."
fantasai@7057 1498 src=script-preferred-baselines.gif>
fantasai@7057 1499
fantasai@7057 1500 <p class=caption>Preferred baselines in various writing systems
fantasai@7057 1501 </div>
fantasai@7057 1502
fantasai@7057 1503 <p>A well-constructed font contains a <dfn id=baseline-table>baseline
fantasai@7057 1504 table</dfn>, which indicates the position of one or more baselines within
fantasai@7057 1505 the font's design coordinate space. (The design coordinate space is scaled
fantasai@7057 1506 with the font size.)
fantasai@7057 1507
fantasai@7057 1508 <div class=figure>
fantasai@7057 1509 <p><img alt="" src=baselines.gif>
fantasai@7057 1510
fantasai@7057 1511 <p class=caption>In a well-designed mixed-script font, the glyphs are
fantasai@7057 1512 positioned in the coordinate space to harmonize with one another when
fantasai@7057 1513 typeset together. The baseline table is then constructed to match the
fantasai@7057 1514 shape of the glyphs, each baseline positioned to match the glyphs from
fantasai@7057 1515 its preferred scripts.
fantasai@7057 1516 </div>
fantasai@7057 1517
fantasai@7057 1518 <p>The baseline table is a property of the font, and the positions of the
fantasai@7057 1519 various baselines apply to all glyphs in the font.
fantasai@7057 1520
fantasai@7057 1521 <p>Different baseline tables can be provided for alignment in horizontal
fantasai@7057 1522 and vertical text. UAs should use the vertical tables in vertical writing
fantasai@7057 1523 modes and the horizontal tables otherwise.
fantasai@7057 1524
fantasai@7057 1525 <h3 id=text-baselines><span class=secno>4.2. </span> Text Baselines</h3>
fantasai@7057 1526
fantasai@7057 1527 <p>In this specification, only the following baselines are considered:
fantasai@7057 1528
fantasai@7057 1529 <dl>
fantasai@7057 1530 <dt>alphabetic
fantasai@7057 1531
fantasai@7057 1532 <dd>The <dfn id=alphabetic-baseline>alphabetic baseline</dfn>, which
fantasai@7057 1533 typically aligns with the bottom of uppercase Latin glyphs.
fantasai@7057 1534
fantasai@7057 1535 <dt>central
fantasai@7057 1536
fantasai@7057 1537 <dd>The <dfn id=central-baseline>central baseline</dfn>, which typically
fantasai@7057 1538 crosses the center of the em box. If the font is missing this baseline,
fantasai@7057 1539 it is assumed to be halfway between the ascender (<a
fantasai@7057 1540 href="#over"><i>over</i></a>) and descender (<a
fantasai@7057 1541 href="#under"><i>under</i></a>) edges of the em box.
fantasai@7057 1542 </dl>
fantasai@7057 1543
fantasai@7057 1544 <p>In vertical writing mode, the <a href="#central-baseline"><i>central
fantasai@7057 1545 baseline</i></a> is used as the dominant baseline when ‘<a
fantasai@7057 1546 href="#text-orientation0"><code
fantasai@7057 1547 class=property>text-orientation</code></a>’ is ‘<a href="#mixed"><code
fantasai@7057 1548 class=css>mixed</code></a>’ or ‘<a href="#upright"><code
fantasai@7057 1549 class=css>upright</code></a>’. Otherwise the <a
fantasai@7057 1550 href="#alphabetic-baseline"><i>alphabetic baseline</i></a> is used.
fantasai@7057 1551
fantasai@7057 1552 <p class=note>A future CSS module will deal with baselines in more detail
fantasai@7057 1553 and allow the choice of other dominant baselines and alignment options.
fantasai@7057 1554
fantasai@7057 1555 <h3 id=replaced-baselines><span class=secno>4.3. </span> Atomic Inline
fantasai@7057 1556 Baselines</h3>
fantasai@7057 1557
fantasai@7057 1558 <p>If an <a
fantasai@7057 1559 href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes">atomic
fantasai@7057 1560 inline</a> (such as an inline-block, inline-table, or replaced inline
fantasai@7057 1561 element) is not capable of providing its own baseline information, then
fantasai@7057 1562 the UA synthesizes a baseline table thus:
fantasai@7057 1563
fantasai@7057 1564 <dl>
fantasai@7057 1565 <dt>alphabetic
fantasai@7057 1566
fantasai@7057 1567 <dd>The alphabetic baseline is assumed to be at the <a
fantasai@7057 1568 href="#under"><i>under</i></a> margin edge.
fantasai@7057 1569
fantasai@7057 1570 <dt>central
fantasai@7057 1571
fantasai@7057 1572 <dd>The central baseline is assumed to be halfway between the <a
fantasai@7057 1573 href="#under"><i>under</i></a> and <a href="#over"><i>over</i></a> margin
fantasai@7057 1574 edges of the box.
fantasai@7057 1575 </dl>
fantasai@7057 1576
fantasai@7057 1577 <h3 id=baseline-alignment><span class=secno>4.4. </span> Baseline Alignment</h3>
fantasai@7057 1578
fantasai@7057 1579 <p>The <dfn id=dominant-baseline>dominant baseline</dfn> (which <a
fantasai@7057 1580 href="#text-baselines">can change</a> based on the writing mode) is used
fantasai@7057 1581 in CSS for alignment in two cases:
fantasai@7057 1582
fantasai@7057 1583 <ul>
fantasai@7057 1584 <li><strong>Aligning glyphs from different fonts within the same inline
fantasai@7057 1585 box.</strong> The glyphs are aligned by matching up the positions of the
fantasai@7057 1586 dominant baseline in their corresponding fonts.
fantasai@7057 1587
fantasai@7057 1588 <li><strong>Aligning a child inline-level box within its parent.</strong>
fantasai@7057 1589 For the ‘<code class=property>vertical-align</code>’ value of ‘<a
fantasai@7057 1590 href="#baseline"><code class=css>baseline</code></a>’, child is aligned
fantasai@7057 1591 to the parent by matching the parent's dominant baseline to the same
fantasai@7057 1592 baseline in the child. (E.g. if the parent's dominant baseline is
fantasai@7057 1593 alphabetic, then the child's alphabetic baseline is matched to the
fantasai@7057 1594 parent's alphabetic baseline, even if the child's dominant baseline is
fantasai@7057 1595 something else.) For values of ‘<code class=css>sub</code>’, ‘<code
fantasai@7057 1596 class=css>super</code>’, ‘<code class=css>&lt;length&gt;</code>’,
fantasai@7057 1597 and ‘<code class=css>&lt;percentage&gt;</code>’, the baselines are
fantasai@7057 1598 aligned as for ‘<a href="#baseline"><code
fantasai@7057 1599 class=css>baseline</code></a>’, but the child is shifted according to
fantasai@7057 1600 the offset given by its ‘<code class=property>vertical-align</code>’
fantasai@7057 1601 value.
fantasai@7057 1602 <div class=example>
fantasai@7057 1603 <p>Given following sample markup:
fantasai@7057 1604
fantasai@7057 1605 <pre>&lt;p&gt;&lt;span class="outer"&gt;Ap &lt;span class="inner"&gt;<i>ji</i>&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;</pre>
fantasai@7057 1606
fantasai@7057 1607 <p>And the following style rule:
fantasai@7057 1608
fantasai@7057 1609 <pre>span.inner { font-size: .75em; }</pre>
fantasai@7057 1610
fantasai@7057 1611 <p>The baseline tables of the parent (<code>.outer</code>) and the child
fantasai@7057 1612 (<code>.inner</code>) will not match up due to the font size
fantasai@7057 1613 difference. Since the dominant baseline is the alphabetic baseline, the
fantasai@7057 1614 child box is aligned to its parent by matching up their alphabetic
fantasai@7057 1615 baselines.
fantasai@7057 1616
fantasai@7057 1617 <div class=figure>
fantasai@7057 1618 <p><img alt="" src=baseline-align-sizes.gif>
fantasai@7057 1619 </div>
fantasai@7057 1620 </div>
fantasai@7057 1621
fantasai@7057 1622 <div class=example>
fantasai@7057 1623 <p>If we assign ‘<code class=css>vertical-align: super</code>’ to
fantasai@7057 1624 the <code>.inner</code> element from the example above, the same rules
fantasai@7057 1625 are used to align the <code>.inner</code> child to its parent; the only
fantasai@7057 1626 difference is in addition to the baseline alignment, the child is
fantasai@7057 1627 shifted to the superscript position.
fantasai@7057 1628
fantasai@7057 1629 <pre>span.inner { vertical-align: super; font-size: .75em; }</pre>
fantasai@7057 1630
fantasai@7057 1631 <div class=figure>
fantasai@7057 1632 <p><img
fantasai@7057 1633 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."
fantasai@7057 1634 src=baseline-align-super.gif>
fantasai@7057 1635 </div>
fantasai@7057 1636 </div>
fantasai@7057 1637 </ul>
fantasai@7057 1638
fantasai@7057 1639 <h2 id=intro-text-layout><span class=secno>5. </span> Introduction to
fantasai@7057 1640 Vertical Text Layout</h2>
fantasai@7057 1641
fantasai@7057 1642 <p>Each writing system has one or more native orientations. Modern scripts
fantasai@7057 1643 can therefore be classified into three orientational categories:
fantasai@7057 1644
fantasai@7057 1645 <dl>
fantasai@7057 1646 <dt>horizontal-only
fantasai@7057 1647
fantasai@7057 1648 <dd>Scripts that have horizontal, but not vertical, native orientation.
fantasai@7057 1649 Includes: Latin, Arabic, Hebrew, Devanagari
fantasai@7057 1650
fantasai@7057 1651 <dt>vertical-only
fantasai@7057 1652
fantasai@7057 1653 <dd>Scripts that have vertical, but not horizontal, native orientation.
fantasai@7057 1654 Includes: Mongolian, Phags Pa
fantasai@7057 1655
fantasai@7057 1656 <dt>bi-orientational
fantasai@7057 1657
fantasai@7057 1658 <dd>Scripts that have both vertical and horizontal native orientation.
fantasai@7057 1659 Includes: Han, Hangul, Japanese Kana
fantasai@7057 1660 </dl>
fantasai@7057 1661
fantasai@7057 1662 <p>A <dfn id=vertical-script>vertical script</dfn> is one that has a native
fantasai@7057 1663 vertical orientation: i.e. one that is either vertical-only or that is
fantasai@7057 1664 bi-orientational. A <dfn id=horizontal-script>horizontal script</dfn> is
fantasai@7057 1665 one that has a native horizontal orientation: i.e. one that is either
fantasai@7057 1666 horizontal-only or that is bi-orientational. (See <a
fantasai@7057 1667 href="#script-orientations">Appendix B</a> for a categorization of scripts
fantasai@7057 1668 by native orientation.)
fantasai@7057 1669
fantasai@7057 1670 <div class=figure>
fantasai@7057 1671 <p><img
fantasai@7057 1672 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."
fantasai@7057 1673 src=baseline-align-super.gif>
fantasai@7057 1674 </div>
fantasai@7057 1675
fantasai@7057 1676 <p>In modern typographic systems, all glyphs are assigned a horizontal
fantasai@7057 1677 orientation, which is used when laying out text horizontally. To lay out
fantasai@7057 1678 vertical text, the UA needs to transform the text from its horizontal
fantasai@7057 1679 orientation. This transformation is the <dfn
fantasai@7057 1680 id=bi-orientational-transform>bi-orientational transform</dfn>, and there
fantasai@7057 1681 are two types:
fantasai@7057 1682
fantasai@7057 1683 <dl>
fantasai@7057 1684 <dt>rotate
fantasai@7057 1685
fantasai@7057 1686 <dd>Rotate the glyph from horizontal to vertical <a
fantasai@7057 1687 href="diagrams/glyph-right.svg" type="image/svg+xml"> <img
fantasai@7057 1688 alt="Rotate the glyph from horizontal to vertical" class=figure
fantasai@7057 1689 src="diagrams/glyph-right.png"></a>
fantasai@7057 1690
fantasai@7057 1691 <dt>translate
fantasai@7057 1692
fantasai@7057 1693 <dd>Translate the glyph from horizontal to vertical <a
fantasai@7057 1694 href="diagrams/glyph-upright.svg" type="image/svg+xml"> <img
fantasai@7057 1695 alt="Translate the glyph from horizontal to vertical" class=figure
fantasai@7057 1696 src="diagrams/glyph-upright.png"></a>
fantasai@7057 1697 </dl>
fantasai@7057 1698
fantasai@7057 1699 <p>Scripts with a native vertical orientation have an intrinsic
fantasai@7057 1700 bi-orientational transform, which orients them correctly in vertical text:
fantasai@7057 1701 most CJK (Chinese/Japanese/Korean) characters translate, that is, they are
fantasai@7057 1702 always upright. Characters from other scripts, such as Mongolian, rotate.
fantasai@7057 1703
fantasai@7057 1704 <p>Scripts without a native vertical orientation can be either rotated (set
fantasai@7057 1705 sideways) or translated (set upright): the transform used is a stylistic
fantasai@7057 1706 preference depending on the text's usage, rather than a matter of
fantasai@7057 1707 correctness. The ‘<a href="#text-orientation0"><code
fantasai@7057 1708 class=property>text-orientation</code></a>’ property's ‘<a
fantasai@7057 1709 href="#mixed"><code class=css>mixed</code></a>’ and ‘<a
fantasai@7057 1710 href="#upright"><code class=css>upright</code></a>’ values are provided
fantasai@7057 1711 to specify rotation vs. translation of horizontal-only text.
fantasai@7057 1712
fantasai@7057 1713 <p class=note>The ‘<a href="#sideways-left"><code
fantasai@7057 1714 class=css>sideways-left</code></a>’, ‘<a href="#sideways-right"><code
fantasai@7057 1715 class=css>sideways-right</code></a>’, and ‘<a href="#sideways"><code
fantasai@7057 1716 class=css>sideways</code></a>’ values of ‘<a
fantasai@7057 1717 href="#text-orientation0"><code
fantasai@7057 1718 class=property>text-orientation</code></a>’ are provided for decorative
fantasai@7057 1719 layout effects and to work around limitations in CSS support for
fantasai@7057 1720 bottom-to-top scripts.
fantasai@7057 1721
fantasai@7057 1722 <h3 id=text-orientation><span class=secno>5.1. </span> Orienting Text: the
fantasai@7057 1723 ‘<a href="#text-orientation0"><code
fantasai@7057 1724 class=property>text-orientation</code></a>’ property</h3>
fantasai@7057 1725
fantasai@7057 1726 <table class=propdef>
fantasai@7057 1727 <tbody>
fantasai@7057 1728 <tr>
fantasai@7057 1729 <th>Name:
fantasai@7057 1730
fantasai@7057 1731 <td><dfn id=text-orientation0>text-orientation</dfn>
fantasai@7057 1732
fantasai@7057 1733 <tr>
fantasai@7057 1734 <th><a href="#values">Value</a>:
fantasai@7057 1735
fantasai@7057 1736 <td>mixed | upright | sideways-right | sideways-left | sideways |
fantasai@7057 1737 use-glyph-orientation
fantasai@7057 1738
fantasai@7057 1739 <tr>
fantasai@7057 1740 <th>Initial:
fantasai@7057 1741
fantasai@7057 1742 <td>mixed
fantasai@7057 1743
fantasai@7057 1744 <tr>
fantasai@7057 1745 <th>Applies to:
fantasai@7057 1746
fantasai@7057 1747 <td>all elements except table row groups, rows, column groups, and
fantasai@7057 1748 columns
fantasai@7057 1749
fantasai@7057 1750 <tr>
fantasai@7057 1751 <th>Inherited:
fantasai@7057 1752
fantasai@7057 1753 <td>yes
fantasai@7057 1754
fantasai@7057 1755 <tr>
fantasai@7057 1756 <th>Percentages:
fantasai@7057 1757
fantasai@7057 1758 <td>N/A
fantasai@7057 1759
fantasai@7057 1760 <tr>
fantasai@7057 1761 <th>Media:
fantasai@7057 1762
fantasai@7057 1763 <td>visual
fantasai@7057 1764
fantasai@7057 1765 <tr>
fantasai@7057 1766 <th>Computed value:
fantasai@7057 1767
fantasai@7057 1768 <td>specified value
fantasai@7057 1769 </table>
fantasai@7057 1770
fantasai@7057 1771 <p>This property specifies the orientation of text within a line. Current
fantasai@7057 1772 values only have an effect in vertical writing modes; the property has no
fantasai@7057 1773 effect on elements in horizontal writing modes.
fantasai@7057 1774
fantasai@7057 1775 <p>For readability, the term <a href="#character"><i>character</i></a> is
fantasai@7057 1776 used in place of <em>extended grapheme cluster</em> in this section. See
fantasai@7057 1777 <a href="#character-properties">Characters and Properties</a> for further
fantasai@7057 1778 details.
fantasai@7057 1779
fantasai@7057 1780 <p>Values have the following meanings:
fantasai@7057 1781
fantasai@7057 1782 <dl>
fantasai@7057 1783 <dt><dfn id=mixed>mixed</dfn>
fantasai@7057 1784
fantasai@7057 1785 <dd>
fantasai@7057 1786 <p>In vertical writing modes, characters from horizontal-only scripts are
fantasai@7057 1787 set sideways, i.e. 90° clockwise from their standard orientation in
fantasai@7057 1788 horizontal text. Characters from vertical scripts are set with their
fantasai@7057 1789 intrinsic orientation. See <a href="#vertical-orientations">Vertical
fantasai@7057 1790 Orientations</a> for further details.
fantasai@7057 1791
fantasai@7057 1792 <p>This value is typical for layout of primarily vertical-script text.
fantasai@7057 1793
fantasai@7057 1794 <dt><dfn id=upright>upright</dfn>
fantasai@7057 1795
fantasai@7057 1796 <dd>
fantasai@7057 1797 <p>In vertical writing modes, characters from horizontal-only scripts are
fantasai@7057 1798 rendered upright, i.e. in their standard horizontal orientation.
fantasai@7057 1799 Characters from vertical scripts are set with their intrinsic
fantasai@7057 1800 orientation and shaped normally. See <a
fantasai@7057 1801 href="#vertical-orientations">Vertical Orientations</a> for further
fantasai@7057 1802 details.
fantasai@7057 1803
fantasai@7057 1804 <p>For the purposes of bidi reordering, this value causes all characters
fantasai@7057 1805 to be treated as strong LTR. This value causes the used value of ‘<a
fantasai@7057 1806 href="#direction0"><code class=property>direction</code></a>’ to be
fantasai@7057 1807 ‘<a href="#ltr"><code class=css>ltr</code></a>’.
fantasai@7057 1808
fantasai@7057 1809 <dt><dfn id=sideways-right>sideways-right</dfn>
fantasai@7057 1810
fantasai@7057 1811 <dd>
fantasai@7057 1812 <p>In vertical writing modes, this causes text to be set as if in a
fantasai@7057 1813 horizontal layout, but rotated 90° clockwise.
fantasai@7057 1814
fantasai@7057 1815 <dt><dfn id=sideways-left>sideways-left</dfn>
fantasai@7057 1816
fantasai@7057 1817 <dd>
fantasai@7057 1818 <p>In vertical writing modes, this causes text to be set as if in a
fantasai@7057 1819 horizontal layout, but rotated 90° counter-clockwise.
fantasai@7057 1820
fantasai@7057 1821 <p>If set on a non-replaced inline whose parent is not ‘<a
fantasai@7057 1822 href="#sideways-left"><code class=css>sideways-left</code></a>’, this
fantasai@7057 1823 forces bidi isolation: the ‘<a href="#normal"><code
fantasai@7057 1824 class=css>normal</code></a>’ and ‘<a href="#embed"><code
fantasai@7057 1825 class=css>embed</code></a>’ values of ‘<a
fantasai@7057 1826 href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’
fantasai@7057 1827 compute to ‘<a href="#isolate"><code class=css>isolate</code></a>’,
fantasai@7057 1828 and ‘<a href="#bidi-override"><code
fantasai@7057 1829 class=css>bidi-override</code></a>’ computes to ‘<a
fantasai@7057 1830 href="#isolate-override"><code class=css>isolate-override</code></a>’.
fantasai@7057 1831 Layout of text is exactly as for ‘<a href="#sideways-right"><code
fantasai@7057 1832 class=css>sideways-right</code></a>’ except that the baseline table of
fantasai@7057 1833 each of the element's inline boxes is mirrored around a vertical axis
fantasai@7057 1834 along the center of its content box and text layout is rotated 180° to
fantasai@7057 1835 match. The positions of text decorations propagated from an ancestor
fantasai@7057 1836 inline (including the block container's root inline) are not mirrored,
fantasai@7057 1837 but any text decorations introduced by the element are positioned using
fantasai@7057 1838 the mirrored baseline table.
fantasai@7057 1839
fantasai@7057 1840 <p>Similarly, if an inline child of the element has a ‘<a
fantasai@7057 1841 href="#text-orientation0"><code
fantasai@7057 1842 class=property>text-orientation</code></a>’ value other than ‘<a
fantasai@7057 1843 href="#sideways-left"><code class=css>sideways-left</code></a>’, an
fantasai@7057 1844 analogous transformation (and bidi isolation) is applied.
fantasai@7057 1845
fantasai@7057 1846 <dt><dfn id=sideways>sideways</dfn>
fantasai@7057 1847
fantasai@7057 1848 <dd>
fantasai@7057 1849 <p>This value is equivalent to ‘<a href="#sideways-right"><code
fantasai@7057 1850 class=css>sideways-right</code></a>’ in ‘<a
fantasai@7057 1851 href="#vertical-rl"><code class=css>vertical-rl</code></a>’ writing
fantasai@7057 1852 mode and equivalent to ‘<a href="#sideways-left"><code
fantasai@7057 1853 class=css>sideways-left</code></a>’ in ‘<a href="#vertical-lr"><code
fantasai@7057 1854 class=css>vertical-lr</code></a>’ writing mode. It can be useful when
fantasai@7057 1855 setting horizontal script text vertically in a primarily horizontal-only
fantasai@7057 1856 document.
fantasai@7057 1857
fantasai@7057 1858 <dt><dfn id=use-glyph-orientation>use-glyph-orientation</dfn>
fantasai@7057 1859
fantasai@7057 1860 <dd>
fantasai@7057 1861 <p><a href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> defines
fantasai@7057 1862 ‘<code class=property>glyph-orientation-vertical</code>’ and
fantasai@7057 1863 ‘<code class=property>glyph-orientation-horizontal</code>’
fantasai@7057 1864 properties that were intended to control text orientation. These
fantasai@7057 1865 properties are <em>deprecated</em> and do not apply to non-SVG elements.
fantasai@7057 1866 If an implementation supports these properties, the ‘<a
fantasai@7057 1867 href="#use-glyph-orientation"><code
fantasai@7057 1868 class=css>use-glyph-orientation</code></a>’ value when set on SVG
fantasai@7057 1869 elements indicates that the SVG ‘<code
fantasai@7057 1870 class=property>glyph-orientation-vertical</code>’ and ‘<code
fantasai@7057 1871 class=property>glyph-orientation-horizontal</code>’ behavior control
fantasai@7057 1872 the layout of text. Such UAs must set ‘<code
fantasai@7057 1873 class=css>text-orientation: use-glyph-orientation</code>’ on all <a
fantasai@7057 1874 href="http://www.w3.org/TR/SVG/intro.html#TermTextContentElement">SVG
fantasai@7057 1875 text content elements</a> in their default UA style sheet for SVG.
fantasai@7057 1876
fantasai@7057 1877 <p>In all other contexts, and for implementations that do not support the
fantasai@7057 1878 glyph orientation properties, the ‘<a
fantasai@7057 1879 href="#use-glyph-orientation"><code
fantasai@7057 1880 class=css>use-glyph-orientation</code></a>’ behavior is the same as
fantasai@7057 1881 for ‘<a href="#mixed"><code class=css>mixed</code></a>’.
fantasai@7057 1882
fantasai@7057 1883 <p class=note>This value is at-risk and may be dropped during CR.
fantasai@7057 1884 </dl>
fantasai@7057 1885
fantasai@7057 1886 <div class=figure id=fig-text-orientation>
fantasai@7057 1887 <table class=data>
fantasai@7057 1888 <tbody>
fantasai@7057 1889 <tr>
fantasai@7057 1890 <td> <img alt="text-orientation: mixed" height=160
fantasai@7057 1891 src=text-orientation-vr.png width=64>
fantasai@7057 1892
fantasai@7057 1893 <td> <img alt="text-orientation: upright" height=160
fantasai@7057 1894 src=text-orientation-up.png width=64>
fantasai@7057 1895
fantasai@7057 1896 <td> <img alt="text-orientation: sideways-left" height=160
fantasai@7057 1897 src=text-orientation-sl.png width=64>
fantasai@7057 1898
fantasai@7057 1899 <td> <img alt="text-orientation: sideways-right" height=160
fantasai@7057 1900 src=text-orientation-sr.png width=64>
fantasai@7057 1901
fantasai@7057 1902 <tr>
fantasai@7057 1903 <td>‘<a href="#mixed"><code class=css>mixed</code></a>’
fantasai@7057 1904
fantasai@7057 1905 <td>‘<a href="#upright"><code class=css>upright</code></a>’
fantasai@7057 1906
fantasai@7057 1907 <td>‘<a href="#sideways-left"><code
fantasai@7057 1908 class=css>sideways-left</code></a>’
fantasai@7057 1909
fantasai@7057 1910 <td>‘<a href="#sideways-right"><code
fantasai@7057 1911 class=css>sideways-right</code></a>’
fantasai@7057 1912 </table>
fantasai@7057 1913
fantasai@7057 1914 <p class=caption>‘<a href="#text-orientation0"><code
fantasai@7057 1915 class=property>text-orientation</code></a>’ values (‘<a
fantasai@7057 1916 href="#writing-mode1"><code class=property>writing-mode</code></a>’ is
fantasai@7057 1917 ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’)
fantasai@7057 1918 </div>
fantasai@7057 1919
fantasai@7057 1920 <div class=example>
fantasai@7057 1921 <p>In the following example, the root element of a horizontal-only
fantasai@7057 1922 document is set to use ‘<a href="#sideways"><code
fantasai@7057 1923 class=css>sideways</code></a>’. In the rest of the document, the author
fantasai@7057 1924 can just set ‘<a href="#writing-mode1"><code
fantasai@7057 1925 class=property>writing-mode</code></a>’ without worrying about whether
fantasai@7057 1926 the text is ‘<a href="#vertical-rl"><code
fantasai@7057 1927 class=css>vertical-rl</code></a>’ or ‘<a href="#vertical-lr"><code
fantasai@7057 1928 class=css>vertical-lr</code></a>’.
fantasai@7057 1929
fantasai@7057 1930 <pre>
fantasai@7057 1931 :root { text-orientation: sideways; }
fantasai@7057 1932 caption { caption-side: left; writing-mode: vertical-lr; }
fantasai@7057 1933 thead th { writing-mode: vertical-lr; }
fantasai@7057 1934 h1.banner { position: absolute; top: 0; right: 0; writing-mode: vertical-rl; }
fantasai@7057 1935 </pre>
fantasai@7057 1936 </div>
fantasai@7057 1937
fantasai@7057 1938 <p class=note>Changing the value of this property may affect inline-level
fantasai@7057 1939 alignment. Refer to <a href="#text-baselines">Text Baselines</a> for more
fantasai@7057 1940 details.
fantasai@7057 1941
fantasai@7057 1942 <h4 id=vertical-orientations><span class=secno>5.1.1. </span> Mixed
fantasai@7057 1943 Vertical Orientations</h4>
fantasai@7057 1944
fantasai@8478 1945 <p> <a href="#UTR50" rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a> defines
fantasai@8478 1946 the Vertical_Orientation property for the default character orientation of
fantasai@8478 1947 mixed-orientation vertical text. When ‘<a
fantasai@8478 1948 href="#text-orientation0"><code
fantasai@7057 1949 class=property>text-orientation</code></a>’ is ‘<a href="#mixed"><code
fantasai@7057 1950 class=css>mixed</code></a>’, the UA must render a <a
fantasai@7057 1951 href="#character"><i>character</i></a> upright if its orientation property
fantasai@8478 1952 is <code>U</code>, <code>Tx</code>, or <code>Tu</code>; or <a
fantasai@7057 1953 href="#typeset-sideways">typeset it sideways</a> (90° clockwise from
fantasai@7057 1954 horizontal) if its orientation property is <code>R</code>. For
fantasai@7057 1955 <code>Tr</code> <a href="#character"><i>characters</i></a>, which are
fantasai@7057 1956 intended to be either transformed or rotated sideways, the UA may assume
fantasai@7057 1957 that appropriate glyphs for upright typesetting are given in the font and
fantasai@7057 1958 render them upright; alternately it may check for such glyphs first, and
fantasai@7057 1959 fall back to typesetting them sideways if the appropriate glyphs are
fantasai@7057 1960 missing.
fantasai@7057 1961
fantasai@7057 1962 <p> In some systems (e.g. when using OpenType fonts), to correctly orient a
fantasai@7057 1963 <a href="#character"><i>character</i></a> belonging to the Mongolian or
fantasai@7057 1964 Phags-pa script upright, the UA must actually typeset it <a
fantasai@7057 1965 href="#typeset-sideways">sideways</a>.
fantasai@7057 1966
fantasai@7057 1967 <p class=note>This is because the "upright" orientation in the Unicode code
fantasai@7057 1968 charts (which assume vertical typesetting) and the "upright" orientation
fantasai@7057 1969 of the glyphs of these scripts in most OpenType fonts (which assume
fantasai@7057 1970 horizontal typesetting) don't match.
fantasai@7057 1971
fantasai@7057 1972 <h4 id=vertical-font-features><span class=secno>5.1.2. </span> Vertical
fantasai@7057 1973 Typesetting and Font Features</h4>
fantasai@7057 1974
fantasai@7057 1975 <p>When typesetting text in ‘<a href="#mixed"><code
fantasai@7057 1976 class=css>mixed</code></a>’ and ‘<a href="#upright"><code
fantasai@7057 1977 class=css>upright</code></a>’ orientations:
fantasai@7057 1978
fantasai@7057 1979 <dl>
fantasai@7057 1980 <dt>upright characters
fantasai@7057 1981
fantasai@7057 1982 <dd> Are typeset upright with vertical font metrics. The UA must
fantasai@7057 1983 synthesize vertical font metrics for fonts that lack them. (This
fantasai@7057 1984 specification does not define heuristics for synthesizing such metrics.)
fantasai@7057 1985 Additionally, font features (such as alternate glyphs and other
fantasai@7057 1986 transformation) intended for use in vertical typesetting must be used.
fantasai@7057 1987 (E.g. the OpenType ‘<code class=css>vert</code>’ feature must be
fantasai@7057 1988 enabled.) Furthermore, characters from horizontal cursive scripts (such
fantasai@7057 1989 as Arabic) are shaped in their isolated forms when typeset upright.
fantasai@7057 1990 <p class=note>Note that even when typeset "upright", some glyphs should
fantasai@7057 1991 appear rotated. For example, dashes and enclosing punctuation (such as
fantasai@7057 1992 〈 LEFT ANGLE BRACKET U+3008) should be oriented relative to the inline
fantasai@7057 1993 axis. In OpenType, this is typically handled by glyph substitution,
fantasai@7057 1994 although not all fonts have alternate glyphs for all relevant
fantasai@7057 1995 codepoints. (East Asian fonts usually provide alternates for East Asian
fantasai@7057 1996 codepoints, but Western fonts typically lack any vertical typesetting
fantasai@7057 1997 features.) Unicode published draft data on which <a
fantasai@7057 1998 href="#character"><i>characters</i></a> should appear sideways as the
fantasai@7057 1999 SVO property in <a
fantasai@7057 2000 href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this
fantasai@8478 2001 data file</a>; however, this property has been abandoned for the current
fantasai@8478 2002 revision of <a href="#UTR50"
fantasai@7057 2003 rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a>.
fantasai@7057 2004
fantasai@7057 2005 <dt id=typeset-sideways>sideways characters
fantasai@7057 2006
fantasai@7057 2007 <dd> Are typeset rotated 90° sideways with horizontal metrics, and
fantasai@7057 2008 vertical typesetting features are not used. However, if the font has
fantasai@7057 2009 features meant to be enabled for sideways text that is typeset in
fantasai@7057 2010 vertical lines (e.g. to adjust brush stroke angles or alignment), those
fantasai@7057 2011 features are used.
fantasai@7057 2012 <!--<p class="issue">Propose 'svrt' as an OpenType substitution feature
fantasai@7057 2013 that is applied to rotated horizontal text in vertical text runs,
fantasai@7057 2014 to handle these cases.-->
fantasai@7057 2015 </dl>
fantasai@7057 2016
fantasai@7057 2017 <p> All text in ‘<a href="#sideways"><code
fantasai@7057 2018 class=css>sideways</code></a>’, ‘<a href="#sideways-right"><code
fantasai@7057 2019 class=css>sideways-right</code></a>’, and ‘<a
fantasai@7057 2020 href="#sideways-left"><code class=css>sideways-left</code></a>’
fantasai@7057 2021 orientations is typeset using horizontal font metrics and the normal set
fantasai@7057 2022 of features used for horizontal text runs. Vertical metrics, vertical
fantasai@7057 2023 glyph variations, and any other features meant for text typeset in
fantasai@7057 2024 vertical lines are <em>not</em> used.
fantasai@7057 2025
fantasai@7057 2026 <p class=note> The OpenType ‘<code class=css>vrt2</code>’ feature,
fantasai@7057 2027 which is intended for mixed-orientation typesetting, is not used by CSS.
fantasai@7057 2028 It delegates the responsibility for orienting glyphs to the font designer.
fantasai@7057 2029 CSS instead dictates the orientation through <a href="#UTR50"
fantasai@7057 2030 rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a> and orients glyphs by
fantasai@7057 2031 typesetting them sideways or upright as appropriate.
fantasai@7057 2032
fantasai@7057 2033 <p class=issue>This section needs additional work. Suggestions are welcome.
fantasai@7057 2034 <!-- random notes
fantasai@7057 2035 Property to customize text-orientation (and line breaking class) of various
fantasai@7057 2036 characters (yes, the name is horrible, we need a better one):
fantasai@7057 2037 text-symbolize: latin ||
fantasai@7057 2038 greek ||
fantasai@7057 2039 cyrillic ||
fantasai@7057 2040 letter-symbols || /* letterlike symbols and math letters */
fantasai@7057 2041 arrows || /* and math relation operators?? */
fantasai@7057 2042 currency || /* Sc */
fantasai@7057 2043 rotate-symbols || /* other So */
fantasai@7057 2044
fantasai@7057 2045 Do symbols NFC-fold to Latin/Greek? If so we might have a problem there.
fantasai@7057 2046
fantasai@7057 2047 Roman numerals are poorly handled right now. If we make them upright, we
fantasai@7057 2048 get the right behavior in most cases. But as soon as you get to 13, you
fantasai@7057 2049 have a problem.
fantasai@7057 2050 -->
fantasai@7057 2051
fantasai@7057 2052 <h2 id=abstract-box><span class=secno>6. </span> Abstract Box Terminology</h2>
fantasai@7057 2053
fantasai@7057 2054 <p>CSS2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 2055 defines the box layout model of CSS in detail, but only for the ‘<a
fantasai@7057 2056 href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ writing
fantasai@7057 2057 mode. Layout is analogous in writing modes other than ‘<a
fantasai@7057 2058 href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’; however
fantasai@7057 2059 directional and dimensional terms in CSS2.1 must be abstracted and
fantasai@7057 2060 remapped appropriately.
fantasai@7057 2061
fantasai@7057 2062 <p>This section defines abstract directional and dimensional terms and
fantasai@7057 2063 their mappings in order to define box layout for other writing modes, and
fantasai@7057 2064 to provide terminology for future specs to define their layout concepts
fantasai@7057 2065 abstractly. (The next section explains how to apply them to CSS2.1 layout
fantasai@7057 2066 calculations and how to handle <a href="#orthogonal-flows">orthogonal
fantasai@7057 2067 flows</a>.) Although they derive from the behavior of text, these abstract
fantasai@7057 2068 mappings exist even for boxes that do not contain any line boxes: they are
fantasai@7057 2069 calculated directly from the values of the ‘<a
fantasai@7057 2070 href="#writing-mode1"><code class=property>writing-mode</code></a>’,
fantasai@7057 2071 ‘<a href="#text-orientation0"><code
fantasai@7057 2072 class=property>text-orientation</code></a>’, and ‘<a
fantasai@7057 2073 href="#direction0"><code class=property>direction</code></a>’
fantasai@7057 2074 properties.
fantasai@7057 2075
fantasai@7057 2076 <p>There are three sets of directional terms in CSS:
fantasai@7057 2077
fantasai@7057 2078 <dl>
fantasai@7057 2079 <dt>physical
fantasai@7057 2080
fantasai@7057 2081 <dd>Interpreted relative to the page, independent of writing mode. The
fantasai@7057 2082 physical directions are <i>left</i>, <i>right</i>, <i>top</i>, and
fantasai@7057 2083 <i>bottom</i>.
fantasai@7057 2084
fantasai@7057 2085 <dt><a href="#logical-directions">flow-relative</a>
fantasai@7057 2086
fantasai@7057 2087 <dd>Interpreted relative to the flow of content. The flow-relative
fantasai@8130 2088 directions are <a href="#start"><i>start</i></a> and <a
fantasai@8130 2089 href="#end"><i>end</i></a>, or <a
fantasai@8130 2090 href="#block-start"><i>block-start</i></a>, <a
fantasai@8130 2091 href="#block-end"><i>block-end</i></a>, <a
fantasai@8130 2092 href="#inline-start"><i>inline-start</i></a>, and <a
fantasai@8130 2093 href="#inline-end"><i>inline-end</i></a> if the dimension is also
fantasai@8130 2094 ambiguous.
fantasai@7057 2095
fantasai@7057 2096 <dt><a href="#line-directions">line-relative</a>
fantasai@7057 2097
fantasai@7057 2098 <dd>Interpreted relative to the orientation of the line box. The
fantasai@7057 2099 line-relative directions are <a href="#line-left"><i>line-left</i></a>,
fantasai@7057 2100 <a href="#line-right"><i>line-right</i></a>, <a
fantasai@7057 2101 href="#over"><i>over</i></a>, and <a href="#under"><i>under</i></a>.
fantasai@7057 2102 </dl>
fantasai@7057 2103
fantasai@7057 2104 <p>The <dfn id=physical-dimensions>physical dimensions</dfn> are
fantasai@7057 2105 <i>width</i> and <i>height</i>, which correspond to measurements along the
fantasai@7057 2106 <i>x-axis</i> (<i>vertical dimension</i>) and <i>y-axis</i> (<i>horizontal
fantasai@7057 2107 dimension</i>), respectively. <a href="#abstract-dimensions">Abstract
fantasai@7057 2108 dimensions</a> are identical in both flow-relative and line-relative
fantasai@7057 2109 terms, so there is only one set of these terms.
fantasai@7057 2110
fantasai@8130 2111 <p class=note> Note: [[CSS-FLEXBOX]] also defines <a
fantasai@8130 2112 href="http://www.w3.org/TR/css3-flexbox/#box-model">flex-relative
fantasai@8130 2113 terms</a>, which are used in describing flex layout.
fantasai@8130 2114
fantasai@7057 2115 <h3 id=abstract-dimensions><span class=secno>6.1. </span> Abstract
fantasai@7057 2116 Dimensions</h3>
fantasai@7057 2117
fantasai@7057 2118 <p>The <dfn id=abstract-dimensions0>abstract dimensions</dfn> are defined
fantasai@7057 2119 below:
fantasai@7057 2120
fantasai@7057 2121 <dl>
fantasai@7057 2122 <dt><dfn id=block-dimension>block dimension</dfn>
fantasai@7057 2123
simon@8439 2124 <dd>The dimension perpendicular to the flow of text within a line, i.e.
simon@8439 2125 the <i>vertical dimension</i> in horizontal writing modes, and the
fantasai@7057 2126 <i>horizontal dimension</i> in vertical writing modes.
fantasai@7057 2127
fantasai@7057 2128 <dt><dfn id=inline-dimension>inline dimension</dfn>
fantasai@7057 2129
fantasai@7057 2130 <dd>The dimension parallel to the flow of text within a line, i.e. the
fantasai@7057 2131 <i>horizontal dimension</i> in horizontal writing modes, and the
fantasai@7057 2132 <i>vertical dimension</i> in vertical writing modes.
fantasai@7057 2133
fantasai@7057 2134 <dt><dfn id=block-axis>block-axis</dfn>
fantasai@7057 2135
fantasai@7057 2136 <dd>The axis in the block dimension, i.e. the <i>vertical axis</i> in
fantasai@7057 2137 horizontal writing modes and the <i>horizontal axis</i> in vertical
fantasai@7057 2138 writing modes.
fantasai@7057 2139
fantasai@7057 2140 <dt><dfn id=inline-axis>inline-axis</dfn>
fantasai@7057 2141
fantasai@7057 2142 <dd>The axis in the inline dimension, i.e. the <i>horizontal axis</i> in
fantasai@7057 2143 horizontal writing modes and the <i>vertical axis</i> in vertical writing
fantasai@7057 2144 modes.
fantasai@7057 2145
fantasai@7057 2146 <dt><dfn id=extent>extent</dfn> or <dfn id=logical-height>logical
fantasai@7057 2147 height</dfn>
fantasai@7057 2148
fantasai@7057 2149 <dt>
fantasai@7057 2150
fantasai@7057 2151 <dd>A measurement in the block dimension: refers to the physical height
fantasai@7057 2152 (vertical dimension) in horizontal writing modes, and to the physical
fantasai@7057 2153 width (horizontal dimension) in vertical writing modes.
fantasai@7057 2154
fantasai@7057 2155 <dt><dfn id=measure>measure</dfn> or <dfn id=logical-width>logical
fantasai@7057 2156 width</dfn>
fantasai@7057 2157
fantasai@7057 2158 <dt>
fantasai@7057 2159
fantasai@7057 2160 <dd>A measurement in the inline dimension: refers to the physical width
fantasai@7057 2161 (horizontal dimension) in horizontal writing modes, and to the physical
fantasai@7057 2162 height (vertical dimension) in vertical writing modes. (The term <a
fantasai@7057 2163 href="#measure"><i>measure</i></a> derives from its <a
fantasai@7057 2164 href="http://en.wikipedia.org/wiki/Measure_%28typography%29">use in
fantasai@7057 2165 typography</a>.)
fantasai@7057 2166 </dl>
fantasai@7057 2167
fantasai@7057 2168 <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative
fantasai@7057 2169 Directions</h3>
fantasai@7057 2170
fantasai@7057 2171 <p>The <dfn id=flow-relative-directions>flow-relative directions</dfn>, <a
fantasai@8130 2172 href="#block-start"><i>block-start</i></a>, <a
fantasai@8130 2173 href="#block-end"><i>block-end</i></a>, <a
fantasai@8130 2174 href="#inline-start"><i>inline-start</i></a>, and <a
fantasai@8130 2175 href="#inline-end"><i>inline-end</i></a>, are defined relative to the flow
fantasai@8130 2176 of content on the page. In an <abbr title=left-to-right>LTR</abbr> ‘<a
fantasai@8130 2177 href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ writing
fantasai@8130 2178 mode, they correspond to the top, bottom, left, and right directions,
fantasai@8130 2179 respectively. They are defined as follows:
fantasai@7057 2180
fantasai@7057 2181 <dl>
fantasai@8130 2182 <dt><dfn id=block-start>block-start</dfn>
fantasai@7057 2183
fantasai@7057 2184 <dd>Nominally the side that comes earlier in the block progression, as
fantasai@7057 2185 determined by the ‘<a href="#writing-mode1"><code
fantasai@7057 2186 class=property>writing-mode</code></a>’ property: the physical top in
fantasai@7057 2187 ‘<a href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’
fantasai@7057 2188 mode, the right in ‘<a href="#vertical-rl"><code
fantasai@7057 2189 class=css>vertical-rl</code></a>’, and the left in ‘<a
fantasai@7057 2190 href="#vertical-lr"><code class=css>vertical-lr</code></a>’.
fantasai@7057 2191
fantasai@8130 2192 <dt><dfn id=block-end>block-end</dfn>
fantasai@8130 2193
fantasai@8130 2194 <dd>The side opposite <a href="#block-start"><i>block-start</i></a>.
fantasai@8130 2195
fantasai@8130 2196 <dt><dfn id=inline-start>inline-start</dfn>
fantasai@7057 2197
fantasai@7057 2198 <dd>Nominally the side from which text of its inline base direction will
fantasai@7057 2199 start. For boxes with a used ‘<a href="#direction0"><code
fantasai@7057 2200 class=property>direction</code></a>’ value of ‘<a href="#ltr"><code
fantasai@7057 2201 class=css>ltr</code></a>’, this means the <a
fantasai@7057 2202 href="#line-left"><i>line-left</i></a> side. For boxes with a used ‘<a
fantasai@7057 2203 href="#direction0"><code class=property>direction</code></a>’ value of
fantasai@7057 2204 ‘<a href="#rtl"><code class=css>rtl</code></a>’, this means the <a
fantasai@7057 2205 href="#line-right"><i>line-right</i></a> side.
fantasai@7057 2206
fantasai@8130 2207 <dt><dfn id=inline-end>inline-end</dfn>
fantasai@7057 2208
fantasai@7057 2209 <dd>The side opposite <a href="#start"><i>start</i></a>.
fantasai@7057 2210 </dl>
fantasai@7057 2211
fantasai@8130 2212 <p>Where unambiguous (or dual-meaning), the terms <dfn id=start>start</dfn>
fantasai@8130 2213 and <dfn id=end>end</dfn> are used in place of <a
fantasai@8130 2214 href="#block-start"><i>block-start</i></a>/<a
fantasai@8130 2215 href="#inline-start"><i>inline-start</i></a> and <a
fantasai@8130 2216 href="#block-end"><i>block-end</i></a>/<a
fantasai@8130 2217 href="#inline-end"><i>inline-end</i></a>, respectively.
fantasai@7057 2218
fantasai@7057 2219 <p class=note>Note that while determining the <a
fantasai@8130 2220 href="#block-start"><i>block-start</i></a> and <a
fantasai@8130 2221 href="#block-end"><i>block-end</i></a> sides of a box depends only on the
fantasai@8130 2222 ‘<a href="#writing-mode1"><code
fantasai@7057 2223 class=property>writing-mode</code></a>’ property, determining the <a
fantasai@8130 2224 href="#inline-start"><i>inline-start</i></a> and <a
fantasai@8130 2225 href="#inline-end"><i>inline-end</i></a> sides of a box depends not only
fantasai@8130 2226 on the ‘<a href="#writing-mode1"><code
fantasai@7057 2227 class=property>writing-mode</code></a>’ property but also the ‘<a
fantasai@7057 2228 href="#direction0"><code class=property>direction</code></a>’
fantasai@7057 2229 <em>and</em> ‘<a href="#text-orientation0"><code
fantasai@7057 2230 class=property>text-orientation</code></a>’ properties.
fantasai@7057 2231
fantasai@7057 2232 <div class=example>
fantasai@7057 2233 <p>An English (LTR-TB) block:
fantasai@7057 2234
fantasai@7057 2235 <pre class=ascii-art>
fantasai@7057 2236 &lt;----- width / measure -----&gt;
fantasai@7057 2237
fantasai@7057 2238 top side/
fantasai@8130 2239 block-start side
fantasai@7057 2240 +------------------------------+ A
fantasai@7057 2241 left side/ | ---inline direction ---> | right side/ |
fantasai@8130 2242 inline-start side | | | inline-end side |
fantasai@7057 2243 | | block * horizontal * | height/
fantasai@7057 2244 | | direction *writing mode* | extent
fantasai@7057 2245 | V | |
fantasai@7057 2246 +------------------------------+ V
fantasai@7057 2247 bottom side/
fantasai@8130 2248 block-end side
fantasai@7057 2249 </pre>
fantasai@7057 2250 </div>
fantasai@7057 2251
fantasai@7057 2252 <div class=example>
fantasai@7057 2253 <p>A vertical Japanese block (TTB-RL):
fantasai@7057 2254
fantasai@7057 2255 <pre class=ascii-art>
fantasai@7057 2256 &lt;----- width / extent ------&gt;
fantasai@7057 2257
fantasai@7057 2258 top side/
fantasai@8130 2259 inline-start side
fantasai@7057 2260 +------------------------------+ A
fantasai@7057 2261 left side/ | &lt;---block direction--- | right side/ |
fantasai@8130 2262 block-end side | | | block-start side |
fantasai@7057 2263 | * vertical * inline| | height/
fantasai@7057 2264 | *writing mode* direction| | measure
fantasai@7057 2265 | V | |
fantasai@7057 2266 +------------------------------+ V
fantasai@7057 2267 bottom side/
fantasai@8130 2268 inline-end side
fantasai@7057 2269 </pre>
fantasai@7057 2270 </div>
fantasai@7057 2271
fantasai@7057 2272 <h3 id=line-directions><span class=secno>6.3. </span> Line-relative
fantasai@7057 2273 Directions</h3>
fantasai@7057 2274
fantasai@7057 2275 <p>The <dfn id=line-orientation>line orientation</dfn> determines which
fantasai@7057 2276 side of a line box is the logical “top” (ascender side). It is given
fantasai@7057 2277 by a combination of ‘<a href="#text-orientation0"><code
fantasai@7057 2278 class=property>text-orientation</code></a>’ and ‘<a
fantasai@7057 2279 href="#writing-mode1"><code class=property>writing-mode</code></a>’.
fantasai@7057 2280 Usually the line-relative “top” corresponds to the <a
fantasai@8130 2281 href="#block-start"><i>block-start</i></a> side, but this is not always
fantasai@7057 2282 the case: in Mongolian typesetting (and thus by default in ‘<a
fantasai@7057 2283 href="#vertical-lr"><code class=css>vertical-lr</code></a>’ writing
fantasai@7057 2284 modes), the line-relative “top” corresponds to the <a
fantasai@8130 2285 href="#block-end"><i>block-end</i></a> side. Hence the need for distinct
fantasai@8130 2286 terminology.
fantasai@7057 2287
fantasai@7057 2288 <div class=figure> <img alt="Mongolian mixed with English"
fantasai@7057 2289 src=mongolian-lr.jpg>
fantasai@7057 2290 <p class=caption>A primarily Mongolian document, such as the one above, is
fantasai@7057 2291 written in vertical lines stacking left to right, but lays its Latin text
fantasai@7057 2292 with the tops of the glyphs towards the right. This makes the text run in
fantasai@7057 2293 the same inline direction as Mongolian (top-to-bottom) and face the same
fantasai@7057 2294 direction it does in other East Asian layouts (which have vertical lines
fantasai@7057 2295 stacking right to left), but the glyphs' tops are facing the bottom of
fantasai@7057 2296 the line stack rather than the top, which in an English paragraph would
fantasai@7057 2297 be upside-down. (See this <a
fantasai@7057 2298 href="diagrams/text-flow-vectors-lr-reverse.svg">Diagram of Mongolian
fantasai@7057 2299 Text Layout</a>.)
fantasai@7057 2300 </div>
fantasai@7057 2301
fantasai@7057 2302 <p>In addition to a line-relative “top” and “bottom” to map things
fantasai@7057 2303 like ‘<code class=css>vertical-align: top</code>’, CSS also needs to
fantasai@7057 2304 refer to a line-relative “left” and “right” in order to map things
fantasai@7057 2305 like ‘<code class=css>text-align: left</code>’. Thus there are four
fantasai@7057 2306 <dfn id=line-relative-directions>line-relative directions</dfn>, which are
fantasai@7057 2307 defined relative to the <a href="#line-orientation"><i>line
fantasai@7057 2308 orientation</i></a> as follows:
fantasai@7057 2309
fantasai@7057 2310 <dl>
fantasai@7057 2311 <dt><dfn id=over>over</dfn>
fantasai@7057 2312
fantasai@7057 2313 <dd>Nominally the side that corresponds to the ascender side or “top”
fantasai@7057 2314 side of a line box. (The side overlines are typically drawn on.)
fantasai@7057 2315
fantasai@7057 2316 <dt><dfn id=under>under</dfn>
fantasai@7057 2317
fantasai@7057 2318 <dd>Opposite of <a href="#over"><i>over</i></a>: the line-relative
fantasai@7057 2319 “bottom” or descender side. (The side underlines are typically drawn
fantasai@7057 2320 on.)
fantasai@7057 2321
fantasai@7057 2322 <dt><dfn id=line-left>line-left</dfn>
fantasai@7057 2323
fantasai@7057 2324 <dd>Nominally the side from which <abbr title=left-to-right>LTR</abbr>
fantasai@7057 2325 text would start.
fantasai@7057 2326
fantasai@7057 2327 <dt><dfn id=line-right>line-right</dfn>
fantasai@7057 2328
fantasai@7057 2329 <dd>Nominally the side from which <abbr title=right-to-left>RTL</abbr>
fantasai@7057 2330 text would start. (Opposite of <a
fantasai@7057 2331 href="#line-left"><i>line-left</i></a>.)
fantasai@7057 2332 </dl>
fantasai@7057 2333
fantasai@7057 2334 <p>See the <a href="#logical-to-physical">table below</a> for the exact
fantasai@7057 2335 mappings between physical and line-relative directions.
fantasai@7057 2336
fantasai@7057 2337 <div class=figure> <a href="diagrams/line-orient-up.svg"
fantasai@7057 2338 type="image/svg+xml"> <img alt="Line orientation compass" class=landscape
fantasai@7057 2339 src="diagrams/line-orient-up.png"></a>
fantasai@7057 2340 <p class=caption>Line orientation compass
fantasai@7057 2341 </div>
fantasai@7057 2342
fantasai@7057 2343 <div class=figurepair>
fantasai@7057 2344 <div class=figure> <a href="diagrams/line-orient-right.svg"
fantasai@7057 2345 type="image/svg+xml"> <img alt="Typical orientation in vertical"
fantasai@7057 2346 class=portrait src="diagrams/line-orient-right.png"></a>
fantasai@7057 2347 <p class=caption>Typical orientation in vertical
fantasai@7057 2348 </div>
fantasai@7057 2349
fantasai@7057 2350 <div class=figure> <a href="diagrams/line-orient-left.svg"
fantasai@7057 2351 type="image/svg+xml"> <img
fantasai@7057 2352 alt="Line orientation with ''text-orientation: sideways-left''"
fantasai@7057 2353 class=portrait src="diagrams/line-orient-left.png"></a>
fantasai@7057 2354 <p class=caption>Line orientation with ‘<code
fantasai@7057 2355 class=css>text-orientation: sideways-left</code>’
fantasai@7057 2356 </div>
fantasai@7057 2357 </div>
fantasai@7057 2358
fantasai@7057 2359 <h3 id=logical-to-physical><span class=secno>6.4. </span>
fantasai@7057 2360 Abstract-to-Physical Mappings</h3>
fantasai@7057 2361
fantasai@7057 2362 <p>The following table summarizes the abstract-to-physical mappings:
fantasai@7057 2363
fantasai@7057 2364 <table class="complex data">
fantasai@7057 2365 <caption>Abstract-Physical Mapping</caption>
fantasai@7057 2366
fantasai@7057 2367 <colgroup class=header></colgroup>
fantasai@7057 2368
fantasai@7057 2369 <colgroup span=10></colgroup>
fantasai@7057 2370
fantasai@7057 2371 <thead>
fantasai@7057 2372 <tr>
fantasai@7057 2373 <th scope=row>‘<a href="#writing-mode1"><code
fantasai@7057 2374 class=property>writing-mode</code></a>’
fantasai@7057 2375
fantasai@7057 2376 <th colspan=2>‘<a href="#horizontal-tb"><code
fantasai@7057 2377 class=css>horizontal-tb</code></a>’
fantasai@7057 2378
fantasai@7057 2379 <th colspan=4>‘<a href="#vertical-rl"><code
fantasai@7057 2380 class=css>vertical-rl</code></a>’
fantasai@7057 2381
fantasai@7057 2382 <th colspan=4>‘<a href="#vertical-lr"><code
fantasai@7057 2383 class=css>vertical-lr</code></a>’
fantasai@7057 2384
fantasai@7057 2385 <tr>
fantasai@7057 2386 <th scope=row>‘<a href="#text-orientation0"><code
fantasai@7057 2387 class=property>text-orientation</code></a>’
fantasai@7057 2388
fantasai@7057 2389 <th colspan=2>—
fantasai@7057 2390
fantasai@7057 2391 <th colspan=2>‘<a href="#sideways-left"><code
fantasai@7057 2392 class=css>sideways-left</code></a>’
fantasai@7057 2393
fantasai@7057 2394 <th colspan=2><abbr title="mixed, upright, sideways-right">*right</abbr>
fantasai@7057 2395
fantasai@7057 2396 <th colspan=2>‘<a href="#sideways-left"><code
fantasai@7057 2397 class=css>sideways-left</code></a>’
fantasai@7057 2398
fantasai@7057 2399 <th colspan=2><abbr title="mixed, upright, sideways-right">*right</abbr>
fantasai@7057 2400
fantasai@7057 2401 <tr>
fantasai@7057 2402 <th scope=row>‘<a href="#direction0"><code
fantasai@7057 2403 class=property>direction</code></a>’
fantasai@7057 2404
fantasai@7057 2405 <th>‘<a href="#ltr"><code class=css>ltr</code></a>’
fantasai@7057 2406
fantasai@7057 2407 <th>‘<a href="#rtl"><code class=css>rtl</code></a>’
fantasai@7057 2408
fantasai@7057 2409 <th>‘<a href="#ltr"><code class=css>ltr</code></a>’
fantasai@7057 2410
fantasai@7057 2411 <th>‘<a href="#rtl"><code class=css>rtl</code></a>’
fantasai@7057 2412
fantasai@7057 2413 <th>‘<a href="#ltr"><code class=css>ltr</code></a>’
fantasai@7057 2414
fantasai@7057 2415 <th>‘<a href="#rtl"><code class=css>rtl</code></a>’
fantasai@7057 2416
fantasai@7057 2417 <th>‘<a href="#ltr"><code class=css>ltr</code></a>’
fantasai@7057 2418
fantasai@7057 2419 <th>‘<a href="#rtl"><code class=css>rtl</code></a>’
fantasai@7057 2420
fantasai@7057 2421 <th>‘<a href="#ltr"><code class=css>ltr</code></a>’
fantasai@7057 2422
fantasai@7057 2423 <th>‘<a href="#rtl"><code class=css>rtl</code></a>’
fantasai@7057 2424
fantasai@7057 2425 <tbody>
fantasai@7057 2426 <tr>
fantasai@7057 2427 <th scope=row>extent
fantasai@7057 2428
fantasai@7057 2429 <td colspan=2>height
fantasai@7057 2430
fantasai@7057 2431 <td colspan=8>width
fantasai@7057 2432
fantasai@7057 2433 <tr>
fantasai@7057 2434 <th scope=row>measure
fantasai@7057 2435
fantasai@7057 2436 <td colspan=2>width
fantasai@7057 2437
fantasai@7057 2438 <td colspan=8>height
fantasai@7057 2439
fantasai@7057 2440 <tr>
fantasai@8130 2441 <th scope=row>block-start
fantasai@7057 2442
fantasai@7057 2443 <td colspan=2>top
fantasai@7057 2444
fantasai@7057 2445 <td colspan=4>right
fantasai@7057 2446
fantasai@7057 2447 <td colspan=4>left
fantasai@7057 2448
fantasai@7057 2449 <tr>
fantasai@8130 2450 <th scope=row>block-end
fantasai@7057 2451
fantasai@7057 2452 <td colspan=2>bottom
fantasai@7057 2453
fantasai@7057 2454 <td colspan=4>left
fantasai@7057 2455
fantasai@7057 2456 <td colspan=4>right
fantasai@7057 2457
fantasai@7057 2458 <tr>
fantasai@8130 2459 <th scope=row>inline-start
fantasai@7057 2460
fantasai@7057 2461 <td>left
fantasai@7057 2462
fantasai@7057 2463 <td>right
fantasai@7057 2464
fantasai@7057 2465 <td>bottom
fantasai@7057 2466
fantasai@7057 2467 <td>top
fantasai@7057 2468
fantasai@7057 2469 <td>top
fantasai@7057 2470
fantasai@7057 2471 <td>bottom
fantasai@7057 2472
fantasai@7057 2473 <td>bottom
fantasai@7057 2474
fantasai@7057 2475 <td>top
fantasai@7057 2476
fantasai@7057 2477 <td>top
fantasai@7057 2478
fantasai@7057 2479 <td>bottom
fantasai@7057 2480
fantasai@7057 2481 <tr>
fantasai@8130 2482 <th scope=row>inline-end
fantasai@7057 2483
fantasai@7057 2484 <td>right
fantasai@7057 2485
fantasai@7057 2486 <td>left
fantasai@7057 2487
fantasai@7057 2488 <td>top
fantasai@7057 2489
fantasai@7057 2490 <td>bottom
fantasai@7057 2491
fantasai@7057 2492 <td>bottom
fantasai@7057 2493
fantasai@7057 2494 <td>top
fantasai@7057 2495
fantasai@7057 2496 <td>top
fantasai@7057 2497
fantasai@7057 2498 <td>bottom
fantasai@7057 2499
fantasai@7057 2500 <td>bottom
fantasai@7057 2501
fantasai@7057 2502 <td>top
fantasai@7057 2503
fantasai@7057 2504 <tbody>
fantasai@7057 2505 <tr>
fantasai@7057 2506 <th scope=row>over
fantasai@7057 2507
fantasai@7057 2508 <td colspan=2>top
fantasai@7057 2509
fantasai@7057 2510 <td colspan=2>left
fantasai@7057 2511
fantasai@7057 2512 <td colspan=2>right
fantasai@7057 2513
fantasai@7057 2514 <td colspan=2>left
fantasai@7057 2515
fantasai@7057 2516 <td colspan=2>right
fantasai@7057 2517
fantasai@7057 2518 <tr>
fantasai@7057 2519 <th scope=row>under
fantasai@7057 2520
fantasai@7057 2521 <td colspan=2>bottom
fantasai@7057 2522
fantasai@7057 2523 <td colspan=2>right
fantasai@7057 2524
fantasai@7057 2525 <td colspan=2>left
fantasai@7057 2526
fantasai@7057 2527 <td colspan=2>right
fantasai@7057 2528
fantasai@7057 2529 <td colspan=2>left
fantasai@7057 2530
fantasai@7057 2531 <tr>
fantasai@7057 2532 <th scope=row>line-left
fantasai@7057 2533
fantasai@7057 2534 <td colspan=2>left
fantasai@7057 2535
fantasai@7057 2536 <td colspan=2>bottom
fantasai@7057 2537
fantasai@7057 2538 <td colspan=2>top
fantasai@7057 2539
fantasai@7057 2540 <td colspan=2>bottom
fantasai@7057 2541
fantasai@7057 2542 <td colspan=2>top
fantasai@7057 2543
fantasai@7057 2544 <tr>
fantasai@7057 2545 <th scope=row>line-right
fantasai@7057 2546
fantasai@7057 2547 <td colspan=2>right
fantasai@7057 2548
fantasai@7057 2549 <td colspan=2>top
fantasai@7057 2550
fantasai@7057 2551 <td colspan=2>bottom
fantasai@7057 2552
fantasai@7057 2553 <td colspan=2>top
fantasai@7057 2554
fantasai@7057 2555 <td colspan=2>bottom
fantasai@7057 2556 </table>
fantasai@7057 2557
fantasai@7057 2558 <h2 id=abstract-layout><span class=secno>7. </span> Abstract Box Layout</h2>
fantasai@7057 2559
fantasai@7057 2560 <h3 id=vertical-layout><span class=secno>7.1. </span> Principles of Layout
fantasai@7057 2561 in Vertical Writing Modes</h3>
fantasai@7057 2562
fantasai@7057 2563 <p>CSS box layout in vertical writing modes is analogous to layout in the
fantasai@7057 2564 horizontal writing modes, following the principles outlined below:
fantasai@7057 2565
fantasai@7057 2566 <p>Layout calculation rules (such as those in CSS2.1, Section 10.3) that
fantasai@7057 2567 apply to the horizontal dimension in horizontal writing modes instead
fantasai@7057 2568 apply to the vertical dimension in vertical writing modes. Likewise,
fantasai@7057 2569 layout calculation rules (such as those in CSS2.1, Section 10.6) that
fantasai@7057 2570 apply to the vertical dimension in horizontal writing modes instead apply
fantasai@7057 2571 to the horizontal dimension in vertical writing modes. Thus:
fantasai@7057 2572
fantasai@7057 2573 <ul>
fantasai@7057 2574 <li>
fantasai@7057 2575 <p>Layout rules that refer to the width use the height instead, and vice
fantasai@7057 2576 versa.
fantasai@7057 2577
fantasai@7057 2578 <li>
fantasai@7057 2579 <p>Layout rules that refer to the ‘<code class=css>*-left</code>’ and
fantasai@7057 2580 ‘<code class=css>*-right</code>’ box properties (border, margin,
fantasai@7057 2581 padding) use ‘<code class=css>*-top</code>’ and ‘<code
fantasai@7057 2582 class=css>*-bottom</code>’ instead, and vice versa. Which side of the
fantasai@7057 2583 box the property applies to doesn't change: only which values are inputs
fantasai@7057 2584 to which layout calculations changes. The ‘<code
fantasai@7057 2585 class=property>margin-left</code>’ property still affects the lefthand
fantasai@7057 2586 margin, for example; however in a ‘<a href="#vertical-rl"><code
fantasai@7057 2587 class=css>vertical-rl</code></a>’ writing mode it takes part in margin
fantasai@7057 2588 collapsing in place of ‘<code class=property>margin-bottom</code>’.
fantasai@7057 2589
fantasai@7057 2590 <li>
fantasai@7057 2591 <p>Layout rules that depend on the ‘<a href="#direction0"><code
fantasai@7057 2592 class=property>direction</code></a>’ property to choose between left
fantasai@7057 2593 and right (e.g. overflow, overconstraint resolution, the initial value
fantasai@7057 2594 for ‘<code class=property>text-align</code>’, table column ordering)
fantasai@8130 2595 are abstracted to the <a href="#start"><i>start</i></a> and <a
fantasai@8130 2596 href="#end"><i>end</i></a> sides and applied appropriately.
fantasai@7057 2597 </ul>
fantasai@7057 2598
fantasai@7057 2599 <div class=example>
fantasai@7057 2600 <p>For example, in vertical writing modes, table rows are vertical and
fantasai@7057 2601 table columns are horizontal. In a ‘<a href="#vertical-rl"><code
fantasai@7057 2602 class=css>vertical-rl</code></a>’ ‘<a href="#mixed"><code
fantasai@7057 2603 class=css>mixed</code></a>’ ‘<a href="#rtl"><code
fantasai@7057 2604 class=css>rtl</code></a>’ table, the first column would be on the
fantasai@8130 2605 bottom (the <a href="#inline-start"><i>inline-start</i></a> side), and
fantasai@8130 2606 the first row on the right (the <a
fantasai@8130 2607 href="#block-start"><i>block-start</i></a> side). The table's ‘<code
fantasai@7057 2608 class=property>margin-right</code>’ and ‘<code
fantasai@7057 2609 class=property>margin-left</code>’ would collapse with margins before
fantasai@7057 2610 (on the right) and after (on the left) the table, respectively, and if
fantasai@7057 2611 the table had ‘<code class=css>auto</code>’ values for ‘<code
fantasai@7057 2612 class=property>margin-top</code>’ and ‘<code
fantasai@7057 2613 class=property>margin-bottom</code>’ it would be centered vertically
fantasai@7057 2614 within its block flow.
fantasai@7057 2615
fantasai@7057 2616 <div class=figure>
fantasai@7057 2617 <p><a href="diagrams/vertical-table.svg" type="image/svg+xml"> <img
fantasai@7057 2618 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."
fantasai@7057 2619 class=example src="diagrams/vertical-table.png"></a>
fantasai@7057 2620
fantasai@7057 2621 <p class=caption>Table in ‘<a href="#vertical-rl"><code
fantasai@7057 2622 class=css>vertical-rl</code></a>’ RTL writing mode
fantasai@7057 2623 </div>
fantasai@7057 2624 </div>
fantasai@7057 2625
fantasai@7057 2626 <p>For features such as text alignment, floating, and list marker
fantasai@7057 2627 positioning, that primarily reference the left or right sides of the line
fantasai@7057 2628 box or its longitudinal parallels and therefore have no top or bottom
fantasai@7057 2629 equivalent, the <a href="#line-left">line left</a> and <a
fantasai@7057 2630 href="#line-right">line right</a> sides are used as the reference for the
fantasai@7057 2631 left and right sides respectively.
fantasai@7057 2632
fantasai@7057 2633 <p>Likewise for features such as underlining, overlining, and baseline
fantasai@7057 2634 alignment (the unfortunately-named ‘<code
fantasai@7057 2635 class=property>vertical-align</code>’), that primarily reference the top
fantasai@7057 2636 or bottom sides of the linebox or its transversal parallels and therefore
fantasai@7057 2637 have no left or right equivalent, the <a href="#over">over</a> and <a
fantasai@7057 2638 href="#under">under</a> sides are used as the reference for the top and
fantasai@7057 2639 bottom sides respectively.
fantasai@7057 2640
fantasai@7057 2641 <p>The details of these mappings are provided below.
fantasai@7057 2642
fantasai@7057 2643 <h3 id=dimension-mapping><span class=secno>7.2. </span> Dimensional Mapping</h3>
fantasai@7057 2644 <!--
fantasai@7057 2645 <p>Properties that are named in terms of the x and y axes are
fantasai@7057 2646 logical with respect to the block flow direction rather than absolute
fantasai@7057 2647 with respect to the page. Specifically:
fantasai@7057 2648
fantasai@7057 2649 <ul>
fantasai@7057 2650 <li>The ''repeat-x'' keyword of 'background-repeat' tiles in the
fantasai@7057 2651 inline dimension of the element, which is not necessarily the
fantasai@7057 2652 horizontal dimension. [[!CSS21]] [[!CSS3BG]]
fantasai@7057 2653 <li>The ''repeat-y'' keyword of 'background-repeat' tiles in the
fantasai@7057 2654 block flow dimension of the element, which is not necessarily
fantasai@7057 2655 the vertical dimension. [[!CSS21]] [[!CSS3BG]]
fantasai@7057 2656 <li>The 'overflow-x' property controls overflow in the inline
fantasai@7057 2657 dimension of the element. [[!CSS3UI]]
fantasai@7057 2658 <li>The 'overflow-y' property controls overflow in the block
fantasai@7057 2659 flow dimension of the element. [[!CSS3UI]]
fantasai@7057 2660 </ul>
fantasai@7057 2661 -->
fantasai@7057 2662
fantasai@7057 2663 <p>Certain properties behave logically as follows:
fantasai@7057 2664
fantasai@7057 2665 <ul>
fantasai@7057 2666 <li>The first and second values of the ‘<code
fantasai@7057 2667 class=property>border-spacing</code>’ property represent spacing
fantasai@7057 2668 between columns and rows respectively, not necessarily the horizontal and
fantasai@7057 2669 vertical spacing respectively. <a href="#CSS21"
fantasai@7057 2670 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 2671
fantasai@7057 2672 <li>The ‘<code class=property>line-height</code>’ property always
fantasai@7057 2673 refers to the logical height. <a href="#CSS21"
fantasai@7057 2674 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 2675 </ul>
fantasai@7057 2676
fantasai@7057 2677 <p>The height properties (‘<code class=property>height</code>’,
fantasai@7057 2678 ‘<code class=property>min-height</code>’, and ‘<code
fantasai@7057 2679 class=property>max-height</code>’) refer to the physical height, and the
fantasai@7057 2680 width properties (‘<code class=property>width</code>’, ‘<code
fantasai@7057 2681 class=property>min-width</code>’, and ‘<code
fantasai@7057 2682 class=property>max-width</code>’) refer to the physical width. However,
fantasai@7057 2683 the rules used to calculate box dimensions and positions are logical.
fantasai@7057 2684
fantasai@7057 2685 <p>For example, the calculation rules in <a
fantasai@7057 2686 href="http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins">CSS2.1
fantasai@7057 2687 Section 10.3</a> are used for the inline dimension measurements: they
fantasai@7057 2688 apply to the measure (which could be either the physical width or physical
fantasai@8130 2689 height) and to the <a href="#inline-start"><i>inline-start</i></a> and <a
fantasai@8130 2690 href="#inline-end"><i>inline-end</i></a> margins, padding, and border.
fantasai@7057 2691 Likewise the calculation rules in <a
fantasai@7057 2692 href="http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins">CSS2.1
fantasai@7057 2693 Section 10.6</a> are used in the block dimension: they apply to the <a
fantasai@7057 2694 href="#extent"><i>extent</i></a> and to the <a
fantasai@8130 2695 href="#block-start"><i>block-start</i></a> and <a
fantasai@8130 2696 href="#block-end"><i>block-end</i></a> margins, padding, and border. <a
fantasai@8130 2697 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 2698
fantasai@7057 2699 <p>As a corollary, percentages on the margin and padding properties, which
fantasai@7057 2700 are always calculated with respect to the containing block width in
fantasai@7057 2701 CSS2.1, are calculated with respect to the <a
fantasai@7057 2702 href="#measure"><em>measure</em></a> of the containing block in CSS3.
fantasai@7057 2703
fantasai@7057 2704 <h3 id=orthogonal-flows><span class=secno>7.3. </span> Orthogonal Flows</h3>
fantasai@7057 2705
fantasai@7057 2706 <p>When an element has a different ‘<a href="#writing-mode1"><code
fantasai@7057 2707 class=property>writing-mode</code></a>’ from its containing block two
fantasai@7057 2708 cases are possible:
fantasai@7057 2709
fantasai@7057 2710 <ul>
fantasai@7057 2711 <li>The two writing modes are parallel to each other. (For example, ‘<a
fantasai@7057 2712 href="#vertical-rl"><code class=css>vertical-rl</code></a>’ and ‘<a
fantasai@7057 2713 href="#vertical-lr"><code class=css>vertical-lr</code></a>’).
fantasai@7057 2714
fantasai@7057 2715 <li>The two writing modes are perpendicular to each other. (For example,
fantasai@7057 2716 ‘<a href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’
fantasai@7057 2717 and ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’).
fantasai@7057 2718 </ul>
fantasai@7057 2719
fantasai@7057 2720 <p> When an element has a writing mode that is perpendicular to its
fantasai@7057 2721 containing block it is said to be in, or establish, an <dfn
fantasai@8478 2722 id=orthogonal-flow
fantasai@8478 2723 title="establish an orthogonal flow | orthogonal flow">orthogonal
fantasai@8478 2724 flow</dfn>.
fantasai@7057 2725
fantasai@7057 2726 <p> To handle this case, CSS layout calculations are divided into two
fantasai@7057 2727 phases: sizing a box, and positioning the box within its flow.
fantasai@7057 2728
fantasai@7057 2729 <ul>
fantasai@7057 2730 <li> In the sizing phase—calculating the width and height of the
fantasai@7057 2731 box—the dimensions of the box and the containing block are mapped to
fantasai@7057 2732 the measure and extent and calculations are performed accordingly using
fantasai@7057 2733 the writing mode of the <em>element</em>.
fantasai@7057 2734
fantasai@7057 2735 <li> In the positioning phase—calculating the positioning offsets,
fantasai@7057 2736 margins, borders, and padding—the dimensions of the box and its
fantasai@7057 2737 containing block are mapped to the measure and extent and calculations
fantasai@7057 2738 are performed according to the writing mode of the <em>containing
fantasai@7057 2739 block</em>.
fantasai@7057 2740 </ul>
fantasai@7057 2741
fantasai@7057 2742 <p>Since ‘<code class=css>auto</code>’ margins are resolved consistent
fantasai@8478 2743 with the containing block's writing mode, a box establishing an <a
fantasai@8478 2744 href="#orthogonal-flow"><i>orthogonal flow</i></a> can, once sized, be
fantasai@8478 2745 aligned or centered within its containing block just like other
fantasai@8478 2746 block-level elements by using auto margins.
fantasai@7057 2747
fantasai@7057 2748 <div class=example>
fantasai@7057 2749 <p> For example, if a vertical block is placed inside a horizontal block,
fantasai@7057 2750 then when calculating the physical height (which is the measure) of the
fantasai@7057 2751 child block the physical height of the parent block is used as the
fantasai@7057 2752 child's containing block measure, even though the physical height is the
fantasai@7057 2753 extent, not the measure, of the parent block.
fantasai@7057 2754
fantasai@7057 2755 <p> On the other hand, because the containing block is in a horizontal
fantasai@7057 2756 writing mode, the vertical margins on the child participate in
fantasai@7057 2757 margin-collapsing, even though they are in the inline-axis of the child,
fantasai@7057 2758 and horizontal auto margins will expand to fill the containing block,
fantasai@7057 2759 even though they are in the block-axis of the child.
fantasai@7057 2760
fantasai@7057 2761 <p class=issue> Add a picture.
fantasai@7057 2762 </div>
fantasai@7057 2763
fantasai@7057 2764 <p>It is common in CSS for a containing block to have a definite measure,
fantasai@7057 2765 but not a definite extent. This typically happens in CSS2.1 when a
fantasai@7057 2766 containing block has an ‘<code class=css>auto</code>’ height, for
fantasai@7057 2767 example: its width is given by the calculations in <a
fantasai@7057 2768 href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>, but
fantasai@7057 2769 its extent depends on its contents. In such cases the <i>available
fantasai@7057 2770 measure</i> is defined as the measure of the containing block; but the
fantasai@7057 2771 <i>available extent</i>, which would otherwise be the extent of the
fantasai@7057 2772 containing block, is infinite.
fantasai@7057 2773
fantasai@8478 2774 <p>Putting a box in an <a href="#orthogonal-flow"><i>orthogonal
fantasai@8478 2775 flow</i></a> allows the opposite to happen: for the <i>available
fantasai@7057 2776 extent</i> to be defined, but the <i>available measure</i> to be
fantasai@7057 2777 indefinite. In such cases a percentage of the containing block measure
fantasai@7057 2778 cannot be defined, and inline-axis computations cannot be resolved. In
fantasai@7057 2779 these cases, the initial containing block's size is used as a
fantasai@7057 2780 <i>fallback</i> variable in place of the <i>available measure</i> for
fantasai@7057 2781 calculations that require a definite <i>available measure</i>.
fantasai@7057 2782
fantasai@7057 2783 <h4 id=orthogonal-auto><span class=secno>7.3.1. </span> Auto-sizing in
fantasai@7057 2784 Orthogonal Flows</h4>
fantasai@7057 2785
fantasai@7057 2786 <p class=issue> This section needs careful review for whether it is a)
fantasai@7057 2787 correct and b) sensible.
fantasai@7057 2788
fantasai@7057 2789 <p> If the UA does not support CSS Multi-column Layout <a href="#CSS3COL"
fantasai@7057 2790 rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> and the element is a
fantasai@7057 2791 block container, when the computed measure of the element establishing an
fantasai@7057 2792 orthogonal flow is ‘<code class=css>auto</code>’, then the used inner
fantasai@7057 2793 measure is calculated as:
fantasai@7057 2794
fantasai@7057 2795 <p> <code>min(<var>max-content</var>, max(<var>min-content</var>,
fantasai@7057 2796 min(<var>fill-available</var>, <var>fill-fallback</var>)))</code>, where:
fantasai@7057 2797
fantasai@7057 2798 <dl>
fantasai@7057 2799 <dt><var>min-content</var>
fantasai@7057 2800
fantasai@7057 2801 <dd>the <a
fantasai@7057 2802 href="http://www.w3.org/TR/css3-sizing/#min-content-measure">min-content
fantasai@7057 2803 measure</a> of the element
fantasai@7057 2804
fantasai@7057 2805 <dt><var>max-content</var>
fantasai@7057 2806
fantasai@7057 2807 <dd>the <a
fantasai@7057 2808 href="http://www.w3.org/TR/css3-sizing/#max-content-measure">max-content
fantasai@7057 2809 measure</a> of the element
fantasai@7057 2810
fantasai@7057 2811 <dt><var>fill-available</var>
fantasai@7057 2812
fantasai@7057 2813 <dd>the <a
fantasai@7057 2814 href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available
fantasai@7057 2815 fit</a> into the element's containing block's size in the element's
fantasai@7057 2816 inline axis
fantasai@7057 2817
fantasai@7057 2818 <dt><var>fill-fallback</var>
fantasai@7057 2819
fantasai@7057 2820 <dd>the <a
fantasai@7057 2821 href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available
fantasai@7057 2822 fit</a> into the initial containing block's size in the element's inline
fantasai@7057 2823 axis
fantasai@7057 2824 </dl>
fantasai@7057 2825
fantasai@7057 2826 <p> See <a href="#CSS3-SIZING"
fantasai@7057 2827 rel=biblioentry>[CSS3-SIZING]<!--{{!CSS3-SIZING}}--></a> for further
fantasai@7057 2828 details.
fantasai@7057 2829
fantasai@7057 2830 <h4 id=orthogonal-multicol><span class=secno>7.3.2. </span> Multi-column
fantasai@7057 2831 Layout in Orthogonal Flows</h4>
fantasai@7057 2832
fantasai@7057 2833 <p> If the UA supports CSS Multi-column Layout <a href="#CSS3COL"
fantasai@7057 2834 rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> and the element is a
fantasai@7057 2835 block container or multi-column element, for the case where the element's
fantasai@7057 2836 extent or available extent is <i>definite</i> but the element's measure is
fantasai@7057 2837 ‘<code class=css>auto</code>’:
fantasai@7057 2838
fantasai@7057 2839 <ol>
fantasai@7057 2840 <li> If ‘<code class=property>column-count</code>’ and ‘<code
fantasai@7057 2841 class=property>column-width</code>’ are both ‘<code
fantasai@7057 2842 class=css>auto</code>’, calculate the used ‘<code
fantasai@7057 2843 class=property>column-width</code>’ as the inner measure for ‘<code
fantasai@7057 2844 class=css>auto</code>’-sized elements, as defined above.
fantasai@7057 2845
fantasai@7057 2846 <li> If the columns' extent is <i>indefinite</i>, the <i>fill-available
fantasai@7057 2847 extent</i> of the element is used.
fantasai@7057 2848
fantasai@7057 2849 <li> The used ‘<code class=property>column-count</code>’ then follows
fantasai@7057 2850 from filling the resulting columns with the element's content.
fantasai@7057 2851 </ol>
fantasai@7057 2852
fantasai@7057 2853 <p> The used measure of the resulting multi-column element is then
fantasai@7057 2854 calculated: if the content neither line-wraps nor fragments within the
fantasai@7057 2855 multi-column element, then the used measure is the <i>max-content
fantasai@7057 2856 measure</i> of the element's contents; else it is calculated from the used
fantasai@7057 2857 ‘<code class=property>column-width</code>’, ‘<code
fantasai@7057 2858 class=property>column-count</code>’, and ‘<code
fantasai@7057 2859 class=property>column-gap</code>’.
fantasai@7057 2860
fantasai@7057 2861 <p> The used extent of the element is either the used column extent (if
fantasai@7057 2862 multiple columns were used) or the <i>max-content extent</i> of the
fantasai@7057 2863 content.
fantasai@7057 2864
fantasai@7057 2865 <p class=note>This should behave the same as the auto-sizing algorithm
fantasai@7057 2866 defined in the previous section, except overflowing content, instead of
fantasai@7057 2867 continuing off the side of the containing block, is wrapped into columns
fantasai@7057 2868 in the flow direction of the containing block, thus avoiding T-shaped
fantasai@7057 2869 documents.
fantasai@7057 2870
fantasai@7057 2871 <h4 id=orthogonal-pagination><span class=secno>7.3.3. </span> Fragmenting
fantasai@7057 2872 Orthogonal Flows</h4>
fantasai@7057 2873
fantasai@7057 2874 <p><em>This section is informative.</em>
fantasai@7057 2875
fantasai@7057 2876 <p>With regards to fragmentation, the rules in CSS2.1 still hold in
fantasai@7057 2877 vertical writing modes and orthogonal flows: break opportunities do not
fantasai@7057 2878 occur inside line boxes, only between them. UAs that support <a
fantasai@7057 2879 href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> may break
fantasai@7057 2880 in the (potentially zero-width) gap between columns, however.
fantasai@7057 2881
fantasai@7057 2882 <p>Note that if content spills outside the pagination stream established by
fantasai@7057 2883 the root element, the UA is not required to print such content. Authors
fantasai@7057 2884 wishing to mix writing modes with long streams of text are thus encouraged
fantasai@7057 2885 to use CSS columns to keep all content flowing in the document's
fantasai@7057 2886 pagination direction.
fantasai@7057 2887
fantasai@7057 2888 <div class=note>
fantasai@7057 2889 <p>In other words, if your document would require two scrollbars on the
fantasai@7057 2890 screen it probably won't all print. Fix your layout, e.g. by using <a
fantasai@7057 2891 href="http://www.w3.org/TR/css3-multicol/">columns</a> so that it all
fantasai@7057 2892 scrolls (and therefore paginates) in one direction if you want to make
fantasai@7057 2893 sure it'll all print. T-shaped documents tend not to print well.
fantasai@7057 2894 </div>
fantasai@7057 2895
fantasai@7057 2896 <h3 id=logical-direction-layout><span class=secno>7.4. </span>
fantasai@7057 2897 Flow-Relative Mappings</h3>
fantasai@7057 2898
fantasai@7057 2899 <p>Flow-relative directions are calculated with respect to the writing mode
fantasai@7057 2900 of the <em>containing block</em> of the element and used to abstract
fantasai@7057 2901 layout rules related to the box properties (margins, borders, padding) and
fantasai@7057 2902 any properties related to positioning the box within its containing block
fantasai@7057 2903 (‘<code class=property>float</code>’, ‘<code
fantasai@7057 2904 class=property>clear</code>’, ‘<code class=property>top</code>’,
fantasai@7057 2905 ‘<code class=property>bottom</code>’, ‘<code
fantasai@7057 2906 class=property>left</code>’, ‘<code class=property>right</code>’)
fantasai@7057 2907 For inline-level elements, the writing mode of the <em>parent element</em>
fantasai@7057 2908 is used instead.
fantasai@7057 2909
fantasai@7057 2910 <p>For example, the margin that is dropped when a box's inline dimension is
fantasai@7057 2911 <a
fantasai@7057 2912 href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">over-constrained</a>
fantasai@7057 2913 is the end margin as determined by the writing mode of the containing
fantasai@7057 2914 block.
fantasai@7057 2915
fantasai@7057 2916 <p>The <a
fantasai@7057 2917 href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">margin
fantasai@7057 2918 collapsing rules</a> apply exactly with the <em><a
fantasai@8130 2919 href="#block-start"><i>block-start</i></a> margin</em> substituted for the
fantasai@8130 2920 top margin and the <em><a href="#block-end"><i>block-end</i></a>
fantasai@7057 2921 margin</em> substituted for the bottom margin. Similarly the <a
fantasai@8130 2922 href="#block-start"><i>block-start</i></a> padding and border are
fantasai@7057 2923 substituted for the top padding and border, and the <a
fantasai@8130 2924 href="#block-end"><i>block-end</i></a> padding and border substituted for
fantasai@8130 2925 the bottom padding and border. Note this means only <a
fantasai@8130 2926 href="#block-start"><i>block-start</i></a> and <a
fantasai@8130 2927 href="#block-end"><i>block-end</i></a> margins ever collapse.
fantasai@7057 2928
fantasai@7057 2929 <p>Flow-relative directions are calculated with respect to the writing mode
fantasai@7057 2930 of the element and used to abstract layout related to the element's
fantasai@7057 2931 contents:
fantasai@7057 2932
fantasai@7057 2933 <ul>
fantasai@7057 2934 <li>The initial value of the ‘<code class=property>text-align</code>’
fantasai@8130 2935 property aligns to the <a href="#start"><i>start</i></a> edge of the line
fantasai@8130 2936 box.
fantasai@7057 2937
fantasai@7057 2938 <li>The ‘<code class=property>text-indent</code>’ property indents
fantasai@8130 2939 from the <a href="#start"><i>start</i></a> edge of the line box.
fantasai@8130 2940
fantasai@8130 2941 <li>For tables, the ordering of columns begins on the <a
fantasai@8130 2942 href="#inline-start"><i>inline-start</i></a> side of the table, and the
fantasai@8130 2943 ordering of rows begins on the <a
fantasai@8130 2944 href="#block-start"><i>block-start</i></a> side of the table.
fantasai@7057 2945 </ul>
fantasai@7057 2946
fantasai@7057 2947 <h3 id=line-mappings><span class=secno>7.5. </span> Line-Relative Mappings</h3>
fantasai@7057 2948
fantasai@7057 2949 <p>The <dfn id=line-relative-directions0>line-relative directions</dfn> are
fantasai@7057 2950 <a href="#over">over</a>, <a href="#under">under</a>, <a
fantasai@7057 2951 href="#line-left">line-left</a>, and <a href="#line-right">line-right</a>.
fantasai@7057 2952 In an <abbr title=left-to-right>LTR</abbr> ‘<a
fantasai@7057 2953 href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ writing
fantasai@7057 2954 mode, they correspond to the top, bottom, left, and right directions,
fantasai@7057 2955 respectively.
fantasai@7057 2956
fantasai@7057 2957 <p>The line-right and line-left directions are calculated with respect to
fantasai@7057 2958 the writing mode of the element and used to interpret the ‘<code
fantasai@7057 2959 class=css>left</code>’ and ‘<code class=css>right</code>’ values of
fantasai@7057 2960 the following properties:
fantasai@7057 2961
fantasai@7057 2962 <ul>
fantasai@7057 2963 <li>the ‘<code class=property>text-align</code>’ property <a
fantasai@7057 2964 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 2965 </ul>
fantasai@7057 2966
fantasai@7057 2967 <p>The line-right and line-left directions are calculated with respect to
fantasai@7057 2968 the writing mode of the <em>containing block</em> of the element and used
fantasai@7057 2969 to interpret the ‘<code class=css>left</code>’ and ‘<code
fantasai@7057 2970 class=css>right</code>’ values of the following properties:
fantasai@7057 2971
fantasai@7057 2972 <ul>
fantasai@7057 2973 <li>the ‘<code class=property>float</code>’ property <a href="#CSS21"
fantasai@7057 2974 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 2975
fantasai@7057 2976 <li>the ‘<code class=property>clear</code>’ property <a href="#CSS21"
fantasai@7057 2977 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 2978 </ul>
fantasai@7057 2979
fantasai@7057 2980 <p>The over and under directions are calculated with respect to the writing
fantasai@7057 2981 mode of the element and used to define the interpretation of the "top"
fantasai@7057 2982 (over edge) and "bottom" (under edge) of the line box as follows:
fantasai@7057 2983
fantasai@7057 2984 <ul>
fantasai@7057 2985 <li>For the ‘<code class=property>vertical-align</code>’ property, the
fantasai@7057 2986 "top" of the line box is the over edge; the "bottom" of the line box is
fantasai@7057 2987 the under edge. Positive length and percentage values shift the baseline
fantasai@7057 2988 towards the over edge. <a href="#CSS21"
fantasai@7057 2989 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 2990
fantasai@7057 2991 <li>For the ‘<code class=property>text-decoration</code>’ property,
fantasai@7057 2992 the underline is drawn on the under side of the text; the overline is
fantasai@7057 2993 drawn on the over side of the text. <a href="#CSS21"
fantasai@7057 2994 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <span class=note>Note that
fantasai@7057 2995 the CSS Text Module defines this in more detail and provides additional
fantasai@7057 2996 controls for controlling the position of underlines and overlines. <a
fantasai@7057 2997 href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a></span>
fantasai@7057 2998 </ul>
fantasai@7057 2999
fantasai@7057 3000 <h3 id=physical-only><span class=secno>7.6. </span> Purely Physical
fantasai@7057 3001 Mappings</h3>
fantasai@7057 3002
fantasai@7057 3003 <p>The following values are purely physical in their definitions and do not
fantasai@7057 3004 respond to changes in writing mode:
fantasai@7057 3005
fantasai@7057 3006 <ul>
fantasai@7057 3007 <li>the ‘<code class=css>rect()</code>’ notation of the ‘<code
fantasai@7057 3008 class=property>clip</code>’ property <a href="#CSS21"
fantasai@7057 3009 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 3010
fantasai@7057 3011 <li>the background properties <a href="#CSS21"
fantasai@7057 3012 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <a href="#CSS3BG"
fantasai@7057 3013 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
fantasai@7057 3014
fantasai@7057 3015 <li>the border-image properties <a href="#CSS3BG"
fantasai@7057 3016 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
fantasai@7057 3017
fantasai@7057 3018 <li>the offsets of the ‘<code class=property>box-shadow</code>’ and
fantasai@7057 3019 ‘<code class=property>text-shadow</code>’ properties
fantasai@7057 3020 </ul>
fantasai@7057 3021
fantasai@7057 3022 <h3 id=caption-side><span class=secno>7.7. </span> Table Caption Mappings:
fantasai@7057 3023 the ‘<code class=property>caption-side</code>’ keywords</h3>
fantasai@7057 3024
fantasai@7057 3025 <table class=propdef>
fantasai@7057 3026 <tbody>
fantasai@7057 3027 <tr>
fantasai@7057 3028 <th>Property:
fantasai@7057 3029
fantasai@7057 3030 <td>‘<code class=property>caption-side</code>’
fantasai@7057 3031
fantasai@7057 3032 <tr>
fantasai@7057 3033 <th>New Values:
fantasai@7057 3034
fantasai@8446 3035 <td>‘<a href="#block-start"><code class=css>block-start</code></a>’
fantasai@8446 3036 | ‘<a href="#block-end"><code class=css>block-end</code></a>’
fantasai@7057 3037
fantasai@7057 3038 <tr>
fantasai@7057 3039 <th>Initial:
fantasai@7057 3040
fantasai@8161 3041 <td>start
fantasai@7057 3042
fantasai@7057 3043 <tr>
fantasai@7057 3044 <th>Applies to:
fantasai@7057 3045
fantasai@7057 3046 <td>same as CSS2.1
fantasai@7057 3047
fantasai@7057 3048 <tr>
fantasai@7057 3049 <th>Inherited:
fantasai@7057 3050
fantasai@7057 3051 <td>same as CSS2.1
fantasai@7057 3052
fantasai@7057 3053 <tr>
fantasai@7057 3054 <th>Percentages:
fantasai@7057 3055
fantasai@7057 3056 <td>same as CSS2.1
fantasai@7057 3057
fantasai@7057 3058 <tr>
fantasai@7057 3059 <th>Media:
fantasai@7057 3060
fantasai@7057 3061 <td>same as CSS2.1
fantasai@7057 3062
fantasai@7057 3063 <tr>
fantasai@7057 3064 <th>Computed value:
fantasai@7057 3065
fantasai@7057 3066 <td>specified value
fantasai@7057 3067 </table>
fantasai@7057 3068
fantasai@7057 3069 <p>This module introduces two new values to the ‘<code
fantasai@8446 3070 class=property>caption-side</code>’ property: ‘<a
fantasai@8446 3071 href="#block-start"><code class=css>block-start</code></a>’ and ‘<a
fantasai@8446 3072 href="#block-end"><code class=css>block-end</code></a>’, which position
fantasai@8446 3073 the caption before and after the table box, respectively. For tables with
fantasai@8446 3074 ‘<a href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’
fantasai@8446 3075 writing mode, they are equivalent to the existing ‘<code
fantasai@8446 3076 class=css>top</code>’ and ‘<code class=css>bottom</code>’ values,
fantasai@8446 3077 respectively. <a href="#CSS21"
fantasai@8446 3078 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
fantasai@7057 3079
fantasai@7057 3080 <p class=note>For implementations that support the ‘<code
fantasai@8446 3081 class=css>top-outside</code>’ and ‘<code
fantasai@8446 3082 class=css>bottom-outside</code>’ model, corresponding ‘<code
fantasai@8446 3083 class=css>start-outside</code>’ and ‘<code
fantasai@8446 3084 class=css>end-outside</code>’ are similarly introduced.
fantasai@7057 3085
fantasai@7057 3086 <p>Implementations that support the ‘<code class=css>top</code>’ and
fantasai@7057 3087 ‘<code class=css>bottom</code>’ values of the ‘<code
fantasai@7057 3088 class=property>caption-side</code>’ property but do not support side
fantasai@7057 3089 captions (i.e. ‘<code class=css>left</code>’ and ‘<code
fantasai@7057 3090 class=css>right</code>’ captions in horizontal writing modes) must treat
fantasai@8446 3091 both ‘<code class=css>top</code>’ and ‘<code
fantasai@8446 3092 class=css>bottom</code>’ as ‘<a href="#block-start"><code
fantasai@8446 3093 class=css>block-start</code></a>’, when the table is in a vertical
fantasai@8446 3094 writing mode.
fantasai@7057 3095
fantasai@7057 3096 <p>For implementations that do support side captions (i.e. the ‘<code
fantasai@7057 3097 class=css>left</code>’ and ‘<code class=css>right</code>’ values
fantasai@7057 3098 from the obsolete CSS 2.0 specification <a href="#CSS2"
fantasai@7057 3099 rel=biblioentry>[CSS2]<!--{{CSS2}}--></a>), this module also introduces
fantasai@8161 3100 the ‘<a href="#inline-start"><code class=css>inline-start</code></a>’
fantasai@8161 3101 and ‘<a href="#inline-end"><code class=css>inline-end</code></a>’
fantasai@8161 3102 values, which behave similarly and which position the caption on the <a
fantasai@8130 3103 href="#inline-start"><i>inline-start</i></a> and <a
fantasai@8130 3104 href="#inline-end"><i>inline-end</i></a> sides of the table box,
fantasai@8130 3105 calculated with respect to the writing mode of the table element. For such
fantasai@8130 3106 implementations, the ‘<code class=css>top</code>’ and ‘<code
fantasai@8130 3107 class=css>bottom</code>’ values must place the caption on the top and
fantasai@8130 3108 bottom sides of the table box, respectively.
fantasai@7057 3109
fantasai@7057 3110 <p class=note>The CSS2.0 side caption model had some <a
fantasai@7057 3111 href="http://lists.w3.org/Archives/Public/www-style/2002Dec/0142.html">problems</a>
fantasai@7057 3112 and will likely have a different definition in CSS3.</p>
fantasai@7057 3113 <!--
fantasai@7057 3114 <h3 id="html-attributes">HTML Attributes</h3>
fantasai@7057 3115
fantasai@7057 3116 <p>This section defines the mapping of HTML presentational attributes
fantasai@7057 3117 in CSS. This section is normative for user agents supporting HTML
fantasai@7057 3118 in addition to the 'writing-mode' property. [[!HTML40]] [[!HTML5]]
fantasai@7057 3119
fantasai@7057 3120 <h4 id="width-height-attributes">The <code>width</code> and <code>height</code> attributes</h4>
fantasai@7057 3121
fantasai@7057 3122 <p>The HTML <code>width</code> and <code>height</code> attributes refer
fantasai@7057 3123 to the physical width and height for elements that that are replaced,
fantasai@7057 3124 i.e.
fantasai@7057 3125 <code>&lt;applet&gt;</code>,
fantasai@7057 3126 <code>&lt;embed&gt;</code>,
fantasai@7057 3127 <code>&lt;iframe&gt;</code>,
fantasai@7057 3128 <code>&lt;img&gt;</code>,
fantasai@7057 3129 <code>&lt;object&gt;</code>,
fantasai@7057 3130 <code>&lt;canvas&gt;</code>,
fantasai@7057 3131 and
fantasai@7057 3132 <code>&lt;video&gt;</code>
fantasai@7057 3133
fantasai@7057 3134 <p>Form elements elements contain text, therefore their contents should be
fantasai@7057 3135 affected by writing mode, in which case these attributes refer to the
fantasai@7057 3136 <em>logical</em> width and height. The UA may, however, choose not
fantasai@7057 3137 to rotate nor flip these elements in vertical writing modes if it is not
fantasai@7057 3138 capable, and in that case, these attributes remain physical.</p>
fantasai@7057 3139 <p class="issue">when not to rotate form elements/MathML,
fantasai@7057 3140 should treat them as images (always upright)
fantasai@7057 3141 or to force writing-mode to always calculate to horizontal-tb?</p>
fantasai@7057 3142
fantasai@7057 3143 <p>On table-related elements (<code>&lt;table&gt;</code>, <code>&lt;colgroup&gt;</code>,
fantasai@7057 3144 <code>&lt;col&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;th&gt;</code>,
fantasai@7057 3145 <code>&lt;td&gt;</code>) the <code>width</code> and <code>height</code>
fantasai@7057 3146 attributes are always logical.
fantasai@7057 3147
fantasai@7057 3148 <p>The <code>size</code> attribute of the <code>&lt;hr&gt;</code> element
fantasai@7057 3149 is also logical (refers to the logical height).
fantasai@7057 3150
fantasai@7057 3151 <h4 id="alignment-attributes">Alignment, Float and Clear Attributes</h4>
fantasai@7057 3152
fantasai@7057 3153 <p>The following attributes behave the same way as their corresponding
fantasai@7057 3154 CSS properties:</p>
fantasai@7057 3155
fantasai@7057 3156 <ul>
fantasai@7057 3157 <li><code>align</code> as 'float' or 'text-align'</li>
fantasai@7057 3158 <li><code>clear</code> as 'clear'</li>
fantasai@7057 3159 <li><code>valign</code> as 'vertical-align'</li>
fantasai@7057 3160 </ul>
fantasai@7057 3161
fantasai@7057 3162 <h4 id="spacing-attributes">Spacing Attributes</h4>
fantasai@7057 3163
fantasai@7057 3164 <p>The following attributes are logical and, as margins, are logical
fantasai@7057 3165 with respect to the writing mode of the <em>parent</em> element.</p>
fantasai@7057 3166
fantasai@7057 3167 <ul>
fantasai@8130 3168 <li><code>hspace</code> as inline-start and inline-end margins</li>
fantasai@8130 3169 <li><code>vspace</code> as block-start and block-end margins</li>
fantasai@7057 3170 <li>marginwidth</li>
fantasai@7057 3171 <li>marginheight</li>
fantasai@7057 3172 </ul>
fantasai@7057 3173 -->
fantasai@7057 3174
fantasai@7057 3175 <h2 id=page-direction><span class=secno>8. </span> Page Flow: the page
fantasai@7057 3176 progression direction</h2>
fantasai@7057 3177
fantasai@7057 3178 <p>In paged media CSS2.1 classifies all pages as either left or right
fantasai@7057 3179 pages. The page progression direction, which determines whether the left
fantasai@7057 3180 or right page in a spread is first in the flow and whether the first page
fantasai@7057 3181 is by default a left or right page, depends on the writing direction as
fantasai@7057 3182 follows:
fantasai@7057 3183
fantasai@7057 3184 <ul>
fantasai@7057 3185 <li>The page progression is right-to-left if the root element's ‘<a
fantasai@7057 3186 href="#writing-mode1"><code class=property>writing-mode</code></a>’ is
fantasai@7057 3187 ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’ or if
fantasai@7057 3188 the root element's ‘<a href="#writing-mode1"><code
fantasai@7057 3189 class=property>writing-mode</code></a>’ is ‘<a
fantasai@7057 3190 href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ and its
fantasai@7057 3191 ‘<a href="#direction0"><code class=property>direction</code></a>’ is
fantasai@7057 3192 ‘<a href="#rtl"><code class=css>rtl</code></a>’.
fantasai@7057 3193
fantasai@7057 3194 <li>The page progression is left-to-right if the root element's ‘<a
fantasai@7057 3195 href="#writing-mode1"><code class=property>writing-mode</code></a>’ is
fantasai@7057 3196 ‘<a href="#vertical-lr"><code class=css>vertical-lr</code></a>’ or if
fantasai@7057 3197 the root element's ‘<a href="#writing-mode1"><code
fantasai@7057 3198 class=property>writing-mode</code></a>’ is ‘<a
fantasai@7057 3199 href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ and its
fantasai@7057 3200 ‘<a href="#direction0"><code class=property>direction</code></a>’ is
fantasai@7057 3201 ‘<a href="#ltr"><code class=css>ltr</code></a>’.
fantasai@7057 3202 </ul>
fantasai@7057 3203
fantasai@7057 3204 <p>(Unless otherwise overridden, the first page of a document begins on the
fantasai@7057 3205 second half of a spread, e.g. on the right page in a left-to-right page
fantasai@7057 3206 progression.)
fantasai@7057 3207
fantasai@7057 3208 <h2 id=text-combine><span class=secno>9. </span> Glyph Composition</h2>
fantasai@7057 3209
fantasai@7057 3210 <h3 id=text-combine-horizontal><span class=secno>9.1. </span>
fantasai@7057 3211 Horizontal-in-Vertical Composition: the ‘<a
fantasai@7057 3212 href="#text-combine-horizontal0"><code
fantasai@7057 3213 class=property>text-combine-horizontal</code></a>’ property</h3>
fantasai@7057 3214
fantasai@7057 3215 <table class=propdef>
fantasai@7057 3216 <tbody>
fantasai@7057 3217 <tr>
fantasai@7057 3218 <th>Name:
fantasai@7057 3219
fantasai@7057 3220 <td><dfn id=text-combine-horizontal0>text-combine-horizontal</dfn>
fantasai@7057 3221
fantasai@7057 3222 <tr>
fantasai@7057 3223 <th><a href="#values">Value</a>:
fantasai@7057 3224
kojiishi@7378 3225 <td>none | all | [ digits &lt;integer>? ] <!--
fantasai@7057 3226 | [ [ numeric &lt;integer> | digits &lt;integer> ]
fantasai@7057 3227 || [ alpha &lt;integer> | latin &lt;integer> ]
fantasai@7057 3228 || alphanumeric &lt;integer> ]
fantasai@7057 3229 -->
fantasai@7057 3230
fantasai@7057 3231 <tr>
fantasai@7057 3232 <th>Initial:
fantasai@7057 3233
fantasai@7057 3234 <td>none
fantasai@7057 3235
fantasai@7057 3236 <tr>
fantasai@7057 3237 <th>Applies to:
fantasai@7057 3238
fantasai@7057 3239 <td>non-replaced inline elements
fantasai@7057 3240
fantasai@7057 3241 <tr>
fantasai@7057 3242 <th>Inherited:
fantasai@7057 3243
fantasai@8670 3244 <td><a class=issue
fantasai@8670 3245 href="http://lists.w3.org/Archives/Public/www-style/2013Jul/0154.html">???</a>
fantasai@7057 3246
fantasai@7057 3247 <tr>
fantasai@7057 3248 <th>Percentages:
fantasai@7057 3249
fantasai@7057 3250 <td>N/A
fantasai@7057 3251
fantasai@7057 3252 <tr>
fantasai@7057 3253 <th>Media:
fantasai@7057 3254
fantasai@7057 3255 <td>visual
fantasai@7057 3256
fantasai@7057 3257 <tr>
fantasai@7057 3258 <th>Computed value:
fantasai@7057 3259
fantasai@7057 3260 <td>specified value
fantasai@7057 3261 </table>
fantasai@7057 3262
fantasai@7057 3263 <p>This property allows the combination of multiple characters into the
fantasai@7057 3264 space of a single character. This property only has an effect in vertical
fantasai@7057 3265 writing modes. Values have the following meanings:
fantasai@7057 3266
fantasai@7057 3267 <dl>
fantasai@7057 3268 <dt><dfn id=none title="text-combine-horizontal:none">none</dfn>
fantasai@7057 3269
fantasai@7057 3270 <dd>No special processing.
fantasai@7057 3271
fantasai@7057 3272 <dt><dfn id=all title="text-combine-horizontal:all">all</dfn>
fantasai@7057 3273
fantasai@8671 3274 <dd>In vertical writing modes, attempt to display the text contents of the
fantasai@7057 3275 element horizontally within the vertical line box. If the contents are
fantasai@8671 3276 wider than 1em, the UA must fit the contents within 1em, see below. The
fantasai@8671 3277 resulting composition is treated as a single glyph for the purposes of
fantasai@8671 3278 layout and decoration. If the content contains any element boundaries
fantasai@8671 3279 this is treated as ‘<code class=css>text-combine-horizontal:
fantasai@8671 3280 none</code>’ on the element and any descendants. <!--
fantasai@7057 3281 <dt><dfn title="text-combine-horizontal:numeric">numeric</dfn>
fantasai@7057 3282 <dd>Within the element, each sequence of consecutive horizontal numbers
fantasai@7057 3283 that has as many or fewer characters than the integer given is treated
fantasai@7057 3284 as if it were in an anonymous inline box with
fantasai@7057 3285 ''text-combine-horizontal: all''.
fantasai@7057 3286 For this property, a <dfn>horizontal number</dfn> is any character
fantasai@7057 3287 belonging to a Number category (N*) that does not belong to a
fantasai@7057 3288 <a href="#script-orientations">vertical script</a>.
kojiishi@7378 3289 -->
kojiishi@7378 3290
fantasai@8670 3291 <dt><dfn id=digits-ltinteger title="text-combine-horizontal:digits">digits
fantasai@8670 3292 <var>&lt;integer></var>?</dfn>
fantasai@8670 3293
fantasai@8670 3294 <dd>Within the element, each maximal sequence of consecutive ASCII digits
kojiishi@7378 3295 (U+0030–U+0039) that has as many or fewer characters than the integer
kojiishi@7378 3296 given is treated as if it were in an anonymous inline box with ‘<code
kojiishi@7378 3297 class=css>text-combine-horizontal: all</code>’. When the integer is
fantasai@8670 3298 omitted, 2 is used. Integers outside the range 1-4 are invalid. <!--
fantasai@7057 3299 <dt><dfn title="text-combine-horizontal:alpha">alpha</dfn>
fantasai@7057 3300 <dd>Within the element, each sequence of consecutive horizontal letters
fantasai@7057 3301 that has as many or fewer characters than the integer given is treated
fantasai@7057 3302 as if it were in an anonymous inline box with
fantasai@7057 3303 ''text-combine-horizontal: all''.
fantasai@7057 3304 For this property, a <dfn>horizontal letter</dfn> is any character belonging
fantasai@7057 3305 to a Letter category (L*) that does not belong to a
fantasai@7057 3306 <a href="#script-orientations">vertical script</a>.
fantasai@7057 3307 <dt><dfn title="text-combine-horizontal:latin">latin</dfn>
fantasai@7057 3308 <dd>Within the element, each sequence of Latin letters
fantasai@7057 3309 that has as many or fewer characters than the integer given is treated
fantasai@7057 3310 as if it were in an anonymous inline box with
fantasai@7057 3311 ''text-combine-horizontal: all''.
fantasai@7057 3312 For this property, a <dfn>Latin letter</dfn> is any character belonging to
fantasai@7057 3313 a Letter category (L*) that also belongs to the Latin script.
fantasai@7057 3314 <p class="issue">This definition could replace ''alpha'' as a simplification.
fantasai@7057 3315 However, it wouldn't work for greek or mixtures of greek and latin (e.g. μm).
fantasai@7057 3316 <dt><dfn title="text-combine-horizontal:alphanumeric">alphanumeric</dfn>
fantasai@7057 3317 <dd>Within the element, each sequence of consecutive horizontal digits and/or
fantasai@7057 3318 letters that has as many or fewer characters than the integer given is treated
fantasai@7057 3319 as if it were in an anonymous inline box with
fantasai@7057 3320 ''text-combine-horizontal: all''.
fantasai@7057 3321 -->
fantasai@7057 3322 </dl>
fantasai@7057 3323
fantasai@7057 3324 <div class=example>
fantasai@7057 3325 <p>In East Asian documents, the ‘<a
fantasai@7057 3326 href="#text-combine-horizontal0"><code
fantasai@7057 3327 class=css>text-combine-horizontal</code></a>’ effect is often used to
fantasai@7057 3328 display Latin-based strings such as components of a date or letters of an
fantasai@7057 3329 initialism, always in a horizontal writing mode regardless of the writing
fantasai@7057 3330 mode of the line:
fantasai@7057 3331
fantasai@7057 3332 <div class=figure>
fantasai@7057 3333 <p><img
fantasai@7057 3334 alt="Diagram of tate-chu-yoko, showing the two digits of a date set halfwidth side-by-side in a vertical column of text"
fantasai@7057 3335 class=example src=tate-chu-yoko.png>
fantasai@7057 3336
fantasai@7057 3337 <p class=caption>Example of horizontal-in-vertical <i
fantasai@7057 3338 lang=ja>tate-chu-yoko</i>
fantasai@7057 3339 </div>
fantasai@7057 3340
fantasai@7057 3341 <p>The figure is the result of the rules
fantasai@7057 3342
fantasai@7057 3343 <pre>
kojiishi@7378 3344 <!-- -->date { text-combine-horizontal: digits 2; }
fantasai@7057 3345 </pre>
fantasai@7057 3346
fantasai@7057 3347 <p>and the following markup:
fantasai@7057 3348
fantasai@7057 3349 <pre>
kojiishi@7378 3350 <!-- -->&lt;date&gt;平成20年4月16日に&lt;/date&gt;
fantasai@7057 3351 </pre>
fantasai@7057 3352
fantasai@7057 3353 <p>In Japanese, this effect is known as <i lang=ja>tate-chu-yoko</i>.
fantasai@7057 3354 </div>
kojiishi@7378 3355
kojiishi@7378 3356 <div class=example>
kojiishi@7378 3357 <p>The following example shows that applying ‘<code
kojiishi@7378 3358 class=css>text-combine-horizontal: digits 2</code>’ to an entire
kojiishi@7378 3359 document, rather than to a segment with a known type of numeric content,
kojiishi@7378 3360 can have unintended consequences:
kojiishi@7378 3361
kojiishi@7378 3362 <pre>&lt;p>あれは10,000円ですよ!&lt;/p></pre>
kojiishi@7378 3363
kojiishi@7378 3364 <div class=figure>
kojiishi@7378 3365 <p><img
kojiishi@7378 3366 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."
kojiishi@7378 3367 class=example src=bad-tate-chu-yoko.png>
kojiishi@7378 3368
kojiishi@7378 3369 <p class=caption>Example of mis-applied <i lang=ja>tate-chu-yoko</i>
kojiishi@7378 3370 </div>
fantasai@7057 3371 </div>
fantasai@7057 3372
fantasai@8671 3373 <p>In order to preserve typographic color when compressing the text to 1em,
fantasai@8671 3374 when the combined text consists of more than one <a
fantasai@8678 3375 href="#character"><i>character</i></a>, then any full-width <a
fantasai@8678 3376 href="#character"><i>characters</i></a> must first be converted to their
fantasai@8678 3377 non-full-width equivalents by reversing the algorithm defined for ‘<code
fantasai@8678 3378 class=css>text-transform: full-width</code>’ in [[!CSS3-TEXT]]. Also, a
fantasai@8678 3379 ‘<code class=property>font-variant</code>’ value of ‘<code
fantasai@8678 3380 class=css>full-width</code>’ must be ignored in such cases: whether
fantasai@8678 3381 applied via ‘<code class=css>@font-face</code>’ descriptor or property
fantasai@8678 3382 declaration, within the combined text this value does not not cause the UA
fantasai@8678 3383 to enable that font feature. <a href="#CSS3-FONTS"
fantasai@8678 3384 rel=biblioentry>[CSS3-FONTS]<!--{{!CSS3-FONTS}}--></a>
kojiishi@7378 3385
kojiishi@7378 3386 <div class=example>
kojiishi@7378 3387 <p>For example, an author might apply both ‘<code
kojiishi@7378 3388 class=property>text-transform</code>’ and ‘<a
kojiishi@7378 3389 href="#text-combine-horizontal0"><code
kojiishi@7378 3390 class=property>text-combine-horizontal</code></a>’ to a date set in
kojiishi@7378 3391 vertical text.
kojiishi@7378 3392
kojiishi@7378 3393 <pre>date { text-combine-horizontal: digits 2; text-transform: full-width; }</pre>
kojiishi@7378 3394
kojiishi@7378 3395 <p>Suppose this style rule is applied to a date such as.
kojiishi@7378 3396
kojiishi@7378 3397 <pre>&lt;date>2010年2月23日&lt;/date></pre>
fantasai@8671 3398
fantasai@8671 3399 <p>The "2010" is too long to be combined (4 digits), but the "2" and "23"
fantasai@8671 3400 will be affected. Since "23" is more than one character, it will not be
fantasai@8671 3401 affected by ‘<code class=css>text-transform: full-width</code>’.
fantasai@8671 3402 However since the "2" is only one character, it will be transformed to a
fantasai@8671 3403 fullwidth "2". Since the "2010" was not combined, its digits, too, will
fantasai@8671 3404 be transformed to fullwidth "2010"; and being fullwidth, they
fantasai@8671 3405 will be typeset upright, giving the following result:
fantasai@8671 3406
kojiishi@7378 3407 <pre style="text-align: center">
kojiishi@7378 3408 <!-- -->2
kojiishi@7378 3409 <!-- -->0
kojiishi@7378 3410 <!-- -->1
kojiishi@7378 3411 <!-- -->0
kojiishi@7378 3412 <!-- -->年
kojiishi@7378 3413 <!-- -->2
kojiishi@7378 3414 <!-- -->月
kojiishi@7378 3415 <!-- -->23
kojiishi@7378 3416 <!-- -->日</pre>
fantasai@7057 3417 </div>
fantasai@8671 3418
fantasai@8671 3419 <p>When combining text as for ‘<code class=css>text-combine-horizontal:
fantasai@8671 3420 all</code>’, the glyphs of the combined text are composed horizontally
fantasai@8671 3421 (ignoring ‘<code class=property>letter-spacing</code>’ and any forced
fantasai@8671 3422 line breaks, but using the specified font settings), similar to the
fantasai@8671 3423 contents of an inline-box with a horizontal writing mode and a line-height
fantasai@8671 3424 of 1em. The effective size of the composition is assumed to be 1em square;
fantasai@8671 3425 anything outside the square is not measured for layout purposes. The UA
fantasai@8671 3426 should center the glyphs horizontally and vertically within the measured
fantasai@8671 3427 1em square. The baseline of the resulting composition must be chosen such
fantasai@8671 3428 that the square is centered between the text-over and text-under baselines
fantasai@8671 3429 of its parent inline box prior to any baseline alignment shift (‘<code
fantasai@8671 3430 class=property>vertical-align</code>’). For bidi reordering, the
fantasai@8671 3431 composition is treated the same as a character with ‘<code
fantasai@8671 3432 class=css>text-orientation: upright</code>’. For line breaking before
fantasai@8671 3433 and after the composition, it is treated as a regular inline with its
fantasai@8671 3434 actual contents. For other text layout purposes, e.g. emphasis marks,
fantasai@8671 3435 text-decoration, spacing, etc. the resulting composition is treated as a
fantasai@8671 3436 single glyph representing the Object Replacement Character U+FFFC.
fantasai@8671 3437
fantasai@8671 3438 <p>The UA must ensure that the combined advance width of the composition
fantasai@8671 3439 fits within 1em by compressing the combined text if necessary. (This does
fantasai@8671 3440 not necessarily mean that the glyphs will fit within 1em, as some glyphs
fantasai@8705 3441 are designed to draw outside their geometric boundaries.) OpenType
fantasai@8705 3442 implementations <em>must</em> use width-specific variants
fantasai@8705 3443 (<code>hwid<code>/<code>twid</code>/<code>qwid</code>) to compress text in
fantasai@8705 3444 cases where those variants are available for all <a
fantasai@8705 3445 href="#character"><i>characters</i></a> in the composition. Otherwise, the
fantasai@8705 3446 UA may use any means to compress the text, including substituting
fantasai@8705 3447 half-width, third-width, and/or quarter-width glyphs provided by the font,
fantasai@8705 3448 using other font features designed to compress text horizontally, scaling
fantasai@8705 3449 the text geometrically, or any combination thereof. </code></code>
fantasai@8671 3450
fantasai@8671 3451 <div class=example>
fantasai@8671 3452 <p>For example, a simple OpenType-based implementation might compress the
fantasai@8671 3453 text as follows:
fantasai@8671 3454
fantasai@8671 3455 <ol>
fantasai@8671 3456 <li>Enable 1/<var>n</var>-width glyphs for combined text of <var>n</var>
fantasai@8671 3457 <a href="#character"><i>characters</i></a>. (I.e. Use OpenType
fantasai@8671 3458 <code>hwid</code> for 2 <a href="#character"><i>characters</i></a>,
fantasai@8671 3459 <code>twid</code> for 3 <a href="#character"><i>characters</i></a>,
fantasai@8671 3460 etc.) Note that the number of <a href="#character"><i>characters</i></a>
fantasai@8671 3461 ≠ number of Unicode codepoints!
fantasai@8671 3462
fantasai@8671 3463 <li>Horizontally scale the result to 1em if it is not yet 1em or
fantasai@8671 3464 narrower.
fantasai@8671 3465 </ol>
fantasai@8671 3466
fantasai@8671 3467 <p>A more sophisticated OpenType implementation might compose the text
fantasai@8671 3468 first with normal (proportional-width) glyphs to see if that fits, then
fantasai@8671 3469 substitute in half-width or third-width forms as available and necessary,
fantasai@8671 3470 possibly adjusting its approach or combining it with scaling operations
fantasai@8671 3471 depending on the available glyph substitutions.
fantasai@8671 3472 </div>
fantasai@8671 3473
fantasai@8671 3474 <p>In some fonts, the ideographic glyphs are given a compressed design such
fantasai@8671 3475 that they are 1em wide but shorter than 1em tall. To accommodate such
fantasai@8671 3476 fonts, the UA may vertically scale the the composition to match the
fantasai@8671 3477 advance height of 水 U+6C34.
fantasai@8671 3478 <!-- 水 U+6C34 was chosen because it is a very basic character common to
fantasai@8671 3479 all Han-based scripts, so would have to appear in any usable ideographic
fantasai@8671 3480 font; and its shape is very full in both dimensions, so it would be
fantasai@8671 3481 unlikely to be shortened in a proportional font -->
fantasai@8671 3482 <!--
fantasai@7057 3483 <h3 id="text-combine-mode">
fantasai@7057 3484 Horizontal-in-Vertical Glyph Scaling: the 'text-combine-mode' property</h3>
fantasai@7057 3485
fantasai@7057 3486 <table class="propdef">
fantasai@7057 3487 <tbody>
fantasai@7057 3488 <tr>
fantasai@7057 3489 <th>Name:
fantasai@7057 3490 <td><dfn>text-combine-mode</dfn>
fantasai@7057 3491 </tr>
fantasai@7057 3492 <tr>
fantasai@7057 3493 <th><a href="#values">Value</a>:
fantasai@7057 3494 <td>auto | compress | [ no-compress || use-glyphs ]
fantasai@7057 3495 </tr>
fantasai@7057 3496 <tr>
fantasai@7057 3497 <th>Initial:
fantasai@7057 3498 <td>auto
fantasai@7057 3499 </tr>
fantasai@7057 3500 <tr>
fantasai@7057 3501 <th>Applies to:
fantasai@7057 3502 <td>non-replaced inline elements
fantasai@7057 3503 </tr>
fantasai@7057 3504 <tr>
fantasai@7057 3505 <th>Inherited:
fantasai@7057 3506 <td>yes
fantasai@7057 3507 </tr>
fantasai@7057 3508 <tr>
fantasai@7057 3509 <th>Percentages:
fantasai@7057 3510 <td>N/A
fantasai@7057 3511 </tr>
fantasai@7057 3512 <tr>
fantasai@7057 3513 <th>Media:
fantasai@7057 3514 <td>visual
fantasai@7057 3515 </tr>
fantasai@7057 3516 <tr>
fantasai@7057 3517 <th>Computed value:
fantasai@7057 3518 <td>specified value
fantasai@7057 3519 </tr>
fantasai@7057 3520 </tbody>
fantasai@7057 3521 </table>
fantasai@7057 3522
fantasai@7057 3523 <p>This property controls how multiple characters are combined into the
fantasai@7057 3524 space of a single character when specified to do so via
fantasai@7057 3525 'text-combine-horizontal'. Values have the following meanings:</p>
fantasai@7057 3526
fantasai@7057 3527 <dl>
fantasai@7057 3528 <dt><dfn title="text-combine-mode:auto">auto</dfn>
fantasai@7057 3529 <dd>If the contents are wider than 1em, the UA must attempt to fit the
fantasai@7057 3530 contents within 1em, but may use any method to do so.
fantasai@7057 3531 <dt><dfn title="text-combine-mode:compress">compress</dfn>
fantasai@7057 3532 <dd>Compress the composition (horizontally) as a whole until it fits within 1em.
fantasai@7057 3533 Do not substitute alternate-width glyphs.
fantasai@7057 3534 <dt><dfn title="text-combine-mode:use-glyphs">use-glyphs</dfn>
fantasai@7057 3535 <dd>Attempt to substitute narrower glyphs as necessary to make the
fantasai@7057 3536 composition fit within 1em:
fantasai@7057 3537 <ul>
fantasai@7057 3538 <li>a two-character composition uses 1/2-em or proportional glyphs
fantasai@7057 3539 <li>a three-character composition uses 1/3-em glyphs (if the font
fantasai@7057 3540 supports this feature, else fall back to 1/2-em or proportional glyphs)
fantasai@7057 3541 <li>etc.
fantasai@7057 3542 </ul>
fantasai@7057 3543 <p>Since even fonts that have fractional-width glyphs available do
fantasai@7057 3544 not have such glyphs for all characters, the UA must ensure the
fantasai@7057 3545 expected advance width for ''use-glyphs'' by either compressing or
fantasai@7057 3546 padding (equally on both sides) each glyph individually if it does
fantasai@7057 3547 not match the required advance width. (This step does not apply if
fantasai@7057 3548 ''no-compress'' is specified.)
fantasai@7057 3549 <dt><dfn title="text-combine-mode:no-compress">no-compress</dfn>
fantasai@7057 3550 <dd>Do not compress the composition or perform any glyph substitution
fantasai@7057 3551 in order to make the composition fit within 1em.
fantasai@7057 3552 When combined with ''use-glyphs'', however, this indicates to perform
fantasai@7057 3553 glyph substitution if possible per ''use-glyphs'' but not to compress
fantasai@7057 3554 the glyphs if they do not fit the size requirements.
fantasai@7057 3555 This value may cause the glyphs to overflow the line significantly.
fantasai@7057 3556 </dl>
fantasai@7057 3557 -->
fantasai@7057 3558
fantasai@7057 3559 <h2 class=no-num id=changes>Changes</h2>
fantasai@7057 3560
fantasai@7057 3561 <h3 class=no-num id=recent-changes> Changes since the <a
fantasai@7057 3562 href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">May 2012
fantasai@7057 3563 CSS Writing Modes Module Level 3 <abbr title="Working Draft">WD</abbr></a></h3>
fantasai@7057 3564
fantasai@7057 3565 <p>Major changes include:
fantasai@7057 3566
fantasai@7057 3567 <ul>
fantasai@7057 3568 <li>Replaced ‘<a href="#unicode-bidi0"><code
fantasai@7057 3569 class=property>unicode-bidi</code></a>’ value of ‘<code
fantasai@7057 3570 class=css>isolate bidi-override</code>’ with single keyword ‘<a
fantasai@7057 3571 href="#isolate-override"><code class=css>isolate-override</code></a>’.
fantasai@7057 3572
fantasai@7057 3573 <li>Clarified that bidi isolated content does not affect plaintext
fantasai@7057 3574 heuristics of the containing paragraph.
fantasai@7057 3575
fantasai@7057 3576 <li>Lots of other clarifications to bidi.
fantasai@7057 3577
fantasai@7057 3578 <li>Renamed ‘<code class=css>mixed-right</code>’ value of ‘<a
fantasai@7057 3579 href="#text-orientation0"><code
fantasai@7057 3580 class=property>text-orientation</code></a>’ to ‘<a
fantasai@7057 3581 href="#mixed"><code class=css>mixed</code></a>’.
fantasai@7057 3582
fantasai@7057 3583 <li>Updated references to UTR50 for orientation of characters in Unicode
fantasai@7057 3584 and improved text defining vertical typesetting rules.
fantasai@7057 3585
fantasai@7057 3586 <li>Fixed errors and clarified auto-sizing rules for orthogonal flows.
fantasai@7057 3587
fantasai@7057 3588 <li>Replaced Appendix D with references to the new <a href="#CSS3-SIZING"
fantasai@7057 3589 rel=biblioentry>[CSS3-SIZING]<!--{{!CSS3-SIZING}}--></a> module.
fantasai@7057 3590
fantasai@7057 3591 <li>Removed ‘<code class=property>text-combine-mode</code>’ property.
fantasai@7057 3592
fantasai@7057 3593 <li>Removed all ‘<a href="#text-combine-horizontal0"><code
fantasai@7057 3594 class=property>text-combine-horizontal</code></a>’ values except
fantasai@7057 3595 ‘<code class=css>none</code>’ and ‘<code class=css>all</code>’.
fantasai@7057 3596
fantasai@7057 3597 <li>Defined effect of ‘<a href="#text-combine-horizontal0"><code
fantasai@7057 3598 class=property>text-combine-horizontal</code></a>’ on line-breaking.
fantasai@7057 3599 </ul>
fantasai@7057 3600
fantasai@7057 3601 <h3 class=no-num id=changes-201109> Changes since the <a
fantasai@7057 3602 href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/">September
fantasai@7057 3603 2011 CSS Writing Modes Module Level 3 <abbr
fantasai@7057 3604 title="Working Draft">WD</abbr></a></h3>
fantasai@7057 3605
fantasai@7057 3606 <p>Major changes include:
fantasai@7057 3607
fantasai@7057 3608 <ul>
fantasai@7057 3609 <li>Hooked up vertical typesetting details to UTR50.
fantasai@7057 3610
fantasai@7057 3611 <li>Removed concept of "typographic modes".
fantasai@7057 3612
fantasai@7057 3613 <li>Altered <a href="#orthogonal-auto">orthogonal sizing</a> to take into
fantasai@7057 3614 account the fill-available size; now the minimum of the fill-available
fantasai@7057 3615 and ICB size is used to resolve ‘<code class=property>auto</code>’
fantasai@7057 3616 sizes.
fantasai@7057 3617
fantasai@7057 3618 <li>Renamed ‘<code class=css>digits</code>’ to ‘<code
fantasai@7057 3619 class=css>numeric</code>’ and ‘<code class=css>ascii-digits</code>’
fantasai@7057 3620 to ‘<code class=css>digits</code>’ for ‘<a
fantasai@7057 3621 href="#text-combine-horizontal0"><code
fantasai@7057 3622 class=property>text-combine-horizontal</code></a>’.
fantasai@7057 3623
fantasai@7057 3624 <li>Defined interaction of ‘<a href="#text-combine-horizontal0"><code
fantasai@7057 3625 class=property>text-combine-horizontal</code></a>’ and ‘<code
fantasai@7057 3626 class=property>text-transform</code>’.
fantasai@7057 3627 </ul>
fantasai@7057 3628
fantasai@7057 3629 <h2 id=conformance><span class=secno>10. </span> Conformance</h2>
fantasai@7057 3630
fantasai@7057 3631 <h3 id=conventions><span class=secno>10.1. </span> Document Conventions</h3>
fantasai@7057 3632
fantasai@7057 3633 <p>Conformance requirements are expressed with a combination of descriptive
fantasai@7057 3634 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
fantasai@7057 3635 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
fantasai@7057 3636 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
fantasai@7057 3637 normative parts of this document are to be interpreted as described in RFC
fantasai@7057 3638 2119. However, for readability, these words do not appear in all uppercase
fantasai@7057 3639 letters in this specification.
fantasai@7057 3640
fantasai@7057 3641 <p>All of the text of this specification is normative except sections
fantasai@7057 3642 explicitly marked as non-normative, examples, and notes. <a
fantasai@7057 3643 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
fantasai@7057 3644
fantasai@7057 3645 <p>Examples in this specification are introduced with the words “for
fantasai@7057 3646 example” or are set apart from the normative text with
fantasai@7057 3647 <code>class="example"</code>, like this:
fantasai@7057 3648
fantasai@7057 3649 <div class=example>
fantasai@7057 3650 <p>This is an example of an informative example.
fantasai@7057 3651 </div>
fantasai@7057 3652
fantasai@7057 3653 <p>Informative notes begin with the word “Note” and are set apart from
fantasai@7057 3654 the normative text with <code>class="note"</code>, like this:
fantasai@7057 3655
fantasai@7057 3656 <p class=note>Note, this is an informative note.
fantasai@7057 3657
fantasai@7057 3658 <h3 id=conformance-classes><span class=secno>10.2. </span> Conformance
fantasai@7057 3659 Classes</h3>
fantasai@7057 3660
fantasai@7057 3661 <p>Conformance to CSS Writing Modes Level 3 is defined for three
fantasai@7057 3662 conformance classes:
fantasai@7057 3663
fantasai@7057 3664 <dl>
fantasai@7057 3665 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
fantasai@7057 3666 sheet</dfn>
fantasai@7057 3667
fantasai@7057 3668 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
fantasai@7057 3669 style sheet</a>.
fantasai@7057 3670
fantasai@7057 3671 <dt><dfn id=renderer>renderer</dfn>
fantasai@7057 3672
fantasai@7057 3673 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
fantasai@7057 3674 that interprets the semantics of a style sheet and renders documents that
fantasai@7057 3675 use them.
fantasai@7057 3676
fantasai@7057 3677 <dt><dfn id=authoring-tool>authoring tool</dfn>
fantasai@7057 3678
fantasai@7057 3679 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
fantasai@7057 3680 that writes a style sheet.
fantasai@7057 3681 </dl>
fantasai@7057 3682
fantasai@7057 3683 <p>A style sheet is conformant to CSS Writing Modes Level 3 if all of its
fantasai@7057 3684 declarations that use properties defined in this module have values that
fantasai@7057 3685 are valid according to the generic CSS grammar and the individual grammars
fantasai@7057 3686 of each property as given in this module.
fantasai@7057 3687
fantasai@7057 3688 <p>A renderer is conformant to CSS Writing Modes Level 3 if, in addition to
fantasai@7057 3689 interpreting the style sheet as defined by the appropriate specifications,
fantasai@7057 3690 it supports all the features defined by CSS Writing Modes Level 3 by
fantasai@7057 3691 parsing them correctly and rendering the document accordingly. However,
fantasai@7057 3692 the inability of a UA to correctly render a document due to limitations of
fantasai@7057 3693 the device does not make the UA non-conformant. (For example, a UA is not
fantasai@7057 3694 required to render color on a monochrome monitor.)
fantasai@7057 3695
fantasai@7057 3696 <p>An authoring tool is conformant to CSS Writing Modes Level 3 if it
fantasai@7057 3697 writes style sheets that are syntactically correct according to the
fantasai@7057 3698 generic CSS grammar and the individual grammars of each feature in this
fantasai@7057 3699 module, and meet all other conformance requirements of style sheets as
fantasai@7057 3700 described in this module.
fantasai@7057 3701
fantasai@7057 3702 <h3 id=partial><span class=secno>10.3. </span> Partial Implementations</h3>
fantasai@7057 3703
fantasai@7057 3704 <p>So that authors can exploit the forward-compatible parsing rules to
fantasai@7057 3705 assign fallback values, CSS renderers <strong>must</strong> treat as
fantasai@7057 3706 invalid (and <a
fantasai@7057 3707 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
fantasai@7057 3708 appropriate</a>) any at-rules, properties, property values, keywords, and
fantasai@7057 3709 other syntactic constructs for which they have no usable level of support.
fantasai@7057 3710 In particular, user agents <strong>must not</strong> selectively ignore
fantasai@7057 3711 unsupported component values and honor supported values in a single
fantasai@7057 3712 multi-value property declaration: if any value is considered invalid (as
fantasai@7057 3713 unsupported values must be), CSS requires that the entire declaration be
fantasai@7057 3714 ignored.
fantasai@7057 3715
fantasai@7057 3716 <h3 id=experimental><span class=secno>10.4. </span> Experimental
fantasai@7057 3717 Implementations</h3>
fantasai@7057 3718
fantasai@7057 3719 <p>To avoid clashes with future CSS features, the CSS2.1 specification
fantasai@7057 3720 reserves a <a
fantasai@7057 3721 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
fantasai@7057 3722 syntax</a> for proprietary and experimental extensions to CSS.
fantasai@7057 3723
fantasai@7057 3724 <p>Prior to a specification reaching the Candidate Recommendation stage in
fantasai@7057 3725 the W3C process, all implementations of a CSS feature are considered
fantasai@7057 3726 experimental. The CSS Working Group recommends that implementations use a
fantasai@7057 3727 vendor-prefixed syntax for such features, including those in W3C Working
fantasai@7057 3728 Drafts. This avoids incompatibilities with future changes in the draft.
fantasai@7057 3729
fantasai@7057 3730 <h3 id=testing><span class=secno>10.5. </span>Non-Experimental
fantasai@7057 3731 Implementations</h3>
fantasai@7057 3732
fantasai@7057 3733 <p>Once a specification reaches the Candidate Recommendation stage,
fantasai@7057 3734 non-experimental implementations are possible, and implementors should
fantasai@7057 3735 release an unprefixed implementation of any CR-level feature they can
fantasai@7057 3736 demonstrate to be correctly implemented according to spec.
fantasai@7057 3737
fantasai@7057 3738 <p>To establish and maintain the interoperability of CSS across
fantasai@7057 3739 implementations, the CSS Working Group requests that non-experimental CSS
fantasai@7057 3740 renderers submit an implementation report (and, if necessary, the
fantasai@7057 3741 testcases used for that implementation report) to the W3C before releasing
fantasai@7057 3742 an unprefixed implementation of any CSS features. Testcases submitted to
fantasai@7057 3743 W3C are subject to review and correction by the CSS Working Group.
fantasai@7057 3744
fantasai@7057 3745 <p>Further information on submitting testcases and implementation reports
fantasai@7057 3746 can be found from on the CSS Working Group's website at <a
fantasai@7057 3747 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
fantasai@7057 3748 Questions should be directed to the <a
fantasai@7057 3749 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
fantasai@7057 3750 mailing list.
fantasai@7057 3751
fantasai@7057 3752 <h3 id=cr-exit-criteria><span class=secno>10.6. </span> CR Exit Criteria</h3>
fantasai@7057 3753
fantasai@7057 3754 <p> For this specification to be advanced to Proposed Recommendation, there
fantasai@7057 3755 must be at least two independent, interoperable implementations of each
fantasai@7057 3756 feature. Each feature may be implemented by a different set of products,
fantasai@7057 3757 there is no requirement that all features be implemented by a single
fantasai@7057 3758 product. For the purposes of this criterion, we define the following
fantasai@7057 3759 terms:
fantasai@7057 3760
fantasai@7057 3761 <dl>
fantasai@7057 3762 <dt>independent
fantasai@7057 3763
fantasai@7057 3764 <dd>each implementation must be developed by a different party and cannot
fantasai@7057 3765 share, reuse, or derive from code used by another qualifying
fantasai@7057 3766 implementation. Sections of code that have no bearing on the
fantasai@7057 3767 implementation of this specification are exempt from this requirement.
fantasai@7057 3768
fantasai@7057 3769 <dt>interoperable
fantasai@7057 3770
fantasai@7057 3771 <dd>passing the respective test case(s) in the official CSS test suite,
fantasai@7057 3772 or, if the implementation is not a Web browser, an equivalent test. Every
fantasai@7057 3773 relevant test in the test suite should have an equivalent test created if
fantasai@7057 3774 such a user agent (UA) is to be used to claim interoperability. In
fantasai@7057 3775 addition if such a UA is to be used to claim interoperability, then there
fantasai@7057 3776 must one or more additional UAs which can also pass those equivalent
fantasai@7057 3777 tests in the same way for the purpose of interoperability. The equivalent
fantasai@7057 3778 tests must be made publicly available for the purposes of peer review.
fantasai@7057 3779
fantasai@7057 3780 <dt>implementation
fantasai@7057 3781
fantasai@7057 3782 <dd>a user agent which:
fantasai@7057 3783 <ol class=inline>
fantasai@7057 3784 <li>implements the specification.
fantasai@7057 3785
fantasai@7057 3786 <li>is available to the general public. The implementation may be a
fantasai@7057 3787 shipping product or other publicly available version (i.e., beta
fantasai@7057 3788 version, preview release, or “nightly build”). Non-shipping product
fantasai@7057 3789 releases must have implemented the feature(s) for a period of at least
fantasai@7057 3790 one month in order to demonstrate stability.
fantasai@7057 3791
fantasai@7057 3792 <li>is not experimental (i.e., a version specifically designed to pass
fantasai@7057 3793 the test suite and is not intended for normal usage going forward).
fantasai@7057 3794 </ol>
fantasai@7057 3795 </dl>
fantasai@7057 3796
fantasai@7057 3797 <p>The specification will remain Candidate Recommendation for at least six
fantasai@7057 3798 months.
fantasai@7057 3799
fantasai@7057 3800 <h2 class=no-num id=acknowledgements> Acknowledgements</h2>
fantasai@7057 3801
fantasai@7057 3802 <p>John Daggett, Martin Heijdra, Laurentiu Iancu, Yasuo Kida, Tatsuo
fantasai@7057 3803 Kobayashi, Toshi Kobayashi, Ken Lunde, Nat McCully, Eric Muller, Paul
fantasai@7057 3804 Nelson, Kenzou Onozawa, Dwayne Robinson, Michel Suignard, Taro Yamamoto,
fantasai@7057 3805 Steve Zilles
fantasai@7057 3806
fantasai@7057 3807 <h2 class=no-num id=character-properties>Appendix A. Characters and
fantasai@7057 3808 Properties</h2>
fantasai@7057 3809
fantasai@7057 3810 <p>Unicode defines three codepoint-level properties that are referenced in
fantasai@7057 3811 CSS Writing Modes:
fantasai@7057 3812
fantasai@7057 3813 <dl>
fantasai@7057 3814 <dt><a href="http://www.unicode.org/reports/tr11/#Definitions">East Asian
fantasai@7057 3815 width</a>
fantasai@7057 3816
fantasai@7057 3817 <dd>Defined in <a href="#UAX11"
fantasai@7057 3818 rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a> and given as the
fantasai@7057 3819 East_Asian_Width property in the Unicode Character Database <a
fantasai@7057 3820 href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>.
fantasai@7057 3821
fantasai@7057 3822 <dt><a
fantasai@7057 3823 href="http://www.unicode.org/reports/tr44/#General_Category_Values">General
fantasai@7057 3824 Category</a>
fantasai@7057 3825
fantasai@7057 3826 <dd>Defined in <a href="#UAX44"
fantasai@7057 3827 rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a> and given as the
fantasai@7057 3828 General_Category property in the Unicode Character Database <a
fantasai@7057 3829 href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>.
fantasai@7057 3830
fantasai@7057 3831 <dt><a href="http://www.unicode.org/reports/tr24/#Values">Script
fantasai@7057 3832 property</a>
fantasai@7057 3833
fantasai@7057 3834 <dd>Defined in <a href="#UAX24"
fantasai@7057 3835 rel=biblioentry>[UAX24]<!--{{!UAX24}}--></a> and given as the Script
fantasai@7057 3836 property in the Unicode Character Database <a href="#UAX44"
fantasai@7057 3837 rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>. (UAs should include any
fantasai@7057 3838 ScriptExtensions.txt assignments in this mapping.)
fantasai@7057 3839 </dl>
fantasai@7057 3840
fantasai@7057 3841 <p id=grapheme-cluster>In several sections (as noted), the term <dfn
fantasai@7057 3842 id=character>character</dfn> is defined as <em>extended grapheme
fantasai@7057 3843 cluster</em> per <a href="#UAX29"
fantasai@7057 3844 rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a>. It is roughly equivalent to
fantasai@7057 3845 what a language user considers to be a character or a basic unit of the
fantasai@7057 3846 script (which might not be a single Unicode codepoint). The UA may further
fantasai@7057 3847 tailor this definition as appropriate to match typographic convention. For
fantasai@7057 3848 example, when typesetting ‘<a href="#upright"><code
fantasai@7057 3849 class=css>upright</code></a>’, Tibetan tsek and shad marks are kept with
fantasai@7057 3850 the preceding letters, rather than treated as an independent cluster.
fantasai@7057 3851
fantasai@7057 3852 <p>Unicode defines properties for characters, but for ‘<a
fantasai@7057 3853 href="#text-orientation0"><code
fantasai@7057 3854 class=property>text-orientation</code></a>’, it is necessary to
fantasai@7057 3855 determine the properties of a grapheme cluster. For the purposes of CSS
fantasai@7057 3856 Writing Modes, the properties of a grapheme cluster are given by its base
fantasai@7057 3857 character—except in two cases:
fantasai@7057 3858
fantasai@7057 3859 <ul>
fantasai@7057 3860 <li>Grapheme clusters formed with an Enclosing Mark (Me) of the Common
fantasai@7057 3861 script are considered to be Other Symbols (So) in the Common script. They
fantasai@7057 3862 are assumed to have the same Unicode properties as the Replacement
fantasai@7057 3863 Character U+FFFD.
fantasai@7057 3864
fantasai@7057 3865 <li>Grapheme clusters formed with a Space Separator (Zs) as the base are
fantasai@7057 3866 considered to be Modifier Symbols (Sk). They are assumed to have the same
fantasai@7057 3867 East Asian Width property as the base, but take their other properties
fantasai@7057 3868 from the first combining character in the sequence.
fantasai@7057 3869 </ul>
fantasai@7057 3870
fantasai@7057 3871 <h2 class=no-num id=bidi-html> Appendix B: Bidi Rules for HTML 4</h2>
fantasai@7057 3872
fantasai@7057 3873 <p>The style sheet rules that would achieve the bidi behaviors specified in
fantasai@7057 3874 <a href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a> for the
fantasai@7057 3875 HTML Strict doctype are given below:
fantasai@7057 3876
fantasai@7057 3877 <pre>
fantasai@7057 3878 /* HTML dir attribute creates an embedding */
fantasai@7057 3879 *[dir="ltr"] { direction: ltr; unicode-bidi: embed; }
fantasai@7057 3880 *[dir="rtl"] { direction: rtl; unicode-bidi: embed; }
fantasai@7057 3881
fantasai@7057 3882 /* BDO element creates an override */
fantasai@7057 3883 bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; }
fantasai@7057 3884 bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; }
fantasai@7057 3885
fantasai@7057 3886 /* HTML4.01:8.2.6 - preserve bidi behavior if 'display' is changed */
fantasai@7057 3887 html, body,
fantasai@7057 3888 div, address, blockquote, p,
fantasai@7057 3889 ul, ol, li, dl, dt, dd,
fantasai@7057 3890 fieldset, form,
fantasai@7057 3891 h1, h2, h3, h4, h5, h6,
fantasai@7057 3892 { unicode-bidi: isolate; }
fantasai@7057 3893 </pre>
fantasai@7057 3894
fantasai@7057 3895 <h2 class=no-num id=script-orientations>Appendix C: Vertical Scripts in
fantasai@7057 3896 Unicode</h2>
fantasai@7057 3897
fantasai@7057 3898 <p><em>This section is informative.</em>
fantasai@7057 3899
fantasai@7057 3900 <p>This appendix lists the vertical and bi-orientational scripts in Unicode
fantasai@7057 3901 6.0 <a href="#UNICODE" rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>
fantasai@7057 3902 and their transformation from horizontal to vertical orientation. Any
fantasai@7057 3903 script not listed explicitly is assumed to be <i>horizontal-only</i>. The
fantasai@7057 3904 script classification of Unicode characters is given by <a href="#UAX24"
fantasai@7057 3905 rel=biblioentry>[UAX24]<!--{{!UAX24}}--></a>.
fantasai@7057 3906
fantasai@7057 3907 <table class=data>
fantasai@7057 3908 <caption>Vertical Scripts in Unicode</caption>
fantasai@7057 3909
fantasai@7057 3910 <thead>
fantasai@7057 3911 <tr>
fantasai@7057 3912 <th>Code
fantasai@7057 3913
fantasai@7057 3914 <th>Name
fantasai@7057 3915
fantasai@7057 3916 <th>Transform (Clockwise)
fantasai@7057 3917
fantasai@7057 3918 <th>Vertical Intrinsic Direction
fantasai@7057 3919
fantasai@7057 3920 <tbody>
fantasai@7057 3921 <tr>
fantasai@7057 3922 <td>Bopo
fantasai@7057 3923
fantasai@7057 3924 <td>Bopomofo
fantasai@7057 3925
fantasai@7057 3926 <th>0°
fantasai@7057 3927
fantasai@7057 3928 <th>ttb
fantasai@7057 3929
fantasai@7057 3930 <tr>
fantasai@7057 3931 <td>Egyp
fantasai@7057 3932
fantasai@7057 3933 <td>Egyptian Hieroglyphs
fantasai@7057 3934
fantasai@7057 3935 <th>0°
fantasai@7057 3936
fantasai@7057 3937 <th>ttb
fantasai@7057 3938
fantasai@7057 3939 <tr>
fantasai@7057 3940 <td>Hira
fantasai@7057 3941
fantasai@7057 3942 <td>Hiragana
fantasai@7057 3943
fantasai@7057 3944 <th>0°
fantasai@7057 3945
fantasai@7057 3946 <th>ttb
fantasai@7057 3947
fantasai@7057 3948 <tr>
fantasai@7057 3949 <td>Kana
fantasai@7057 3950
fantasai@7057 3951 <td>Katakana
fantasai@7057 3952
fantasai@7057 3953 <th>0°
fantasai@7057 3954
fantasai@7057 3955 <th>ttb
fantasai@7057 3956
fantasai@7057 3957 <tr>
fantasai@7057 3958 <td>Hani
fantasai@7057 3959
fantasai@7057 3960 <td>Han
fantasai@7057 3961
fantasai@7057 3962 <th>0°
fantasai@7057 3963
fantasai@7057 3964 <th>ttb
fantasai@7057 3965
fantasai@7057 3966 <tr>
fantasai@7057 3967 <td>Hang
fantasai@7057 3968
fantasai@7057 3969 <td>Hangul
fantasai@7057 3970
fantasai@7057 3971 <th>0°
fantasai@7057 3972
fantasai@7057 3973 <th>ttb
fantasai@7057 3974
fantasai@7057 3975 <tr>
fantasai@7057 3976 <td>Merc
fantasai@7057 3977
fantasai@7057 3978 <td>Meroitic Cursive
fantasai@7057 3979
fantasai@7057 3980 <th>0°
fantasai@7057 3981
fantasai@7057 3982 <th>ttb
fantasai@7057 3983
fantasai@7057 3984 <tr>
fantasai@7057 3985 <td>Mero
fantasai@7057 3986
fantasai@7057 3987 <td>Meroitic Hieroglyphs
fantasai@7057 3988
fantasai@7057 3989 <th>0°
fantasai@7057 3990
fantasai@7057 3991 <th>ttb
fantasai@7057 3992
fantasai@7057 3993 <tr>
fantasai@7057 3994 <td>Mong
fantasai@7057 3995
fantasai@7057 3996 <td>Mongolian
fantasai@7057 3997
fantasai@7057 3998 <th>90°
fantasai@7057 3999
fantasai@7057 4000 <th>ttb
fantasai@7057 4001
fantasai@7057 4002 <tr>
fantasai@7057 4003 <td>Ogam
fantasai@7057 4004
fantasai@7057 4005 <td>Ogham
fantasai@7057 4006
fantasai@7057 4007 <th>-90°
fantasai@7057 4008
fantasai@7057 4009 <th>btt
fantasai@7057 4010
fantasai@7057 4011 <tr>
fantasai@7057 4012 <td>Orkh
fantasai@7057 4013
fantasai@7057 4014 <td>Old Turkic
fantasai@7057 4015
fantasai@7057 4016 <th>-90°
fantasai@7057 4017
fantasai@7057 4018 <th>ttb
fantasai@7057 4019
fantasai@7057 4020 <tr>
fantasai@7057 4021 <td>Phag
fantasai@7057 4022
fantasai@7057 4023 <td>Phags Pa
fantasai@7057 4024
fantasai@7057 4025 <th>90°
fantasai@7057 4026
fantasai@7057 4027 <th>ttb
fantasai@7057 4028
fantasai@7057 4029 <tr>
fantasai@7057 4030 <td>Yiii
fantasai@7057 4031
fantasai@7057 4032 <td>Yi
fantasai@7057 4033
fantasai@7057 4034 <th>0°
fantasai@7057 4035
fantasai@7057 4036 <th>ttb
fantasai@7057 4037 </table>
fantasai@7057 4038
fantasai@7057 4039 <p><strong>Exceptions:</strong> For the purposes of this specification, all
fantasai@7057 4040 fullwidth (F) and wide (W) characters are treated as belonging to a
fantasai@7057 4041 vertical script, and halfwidth characters (H) are treated as belonging ot
fantasai@7057 4042 a horizontal script. <a href="#UAX11"
fantasai@7057 4043 rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a>
fantasai@7057 4044
fantasai@7057 4045 <p class=note> CSS3 Writing Modes cannot correctly handle either Ogham or
fantasai@7057 4046 Old Turkic. It is recommended that ‘<code class=css>text-orientation:
fantasai@7057 4047 sideways-left</code>’ be used to typeset these scripts. A future version
fantasai@7057 4048 of CSS may define automatic handling of these scripts.
fantasai@7057 4049
fantasai@7057 4050 <p class=note>Note that for vertical-only characters (such as Mongolian and
fantasai@7057 4051 Phags Pa letters), the glyphs in the Unicode code charts are shown in
fantasai@7057 4052 their vertical orientation. In horizontal text, they are typeset in a 90°
fantasai@7057 4053 counter-clockwise rotation from this orientation.
fantasai@7057 4054
fantasai@7057 4055 <h2 class=no-num id=references> References</h2>
fantasai@7057 4056
fantasai@7057 4057 <h3 class=no-num id=normative-references> Normative references</h3>
fantasai@7057 4058 <!--begin-normative-->
fantasai@7057 4059 <!-- Sorted by label -->
fantasai@7057 4060
fantasai@7057 4061 <dl class=bibliography>
fantasai@8130 4062 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
fantasai@7057 4063 <!---->
fantasai@7057 4064
fantasai@7057 4065 <dt id=CSS21>[CSS21]
fantasai@7057 4066
fantasai@7057 4067 <dd>Bert Bos; et al. <a
fantasai@8130 4068 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
fantasai@7057 4069 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
fantasai@7057 4070 2011. W3C Recommendation. URL: <a
fantasai@8130 4071 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
fantasai@7057 4072 </dd>
fantasai@7057 4073 <!---->
fantasai@7057 4074
fantasai@8671 4075 <dt id=CSS3-FONTS>[CSS3-FONTS]
fantasai@8671 4076
fantasai@8671 4077 <dd>John Daggett. <a
fantasai@8671 4078 href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/"><cite>CSS Fonts
fantasai@8671 4079 Module Level 3.</cite></a> 12 February 2013. W3C Working Draft. (Work in
fantasai@8671 4080 progress.) URL: <a
fantasai@8671 4081 href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a>
fantasai@8671 4082 </dd>
fantasai@8671 4083 <!---->
fantasai@8671 4084
fantasai@7057 4085 <dt id=CSS3-SIZING>[CSS3-SIZING]
fantasai@7057 4086
fantasai@7057 4087 <dd>Tab Atkins Jr.; Elika J. Etemad. <a
fantasai@7057 4088 href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/"><cite>CSS
fantasai@7057 4089 Intrinsic &amp; Extrinsic Sizing Module Level 3.</cite></a> 27 September
fantasai@7057 4090 2012. W3C Working Draft. (Work in progress.) URL: <a
fantasai@7057 4091 href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/">http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a>
fantasai@7057 4092 </dd>
fantasai@7057 4093 <!---->
fantasai@7057 4094
fantasai@7057 4095 <dt id=CSS3BG>[CSS3BG]
fantasai@7057 4096
fantasai@7057 4097 <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
fantasai@7057 4098 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
fantasai@7057 4099 Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
fantasai@7057 4100 Candidate Recommendation. (Work in progress.) URL: <a
fantasai@7057 4101 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
fantasai@7057 4102 </dd>
fantasai@7057 4103 <!---->
fantasai@7057 4104
fantasai@7057 4105 <dt id=CSS3COL>[CSS3COL]
fantasai@7057 4106
fantasai@7057 4107 <dd>Håkon Wium Lie. <a
fantasai@7057 4108 href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS
fantasai@7057 4109 Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate
fantasai@7057 4110 Recommendation. (Work in progress.) URL: <a
fantasai@7057 4111 href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
fantasai@7057 4112 </dd>
fantasai@7057 4113 <!---->
fantasai@7057 4114
fantasai@7057 4115 <dt id=RFC2119>[RFC2119]
fantasai@7057 4116
fantasai@7057 4117 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
fantasai@7057 4118 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
fantasai@7057 4119 RFC 2119. URL: <a
fantasai@7057 4120 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
fantasai@7057 4121 </dd>
fantasai@7057 4122 <!---->
fantasai@7057 4123
fantasai@7057 4124 <dt id=SVG11>[SVG11]
fantasai@7057 4125
fantasai@7057 4126 <dd>Erik Dahlström; et al. <a
fantasai@7057 4127 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
fantasai@7057 4128 Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
fantasai@7057 4129 W3C Recommendation. URL: <a
fantasai@7057 4130 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
fantasai@7057 4131 </dd>
fantasai@7057 4132 <!---->
fantasai@7057 4133
fantasai@7057 4134 <dt id=UAX11>[UAX11]
fantasai@7057 4135
fantasai@7057 4136 <dd>Asmus Freytag. <a
fantasai@7057 4137 href="http://www.unicode.org/reports/tr11/"><cite>East Asian
fantasai@7057 4138 Width.</cite></a> 17 January 2012. Unicode Standard Annex #11. URL: <a
fantasai@7057 4139 href="http://www.unicode.org/reports/tr11/">http://www.unicode.org/reports/tr11/</a>
fantasai@7057 4140 </dd>
fantasai@7057 4141 <!---->
fantasai@7057 4142
fantasai@7057 4143 <dt id=UAX24>[UAX24]
fantasai@7057 4144
fantasai@7057 4145 <dd>Mark Davis; Ken Whistler. <a
fantasai@7057 4146 href="http://www.unicode.org/reports/tr24/"><cite>Unicode Script
fantasai@7057 4147 Property.</cite></a> 13 January 2012. Unicode Standard Annex #24. URL: <a
fantasai@7057 4148 href="http://www.unicode.org/reports/tr24/">http://www.unicode.org/reports/tr24/</a>
fantasai@7057 4149 </dd>
fantasai@7057 4150 <!---->
fantasai@7057 4151
fantasai@7057 4152 <dt id=UAX29>[UAX29]
fantasai@7057 4153
fantasai@7057 4154 <dd>Mark Davis. <a
fantasai@7057 4155 href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text
kojiishi@7378 4156 Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29.
fantasai@7057 4157 URL: <a
fantasai@7057 4158 href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>
fantasai@7057 4159 </dd>
fantasai@7057 4160 <!---->
fantasai@7057 4161
fantasai@7057 4162 <dt id=UAX44>[UAX44]
fantasai@7057 4163
fantasai@7057 4164 <dd>Mark Davis; Ken Whistler. <a
fantasai@7057 4165 href="http://www.unicode.org/reports/tr44/"><cite>Unicode Character
fantasai@7057 4166 Database.</cite></a> 23 January 2012. Unicode Standard Annex #44. URL: <a
fantasai@7057 4167 href="http://www.unicode.org/reports/tr44/">http://www.unicode.org/reports/tr44/</a>
fantasai@7057 4168 </dd>
fantasai@7057 4169 <!---->
fantasai@7057 4170
fantasai@7057 4171 <dt id=UAX9>[UAX9]
fantasai@7057 4172
fantasai@7057 4173 <dd>Mark Davis. <a
fantasai@7057 4174 href="http://www.unicode.org/reports/tr9/"><cite>Unicode Bidirectional
fantasai@7057 4175 Algorithm.</cite></a> 16 January 2012. Unicode Standard Annex #9. URL: <a
fantasai@7057 4176 href="http://www.unicode.org/reports/tr9/">http://www.unicode.org/reports/tr9/</a>
fantasai@7057 4177 </dd>
fantasai@7057 4178 <!---->
fantasai@7057 4179
fantasai@7057 4180 <dt id=UNICODE>[UNICODE]
fantasai@7057 4181
fantasai@7057 4182 <dd>The Unicode Consortium. <a
fantasai@7057 4183 href="http://www.unicode.org/standard/versions/enumeratedversions.html"><cite>The
fantasai@8130 4184 Unicode Standard.</cite></a> 2012. Defined by: The Unicode Standard,
fantasai@8130 4185 Version 6.2.0 (Mountain View, CA: The Unicode Consortium, 2012. ISBN
fantasai@8130 4186 978-1-936213-07-8), as updated from time to time by the publication of
fantasai@8130 4187 new versions URL: <a
fantasai@7057 4188 href="http://www.unicode.org/standard/versions/enumeratedversions.html">http://www.unicode.org/standard/versions/enumeratedversions.html</a>
fantasai@7057 4189 </dd>
fantasai@7057 4190 <!---->
fantasai@7057 4191
fantasai@7057 4192 <dt id=UTR50>[UTR50]
fantasai@7057 4193
fantasai@8478 4194 <dd>Koji Ishii. <a
fantasai@8478 4195 href="http://www.unicode.org/reports/tr50/"><cite>Unicode Properties for
fantasai@8478 4196 Vertical Text Layout.</cite></a> 28 May 2013. Proposed Draft Unicode
fantasai@8478 4197 Technical Report #50. URL: <a
fantasai@8478 4198 href="http://www.unicode.org/reports/tr50/">http://www.unicode.org/reports/tr50/</a>
fantasai@7057 4199 </dd>
fantasai@7057 4200 <!---->
fantasai@7057 4201 </dl>
fantasai@7057 4202 <!--end-normative-->
fantasai@7057 4203
fantasai@7057 4204 <h3 class=no-num id=other-references> Other references</h3>
fantasai@7057 4205 <!--begin-informative-->
fantasai@7057 4206 <!-- Sorted by label -->
fantasai@7057 4207
fantasai@7057 4208 <dl class=bibliography>
fantasai@8130 4209 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
fantasai@7057 4210 <!---->
fantasai@7057 4211
fantasai@7057 4212 <dt id=CSS2>[CSS2]
fantasai@7057 4213
fantasai@7057 4214 <dd>Ian Jacobs; et al. <a
fantasai@7057 4215 href="http://www.w3.org/TR/2008/REC-CSS2-20080411"><cite>Cascading Style
fantasai@7057 4216 Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C
fantasai@7057 4217 Recommendation. URL: <a
fantasai@7057 4218 href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a>
fantasai@7057 4219 </dd>
fantasai@7057 4220 <!---->
fantasai@7057 4221
fantasai@7057 4222 <dt id=CSS3COLOR>[CSS3COLOR]
fantasai@7057 4223
fantasai@7057 4224 <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
fantasai@7057 4225 href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
fantasai@7057 4226 Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
fantasai@7057 4227 href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
fantasai@7057 4228 </dd>
fantasai@7057 4229 <!---->
fantasai@7057 4230
fantasai@7057 4231 <dt id=CSS3LIST>[CSS3LIST]
fantasai@7057 4232
fantasai@7057 4233 <dd>Tab Atkins Jr. <a
fantasai@7057 4234 href="http://www.w3.org/TR/2011/WD-css3-lists-20110524"><cite>CSS Lists
fantasai@7057 4235 and Counters Module Level 3.</cite></a> 24 May 2011. W3C Working Draft.
fantasai@7057 4236 (Work in progress.) URL: <a
fantasai@7057 4237 href="http://www.w3.org/TR/2011/WD-css3-lists-20110524">http://www.w3.org/TR/2011/WD-css3-lists-20110524</a>
fantasai@7057 4238 </dd>
fantasai@7057 4239 <!---->
fantasai@7057 4240
fantasai@7057 4241 <dt id=CSS3PAGE>[CSS3PAGE]
fantasai@7057 4242
fantasai@8130 4243 <dd>Melinda Grant; et al. <a
fantasai@8130 4244 href="http://www.w3.org/TR/2013/WD-css3-page-20130314/"><cite>CSS Paged
fantasai@8130 4245 Media Module Level 3.</cite></a> 14 March 2013. W3C Working Draft. (Work
fantasai@8130 4246 in progress.) URL: <a
fantasai@8130 4247 href="http://www.w3.org/TR/2013/WD-css3-page-20130314/">http://www.w3.org/TR/2013/WD-css3-page-20130314/</a>
fantasai@7057 4248 </dd>
fantasai@7057 4249 <!---->
fantasai@7057 4250
fantasai@8678 4251 <dt id=CSS3TEXT>[CSS3TEXT]
fantasai@8678 4252
fantasai@8678 4253 <dd>Elika J. Etemad; Koji Ishii. <a
fantasai@8678 4254 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text
fantasai@8678 4255 Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in
fantasai@8678 4256 progress.) URL: <a
fantasai@8678 4257 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>
fantasai@8678 4258 </dd>
fantasai@8678 4259 <!---->
fantasai@8678 4260
fantasai@7057 4261 <dt id=HTML401>[HTML401]
fantasai@7057 4262
fantasai@7057 4263 <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a
fantasai@7057 4264 href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
fantasai@7057 4265 Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a
fantasai@7057 4266 href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
fantasai@7057 4267 </dd>
fantasai@7057 4268 <!---->
fantasai@7057 4269
fantasai@7057 4270 <dt id=HTML5>[HTML5]
fantasai@7057 4271
fantasai@7057 4272 <dd>Ian Hickson. <a
kojiishi@7378 4273 href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a>
kojiishi@7378 4274 17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL:
kojiishi@7378 4275 <a
kojiishi@7378 4276 href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a>
fantasai@7057 4277 </dd>
fantasai@7057 4278 <!---->
fantasai@7057 4279
fantasai@7057 4280 <dt id=UTN22>[UTN22]
fantasai@7057 4281
fantasai@7057 4282 <dd>Elika J. Etemad. <a href="http://unicode.org/notes/tn22/"><cite>Robust
fantasai@7057 4283 Vertical Text Layout.</cite></a> 25 April 2005. Unicode Technical Note
fantasai@7057 4284 #22. URL: <a
fantasai@7057 4285 href="http://unicode.org/notes/tn22/">http://unicode.org/notes/tn22/</a></dd>
fantasai@7057 4286 <!---->
fantasai@7057 4287 </dl>
fantasai@7057 4288 <!--end-informative-->
fantasai@7057 4289
fantasai@7057 4290 <h2 class=no-num id=property-index> Property Index</h2>
fantasai@7057 4291 <!--begin-properties-->
fantasai@7057 4292
fantasai@7057 4293 <table class=proptable>
fantasai@7057 4294 <thead>
fantasai@7057 4295 <tr>
fantasai@7057 4296 <th>Property
fantasai@7057 4297
fantasai@7057 4298 <th>Values
fantasai@7057 4299
fantasai@7057 4300 <th>Initial
fantasai@7057 4301
fantasai@7057 4302 <th>Applies to
fantasai@7057 4303
fantasai@7057 4304 <th>Inh.
fantasai@7057 4305
fantasai@7057 4306 <th>Percentages
fantasai@7057 4307
fantasai@7057 4308 <th>Media
fantasai@7057 4309
fantasai@7057 4310 <tbody>
fantasai@7057 4311 <tr>
fantasai@7057 4312 <th><a class=property href="#direction0">direction</a>
fantasai@7057 4313
fantasai@7057 4314 <td>ltr | rtl
fantasai@7057 4315
fantasai@7057 4316 <td>ltr
fantasai@7057 4317
fantasai@7057 4318 <td>all elements
fantasai@7057 4319
fantasai@7057 4320 <td>yes
fantasai@7057 4321
fantasai@7057 4322 <td>N/A
fantasai@7057 4323
fantasai@7057 4324 <td>visual
fantasai@7057 4325
fantasai@7057 4326 <tr>
fantasai@7057 4327 <th><a class=property
fantasai@7057 4328 href="#text-combine-horizontal0">text-combine-horizontal</a>
fantasai@7057 4329
kojiishi@7378 4330 <td>none | all | [ digits &lt;integer>? ]
fantasai@7057 4331
fantasai@7057 4332 <td>none
fantasai@7057 4333
fantasai@7057 4334 <td>non-replaced inline elements
fantasai@7057 4335
fantasai@8670 4336 <td>???
fantasai@7057 4337
fantasai@7057 4338 <td>N/A
fantasai@7057 4339
fantasai@7057 4340 <td>visual
fantasai@7057 4341
fantasai@7057 4342 <tr>
fantasai@7057 4343 <th><a class=property href="#text-orientation0">text-orientation</a>
fantasai@7057 4344
fantasai@7057 4345 <td>mixed | upright | sideways-right | sideways-left | sideways |
fantasai@7057 4346 use-glyph-orientation
fantasai@7057 4347
fantasai@7057 4348 <td>mixed
fantasai@7057 4349
fantasai@7057 4350 <td>all elements except table row groups, rows, column groups, and
fantasai@7057 4351 columns
fantasai@7057 4352
fantasai@7057 4353 <td>yes
fantasai@7057 4354
fantasai@7057 4355 <td>N/A
fantasai@7057 4356
fantasai@7057 4357 <td>visual
fantasai@7057 4358
fantasai@7057 4359 <tr>
fantasai@7057 4360 <th><a class=property href="#unicode-bidi0">unicode-bidi</a>
fantasai@7057 4361
fantasai@7057 4362 <td>normal | embed | isolate | bidi-override | isolate-override |
fantasai@7057 4363 plaintext
fantasai@7057 4364
fantasai@7057 4365 <td>normal
fantasai@7057 4366
fantasai@7057 4367 <td>all elements, but see prose
fantasai@7057 4368
fantasai@7057 4369 <td>no
fantasai@7057 4370
fantasai@7057 4371 <td>N/A
fantasai@7057 4372
fantasai@7057 4373 <td>visual
fantasai@7057 4374
fantasai@7057 4375 <tr>
fantasai@7057 4376 <th><a class=property href="#writing-mode1">writing-mode</a>
fantasai@7057 4377
fantasai@7057 4378 <td>horizontal-tb | vertical-rl | vertical-lr
fantasai@7057 4379
fantasai@7057 4380 <td>horizontal-tb
fantasai@7057 4381
fantasai@7057 4382 <td>All elements except table row groups, table column groups, table
fantasai@7057 4383 rows, and table columns
fantasai@7057 4384
fantasai@7057 4385 <td>yes
fantasai@7057 4386
fantasai@7057 4387 <td>N/A
fantasai@7057 4388
fantasai@7057 4389 <td>visual
fantasai@7057 4390 </table>
fantasai@7057 4391 <!--end-properties-->
fantasai@7057 4392 <!-- Add alphabetic index? -->

mercurial