drafts: css-writing-modes/Overview.html@9a46d52c3a86

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

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

     3 <html lang=en>

     4  <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">

     5   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>

     6   <title>CSS Writing Modes Module Level 3</title>

     8   <link href="http://purl.org/dc/terms/" rel=schema.dcterms>

     9   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"

    10    rel=dcterms.rights>

    11   <meta content="CSS Writing Modes Module Level 3" name=dcterms.title>

    12   <meta content=text name=dcterms.type>

    13   <meta content=2013-07-16 name=dcterms.date>

    14   <meta content="Elika J. Etemad" name=dcterms.creator>

    15   <meta content="Koji Ishii" name=dcterms.creator>

    16   <meta content=W3C name=dcterms.publisher>

    17   <meta content="http://dev.w3.org/csswg/css3-writing-modes/"

    18    name=dcterms.identifier>

    19   <link href="../default.css" rel=stylesheet type="text/css">

    20   <style type="text/css">

    21     object { vertical-align: middle; }

    22     .sidebar { float: right; background: #eee; border: solid gray; margin: 1em; }

    23     .sidebar .figure { margin: 1em; }

    24     .sidebar object { margin: 0 auto; display: block; }

    25     .figurepair { display: table; margin: 1em auto; }

    26     .figurepair .figure { display: table-cell; }

    27      h2, .example { clear: both; }

    28     .figure img,

    29     .figure object,

    30     .example img,

    31     dd img { max-width: 100%; display: block; margin: 1em auto; }

    32     div.figure table {

    33     	margin:auto;

    34     }

    35   </style>

    36   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet

    37    type="text/css">

    38   <script defer=defer

    39    src="http://test.csswg.org/harness/annotate.js#CSS3-WRITING-MODES_DEV"

    40    type="text/javascript"></script>

    42  <body>

    43   <div class=head> <!--begin-logo-->

    44    <p><a href="http://www.w3.org/"><img alt=W3C height=48

    45     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

    47    <h1>CSS Writing Modes Module Level 3</h1>

    49    <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 July 2013</h2>

    51    <dl>

    52     <dt>This version:

    54     <dd><a

    55      href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a>

    56      <!--

    57     <dd><a href="http://www.w3.org/TR/2013/WD-css3-writing-modes-20130716/">http://dev.w3.org/csswg/css3-writing-modes/</a>

    58 -->

    60     <dt>Latest version:

    62     <dd><a

    63      href="http://www.w3.org/TR/css3-writing-modes/">http://www.w3.org/TR/css3-writing-modes/</a>

    65     <dt>Latest editor's draft:

    67     <dd><a

    68      href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a>

    70     <dt>Previous version:

    72     <dd><a

    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>

    75     <dt>Issues List:

    77     <dd><a

    78      href="http://www.w3.org/Style/CSS/Tracker/products/30">http://www.w3.org/Style/CSS/Tracker/products/30</a>

    80     <dt>Feedback:

    82     <dd><a

    83      href="mailto:www-style@w3.org?subject=%5Bcss-writing-modes%5D%20feedback">www-style@w3.org</a>

    84      with subject line “<kbd>[css-writing-modes <var>… message topic

    85      …</var></kbd>” (<a

    86      href="http://lists.w3.org/Archives/Public/www-style/"

    87      rel=discussion>archives</a>)

    89     <dt>Editors:

    91     <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>

    92      (Mozilla)

    94     <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a>

    95      (Rakuten, Inc.)

    97     <dt>Previous Editors:

    99     <dd><a href="mailto:murakami@antenna.co.jp">Shinyu Murakami</a> (<a

   100      href="http://www.antenna.co.jp/">Antenna House</a>)

   102     <dd><a href="mailto:paulnel@microsoft.com">Paul Nelson</a> (<a

   103      href="http://www.microsoft.com/">Microsoft</a>)

   105     <dd><a href="mailto:michelsu@microsoft.com">Michel Suignard</a> (<a

   106      href="http://www.microsoft.com/">Microsoft</a>)

   108     <dt>Test Suite:

   110     <dd><a

   111      href="http://test.csswg.org/suites/css3-writing-modes/nightly-unstable/">http://test.csswg.org/suites/css3-writing-modes/nightly-unstable/</a>

   112    </dl>

   113    <!--begin-copyright-->

   114    <p class=copyright><a

   115     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"

   116     rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr

   117     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a

   118     href="http://www.csail.mit.edu/"><abbr

   119     title="Massachusetts Institute of Technology">MIT</abbr></a>, <a

   120     href="http://www.ercim.eu/"><abbr

   121     title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,

   122     <a href="http://www.keio.ac.jp/">Keio</a>, <a

   123     href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a

   124     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,

   125     <a

   126     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>

   127     and <a

   128     href="http://www.w3.org/Consortium/Legal/copyright-documents">document

   129     use</a> rules apply.</p>

   130    <!--end-copyright-->

   131    <hr title="Separator for header">

   132   </div>

   134   <h2 class="no-num no-toc" id=abstract> Abstract</h2>

   136   <p>CSS Writing Modes Level 3 defines CSS support for various international

   137    writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left

   138    (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and

   139    vertical (e.g. Asian scripts).

   141   <p>Inherently bottom-to-top scripts are not handled in this version. See <a

   142    href="#UTN22" rel=biblioentry>[UTN22]<!--{{UTN22}}--></a> for an

   143    explanation of relevant issues.

   145   <h2 class="no-num no-toc" id=status> Status of this document</h2>

   146   <!--begin-status-->

   148   <p>This is a public copy of the editors' draft. It is provided for

   149    discussion only and may change at any moment. Its publication here does

   150    not imply endorsement of its contents by W3C. Don't cite this document

   151    other than as work in progress.

   153   <p>The (<a

   154    href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public

   155    mailing list <a

   156    href="mailto:www-style@w3.org?Subject=%5Bcss3-writing-modes%5D%20PUT%20SUBJECT%20HERE">

   157    www-style@w3.org</a> (see <a

   158    href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for

   159    discussion of this specification. When sending e-mail, please put the text

   160    “css3-writing-modes” in the subject, preferably like this:

   161    “[<!---->css3-writing-modes<!---->] <em>…summary of comment…</em>”

   163   <p>This document was produced by the <a

   164    href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of

   165    the <a href="http://www.w3.org/Style/">Style Activity</a>).

   167   <p>This document was produced by a group operating under the <a

   168    href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February

   169    2004 W3C Patent Policy</a>. W3C maintains a <a

   170    href="http://www.w3.org/2004/01/pp-impl/32061/status"

   171    rel=disclosure>public list of any patent disclosures</a> made in

   172    connection with the deliverables of the group; that page also includes

   173    instructions for disclosing a patent. An individual who has actual

   174    knowledge of a patent which the individual believes contains <a

   175    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential

   176    Claim(s)</a> must disclose the information in accordance with <a

   177    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section

   178    6 of the W3C Patent Policy</a>.</p>

   179   <!--end-status-->

   181   <p>The following features are at-risk and may be dropped during CR:

   183   <ul>

   184    <li>The ‘<a href="#use-glyph-orientation"><code

   185     class=css>use-glyph-orientation</code></a>’ of ‘<a

   186     href="#text-orientation0"><code

   187     class=property>text-orientation</code></a>’

   189    <li>The ‘<code class=css>digits</code>’ value of ‘<a

   190     href="#text-combine-horizontal0"><code

   191     class=property>text-combine-horizontal</code></a>’.

   192   </ul>

   194   <h2 class="no-num no-toc" id=Contents> Table of Contents</h2>

   195   <!--begin-toc-->

   197   <ul class=toc>

   198    <li><a href="#text-flow"><span class=secno>1. </span> Introduction to

   199     Writing Modes</a>

   200     <ul class=toc>

   201      <li><a href="#placement"><span class=secno>1.1. </span> Module

   202       Interactions</a>

   204      <li><a href="#values"><span class=secno>1.2. </span> Values</a>

   205     </ul>

   207    <li><a href="#text-direction"><span class=secno>2. </span> Inline

   208     Direction and Bidirectionality</a>

   209     <ul class=toc>

   210      <li><a href="#direction"><span class=secno>2.1. </span> Specifying

   211       Directionality: the ‘<code class=property>direction</code>’

   212       property</a>

   214      <li><a href="#unicode-bidi"><span class=secno>2.2. </span> Embeddings

   215       and Overrides: the ‘<code class=property>unicode-bidi</code>’

   216       property</a>

   218      <li><a href="#bidi-example"><span class=secno>2.3. </span> Example of

   219       Bidirectional Text</a>

   221      <li><a href="#bidi-box-model"><span class=secno>2.4. </span> Box model

   222       for inline elements in bidirectional context</a>

   223     </ul>

   225    <li><a href="#vertical-intro"><span class=secno>3. </span> Introduction to

   226     Vertical Text</a>

   227     <ul class=toc>

   228      <li><a href="#writing-mode"><span class=secno>3.1. </span> Block Flow

   229       Direction: the ‘<code class=property>writing-mode</code>’

   230       property</a>

   231       <ul class=toc>

   232        <li><a href="#svg-writing-mode"><span class=secno>3.1.1. </span>

   233         SVG1.1 ‘<code class=property>writing-mode</code>’ Values</a>

   234       </ul>

   235     </ul>

   237    <li><a href="#inline-alignment"><span class=secno>4. </span> Inline-level

   238     Alignment</a>

   239     <ul class=toc>

   240      <li><a href="#intro-baselines"><span class=secno>4.1. </span>

   241       Introduction to Baselines</a>

   243      <li><a href="#text-baselines"><span class=secno>4.2. </span> Text

   244       Baselines</a>

   246      <li><a href="#replaced-baselines"><span class=secno>4.3. </span> Atomic

   247       Inline Baselines</a>

   249      <li><a href="#baseline-alignment"><span class=secno>4.4. </span>

   250       Baseline Alignment</a>

   251     </ul>

   253    <li><a href="#intro-text-layout"><span class=secno>5. </span> Introduction

   254     to Vertical Text Layout</a>

   255     <ul class=toc>

   256      <li><a href="#text-orientation"><span class=secno>5.1. </span> Orienting

   257       Text: the ‘<code class=property>text-orientation</code>’

   258       property</a>

   259       <ul class=toc>

   260        <li><a href="#vertical-orientations"><span class=secno>5.1.1. </span>

   261         Mixed Vertical Orientations</a>

   263        <li><a href="#vertical-font-features"><span class=secno>5.1.2. </span>

   264         Vertical Typesetting and Font Features</a>

   265       </ul>

   266     </ul>

   268    <li><a href="#abstract-box"><span class=secno>6. </span> Abstract Box

   269     Terminology</a>

   270     <ul class=toc>

   271      <li><a href="#abstract-dimensions"><span class=secno>6.1. </span>

   272       Abstract Dimensions</a>

   274      <li><a href="#logical-directions"><span class=secno>6.2. </span>

   275       Flow-relative Directions</a>

   277      <li><a href="#line-directions"><span class=secno>6.3. </span>

   278       Line-relative Directions</a>

   280      <li><a href="#logical-to-physical"><span class=secno>6.4. </span>

   281       Abstract-to-Physical Mappings</a>

   282     </ul>

   284    <li><a href="#abstract-layout"><span class=secno>7. </span> Abstract Box

   285     Layout</a>

   286     <ul class=toc>

   287      <li><a href="#vertical-layout"><span class=secno>7.1. </span> Principles

   288       of Layout in Vertical Writing Modes</a>

   290      <li><a href="#dimension-mapping"><span class=secno>7.2. </span>

   291       Dimensional Mapping</a>

   293      <li><a href="#orthogonal-flows"><span class=secno>7.3. </span>

   294       Orthogonal Flows</a>

   295       <ul class=toc>

   296        <li><a href="#orthogonal-auto"><span class=secno>7.3.1. </span>

   297         Auto-sizing in Orthogonal Flows</a>

   299        <li><a href="#orthogonal-multicol"><span class=secno>7.3.2. </span>

   300         Multi-column Layout in Orthogonal Flows</a>

   302        <li><a href="#orthogonal-pagination"><span class=secno>7.3.3. </span>

   303         Fragmenting Orthogonal Flows</a>

   304       </ul>

   306      <li><a href="#logical-direction-layout"><span class=secno>7.4. </span>

   307       Flow-Relative Mappings</a>

   309      <li><a href="#line-mappings"><span class=secno>7.5. </span>

   310       Line-Relative Mappings</a>

   312      <li><a href="#physical-only"><span class=secno>7.6. </span> Purely

   313       Physical Mappings</a>

   315      <li><a href="#caption-side"><span class=secno>7.7. </span> Table Caption

   316       Mappings: the ‘<code class=property>caption-side</code>’

   317       keywords</a>

   318     </ul>

   320    <li><a href="#page-direction"><span class=secno>8. </span> Page Flow: the

   321     page progression direction</a>

   323    <li><a href="#text-combine"><span class=secno>9. </span> Glyph

   324     Composition</a>

   325     <ul class=toc>

   326      <li><a href="#text-combine-horizontal"><span class=secno>9.1. </span>

   327       Horizontal-in-Vertical Composition: the ‘<code

   328       class=property>text-combine-horizontal</code>’ property</a>

   329     </ul>

   331    <li class=no-num><a href="#changes">Changes</a>

   332     <ul class=toc>

   333      <li class=no-num><a href="#recent-changes"> Changes since the May 2012

   334       CSS Writing Modes Module Level 3 <abbr

   335       title="Working Draft">WD</abbr></a>

   337      <li class=no-num><a href="#changes-201109"> Changes since the September

   338       2011 CSS Writing Modes Module Level 3 <abbr

   339       title="Working Draft">WD</abbr></a>

   340     </ul>

   342    <li><a href="#conformance"><span class=secno>10. </span> Conformance</a>

   343     <ul class=toc>

   344      <li><a href="#conventions"><span class=secno>10.1. </span> Document

   345       Conventions</a>

   347      <li><a href="#conformance-classes"><span class=secno>10.2. </span>

   348       Conformance Classes</a>

   350      <li><a href="#partial"><span class=secno>10.3. </span> Partial

   351       Implementations</a>

   353      <li><a href="#experimental"><span class=secno>10.4. </span> Experimental

   354       Implementations</a>

   356      <li><a href="#testing"><span class=secno>10.5. </span>Non-Experimental

   357       Implementations</a>

   359      <li><a href="#cr-exit-criteria"><span class=secno>10.6. </span> CR Exit

   360       Criteria</a>

   361     </ul>

   363    <li class=no-num><a href="#acknowledgements"> Acknowledgements</a>

   365    <li class=no-num><a href="#character-properties">Appendix A. Characters

   366     and Properties</a>

   368    <li class=no-num><a href="#bidi-html"> Appendix B: Bidi Rules for HTML

   369     4</a>

   371    <li class=no-num><a href="#script-orientations">Appendix C: Vertical

   372     Scripts in Unicode</a>

   374    <li class=no-num><a href="#references"> References</a>

   375     <ul class=toc>

   376      <li class=no-num><a href="#normative-references"> Normative

   377       references</a>

   379      <li class=no-num><a href="#other-references"> Other references</a>

   380     </ul>

   382    <li class=no-num><a href="#property-index"> Property Index</a>

   383   </ul>

   384   <!--end-toc-->

   386   <h2 id=text-flow><span class=secno>1. </span> Introduction to Writing Modes</h2>

   388   <p>CSS Writing Modes Level 3 defines CSS features to support for various

   389    international writing modes, such as left-to-right (e.g. Latin or Indic),

   390    right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and

   391    Arabic) and vertical (e.g. Asian scripts).

   393   <p>A <dfn id=writing-mode0>writing mode</dfn> in CSS is determined by the

   394    ‘<a href="#writing-mode1"><code

   395    class=property>writing-mode</code></a>’, ‘<a href="#direction0"><code

   396    class=property>direction</code></a>’, and ‘<a

   397    href="#text-orientation0"><code

   398    class=property>text-orientation</code></a>’ properties. It is defined

   399    primarily in terms of its <a href="#inline-base-direction"><i>inline base

   400    direction</i></a> and <a href="#block-flow-direction"><i>block flow

   401    direction</i></a>:

   403   <div class=sidebar>

   404    <div class="figure right"> <a href="diagrams/text-flow-vectors-tb.svg"

   405     type="image/svg+xml"> <img alt="Latin-based writing mode" class=landscape

   406     src="diagrams/text-flow-vectors-tb.png"></a>

   407     <p class=caption>Latin-based writing mode

   408    </div>

   410    <div class="figure left"> <a

   411     href="diagrams/text-flow-vectors-lr-reverse.svg" type="image/svg+xml">

   412     <img alt="Mongolian-based writing mode" class=landscape

   413     src="diagrams/text-flow-vectors-lr-reverse.png"></a>

   414     <p class=caption>Mongolian-based writing mode

   415    </div>

   417    <div class="figure right"> <a href="diagrams/text-flow-vectors-tb.svg"

   418     type="image/svg+xml"> <img alt="Han-based writing mode" class=landscape

   419     src="diagrams/text-flow-vectors-tb.png"></a> <a

   420     href="diagrams/text-flow-vectors-rl.svg" type="image/svg+xml"> <img

   421     alt="Han-based writing mode" class=landscape

   422     src="diagrams/text-flow-vectors-rl.png"></a>

   423     <p class=caption>Han-based writing mode

   424    </div>

   425   </div>

   427   <p>The <dfn id=inline-base-direction>inline base direction</dfn> is the

   428    primary direction in which content is ordered on a line and defines on

   429    which sides the “start” and “end” of a line are. The ‘<a

   430    href="#direction0"><code class=property>direction</code></a>’ property

   431    specifies the inline base direction of an element and, together with the

   432    ‘<a href="#unicode-bidi0"><code

   433    class=property>unicode-bidi</code></a>’ property and the inherent

   434    directionality of any text content, determines the ordering of

   435    inline-level content within a line.

   437   <p>The <dfn id=block-flow-direction>block flow direction</dfn> is the

   438    direction in which block-level boxes stack and the direction in which line

   439    boxes stack within a block container. The ‘<a

   440    href="#writing-mode1"><code class=property>writing-mode</code></a>’

   441    property determines the block flow direction.

   443   <p>A <dfn id=horizontal-writing-mode>horizontal writing mode</dfn> is one

   444    with horizontal lines of text, i.e. a downward or upward block flow. A

   445    <dfn id=vertical-writing-mode>vertical writing mode</dfn> is one with

   446    vertical lines of text, i.e. a leftward or rightward block flow.

   448   <p class=note>These terms should not be confused with <dfn

   449    id=vertical-block-flow>vertical block flow</dfn> (which is a downward or

   450    upward block flow) and <dfn id=horizontal-block-flow>horizontal block

   451    flow</dfn> (which is leftward or rightward block flow). To avoid

   452    confusion, CSS specifications avoid this latter set of terms.

   454   <p>Writing systems typically have one or two native writing modes. Some

   455    examples are:

   457   <ul>

   458    <li>Latin-based systems are typically written using a left-to-right inline

   459     direction with a downward (top-to-bottom) block flow direction.

   461    <li>Arabic-based systems are typically written using a right-to-left

   462     inline direction with a downward (top-to-bottom) block flow direction.

   464    <li>Mongolian-based systems are typically written using a top-to-bottom

   465     inline direction with a rightward (left-to-right) block flow direction.

   467    <li>Han-based systems are commonly written using a left-to-right inline

   468     direction with a downward (top-to-bottom) block flow direction,

   469     <strong>or</strong> a top-to-bottom inline direction with a leftward

   470     (right-to-left) block flow direction. Many magazines and newspapers will

   471     mix these two writing modes on the same page.

   472   </ul>

   474   <p>The ‘<a href="#text-orientation0"><code

   475    class=property>text-orientation</code></a>’ component of the writing

   476    mode determines the <a href="#line-orientation"><i>line

   477    orientation</i></a>, and controls details of text layout such as the

   478    <i>glyph orientation</i>.

   480   <p class=note>See Unicode Technical Note #22 <a href="#UTN22"

   481    rel=biblioentry>[UTN22]<!--{{UTN22}}--></a> (<a

   482    href="http://fantasai.inkedblade.net/style/discuss/vertical-text/paper">HTML

   483    version</a>) for a more in-depth introduction to writing modes and

   484    vertical text.

   486   <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>

   488   <p>This module replaces and extends the ‘<a href="#unicode-bidi0"><code

   489    class=property>unicode-bidi</code></a>’ and ‘<a

   490    href="#direction0"><code class=property>direction</code></a>’ features

   491    defined in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

   492    sections 8.6 and 9.10.

   494   <h3 id=values><span class=secno>1.2. </span> Values</h3>

   496   <p>This specification follows the <a

   497    href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property

   498    definition conventions</a> from <a href="#CSS21"

   499    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in

   500    this specification are defined in CSS Level 2 Revision 1 <a

   501    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS

   502    modules may expand the definitions of these value types: for example <a

   503    href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,

   504    when combined with this module, expands the definition of the

   505    &lt;color&gt; value type as used in this specification.

   507   <p>In addition to the property-specific values listed in their definitions,

   508    all properties defined in this specification also accept the <a

   509    href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>

   510    keyword as their property value. For readability it has not been repeated

   511    explicitly.

   513   <h2 id=text-direction><span class=secno>2. </span><a name=bidi> Inline

   514    Direction and Bidirectionality</a></h2>

   516   <p>While the characters in most scripts are written from left to right,

   517    certain scripts are written from right to left. In some documents, in

   518    particular those written with the Arabic or Hebrew script, and in some

   519    mixed-language contexts, text in a single (visually displayed) block may

   520    appear with mixed directionality. This phenomenon is called <span

   521    class=index-def id=bidirectionality0 title="bidirectionality (bidi)"><dfn

   522    id=bidirectionality>bidirectionality</dfn></span>, or "bidi" for short.

   524   <div class=figure>

   525    <p><img

   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."

   527     src="diagrams/bidi.png">

   529    <p class=caption>Bidirectionality

   530   </div>

   532   <p>The Unicode standard (<a

   533    href="http://www.unicode.org/reports/tr9/">Unicode Standard Annex #9</a>)

   534    defines a complex algorithm for determining the proper ordering of

   535    bidirectional text. The algorithm consists of an implicit part based on

   536    character properties, as well as explicit controls for embeddings and

   537    overrides. CSS relies on this algorithm to achieve proper bidirectional

   538    rendering.

   540   <p>User agents that support bidirectional text must apply the Unicode

   541    bidirectional algorithm to every sequence of inline-level boxes

   542    uninterrupted by any block boundary or “<a

   543    href="http://www.unicode.org/reports/tr9/#Bidirectional_Character_Types">bidi

   544    type B</a>” <dfn id=forced-paragraph-break>forced paragraph break</dfn>.

   545    This sequence forms the <dfn id=paragraph

   546    title="bidi paragraph">paragraph</dfn> unit in the bidirectional

   547    algorithm. Additionally, any such sequence forming part or all of the

   548    contents of a <a href="#bidi-isolate"><i>bidi-isolated</i></a> inline

   549    element also forms a <a href="#paragraph"><i>bidi paragraph</i></a>.

   551   <p>Two CSS properties, ‘<a href="#direction0"><code

   552    class=property>direction</code></a>’ and ‘<a

   553    href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’,

   554    provide explicit embedding, isolation, and override controls in the CSS

   555    layer. Because the base directionality of a text depends on the structure

   556    and semantics of the document, the ‘<a href="#direction0"><code

   557    class=property>direction</code></a>’ and ‘<a

   558    href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’

   559    properties should in most cases be used only to map bidi information in

   560    the markup to its corresponding CSS styles. <strong>If a document language

   561    provides markup features to control bidi, authors and users should use

   562    those features instead</strong> and not specify CSS rules to override

   563    them.

   565   <p>In general, the paragraph embedding level is set according to the ‘<a

   566    href="#direction0"><code class=property>direction</code></a>’ property

   567    of the paragraph's containing block rather than by the heuristic given in

   568    steps P2 and P3 of the Unicode algorithm. <a href="#UAX9"

   569    rel=biblioentry>[UAX9]<!--{{!UAX9}}--></a> When the computed ‘<a

   570    href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ of

   571    the paragraph's containing block is ‘<a href="#plaintext"><code

   572    class=css>plaintext</code></a>’, however, the Unicode heuristics (rules

   573    P2 and P3) are used instead.

   575   <p>The HTML specifications (<a href="#HTML401"

   576    rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, section 8.2, and <a

   577    href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>, section 10.3.5)

   578    define bidirectionality behavior for HTML elements.

   580   <p class=note>Because HTML UAs can turn off CSS styling, we advise HTML

   581    authors to use the HTML ‘<code class=property>dir</code>’ attribute

   582    and &lt;bdo&gt; element to ensure correct bidirectional layout in the

   583    absence of a style sheet.

   585   <h3 id=direction><span class=secno>2.1. </span> Specifying Directionality:

   586    the ‘<a href="#direction0"><code class=property>direction</code></a>’

   587    property</h3>

   589   <table class=propdef>

   590    <tbody>

   591     <tr>

   592      <th>Name:

   594      <td><dfn id=direction0>direction</dfn>

   596     <tr>

   597      <th><a href="#values">Value</a>:

   599      <td>ltr | rtl

   601     <tr>

   602      <th>Initial:

   604      <td>ltr

   606     <tr>

   607      <th>Applies to:

   609      <td>all elements

   611     <tr>

   612      <th>Inherited:

   614      <td>yes

   616     <tr>

   617      <th>Percentages:

   619      <td>N/A

   621     <tr>

   622      <th>Media:

   624      <td>visual

   626     <tr>

   627      <th>Computed value:

   629      <td>specified value

   630   </table>

   632   <p>This property specifies the inline base direction or directionality of

   633    any bidi paragraph, embedding, isolate, or override established by the

   634    element. (See ‘<a href="#unicode-bidi0"><code

   635    class=property>unicode-bidi</code></a>’.) <!-- except plaintext --> In

   636    addition, it informs the ordering of <a

   637    href="http://www.w3.org/TR/CSS21/tables.html">table</a> column layout, the

   638    direction of horizontal <a

   639    href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>, and

   640    the default alignment of text within a line, and other layout effects that

   641    depend on the element's inline base direction.

   643   <p>Values for this property have the following meanings:

   645   <dl>

   646    <dt><dfn id=ltr>ltr</dfn>

   648    <dd>Left-to-right directionality.

   650    <dt><dfn id=rtl>rtl</dfn>

   652    <dd>Right-to-left directionality.

   653   </dl>

   655   <p class=note>The ‘<a href="#direction0"><code

   656    class=property>direction</code></a>’ property has no effect on bidi

   657    reordering when specified on inline elements whose ‘<a

   658    href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’

   659    property's value is ‘<a href="#normal"><code

   660    class=css>normal</code></a>’, because the element does not open an

   661    additional level of embedding with respect to the bidirectional algorithm.

   663   <p>The value of the ‘<a href="#direction0"><code

   664    class=property>direction</code></a>’ property on the root element is

   665    also propagated to the initial containing block and, together with the

   666    ‘<a href="#writing-mode1"><code

   667    class=property>writing-mode</code></a>’ property, determines the

   668    document's principal writing mode. (See <a

   669    href="#principal-writing-mode">below</a>.)

   671   <p class=note>Note that the ‘<a href="#direction0"><code

   672    class=property>direction</code></a>’ property of the HTML BODY element

   673    is <em>not</em> propagated to the viewport. That special behavior only

   674    applies to the background and overflow properties.

   676   <p class=note>The ‘<a href="#direction0"><code

   677    class=property>direction</code></a>’ property, when specified for table

   678    column elements, is not inherited by cells in the column since columns are

   679    not the ancestors of the cells in the document tree. Thus, CSS cannot

   680    easily capture the "dir" attribute inheritance rules described in <a

   681    href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, section

   682    11.3.2.1.

   684   <h3 id=unicode-bidi><span class=secno>2.2. </span> Embeddings and

   685    Overrides: the ‘<a href="#unicode-bidi0"><code

   686    class=property>unicode-bidi</code></a>’ property</h3>

   688   <table class=propdef>

   689    <tbody>

   690     <tr>

   691      <th>Name:

   693      <td><dfn id=unicode-bidi0>unicode-bidi</dfn>

   695     <tr>

   696      <th><a href="#values">Value</a>:

   698      <td>normal | embed | isolate | bidi-override | isolate-override |

   699       plaintext

   701     <tr>

   702      <th>Initial:

   704      <td>normal

   706     <tr>

   707      <th>Applies to:

   709      <td>all elements, but see prose

   711     <tr>

   712      <th>Inherited:

   714      <td>no

   716     <tr>

   717      <th>Percentages:

   719      <td>N/A

   721     <tr>

   722      <th>Media:

   724      <td>visual

   726     <tr>

   727      <th>Computed value:

   729      <td>specified value

   730   </table>

   732   <p>Normally (i.e. when ‘<a href="#unicode-bidi0"><code

   733    class=property>unicode-bidi</code></a>’ is ‘<a href="#normal"><code

   734    class=css>normal</code></a>’) an inline element is transparent to the

   735    unicode bidi algorithm; content is ordered as if the element's boundaries

   736    were not there. Other values of the ‘<a href="#unicode-bidi0"><code

   737    class=property>unicode-bidi</code></a>’ property cause inline elements

   738    to create scopes within the algorithm, and to override the intrinsic

   739    directionality of text.

   741   <p>The following informative table summarizes the element-internal and

   742    element-external effects of ‘<a href="#unicode-bidi0"><code

   743    class=property>unicode-bidi</code></a>’:

   745   <table class=data>

   746    <caption>Effect of non-‘<a href="#normal"><code

   747     class=css>normal</code></a>’ values of ‘<a

   748     href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ on

   749     inline elements</caption>

   751    <colgroup span=2></colgroup>

   753    <colgroup span=3></colgroup>

   755    <thead>

   756     <tr>

   757      <th colspan=2 rowspan=2>

   759      <th colspan=3 scope=rowgroup><abbr

   760       title="To surrounding contents, the element behaves as if its boundary were...">Outside</abbr>

   762     <tr>

   763      <th><abbr

   764       title="a strong character of the element's 'direction'.">strong</abbr>

   766      <th><abbr title="a neutral character.">neutral</abbr>

   768    <tbody>

   769     <tr>

   770      <th rowspan=3 scope=colgroup><abbr

   771       title="Within the element, content is ordered as if...">Inside</abbr>

   773      <th><abbr

   774       title="the element's boundaries were strong characters of the element's 'direction'.">scoped</abbr>

   776      <td>‘<a href="#embed"><code class=css>embed</code></a>’

   778      <td>‘<a href="#isolate"><code class=css>isolate</code></a>’

   780     <tr>

   781      <th><abbr

   782       title="all text consisted of strong characters of the element's 'direction'.">override</abbr>

   784      <td>‘<a href="#bidi-override"><code

   785       class=css>bidi-override</code></a>’

   787      <td>‘<a href="#isolate-override"><code

   788       class=css>isolate-override</code></a>’

   790     <tr>

   791      <th><abbr

   792       title="the element were a standalone paragraph ordered using UAX9 heuristics.">plaintext

   793       </abbr>

   795      <td>—

   797      <td>‘<a href="#plaintext"><code class=css>plaintext</code></a>’

   798   </table>

   800   <p>Values for this property have the following (normative) meanings:

   802   <dl>

   803    <dt><dfn id=normal>normal</dfn>

   805    <dd>The element does not open an additional level of embedding with

   806     respect to the bidirectional algorithm. For inline elements, implicit

   807     reordering works across element boundaries.

   809    <dt><dfn id=embed>embed</dfn>

   811    <dd>If the element is inline, this value creates a <dfn

   812     id=directional-embedding>directional embedding</dfn> by opening an

   813     additional level of embedding with respect to the bidirectional

   814     algorithm. The direction of this embedding level is given by the ‘<a

   815     href="#direction0"><code class=property>direction</code></a>’ property.

   816     Inside the element, reordering is done implicitly. This corresponds to

   817     adding a LRE (U+202A), for ‘<code class=css>direction: ltr</code>’,

   818     or RLE (U+202B), for ‘<code class=css>direction: rtl</code>’, at the

   819     start of the element and a PDF (U+202C) at the end of the element. <span

   820     class=note>This value has no effect on elements that are not

   821     inline.</span>

   823    <dt><dfn id=isolate>isolate</dfn>

   825    <dd>On an inline element, this <dfn id=bidi-isolate

   826     title="bidi-isolate|bidi isolation|isolation">bidi-isolates</dfn> its

   827     contents. This is similar to a directional embedding (and increases the

   828     embedding level accordingly) except that each sequence of inline-level

   829     boxes uninterrupted by any block boundary or <a

   830     href="#forced-paragraph-break"><i>forced paragraph break</i></a> is

   831     treated as an <dfn id=isolated-sequence->isolated sequence<dfn id=x>:

   832     </dfn></dfn>

   833     <ul>

   834      <li>the content within the sequence is ordered as if inside an

   835       independent paragraph with the base directionality specified by the

   836       element's ‘<a href="#direction0"><code

   837       class=property>direction</code></a>’ property.

   839      <li>for the purpose of bidi resolution in its containing bidi paragraph,

   840       the sequence is treated as if it were a single Object Replacement

   841       Character (U+FFFC).

   842     </ul>

   843     In effect, neither is the content inside the element bidi-affected by the

   844     content surrounding the element, nor is the content surrounding the

   845     element bidi-affected by the content or specified directionality of the

   846     element. However, <a href="#forced-paragraph-break"><i>forced paragraph

   847     breaks</i></a> within the element still create a corresponding break in

   848     the containing paragraph.

   849     <p class=note>In Unicode 6.3 and beyond, this will correspond to adding

   850      an LRI (U+2066), for ‘<code class=css>direction: ltr</code>’, or RLI

   851      (U+2067), for ‘<code class=css>direction: rtl</code>’, at the start

   852      of the element, and a PDI (U+2069) at the end of the element.

   854     <p class=note>This value has no effect on elements that are not inline.

   856    <dt><dfn id=bidi-override>bidi-override</dfn>

   858    <dd>This value puts the element's immediate content in a <dfn

   859     id=directional-override>directional override</dfn>. For an inline, this

   860     means that the element acts like a <a

   861     href="#directional-embedding"><i>directional embedding</i></a> in the

   862     bidirectional algorithm, except that reordering within it is strictly in

   863     sequence according to the ‘<a href="#direction0"><code

   864     class=property>direction</code></a>’ property; the implicit part of the

   865     bidirectional algorithm is ignored. This corresponds to adding a LRO

   866     (U+202D), for ‘<code class=css>direction: ltr</code>’, or RLO

   867     (U+202E), for ‘<code class=css>direction: rtl</code>’, at the start

   868     of the element and a PDF (U+202C) at the end of the element. If the

   869     element is a block container, the override is applied to an anonymous

   870     inline element that surrounds all of its content.

   872    <dt><dfn id=isolate-override>isolate-override<dfn id=x0></dfn></dfn>

   874    <dd>This combines the <a href="#bidi-isolate"><i>isolation</i></a>

   875     behavior of ‘<a href="#isolate"><code class=css>isolate</code></a>’

   876     with the <i>override</i> behavior of ‘<a href="#bidi-override"><code

   877     class=css>bidi-override</code></a>’: to surrounding content, it is

   878     equivalent to ‘<a href="#isolate"><code

   879     class=css>isolate</code></a>’, but within the element content is

   880     ordered as if ‘<a href="#bidi-override"><code

   881     class=css>bidi-override</code></a>’ were specified.

   883    <dt><dfn id=plaintext>plaintext</dfn>

   885    <dd>

   886     <p>This value behaves as ‘<a href="#isolate"><code

   887      class=css>isolate</code></a>’ except that for the purposes of the

   888      Unicode bidirectional algorithm, the base directionality of each of the

   889      element's <a href="#paragraph"><i>bidi paragraphs</i></a> (if a block

   890      container) or <a href="#isolated-sequence-"><i>isolated

   891      sequences</i></a> (if an inline) is determined by following the

   892      heuristic in rules P2 and P3 of the Unicode bidirectional algorithm

   893      (rather than by using the ‘<a href="#direction0"><code

   894      class=property>direction</code></a>’ property of the element).

   896     <p class=note>In Unicode 6.3 and beyond, for inline elements this will

   897      correspond to adding an FSI (U+2068) at the start of the element, and a

   898      PDI (U+2069) at the end of the element.

   899   </dl>

   901   <p class=note>Because the ‘<a href="#unicode-bidi0"><code

   902    class=property>unicode-bidi</code></a>’ property does not inherit,

   903    setting ‘<a href="#bidi-override"><code

   904    class=css>bidi-override</code></a>’ or ‘<a href="#plaintext"><code

   905    class=css>plaintext</code></a>’ on a block element will not affect any

   906    descendant blocks. Therefore these values are best used on blocks and

   907    inlines that do not contain any block-level structures.

   909   <p class=note>Note that ‘<a href="#unicode-bidi0"><code

   910    class=property>unicode-bidi</code></a>’ does not affect the ‘<a

   911    href="#direction0"><code class=property>direction</code></a>’ property

   912    even in the case of ‘<a href="#plaintext"><code

   913    class=css>plaintext</code></a>’, and thus does not affect ‘<a

   914    href="#direction0"><code class=property>direction</code></a>’-dependent

   915    layout calculations.

   917   <p>The final order of characters within each <a href="#paragraph"><i>bidi

   918    paragraph</i></a> is the same as if the bidi control codes had been added

   919    as described above, markup had been stripped, and the resulting character

   920    sequence had been passed to an implementation of the Unicode bidirectional

   921    algorithm for plain text that produced the same line-breaks as the styled

   922    text.

   924   <p>In this process, replaced elements with ‘<code class=css>display:

   925    inline</code>’ are treated as neutral characters, unless their ‘<a

   926    href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’

   927    property is either ‘<a href="#embed"><code

   928    class=property>embed</code></a>’ or ‘<a href="#bidi-override"><code

   929    class=property>bidi-override</code></a>’, in which case they are treated

   930    as strong characters in the ‘<a href="#direction0"><code

   931    class=property>direction</code></a>’ specified for the element. All

   932    other atomic inline-level boxes are treated as neutral characters always.

   934   <p>If an inline element is broken around a <a href="#paragraph"><i>bidi

   935    paragraph</i></a> boundary (e.g. if split by a block or <a

   936    href="#forced-paragraph-break"><i>forced paragraph break</i></a>), then

   937    the bidi control codes assigned to the end of the element are added before

   938    the interruption and the codes assigned to the start of the element are

   939    added after it. (In other words, any embedding levels or overrides started

   940    by the element are closed at the paragraph break and reopened on the other

   941    side of it.)

   943   <div class=example>

   944    <p>For example, where &lt;BR/&gt; is a <a

   945     href="#forced-paragraph-break"><i>forced paragraph break</i></a> the bidi

   946     ordering is identical between

   948    <pre>&lt;para>...&lt;i1>&lt;i2>...&lt;BR/>...&lt;/i2>&lt;i1>...&lt;/para></pre>

   950    <p>and

   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>

   954    <p>for all values of ‘<a href="#unicode-bidi0"><code

   955     class=property>unicode-bidi</code></a>’ on inline elements &lt;i1&gt;

   956     and &lt;i2&gt;.

   957   </div>

   959   <p class=note> Because the Unicode algorithm has a limit of 61 levels of

   960    embedding, care should be taken not to use ‘<a

   961    href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’ with

   962    a value other than ‘<a href="#normal"><code

   963    class=property>normal</code></a>’ unless appropriate. In particular, a

   964    value of ‘<code class=css>inherit</code>’ should be used with extreme

   965    caution. However, for elements that are, in general, intended to be

   966    displayed as blocks, a setting of ‘<code class=css>unicode-bidi:

   967    isolate</code>’ is preferred to keep the element together in case the

   968    ‘<code class=property>display</code>’ is changed to ‘<code

   969    class=css>inline</code>’ (see example below).

   971   <h3 id=bidi-example><span class=secno>2.3. </span> Example of Bidirectional

   972    Text</h3>

   974   <p>The following example shows an SGML document with bidirectional text. It

   975    illustrates an important design principle: document language designers

   976    should take bidi into account both in the language proper (elements and

   977    attributes) and in any accompanying style sheets. The style sheets should

   978    be designed so that bidi rules are separate from other style rules, and

   979    such rules should not be overridden by other style sheets so that the

   980    document language's bidi behavior is preserved.

   982   <div class=example>

   983    <p>In this example, lowercase letters stand for inherently left-to-right

   984     characters and uppercase letters represent inherently right-to-left

   985     characters. The text stream is shown in logical backing store order.

   987    <pre class=xml-example><code class=xml>

   988 &lt;section dir=rtl&gt;

   989   &lt;para&gt;HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5&lt;/para&gt;

   990   &lt;para&gt;HEBREW6 &lt;emphasis&gt;HEBREW7&lt;/emphasis&gt; HEBREW8&lt;/para&gt;

   991 &lt;/section&gt;

   992 &lt;section dir=ltr&gt;

   993   &lt;para&gt;english9 english10 english11 HEBREW12 HEBREW13&lt;/para&gt;

   994   &lt;para&gt;english14 english15 english16&lt;/para&gt;

   995   &lt;para&gt;english17 &lt;quote dir=rtl&gt;HEBREW18 english19 HEBREW20&lt;/quote&gt;&lt;/para&gt;

   996 &lt;/section&gt;

   997     </code></pre>

   999    <p>Since this is arbitrary SGML, the style sheet is responsible for

  1000     setting the writing direction. This is the style sheet:

  1002    <pre>

  1003 /* Rules for bidi */

  1004 [dir=ltr] {direction: rtl;}

  1005 [dir=rtl] {direction: ltr;}

  1006 quote     {unicode-bidi: isolate;}

  1008 /* Rules for presentation */

  1009 section, para  {display: block;}

  1010 emphasis       {font-weight: bold;}

  1011     </pre>

  1013    <p>The first <code>&lt;section></code> element is a block with a

  1014     right-to-left base direction, the second <code>&lt;section></code>

  1015     element is a block with a left-to-right base direction. The

  1016     <code>&lt;para></code>s are blocks that inherit the base direction from

  1017     their parents. Thus, the first two <code>&lt;para></code>s are read

  1018     starting at the top right, the final three are read starting at the top

  1019     left.

  1021    <p>The <code>&lt;emphasis></code> element is inline-level, and since its

  1022     value for ‘<a href="#unicode-bidi0"><code

  1023     class=property>unicode-bidi</code></a>’ is ‘<a href="#normal"><code

  1024     class=css>normal</code></a>’ (the initial value), it has no effect on

  1025     the ordering of the text. The <code>&lt;quote></code> element, on the

  1026     other hand, creates an <a href="#isolated-sequence-"><i>isolated

  1027     sequence</i></a> with the given internal directionality.

  1029    <p>The formatting of this text might look like this if the line length is

  1030     long:

  1032    <pre class=ascii-art>

  1033                5WERBEH 4WERBEH english3 2WERBEH 1WERBEH

  1035                                 8WERBEH <b>7WERBEH</b> 6WERBEH

  1037 english9 english10 english11 13WERBEH 12WERBEH

  1039 english14 english15 english16

  1041 english17 20WERBEH english19 18WERBEH

  1042     </pre>

  1044    <p>Note that the <code>&lt;quote></code> embedding causes

  1045     <samp>HEBREW18</samp> to be to the right of <samp>english19</samp>.

  1047    <p>If lines have to be broken, it might be more like this:

  1049    <pre class=ascii-art>

  1050        2WERBEH 1WERBEH

  1051   -EH 4WERBEH english3

  1052                  5WERB

  1054    -EH <b>7WERBEH</b> 6WERBEH

  1055                  8WERB

  1057 english9 english10 en-

  1058 glish11 12WERBEH

  1059 13WERBEH

  1061 english14 english15

  1062 english16

  1064 english17 18WERBEH

  1065 20WERBEH english19

  1066     </pre>

  1068    <p>Because <samp>HEBREW18</samp> must be read before english19, it is on

  1069     the line above <samp>english19</samp>. Just breaking the long line from

  1070     the earlier formatting would not have worked. Note also that the first

  1071     syllable from <samp>english19</samp> might have fit on the previous line,

  1072     but hyphenation of left-to-right words in a right-to-left context, and

  1073     vice versa, is usually suppressed to avoid having to display a hyphen in

  1074     the middle of a line.

  1075   </div>

  1076   <!-- example -->

  1078   <h3 id=bidi-box-model><span class=secno>2.4. </span> Box model for inline

  1079    elements in bidirectional context</h3>

  1081   <p>Since bidi reordering can split apart and reorder text that is logically

  1082    contiguous, bidirectional text can cause an inline box to be split and

  1083    reordered within a line.

  1085   <p class=note>Note that in order to be able to flow inline boxes in a

  1086    uniform direction (either entirely left-to-right or entirely

  1087    right-to-left), anonymous inline boxes may have to be created.</p>

  1088   <!-- CSS2.1 8.6 -->

  1090   <p>For each line box, UAs must take the inline boxes generated for each

  1091    element and render the margins, borders and padding in visual order (not

  1092    logical order). The <a href="#start"><i>start</i></a>-most box on the

  1093    first line box in which the element appears has the <a

  1094    href="#start"><i>start</i></a> edge's margin, border, and padding; and the

  1095    end-most box on the last line box in which the element appears has the <a

  1096    href="#end"><i>end</i></a> edge's margin, border, and padding. For

  1097    example, in the ‘<a href="#horizontal-tb"><code

  1098    class=css>horizontal-tb</code></a>’ writing mode:

  1100   <ul>

  1101    <li>When the parent's ‘<a href="#direction0"><code

  1102     class=property>direction</code></a>’ property is ‘<a

  1103     href="#ltr"><code class=css>ltr</code></a>’, the left-most generated

  1104     box of the first line box in which the element appears has the left

  1105     margin, left border and left padding, and the right-most generated box of

  1106     the last line box in which the element appears has the right padding,

  1107     right border and right margin.

  1109    <li>When the parent's ‘<a href="#direction0"><code

  1110     class=property>direction</code></a>’ property is ‘<a

  1111     href="#rtl"><code class=css>rtl</code></a>’, the right-most generated

  1112     box of the first line box in which the element appears has the right

  1113     padding, right border and right margin, and the left-most generated box

  1114     of the last line box in which the element appears has the left margin,

  1115     left border and left padding.

  1116   </ul>

  1118   <p>Analogous rules hold for vertical writing modes.

  1120   <p class=note>The ‘<code class=property>box-decoration-break</code>’

  1121    property can override this behavior to draw box decorations on both sides

  1122    of each box. <a href="#CSS3BG"

  1123    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>

  1125   <h2 id=vertical-intro><span class=secno>3. </span> Introduction to Vertical

  1126    Text</h2>

  1128   <p><em>This subsection is non-normative.</em>

  1130   <p>In addition to extensions to CSS2.1’s support for bidirectional text,

  1131    this module introduces the rules and properties needed to support vertical

  1132    text layout in CSS.

  1134   <p>Unlike languages that use the Latin script which are primarily laid out

  1135    horizontally, Asian languages such as Chinese and Japanese can be laid out

  1136    vertically. The Japanese example below shows the same text laid out

  1137    horizontally and vertically. In the horizontal case, text is read from

  1138    left to right, top to bottom. For the vertical case, the text is read top

  1139    to bottom, right to left. Indentation from the left edge in the

  1140    left-to-right horizontal case translates to indentation from the top edge

  1141    in the top-to-bottom vertical case.

  1143   <div class=figure>

  1144    <p><img

  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."

  1146     src=vert-horiz-comparison.png>

  1148    <p class=caption>Comparison of vertical and horizontal Japanese: iBunko

  1149     application (iOS)

  1150   </div>

  1152   <p class=note>For Chinese and Japanese lines are ordered either right to

  1153    left or top to bottom, while for Mongolian and Manchu lines are ordered

  1154    left to right.

  1156   <p>The change from horizontal to vertical writing can affect not just the

  1157    layout, but also the typesetting. For example, the position of a

  1158    punctuation mark within its spacing box can change from the horizontal to

  1159    the vertical case, and in some cases alternate glyphs are used.

  1161   <p>Vertical text that includes Latin script text or text from other scripts

  1162    normally displayed horizontally can display that text in a number of ways.

  1163    For example, Latin words can be rotated sideways, or each letter can be

  1164    oriented upright:

  1166   <div class=figure>

  1167    <p><img

  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."

  1169     src=vert-latin-layouts.png>

  1171    <p class=caption>Examples of Latin in vertical Japanese: Daijirin Viewer

  1172     1.4 (iOS)

  1173   </div>

  1175   <p>In some special cases such as two-digit numbers in dates, text is fit

  1176    compactly into a single vertical character box:

  1178   <div class=figure id=fig-mac>

  1179    <p><img

  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."

  1181     src=vert-number-layouts.png>

  1183    <p class=caption>Mac Fan, December 2010, p.49

  1184   </div>

  1186   <p>Layouts often involve a mixture of vertical and horizontal elements:

  1188   <div class=figure>

  1189    <p><img

  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."

  1191     src=vert-horiz-combination.png>

  1193    <p class=caption>Mixture of vertical and horizontal elements

  1194   </div>

  1196   <p>Vertical text layouts also need to handle bidirectional text layout;

  1197    clockwise-rotated Arabic, for example, is laid out bottom-to-top.

  1199   <h3 id=writing-mode><span class=secno>3.1. </span> Block Flow Direction:

  1200    the ‘<a href="#writing-mode1"><code

  1201    class=property>writing-mode</code></a>’ property</h3>

  1203   <table class=propdef>

  1204    <tbody>

  1205     <tr>

  1206      <th>Name:

  1208      <td><dfn id=writing-mode1>writing-mode</dfn>

  1210     <tr>

  1211      <th><a href="#values">Value</a>:

  1213      <td>horizontal-tb | vertical-rl | vertical-lr

  1215     <tr>

  1216      <th>Initial:

  1218      <td>horizontal-tb

  1220     <tr>

  1221      <th>Applies to:

  1223      <td>All elements except table row groups, table column groups, table

  1224       rows, and table columns

  1226     <tr>

  1227      <th>Inherited:

  1229      <td>yes

  1231     <tr>

  1232      <th>Percentages:

  1234      <td>N/A

  1236     <tr>

  1237      <th>Media:

  1239      <td>visual

  1241     <tr>

  1242      <th>Computed value:

  1244      <td>specified value

  1245   </table>

  1247   <p>This property specifies whether lines of text are laid out horizontally

  1248    or vertically and the direction in which blocks progress. Possible values:

  1250   <dl>

  1251    <dt><dfn id=horizontal-tb>horizontal-tb</dfn>

  1253    <dd>Top-to-bottom <a href="#block-flow-direction"><i>block flow

  1254     direction</i></a>. The <a href="#writing-mode0"><i>writing mode</i></a>

  1255     is horizontal.

  1257    <dt><dfn id=vertical-rl>vertical-rl</dfn>

  1259    <dd>Right-to-left <a href="#block-flow-direction"><i>block flow

  1260     direction</i></a>. The <a href="#writing-mode0"><i>writing mode</i></a>

  1261     is vertical.

  1263    <dt><dfn id=vertical-lr>vertical-lr</dfn>

  1265    <dd>Left-to-right <a href="#block-flow-direction"><i>block flow

  1266     direction</i></a>. The <a href="#writing-mode0"><i>writing mode</i></a>

  1267     is vertical.

  1268   </dl>

  1270   <p>The ‘<a href="#writing-mode1"><code

  1271    class=property>writing-mode</code></a>’ property specifies the <a

  1272    href="#block-flow-direction"><i>block flow direction</i></a>, which

  1273    determines the progression of block-level boxes in a block formatting

  1274    context; the progression of line boxes in a block container that contains

  1275    inlines; the progression of rows in a table; etc. By virtue of determining

  1276    the stacking direction of line boxes, the ‘<a

  1277    href="#writing-mode1"><code class=property>writing-mode</code></a>’

  1278    property also determines whether the line boxes' orientation (and thus the

  1279    <a href="#writing-mode0"><i>writing mode</i></a>) is horizontal or

  1280    vertical. The ‘<a href="#text-orientation0"><code

  1281    class=property>text-orientation</code></a>’ property then determines how

  1282    text is laid out within the line box.

  1284   <p>The <dfn id=principal-writing-mode>principal writing mode</dfn> of the

  1285    document is determined by the ‘<a href="#writing-mode1"><code

  1286    class=property>writing-mode</code></a>’ and ‘<a

  1287    href="#direction0"><code class=property>direction</code></a>’ values

  1288    specified on the root element. This writing mode is used, for example, to

  1289    determine the default page progression direction. (See <a href="#CSS3PAGE"

  1290    rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>.) Like ‘<a

  1291    href="#direction0"><code class=property>direction</code></a>’, the ‘<a

  1292    href="#writing-mode1"><code class=property>writing-mode</code></a>’

  1293    value of the root element is also propagated to the initial containing

  1294    block and sets the block flow direction of the initial block formatting

  1295    context.

  1297   <p class=note>Note that the ‘<a href="#writing-mode1"><code

  1298    class=property>writing-mode</code></a>’ property of the HTML BODY

  1299    element is <em>not</em> propagated to the viewport. That special behavior

  1300    only applies to the background and overflow properties.

  1302   <p>If an element has a different block flow direction than its containing

  1303    block:

  1305   <ul>

  1306    <li>If the element has a specified ‘<code

  1307     class=property>display</code>’ of ‘<code class=css>inline</code>’,

  1308     its ‘<code class=property>display</code>’ computes to ‘<code

  1309     class=property>inline-block</code>’. <a href="#CSS21"

  1310     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  1312    <li>If the element has a specified ‘<code

  1313     class=property>display</code>’ of ‘<code class=css>run-in</code>’,

  1314     its ‘<code class=property>display</code>’ computes to ‘<code

  1315     class=property>block</code>’. <a href="#CSS21"

  1316     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  1318    <li>If the element is a block container, then it establishes a new block

  1319     formatting context.

  1320   </ul>

  1322   <p>The content of replaced elements do not rotate due to the writing mode:

  1323    images, for example, remain upright. However replaced content involving

  1324    text (such as MathML content or form elements) should match the replaced

  1325    element's writing mode and line orientation if the UA supports such a

  1326    vertical writing mode for the replaced content.

  1328   <div class=example>

  1329    <p>In the following example, two block elements (1 and 3) separated by an

  1330     image (2) are presented in various flow writing modes.

  1332    <p>Here is a diagram of horizontal writing mode (<code>writing-mode:

  1333     horizontal-tb</code>):

  1335    <p><img

  1336     alt="Diagram of horizontal layout: blocks 1, 2, and 3 are stacked top-to-bottom"

  1337     height=300 src=horizontal.png width=219>

  1339    <p>Here is a diagram for the right-to-left vertical writing mode commonly

  1340     used in East Asia (<code>writing-mode: vertical-rl</code>):

  1342    <p><img

  1343     alt="Diagram of a right-to-left vertical layout: blocks 1, 2,                   and 3 are arranged side by side from right to left"

  1344     height=191 src=vertical-rl.png width=297>

  1346    <p>And finally, here is a diagram for the left-to-right vertical writing

  1347     mode used for Manchu and Mongolian (<code>writing-mode:

  1348     vertical-lr</code>):

  1350    <p><img

  1351     alt="Diagram of left-to-right vertical layout: blocks 1, 2,                   and 3 are arranged side by side from left to right"

  1352     height=191 src=vertical-lr.png width=300>

  1353   </div>

  1355   <div class=example>

  1356    <p>In the following example, some form controls are rendered inside a

  1357     block with ‘<a href="#vertical-rl"><code

  1358     class=css>vertical-rl</code></a>’ writing mode. The form controls are

  1359     rendered to match the writing mode.

  1361    <pre>

  1362 <!-- -->&lt;style>

  1363 <!-- -->  form { writing-mode: vertical-rl; }

  1364 <!-- -->&lt;/style>

  1365 <!-- -->...

  1366 <!-- -->&lt;form>

  1367 <!-- -->&lt;p>&lt;label>姓名　&lt;input value="艾俐俐">&lt;/label>

  1368 <!-- -->&lt;p>&lt;label>语文　&lt;select>&lt;option>English

  1369 <!-- -->                       &lt;option>français

  1370 <!-- -->                       &lt;option>فارسی

  1371 <!-- -->                       &lt;option>中文

  1372 <!-- -->                       &lt;option>日本語&lt;/select>&lt;/label>

  1373 <!-- -->&lt;/form></pre>

  1375    <p><img

  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."

  1377     src=vertical-form.png>

  1378   </div>

  1380   <div class=example>

  1381    <p>In this example, ‘<a href="#writing-mode1"><code

  1382     class=property>writing-mode</code></a>’ sets the list markers upright

  1383     using the ‘<code class=css>::marker</code>’ pseudo-element. Vertical

  1384     alignment ensures that longer numbers will still align with the right of

  1385     the first line of text. <a href="#CSS3LIST"

  1386     rel=biblioentry>[CSS3LIST]<!--{{CSS3LIST}}--></a>

  1388    <pre>::marker { writing-mode: horizontal-tb;

  1389 <!-- -->            vertical-align: text-top;

  1390 <!-- -->            color: blue; }</pre>

  1392    <div class=figure>

  1393     <p><img

  1394      alt="Diagram showing list markers of '1.', '2.', '3.' sitting                    upright atop sideways vertical Latin list item text."

  1395      class=example src=vertical-horizontal-list-markers.png>

  1397     <p class=caption>Example of horizontal list markers in a vertical list

  1398    </div>

  1399   </div>

  1401   <h4 id=svg-writing-mode><span class=secno>3.1.1. </span> SVG1.1 ‘<a

  1402    href="#writing-mode1"><code class=property>writing-mode</code></a>’

  1403    Values</h4>

  1405   <p>SVG1.1 <a href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>

  1406    defines some additional values: ‘<code class=css>lr</code>’, ‘<code

  1407    class=css>lr-tb</code>’, ‘<code class=css>rl</code>’, ‘<code

  1408    class=css>rl-tb</code>’, ‘<code class=css>tb</code>’, and ‘<code

  1409    class=css>tb-rl</code>’.

  1411   <p>These values are <em>deprecated</em> in any context except SVG1

  1412    documents. Implementations that wish to support these values in the

  1413    context of CSS must treat them as follows:

  1415   <table class=data>

  1416    <thead>

  1417     <tr>

  1418      <th>SVG1/Obsolete

  1420      <th>CSS

  1422    <tbody>

  1423     <tr>

  1424      <td>‘<code class=css>lr</code>’

  1426      <td rowspan=3>‘<a href="#horizontal-tb"><code

  1427       class=css>horizontal-tb</code></a>’

  1429     <tr>

  1430      <td>‘<code class=css>lr-tb</code>’

  1432     <tr>

  1433      <td>‘<code class=css>rl</code>’

  1435     <tr>

  1436      <td>‘<code class=css>tb</code>’

  1438      <td rowspan=2>‘<a href="#vertical-rl"><code

  1439       class=css>vertical-rl</code></a>’

  1441     <tr>

  1442      <td>‘<code class=css>tb-rl</code>’

  1443   </table>

  1445   <p class=note>The SVG1.1 values were also present in an older revision of

  1446    the CSS ‘<a href="#writing-mode1"><code

  1447    class=property>writing-mode</code></a>’ specification, which is

  1448    obsoleted by this specification. The additional ‘<code

  1449    class=css>tb-lr</code>’ value of that revision is replaced by ‘<a

  1450    href="#vertical-lr"><code class=css>vertical-lr</code></a>’.

  1452   <p>In SVG1.1, these values set the <dfn

  1453    id=inline-progression-direction>inline progression direction</dfn>, in

  1454    other words, the direction the current text position advances each time a

  1455    glyph is added. This is a geometric process that happens <em>after</em>

  1456    bidi reordering, and thus has no effect on the interpretation of the ‘<a

  1457    href="#direction0"><code class=property>direction</code></a>’ property

  1458    (which is independent of ‘<a href="#writing-mode1"><code

  1459    class=property>writing-mode</code></a>’). (See <a

  1460    href="http://www.w3.org/TR/SVG/text.html#RelationshipWithBiDirectionality">Relationship

  1461    with bidirectionality</a>. <a href="#SVG11"

  1462    rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>)

  1464   <p class=note>There are varying interpretations on whether this process

  1465    causes "writing-mode: rl" to merely shift the text string or reverse the

  1466    order of all glyphs in the text.

  1468   <h2 id=inline-alignment><span class=secno>4. </span> Inline-level Alignment</h2>

  1470   <p>When different kinds of inline-level content are placed together on a

  1471    line, the baselines of the content and the settings of the ‘<code

  1472    class=property>vertical-align</code>’ property control how they are

  1473    aligned in the transverse direction of the line box. This section

  1474    discusses what baselines are, how to find them, and how they are used

  1475    together with the ‘<code class=property>vertical-align</code>’

  1476    property to determine the alignment of inline-level content.

  1478   <h3 id=intro-baselines><span class=secno>4.1. </span> Introduction to

  1479    Baselines</h3>

  1481   <p><em>This section is non-normative.</em>

  1483   <p>A <dfn id=baseline>baseline</dfn> is a line along the <i>inline axis</i>

  1484    of a line box along which individual glyphs of text are aligned. Baselines

  1485    guide the design of glyphs in a font (for example, the bottom of most

  1486    alphabetic glyphs typically align with the alphabetic baseline), and they

  1487    guide the alignment of glyphs from different fonts or font sizes when

  1488    typesetting.

  1490   <div class=figure> [Picture of alphabetic text in two font sizes with the

  1491    baseline and emboxes indicated.]</div>

  1493   <p>Different writing systems prefer different baseline tables.

  1495   <div class=figure>

  1496    <p><img

  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."

  1498     src=script-preferred-baselines.gif>

  1500    <p class=caption>Preferred baselines in various writing systems

  1501   </div>

  1503   <p>A well-constructed font contains a <dfn id=baseline-table>baseline

  1504    table</dfn>, which indicates the position of one or more baselines within

  1505    the font's design coordinate space. (The design coordinate space is scaled

  1506    with the font size.)

  1508   <div class=figure>

  1509    <p><img alt="" src=baselines.gif>

  1511    <p class=caption>In a well-designed mixed-script font, the glyphs are

  1512     positioned in the coordinate space to harmonize with one another when

  1513     typeset together. The baseline table is then constructed to match the

  1514     shape of the glyphs, each baseline positioned to match the glyphs from

  1515     its preferred scripts.

  1516   </div>

  1518   <p>The baseline table is a property of the font, and the positions of the

  1519    various baselines apply to all glyphs in the font.

  1521   <p>Different baseline tables can be provided for alignment in horizontal

  1522    and vertical text. UAs should use the vertical tables in vertical writing

  1523    modes and the horizontal tables otherwise.

  1525   <h3 id=text-baselines><span class=secno>4.2. </span> Text Baselines</h3>

  1527   <p>In this specification, only the following baselines are considered:

  1529   <dl>

  1530    <dt>alphabetic

  1532    <dd>The <dfn id=alphabetic-baseline>alphabetic baseline</dfn>, which

  1533     typically aligns with the bottom of uppercase Latin glyphs.

  1535    <dt>central

  1537    <dd>The <dfn id=central-baseline>central baseline</dfn>, which typically

  1538     crosses the center of the em box. If the font is missing this baseline,

  1539     it is assumed to be halfway between the ascender (<a

  1540     href="#over"><i>over</i></a>) and descender (<a

  1541     href="#under"><i>under</i></a>) edges of the em box.

  1542   </dl>

  1544   <p>In vertical writing mode, the <a href="#central-baseline"><i>central

  1545    baseline</i></a> is used as the dominant baseline when ‘<a

  1546    href="#text-orientation0"><code

  1547    class=property>text-orientation</code></a>’ is ‘<a href="#mixed"><code

  1548    class=css>mixed</code></a>’ or ‘<a href="#upright"><code

  1549    class=css>upright</code></a>’. Otherwise the <a

  1550    href="#alphabetic-baseline"><i>alphabetic baseline</i></a> is used.

  1552   <p class=note>A future CSS module will deal with baselines in more detail

  1553    and allow the choice of other dominant baselines and alignment options.

  1555   <h3 id=replaced-baselines><span class=secno>4.3. </span> Atomic Inline

  1556    Baselines</h3>

  1558   <p>If an <a

  1559    href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes">atomic

  1560    inline</a> (such as an inline-block, inline-table, or replaced inline

  1561    element) is not capable of providing its own baseline information, then

  1562    the UA synthesizes a baseline table thus:

  1564   <dl>

  1565    <dt>alphabetic

  1567    <dd>The alphabetic baseline is assumed to be at the <a

  1568     href="#under"><i>under</i></a> margin edge.

  1570    <dt>central

  1572    <dd>The central baseline is assumed to be halfway between the <a

  1573     href="#under"><i>under</i></a> and <a href="#over"><i>over</i></a> margin

  1574     edges of the box.

  1575   </dl>

  1577   <h3 id=baseline-alignment><span class=secno>4.4. </span> Baseline Alignment</h3>

  1579   <p>The <dfn id=dominant-baseline>dominant baseline</dfn> (which <a

  1580    href="#text-baselines">can change</a> based on the writing mode) is used

  1581    in CSS for alignment in two cases:

  1583   <ul>

  1584    <li><strong>Aligning glyphs from different fonts within the same inline

  1585     box.</strong> The glyphs are aligned by matching up the positions of the

  1586     dominant baseline in their corresponding fonts.

  1588    <li><strong>Aligning a child inline-level box within its parent.</strong>

  1589     For the ‘<code class=property>vertical-align</code>’ value of ‘<a

  1590     href="#baseline"><code class=css>baseline</code></a>’, child is aligned

  1591     to the parent by matching the parent's dominant baseline to the same

  1592     baseline in the child. (E.g. if the parent's dominant baseline is

  1593     alphabetic, then the child's alphabetic baseline is matched to the

  1594     parent's alphabetic baseline, even if the child's dominant baseline is

  1595     something else.) For values of ‘<code class=css>sub</code>’, ‘<code

  1596     class=css>super</code>’, ‘<code class=css>&lt;length&gt;</code>’,

  1597     and ‘<code class=css>&lt;percentage&gt;</code>’, the baselines are

  1598     aligned as for ‘<a href="#baseline"><code

  1599     class=css>baseline</code></a>’, but the child is shifted according to

  1600     the offset given by its ‘<code class=property>vertical-align</code>’

  1601     value.

  1602     <div class=example>

  1603      <p>Given following sample markup:

  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>

  1607      <p>And the following style rule:

  1609      <pre>span.inner { font-size: .75em; }</pre>

  1611      <p>The baseline tables of the parent (<code>.outer</code>) and the child

  1612       (<code>.inner</code>) will not match up due to the font size

  1613       difference. Since the dominant baseline is the alphabetic baseline, the

  1614       child box is aligned to its parent by matching up their alphabetic

  1615       baselines.

  1617      <div class=figure>

  1618       <p><img alt="" src=baseline-align-sizes.gif>

  1619      </div>

  1620     </div>

  1622     <div class=example>

  1623      <p>If we assign ‘<code class=css>vertical-align: super</code>’ to

  1624       the <code>.inner</code> element from the example above, the same rules

  1625       are used to align the <code>.inner</code> child to its parent; the only

  1626       difference is in addition to the baseline alignment, the child is

  1627       shifted to the superscript position.

  1629      <pre>span.inner { vertical-align: super; font-size: .75em; }</pre>

  1631      <div class=figure>

  1632       <p><img

  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."

  1634        src=baseline-align-super.gif>

  1635      </div>

  1636     </div>

  1637   </ul>

  1639   <h2 id=intro-text-layout><span class=secno>5. </span> Introduction to

  1640    Vertical Text Layout</h2>

  1642   <p>Each writing system has one or more native orientations. Modern scripts

  1643    can therefore be classified into three orientational categories:

  1645   <dl>

  1646    <dt>horizontal-only

  1648    <dd>Scripts that have horizontal, but not vertical, native orientation.

  1649     Includes: Latin, Arabic, Hebrew, Devanagari

  1651    <dt>vertical-only

  1653    <dd>Scripts that have vertical, but not horizontal, native orientation.

  1654     Includes: Mongolian, Phags Pa

  1656    <dt>bi-orientational

  1658    <dd>Scripts that have both vertical and horizontal native orientation.

  1659     Includes: Han, Hangul, Japanese Kana

  1660   </dl>

  1662   <p>A <dfn id=vertical-script>vertical script</dfn> is one that has a native

  1663    vertical orientation: i.e. one that is either vertical-only or that is

  1664    bi-orientational. A <dfn id=horizontal-script>horizontal script</dfn> is

  1665    one that has a native horizontal orientation: i.e. one that is either

  1666    horizontal-only or that is bi-orientational. (See <a

  1667    href="#script-orientations">Appendix B</a> for a categorization of scripts

  1668    by native orientation.)

  1670   <div class=figure>

  1671    <p><img

  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."

  1673     src=baseline-align-super.gif>

  1674   </div>

  1676   <p>In modern typographic systems, all glyphs are assigned a horizontal

  1677    orientation, which is used when laying out text horizontally. To lay out

  1678    vertical text, the UA needs to transform the text from its horizontal

  1679    orientation. This transformation is the <dfn

  1680    id=bi-orientational-transform>bi-orientational transform</dfn>, and there

  1681    are two types:

  1683   <dl>

  1684    <dt>rotate

  1686    <dd>Rotate the glyph from horizontal to vertical <a

  1687     href="diagrams/glyph-right.svg" type="image/svg+xml"> <img

  1688     alt="Rotate the glyph from horizontal to vertical" class=figure

  1689     src="diagrams/glyph-right.png"></a>

  1691    <dt>translate

  1693    <dd>Translate the glyph from horizontal to vertical <a

  1694     href="diagrams/glyph-upright.svg" type="image/svg+xml"> <img

  1695     alt="Translate the glyph from horizontal to vertical" class=figure

  1696     src="diagrams/glyph-upright.png"></a>

  1697   </dl>

  1699   <p>Scripts with a native vertical orientation have an intrinsic

  1700    bi-orientational transform, which orients them correctly in vertical text:

  1701    most CJK (Chinese/Japanese/Korean) characters translate, that is, they are

  1702    always upright. Characters from other scripts, such as Mongolian, rotate.

  1704   <p>Scripts without a native vertical orientation can be either rotated (set

  1705    sideways) or translated (set upright): the transform used is a stylistic

  1706    preference depending on the text's usage, rather than a matter of

  1707    correctness. The ‘<a href="#text-orientation0"><code

  1708    class=property>text-orientation</code></a>’ property's ‘<a

  1709    href="#mixed"><code class=css>mixed</code></a>’ and ‘<a

  1710    href="#upright"><code class=css>upright</code></a>’ values are provided

  1711    to specify rotation vs. translation of horizontal-only text.

  1713   <p class=note>The ‘<a href="#sideways-left"><code

  1714    class=css>sideways-left</code></a>’, ‘<a href="#sideways-right"><code

  1715    class=css>sideways-right</code></a>’, and ‘<a href="#sideways"><code

  1716    class=css>sideways</code></a>’ values of ‘<a

  1717    href="#text-orientation0"><code

  1718    class=property>text-orientation</code></a>’ are provided for decorative

  1719    layout effects and to work around limitations in CSS support for

  1720    bottom-to-top scripts.

  1722   <h3 id=text-orientation><span class=secno>5.1. </span> Orienting Text: the

  1723    ‘<a href="#text-orientation0"><code

  1724    class=property>text-orientation</code></a>’ property</h3>

  1726   <table class=propdef>

  1727    <tbody>

  1728     <tr>

  1729      <th>Name:

  1731      <td><dfn id=text-orientation0>text-orientation</dfn>

  1733     <tr>

  1734      <th><a href="#values">Value</a>:

  1736      <td>mixed | upright | sideways-right | sideways-left | sideways |

  1737       use-glyph-orientation

  1739     <tr>

  1740      <th>Initial:

  1742      <td>mixed

  1744     <tr>

  1745      <th>Applies to:

  1747      <td>all elements except table row groups, rows, column groups, and

  1748       columns

  1750     <tr>

  1751      <th>Inherited:

  1753      <td>yes

  1755     <tr>

  1756      <th>Percentages:

  1758      <td>N/A

  1760     <tr>

  1761      <th>Media:

  1763      <td>visual

  1765     <tr>

  1766      <th>Computed value:

  1768      <td>specified value

  1769   </table>

  1771   <p>This property specifies the orientation of text within a line. Current

  1772    values only have an effect in vertical writing modes; the property has no

  1773    effect on elements in horizontal writing modes.

  1775   <p>For readability, the term <a href="#character"><i>character</i></a> is

  1776    used in place of <em>extended grapheme cluster</em> in this section. See

  1777    <a href="#character-properties">Characters and Properties</a> for further

  1778    details.

  1780   <p>Values have the following meanings:

  1782   <dl>

  1783    <dt><dfn id=mixed>mixed</dfn>

  1785    <dd>

  1786     <p>In vertical writing modes, characters from horizontal-only scripts are

  1787      set sideways, i.e. 90° clockwise from their standard orientation in

  1788      horizontal text. Characters from vertical scripts are set with their

  1789      intrinsic orientation. See <a href="#vertical-orientations">Vertical

  1790      Orientations</a> for further details.

  1792     <p>This value is typical for layout of primarily vertical-script text.

  1794    <dt><dfn id=upright>upright</dfn>

  1796    <dd>

  1797     <p>In vertical writing modes, characters from horizontal-only scripts are

  1798      rendered upright, i.e. in their standard horizontal orientation.

  1799      Characters from vertical scripts are set with their intrinsic

  1800      orientation and shaped normally. See <a

  1801      href="#vertical-orientations">Vertical Orientations</a> for further

  1802      details.

  1804     <p>For the purposes of bidi reordering, this value causes all characters

  1805      to be treated as strong LTR. This value causes the used value of ‘<a

  1806      href="#direction0"><code class=property>direction</code></a>’ to be

  1807      ‘<a href="#ltr"><code class=css>ltr</code></a>’.

  1809    <dt><dfn id=sideways-right>sideways-right</dfn>

  1811    <dd>

  1812     <p>In vertical writing modes, this causes text to be set as if in a

  1813      horizontal layout, but rotated 90° clockwise.

  1815    <dt><dfn id=sideways-left>sideways-left</dfn>

  1817    <dd>

  1818     <p>In vertical writing modes, this causes text to be set as if in a

  1819      horizontal layout, but rotated 90° counter-clockwise.

  1821     <p>If set on a non-replaced inline whose parent is not ‘<a

  1822      href="#sideways-left"><code class=css>sideways-left</code></a>’, this

  1823      forces bidi isolation: the ‘<a href="#normal"><code

  1824      class=css>normal</code></a>’ and ‘<a href="#embed"><code

  1825      class=css>embed</code></a>’ values of ‘<a

  1826      href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’

  1827      compute to ‘<a href="#isolate"><code class=css>isolate</code></a>’,

  1828      and ‘<a href="#bidi-override"><code

  1829      class=css>bidi-override</code></a>’ computes to ‘<a

  1830      href="#isolate-override"><code class=css>isolate-override</code></a>’.

  1831      Layout of text is exactly as for ‘<a href="#sideways-right"><code

  1832      class=css>sideways-right</code></a>’ except that the baseline table of

  1833      each of the element's inline boxes is mirrored around a vertical axis

  1834      along the center of its content box and text layout is rotated 180° to

  1835      match. The positions of text decorations propagated from an ancestor

  1836      inline (including the block container's root inline) are not mirrored,

  1837      but any text decorations introduced by the element are positioned using

  1838      the mirrored baseline table.

  1840     <p>Similarly, if an inline child of the element has a ‘<a

  1841      href="#text-orientation0"><code

  1842      class=property>text-orientation</code></a>’ value other than ‘<a

  1843      href="#sideways-left"><code class=css>sideways-left</code></a>’, an

  1844      analogous transformation (and bidi isolation) is applied.

  1846    <dt><dfn id=sideways>sideways</dfn>

  1848    <dd>

  1849     <p>This value is equivalent to ‘<a href="#sideways-right"><code

  1850      class=css>sideways-right</code></a>’ in ‘<a

  1851      href="#vertical-rl"><code class=css>vertical-rl</code></a>’ writing

  1852      mode and equivalent to ‘<a href="#sideways-left"><code

  1853      class=css>sideways-left</code></a>’ in ‘<a href="#vertical-lr"><code

  1854      class=css>vertical-lr</code></a>’ writing mode. It can be useful when

  1855      setting horizontal script text vertically in a primarily horizontal-only

  1856      document.

  1858    <dt><dfn id=use-glyph-orientation>use-glyph-orientation</dfn>

  1860    <dd>

  1861     <p><a href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> defines

  1862      ‘<code class=property>glyph-orientation-vertical</code>’ and

  1863      ‘<code class=property>glyph-orientation-horizontal</code>’

  1864      properties that were intended to control text orientation. These

  1865      properties are <em>deprecated</em> and do not apply to non-SVG elements.

  1866      If an implementation supports these properties, the ‘<a

  1867      href="#use-glyph-orientation"><code

  1868      class=css>use-glyph-orientation</code></a>’ value when set on SVG

  1869      elements indicates that the SVG ‘<code

  1870      class=property>glyph-orientation-vertical</code>’ and ‘<code

  1871      class=property>glyph-orientation-horizontal</code>’ behavior control

  1872      the layout of text. Such UAs must set ‘<code

  1873      class=css>text-orientation: use-glyph-orientation</code>’ on all <a

  1874      href="http://www.w3.org/TR/SVG/intro.html#TermTextContentElement">SVG

  1875      text content elements</a> in their default UA style sheet for SVG.

  1877     <p>In all other contexts, and for implementations that do not support the

  1878      glyph orientation properties, the ‘<a

  1879      href="#use-glyph-orientation"><code

  1880      class=css>use-glyph-orientation</code></a>’ behavior is the same as

  1881      for ‘<a href="#mixed"><code class=css>mixed</code></a>’.

  1883     <p class=note>This value is at-risk and may be dropped during CR.

  1884   </dl>

  1886   <div class=figure id=fig-text-orientation>

  1887    <table class=data>

  1888     <tbody>

  1889      <tr>

  1890       <td> <img alt="text-orientation: mixed" height=160

  1891        src=text-orientation-vr.png width=64>

  1893       <td> <img alt="text-orientation: upright" height=160

  1894        src=text-orientation-up.png width=64>

  1896       <td> <img alt="text-orientation: sideways-left" height=160

  1897        src=text-orientation-sl.png width=64>

  1899       <td> <img alt="text-orientation: sideways-right" height=160

  1900        src=text-orientation-sr.png width=64>

  1902      <tr>

  1903       <td>‘<a href="#mixed"><code class=css>mixed</code></a>’

  1905       <td>‘<a href="#upright"><code class=css>upright</code></a>’

  1907       <td>‘<a href="#sideways-left"><code

  1908        class=css>sideways-left</code></a>’

  1910       <td>‘<a href="#sideways-right"><code

  1911        class=css>sideways-right</code></a>’

  1912    </table>

  1914    <p class=caption>‘<a href="#text-orientation0"><code

  1915     class=property>text-orientation</code></a>’ values (‘<a

  1916     href="#writing-mode1"><code class=property>writing-mode</code></a>’ is

  1917     ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’)

  1918   </div>

  1920   <div class=example>

  1921    <p>In the following example, the root element of a horizontal-only

  1922     document is set to use ‘<a href="#sideways"><code

  1923     class=css>sideways</code></a>’. In the rest of the document, the author

  1924     can just set ‘<a href="#writing-mode1"><code

  1925     class=property>writing-mode</code></a>’ without worrying about whether

  1926     the text is ‘<a href="#vertical-rl"><code

  1927     class=css>vertical-rl</code></a>’ or ‘<a href="#vertical-lr"><code

  1928     class=css>vertical-lr</code></a>’.

  1930    <pre>

  1931       :root { text-orientation: sideways; }

  1932       caption { caption-side: left; writing-mode: vertical-lr; }

  1933       thead th { writing-mode: vertical-lr; }

  1934       h1.banner { position: absolute; top: 0; right: 0; writing-mode: vertical-rl; }

  1935     </pre>

  1936   </div>

  1938   <p class=note>Changing the value of this property may affect inline-level

  1939    alignment. Refer to <a href="#text-baselines">Text Baselines</a> for more

  1940    details.

  1942   <h4 id=vertical-orientations><span class=secno>5.1.1. </span> Mixed

  1943    Vertical Orientations</h4>

  1945   <p> <a href="#UTR50" rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a> defines

  1946    the Vertical_Orientation property for the default character orientation of

  1947    mixed-orientation vertical text. When ‘<a

  1948    href="#text-orientation0"><code

  1949    class=property>text-orientation</code></a>’ is ‘<a href="#mixed"><code

  1950    class=css>mixed</code></a>’, the UA must render a <a

  1951    href="#character"><i>character</i></a> upright if its orientation property

  1952    is <code>U</code>, <code>Tx</code>, or <code>Tu</code>; or <a

  1953    href="#typeset-sideways">typeset it sideways</a> (90° clockwise from

  1954    horizontal) if its orientation property is <code>R</code>. For

  1955    <code>Tr</code> <a href="#character"><i>characters</i></a>, which are

  1956    intended to be either transformed or rotated sideways, the UA may assume

  1957    that appropriate glyphs for upright typesetting are given in the font and

  1958    render them upright; alternately it may check for such glyphs first, and

  1959    fall back to typesetting them sideways if the appropriate glyphs are

  1960    missing.

  1962   <p> In some systems (e.g. when using OpenType fonts), to correctly orient a

  1963    <a href="#character"><i>character</i></a> belonging to the Mongolian or

  1964    Phags-pa script upright, the UA must actually typeset it <a

  1965    href="#typeset-sideways">sideways</a>.

  1967   <p class=note>This is because the "upright" orientation in the Unicode code

  1968    charts (which assume vertical typesetting) and the "upright" orientation

  1969    of the glyphs of these scripts in most OpenType fonts (which assume

  1970    horizontal typesetting) don't match.

  1972   <h4 id=vertical-font-features><span class=secno>5.1.2. </span> Vertical

  1973    Typesetting and Font Features</h4>

  1975   <p>When typesetting text in ‘<a href="#mixed"><code

  1976    class=css>mixed</code></a>’ and ‘<a href="#upright"><code

  1977    class=css>upright</code></a>’ orientations:

  1979   <dl>

  1980    <dt>upright characters

  1982    <dd> Are typeset upright with vertical font metrics. The UA must

  1983     synthesize vertical font metrics for fonts that lack them. (This

  1984     specification does not define heuristics for synthesizing such metrics.)

  1985     Additionally, font features (such as alternate glyphs and other

  1986     transformation) intended for use in vertical typesetting must be used.

  1987     (E.g. the OpenType ‘<code class=css>vert</code>’ feature must be

  1988     enabled.) Furthermore, characters from horizontal cursive scripts (such

  1989     as Arabic) are shaped in their isolated forms when typeset upright.

  1990     <p class=note>Note that even when typeset "upright", some glyphs should

  1991      appear rotated. For example, dashes and enclosing punctuation (such as

  1992      〈 LEFT ANGLE BRACKET U+3008) should be oriented relative to the inline

  1993      axis. In OpenType, this is typically handled by glyph substitution,

  1994      although not all fonts have alternate glyphs for all relevant

  1995      codepoints. (East Asian fonts usually provide alternates for East Asian

  1996      codepoints, but Western fonts typically lack any vertical typesetting

  1997      features.) Unicode published draft data on which <a

  1998      href="#character"><i>characters</i></a> should appear sideways as the

  1999      SVO property in <a

  2000      href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this

  2001      data file</a>; however, this property has been abandoned for the current

  2002      revision of <a href="#UTR50"

  2003      rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a>.

  2005    <dt id=typeset-sideways>sideways characters

  2007    <dd> Are typeset rotated 90° sideways with horizontal metrics, and

  2008     vertical typesetting features are not used. However, if the font has

  2009     features meant to be enabled for sideways text that is typeset in

  2010     vertical lines (e.g. to adjust brush stroke angles or alignment), those

  2011     features are used.

  2012     <!--<p class="issue">Propose 'svrt' as an OpenType substitution feature

  2013       that is applied to rotated horizontal text in vertical text runs,

  2014       to handle these cases.-->

  2015   </dl>

  2017   <p> All text in ‘<a href="#sideways"><code

  2018    class=css>sideways</code></a>’, ‘<a href="#sideways-right"><code

  2019    class=css>sideways-right</code></a>’, and ‘<a

  2020    href="#sideways-left"><code class=css>sideways-left</code></a>’

  2021    orientations is typeset using horizontal font metrics and the normal set

  2022    of features used for horizontal text runs. Vertical metrics, vertical

  2023    glyph variations, and any other features meant for text typeset in

  2024    vertical lines are <em>not</em> used.

  2026   <p class=note> The OpenType ‘<code class=css>vrt2</code>’ feature,

  2027    which is intended for mixed-orientation typesetting, is not used by CSS.

  2028    It delegates the responsibility for orienting glyphs to the font designer.

  2029    CSS instead dictates the orientation through <a href="#UTR50"

  2030    rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a> and orients glyphs by

  2031    typesetting them sideways or upright as appropriate.

  2033   <p class=issue>This section needs additional work. Suggestions are welcome.

  2034    <!-- random notes

  2035   Property to customize text-orientation (and line breaking class) of various

  2036   characters (yes, the name is horrible, we need a better one):

  2037     text-symbolize: latin ||

  2038                     greek ||

  2039                     cyrillic ||

  2040                     letter-symbols || /* letterlike symbols and math letters */

  2041                     arrows || /* and math relation operators?? */

  2042                     currency || /* Sc */

  2043                     rotate-symbols || /* other So */

  2045   Do symbols NFC-fold to Latin/Greek? If so we might have a problem there.

  2047   Roman numerals are poorly handled right now. If we make them upright, we

  2048   get the right behavior in most cases. But as soon as you get to 13, you

  2049   have a problem.

  2050 -->

  2052   <h2 id=abstract-box><span class=secno>6. </span> Abstract Box Terminology</h2>

  2054   <p>CSS2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  2055    defines the box layout model of CSS in detail, but only for the ‘<a

  2056    href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ writing

  2057    mode. Layout is analogous in writing modes other than ‘<a

  2058    href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’; however

  2059    directional and dimensional terms in CSS2.1 must be abstracted and

  2060    remapped appropriately.

  2062   <p>This section defines abstract directional and dimensional terms and

  2063    their mappings in order to define box layout for other writing modes, and

  2064    to provide terminology for future specs to define their layout concepts

  2065    abstractly. (The next section explains how to apply them to CSS2.1 layout

  2066    calculations and how to handle <a href="#orthogonal-flows">orthogonal

  2067    flows</a>.) Although they derive from the behavior of text, these abstract

  2068    mappings exist even for boxes that do not contain any line boxes: they are

  2069    calculated directly from the values of the ‘<a

  2070    href="#writing-mode1"><code class=property>writing-mode</code></a>’,

  2071    ‘<a href="#text-orientation0"><code

  2072    class=property>text-orientation</code></a>’, and ‘<a

  2073    href="#direction0"><code class=property>direction</code></a>’

  2074    properties.

  2076   <p>There are three sets of directional terms in CSS:

  2078   <dl>

  2079    <dt>physical

  2081    <dd>Interpreted relative to the page, independent of writing mode. The

  2082     physical directions are <i>left</i>, <i>right</i>, <i>top</i>, and

  2083     <i>bottom</i>.

  2085    <dt><a href="#logical-directions">flow-relative</a>

  2087    <dd>Interpreted relative to the flow of content. The flow-relative

  2088     directions are <a href="#start"><i>start</i></a> and <a

  2089     href="#end"><i>end</i></a>, or <a

  2090     href="#block-start"><i>block-start</i></a>, <a

  2091     href="#block-end"><i>block-end</i></a>, <a

  2092     href="#inline-start"><i>inline-start</i></a>, and <a

  2093     href="#inline-end"><i>inline-end</i></a> if the dimension is also

  2094     ambiguous.

  2096    <dt><a href="#line-directions">line-relative</a>

  2098    <dd>Interpreted relative to the orientation of the line box. The

  2099     line-relative directions are <a href="#line-left"><i>line-left</i></a>,

  2100     <a href="#line-right"><i>line-right</i></a>, <a

  2101     href="#over"><i>over</i></a>, and <a href="#under"><i>under</i></a>.

  2102   </dl>

  2104   <p>The <dfn id=physical-dimensions>physical dimensions</dfn> are

  2105    <i>width</i> and <i>height</i>, which correspond to measurements along the

  2106    <i>x-axis</i> (<i>vertical dimension</i>) and <i>y-axis</i> (<i>horizontal

  2107    dimension</i>), respectively. <a href="#abstract-dimensions">Abstract

  2108    dimensions</a> are identical in both flow-relative and line-relative

  2109    terms, so there is only one set of these terms.

  2111   <p class=note> Note: [[CSS-FLEXBOX]] also defines <a

  2112    href="http://www.w3.org/TR/css3-flexbox/#box-model">flex-relative

  2113    terms</a>, which are used in describing flex layout.

  2115   <h3 id=abstract-dimensions><span class=secno>6.1. </span> Abstract

  2116    Dimensions</h3>

  2118   <p>The <dfn id=abstract-dimensions0>abstract dimensions</dfn> are defined

  2119    below:

  2121   <dl>

  2122    <dt><dfn id=block-dimension>block dimension</dfn>

  2124    <dd>The dimension perpendicular to the flow of text within a line, i.e.

  2125     the <i>vertical dimension</i> in horizontal writing modes, and the

  2126     <i>horizontal dimension</i> in vertical writing modes.

  2128    <dt><dfn id=inline-dimension>inline dimension</dfn>

  2130    <dd>The dimension parallel to the flow of text within a line, i.e. the

  2131     <i>horizontal dimension</i> in horizontal writing modes, and the

  2132     <i>vertical dimension</i> in vertical writing modes.

  2134    <dt><dfn id=block-axis>block-axis</dfn>

  2136    <dd>The axis in the block dimension, i.e. the <i>vertical axis</i> in

  2137     horizontal writing modes and the <i>horizontal axis</i> in vertical

  2138     writing modes.

  2140    <dt><dfn id=inline-axis>inline-axis</dfn>

  2142    <dd>The axis in the inline dimension, i.e. the <i>horizontal axis</i> in

  2143     horizontal writing modes and the <i>vertical axis</i> in vertical writing

  2144     modes.

  2146    <dt><dfn id=extent>extent</dfn> or <dfn id=logical-height>logical

  2147     height</dfn>

  2149    <dt>

  2151    <dd>A measurement in the block dimension: refers to the physical height

  2152     (vertical dimension) in horizontal writing modes, and to the physical

  2153     width (horizontal dimension) in vertical writing modes.

  2155    <dt><dfn id=measure>measure</dfn> or <dfn id=logical-width>logical

  2156     width</dfn>

  2158    <dt>

  2160    <dd>A measurement in the inline dimension: refers to the physical width

  2161     (horizontal dimension) in horizontal writing modes, and to the physical

  2162     height (vertical dimension) in vertical writing modes. (The term <a

  2163     href="#measure"><i>measure</i></a> derives from its <a

  2164     href="http://en.wikipedia.org/wiki/Measure_%28typography%29">use in

  2165     typography</a>.)

  2166   </dl>

  2168   <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative

  2169    Directions</h3>

  2171   <p>The <dfn id=flow-relative-directions>flow-relative directions</dfn>, <a

  2172    href="#block-start"><i>block-start</i></a>, <a

  2173    href="#block-end"><i>block-end</i></a>, <a

  2174    href="#inline-start"><i>inline-start</i></a>, and <a

  2175    href="#inline-end"><i>inline-end</i></a>, are defined relative to the flow

  2176    of content on the page. In an <abbr title=left-to-right>LTR</abbr> ‘<a

  2177    href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ writing

  2178    mode, they correspond to the top, bottom, left, and right directions,

  2179    respectively. They are defined as follows:

  2181   <dl>

  2182    <dt><dfn id=block-start>block-start</dfn>

  2184    <dd>Nominally the side that comes earlier in the block progression, as

  2185     determined by the ‘<a href="#writing-mode1"><code

  2186     class=property>writing-mode</code></a>’ property: the physical top in

  2187     ‘<a href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’

  2188     mode, the right in ‘<a href="#vertical-rl"><code

  2189     class=css>vertical-rl</code></a>’, and the left in ‘<a

  2190     href="#vertical-lr"><code class=css>vertical-lr</code></a>’.

  2192    <dt><dfn id=block-end>block-end</dfn>

  2194    <dd>The side opposite <a href="#block-start"><i>block-start</i></a>.

  2196    <dt><dfn id=inline-start>inline-start</dfn>

  2198    <dd>Nominally the side from which text of its inline base direction will

  2199     start. For boxes with a used ‘<a href="#direction0"><code

  2200     class=property>direction</code></a>’ value of ‘<a href="#ltr"><code

  2201     class=css>ltr</code></a>’, this means the <a

  2202     href="#line-left"><i>line-left</i></a> side. For boxes with a used ‘<a

  2203     href="#direction0"><code class=property>direction</code></a>’ value of

  2204     ‘<a href="#rtl"><code class=css>rtl</code></a>’, this means the <a

  2205     href="#line-right"><i>line-right</i></a> side.

  2207    <dt><dfn id=inline-end>inline-end</dfn>

  2209    <dd>The side opposite <a href="#start"><i>start</i></a>.

  2210   </dl>

  2212   <p>Where unambiguous (or dual-meaning), the terms <dfn id=start>start</dfn>

  2213    and <dfn id=end>end</dfn> are used in place of <a

  2214    href="#block-start"><i>block-start</i></a>/<a

  2215    href="#inline-start"><i>inline-start</i></a> and <a

  2216    href="#block-end"><i>block-end</i></a>/<a

  2217    href="#inline-end"><i>inline-end</i></a>, respectively.

  2219   <p class=note>Note that while determining the <a

  2220    href="#block-start"><i>block-start</i></a> and <a

  2221    href="#block-end"><i>block-end</i></a> sides of a box depends only on the

  2222    ‘<a href="#writing-mode1"><code

  2223    class=property>writing-mode</code></a>’ property, determining the <a

  2224    href="#inline-start"><i>inline-start</i></a> and <a

  2225    href="#inline-end"><i>inline-end</i></a> sides of a box depends not only

  2226    on the ‘<a href="#writing-mode1"><code

  2227    class=property>writing-mode</code></a>’ property but also the ‘<a

  2228    href="#direction0"><code class=property>direction</code></a>’

  2229    <em>and</em> ‘<a href="#text-orientation0"><code

  2230    class=property>text-orientation</code></a>’ properties.

  2232   <div class=example>

  2233    <p>An English (LTR-TB) block:

  2235    <pre class=ascii-art>

  2236                   &lt;----- width / measure  -----&gt;

  2238                              top side/

  2239                           block-start side

  2240                   +------------------------------+                  A

  2241       left side/  |   ---inline direction --->   |  right side/     |

  2242 inline-start side |  |                           |  inline-end side |

  2243                   |  | block      * horizontal * |                height/

  2244                   |  | direction  *writing mode* |                extent

  2245                   |  V                           |                  |

  2246                   +------------------------------+                  V

  2247                              bottom side/

  2248                             block-end side

  2249     </pre>

  2250   </div>

  2252   <div class=example>

  2253    <p>A vertical Japanese block (TTB-RL):

  2255    <pre class=ascii-art>

  2256                   &lt;----- width / extent ------&gt;

  2258                              top side/

  2259                          inline-start side

  2260                   +------------------------------+                  A

  2261       left side/  |    &lt;---block direction---    |  right side/     |

  2262   block-end side  |                           |  | block-start side |

  2263                   |  *  vertical  *     inline|  |                height/

  2264                   |  *writing mode*  direction|  |                measure

  2265                   |                           V  |                  |

  2266                   +------------------------------+                  V

  2267                             bottom side/

  2268                            inline-end side

  2269     </pre>

  2270   </div>

  2272   <h3 id=line-directions><span class=secno>6.3. </span> Line-relative

  2273    Directions</h3>

  2275   <p>The <dfn id=line-orientation>line orientation</dfn> determines which

  2276    side of a line box is the logical “top” (ascender side). It is given

  2277    by a combination of ‘<a href="#text-orientation0"><code

  2278    class=property>text-orientation</code></a>’ and ‘<a

  2279    href="#writing-mode1"><code class=property>writing-mode</code></a>’.

  2280    Usually the line-relative “top” corresponds to the <a

  2281    href="#block-start"><i>block-start</i></a> side, but this is not always

  2282    the case: in Mongolian typesetting (and thus by default in ‘<a

  2283    href="#vertical-lr"><code class=css>vertical-lr</code></a>’ writing

  2284    modes), the line-relative “top” corresponds to the <a

  2285    href="#block-end"><i>block-end</i></a> side. Hence the need for distinct

  2286    terminology.

  2288   <div class=figure> <img alt="Mongolian mixed with English"

  2289    src=mongolian-lr.jpg>

  2290    <p class=caption>A primarily Mongolian document, such as the one above, is

  2291     written in vertical lines stacking left to right, but lays its Latin text

  2292     with the tops of the glyphs towards the right. This makes the text run in

  2293     the same inline direction as Mongolian (top-to-bottom) and face the same

  2294     direction it does in other East Asian layouts (which have vertical lines

  2295     stacking right to left), but the glyphs' tops are facing the bottom of

  2296     the line stack rather than the top, which in an English paragraph would

  2297     be upside-down. (See this <a

  2298     href="diagrams/text-flow-vectors-lr-reverse.svg">Diagram of Mongolian

  2299     Text Layout</a>.)

  2300   </div>

  2302   <p>In addition to a line-relative “top” and “bottom” to map things

  2303    like ‘<code class=css>vertical-align: top</code>’, CSS also needs to

  2304    refer to a line-relative “left” and “right” in order to map things

  2305    like ‘<code class=css>text-align: left</code>’. Thus there are four

  2306    <dfn id=line-relative-directions>line-relative directions</dfn>, which are

  2307    defined relative to the <a href="#line-orientation"><i>line

  2308    orientation</i></a> as follows:

  2310   <dl>

  2311    <dt><dfn id=over>over</dfn>

  2313    <dd>Nominally the side that corresponds to the ascender side or “top”

  2314     side of a line box. (The side overlines are typically drawn on.)

  2316    <dt><dfn id=under>under</dfn>

  2318    <dd>Opposite of <a href="#over"><i>over</i></a>: the line-relative

  2319     “bottom” or descender side. (The side underlines are typically drawn

  2320     on.)

  2322    <dt><dfn id=line-left>line-left</dfn>

  2324    <dd>Nominally the side from which <abbr title=left-to-right>LTR</abbr>

  2325     text would start.

  2327    <dt><dfn id=line-right>line-right</dfn>

  2329    <dd>Nominally the side from which <abbr title=right-to-left>RTL</abbr>

  2330     text would start. (Opposite of <a

  2331     href="#line-left"><i>line-left</i></a>.)

  2332   </dl>

  2334   <p>See the <a href="#logical-to-physical">table below</a> for the exact

  2335    mappings between physical and line-relative directions.

  2337   <div class=figure> <a href="diagrams/line-orient-up.svg"

  2338    type="image/svg+xml"> <img alt="Line orientation compass" class=landscape

  2339    src="diagrams/line-orient-up.png"></a>

  2340    <p class=caption>Line orientation compass

  2341   </div>

  2343   <div class=figurepair>

  2344    <div class=figure> <a href="diagrams/line-orient-right.svg"

  2345     type="image/svg+xml"> <img alt="Typical orientation in vertical"

  2346     class=portrait src="diagrams/line-orient-right.png"></a>

  2347     <p class=caption>Typical orientation in vertical

  2348    </div>

  2350    <div class=figure> <a href="diagrams/line-orient-left.svg"

  2351     type="image/svg+xml"> <img

  2352     alt="Line orientation with ''text-orientation: sideways-left''"

  2353     class=portrait src="diagrams/line-orient-left.png"></a>

  2354     <p class=caption>Line orientation with ‘<code

  2355      class=css>text-orientation: sideways-left</code>’

  2356    </div>

  2357   </div>

  2359   <h3 id=logical-to-physical><span class=secno>6.4. </span>

  2360    Abstract-to-Physical Mappings</h3>

  2362   <p>The following table summarizes the abstract-to-physical mappings:

  2364   <table class="complex data">

  2365    <caption>Abstract-Physical Mapping</caption>

  2367    <colgroup class=header></colgroup>

  2369    <colgroup span=10></colgroup>

  2371    <thead>

  2372     <tr>

  2373      <th scope=row>‘<a href="#writing-mode1"><code

  2374       class=property>writing-mode</code></a>’

  2376      <th colspan=2>‘<a href="#horizontal-tb"><code

  2377       class=css>horizontal-tb</code></a>’

  2379      <th colspan=4>‘<a href="#vertical-rl"><code

  2380       class=css>vertical-rl</code></a>’

  2382      <th colspan=4>‘<a href="#vertical-lr"><code

  2383       class=css>vertical-lr</code></a>’

  2385     <tr>

  2386      <th scope=row>‘<a href="#text-orientation0"><code

  2387       class=property>text-orientation</code></a>’

  2389      <th colspan=2>—

  2391      <th colspan=2>‘<a href="#sideways-left"><code

  2392       class=css>sideways-left</code></a>’

  2394      <th colspan=2><abbr title="mixed, upright, sideways-right">*right</abbr>

  2396      <th colspan=2>‘<a href="#sideways-left"><code

  2397       class=css>sideways-left</code></a>’

  2399      <th colspan=2><abbr title="mixed, upright, sideways-right">*right</abbr>

  2401     <tr>

  2402      <th scope=row>‘<a href="#direction0"><code

  2403       class=property>direction</code></a>’

  2405      <th>‘<a href="#ltr"><code class=css>ltr</code></a>’

  2407      <th>‘<a href="#rtl"><code class=css>rtl</code></a>’

  2409      <th>‘<a href="#ltr"><code class=css>ltr</code></a>’

  2411      <th>‘<a href="#rtl"><code class=css>rtl</code></a>’

  2413      <th>‘<a href="#ltr"><code class=css>ltr</code></a>’

  2415      <th>‘<a href="#rtl"><code class=css>rtl</code></a>’

  2417      <th>‘<a href="#ltr"><code class=css>ltr</code></a>’

  2419      <th>‘<a href="#rtl"><code class=css>rtl</code></a>’

  2421      <th>‘<a href="#ltr"><code class=css>ltr</code></a>’

  2423      <th>‘<a href="#rtl"><code class=css>rtl</code></a>’

  2425    <tbody>

  2426     <tr>

  2427      <th scope=row>extent

  2429      <td colspan=2>height

  2431      <td colspan=8>width

  2433     <tr>

  2434      <th scope=row>measure

  2436      <td colspan=2>width

  2438      <td colspan=8>height

  2440     <tr>

  2441      <th scope=row>block-start

  2443      <td colspan=2>top

  2445      <td colspan=4>right

  2447      <td colspan=4>left

  2449     <tr>

  2450      <th scope=row>block-end

  2452      <td colspan=2>bottom

  2454      <td colspan=4>left

  2456      <td colspan=4>right

  2458     <tr>

  2459      <th scope=row>inline-start

  2461      <td>left

  2463      <td>right

  2465      <td>bottom

  2467      <td>top

  2469      <td>top

  2471      <td>bottom

  2473      <td>bottom

  2475      <td>top

  2477      <td>top

  2479      <td>bottom

  2481     <tr>

  2482      <th scope=row>inline-end

  2484      <td>right

  2486      <td>left

  2488      <td>top

  2490      <td>bottom

  2492      <td>bottom

  2494      <td>top

  2496      <td>top

  2498      <td>bottom

  2500      <td>bottom

  2502      <td>top

  2504    <tbody>

  2505     <tr>

  2506      <th scope=row>over

  2508      <td colspan=2>top

  2510      <td colspan=2>left

  2512      <td colspan=2>right

  2514      <td colspan=2>left

  2516      <td colspan=2>right

  2518     <tr>

  2519      <th scope=row>under

  2521      <td colspan=2>bottom

  2523      <td colspan=2>right

  2525      <td colspan=2>left

  2527      <td colspan=2>right

  2529      <td colspan=2>left

  2531     <tr>

  2532      <th scope=row>line-left

  2534      <td colspan=2>left

  2536      <td colspan=2>bottom

  2538      <td colspan=2>top

  2540      <td colspan=2>bottom

  2542      <td colspan=2>top

  2544     <tr>

  2545      <th scope=row>line-right

  2547      <td colspan=2>right

  2549      <td colspan=2>top

  2551      <td colspan=2>bottom

  2553      <td colspan=2>top

  2555      <td colspan=2>bottom

  2556   </table>

  2558   <h2 id=abstract-layout><span class=secno>7. </span> Abstract Box Layout</h2>

  2560   <h3 id=vertical-layout><span class=secno>7.1. </span> Principles of Layout

  2561    in Vertical Writing Modes</h3>

  2563   <p>CSS box layout in vertical writing modes is analogous to layout in the

  2564    horizontal writing modes, following the principles outlined below:

  2566   <p>Layout calculation rules (such as those in CSS2.1, Section 10.3) that

  2567    apply to the horizontal dimension in horizontal writing modes instead

  2568    apply to the vertical dimension in vertical writing modes. Likewise,

  2569    layout calculation rules (such as those in CSS2.1, Section 10.6) that

  2570    apply to the vertical dimension in horizontal writing modes instead apply

  2571    to the horizontal dimension in vertical writing modes. Thus:

  2573   <ul>

  2574    <li>

  2575     <p>Layout rules that refer to the width use the height instead, and vice

  2576      versa.

  2578    <li>

  2579     <p>Layout rules that refer to the ‘<code class=css>*-left</code>’ and

  2580      ‘<code class=css>*-right</code>’ box properties (border, margin,

  2581      padding) use ‘<code class=css>*-top</code>’ and ‘<code

  2582      class=css>*-bottom</code>’ instead, and vice versa. Which side of the

  2583      box the property applies to doesn't change: only which values are inputs

  2584      to which layout calculations changes. The ‘<code

  2585      class=property>margin-left</code>’ property still affects the lefthand

  2586      margin, for example; however in a ‘<a href="#vertical-rl"><code

  2587      class=css>vertical-rl</code></a>’ writing mode it takes part in margin

  2588      collapsing in place of ‘<code class=property>margin-bottom</code>’.

  2590    <li>

  2591     <p>Layout rules that depend on the ‘<a href="#direction0"><code

  2592      class=property>direction</code></a>’ property to choose between left

  2593      and right (e.g. overflow, overconstraint resolution, the initial value

  2594      for ‘<code class=property>text-align</code>’, table column ordering)

  2595      are abstracted to the <a href="#start"><i>start</i></a> and <a

  2596      href="#end"><i>end</i></a> sides and applied appropriately.

  2597   </ul>

  2599   <div class=example>

  2600    <p>For example, in vertical writing modes, table rows are vertical and

  2601     table columns are horizontal. In a ‘<a href="#vertical-rl"><code

  2602     class=css>vertical-rl</code></a>’ ‘<a href="#mixed"><code

  2603     class=css>mixed</code></a>’ ‘<a href="#rtl"><code

  2604     class=css>rtl</code></a>’ table, the first column would be on the

  2605     bottom (the <a href="#inline-start"><i>inline-start</i></a> side), and

  2606     the first row on the right (the <a

  2607     href="#block-start"><i>block-start</i></a> side). The table's ‘<code

  2608     class=property>margin-right</code>’ and ‘<code

  2609     class=property>margin-left</code>’ would collapse with margins before

  2610     (on the right) and after (on the left) the table, respectively, and if

  2611     the table had ‘<code class=css>auto</code>’ values for ‘<code

  2612     class=property>margin-top</code>’ and ‘<code

  2613     class=property>margin-bottom</code>’ it would be centered vertically

  2614     within its block flow.

  2616    <div class=figure>

  2617     <p><a href="diagrams/vertical-table.svg" type="image/svg+xml"> <img

  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."

  2619      class=example src="diagrams/vertical-table.png"></a>

  2621     <p class=caption>Table in ‘<a href="#vertical-rl"><code

  2622      class=css>vertical-rl</code></a>’ RTL writing mode

  2623    </div>

  2624   </div>

  2626   <p>For features such as text alignment, floating, and list marker

  2627    positioning, that primarily reference the left or right sides of the line

  2628    box or its longitudinal parallels and therefore have no top or bottom

  2629    equivalent, the <a href="#line-left">line left</a> and <a

  2630    href="#line-right">line right</a> sides are used as the reference for the

  2631    left and right sides respectively.

  2633   <p>Likewise for features such as underlining, overlining, and baseline

  2634    alignment (the unfortunately-named ‘<code

  2635    class=property>vertical-align</code>’), that primarily reference the top

  2636    or bottom sides of the linebox or its transversal parallels and therefore

  2637    have no left or right equivalent, the <a href="#over">over</a> and <a

  2638    href="#under">under</a> sides are used as the reference for the top and

  2639    bottom sides respectively.

  2641   <p>The details of these mappings are provided below.

  2643   <h3 id=dimension-mapping><span class=secno>7.2. </span> Dimensional Mapping</h3>

  2644   <!--

  2645   <p>Properties that are named in terms of the x and y axes are

  2646     logical with respect to the block flow direction rather than absolute

  2647     with respect to the page. Specifically:

  2649   <ul>

  2650     <li>The ''repeat-x'' keyword of 'background-repeat' tiles in the

  2651       inline dimension of the element, which is not necessarily the

  2652       horizontal dimension. [[!CSS21]] [[!CSS3BG]]

  2653     <li>The ''repeat-y'' keyword of 'background-repeat' tiles in the

  2654       block flow dimension of the element, which is not necessarily

  2655       the vertical dimension. [[!CSS21]] [[!CSS3BG]]

  2656     <li>The 'overflow-x' property controls overflow in the inline

  2657       dimension of the element. [[!CSS3UI]]

  2658     <li>The 'overflow-y' property controls overflow in the block

  2659       flow dimension of the element. [[!CSS3UI]]

  2660   </ul>

  2661 -->

  2663   <p>Certain properties behave logically as follows:

  2665   <ul>

  2666    <li>The first and second values of the ‘<code

  2667     class=property>border-spacing</code>’ property represent spacing

  2668     between columns and rows respectively, not necessarily the horizontal and

  2669     vertical spacing respectively. <a href="#CSS21"

  2670     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  2672    <li>The ‘<code class=property>line-height</code>’ property always

  2673     refers to the logical height. <a href="#CSS21"

  2674     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  2675   </ul>

  2677   <p>The height properties (‘<code class=property>height</code>’,

  2678    ‘<code class=property>min-height</code>’, and ‘<code

  2679    class=property>max-height</code>’) refer to the physical height, and the

  2680    width properties (‘<code class=property>width</code>’, ‘<code

  2681    class=property>min-width</code>’, and ‘<code

  2682    class=property>max-width</code>’) refer to the physical width. However,

  2683    the rules used to calculate box dimensions and positions are logical.

  2685   <p>For example, the calculation rules in <a

  2686    href="http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins">CSS2.1

  2687    Section 10.3</a> are used for the inline dimension measurements: they

  2688    apply to the measure (which could be either the physical width or physical

  2689    height) and to the <a href="#inline-start"><i>inline-start</i></a> and <a

  2690    href="#inline-end"><i>inline-end</i></a> margins, padding, and border.

  2691    Likewise the calculation rules in <a

  2692    href="http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins">CSS2.1

  2693    Section 10.6</a> are used in the block dimension: they apply to the <a

  2694    href="#extent"><i>extent</i></a> and to the <a

  2695    href="#block-start"><i>block-start</i></a> and <a

  2696    href="#block-end"><i>block-end</i></a> margins, padding, and border. <a

  2697    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  2699   <p>As a corollary, percentages on the margin and padding properties, which

  2700    are always calculated with respect to the containing block width in

  2701    CSS2.1, are calculated with respect to the <a

  2702    href="#measure"><em>measure</em></a> of the containing block in CSS3.

  2704   <h3 id=orthogonal-flows><span class=secno>7.3. </span> Orthogonal Flows</h3>

  2706   <p>When an element has a different ‘<a href="#writing-mode1"><code

  2707    class=property>writing-mode</code></a>’ from its containing block two

  2708    cases are possible:

  2710   <ul>

  2711    <li>The two writing modes are parallel to each other. (For example, ‘<a

  2712     href="#vertical-rl"><code class=css>vertical-rl</code></a>’ and ‘<a

  2713     href="#vertical-lr"><code class=css>vertical-lr</code></a>’).

  2715    <li>The two writing modes are perpendicular to each other. (For example,

  2716     ‘<a href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’

  2717     and ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’).

  2718   </ul>

  2720   <p> When an element has a writing mode that is perpendicular to its

  2721    containing block it is said to be in, or establish, an <dfn

  2722    id=orthogonal-flow

  2723    title="establish an orthogonal flow | orthogonal flow">orthogonal

  2724    flow</dfn>.

  2726   <p> To handle this case, CSS layout calculations are divided into two

  2727    phases: sizing a box, and positioning the box within its flow.

  2729   <ul>

  2730    <li> In the sizing phase—calculating the width and height of the

  2731     box—the dimensions of the box and the containing block are mapped to

  2732     the measure and extent and calculations are performed accordingly using

  2733     the writing mode of the <em>element</em>.

  2735    <li> In the positioning phase—calculating the positioning offsets,

  2736     margins, borders, and padding—the dimensions of the box and its

  2737     containing block are mapped to the measure and extent and calculations

  2738     are performed according to the writing mode of the <em>containing

  2739     block</em>.

  2740   </ul>

  2742   <p>Since ‘<code class=css>auto</code>’ margins are resolved consistent

  2743    with the containing block's writing mode, a box establishing an <a

  2744    href="#orthogonal-flow"><i>orthogonal flow</i></a> can, once sized, be

  2745    aligned or centered within its containing block just like other

  2746    block-level elements by using auto margins.

  2748   <div class=example>

  2749    <p> For example, if a vertical block is placed inside a horizontal block,

  2750     then when calculating the physical height (which is the measure) of the

  2751     child block the physical height of the parent block is used as the

  2752     child's containing block measure, even though the physical height is the

  2753     extent, not the measure, of the parent block.

  2755    <p> On the other hand, because the containing block is in a horizontal

  2756     writing mode, the vertical margins on the child participate in

  2757     margin-collapsing, even though they are in the inline-axis of the child,

  2758     and horizontal auto margins will expand to fill the containing block,

  2759     even though they are in the block-axis of the child.

  2761    <p class=issue> Add a picture.

  2762   </div>

  2764   <p>It is common in CSS for a containing block to have a definite measure,

  2765    but not a definite extent. This typically happens in CSS2.1 when a

  2766    containing block has an ‘<code class=css>auto</code>’ height, for

  2767    example: its width is given by the calculations in <a

  2768    href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>, but

  2769    its extent depends on its contents. In such cases the <i>available

  2770    measure</i> is defined as the measure of the containing block; but the

  2771    <i>available extent</i>, which would otherwise be the extent of the

  2772    containing block, is infinite.

  2774   <p>Putting a box in an <a href="#orthogonal-flow"><i>orthogonal

  2775    flow</i></a> allows the opposite to happen: for the <i>available

  2776    extent</i> to be defined, but the <i>available measure</i> to be

  2777    indefinite. In such cases a percentage of the containing block measure

  2778    cannot be defined, and inline-axis computations cannot be resolved. In

  2779    these cases, the initial containing block's size is used as a

  2780    <i>fallback</i> variable in place of the <i>available measure</i> for

  2781    calculations that require a definite <i>available measure</i>.

  2783   <h4 id=orthogonal-auto><span class=secno>7.3.1. </span> Auto-sizing in

  2784    Orthogonal Flows</h4>

  2786   <p class=issue> This section needs careful review for whether it is a)

  2787    correct and b) sensible.

  2789   <p> If the UA does not support CSS Multi-column Layout <a href="#CSS3COL"

  2790    rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> and the element is a

  2791    block container, when the computed measure of the element establishing an

  2792    orthogonal flow is ‘<code class=css>auto</code>’, then the used inner

  2793    measure is calculated as:

  2795   <p> <code>min(<var>max-content</var>, max(<var>min-content</var>,

  2796    min(<var>fill-available</var>, <var>fill-fallback</var>)))</code>, where:

  2798   <dl>

  2799    <dt><var>min-content</var>

  2801    <dd>the <a

  2802     href="http://www.w3.org/TR/css3-sizing/#min-content-measure">min-content

  2803     measure</a> of the element

  2805    <dt><var>max-content</var>

  2807    <dd>the <a

  2808     href="http://www.w3.org/TR/css3-sizing/#max-content-measure">max-content

  2809     measure</a> of the element

  2811    <dt><var>fill-available</var>

  2813    <dd>the <a

  2814     href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available

  2815     fit</a> into the element's containing block's size in the element's

  2816     inline axis

  2818    <dt><var>fill-fallback</var>

  2820    <dd>the <a

  2821     href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available

  2822     fit</a> into the initial containing block's size in the element's inline

  2823     axis

  2824   </dl>

  2826   <p> See <a href="#CSS3-SIZING"

  2827    rel=biblioentry>[CSS3-SIZING]<!--{{!CSS3-SIZING}}--></a> for further

  2828    details.

  2830   <h4 id=orthogonal-multicol><span class=secno>7.3.2. </span> Multi-column

  2831    Layout in Orthogonal Flows</h4>

  2833   <p> If the UA supports CSS Multi-column Layout <a href="#CSS3COL"

  2834    rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> and the element is a

  2835    block container or multi-column element, for the case where the element's

  2836    extent or available extent is <i>definite</i> but the element's measure is

  2837    ‘<code class=css>auto</code>’:

  2839   <ol>

  2840    <li> If ‘<code class=property>column-count</code>’ and ‘<code

  2841     class=property>column-width</code>’ are both ‘<code

  2842     class=css>auto</code>’, calculate the used ‘<code

  2843     class=property>column-width</code>’ as the inner measure for ‘<code

  2844     class=css>auto</code>’-sized elements, as defined above.

  2846    <li> If the columns' extent is <i>indefinite</i>, the <i>fill-available

  2847     extent</i> of the element is used.

  2849    <li> The used ‘<code class=property>column-count</code>’ then follows

  2850     from filling the resulting columns with the element's content.

  2851   </ol>

  2853   <p> The used measure of the resulting multi-column element is then

  2854    calculated: if the content neither line-wraps nor fragments within the

  2855    multi-column element, then the used measure is the <i>max-content

  2856    measure</i> of the element's contents; else it is calculated from the used

  2857    ‘<code class=property>column-width</code>’, ‘<code

  2858    class=property>column-count</code>’, and ‘<code

  2859    class=property>column-gap</code>’.

  2861   <p> The used extent of the element is either the used column extent (if

  2862    multiple columns were used) or the <i>max-content extent</i> of the

  2863    content.

  2865   <p class=note>This should behave the same as the auto-sizing algorithm

  2866    defined in the previous section, except overflowing content, instead of

  2867    continuing off the side of the containing block, is wrapped into columns

  2868    in the flow direction of the containing block, thus avoiding T-shaped

  2869    documents.

  2871   <h4 id=orthogonal-pagination><span class=secno>7.3.3. </span> Fragmenting

  2872    Orthogonal Flows</h4>

  2874   <p><em>This section is informative.</em>

  2876   <p>With regards to fragmentation, the rules in CSS2.1 still hold in

  2877    vertical writing modes and orthogonal flows: break opportunities do not

  2878    occur inside line boxes, only between them. UAs that support <a

  2879    href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> may break

  2880    in the (potentially zero-width) gap between columns, however.

  2882   <p>Note that if content spills outside the pagination stream established by

  2883    the root element, the UA is not required to print such content. Authors

  2884    wishing to mix writing modes with long streams of text are thus encouraged

  2885    to use CSS columns to keep all content flowing in the document's

  2886    pagination direction.

  2888   <div class=note>

  2889    <p>In other words, if your document would require two scrollbars on the

  2890     screen it probably won't all print. Fix your layout, e.g. by using <a

  2891     href="http://www.w3.org/TR/css3-multicol/">columns</a> so that it all

  2892     scrolls (and therefore paginates) in one direction if you want to make

  2893     sure it'll all print. T-shaped documents tend not to print well.

  2894   </div>

  2896   <h3 id=logical-direction-layout><span class=secno>7.4. </span>

  2897    Flow-Relative Mappings</h3>

  2899   <p>Flow-relative directions are calculated with respect to the writing mode

  2900    of the <em>containing block</em> of the element and used to abstract

  2901    layout rules related to the box properties (margins, borders, padding) and

  2902    any properties related to positioning the box within its containing block

  2903    (‘<code class=property>float</code>’, ‘<code

  2904    class=property>clear</code>’, ‘<code class=property>top</code>’,

  2905    ‘<code class=property>bottom</code>’, ‘<code

  2906    class=property>left</code>’, ‘<code class=property>right</code>’)

  2907    For inline-level elements, the writing mode of the <em>parent element</em>

  2908    is used instead.

  2910   <p>For example, the margin that is dropped when a box's inline dimension is

  2911    <a

  2912    href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">over-constrained</a>

  2913    is the end margin as determined by the writing mode of the containing

  2914    block.

  2916   <p>The <a

  2917    href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">margin

  2918    collapsing rules</a> apply exactly with the <em><a

  2919    href="#block-start"><i>block-start</i></a> margin</em> substituted for the

  2920    top margin and the <em><a href="#block-end"><i>block-end</i></a>

  2921    margin</em> substituted for the bottom margin. Similarly the <a

  2922    href="#block-start"><i>block-start</i></a> padding and border are

  2923    substituted for the top padding and border, and the <a

  2924    href="#block-end"><i>block-end</i></a> padding and border substituted for

  2925    the bottom padding and border. Note this means only <a

  2926    href="#block-start"><i>block-start</i></a> and <a

  2927    href="#block-end"><i>block-end</i></a> margins ever collapse.

  2929   <p>Flow-relative directions are calculated with respect to the writing mode

  2930    of the element and used to abstract layout related to the element's

  2931    contents:

  2933   <ul>

  2934    <li>The initial value of the ‘<code class=property>text-align</code>’

  2935     property aligns to the <a href="#start"><i>start</i></a> edge of the line

  2936     box.

  2938    <li>The ‘<code class=property>text-indent</code>’ property indents

  2939     from the <a href="#start"><i>start</i></a> edge of the line box.

  2941    <li>For tables, the ordering of columns begins on the <a

  2942     href="#inline-start"><i>inline-start</i></a> side of the table, and the

  2943     ordering of rows begins on the <a

  2944     href="#block-start"><i>block-start</i></a> side of the table.

  2945   </ul>

  2947   <h3 id=line-mappings><span class=secno>7.5. </span> Line-Relative Mappings</h3>

  2949   <p>The <dfn id=line-relative-directions0>line-relative directions</dfn> are

  2950    <a href="#over">over</a>, <a href="#under">under</a>, <a

  2951    href="#line-left">line-left</a>, and <a href="#line-right">line-right</a>.

  2952    In an <abbr title=left-to-right>LTR</abbr> ‘<a

  2953    href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ writing

  2954    mode, they correspond to the top, bottom, left, and right directions,

  2955    respectively.

  2957   <p>The line-right and line-left directions are calculated with respect to

  2958    the writing mode of the element and used to interpret the ‘<code

  2959    class=css>left</code>’ and ‘<code class=css>right</code>’ values of

  2960    the following properties:

  2962   <ul>

  2963    <li>the ‘<code class=property>text-align</code>’ property <a

  2964     href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  2965   </ul>

  2967   <p>The line-right and line-left directions are calculated with respect to

  2968    the writing mode of the <em>containing block</em> of the element and used

  2969    to interpret the ‘<code class=css>left</code>’ and ‘<code

  2970    class=css>right</code>’ values of the following properties:

  2972   <ul>

  2973    <li>the ‘<code class=property>float</code>’ property <a href="#CSS21"

  2974     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  2976    <li>the ‘<code class=property>clear</code>’ property <a href="#CSS21"

  2977     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  2978   </ul>

  2980   <p>The over and under directions are calculated with respect to the writing

  2981    mode of the element and used to define the interpretation of the "top"

  2982    (over edge) and "bottom" (under edge) of the line box as follows:

  2984   <ul>

  2985    <li>For the ‘<code class=property>vertical-align</code>’ property, the

  2986     "top" of the line box is the over edge; the "bottom" of the line box is

  2987     the under edge. Positive length and percentage values shift the baseline

  2988     towards the over edge. <a href="#CSS21"

  2989     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  2991    <li>For the ‘<code class=property>text-decoration</code>’ property,

  2992     the underline is drawn on the under side of the text; the overline is

  2993     drawn on the over side of the text. <a href="#CSS21"

  2994     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <span class=note>Note that

  2995     the CSS Text Module defines this in more detail and provides additional

  2996     controls for controlling the position of underlines and overlines. <a

  2997     href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a></span>

  2998   </ul>

  3000   <h3 id=physical-only><span class=secno>7.6. </span> Purely Physical

  3001    Mappings</h3>

  3003   <p>The following values are purely physical in their definitions and do not

  3004    respond to changes in writing mode:

  3006   <ul>

  3007    <li>the ‘<code class=css>rect()</code>’ notation of the ‘<code

  3008     class=property>clip</code>’ property <a href="#CSS21"

  3009     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  3011    <li>the background properties <a href="#CSS21"

  3012     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <a href="#CSS3BG"

  3013     rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>

  3015    <li>the border-image properties <a href="#CSS3BG"

  3016     rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>

  3018    <li>the offsets of the ‘<code class=property>box-shadow</code>’ and

  3019     ‘<code class=property>text-shadow</code>’ properties

  3020   </ul>

  3022   <h3 id=caption-side><span class=secno>7.7. </span> Table Caption Mappings:

  3023    the ‘<code class=property>caption-side</code>’ keywords</h3>

  3025   <table class=propdef>

  3026    <tbody>

  3027     <tr>

  3028      <th>Property:

  3030      <td>‘<code class=property>caption-side</code>’

  3032     <tr>

  3033      <th>New Values:

  3035      <td>‘<a href="#block-start"><code class=css>block-start</code></a>’

  3036       | ‘<a href="#block-end"><code class=css>block-end</code></a>’

  3038     <tr>

  3039      <th>Initial:

  3041      <td>start

  3043     <tr>

  3044      <th>Applies to:

  3046      <td>same as CSS2.1

  3048     <tr>

  3049      <th>Inherited:

  3051      <td>same as CSS2.1

  3053     <tr>

  3054      <th>Percentages:

  3056      <td>same as CSS2.1

  3058     <tr>

  3059      <th>Media:

  3061      <td>same as CSS2.1

  3063     <tr>

  3064      <th>Computed value:

  3066      <td>specified value

  3067   </table>

  3069   <p>This module introduces two new values to the ‘<code

  3070    class=property>caption-side</code>’ property: ‘<a

  3071    href="#block-start"><code class=css>block-start</code></a>’ and ‘<a

  3072    href="#block-end"><code class=css>block-end</code></a>’, which position

  3073    the caption before and after the table box, respectively. For tables with

  3074    ‘<a href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’

  3075    writing mode, they are equivalent to the existing ‘<code

  3076    class=css>top</code>’ and ‘<code class=css>bottom</code>’ values,

  3077    respectively. <a href="#CSS21"

  3078    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  3080   <p class=note>For implementations that support the ‘<code

  3081    class=css>top-outside</code>’ and ‘<code

  3082    class=css>bottom-outside</code>’ model, corresponding ‘<code

  3083    class=css>start-outside</code>’ and ‘<code

  3084    class=css>end-outside</code>’ are similarly introduced.

  3086   <p>Implementations that support the ‘<code class=css>top</code>’ and

  3087    ‘<code class=css>bottom</code>’ values of the ‘<code

  3088    class=property>caption-side</code>’ property but do not support side

  3089    captions (i.e. ‘<code class=css>left</code>’ and ‘<code

  3090    class=css>right</code>’ captions in horizontal writing modes) must treat

  3091    both ‘<code class=css>top</code>’ and ‘<code

  3092    class=css>bottom</code>’ as ‘<a href="#block-start"><code

  3093    class=css>block-start</code></a>’, when the table is in a vertical

  3094    writing mode.

  3096   <p>For implementations that do support side captions (i.e. the ‘<code

  3097    class=css>left</code>’ and ‘<code class=css>right</code>’ values

  3098    from the obsolete CSS 2.0 specification <a href="#CSS2"

  3099    rel=biblioentry>[CSS2]<!--{{CSS2}}--></a>), this module also introduces

  3100    the ‘<a href="#inline-start"><code class=css>inline-start</code></a>’

  3101    and ‘<a href="#inline-end"><code class=css>inline-end</code></a>’

  3102    values, which behave similarly and which position the caption on the <a

  3103    href="#inline-start"><i>inline-start</i></a> and <a

  3104    href="#inline-end"><i>inline-end</i></a> sides of the table box,

  3105    calculated with respect to the writing mode of the table element. For such

  3106    implementations, the ‘<code class=css>top</code>’ and ‘<code

  3107    class=css>bottom</code>’ values must place the caption on the top and

  3108    bottom sides of the table box, respectively.

  3110   <p class=note>The CSS2.0 side caption model had some <a

  3111    href="http://lists.w3.org/Archives/Public/www-style/2002Dec/0142.html">problems</a>

  3112    and will likely have a different definition in CSS3.</p>

  3113   <!--

  3114 <h3 id="html-attributes">HTML Attributes</h3>

  3116   <p>This section defines the mapping of HTML presentational attributes

  3117     in CSS. This section is normative for user agents supporting HTML

  3118     in addition to the 'writing-mode' property. [[!HTML40]] [[!HTML5]]

  3120   <h4 id="width-height-attributes">The <code>width</code> and <code>height</code> attributes</h4>

  3122   <p>The HTML <code>width</code> and <code>height</code> attributes refer

  3123     to the physical width and height for elements that that are replaced,

  3124     i.e.

  3125     <code>&lt;applet&gt;</code>,

  3126     <code>&lt;embed&gt;</code>,

  3127     <code>&lt;iframe&gt;</code>,

  3128     <code>&lt;img&gt;</code>,

  3129     <code>&lt;object&gt;</code>,

  3130     <code>&lt;canvas&gt;</code>,

  3131     and

  3132     <code>&lt;video&gt;</code>

  3134   <p>Form elements elements contain text, therefore their contents should be

  3135     affected by writing mode, in which case these attributes refer to the

  3136     <em>logical</em> width and height. The UA may, however, choose not

  3137     to rotate nor flip these elements in vertical writing modes if it is not

  3138     capable, and in that case, these attributes remain physical.</p>

  3139     <p class="issue">when not to rotate form elements/MathML,

  3140       should treat them as images (always upright)

  3141       or to force writing-mode to always calculate to horizontal-tb?</p>

  3143   <p>On table-related elements (<code>&lt;table&gt;</code>, <code>&lt;colgroup&gt;</code>,

  3144     <code>&lt;col&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;th&gt;</code>,

  3145     <code>&lt;td&gt;</code>) the <code>width</code> and <code>height</code>

  3146     attributes are always logical.

  3148   <p>The <code>size</code> attribute of the <code>&lt;hr&gt;</code> element

  3149     is also logical (refers to the logical height).

  3151   <h4 id="alignment-attributes">Alignment, Float and Clear Attributes</h4>

  3153   <p>The following attributes behave the same way as their corresponding

  3154     CSS properties:</p>

  3156   <ul>

  3157     <li><code>align</code> as 'float' or 'text-align'</li>

  3158     <li><code>clear</code> as 'clear'</li>

  3159     <li><code>valign</code> as 'vertical-align'</li>

  3160   </ul>

  3162   <h4 id="spacing-attributes">Spacing Attributes</h4>

  3164   <p>The following attributes are logical and, as margins, are logical

  3165     with respect to the writing mode of the <em>parent</em> element.</p>

  3167   <ul>

  3168     <li><code>hspace</code> as inline-start and inline-end margins</li>

  3169     <li><code>vspace</code> as block-start and block-end margins</li>

  3170     <li>marginwidth</li>

  3171     <li>marginheight</li>

  3172   </ul>

  3173 -->

  3175   <h2 id=page-direction><span class=secno>8. </span> Page Flow: the page

  3176    progression direction</h2>

  3178   <p>In paged media CSS2.1 classifies all pages as either left or right

  3179    pages. The page progression direction, which determines whether the left

  3180    or right page in a spread is first in the flow and whether the first page

  3181    is by default a left or right page, depends on the writing direction as

  3182    follows:

  3184   <ul>

  3185    <li>The page progression is right-to-left if the root element's ‘<a

  3186     href="#writing-mode1"><code class=property>writing-mode</code></a>’ is

  3187     ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’ or if

  3188     the root element's ‘<a href="#writing-mode1"><code

  3189     class=property>writing-mode</code></a>’ is ‘<a

  3190     href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ and its

  3191     ‘<a href="#direction0"><code class=property>direction</code></a>’ is

  3192     ‘<a href="#rtl"><code class=css>rtl</code></a>’.

  3194    <li>The page progression is left-to-right if the root element's ‘<a

  3195     href="#writing-mode1"><code class=property>writing-mode</code></a>’ is

  3196     ‘<a href="#vertical-lr"><code class=css>vertical-lr</code></a>’ or if

  3197     the root element's ‘<a href="#writing-mode1"><code

  3198     class=property>writing-mode</code></a>’ is ‘<a

  3199     href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ and its

  3200     ‘<a href="#direction0"><code class=property>direction</code></a>’ is

  3201     ‘<a href="#ltr"><code class=css>ltr</code></a>’.

  3202   </ul>

  3204   <p>(Unless otherwise overridden, the first page of a document begins on the

  3205    second half of a spread, e.g. on the right page in a left-to-right page

  3206    progression.)

  3208   <h2 id=text-combine><span class=secno>9. </span> Glyph Composition</h2>

  3210   <h3 id=text-combine-horizontal><span class=secno>9.1. </span>

  3211    Horizontal-in-Vertical Composition: the ‘<a

  3212    href="#text-combine-horizontal0"><code

  3213    class=property>text-combine-horizontal</code></a>’ property</h3>

  3215   <table class=propdef>

  3216    <tbody>

  3217     <tr>

  3218      <th>Name:

  3220      <td><dfn id=text-combine-horizontal0>text-combine-horizontal</dfn>

  3222     <tr>

  3223      <th><a href="#values">Value</a>:

  3225      <td>none | all | [ digits &lt;integer>? ] <!--

  3226             | [  [ numeric &lt;integer> | digits &lt;integer> ]

  3227             || [ alpha &lt;integer> | latin &lt;integer> ]

  3228             || alphanumeric &lt;integer> ]

  3229             -->

  3231     <tr>

  3232      <th>Initial:

  3234      <td>none

  3236     <tr>

  3237      <th>Applies to:

  3239      <td>non-replaced inline elements

  3241     <tr>

  3242      <th>Inherited:

  3244      <td><a class=issue

  3245       href="http://lists.w3.org/Archives/Public/www-style/2013Jul/0154.html">???</a>

  3247     <tr>

  3248      <th>Percentages:

  3250      <td>N/A

  3252     <tr>

  3253      <th>Media:

  3255      <td>visual

  3257     <tr>

  3258      <th>Computed value:

  3260      <td>specified value

  3261   </table>

  3263   <p>This property allows the combination of multiple characters into the

  3264    space of a single character. This property only has an effect in vertical

  3265    writing modes. Values have the following meanings:

  3267   <dl>

  3268    <dt><dfn id=none title="text-combine-horizontal:none">none</dfn>

  3270    <dd>No special processing.

  3272    <dt><dfn id=all title="text-combine-horizontal:all">all</dfn>

  3274    <dd>In vertical writing modes, attempt to display the text contents of the

  3275     element horizontally within the vertical line box. If the contents are

  3276     wider than 1em, the UA must fit the contents within 1em, see below. The

  3277     resulting composition is treated as a single glyph for the purposes of

  3278     layout and decoration. If the content contains any element boundaries

  3279     this is treated as ‘<code class=css>text-combine-horizontal:

  3280     none</code>’ on the element and any descendants. <!--

  3281     <dt><dfn title="text-combine-horizontal:numeric">numeric</dfn>

  3282     <dd>Within the element, each sequence of consecutive horizontal numbers

  3283       that has as many or fewer characters than the integer given is treated

  3284       as if it were in an anonymous inline box with

  3285       ''text-combine-horizontal: all''.

  3286       For this property, a <dfn>horizontal number</dfn> is any character

  3287       belonging to a Number category (N*) that does not belong to a

  3288       <a href="#script-orientations">vertical script</a>.

  3289 -->

  3291    <dt><dfn id=digits-ltinteger title="text-combine-horizontal:digits">digits

  3292     <var>&lt;integer></var>?</dfn>

  3294    <dd>Within the element, each maximal sequence of consecutive ASCII digits

  3295     (U+0030–U+0039) that has as many or fewer characters than the integer

  3296     given is treated as if it were in an anonymous inline box with ‘<code

  3297     class=css>text-combine-horizontal: all</code>’. When the integer is

  3298     omitted, 2 is used. Integers outside the range 1-4 are invalid. <!--

  3299     <dt><dfn title="text-combine-horizontal:alpha">alpha</dfn>

  3300     <dd>Within the element, each sequence of consecutive horizontal letters

  3301       that has as many or fewer characters than the integer given is treated

  3302       as if it were in an anonymous inline box with

  3303       ''text-combine-horizontal: all''.

  3304       For this property, a <dfn>horizontal letter</dfn> is any character belonging

  3305       to a Letter category (L*) that does not belong to a

  3306       <a href="#script-orientations">vertical script</a>.

  3307     <dt><dfn title="text-combine-horizontal:latin">latin</dfn>

  3308     <dd>Within the element, each sequence of Latin letters

  3309       that has as many or fewer characters than the integer given is treated

  3310       as if it were in an anonymous inline box with

  3311       ''text-combine-horizontal: all''.

  3312       For this property, a <dfn>Latin letter</dfn> is any character belonging to

  3313       a Letter category (L*) that also belongs to the Latin script.

  3314       <p class="issue">This definition could replace ''alpha'' as a simplification.

  3315       However, it wouldn't work for greek or mixtures of greek and latin (e.g. μm).

  3316     <dt><dfn title="text-combine-horizontal:alphanumeric">alphanumeric</dfn>

  3317     <dd>Within the element, each sequence of consecutive horizontal digits and/or

  3318       letters that has as many or fewer characters than the integer given is treated

  3319       as if it were in an anonymous inline box with

  3320       ''text-combine-horizontal: all''.

  3321 -->

  3322   </dl>

  3324   <div class=example>

  3325    <p>In East Asian documents, the ‘<a

  3326     href="#text-combine-horizontal0"><code

  3327     class=css>text-combine-horizontal</code></a>’ effect is often used to

  3328     display Latin-based strings such as components of a date or letters of an

  3329     initialism, always in a horizontal writing mode regardless of the writing

  3330     mode of the line:

  3332    <div class=figure>

  3333     <p><img

  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"

  3335      class=example src=tate-chu-yoko.png>

  3337     <p class=caption>Example of horizontal-in-vertical <i

  3338      lang=ja>tate-chu-yoko</i>

  3339    </div>

  3341    <p>The figure is the result of the rules

  3343    <pre>

  3344 <!-- -->date { text-combine-horizontal: digits 2; }

  3345     </pre>

  3347    <p>and the following markup:

  3349    <pre>

  3350 <!-- -->&lt;date&gt;平成20年4月16日に&lt;/date&gt;

  3351     </pre>

  3353    <p>In Japanese, this effect is known as <i lang=ja>tate-chu-yoko</i>.

  3354   </div>

  3356   <div class=example>

  3357    <p>The following example shows that applying ‘<code

  3358     class=css>text-combine-horizontal: digits 2</code>’ to an entire

  3359     document, rather than to a segment with a known type of numeric content,

  3360     can have unintended consequences:

  3362    <pre>&lt;p>あれは10,000円ですよ！&lt;/p></pre>

  3364    <div class=figure>

  3365     <p><img

  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."

  3367      class=example src=bad-tate-chu-yoko.png>

  3369     <p class=caption>Example of mis-applied <i lang=ja>tate-chu-yoko</i>

  3370    </div>

  3371   </div>

  3373   <p>In order to preserve typographic color when compressing the text to 1em,

  3374    when the combined text consists of more than one <a

  3375    href="#character"><i>character</i></a>, then any full-width <a

  3376    href="#character"><i>characters</i></a> must first be converted to their

  3377    non-full-width equivalents by reversing the algorithm defined for ‘<code

  3378    class=css>text-transform: full-width</code>’ in [[!CSS3-TEXT]]. Also, a

  3379    ‘<code class=property>font-variant</code>’ value of ‘<code

  3380    class=css>full-width</code>’ must be ignored in such cases: whether

  3381    applied via ‘<code class=css>@font-face</code>’ descriptor or property

  3382    declaration, within the combined text this value does not not cause the UA

  3383    to enable that font feature. <a href="#CSS3-FONTS"

  3384    rel=biblioentry>[CSS3-FONTS]<!--{{!CSS3-FONTS}}--></a>

  3386   <div class=example>

  3387    <p>For example, an author might apply both ‘<code

  3388     class=property>text-transform</code>’ and ‘<a

  3389     href="#text-combine-horizontal0"><code

  3390     class=property>text-combine-horizontal</code></a>’ to a date set in

  3391     vertical text.

  3393    <pre>date { text-combine-horizontal: digits 2; text-transform: full-width; }</pre>

  3395    <p>Suppose this style rule is applied to a date such as.

  3397    <pre>&lt;date>2010年2月23日&lt;/date></pre>

  3399    <p>The "2010" is too long to be combined (4 digits), but the "2" and "23"

  3400     will be affected. Since "23" is more than one character, it will not be

  3401     affected by ‘<code class=css>text-transform: full-width</code>’.

  3402     However since the "2" is only one character, it will be transformed to a

  3403     fullwidth "２". Since the "2010" was not combined, its digits, too, will

  3404     be transformed to fullwidth "２０１０"; and being fullwidth, they

  3405     will be typeset upright, giving the following result:

  3407    <pre style="text-align: center">

  3408 <!-- -->２

  3409 <!-- -->０

  3410 <!-- -->１

  3411 <!-- -->０

  3412 <!-- -->年

  3413 <!-- -->２

  3414 <!-- -->月

  3415 <!-- -->23

  3416 <!-- -->日</pre>

  3417   </div>

  3419   <p>When combining text as for ‘<code class=css>text-combine-horizontal:

  3420    all</code>’, the glyphs of the combined text are composed horizontally

  3421    (ignoring ‘<code class=property>letter-spacing</code>’ and any forced

  3422    line breaks, but using the specified font settings), similar to the

  3423    contents of an inline-box with a horizontal writing mode and a line-height

  3424    of 1em. The effective size of the composition is assumed to be 1em square;

  3425    anything outside the square is not measured for layout purposes. The UA

  3426    should center the glyphs horizontally and vertically within the measured

  3427    1em square. The baseline of the resulting composition must be chosen such

  3428    that the square is centered between the text-over and text-under baselines

  3429    of its parent inline box prior to any baseline alignment shift (‘<code

  3430    class=property>vertical-align</code>’). For bidi reordering, the

  3431    composition is treated the same as a character with ‘<code

  3432    class=css>text-orientation: upright</code>’. For line breaking before

  3433    and after the composition, it is treated as a regular inline with its

  3434    actual contents. For other text layout purposes, e.g. emphasis marks,

  3435    text-decoration, spacing, etc. the resulting composition is treated as a

  3436    single glyph representing the Object Replacement Character U+FFFC.

  3438   <p>The UA must ensure that the combined advance width of the composition

  3439    fits within 1em by compressing the combined text if necessary. (This does

  3440    not necessarily mean that the glyphs will fit within 1em, as some glyphs

  3441    are designed to draw outside their geometric boundaries.) OpenType

  3442    implementations <em>must</em> use width-specific variants

  3443    (<code>hwid<code>/<code>twid</code>/<code>qwid</code>) to compress text in

  3444    cases where those variants are available for all <a

  3445    href="#character"><i>characters</i></a> in the composition. Otherwise, the

  3446    UA may use any means to compress the text, including substituting

  3447    half-width, third-width, and/or quarter-width glyphs provided by the font,

  3448    using other font features designed to compress text horizontally, scaling

  3449    the text geometrically, or any combination thereof. </code></code>

  3451   <div class=example>

  3452    <p>For example, a simple OpenType-based implementation might compress the

  3453     text as follows:

  3455    <ol>

  3456     <li>Enable 1/<var>n</var>-width glyphs for combined text of <var>n</var>

  3457      <a href="#character"><i>characters</i></a>. (I.e. Use OpenType

  3458      <code>hwid</code> for 2 <a href="#character"><i>characters</i></a>,

  3459      <code>twid</code> for 3 <a href="#character"><i>characters</i></a>,

  3460      etc.) Note that the number of <a href="#character"><i>characters</i></a>

  3461      ≠ number of Unicode codepoints!

  3463     <li>Horizontally scale the result to 1em if it is not yet 1em or

  3464      narrower.

  3465    </ol>

  3467    <p>A more sophisticated OpenType implementation might compose the text

  3468     first with normal (proportional-width) glyphs to see if that fits, then

  3469     substitute in half-width or third-width forms as available and necessary,

  3470     possibly adjusting its approach or combining it with scaling operations

  3471     depending on the available glyph substitutions.

  3472   </div>

  3474   <p>In some fonts, the ideographic glyphs are given a compressed design such

  3475    that they are 1em wide but shorter than 1em tall. To accommodate such

  3476    fonts, the UA may vertically scale the the composition to match the

  3477    advance height of 水 U+6C34.

  3478    <!-- 水 U+6C34 was chosen because it is a very basic character common to

  3479     all Han-based scripts, so would have to appear in any usable ideographic

  3480     font; and its shape is very full in both dimensions, so it would be

  3481     unlikely to be shortened in a proportional font -->

  3482    <!--

  3483 <h3 id="text-combine-mode">

  3484 Horizontal-in-Vertical Glyph Scaling: the 'text-combine-mode' property</h3>

  3486   <table class="propdef">

  3487     <tbody>

  3488       <tr>

  3489         <th>Name:

  3490         <td><dfn>text-combine-mode</dfn>

  3491       </tr>

  3492       <tr>

  3493         <th><a href="#values">Value</a>:

  3494         <td>auto | compress | [ no-compress || use-glyphs ]

  3495       </tr>

  3496       <tr>

  3497         <th>Initial:

  3498         <td>auto

  3499       </tr>

  3500       <tr>

  3501         <th>Applies to:

  3502         <td>non-replaced inline elements

  3503       </tr>

  3504       <tr>

  3505         <th>Inherited:

  3506         <td>yes

  3507       </tr>

  3508       <tr>

  3509         <th>Percentages:

  3510         <td>N/A

  3511       </tr>

  3512       <tr>

  3513         <th>Media:

  3514         <td>visual

  3515       </tr>

  3516       <tr>

  3517         <th>Computed value:

  3518         <td>specified value

  3519       </tr>

  3520     </tbody>

  3521   </table>

  3523   <p>This property controls how multiple characters are combined into the

  3524     space of a single character when specified to do so via

  3525     'text-combine-horizontal'. Values have the following meanings:</p>

  3527   <dl>

  3528     <dt><dfn title="text-combine-mode:auto">auto</dfn>

  3529     <dd>If the contents are wider than 1em, the UA must attempt to fit the

  3530       contents within 1em, but may use any method to do so.

  3531     <dt><dfn title="text-combine-mode:compress">compress</dfn>

  3532     <dd>Compress the composition (horizontally) as a whole until it fits within 1em.

  3533       Do not substitute alternate-width glyphs.

  3534     <dt><dfn title="text-combine-mode:use-glyphs">use-glyphs</dfn>

  3535     <dd>Attempt to substitute narrower glyphs as necessary to make the

  3536       composition fit within 1em:

  3537       <ul>

  3538         <li>a two-character composition uses 1/2-em or proportional glyphs

  3539         <li>a three-character composition uses 1/3-em glyphs (if the font

  3540           supports this feature, else fall back to 1/2-em or proportional glyphs)

  3541         <li>etc.

  3542       </ul>

  3543       <p>Since even fonts that have fractional-width glyphs available do

  3544       not have such glyphs for all characters, the UA must ensure the

  3545       expected advance width for ''use-glyphs'' by either compressing or

  3546       padding (equally on both sides) each glyph individually if it does

  3547       not match the required advance width. (This step does not apply if

  3548       ''no-compress'' is specified.)

  3549     <dt><dfn title="text-combine-mode:no-compress">no-compress</dfn>

  3550     <dd>Do not compress the composition or perform any glyph substitution

  3551       in order to make the composition fit within 1em.

  3552       When combined with ''use-glyphs'', however, this indicates to perform

  3553       glyph substitution if possible per ''use-glyphs'' but not to compress

  3554       the glyphs if they do not fit the size requirements.

  3555       This value may cause the glyphs to overflow the line significantly.

  3556   </dl>

  3557 -->

  3559   <h2 class=no-num id=changes>Changes</h2>

  3561   <h3 class=no-num id=recent-changes> Changes since the <a

  3562    href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">May 2012

  3563    CSS Writing Modes Module Level 3 <abbr title="Working Draft">WD</abbr></a></h3>

  3565   <p>Major changes include:

  3567   <ul>

  3568    <li>Replaced ‘<a href="#unicode-bidi0"><code

  3569     class=property>unicode-bidi</code></a>’ value of ‘<code

  3570     class=css>isolate bidi-override</code>’ with single keyword ‘<a

  3571     href="#isolate-override"><code class=css>isolate-override</code></a>’.

  3573    <li>Clarified that bidi isolated content does not affect plaintext

  3574     heuristics of the containing paragraph.

  3576    <li>Lots of other clarifications to bidi.

  3578    <li>Renamed ‘<code class=css>mixed-right</code>’ value of ‘<a

  3579     href="#text-orientation0"><code

  3580     class=property>text-orientation</code></a>’ to ‘<a

  3581     href="#mixed"><code class=css>mixed</code></a>’.

  3583    <li>Updated references to UTR50 for orientation of characters in Unicode

  3584     and improved text defining vertical typesetting rules.

  3586    <li>Fixed errors and clarified auto-sizing rules for orthogonal flows.

  3588    <li>Replaced Appendix D with references to the new <a href="#CSS3-SIZING"

  3589     rel=biblioentry>[CSS3-SIZING]<!--{{!CSS3-SIZING}}--></a> module.

  3591    <li>Removed ‘<code class=property>text-combine-mode</code>’ property.

  3593    <li>Removed all ‘<a href="#text-combine-horizontal0"><code

  3594     class=property>text-combine-horizontal</code></a>’ values except

  3595     ‘<code class=css>none</code>’ and ‘<code class=css>all</code>’.

  3597    <li>Defined effect of ‘<a href="#text-combine-horizontal0"><code

  3598     class=property>text-combine-horizontal</code></a>’ on line-breaking.

  3599   </ul>

  3601   <h3 class=no-num id=changes-201109> Changes since the <a

  3602    href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/">September

  3603    2011 CSS Writing Modes Module Level 3 <abbr

  3604    title="Working Draft">WD</abbr></a></h3>

  3606   <p>Major changes include:

  3608   <ul>

  3609    <li>Hooked up vertical typesetting details to UTR50.

  3611    <li>Removed concept of "typographic modes".

  3613    <li>Altered <a href="#orthogonal-auto">orthogonal sizing</a> to take into

  3614     account the fill-available size; now the minimum of the fill-available

  3615     and ICB size is used to resolve ‘<code class=property>auto</code>’

  3616     sizes.

  3618    <li>Renamed ‘<code class=css>digits</code>’ to ‘<code

  3619     class=css>numeric</code>’ and ‘<code class=css>ascii-digits</code>’

  3620     to ‘<code class=css>digits</code>’ for ‘<a

  3621     href="#text-combine-horizontal0"><code

  3622     class=property>text-combine-horizontal</code></a>’.

  3624    <li>Defined interaction of ‘<a href="#text-combine-horizontal0"><code

  3625     class=property>text-combine-horizontal</code></a>’ and ‘<code

  3626     class=property>text-transform</code>’.

  3627   </ul>

  3629   <h2 id=conformance><span class=secno>10. </span> Conformance</h2>

  3631   <h3 id=conventions><span class=secno>10.1. </span> Document Conventions</h3>

  3633   <p>Conformance requirements are expressed with a combination of descriptive

  3634    assertions and RFC 2119 terminology. The key words “MUST”, “MUST

  3635    NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,

  3636    “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the

  3637    normative parts of this document are to be interpreted as described in RFC

  3638    2119. However, for readability, these words do not appear in all uppercase

  3639    letters in this specification.

  3641   <p>All of the text of this specification is normative except sections

  3642    explicitly marked as non-normative, examples, and notes. <a

  3643    href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>

  3645   <p>Examples in this specification are introduced with the words “for

  3646    example” or are set apart from the normative text with

  3647    <code>class="example"</code>, like this:

  3649   <div class=example>

  3650    <p>This is an example of an informative example.

  3651   </div>

  3653   <p>Informative notes begin with the word “Note” and are set apart from

  3654    the normative text with <code>class="note"</code>, like this:

  3656   <p class=note>Note, this is an informative note.

  3658   <h3 id=conformance-classes><span class=secno>10.2. </span> Conformance

  3659    Classes</h3>

  3661   <p>Conformance to CSS Writing Modes Level 3 is defined for three

  3662    conformance classes:

  3664   <dl>

  3665    <dt><dfn id=style-sheet title="style sheet!!as conformance class">style

  3666     sheet</dfn>

  3668    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS

  3669     style sheet</a>.

  3671    <dt><dfn id=renderer>renderer</dfn>

  3673    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>

  3674     that interprets the semantics of a style sheet and renders documents that

  3675     use them.

  3677    <dt><dfn id=authoring-tool>authoring tool</dfn>

  3679    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>

  3680     that writes a style sheet.

  3681   </dl>

  3683   <p>A style sheet is conformant to CSS Writing Modes Level 3 if all of its

  3684    declarations that use properties defined in this module have values that

  3685    are valid according to the generic CSS grammar and the individual grammars

  3686    of each property as given in this module.

  3688   <p>A renderer is conformant to CSS Writing Modes Level 3 if, in addition to

  3689    interpreting the style sheet as defined by the appropriate specifications,

  3690    it supports all the features defined by CSS Writing Modes Level 3 by

  3691    parsing them correctly and rendering the document accordingly. However,

  3692    the inability of a UA to correctly render a document due to limitations of

  3693    the device does not make the UA non-conformant. (For example, a UA is not

  3694    required to render color on a monochrome monitor.)

  3696   <p>An authoring tool is conformant to CSS Writing Modes Level 3 if it

  3697    writes style sheets that are syntactically correct according to the

  3698    generic CSS grammar and the individual grammars of each feature in this

  3699    module, and meet all other conformance requirements of style sheets as

  3700    described in this module.

  3702   <h3 id=partial><span class=secno>10.3. </span> Partial Implementations</h3>

  3704   <p>So that authors can exploit the forward-compatible parsing rules to

  3705    assign fallback values, CSS renderers <strong>must</strong> treat as

  3706    invalid (and <a

  3707    href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as

  3708    appropriate</a>) any at-rules, properties, property values, keywords, and

  3709    other syntactic constructs for which they have no usable level of support.

  3710    In particular, user agents <strong>must not</strong> selectively ignore

  3711    unsupported component values and honor supported values in a single

  3712    multi-value property declaration: if any value is considered invalid (as

  3713    unsupported values must be), CSS requires that the entire declaration be

  3714    ignored.

  3716   <h3 id=experimental><span class=secno>10.4. </span> Experimental

  3717    Implementations</h3>

  3719   <p>To avoid clashes with future CSS features, the CSS2.1 specification

  3720    reserves a <a

  3721    href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed

  3722    syntax</a> for proprietary and experimental extensions to CSS.

  3724   <p>Prior to a specification reaching the Candidate Recommendation stage in

  3725    the W3C process, all implementations of a CSS feature are considered

  3726    experimental. The CSS Working Group recommends that implementations use a

  3727    vendor-prefixed syntax for such features, including those in W3C Working

  3728    Drafts. This avoids incompatibilities with future changes in the draft.

  3730   <h3 id=testing><span class=secno>10.5. </span>Non-Experimental

  3731    Implementations</h3>

  3733   <p>Once a specification reaches the Candidate Recommendation stage,

  3734    non-experimental implementations are possible, and implementors should

  3735    release an unprefixed implementation of any CR-level feature they can

  3736    demonstrate to be correctly implemented according to spec.

  3738   <p>To establish and maintain the interoperability of CSS across

  3739    implementations, the CSS Working Group requests that non-experimental CSS

  3740    renderers submit an implementation report (and, if necessary, the

  3741    testcases used for that implementation report) to the W3C before releasing

  3742    an unprefixed implementation of any CSS features. Testcases submitted to

  3743    W3C are subject to review and correction by the CSS Working Group.

  3745   <p>Further information on submitting testcases and implementation reports

  3746    can be found from on the CSS Working Group's website at <a

  3747    href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.

  3748    Questions should be directed to the <a

  3749    href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>

  3750    mailing list.

  3752   <h3 id=cr-exit-criteria><span class=secno>10.6. </span> CR Exit Criteria</h3>

  3754   <p> For this specification to be advanced to Proposed Recommendation, there

  3755    must be at least two independent, interoperable implementations of each

  3756    feature. Each feature may be implemented by a different set of products,

  3757    there is no requirement that all features be implemented by a single

  3758    product. For the purposes of this criterion, we define the following

  3759    terms:

  3761   <dl>

  3762    <dt>independent

  3764    <dd>each implementation must be developed by a different party and cannot

  3765     share, reuse, or derive from code used by another qualifying

  3766     implementation. Sections of code that have no bearing on the

  3767     implementation of this specification are exempt from this requirement.

  3769    <dt>interoperable

  3771    <dd>passing the respective test case(s) in the official CSS test suite,

  3772     or, if the implementation is not a Web browser, an equivalent test. Every

  3773     relevant test in the test suite should have an equivalent test created if

  3774     such a user agent (UA) is to be used to claim interoperability. In

  3775     addition if such a UA is to be used to claim interoperability, then there

  3776     must one or more additional UAs which can also pass those equivalent

  3777     tests in the same way for the purpose of interoperability. The equivalent

  3778     tests must be made publicly available for the purposes of peer review.

  3780    <dt>implementation

  3782    <dd>a user agent which:

  3783     <ol class=inline>

  3784      <li>implements the specification.

  3786      <li>is available to the general public. The implementation may be a

  3787       shipping product or other publicly available version (i.e., beta

  3788       version, preview release, or “nightly build”). Non-shipping product

  3789       releases must have implemented the feature(s) for a period of at least

  3790       one month in order to demonstrate stability.

  3792      <li>is not experimental (i.e., a version specifically designed to pass

  3793       the test suite and is not intended for normal usage going forward).

  3794     </ol>

  3795   </dl>

  3797   <p>The specification will remain Candidate Recommendation for at least six

  3798    months.

  3800   <h2 class=no-num id=acknowledgements> Acknowledgements</h2>

  3802   <p>John Daggett, Martin Heijdra, Laurentiu Iancu, Yasuo Kida, Tatsuo

  3803    Kobayashi, Toshi Kobayashi, Ken Lunde, Nat McCully, Eric Muller, Paul

  3804    Nelson, Kenzou Onozawa, Dwayne Robinson, Michel Suignard, Taro Yamamoto,

  3805    Steve Zilles

  3807   <h2 class=no-num id=character-properties>Appendix A. Characters and

  3808    Properties</h2>

  3810   <p>Unicode defines three codepoint-level properties that are referenced in

  3811    CSS Writing Modes:

  3813   <dl>

  3814    <dt><a href="http://www.unicode.org/reports/tr11/#Definitions">East Asian

  3815     width</a>

  3817    <dd>Defined in <a href="#UAX11"

  3818     rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a> and given as the

  3819     East_Asian_Width property in the Unicode Character Database <a

  3820     href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>.

  3822    <dt><a

  3823     href="http://www.unicode.org/reports/tr44/#General_Category_Values">General

  3824     Category</a>

  3826    <dd>Defined in <a href="#UAX44"

  3827     rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a> and given as the

  3828     General_Category property in the Unicode Character Database <a

  3829     href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>.

  3831    <dt><a href="http://www.unicode.org/reports/tr24/#Values">Script

  3832     property</a>

  3834    <dd>Defined in <a href="#UAX24"

  3835     rel=biblioentry>[UAX24]<!--{{!UAX24}}--></a> and given as the Script

  3836     property in the Unicode Character Database <a href="#UAX44"

  3837     rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>. (UAs should include any

  3838     ScriptExtensions.txt assignments in this mapping.)

  3839   </dl>

  3841   <p id=grapheme-cluster>In several sections (as noted), the term <dfn

  3842    id=character>character</dfn> is defined as <em>extended grapheme

  3843    cluster</em> per <a href="#UAX29"

  3844    rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a>. It is roughly equivalent to

  3845    what a language user considers to be a character or a basic unit of the

  3846    script (which might not be a single Unicode codepoint). The UA may further

  3847    tailor this definition as appropriate to match typographic convention. For

  3848    example, when typesetting ‘<a href="#upright"><code

  3849    class=css>upright</code></a>’, Tibetan tsek and shad marks are kept with

  3850    the preceding letters, rather than treated as an independent cluster.

  3852   <p>Unicode defines properties for characters, but for ‘<a

  3853    href="#text-orientation0"><code

  3854    class=property>text-orientation</code></a>’, it is necessary to

  3855    determine the properties of a grapheme cluster. For the purposes of CSS

  3856    Writing Modes, the properties of a grapheme cluster are given by its base

  3857    character—except in two cases:

  3859   <ul>

  3860    <li>Grapheme clusters formed with an Enclosing Mark (Me) of the Common

  3861     script are considered to be Other Symbols (So) in the Common script. They

  3862     are assumed to have the same Unicode properties as the Replacement

  3863     Character U+FFFD.

  3865    <li>Grapheme clusters formed with a Space Separator (Zs) as the base are

  3866     considered to be Modifier Symbols (Sk). They are assumed to have the same

  3867     East Asian Width property as the base, but take their other properties

  3868     from the first combining character in the sequence.

  3869   </ul>

  3871   <h2 class=no-num id=bidi-html> Appendix B: Bidi Rules for HTML 4</h2>

  3873   <p>The style sheet rules that would achieve the bidi behaviors specified in

  3874    <a href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a> for the

  3875    HTML Strict doctype are given below:

  3877   <pre>

  3878 /* HTML dir attribute creates an embedding */

  3879 *[dir="ltr"]    { direction: ltr; unicode-bidi: embed; }

  3880 *[dir="rtl"]    { direction: rtl; unicode-bidi: embed; }

  3882 /* BDO element creates an override */

  3883 bdo[dir="ltr"]  { direction: ltr; unicode-bidi: bidi-override; }

  3884 bdo[dir="rtl"]  { direction: rtl; unicode-bidi: bidi-override; }

  3886 /* HTML4.01:8.2.6 - preserve bidi behavior if 'display' is changed */

  3887 html, body,

  3888 div, address, blockquote, p,

  3889 ul, ol, li, dl, dt, dd,

  3890 fieldset, form,

  3891 h1, h2, h3, h4, h5, h6,

  3892 { unicode-bidi: isolate; }

  3893   </pre>

  3895   <h2 class=no-num id=script-orientations>Appendix C: Vertical Scripts in

  3896    Unicode</h2>

  3898   <p><em>This section is informative.</em>

  3900   <p>This appendix lists the vertical and bi-orientational scripts in Unicode

  3901    6.0 <a href="#UNICODE" rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>

  3902    and their transformation from horizontal to vertical orientation. Any

  3903    script not listed explicitly is assumed to be <i>horizontal-only</i>. The

  3904    script classification of Unicode characters is given by <a href="#UAX24"

  3905    rel=biblioentry>[UAX24]<!--{{!UAX24}}--></a>.

  3907   <table class=data>

  3908    <caption>Vertical Scripts in Unicode</caption>

  3910    <thead>

  3911     <tr>

  3912      <th>Code

  3914      <th>Name

  3916      <th>Transform (Clockwise)

  3918      <th>Vertical Intrinsic Direction

  3920    <tbody>

  3921     <tr>

  3922      <td>Bopo

  3924      <td>Bopomofo

  3926      <th>0°

  3928      <th>ttb

  3930     <tr>

  3931      <td>Egyp

  3933      <td>Egyptian Hieroglyphs

  3935      <th>0°

  3937      <th>ttb

  3939     <tr>

  3940      <td>Hira

  3942      <td>Hiragana

  3944      <th>0°

  3946      <th>ttb

  3948     <tr>

  3949      <td>Kana

  3951      <td>Katakana

  3953      <th>0°

  3955      <th>ttb

  3957     <tr>

  3958      <td>Hani

  3960      <td>Han

  3962      <th>0°

  3964      <th>ttb

  3966     <tr>

  3967      <td>Hang

  3969      <td>Hangul

  3971      <th>0°

  3973      <th>ttb

  3975     <tr>

  3976      <td>Merc

  3978      <td>Meroitic Cursive

  3980      <th>0°

  3982      <th>ttb

  3984     <tr>

  3985      <td>Mero

  3987      <td>Meroitic Hieroglyphs

  3989      <th>0°

  3991      <th>ttb

  3993     <tr>

  3994      <td>Mong

  3996      <td>Mongolian

  3998      <th>90°

  4000      <th>ttb

  4002     <tr>

  4003      <td>Ogam

  4005      <td>Ogham

  4007      <th>-90°

  4009      <th>btt

  4011     <tr>

  4012      <td>Orkh

  4014      <td>Old Turkic

  4016      <th>-90°

  4018      <th>ttb

  4020     <tr>

  4021      <td>Phag

  4023      <td>Phags Pa

  4025      <th>90°

  4027      <th>ttb

  4029     <tr>

  4030      <td>Yiii

  4032      <td>Yi

  4034      <th>0°

  4036      <th>ttb

  4037   </table>

  4039   <p><strong>Exceptions:</strong> For the purposes of this specification, all

  4040    fullwidth (F) and wide (W) characters are treated as belonging to a

  4041    vertical script, and halfwidth characters (H) are treated as belonging ot

  4042    a horizontal script. <a href="#UAX11"

  4043    rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a>

  4045   <p class=note> CSS3 Writing Modes cannot correctly handle either Ogham or

  4046    Old Turkic. It is recommended that ‘<code class=css>text-orientation:

  4047    sideways-left</code>’ be used to typeset these scripts. A future version

  4048    of CSS may define automatic handling of these scripts.

  4050   <p class=note>Note that for vertical-only characters (such as Mongolian and

  4051    Phags Pa letters), the glyphs in the Unicode code charts are shown in

  4052    their vertical orientation. In horizontal text, they are typeset in a 90°

  4053    counter-clockwise rotation from this orientation.

  4055   <h2 class=no-num id=references> References</h2>

  4057   <h3 class=no-num id=normative-references> Normative references</h3>

  4058   <!--begin-normative-->

  4059   <!-- Sorted by label -->

  4061   <dl class=bibliography>

  4062    <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->

  4063     <!---->

  4065    <dt id=CSS21>[CSS21]

  4067    <dd>Bert Bos; et al. <a

  4068     href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style

  4069     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June

  4070     2011. W3C Recommendation. URL: <a

  4071     href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>

  4072    </dd>

  4073    <!---->

  4075    <dt id=CSS3-FONTS>[CSS3-FONTS]

  4077    <dd>John Daggett. <a

  4078     href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/"><cite>CSS Fonts

  4079     Module Level 3.</cite></a> 12 February 2013. W3C Working Draft. (Work in

  4080     progress.) URL: <a

  4081     href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a>

  4082    </dd>

  4083    <!---->

  4085    <dt id=CSS3-SIZING>[CSS3-SIZING]

  4087    <dd>Tab Atkins Jr.; Elika J. Etemad. <a

  4088     href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/"><cite>CSS

  4089     Intrinsic &amp; Extrinsic Sizing Module Level 3.</cite></a> 27 September

  4090     2012. W3C Working Draft. (Work in progress.) URL: <a

  4091     href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/">http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a>

  4092    </dd>

  4093    <!---->

  4095    <dt id=CSS3BG>[CSS3BG]

  4097    <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a

  4098     href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS

  4099     Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C

  4100     Candidate Recommendation. (Work in progress.) URL: <a

  4101     href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>

  4102    </dd>

  4103    <!---->

  4105    <dt id=CSS3COL>[CSS3COL]

  4107    <dd>Håkon Wium Lie. <a

  4108     href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS

  4109     Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate

  4110     Recommendation. (Work in progress.) URL: <a

  4111     href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>

  4112    </dd>

  4113    <!---->

  4115    <dt id=RFC2119>[RFC2119]

  4117    <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key

  4118     words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet

  4119     RFC 2119. URL: <a

  4120     href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>

  4121    </dd>

  4122    <!---->

  4124    <dt id=SVG11>[SVG11]

  4126    <dd>Erik Dahlström; et al. <a

  4127     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable

  4128     Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.

  4129     W3C Recommendation. URL: <a

  4130     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>

  4131    </dd>

  4132    <!---->

  4134    <dt id=UAX11>[UAX11]

  4136    <dd>Asmus Freytag. <a

  4137     href="http://www.unicode.org/reports/tr11/"><cite>East Asian

  4138     Width.</cite></a> 17 January 2012. Unicode Standard Annex #11. URL: <a

  4139     href="http://www.unicode.org/reports/tr11/">http://www.unicode.org/reports/tr11/</a>

  4140    </dd>

  4141    <!---->

  4143    <dt id=UAX24>[UAX24]

  4145    <dd>Mark Davis; Ken Whistler. <a

  4146     href="http://www.unicode.org/reports/tr24/"><cite>Unicode Script

  4147     Property.</cite></a> 13 January 2012. Unicode Standard Annex #24. URL: <a

  4148     href="http://www.unicode.org/reports/tr24/">http://www.unicode.org/reports/tr24/</a>

  4149    </dd>

  4150    <!---->

  4152    <dt id=UAX29>[UAX29]

  4154    <dd>Mark Davis. <a

  4155     href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text

  4156     Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29.

  4157     URL: <a

  4158     href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>

  4159    </dd>

  4160    <!---->

  4162    <dt id=UAX44>[UAX44]

  4164    <dd>Mark Davis; Ken Whistler. <a

  4165     href="http://www.unicode.org/reports/tr44/"><cite>Unicode Character

  4166     Database.</cite></a> 23 January 2012. Unicode Standard Annex #44. URL: <a

  4167     href="http://www.unicode.org/reports/tr44/">http://www.unicode.org/reports/tr44/</a>

  4168    </dd>

  4169    <!---->

  4171    <dt id=UAX9>[UAX9]

  4173    <dd>Mark Davis. <a

  4174     href="http://www.unicode.org/reports/tr9/"><cite>Unicode Bidirectional

  4175     Algorithm.</cite></a> 16 January 2012. Unicode Standard Annex #9. URL: <a

  4176     href="http://www.unicode.org/reports/tr9/">http://www.unicode.org/reports/tr9/</a>

  4177    </dd>

  4178    <!---->

  4180    <dt id=UNICODE>[UNICODE]

  4182    <dd>The Unicode Consortium. <a

  4183     href="http://www.unicode.org/standard/versions/enumeratedversions.html"><cite>The

  4184     Unicode Standard.</cite></a> 2012. Defined by: The Unicode Standard,

  4185     Version 6.2.0 (Mountain View, CA: The Unicode Consortium, 2012. ISBN

  4186     978-1-936213-07-8), as updated from time to time by the publication of

  4187     new versions URL: <a

  4188     href="http://www.unicode.org/standard/versions/enumeratedversions.html">http://www.unicode.org/standard/versions/enumeratedversions.html</a>

  4189    </dd>

  4190    <!---->

  4192    <dt id=UTR50>[UTR50]

  4194    <dd>Koji Ishii. <a

  4195     href="http://www.unicode.org/reports/tr50/"><cite>Unicode Properties for

  4196     Vertical Text Layout.</cite></a> 28 May 2013. Proposed Draft Unicode

  4197     Technical Report #50. URL: <a

  4198     href="http://www.unicode.org/reports/tr50/">http://www.unicode.org/reports/tr50/</a>

  4199    </dd>

  4200    <!---->

  4201   </dl>

  4202   <!--end-normative-->

  4204   <h3 class=no-num id=other-references> Other references</h3>

  4205   <!--begin-informative-->

  4206   <!-- Sorted by label -->

  4208   <dl class=bibliography>

  4209    <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->

  4210     <!---->

  4212    <dt id=CSS2>[CSS2]

  4214    <dd>Ian Jacobs; et al. <a

  4215     href="http://www.w3.org/TR/2008/REC-CSS2-20080411"><cite>Cascading Style

  4216     Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C

  4217     Recommendation. URL: <a

  4218     href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a>

  4219    </dd>

  4220    <!---->

  4222    <dt id=CSS3COLOR>[CSS3COLOR]

  4224    <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a

  4225     href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color

  4226     Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a

  4227     href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>

  4228    </dd>

  4229    <!---->

  4231    <dt id=CSS3LIST>[CSS3LIST]

  4233    <dd>Tab Atkins Jr. <a

  4234     href="http://www.w3.org/TR/2011/WD-css3-lists-20110524"><cite>CSS Lists

  4235     and Counters Module Level 3.</cite></a> 24 May 2011. W3C Working Draft.

  4236     (Work in progress.) URL: <a

  4237     href="http://www.w3.org/TR/2011/WD-css3-lists-20110524">http://www.w3.org/TR/2011/WD-css3-lists-20110524</a>

  4238    </dd>

  4239    <!---->

  4241    <dt id=CSS3PAGE>[CSS3PAGE]

  4243    <dd>Melinda Grant; et al. <a

  4244     href="http://www.w3.org/TR/2013/WD-css3-page-20130314/"><cite>CSS Paged

  4245     Media Module Level 3.</cite></a> 14 March 2013. W3C Working Draft. (Work

  4246     in progress.) URL: <a

  4247     href="http://www.w3.org/TR/2013/WD-css3-page-20130314/">http://www.w3.org/TR/2013/WD-css3-page-20130314/</a>

  4248    </dd>

  4249    <!---->

  4251    <dt id=CSS3TEXT>[CSS3TEXT]

  4253    <dd>Elika J. Etemad; Koji Ishii. <a

  4254     href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text

  4255     Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in

  4256     progress.) URL: <a

  4257     href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>

  4258    </dd>

  4259    <!---->

  4261    <dt id=HTML401>[HTML401]

  4263    <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a

  4264     href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01

  4265     Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a

  4266     href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>

  4267    </dd>

  4268    <!---->

  4270    <dt id=HTML5>[HTML5]

  4272    <dd>Ian Hickson. <a

  4273     href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a>

  4274     17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL:

  4275     <a

  4276     href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a>

  4277    </dd>

  4278    <!---->

  4280    <dt id=UTN22>[UTN22]

  4282    <dd>Elika J. Etemad. <a href="http://unicode.org/notes/tn22/"><cite>Robust

  4283     Vertical Text Layout.</cite></a> 25 April 2005. Unicode Technical Note

  4284     #22. URL: <a

  4285     href="http://unicode.org/notes/tn22/">http://unicode.org/notes/tn22/</a></dd>

  4286    <!---->

  4287   </dl>

  4288   <!--end-informative-->

  4290   <h2 class=no-num id=property-index> Property Index</h2>

  4291   <!--begin-properties-->

  4293   <table class=proptable>

  4294    <thead>

  4295     <tr>

  4296      <th>Property

  4298      <th>Values

  4300      <th>Initial

  4302      <th>Applies to

  4304      <th>Inh.

  4306      <th>Percentages

  4308      <th>Media

  4310    <tbody>

  4311     <tr>

  4312      <th><a class=property href="#direction0">direction</a>

  4314      <td>ltr | rtl

  4316      <td>ltr

  4318      <td>all elements

  4320      <td>yes

  4322      <td>N/A

  4324      <td>visual

  4326     <tr>

  4327      <th><a class=property

  4328       href="#text-combine-horizontal0">text-combine-horizontal</a>

  4330      <td>none | all | [ digits &lt;integer>? ]

  4332      <td>none

  4334      <td>non-replaced inline elements

  4336      <td>???

  4338      <td>N/A

  4340      <td>visual

  4342     <tr>

  4343      <th><a class=property href="#text-orientation0">text-orientation</a>

  4345      <td>mixed | upright | sideways-right | sideways-left | sideways |

  4346       use-glyph-orientation

  4348      <td>mixed

  4350      <td>all elements except table row groups, rows, column groups, and

  4351       columns

  4353      <td>yes

  4355      <td>N/A

  4357      <td>visual

  4359     <tr>

  4360      <th><a class=property href="#unicode-bidi0">unicode-bidi</a>

  4362      <td>normal | embed | isolate | bidi-override | isolate-override |

  4363       plaintext

  4365      <td>normal

  4367      <td>all elements, but see prose

  4369      <td>no

  4371      <td>N/A

  4373      <td>visual

  4375     <tr>

  4376      <th><a class=property href="#writing-mode1">writing-mode</a>

  4378      <td>horizontal-tb | vertical-rl | vertical-lr

  4380      <td>horizontal-tb

  4382      <td>All elements except table row groups, table column groups, table

  4383       rows, and table columns

  4385      <td>yes

  4387      <td>N/A

  4389      <td>visual

  4390   </table>

  4391   <!--end-properties-->

  4392   <!-- Add alphabetic index? -->

Mercurial > drafts / file revision

css-writing-modes/Overview.html@9a46d52c3a86

css-writing-modes/Overview.html