You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4342 lines
168 KiB
4342 lines
168 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
|
|
<html lang=en>
|
|
<head><meta content="text/html; charset=utf-8" http-equiv=Content-Type>
|
|
|
|
<title>CSS Writing Modes Module Level 3</title>
|
|
<link href=default.css rel=stylesheet type="text/css">
|
|
|
|
<style type="text/css">
|
|
object { vertical-align: middle; }
|
|
.sidebar { float: right; background: #eee; border: solid gray; margin: 1em; }
|
|
.sidebar .figure { margin: 1em; }
|
|
.sidebar object { margin: 0 auto; display: block; }
|
|
.figurepair { display: table; margin: 1em auto; }
|
|
.figurepair .figure { display: table-cell; }
|
|
h2, .example { clear: both; }
|
|
.figure img,
|
|
.figure object,
|
|
.example img,
|
|
dd img { max-width: 100%; display: block; margin: 1em auto; }
|
|
div.figure table {
|
|
margin:auto;
|
|
}
|
|
</style>
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
|
|
type="text/css">
|
|
|
|
<body>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1>CSS Writing Modes Module Level 3</h1>
|
|
|
|
<h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 1 September
|
|
2011</h2>
|
|
|
|
<dl>
|
|
<dt>This version:</dt>
|
|
<!--
|
|
<dd><a href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a>
|
|
-->
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/">http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/</a>
|
|
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-writing-modes/">http://www.w3.org/TR/css3-writing-modes/</a>
|
|
|
|
<dt>Latest editor's draft:
|
|
|
|
<dd><a
|
|
href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a>
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/">http://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/</a>
|
|
|
|
<dt>Editors:
|
|
|
|
<dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>
|
|
(Mozilla)
|
|
|
|
<dd><a href="mailto:kojiishi@gluesoft.co.jp">Koji Ishii</a> (Invited
|
|
Expert)
|
|
|
|
<dd><a href="mailto:murakami@antenna.co.jp">Shinyu Murakami</a> (<a
|
|
href="http://www.antenna.co.jp/">Antenna House</a>)
|
|
|
|
<dt>Previous Editors:
|
|
|
|
<dd><a href="mailto:paulnel@microsoft.com">Paul Nelson</a> (<a
|
|
href="http://www.microsoft.com/">Microsoft</a>)
|
|
|
|
<dd><a href="mailto:michelsu@microsoft.com">Michel Suignard</a> (<a
|
|
href="http://www.microsoft.com/">Microsoft</a>)
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2011 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
|
|
of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
|
|
title="European Research Consortium for Informatics and
|
|
Mathematics">ERCIM</acronym></a>, <a
|
|
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract> Abstract</h2>
|
|
|
|
<p>CSS Writing Modes Level 3 defines CSS features to support for various
|
|
international writing modes, such as left-to-right (e.g. Latin or Indic),
|
|
right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and
|
|
Arabic) and vertical (e.g. Asian scripts).
|
|
|
|
<p>Inherently bottom-to-top scripts are not handled in this version. See <a
|
|
href="#UTN22" rel=biblioentry>[UTN22]<!--{{UTN22}}--></a> for an
|
|
explanation of relevant issues.
|
|
|
|
<h2 class="no-num no-toc" id=status> Status of this document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C
|
|
Membership. This is a draft document and may be updated, replaced or
|
|
obsoleted by other documents at any time. It is inappropriate to cite this
|
|
document as other than work in progress.
|
|
|
|
<p>The (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
|
|
<a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
|
|
for discussion of this specification. When sending e-mail, please put the
|
|
text “css3-writing-modes” in the subject, preferably like
|
|
this: “[<!---->css3-writing-modes<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<p>This document was produced by the <a
|
|
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
|
|
the <a href="http://www.w3.org/Style/">Style Activity</a>).
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/2004/01/pp-impl/32061/status"
|
|
rel=disclosure>public list of any patent disclosures</a> made in
|
|
connection with the deliverables of the group; that page also includes
|
|
instructions for disclosing a patent. An individual who has actual
|
|
knowledge of a patent which the individual believes contains <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
|
|
<p>The following features are at-risk and may be dropped during CR:
|
|
|
|
<ul>
|
|
<li>The ‘<a href="#use-glyph-orientation"><code
|
|
class=css>use-glyph-orientation</code></a>’ of ‘<a
|
|
href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’
|
|
|
|
<li>The ‘<code class=css>ascii-digits</code>’, ‘<code
|
|
class=css>digits</code>’, ‘<code
|
|
class=css>alpha</code>’, ‘<code
|
|
class=css>latin</code>’, and ‘<code
|
|
class=css>alphanumeric</code>’ values of ‘<a
|
|
href="#text-combine-horizontal0"><code
|
|
class=property>text-combine-horizontal</code></a>’.
|
|
|
|
<li>The ‘<a href="#text-combine-mode0"><code
|
|
class=property>text-combine-mode</code></a>’ property
|
|
</ul>
|
|
|
|
<h2 class="no-num no-toc" id=Contents> Table of Contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#text-flow"><span class=secno>1. </span> Introduction to
|
|
Writing Modes</a>
|
|
<ul class=toc>
|
|
<li><a href="#placement"><span class=secno>1.1. </span> Module
|
|
Interactions</a>
|
|
|
|
<li><a href="#values"><span class=secno>1.2. </span> Values</a>
|
|
</ul>
|
|
|
|
<li><a href="#text-direction"><span class=secno>2. </span> Inline
|
|
Direction and Bidirectionality</a>
|
|
<ul class=toc>
|
|
<li><a href="#direction"><span class=secno>2.1. </span> Specifying
|
|
Directionality: the ‘<code class=property>direction</code>’
|
|
property</a>
|
|
|
|
<li><a href="#unicode-bidi"><span class=secno>2.2. </span> Embeddings
|
|
and Overrides: the ‘<code
|
|
class=property>unicode-bidi</code>’ property</a>
|
|
|
|
<li><a href="#bidi-example"><span class=secno>2.3. </span> Example of
|
|
Bidirectional Text</a>
|
|
|
|
<li><a href="#bidi-box-model"><span class=secno>2.4. </span> Box model
|
|
for inline elements in bidirectional context</a>
|
|
</ul>
|
|
|
|
<li><a href="#vertical-intro"><span class=secno>3. </span> Introduction to
|
|
Vertical Text</a>
|
|
<ul class=toc>
|
|
<li><a href="#writing-mode"><span class=secno>3.1. </span> Block Flow
|
|
Direction: the ‘<code class=property>writing-mode</code>’
|
|
property</a>
|
|
<ul class=toc>
|
|
<li><a href="#svg-writing-mode"><span class=secno>3.1.1. </span>
|
|
SVG1.1 ‘<code class=property>writing-mode</code>’
|
|
Values</a>
|
|
</ul>
|
|
</ul>
|
|
|
|
<li><a href="#inline-alignment"><span class=secno>4. </span> Inline-level
|
|
Alignment</a>
|
|
<ul class=toc>
|
|
<li><a href="#intro-baselines"><span class=secno>4.1. </span>
|
|
Introduction to Baselines</a>
|
|
|
|
<li><a href="#text-baselines"><span class=secno>4.2. </span> Text
|
|
Baselines</a>
|
|
|
|
<li><a href="#replaced-baselines"><span class=secno>4.3. </span> Atomic
|
|
Inline Baselines</a>
|
|
|
|
<li><a href="#baseline-alignment"><span class=secno>4.4. </span>
|
|
Baseline Alignment</a>
|
|
</ul>
|
|
|
|
<li><a href="#intro-text-layout"><span class=secno>5. </span> Introduction
|
|
to Vertical Text Layout</a>
|
|
<ul class=toc>
|
|
<li><a href="#text-orientation"><span class=secno>5.1. </span> Orienting
|
|
Text: the ‘<code class=property>text-orientation</code>’
|
|
property</a>
|
|
</ul>
|
|
|
|
<li><a href="#abstract-box"><span class=secno>6. </span> Abstract Box
|
|
Terminology</a>
|
|
<ul class=toc>
|
|
<li><a href="#abstract-dimensions"><span class=secno>6.1. </span>
|
|
Logical Dimensions</a>
|
|
|
|
<li><a href="#abstract-directions"><span class=secno>6.2. </span>
|
|
Abstract and Physical Directions</a>
|
|
|
|
<li><a href="#line-directions"><span class=secno>6.3. </span>
|
|
Line-relative Directions</a>
|
|
|
|
<li><a href="#logical-directions"><span class=secno>6.4. </span>
|
|
Flow-relative Directions</a>
|
|
|
|
<li><a href="#logical-to-physical"><span class=secno>6.5. </span>
|
|
Abstract-to-Physical Mappings</a>
|
|
</ul>
|
|
|
|
<li><a href="#abstract-layout"><span class=secno>7. </span> Abstract Box
|
|
Layout</a>
|
|
<ul class=toc>
|
|
<li><a href="#vertical-layout"><span class=secno>7.1. </span> Principles
|
|
of Layout in Vertical Writing Modes</a>
|
|
|
|
<li><a href="#dimension-mapping"><span class=secno>7.2. </span>
|
|
Dimensional Mapping</a>
|
|
|
|
<li><a href="#orthogonal-flows"><span class=secno>7.3. </span>
|
|
Orthogonal Flows</a>
|
|
<ul class=toc>
|
|
<li><a href="#orthogonal-auto"><span class=secno>7.3.1. </span>
|
|
Auto-sizing in Orthogonal Flows</a>
|
|
|
|
<li><a href="#orthogonal-multicol"><span class=secno>7.3.2. </span>
|
|
Multi-column Layout in Orthogonal Flows</a>
|
|
|
|
<li><a href="#orthogonal-pagination"><span class=secno>7.3.3. </span>
|
|
Paginating Orthogonal Flows</a>
|
|
</ul>
|
|
|
|
<li><a href="#logical-direction-layout"><span class=secno>7.4. </span>
|
|
Flow-Relative Mappings</a>
|
|
|
|
<li><a href="#line-mappings"><span class=secno>7.5. </span>
|
|
Line-Relative Mappings</a>
|
|
|
|
<li><a href="#physical-only"><span class=secno>7.6. </span> Purely
|
|
Physical Mappings</a>
|
|
|
|
<li><a href="#caption-side"><span class=secno>7.7. </span> Table Caption
|
|
Mappings: the ‘<code class=property>caption-side</code>’
|
|
keywords</a>
|
|
</ul>
|
|
|
|
<li><a href="#page-direction"><span class=secno>8. </span> Page Flow: the
|
|
page progression direction</a>
|
|
|
|
<li><a href="#text-combine"><span class=secno>9. </span> Glyph
|
|
Composition</a>
|
|
<ul class=toc>
|
|
<li><a href="#text-combine-horizontal"><span class=secno>9.1. </span>
|
|
Horizonal-in-Vertical Composition: the ‘<code
|
|
class=property>text-combine-horizontal</code>’ property</a>
|
|
|
|
<li><a href="#text-combine-mode"><span class=secno>9.2. </span>
|
|
Horizonal-in-Vertical Glyph Scaling: the ‘<code
|
|
class=property>text-combine-mode</code>’ property</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#changes">Changes</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#recent-changes"> Changes from the May 2011
|
|
CSS Writing Modes Module Level 3 <abbr title="Working
|
|
Draft">WD</abbr></a>
|
|
</ul>
|
|
|
|
<li><a href="#conformance"><span class=secno>10. </span> Conformance</a>
|
|
<ul class=toc>
|
|
<li><a href="#conventions"><span class=secno>10.1. </span> Document
|
|
Conventions</a>
|
|
|
|
<li><a href="#conformance-classes"><span class=secno>10.2. </span>
|
|
Conformance Classes</a>
|
|
|
|
<li><a href="#partial"><span class=secno>10.3. </span> Partial
|
|
Implementations</a>
|
|
|
|
<li><a href="#experimental"><span class=secno>10.4. </span> Experimental
|
|
Implementations</a>
|
|
|
|
<li><a href="#testing"><span class=secno>10.5. </span>Non-Experimental
|
|
Implementations</a>
|
|
|
|
<li><a href="#cr-exit-criteria"><span class=secno>10.6. </span> CR Exit
|
|
Criteria</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#acknowledgements"> Acknowledgements</a>
|
|
|
|
<li class=no-num><a href="#character-properties">Appendix A. Characters
|
|
and Properties</a>
|
|
|
|
<li class=no-num><a href="#script-orientations">Appendix B:
|
|
Bi-orientational Transformations</a>
|
|
|
|
<li class=no-num><a href="#vertical-typesetting-details">Appendix C:
|
|
Vertical Typesetting Synthesis</a>
|
|
|
|
<li class=no-num><a href="#intrinsic-sizing">Appendix D: Intrinsic
|
|
Dimensions</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#multicol-intrinsic"> Intrinsic Sizes in
|
|
Multi-column Layout</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#bidi-html"> Appendix E: Bidi Rules for HTML</a>
|
|
|
|
|
|
<li class=no-num><a href="#references"> References</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#normative-references"> Normative
|
|
references</a>
|
|
|
|
<li class=no-num><a href="#other-references"> Other references</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#property-index"> Property Index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=text-flow><span class=secno>1. </span> Introduction to Writing Modes</h2>
|
|
|
|
<p>CSS Writing Modes Level 3 defines CSS features to support for various
|
|
international writing modes, such as left-to-right (e.g. Latin or Indic),
|
|
right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and
|
|
Arabic) and vertical (e.g. Asian scripts).
|
|
|
|
<p>A <dfn id=writing-mode0>writing mode</dfn> in CSS is determined by the
|
|
‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’, ‘<a
|
|
href="#direction0"><code class=property>direction</code></a>’, and
|
|
‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ properties. It is
|
|
defined primarily in terms of its <a
|
|
href="#inline-base-direction"><i>inline base direction</i></a> and <a
|
|
href="#block-flow-direction"><i>block flow direction</i></a>:
|
|
|
|
<div class=sidebar>
|
|
<div class="figure right"> <a href="diagrams/text-flow-vectors-tb.svg"
|
|
type="image/svg+xml"> <img alt="Latin-based writing mode" class=landscape
|
|
src="diagrams/text-flow-vectors-tb.png"></a>
|
|
<p class=caption>Latin-based writing mode
|
|
</div>
|
|
|
|
<div class="figure left"> <a
|
|
href="diagrams/text-flow-vectors-lr-reverse.svg" type="image/svg+xml">
|
|
<img alt="Mongolian-based writing mode" class=landscape
|
|
src="diagrams/text-flow-vectors-lr-reverse.png"></a>
|
|
<p class=caption>Mongolian-based writing mode
|
|
</div>
|
|
|
|
<div class="figure right"> <a href="diagrams/text-flow-vectors-tb.svg"
|
|
type="image/svg+xml"> <img alt="Han-based writing mode" class=landscape
|
|
src="diagrams/text-flow-vectors-tb.png"></a> <a
|
|
href="diagrams/text-flow-vectors-rl.svg" type="image/svg+xml"> <img
|
|
alt="Han-based writing mode" class=landscape
|
|
src="diagrams/text-flow-vectors-rl.png"></a>
|
|
<p class=caption>Han-based writing mode
|
|
</div>
|
|
</div>
|
|
|
|
<p>The <dfn id=inline-base-direction>inline base direction</dfn> is the
|
|
primary direction in which content is ordered on a line and defines on
|
|
which sides the "start" and "end" of a line are. The ‘<a
|
|
href="#direction0"><code class=property>direction</code></a>’
|
|
property specifies the inline base direction of an element and, together
|
|
with the ‘<a href="#unicode-bidi0"><code
|
|
class=property>unicode-bidi</code></a>’ property and the inherent
|
|
directionality of any text content, determines the ordering of
|
|
inline-level content within a line.
|
|
|
|
<p>The <dfn id=block-flow-direction>block flow direction</dfn> is the
|
|
direction in which block-level boxes stack and the direction in which line
|
|
boxes stack within a block container. The ‘<a
|
|
href="#writing-mode1"><code class=property>writing-mode</code></a>’
|
|
property determines the block flow direction.
|
|
|
|
<p>A <dfn id=horizontal-writing-mode>horizontal writing mode</dfn> is one
|
|
with horizontal lines of text, i.e. a downward or upward block flow. A
|
|
<dfn id=vertical-writing-mode>vertical writing mode</dfn> is one with
|
|
vertical lines of text, i.e. a leftward or rightward block flow.
|
|
|
|
<p class=note>These terms should not be confused with <dfn
|
|
id=vertical-block-flow>vertical block flow</dfn> (which is a downward or
|
|
upward block flow) and <dfn id=horizontal-block-flow>horizontal block
|
|
flow</dfn> (which is leftward or rightward block flow). To avoid
|
|
confusion, CSS specifications avoid this latter set of terms.
|
|
|
|
<p>Writing systems typically have one or two native writing modes. Some
|
|
examples are:
|
|
|
|
<ul>
|
|
<li>Latin-based systems are typically written using a left-to-right inline
|
|
direction with a downward (top-to-bottom) block flow direction.
|
|
|
|
<li>Arabic-based systems are typically written using a right-to-left
|
|
inline direction with a downward (top-to-bottom) block flow direction.
|
|
|
|
<li>Mongolian-based systems are typically written using a top-to-bottom
|
|
inline direction with a rightward (left-to-right) block flow direction.
|
|
|
|
<li>Han-based systems are commonly written using a left-to-right inline
|
|
direction with a downward (top-to-bottom) block flow direction,
|
|
<strong>or</strong> a top-to-bottom inline direction with a leftward
|
|
(right-to-left) block flow direction. Many magazines and newspapers will
|
|
mix these two writing modes on the same page.
|
|
</ul>
|
|
|
|
<p>The ‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ component of the writing
|
|
mode determines the <a href="#line-orientation"><i>line
|
|
orientation</i></a> and the <i>typesetting mode</i>, and controls details
|
|
of text layout such as the <i>glyph orientation</i>.
|
|
|
|
<p class=note>See Unicode Technical Note #22 <a href="#UTN22"
|
|
rel=biblioentry>[UTN22]<!--{{UTN22}}--></a> (<a
|
|
href="http://fantasai.inkedblade.net/style/discuss/vertical-text/paper">HTML
|
|
version</a>) for a more in-depth introduction to writing modes and
|
|
vertical text.
|
|
|
|
<h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
|
|
|
|
<p>This module replaces and extends the ‘<a
|
|
href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’
|
|
and ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ features defined in <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections 8.6
|
|
and 9.10.
|
|
|
|
<h3 id=values><span class=secno>1.2. </span> Values</h3>
|
|
|
|
<p>This specification follows the <a
|
|
href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
|
|
definition conventions</a> from <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
|
|
this specification are defined in CSS Level 2 Revision 1 <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
|
|
modules may expand the definitions of these value types: for example <a
|
|
href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
|
|
when combined with this module, expands the definition of the
|
|
<color> value type as used in this specification.
|
|
|
|
<p>In addition to the property-specific values listed in their definitions,
|
|
all properties defined in this specification also accept the <a
|
|
href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
|
|
keyword as their property value. For readability it has not been repeated
|
|
explicitly.
|
|
|
|
<h2 id=text-direction><span class=secno>2. </span> Inline Direction and
|
|
Bidirectionality</h2>
|
|
|
|
<p>While the characters in most scripts are written from left to right,
|
|
certain scripts are written from right to left. In some documents, in
|
|
particular those written with the Arabic or Hebrew script, and in some
|
|
mixed-language contexts, text in a single (visually displayed) block may
|
|
appear with mixed directionality. This phenomenon is called <span
|
|
class=index-def id=bidirectionality title="bidirectionality (bidi)"><dfn
|
|
id=bidirectionality0>bidirectionality</dfn></span>, or "bidi" for short.
|
|
|
|
<div class=figure>
|
|
<p><img 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."
|
|
src="diagrams/bidi.png">
|
|
|
|
<p class=caption>Bidirectionality</p>
|
|
</div>
|
|
|
|
<p>The Unicode standard (<a
|
|
href="http://www.unicode.org/reports/tr9/">Unicode Standard Annex #9</a>)
|
|
defines a complex algorithm for determining the proper ordering of
|
|
bidirectional text. The algorithm consists of an implicit part based on
|
|
character properties, as well as explicit controls for embeddings and
|
|
overrides. CSS relies on this algorithm to achieve proper bidirectional
|
|
rendering. The ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ and ‘<a
|
|
href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’
|
|
properties allow authors to specify how the elements and attributes of a
|
|
document language map to this algorithm.
|
|
|
|
<p>User agents that support bidirectional text must apply the Unicode
|
|
bidirectional algorithm to every sequence of inline-level boxes
|
|
uninterrupted by a forced (<a
|
|
href="http://www.unicode.org/reports/tr9/#Bidirectional_Character_Types">bidi
|
|
class B</a>) paragraph break or block boundary. This sequence forms the
|
|
<dfn id=paragraph>paragraph</dfn> unit in the bidirectional algorithm.
|
|
|
|
<p>Except when the ‘<a href="#plaintext"><code
|
|
class=css>plaintext</code></a>’ value of ‘<a
|
|
href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’
|
|
is in effect, the paragraph embedding level is set according to the value
|
|
of the ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ property of the paragraph's
|
|
element rather than by the heuristic given in steps P2 and P3 of the
|
|
Unicode algorithm. The paragraph's element is usually the containing
|
|
block, but in the case of a paragraph contained by bidi <a
|
|
href="#isolate">isolation</a> it is the isolating inline element instead.
|
|
|
|
<p>Because the base directionality of a text depends on the structure and
|
|
semantics of the document, the ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ and ‘<a
|
|
href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’
|
|
properties should in most cases be used only to map bidi information in
|
|
the markup to its corresponding CSS styles. If a document language
|
|
provides markup features to control bidi, authors and users should use
|
|
those features and not specify CSS rules to override them.
|
|
|
|
<p>The HTML 4 specification (<a href="#HTML401"
|
|
rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, section 8.2) defines
|
|
bidirectionality behavior for HTML elements. The HTML 4 specification also
|
|
contains more information on bidirectionality issues.
|
|
|
|
<p class=note>Because HTML UAs can turn off CSS styling, we advise HTML
|
|
authors to use the HTML ‘<code class=property>dir</code>’
|
|
attribute and <bdo> element to ensure correct bidirectional layout
|
|
in the absence of a style sheet.
|
|
|
|
<h3 id=direction><span class=secno>2.1. </span> Specifying Directionality:
|
|
the ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=direction0>direction</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>ltr | rtl
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>ltr
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies the base directionality of text and elements on
|
|
a line, and the directionality of embeddings and overrides (see ‘<a
|
|
href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’)
|
|
for the Unicode bidirectional algorithm. In addition, it affects the
|
|
ordering of <a href="http://www.w3.org/TR/CSS21/tables.html">table</a>
|
|
column layout, the direction of horizontal <a
|
|
href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>, and
|
|
the default alignment of text within a line, and other things that depend
|
|
on the base inline base direction.
|
|
|
|
<p>Values for this property have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=ltr>ltr</dfn>
|
|
|
|
<dd>Left-to-right directionality.
|
|
|
|
<dt><dfn id=rtl>rtl</dfn>
|
|
|
|
<dd>Right-to-left directionality.
|
|
</dl>
|
|
|
|
<p class=note>The ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ property has no effect on bidi
|
|
reordering when specified on inline elements whose ‘<a
|
|
href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’
|
|
property's value is ‘<a href="#normal"><code
|
|
class=css>normal</code></a>’.
|
|
|
|
<p>The value of the ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ property on the root element is
|
|
also propagated to the initial containing block and, together with the
|
|
‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ property, determines the
|
|
document's principal writing mode. (See <a
|
|
href="#principal-writing-mode">below</a>.)
|
|
|
|
<p class=note>Note that the ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ property of the HTML BODY
|
|
element is <em>not</em> propagated to the viewport. That special behavior
|
|
only applies to the background and overflow properties.
|
|
|
|
<p class=note>The ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ property, when specified for
|
|
table column elements, is not inherited by cells in the column since
|
|
columns are not the ancestors of the cells in the document tree. Thus, CSS
|
|
cannot easily capture the "dir" attribute inheritance rules described in
|
|
<a href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>,
|
|
section 11.3.2.1.
|
|
|
|
<h3 id=unicode-bidi><span class=secno>2.2. </span> Embeddings and
|
|
Overrides: the ‘<a href="#unicode-bidi0"><code
|
|
class=property>unicode-bidi</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=unicode-bidi0>unicode-bidi</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>normal | embed | [ isolate || bidi-override ] | plaintext
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>normal
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements, but see prose
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>Values for this property have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=normal>normal</dfn>
|
|
|
|
<dd>The element does not open an additional level of embedding with
|
|
respect to the bidirectional algorithm. For inline elements, implicit
|
|
reordering works across element boundaries.
|
|
|
|
<dt><dfn id=embed>embed</dfn>
|
|
|
|
<dd>If the element is inline, this value opens an additional level of
|
|
embedding with respect to the bidirectional algorithm. The direction of
|
|
this embedding level is given by the ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ property. Inside the element,
|
|
reordering is done implicitly. This corresponds to adding a LRE (U+202A),
|
|
for ‘<code class=css>direction: ltr</code>’, or RLE (U+202B),
|
|
for ‘<code class=css>direction: rtl</code>’, at the start of
|
|
the element and a PDF (U+202C) at the end of the element. <span
|
|
class=note>This value has no effect on elements that are not
|
|
inline.</span>
|
|
|
|
<dt><dfn id=isolate>isolate</dfn>
|
|
|
|
<dd>For the purposes of the Unicode bidirectional algorithm, the contents
|
|
of the element are considered to be inside a separate, independent
|
|
paragraph with a base directionality given by the element's ‘<a
|
|
href="#direction0"><code class=property>direction</code></a>’
|
|
property, and for the purpose of bidi resolution in its containing bidi
|
|
paragraph (if any), the element itself is treated as if it were an Object
|
|
Replacement Character (U+FFFC). (If the element is broken across multiple
|
|
lines, then each box of the element is treated as an Object Replacement
|
|
Character.)
|
|
|
|
<dt><dfn id=bidi-override>bidi-override</dfn>
|
|
|
|
<dd>For inline elements this creates an override. For block-container
|
|
elements this creates an override for inline-level descendants not within
|
|
another block container element. This means that inside the element,
|
|
reordering is strictly in sequence according to the ‘<a
|
|
href="#direction0"><code class=property>direction</code></a>’
|
|
property; the implicit part of the bidirectional algorithm is ignored.
|
|
This corresponds to adding a LRO (U+202D), for ‘<code
|
|
class=css>direction: ltr</code>’, or RLO (U+202E), for ‘<code
|
|
class=css>direction: rtl</code>’, at the start of the element and a
|
|
PDF (U+202C) at the end of the element.
|
|
|
|
<dt><dfn id=plaintext>plaintext</dfn>
|
|
|
|
<dd>
|
|
<p>For the purposes of the Unicode bidirectional algorithm, the base
|
|
directionality of each bidi paragraph for which the element forms the
|
|
containing block is determined not by the element's computed ‘<a
|
|
href="#direction0"><code class=property>direction</code></a>’ as
|
|
usual, but by following the heuristic in rules P2 and P3 of the Unicode
|
|
bidirectional algorithm. For inline elements, this value behaves as for
|
|
‘<a href="#isolate"><code class=css>isolate</code></a>’,
|
|
except, as with block containers, the base directionality is determined
|
|
by following the Unicode heuristic instead of by using the ‘<a
|
|
href="#direction0"><code class=property>direction</code></a>’
|
|
value.
|
|
</dl>
|
|
|
|
<p>The final order of characters within in each bidi paragraph is the same
|
|
as if the bidi control codes had been added as described above, markup had
|
|
been stripped, and the resulting character sequence had been passed to an
|
|
implementation of the Unicode bidirectional algorithm for plain text that
|
|
produced the same line-breaks as the styled text.
|
|
|
|
<p>In this process, replaced elements with ‘<code class=css>display:
|
|
inline</code>’ are treated as neutral characters, unless their
|
|
‘<a href="#unicode-bidi0"><code
|
|
class=property>unicode-bidi</code></a>’ property has a value other
|
|
than ‘<a href="#normal"><code
|
|
class=property>normal</code></a>’, in which case they are treated as
|
|
strong characters in the ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ specified for the element. All
|
|
other atomic inline-level boxes are treated as neutral characters always.
|
|
|
|
<p>If an inline element is broken around a bidi paragraph boundary (e.g. if
|
|
split by a block or forced paragraph break), then the bidi control codes
|
|
corresponding to the end of the element are added before the interruption
|
|
and the codes corresponding to the start of the element are added after
|
|
it. (In other words, any embedding levels or overrides started by the
|
|
element are closed at the paragraph break and reopened on the other side
|
|
of it.)
|
|
|
|
<p>Because the Unicode algorithm has a limit of <em title="According to
|
|
unicode 3.0, chapter 3, section 12, definition BD2. Specifically, page 58
|
|
here: http://www.unicode.org/unicode/uni2book/ch03.pdf"> 61 levels</em> of
|
|
embedding, care should be taken not to use <span
|
|
class=propinst-unicode-bidi>‘<a href="#unicode-bidi0"><code
|
|
class=property>unicode-bidi</code></a>’</span> with a value other
|
|
than ‘<a href="#normal"><code
|
|
class=property>normal</code></a>’ unless appropriate. In particular,
|
|
a value of ‘<code class=property>inherit</code>’ should be
|
|
used with extreme caution. However, for elements that are, in general,
|
|
intended to be displayed as blocks, a setting of ‘<code
|
|
class=css>unicode-bidi: isolate</code>’ is preferred to keep the
|
|
element together in case display is changed to inline (see example below).
|
|
|
|
<h3 id=bidi-example><span class=secno>2.3. </span> Example of Bidirectional
|
|
Text</h3>
|
|
|
|
<p>The following example shows an XML document with bidirectional text. It
|
|
illustrates an important design principle: document language designers
|
|
should take bidi into account both in the language proper (elements and
|
|
attributes) and in any accompanying style sheets. The style sheets should
|
|
be designed so that bidi rules are separate from other style rules, and
|
|
such rules should not be overridden by other style sheets so that the
|
|
document language's bidi behavior is preserved.
|
|
|
|
<div class=example>
|
|
<p>In this example, lowercase letters stand for inherently left-to-right
|
|
characters and uppercase letters represent inherently right-to-left
|
|
characters. The text stream is shown in logical backing store order.</p>
|
|
|
|
<pre class=xml-example><code class=xml>
|
|
<HEBREW>
|
|
<PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR>
|
|
<PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR>
|
|
</HEBREW>
|
|
<ENGLISH>
|
|
<PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR>
|
|
<PAR>english14 english15 english16</PAR>
|
|
<PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR>
|
|
</ENGLISH>
|
|
</code></pre>
|
|
|
|
<p>Since this is arbitrary XML, the style sheet is responsible for setting
|
|
the writing direction. This is the style sheet:</p>
|
|
|
|
<pre>
|
|
/* Rules for bidi */
|
|
HEBREW, HE-QUO {direction: rtl; unicode-bidi: embed;}
|
|
ENGLISH {direction: ltr; unicode-bidi: embed;}
|
|
|
|
/* Rules for presentation */
|
|
HEBREW, ENGLISH, PAR {display: block;}
|
|
EMPH {font-weight: bold;}
|
|
</pre>
|
|
|
|
<p>The HEBREW element is a block with a right-to-left base direction, the
|
|
ENGLISH element is a block with a left-to-right base direction. The PARs
|
|
are blocks that inherit the base direction from their parents. Thus, the
|
|
first two PARs are read starting at the top right, the final three are
|
|
read starting at the top left. Please note that HEBREW and ENGLISH are
|
|
chosen as element names for explicitness only; in general, element names
|
|
should convey structure without reference to language.</p>
|
|
|
|
<p>The EMPH element is inline-level, and since its value for <span
|
|
class=propinst-unicode-bidi>‘<a href="#unicode-bidi0"><code
|
|
class=property>unicode-bidi</code></a>’</span> is ‘<a
|
|
href="#normal"><code class=property>normal</code></a>’ (the initial
|
|
value), it has no effect on the ordering of the text. The HE-QUO element,
|
|
on the other hand, creates an embedding.</p>
|
|
|
|
<p>The formatting of this text might look like this if the line length is
|
|
long:</p>
|
|
|
|
<pre class=ascii-art>
|
|
5WERBEH 4WERBEH english3 2WERBEH 1WERBEH
|
|
|
|
8WERBEH <b>7WERBEH</b> 6WERBEH
|
|
|
|
english9 english10 english11 13WERBEH 12WERBEH
|
|
|
|
english14 english15 english16
|
|
|
|
english17 20WERBEH english19 18WERBEH
|
|
</pre>
|
|
|
|
<p>Note that the HE-QUO embedding causes HEBREW18 to be to the right of
|
|
english19.</p>
|
|
|
|
<p>If lines have to be broken, it might be more like this:</p>
|
|
|
|
<pre class=ascii-art>
|
|
2WERBEH 1WERBEH
|
|
-EH 4WERBEH english3
|
|
5WERB
|
|
|
|
-EH <b>7WERBEH</b> 6WERBEH
|
|
8WERB
|
|
|
|
english9 english10 en-
|
|
glish11 12WERBEH
|
|
13WERBEH
|
|
|
|
english14 english15
|
|
english16
|
|
|
|
english17 18WERBEH
|
|
20WERBEH english19
|
|
</pre>
|
|
|
|
<p>Because HEBREW18 must be read before english19, it is on the line above
|
|
english19. Just breaking the long line from the earlier formatting would
|
|
not have worked. Note also that the first syllable from english19 might
|
|
have fit on the previous line, but hyphenation of left-to-right words in
|
|
a right-to-left context, and vice versa, is usually suppressed to avoid
|
|
having to display a hyphen in the middle of a line.</p>
|
|
</div>
|
|
<!-- example -->
|
|
|
|
<h3 id=bidi-box-model><span class=secno>2.4. </span> Box model for inline
|
|
elements in bidirectional context</h3>
|
|
|
|
<p>Since bidi reordering can split apart and reorder text that is logically
|
|
contiguous, bidirectional text can cause an inline boxes to be split and
|
|
reordered within a line.
|
|
|
|
<p class=note>Note that in order to be able to flow inline boxes in a
|
|
uniform direction (either entirely left-to-right or entirely
|
|
right-to-left), anonymous inline boxes may have to be created.</p>
|
|
<!-- CSS2.1 8.6 -->
|
|
|
|
<p>For each line box, UAs must take the inline boxes generated for each
|
|
element and render the margins, borders and padding in visual order (not
|
|
logical order). The <a href="#start"><i>start</i></a>-most box on the
|
|
first line box in which the element appears has the <a
|
|
href="#start"><i>start</i></a> edge's margin, border, and padding; and the
|
|
end-most box on the last line box in which the element appears has the <a
|
|
href="#end"><i>end</i></a> edge's margin, border, and padding. For
|
|
example, in the ‘<a href="#horizontal-tb"><code
|
|
class=css>horizontal-tb</code></a>’ writing mode:
|
|
|
|
<ul>
|
|
<li>When the parent's ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ property is ‘<a
|
|
href="#ltr"><code class=css>ltr</code></a>’, the left-most
|
|
generated box of the first line box in which the element appears has the
|
|
left margin, left border and left padding, and the right-most generated
|
|
box of the last line box in which the element appears has the right
|
|
padding, right border and right margin.
|
|
|
|
<li>When the parent's ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ property is ‘<a
|
|
href="#rtl"><code class=css>rtl</code></a>’, the right-most
|
|
generated box of the first line box in which the element appears has the
|
|
right padding, right border and right margin, and the left-most generated
|
|
box of the last line box in which the element appears has the left
|
|
margin, left border and left padding.
|
|
</ul>
|
|
|
|
<p>Analogous rules hold for vertical writing modes.
|
|
|
|
<p class=note>The ‘<code
|
|
class=property>box-decoration-break</code>’ property can override
|
|
this behavior to draw box decorations on both sides of each box. <a
|
|
href="#CSS3BG" rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
|
|
|
|
<h2 id=vertical-intro><span class=secno>3. </span> Introduction to Vertical
|
|
Text</h2>
|
|
|
|
<p><em>This subsection is non-normative.</em>
|
|
|
|
<p>In addition to extensions to CSS2.1’s support for bidirectional
|
|
text, this module introduces the rules and properties needed to support
|
|
vertical text layout in CSS.
|
|
|
|
<p>Unlike languages that use the Latin script which are primarily laid out
|
|
horizontally, Asian languages such as Chinese and Japanese can be laid out
|
|
vertically. The Japanese example below shows the same text laid out
|
|
horizontally and vertically. In the horizontal case, text is read from
|
|
left to right, top to bottom. For the vertical case, the text is read top
|
|
to bottom, right to left. Indentation from the left edge in the
|
|
left-to-right horizontal case translates to indentation from the top edge
|
|
in the top-to-bottom vertical case.
|
|
|
|
<div class=figure>
|
|
<p><img 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." src=vert-horiz-comparison.png></p>
|
|
|
|
<p class=caption>Comparison of vertical and horizontal Japanese: iBunko
|
|
application (iOS)</p>
|
|
</div>
|
|
|
|
<p class=note>For Chinese and Japanese lines are ordered either right to
|
|
left or top to bottom, while for Mongolian and Manchu lines are ordered
|
|
left to right.
|
|
|
|
<p>The change from horizontal to vertical writing can affect not just the
|
|
layout, but also the typesetting. For example, the position of a
|
|
punctuation mark within its spacing box can change from the horizontal to
|
|
the vertical case, and in some cases alternate glyphs are used.
|
|
|
|
<p>Vertical text that includes Latin script text or text from other scripts
|
|
normally displayed horizontally can display that text in a number of ways.
|
|
For example, Latin words can be rotated sideways, or each letter can be
|
|
oriented upright:
|
|
|
|
<div class=figure>
|
|
<p><img 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."
|
|
src=vert-latin-layouts.png></p>
|
|
|
|
<p class=caption>Examples of Latin in vertical Japanese: Daijirin Viewer
|
|
1.4 (iOS)</p>
|
|
</div>
|
|
|
|
<p>In some special cases such as two-digit numbers in dates, text is fit
|
|
compactly into a single vertical character box:
|
|
|
|
<div class=figure id=fig-mac>
|
|
<p><img 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."
|
|
src=vert-number-layouts.png></p>
|
|
|
|
<p class=caption>Mac Fan, December 2010, p.49</p>
|
|
</div>
|
|
|
|
<p>Layouts often involve a mixture of vertical and horizontal elements:
|
|
|
|
<div class=figure>
|
|
<p><img 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." src=vert-horiz-combination.png></p>
|
|
|
|
<p class=caption>Mixture of vertical and horizontal elements</p>
|
|
</div>
|
|
|
|
<p>Vertical text layouts also need to handle bidirectional text layout;
|
|
clockwise-rotated Arabic, for example, is laid out bottom-to-top.
|
|
|
|
<h3 id=writing-mode><span class=secno>3.1. </span> Block Flow Direction:
|
|
the ‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=writing-mode1>writing-mode</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>horizontal-tb | vertical-rl | vertical-lr
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>horizontal-tb
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>All elements except table row groups, table column groups, table
|
|
rows, and table columns
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property sets the block flow direction. Possible values:
|
|
|
|
<dl>
|
|
<dt><dfn id=horizontal-tb>horizontal-tb</dfn>
|
|
|
|
<dd>Top-to-bottom block flow. The writing mode is horizontal.
|
|
|
|
<dt><dfn id=vertical-rl>vertical-rl</dfn>
|
|
|
|
<dd>Right-to-left block flow. The writing mode is vertical.
|
|
|
|
<dt><dfn id=vertical-lr>vertical-lr</dfn>
|
|
|
|
<dd>Left-to-right block flow. The writing mode is vertical.
|
|
</dl>
|
|
|
|
<p>The ‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ property determines the
|
|
direction of block flow. This determines the progression of block-level
|
|
boxes in a block formatting context; the progression of line boxes in a
|
|
block container that contains inlines; and the progression of rows in a
|
|
table. By virtue of determining the stacking direction of line boxes, the
|
|
‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ property also determines
|
|
whether line boxes and thus the writing mode is horizontal or vertical.
|
|
|
|
<p>When set on the root element, the ‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ property together with the
|
|
‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ property determines the <dfn
|
|
id=principal-writing-mode>principal writing mode</dfn> of the document.
|
|
This writing mode is used, for example, to determine the default page
|
|
progression direction. (See <a href="#CSS3PAGE"
|
|
rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>.) The ‘<a
|
|
href="#writing-mode1"><code class=property>writing-mode</code></a>’
|
|
value of the root element is also propagated to the initial containing
|
|
block and sets the block flow direction of the initial block formatting
|
|
context.
|
|
|
|
<p class=note>Note that the ‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ property of the HTML BODY
|
|
element is <em>not</em> propagated to the viewport. That special behavior
|
|
only applies to the background and overflow properties.
|
|
|
|
<p>If an element has a different block flow direction than its containing
|
|
block:
|
|
|
|
<ul>
|
|
<li>If the element has a specified ‘<code
|
|
class=property>display</code>’ of ‘<code
|
|
class=css>inline</code>’, its ‘<code
|
|
class=property>display</code>’ computes to ‘<code
|
|
class=property>inline-block</code>’. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<li>If the element has a specified ‘<code
|
|
class=property>display</code>’ of ‘<code
|
|
class=css>run-in</code>’, its ‘<code
|
|
class=property>display</code>’ computes to ‘<code
|
|
class=property>block</code>’. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
</ul>
|
|
|
|
<p>If such an element is a block container, then it establishes a new block
|
|
formatting context.
|
|
|
|
<p>The content of replaced elements do not rotate due to the writing mode:
|
|
images, for example, remain upright. However replaced content involving
|
|
text (such as MathML content or form elements) should match the replaced
|
|
element's writing mode and line orientation if the UA supports such a
|
|
vertical writing mode for the replaced content.
|
|
|
|
<div class=example>
|
|
<p>In the following example, two block elements (1 and 3) separated by an
|
|
image (2) are presented in various flow writing modes.</p>
|
|
|
|
<p>Here is a diagram of horizontal writing mode (<code>writing-mode:
|
|
horizontal-tb</code>):</p>
|
|
|
|
<p><img alt="Diagram of horizontal layout: blocks 1, 2, and 3 are stacked
|
|
top-to-bottom" height=300 src=horizontal.png width=219></p>
|
|
|
|
<p>Here is a diagram for the right-to-left vertical writing mode commonly
|
|
used in East Asia (<code>writing-mode: vertical-rl</code>):</p>
|
|
|
|
<p><img alt="Diagram of a right-to-left vertical layout: blocks 1, 2, and
|
|
3 are arranged side by side from right to left" height=191
|
|
src=vertical-rl.png width=297></p>
|
|
|
|
<p>And finally, here is a diagram for the left-to-right vertical writing
|
|
mode used for Manchu and Mongolian (<code>writing-mode:
|
|
vertical-lr</code>):</p>
|
|
|
|
<p><img alt="Diagram of left-to-right vertical layout: blocks 1, 2, and 3
|
|
are arranged side by side from left to right" height=191
|
|
src=vertical-lr.png width=300></p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In the following example, some form controls are rendered inside a
|
|
block with ‘<a href="#vertical-rl"><code
|
|
class=css>vertical-rl</code></a>’ writing mode. The form controls
|
|
are rendered to match the writing mode.
|
|
|
|
<pre>
|
|
<!-- --><style>
|
|
<!-- --> form { writing-mode: vertical-rl; }
|
|
<!-- --></style>
|
|
<!-- -->...
|
|
<!-- --><form>
|
|
<!-- --><p><label>姓名　<input value="艾俐俐"></label>
|
|
<!-- --><p><label>语文　<select><option>English
|
|
<!-- --> <option>français
|
|
<!-- --> <option>فارسی
|
|
<!-- --> <option>中文
|
|
<!-- --> <option>日本语</select></label>
|
|
<!-- --></form></pre>
|
|
|
|
<p><img alt="Screenshot of vertical layout: the input element is laid
|
|
lengthwise from top to bottom and its contents rendered in a vertical
|
|
typographic 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."
|
|
src=vertical-form.png></p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In this example, ‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ sets the list markers
|
|
upright using the ‘<code class=css>::marker</code>’
|
|
pseudo-element. Vertical alignment ensures that longer numbers will still
|
|
align with the right of the first line of text. <a href="#CSS3LIST"
|
|
rel=biblioentry>[CSS3LIST]<!--{{CSS3LIST}}--></a>
|
|
|
|
<pre>::marker { writing-mode: horizontal-tb;
|
|
<!-- --> vertical-align: text-top;
|
|
<!-- --> color: blue; }</pre>
|
|
|
|
<div class=figure>
|
|
<p><img alt="Diagram showing list markers of '1.', '2.', '3.' sitting
|
|
upright atop sideways vertical Latin list item text." class=example
|
|
src=vertical-horizontal-list-markers.png>
|
|
|
|
<p class=caption>Example of horizontal list markers in a vertical list</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 id=svg-writing-mode><span class=secno>3.1.1. </span> SVG1.1 ‘<a
|
|
href="#writing-mode1"><code class=property>writing-mode</code></a>’
|
|
Values</h4>
|
|
|
|
<p>SVG1.1 <a href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>
|
|
defines some additional values: ‘<code class=css>lr</code>’,
|
|
‘<code class=css>lr-tb</code>’, ‘<code
|
|
class=css>rl</code>’, ‘<code class=css>rl-tb</code>’,
|
|
‘<code class=css>tb</code>’, and ‘<code
|
|
class=css>tb-rl</code>’.
|
|
|
|
<p>These values are <em>deprecated</em> in any context except SVG1
|
|
documents. Implementations that wish to support these values in the
|
|
context of CSS must treat them as follows:
|
|
|
|
<table class=data>
|
|
<thead>
|
|
<tr>
|
|
<th>SVG1/Obsolete
|
|
|
|
<th>CSS
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>‘<code class=css>lr</code>’
|
|
|
|
<td rowspan=3>‘<a href="#horizontal-tb"><code
|
|
class=css>horizontal-tb</code></a>’
|
|
|
|
<tr>
|
|
<td>‘<code class=css>lr-tb</code>’
|
|
|
|
<tr>
|
|
<td>‘<code class=css>rl</code>’
|
|
|
|
<tr>
|
|
<td>‘<code class=css>tb</code>’
|
|
|
|
<td rowspan=2>‘<a href="#vertical-rl"><code
|
|
class=css>vertical-rl</code></a>’
|
|
|
|
<tr>
|
|
<td>‘<code class=css>tb-rl</code>’
|
|
</table>
|
|
|
|
<p class=note>The SVG1.1 values were also present in an older revision of
|
|
the CSS ‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ specification, which is
|
|
obsoleted by this specification. The additional ‘<code
|
|
class=css>tb-lr</code>’ value of that revision is replaced by
|
|
‘<a href="#vertical-lr"><code
|
|
class=css>vertical-lr</code></a>’.
|
|
|
|
<p>In SVG1.1, these values set the <dfn
|
|
id=inline-progression-direction>inline progression direction</dfn>, in
|
|
other words, the direction the current text position advances each time a
|
|
glyph is added. This is a geometric process that happens <a
|
|
href="#after"><em>after</em></a> bidi reordering, and thus has no effect
|
|
on the interpretation of the ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ property (which is independent
|
|
of ‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’). (See <a
|
|
href="http://www.w3.org/TR/SVG/text.html#RelationshipWithBiDirectionality">Relationship
|
|
with bidirectionality</a>. <a href="#SVG11"
|
|
rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>)
|
|
|
|
<p class=note>There are varying interpretations on whether this process
|
|
causes "writing-mode: rl" to merely shift the text string or reverse the
|
|
order of all glyphs in the text.
|
|
|
|
<h2 id=inline-alignment><span class=secno>4. </span> Inline-level Alignment</h2>
|
|
|
|
<p>When different kinds of inline-level content are placed together on a
|
|
line, the baselines of the content and the settings of the ‘<code
|
|
class=property>vertical-align</code>’ property control how they are
|
|
aligned in the transverse direction of the line box. This section
|
|
discusses what baselines are, how to find them, and how they are used
|
|
together with the ‘<code class=property>vertical-align</code>’
|
|
property to determine the alignment of inline-level content.
|
|
|
|
<h3 id=intro-baselines><span class=secno>4.1. </span> Introduction to
|
|
Baselines</h3>
|
|
|
|
<p><em>This section is non-normative.</em>
|
|
|
|
<p>A <dfn id=baseline>baseline</dfn> is a line along the <i>inline axis</i>
|
|
of a line box along which individual glyphs of text are aligned. Baselines
|
|
guide the design of glyphs in a font (for example, the bottom of most
|
|
alphabetic glyphs typically align with the alphabetic baseline), and they
|
|
guide the alignment of glyphs from different fonts or font sizes when
|
|
typesetting.
|
|
|
|
<div class=figure> [Picture of alphabetic text in two font sizes with the
|
|
baseline and emboxes indicated.]</div>
|
|
|
|
<p>Different writing systems prefer different baseline tables.
|
|
|
|
<div class=figure>
|
|
<p><img 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." src=script-preferred-baselines.gif></p>
|
|
|
|
<p class=caption>Preferred baselines in various writing systems</p>
|
|
</div>
|
|
|
|
<p>A well-constructed font contains a <dfn id=baseline-table>baseline
|
|
table</dfn>, which indicates the position of one or more baselines within
|
|
the font's design coordinate space. (The design coordinate space is scaled
|
|
with the font size.)
|
|
|
|
<div class=figure>
|
|
<p><img alt="" src=baselines.gif></p>
|
|
|
|
<p class=caption>In a well-designed mixed-script font, the glyphs are
|
|
positioned in the coordinate space to harmonize with one another when
|
|
typeset together. The baseline table is then constructed to match the
|
|
shape of the glyphs, each baseline positioned to match the glyphs from
|
|
its preferred scripts.</p>
|
|
</div>
|
|
|
|
<p>The baseline table is a property of the font, and the positions of the
|
|
various baselines apply to all glyphs in the font.
|
|
|
|
<p>Different baseline tables can be provided for alignment in horizontal
|
|
and vertical text. UAs should use the vertical tables in vertical
|
|
typesetting modes and the horizontal tables otherwise.
|
|
|
|
<h3 id=text-baselines><span class=secno>4.2. </span> Text Baselines</h3>
|
|
|
|
<p>In this specification, only the following baselines are considered:
|
|
|
|
<dl>
|
|
<dt>alphabetic
|
|
|
|
<dd>The <dfn id=alphabetic-baseline>alphabetic baseline</dfn>, which
|
|
typically aligns with the bottom of uppercase Latin glyphs. In horizontal
|
|
typographic mode, this is the dominant baseline.
|
|
|
|
<dt>central
|
|
|
|
<dd>The <dfn id=central-baseline>central baseline</dfn>, which typically
|
|
crosses the center of the em box. In vertical typographic mode, this is
|
|
the dominant baseline. If the font is missing this baseline, it is
|
|
assumed to be halfway between the ascender (<a
|
|
href="#over"><i>over</i></a>) and descender (<a
|
|
href="#under"><i>under</i></a>) edges of the em box.
|
|
</dl>
|
|
|
|
<p class=note>A future CSS module will deal with baselines in more detail
|
|
and allow the choice of other dominant baselines and alignment options.
|
|
|
|
<h3 id=replaced-baselines><span class=secno>4.3. </span> Atomic Inline
|
|
Baselines</h3>
|
|
|
|
<p>If an <a
|
|
href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes">atomic
|
|
inline</a> (such as an inline-block, inline-table, or replaced inline
|
|
element) is not capable of providing its own baseline information, then
|
|
the UA synthesizes a baseline table thus:
|
|
|
|
<dl>
|
|
<dt>alphabetic
|
|
|
|
<dd>The alphabetic baseline is assumed to be at the <a
|
|
href="#under"><i>under</i></a> margin edge.
|
|
|
|
<dt>central
|
|
|
|
<dd>The central baseline is assumed to be halfway between the <a
|
|
href="#under"><i>under</i></a> and <a href="#over"><i>over</i></a> margin
|
|
edges of the box.
|
|
</dl>
|
|
|
|
<h3 id=baseline-alignment><span class=secno>4.4. </span> Baseline Alignment</h3>
|
|
|
|
<p>The <dfn id=dominant-baseline>dominant baseline</dfn> (which <a
|
|
href="#text-baselines">can change</a> based on the writing mode) is used
|
|
in CSS for alignment in two cases:
|
|
|
|
<ul>
|
|
<li><strong>Aligning glyphs from different fonts within the same inline
|
|
box.</strong> The glyphs are aligned by matching up the positions of the
|
|
dominant baseline in their corresponding fonts.
|
|
|
|
<li><strong>Aligning a child inline-level box within its parent.</strong>
|
|
For the ‘<code class=property>vertical-align</code>’ value of
|
|
‘<a href="#baseline"><code class=css>baseline</code></a>’,
|
|
child is aligned to the parent by matching the parent's dominant baseline
|
|
to the same baseline in the child. (E.g. if the parent's dominant
|
|
baseline is alphabetic, then the child's alphabetic baseline is matched
|
|
to the parent's alphabetic baseline, even if the child's dominant
|
|
baseline is something else.) For values of ‘<code
|
|
class=css>sub</code>’, ‘<code class=css>super</code>’,
|
|
‘<code class=css><length></code>’, and ‘<code
|
|
class=css><percentage></code>’, the baselines are aligned as
|
|
for ‘<a href="#baseline"><code
|
|
class=css>baseline</code></a>’, but the child is shifted according
|
|
to the offset given by its ‘<code
|
|
class=property>vertical-align</code>’ value.
|
|
<div class=example>
|
|
<p>Given following sample markup:
|
|
|
|
<pre><p><span class="outer">Ap <span class="inner"><i>ji</i></span></span></p></pre>
|
|
|
|
<p>And the following style rule:
|
|
|
|
<pre>span.inner { font-size: .75em; }</pre>
|
|
|
|
<p>The baseline tables of the parent (<code>.outer</code>) and the child
|
|
(<code>.inner</code>) will not match up due to the font size
|
|
difference. Since the dominant baseline is the alphabetic baseline, the
|
|
child box is aligned to its parent by matching up their alphabetic
|
|
baselines.
|
|
|
|
<div class=figure>
|
|
<p><img alt="" src=baseline-align-sizes.gif>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>If we assign ‘<code class=css>vertical-align:
|
|
super</code>’ to the <code>.inner</code> element from the example
|
|
above, the same rules are used to align the <code>.inner</code> child
|
|
to its parent; the only difference is in addition to the baseline
|
|
alignment, the child is shifted to the superscript position.
|
|
|
|
<pre>span.inner { vertical-align: super; font-size: .75em; }</pre>
|
|
|
|
<div class=figure>
|
|
<p><img 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."
|
|
src=baseline-align-super.gif>
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
|
|
<h2 id=intro-text-layout><span class=secno>5. </span> Introduction to
|
|
Vertical Text Layout</h2>
|
|
|
|
<p>Each writing system has one or more native orientations. Modern scripts
|
|
can therefore be classified into three orientational categories:
|
|
|
|
<dl>
|
|
<dt>horizontal-only
|
|
|
|
<dd>Scripts that have horizontal, but not vertical, native orientation.
|
|
Includes: Latin, Arabic, Hebrew, Devanagari
|
|
|
|
<dt>vertical-only
|
|
|
|
<dd>Scripts that have vertical, but not horizontal, native orientation.
|
|
Includes: Mongolian, Phags Pa
|
|
|
|
<dt>bi-orientational
|
|
|
|
<dd>Scripts that have both vertical and horizontal native orientation.
|
|
Includes: Han, Hangul, Japanese Kana
|
|
</dl>
|
|
|
|
<p>In modern typographic systems, all glyphs are assigned a horizontal
|
|
orientation, which is used when laying out text horizontally. To lay out
|
|
vertical text, the UA needs to transform the text from its horizontal
|
|
orientation. This transformation is the <dfn
|
|
id=bi-orientational-transform>bi-orientational transform</dfn>, and there
|
|
are two types:
|
|
|
|
<dl>
|
|
<dt>rotate
|
|
|
|
<dd>Rotate the glyph from horizontal to vertical <a
|
|
href="diagrams/glyph-right.svg" type="image/svg+xml"> <img alt="Rotate
|
|
the glyph from horizontal to vertical" class=figure
|
|
src="diagrams/glyph-right.png"></a>
|
|
|
|
<dt>translate
|
|
|
|
<dd>Translate the glyph from horizontal to vertical <a
|
|
href="diagrams/glyph-upright.svg" type="image/svg+xml"> <img
|
|
alt="Translate the glyph from horizontal to vertical" class=figure
|
|
src="diagrams/glyph-upright.png"></a>
|
|
</dl>
|
|
|
|
<p>Scripts with a native vertical orientation have an intrinsic
|
|
bi-orientational transform, which orients them correctly in vertical text:
|
|
CJK (Chinese/Japanese/Korean) characters translate, that is, they are
|
|
always upright. Other scripts, such as Mongolian, rotate. (See <a
|
|
href="#script-orientations">Appendix B</a> for a list of intrinsic
|
|
bi-orientational transforms.)
|
|
|
|
<p>Scripts without a native vertical orientation can be either rotated (set
|
|
sideways) or translated (set upright): the transform used is a stylistic
|
|
preference depending on the text's usage, rather than a matter of
|
|
correctness. The ‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ property's ‘<a
|
|
href="#upright-right"><code class=css>upright-right</code></a>’ and
|
|
‘<a href="#upright"><code class=css>upright</code></a>’ values
|
|
are provided to specify rotation vs. translation of horizontal-only text.
|
|
|
|
<p class=note>The ‘<a href="#sideways-left"><code
|
|
class=css>sideways-left</code></a>’, ‘<a
|
|
href="#sideways-right"><code class=css>sideways-right</code></a>’,
|
|
and ‘<a href="#sideways"><code class=css>sideways</code></a>’
|
|
values of ‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ are provided for
|
|
decorative layout effects and to work around limitations in CSS support
|
|
for bottom-to-top scripts.
|
|
|
|
<p class=issue>Ideally, punctuation should be either sideways or upright
|
|
depending on whether the primary script is horizontal-only or vertical.
|
|
However, this information (which, like the base directionality, is a
|
|
property of the content) is not available to us. (UTN 22 used the concept
|
|
of a vertical directionality, given via ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ or the HTML <code>dir</code>
|
|
attribute to handle this issue.) The current spec works around this by
|
|
using the East Asian Width property; but this approach only works if
|
|
vertical scripts do not share punctuation with horizontal-only scripts.
|
|
|
|
<h3 id=text-orientation><span class=secno>5.1. </span> Orienting Text: the
|
|
‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-orientation0>text-orientation</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>upright-right | upright | sideways-right | sideways-left | sideways
|
|
| use-glyph-orientation
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>upright-right
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements except table row groups, rows, column groups, and
|
|
columns
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies the orientation of characters within a line and
|
|
sets the orientation of the line. Current values only have an effect in
|
|
vertical writing modes.
|
|
|
|
<p>For readability, the term <a href="#character"><i>character</i></a> is
|
|
used in place of <em>extended grapheme cluster</em> in this section. See
|
|
<a href="#character-properties">Characters and Properties</a> for further
|
|
details.
|
|
|
|
<p>Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=upright-right>upright-right</dfn>
|
|
|
|
<dd>
|
|
<p>In vertical writing modes, characters from horizontal-only scripts are
|
|
set sideways, i.e. 90° clockwise from their standard orientation in
|
|
horizontal text. Characters from vertical scripts are set with their
|
|
intrinsic orientation.
|
|
|
|
<p>In vertical writing modes, this value puts the element in a
|
|
<i>vertical typographic mode</i> and is typical for layout of primarily
|
|
vertical-script text.
|
|
|
|
<dt><dfn id=upright>upright</dfn>
|
|
|
|
<dd>
|
|
<p>In vertical writing modes, characters from horizonal-only scripts are
|
|
rendered upright, i.e. in their standard horizontal orientation. Shaping
|
|
characters from such scripts are shaped in their isolated forms.
|
|
Characters from vertical scripts are set with their intrinsic
|
|
orientation and shaped normally. When available, vertical glyph variants
|
|
and vertical font metrics are used to set the text. The UA must
|
|
synthesize vertical font metrics for grapheme clusters that do not have
|
|
any.
|
|
|
|
<p>For the purposes of bidi reordering, this value causes all characters
|
|
to be treated as strong LTR. This value causes the used value of
|
|
‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ to be ‘<a
|
|
href="#ltr"><code class=css>ltr</code></a>’.
|
|
|
|
<p>In vertical writing modes, this value puts the element in a
|
|
<i>vertical typographic mode</i>.
|
|
|
|
<dt><dfn id=sideways-right>sideways-right</dfn>
|
|
|
|
<dd>
|
|
<p>In vertical writing modes, this causes text to be set as if in a
|
|
horizontal layout (using horizontal glyph variants and metrics), but
|
|
rotated 90° clockwise. This value puts the element in a
|
|
<i>horizontal typographic mode</i>.
|
|
|
|
<dt><dfn id=sideways-left>sideways-left</dfn>
|
|
|
|
<dd>
|
|
<p>In vertical writing modes, this causes text to be set as if in a
|
|
horizontal layout (using horizontal glyph variants and metrics), but
|
|
rotated 90° counter-clockwise. This value puts the element in a
|
|
<i>horizontal typographic mode</i>.
|
|
|
|
<p>If set on a non-replaced inline whose parent is not ‘<a
|
|
href="#sideways-left"><code class=css>sideways-left</code></a>’,
|
|
this forces bidi isolation: the ‘<a href="#normal"><code
|
|
class=css>normal</code></a>’ and ‘<a href="#embed"><code
|
|
class=css>embed</code></a>’ values of ‘<a
|
|
href="#unicode-bidi0"><code
|
|
class=property>unicode-bidi</code></a>’ compute to ‘<a
|
|
href="#isolate"><code class=css>isolate</code></a>’, and ‘<a
|
|
href="#bidi-override"><code class=css>bidi-override</code></a>’
|
|
computes to ‘<code class=css>bidi-override isolate</code>’.
|
|
Layout of text is exactly as for ‘<a href="#sideways-right"><code
|
|
class=css>sideways-right</code></a>’ except that the text content
|
|
and baseline table of each of the element's inline boxes is mirrored
|
|
around a vertical axis along the center of its content box. The
|
|
positions of text decorations propagated from an ancestor inline
|
|
(including the block container's root inline) are not mirrored, but any
|
|
text decorations introduced by the element are positioned using the
|
|
mirrored baseline table.
|
|
|
|
<p>Similarly, if an inline child of the element has a ‘<a
|
|
href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ value other than
|
|
‘<a href="#sideways-left"><code
|
|
class=css>sideways-left</code></a>’, an analogous transformation
|
|
(and bidi isolation) is applied.
|
|
|
|
<dt><dfn id=sideways>sideways</dfn>
|
|
|
|
<dd>
|
|
<p>This value is equivalent to ‘<a href="#sideways-right"><code
|
|
class=css>sideways-right</code></a>’ in ‘<a
|
|
href="#vertical-rl"><code class=css>vertical-rl</code></a>’
|
|
writing mode and equivalent to ‘<a href="#sideways-left"><code
|
|
class=css>sideways-left</code></a>’ in ‘<a
|
|
href="#vertical-lr"><code class=css>vertical-lr</code></a>’
|
|
writing mode. It can be useful when setting horizontal script text
|
|
vertically in a primarily horizontal-only document.
|
|
|
|
<dt><dfn id=use-glyph-orientation>use-glyph-orientation</dfn>
|
|
|
|
<dd>
|
|
<p><a href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> defines
|
|
‘<code class=property>glyph-orientation-vertical</code>’ and
|
|
‘<code class=property>glyph-orientation-horizontal</code>’
|
|
properties that were intended to control text orientation. These
|
|
properties are <em>deprecated</em> and do not apply to non-SVG elements.
|
|
If an implementation supports these properties, the ‘<a
|
|
href="#use-glyph-orientation"><code
|
|
class=css>use-glyph-orientation</code></a>’ value when set on SVG
|
|
elements indicates that the SVG ‘<code
|
|
class=property>glyph-orientation-vertical</code>’ and ‘<code
|
|
class=property>glyph-orientation-horizontal</code>’ behavior
|
|
control the layout of text. Such UAs must set ‘<code
|
|
class=css>text-orientation: glyph-orientation</code>’ on all <a
|
|
href="http://www.w3.org/TR/SVG/intro.html#TermTextContentElement">SVG
|
|
text content elements</a> in their default UA style sheet for SVG.
|
|
|
|
<p>In all other contexts, and for implementations that do not support the
|
|
glyph orientation properties, the ‘<a
|
|
href="#use-glyph-orientation"><code
|
|
class=css>use-glyph-orientation</code></a>’ behavior is the same
|
|
as for ‘<a href="#upright-right"><code
|
|
class=css>upright-right</code></a>’.
|
|
|
|
<p class=note>This value is at-risk and may be dropped during CR.
|
|
</dl>
|
|
|
|
<div class=figure>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td> <img alt="text-orientation: upright-right" height=160
|
|
src=text-orientation-vr.png width=64>
|
|
|
|
<td> <img alt="text-orientation: upright" height=160
|
|
src=text-orientation-up.png width=64>
|
|
|
|
<td> <img alt="text-orientation: sideways-left" height=160
|
|
src=text-orientation-sl.png width=64>
|
|
|
|
<td> <img alt="text-orientation: sideways-right" height=160
|
|
src=text-orientation-sr.png width=64>
|
|
|
|
<tr>
|
|
<td>‘<a href="#upright-right"><code
|
|
class=css>upright-right</code></a>’
|
|
|
|
<td>‘<a href="#upright"><code class=css>upright</code></a>’
|
|
|
|
<td>‘<a href="#sideways-left"><code
|
|
class=css>sideways-left</code></a>’
|
|
|
|
<td>‘<a href="#sideways-right"><code
|
|
class=css>sideways-right</code></a>’
|
|
</table>
|
|
|
|
<p class=caption>‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ values (‘<a
|
|
href="#writing-mode1"><code class=property>writing-mode</code></a>’
|
|
is ‘<a href="#vertical-rl"><code
|
|
class=css>vertical-rl</code></a>’)</p>
|
|
</div>
|
|
|
|
<p>The orientation of characters belonging to the Common, Inherited, and
|
|
Unknown script categories is defined in <a
|
|
href="#vertical-typesetting-details">Appendix C</a>. <span
|
|
class=issue>Feedback is requested on those rules.</span>
|
|
|
|
<p class=issue>Need a clear normative definition of default character
|
|
orientation for all Unicode characters that does not rely on data supplied
|
|
by fonts.
|
|
|
|
<div class=example>
|
|
<p>In the following example, the root element of a horizontal-only
|
|
document is set to use ‘<a href="#sideways"><code
|
|
class=css>sideways</code></a>’. In the rest of the document, the
|
|
author can just set ‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ without worrying about
|
|
whether the text is ‘<a href="#vertical-rl"><code
|
|
class=css>vertical-rl</code></a>’ or ‘<a
|
|
href="#vertical-lr"><code class=css>vertical-lr</code></a>’.
|
|
|
|
<pre>
|
|
:root { text-orientation: sideways; }
|
|
caption { caption-side: left; writing-mode: vertical-lr; }
|
|
thead th { writing-mode: vertical-lr; }
|
|
h1.banner { position: absolute; top: 0; right: 0; writing-mode: vertical-rl; }
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=abstract-box><span class=secno>6. </span> Abstract Box Terminology</h2>
|
|
|
|
<p><a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines
|
|
the box layout model of CSS in detail. However, it only defines the box
|
|
model for the ‘<a href="#horizontal-tb"><code
|
|
class=css>horizontal-tb</code></a>’ writing mode. CSS box layout in
|
|
writing modes other than ‘<a href="#horizontal-tb"><code
|
|
class=css>horizontal-tb</code></a>’ is analogous to the box layout
|
|
defined in CSS2.1 if directions and dimensions are abstracted and remapped
|
|
appropriately. This section defines abstract directional and dimensional
|
|
terms and their mappings in order to define box layout for other writing
|
|
modes, and to provide terminology for future specs to define their layout
|
|
concepts abstractly.
|
|
|
|
<h3 id=abstract-dimensions><span class=secno>6.1. </span> Logical
|
|
Dimensions</h3>
|
|
|
|
<dl>
|
|
<dt><dfn id=block-flow-dimension>block flow dimension</dfn>
|
|
|
|
<dd>The dimension perpendicular to the flow of text with in a line, the
|
|
<i>vertical dimension</i> in horizontal writing modes, and the
|
|
<i>horizontal dimension</i> in vertical writing modes.
|
|
|
|
<dt><dfn id=inline-dimension>inline dimension</dfn>
|
|
|
|
<dd>The dimension parallel to the flow of text within a line, i.e. the
|
|
<i>horizontal dimension</i> in horizontal writing modes, and the
|
|
<i>vertical dimension</i> in vertical writing modes.
|
|
|
|
<dt><dfn id=inline-axis>inline-axis</dfn>
|
|
|
|
<dd>The axis in the block flow dimension, i.e. the <i>vertical axis</i> in
|
|
horizontal writing modes and the <i>horizontal axis</i> in vertical
|
|
writing modes.
|
|
|
|
<dt><dfn id=block-axis>block-axis</dfn>
|
|
|
|
<dd>The axis in the inline dimension, i.e. the <i>horizontal axis</i> in
|
|
horizontal writing modes and the <i>vertical axis</i> in vertical writing
|
|
modes.
|
|
|
|
<dt><dfn id=extent>extent</dfn> or <dfn id=logical-height>logical
|
|
height</dfn>
|
|
|
|
<dt>
|
|
|
|
<dd>A measurement in the block flow dimension: refers to the physical
|
|
height (vertical dimension) in horizontal writing modes, and to the
|
|
physical width (horizontal dimension) in vertical writing modes.
|
|
|
|
<dt><dfn id=measure>measure</dfn> or <dfn id=logical-width>logical
|
|
width</dfn>
|
|
|
|
<dt>
|
|
|
|
<dd>A measurement in the inline dimension: refers to the physical width
|
|
(horizontal dimension) in horizontal writing modes, and to the physical
|
|
height (vertical dimension) in vertical writing modes. (The term <a
|
|
href="#measure"><i>measure</i></a> derives from its <a
|
|
href="http://en.wikipedia.org/wiki/Measure_%28typography%29">use in
|
|
typography</a>.)
|
|
</dl>
|
|
|
|
<h3 id=abstract-directions><span class=secno>6.2. </span> Abstract and
|
|
Physical Directions</h3>
|
|
|
|
<p>The terms <dfn id=left>left</dfn>, <dfn id=right>right</dfn>, <dfn
|
|
id=top>top</dfn>, and <dfn id=bottom>bottom</dfn> are always interpreted
|
|
physically, i.e. with respect to the page independent of writing mode. Two
|
|
abstract mappings are possible for these directions: line-relative and
|
|
flow-relative, which are defined below.
|
|
|
|
<p>Although they derive from the behavior of text, these directional terms
|
|
exist even for boxes that do not contain any line boxes: they are
|
|
calculated directly from the values of the ‘<a
|
|
href="#writing-mode1"><code class=property>writing-mode</code></a>’,
|
|
‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’, and ‘<a
|
|
href="#direction0"><code class=property>direction</code></a>’
|
|
properties.
|
|
|
|
<h3 id=line-directions><span class=secno>6.3. </span> Line-relative
|
|
Directions</h3>
|
|
|
|
<p>Although the block flow direction given by ‘<a
|
|
href="#writing-mode1"><code class=property>writing-mode</code></a>’
|
|
determines whether the line is oriented horizontally or vertically, it
|
|
doesn't say anything about how the contents within the line are arranged.
|
|
|
|
<p>The <dfn id=line-relative-directions>line-relative directions</dfn> are
|
|
<a href="#over"><i>over</i></a>, <a href="#under"><i>under</i></a>, <a
|
|
href="#line-left"><i>line-left</i></a>, and <a
|
|
href="#line-right"><i>line-right</i></a>. The <dfn
|
|
id=line-orientation>line orientation</dfn>, which is given by a
|
|
combination of ‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ and ‘<a
|
|
href="#writing-mode1"><code class=property>writing-mode</code></a>’,
|
|
determines which side of the line is the "top" and thus which sides are
|
|
<dfn id=under>under</dfn> (ascender side) and <dfn id=over>over</dfn>
|
|
(descender side) the line. The line orientation also affects the
|
|
interpretation of alignment (‘<code
|
|
class=property>vertical-align</code>’) in the transverse dimension
|
|
of the line.
|
|
|
|
<p>In addition to its <a href="#over"><i>over</i></a> and <a
|
|
href="#under"><i>under</i></a> sides, a line box, even a
|
|
vertically-oriented one, also has a "left" and "right" side, which we will
|
|
call the <a href="#line-left"><i>line-left</i></a> and <a
|
|
href="#line-right"><i>line-right</i></a> sides of the box (as distinct
|
|
from the physical left and physical right sides of the box). The <dfn
|
|
id=line-left>line-left</dfn> edge of a box is nominally the edge from
|
|
which <abbr title=left-to-right>LTR</abbr> text would start. The <dfn
|
|
id=line-right>line-right</dfn> edge of a box is nominally the edge from
|
|
which <abbr title=right-to-left>RTL</abbr> text would start. Depending on
|
|
the ‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ and ‘<a
|
|
href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ properties, the
|
|
line-left side of a box could be on the physical left, top, or bottom.
|
|
|
|
<div class=figure> <a href="diagrams/line-orient-up.svg"
|
|
type="image/svg+xml"> <img alt="Line orientation compass" class=landscape
|
|
src="diagrams/line-orient-up.png"></a>
|
|
<p class=caption>Line orientation compass</p>
|
|
</div>
|
|
|
|
<div class=figurepair>
|
|
<div class=figure> <a href="diagrams/line-orient-right.svg"
|
|
type="image/svg+xml"> <img alt="Typical orientation in vertical"
|
|
class=portrait src="diagrams/line-orient-right.png"></a>
|
|
<p class=caption>Typical orientation in vertical</p>
|
|
</div>
|
|
|
|
<div class=figure> <a href="diagrams/line-orient-left.svg"
|
|
type="image/svg+xml"> <img alt="Line orientation with ''text-orientation:
|
|
sideways-left''" class=portrait src="diagrams/line-orient-left.png"></a>
|
|
<p class=caption>Line orientation with ‘<code
|
|
class=css>text-orientation: sideways-left</code>’</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class=note>Note also that while the <a href="#over"><i>over</i></a> and
|
|
<a href="#under"><i>under</i></a> directions often map to the same
|
|
directions as <a href="#before">before</a> and <a href="#after">after</a>
|
|
respectively, this mapping is reversed for some combinations of ‘<a
|
|
href="#writing-mode1"><code class=property>writing-mode</code></a>’
|
|
and ‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’.
|
|
|
|
<h3 id=logical-directions><span class=secno>6.4. </span> Flow-relative
|
|
Directions</h3>
|
|
|
|
<p>The <dfn id=flow-relative-directions>flow-relative directions</dfn> are
|
|
<a href="#before">before</a>, <a href="#after">after</a>, <a
|
|
href="#start">start</a>, and <a href="#end">end</a>. In an <abbr
|
|
title=left-to-right>LTR</abbr> ‘<a href="#horizontal-tb"><code
|
|
class=css>horizontal-tb</code></a>’ writing mode, they correspond to
|
|
the top, bottom, left, and right directions, respectively.
|
|
|
|
<p>The <dfn id=before>before</dfn> edge of a box is nominally the edge that
|
|
comes earlier in the block progression, as determined by the ‘<a
|
|
href="#writing-mode1"><code class=property>writing-mode</code></a>’
|
|
property. Similarly the <dfn id=after>after</dfn> edge is the edge that
|
|
comes later in the progression.
|
|
|
|
<p>The <dfn id=start>start</dfn> edge of a box is nominally the edge from
|
|
which text of its inline base direction will start. For boxes with a used
|
|
‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ value of ‘<a
|
|
href="#ltr"><code class=css>ltr</code></a>’, this means the <a
|
|
href="#line-left"><i>line-left</i></a> edge. For boxes with a used
|
|
‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ value of ‘<a
|
|
href="#rtl"><code class=css>rtl</code></a>’, this means the <a
|
|
href="#line-right"><i>line-right</i></a> edge. The edge opposite the start
|
|
edge is the <dfn id=end>end</dfn> edge.
|
|
|
|
<p class=note>Note that while determining the <a
|
|
href="#before"><i>before</i></a> and <a href="#after"><i>after</i></a>
|
|
edges of a box depends only on the ‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ property, determining the <a
|
|
href="#start"><i>start</i></a> and <a href="#end"><i>end</i></a> edges of
|
|
a box depends not only on the ‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ property but also the
|
|
‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ <em>and</em> ‘<a
|
|
href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ properties.
|
|
|
|
<div class=example>
|
|
<p>An English (LTR-TB) block:</p>
|
|
|
|
<pre class=ascii-art>
|
|
<----- width / measure ----->
|
|
|
|
top side/
|
|
before side
|
|
+------------------------------+ A
|
|
left side/ | ---inline direction ---> | right side/ |
|
|
start side | | | end side |
|
|
| | block * horizontal * | height/
|
|
| | direction *writing mode* | extent
|
|
| V | |
|
|
+------------------------------+ V
|
|
bottom side/
|
|
after side
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>A vertical Japanese block (TTB-RL):</p>
|
|
|
|
<pre class=ascii-art>
|
|
<----- width / extent ------>
|
|
|
|
top side/
|
|
start side
|
|
+------------------------------+ A
|
|
left side/ | <---block direction--- | right side/ |
|
|
after side | | | before side |
|
|
| * vertical * inline| | height/
|
|
| *writing mode* direction| | measure
|
|
| V | |
|
|
+------------------------------+ V
|
|
bottom side/
|
|
end side
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=logical-to-physical><span class=secno>6.5. </span>
|
|
Abstract-to-Physical Mappings</h3>
|
|
|
|
<p>The following table summarizes the abstract-to-physical mappings:
|
|
|
|
<table class="complex data">
|
|
<caption>Abstract-Physical Mapping</caption>
|
|
|
|
<colgroup class=header></colgroup>
|
|
|
|
<colgroup span=10></colgroup>
|
|
|
|
<thead>
|
|
<tr>
|
|
<th scope=row>‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’
|
|
|
|
<th colspan=2>‘<a href="#horizontal-tb"><code
|
|
class=css>horizontal-tb</code></a>’
|
|
|
|
<th colspan=4>‘<a href="#vertical-rl"><code
|
|
class=css>vertical-rl</code></a>’
|
|
|
|
<th colspan=4>‘<a href="#vertical-lr"><code
|
|
class=css>vertical-lr</code></a>’
|
|
|
|
<tr>
|
|
<th scope=row>‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’
|
|
|
|
<th colspan=2>—
|
|
|
|
<th colspan=2>‘<a href="#sideways-left"><code
|
|
class=css>sideways-left</code></a>’
|
|
|
|
<th colspan=2><abbr title="upright-right, upright,
|
|
sideways-right">*right</abbr>
|
|
|
|
<th colspan=2>‘<a href="#sideways-left"><code
|
|
class=css>sideways-left</code></a>’
|
|
|
|
<th colspan=2><abbr title="upright-right, upright,
|
|
sideways-right">*right</abbr>
|
|
|
|
<tr>
|
|
<th scope=row>‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’
|
|
|
|
<th>‘<a href="#ltr"><code class=css>ltr</code></a>’
|
|
|
|
<th>‘<a href="#rtl"><code class=css>rtl</code></a>’
|
|
|
|
<th>‘<a href="#ltr"><code class=css>ltr</code></a>’
|
|
|
|
<th>‘<a href="#rtl"><code class=css>rtl</code></a>’
|
|
|
|
<th>‘<a href="#ltr"><code class=css>ltr</code></a>’
|
|
|
|
<th>‘<a href="#rtl"><code class=css>rtl</code></a>’
|
|
|
|
<th>‘<a href="#ltr"><code class=css>ltr</code></a>’
|
|
|
|
<th>‘<a href="#rtl"><code class=css>rtl</code></a>’
|
|
|
|
<th>‘<a href="#ltr"><code class=css>ltr</code></a>’
|
|
|
|
<th>‘<a href="#rtl"><code class=css>rtl</code></a>’
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th scope=row>extent
|
|
|
|
<td colspan=2>height
|
|
|
|
<td colspan=8>width
|
|
|
|
<tr>
|
|
<th scope=row>measure
|
|
|
|
<td colspan=2>width
|
|
|
|
<td colspan=8>height
|
|
|
|
<tr>
|
|
<th scope=row>before
|
|
|
|
<td colspan=2>top
|
|
|
|
<td colspan=4>right
|
|
|
|
<td colspan=4>left
|
|
|
|
<tr>
|
|
<th scope=row>after
|
|
|
|
<td colspan=2>bottom
|
|
|
|
<td colspan=4>left
|
|
|
|
<td colspan=4>right
|
|
|
|
<tr>
|
|
<th scope=row>start
|
|
|
|
<td>left
|
|
|
|
<td>right
|
|
|
|
<td>bottom
|
|
|
|
<td>top
|
|
|
|
<td>top
|
|
|
|
<td>bottom
|
|
|
|
<td>bottom
|
|
|
|
<td>top
|
|
|
|
<td>top
|
|
|
|
<td>bottom
|
|
|
|
<tr>
|
|
<th scope=row>end
|
|
|
|
<td>right
|
|
|
|
<td>left
|
|
|
|
<td>top
|
|
|
|
<td>bottom
|
|
|
|
<td>bottom
|
|
|
|
<td>top
|
|
|
|
<td>top
|
|
|
|
<td>bottom
|
|
|
|
<td>bottom
|
|
|
|
<td>top
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th scope=row>over
|
|
|
|
<td colspan=2>top
|
|
|
|
<td colspan=2>left
|
|
|
|
<td colspan=2>right
|
|
|
|
<td colspan=2>left
|
|
|
|
<td colspan=2>right
|
|
|
|
<tr>
|
|
<th scope=row>under
|
|
|
|
<td colspan=2>bottom
|
|
|
|
<td colspan=2>right
|
|
|
|
<td colspan=2>left
|
|
|
|
<td colspan=2>right
|
|
|
|
<td colspan=2>left
|
|
|
|
<tr>
|
|
<th scope=row>line-left
|
|
|
|
<td colspan=2>left
|
|
|
|
<td colspan=2>bottom
|
|
|
|
<td colspan=2>top
|
|
|
|
<td colspan=2>bottom
|
|
|
|
<td colspan=2>top
|
|
|
|
<tr>
|
|
<th scope=row>line-right
|
|
|
|
<td colspan=2>right
|
|
|
|
<td colspan=2>top
|
|
|
|
<td colspan=2>bottom
|
|
|
|
<td colspan=2>top
|
|
|
|
<td colspan=2>bottom
|
|
</table>
|
|
|
|
<h2 id=abstract-layout><span class=secno>7. </span> Abstract Box Layout</h2>
|
|
|
|
<h3 id=vertical-layout><span class=secno>7.1. </span> Principles of Layout
|
|
in Vertical Writing Modes</h3>
|
|
|
|
<p>CSS box layout in vertical writing modes is analogous to layout in the
|
|
horizontal writing modes, following the principles outlined below:
|
|
|
|
<p>Layout calculation rules (such as those in CSS2.1, Section 10.3) that
|
|
apply to the horizontal dimension in horizontal writing modes instead
|
|
apply to the vertical dimension in vertical writing modes. Likewise,
|
|
layout calculation rules (such as those in CSS2.1, Section 10.6) that
|
|
apply to the vertical dimension in horizontal writing modes instead apply
|
|
to the horizontal dimension in vertical writing modes. Thus:
|
|
|
|
<ul>
|
|
<li>
|
|
<p>Layout rules that refer to the width use the height instead, and vice
|
|
versa.
|
|
|
|
<li>
|
|
<p>Layout rules that refer to the ‘<code
|
|
class=css>*-left</code>’ and ‘<code
|
|
class=css>*-right</code>’ box properties (border, margin, padding)
|
|
use ‘<code class=css>*-top</code>’ and ‘<code
|
|
class=css>*-bottom</code>’ instead, and vice versa. Which side of
|
|
the box the property applies to doesn't change: only which values are
|
|
inputs to which layout calculations changes. The ‘<code
|
|
class=property>margin-left</code>’ property still affects the
|
|
lefthand margin, for example; however in a ‘<a
|
|
href="#vertical-rl"><code class=css>vertical-rl</code></a>’
|
|
writing mode it takes part in margin collapsing in place of ‘<code
|
|
class=property>margin-bottom</code>’.</p>
|
|
|
|
<li>
|
|
<p>Layout rules that depend on the ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ property to choose between
|
|
left and right (e.g. overflow, overconstraint resolution, the initial
|
|
value for ‘<code class=property>text-align</code>’, table
|
|
column ordering) are abstracted to the <a href="#start">start</a> and <a
|
|
href="#end">end</a> sides and applied appropriately.
|
|
</ul>
|
|
|
|
<div class=example>
|
|
<p>For example, in vertical writing modes, table rows are vertical and
|
|
table columns are horizontal. In a ‘<a href="#vertical-rl"><code
|
|
class=css>vertical-rl</code></a>’ ‘<a
|
|
href="#upright-right"><code class=css>upright-right</code></a>’
|
|
‘<a href="#rtl"><code class=css>rtl</code></a>’ table, the
|
|
first column would be on the bottom (the start side), and the first row
|
|
on the right (the before side). The table's ‘<code
|
|
class=property>margin-right</code>’ and ‘<code
|
|
class=property>margin-left</code>’ would collapse with margins
|
|
before (on the right) and after (on the left) the table, respectively,
|
|
and if the table had ‘<code class=css>auto</code>’ values for
|
|
‘<code class=property>margin-top</code>’ and ‘<code
|
|
class=property>margin-bottom</code>’ it would be centered
|
|
vertically within its block flow.
|
|
|
|
<div class=figure>
|
|
<p><a href="diagrams/vertical-table.svg" type="image/svg+xml"> <img
|
|
alt="Diagram of a vertical-rl upright-right rtl table in a vertical
|
|
block formatting context, showing the ordering of rows, cells, and
|
|
columns as described above." class=example
|
|
src="diagrams/vertical-table.png"></a>
|
|
|
|
<p class=caption>Table in ‘<a href="#vertical-rl"><code
|
|
class=css>vertical-rl</code></a>’ RTL writing mode</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p>For features such as text alignment, floating, and list marker
|
|
positioning, that primarily reference the left or right sides of the line
|
|
box or its longitudinal parallels and therefore have no top or bottom
|
|
equivalent, the <a href="#line-left">line left</a> and <a
|
|
href="#line-right">line right</a> sides are used as the reference for the
|
|
left and right sides respectively.
|
|
|
|
<p>Likewise for features such as underlining, overlining, and baseline
|
|
alignment (the unfortunately-named ‘<code
|
|
class=property>vertical-align</code>’), that primarily reference the
|
|
top or bottom sides of the linebox or its transversal parallels and
|
|
therefore have no left or right equivalent, the <a href="#over">over</a>
|
|
and <a href="#under">under</a> sides are used as the reference for the top
|
|
and bottom sides respectively.
|
|
|
|
<p>The details of these mappings are provided below.
|
|
|
|
<h3 id=dimension-mapping><span class=secno>7.2. </span> Dimensional Mapping</h3>
|
|
<!--
|
|
<p>Properties that are named in terms of the x and y axes are
|
|
logical with respect to the block flow direction rather than absolute
|
|
with respect to the page. Specifically:
|
|
|
|
<ul>
|
|
<li>The ''repeat-x'' keyword of 'background-repeat' tiles in the
|
|
inline dimension of the element, which is not necessarily the
|
|
horizontal dimension. [[!CSS21]] [[!CSS3BG]]
|
|
<li>The ''repeat-y'' keyword of 'background-repeat' tiles in the
|
|
block flow dimension of the element, which is not necessarily
|
|
the vertical dimension. [[!CSS21]] [[!CSS3BG]]
|
|
<li>The 'overflow-x' property controls overflow in the inline
|
|
dimension of the element. [[!CSS3UI]]
|
|
<li>The 'overflow-y' property controls overflow in the block
|
|
flow dimension of the element. [[!CSS3UI]]
|
|
</ul>
|
|
-->
|
|
|
|
<p>Certain properties behave logically as follows:
|
|
|
|
<ul>
|
|
<li>The first and second values of the ‘<code
|
|
class=property>border-spacing</code>’ property represent spacing
|
|
between columns and rows respectively, not necessarily the horizontal and
|
|
vertical spacing respectively. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<li>The ‘<code class=property>line-height</code>’ property
|
|
always refers to the logical height. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
</ul>
|
|
|
|
<p>The height properties (‘<code class=property>height</code>’,
|
|
‘<code class=property>min-height</code>’, and ‘<code
|
|
class=property>max-height</code>’) refer to the physical height, and
|
|
the width properties (‘<code class=property>width</code>’,
|
|
‘<code class=property>min-width</code>’, and ‘<code
|
|
class=property>max-width</code>’) refer to the physical width.
|
|
However, the rules used to calculate box dimensions and positions are
|
|
logical.
|
|
|
|
<p>For example, the calculation rules in <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins">CSS2.1
|
|
Section 10.3</a> are used for the inline dimension measurements: they
|
|
apply to the measure (which could be either the physical width or physical
|
|
height) and to the the start and end margins, padding, and border.
|
|
Likewise the calculation rules in <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins">CSS2.1
|
|
Section 10.6</a> are used in the block dimension: they apply to the extent
|
|
and to the before and after margins, padding, and border. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<p>As a corollary, percentages on the margin and padding properties, which
|
|
are always calculated with respect to the containing block width in
|
|
CSS2.1, are calculated with respect to the <a
|
|
href="#measure"><em>measure</em></a> of the containing block in CSS3.
|
|
|
|
<h3 id=orthogonal-flows><span class=secno>7.3. </span> Orthogonal Flows</h3>
|
|
|
|
<p>When an element has a different ‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ from its containing block
|
|
two cases are possible:
|
|
|
|
<ul>
|
|
<li>The two writing modes are parallel to each other. (For example,
|
|
‘<a href="#vertical-rl"><code
|
|
class=css>vertical-rl</code></a>’ and ‘<a
|
|
href="#vertical-lr"><code class=css>vertical-lr</code></a>’).
|
|
|
|
<li>The two writing modes are perpendicular to each other. (For example,
|
|
‘<a href="#horizontal-tb"><code
|
|
class=css>horizontal-tb</code></a>’ and ‘<a
|
|
href="#vertical-rl"><code class=css>vertical-rl</code></a>’).
|
|
</ul>
|
|
|
|
<p>To handle the second case, CSS layout calculations are divided into two
|
|
phases: sizing a box, and positioning the box within its flow. In the
|
|
sizing phase—calculating the width and height of the box—the
|
|
dimensions of the box and the containing block are mapped to the measure
|
|
and extent and calculations performed accordingly using the writing mode
|
|
of the element. In the positioning phase—calculating the positioning
|
|
offsets, margins, borders, and padding—the dimensions of the box and
|
|
its containing block are mapped to the measure and extent and calculations
|
|
performed according to the writing mode of the containing block.
|
|
|
|
<p>For example, if a vertical block is placed inside a horizontal block,
|
|
then when calculating the physical height (which is the measure) of the
|
|
child block the physical height of the parent block is used to calculate
|
|
the measure of the child's containing block, even though the physical
|
|
height is the extent, not the measure, of the parent block.
|
|
|
|
<p>Since auto margins are resolved consistent with the containing block's
|
|
writing mode, a box establishing an orthogonal flow, can, once sized, be
|
|
aligned or centered within its containing block just like other
|
|
block-level elements by using auto margins.
|
|
|
|
<p>It is common in CSS for a containing block to have a defined measure,
|
|
but not a defined extent. This typically happens in CSS2.1 when a
|
|
containing block has an ‘<code class=css>auto</code>’ height,
|
|
for example: its width is given by the calculations in <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>, but
|
|
its extent depends on its contents. In such cases the <dfn
|
|
id=available-measure>available measure</dfn> is defined as the measure of
|
|
the containing block; but the <dfn id=available-extent>available
|
|
extent</dfn>, which would otherwise be the extent of the containing block,
|
|
is infinite.
|
|
|
|
<p>Orthogonal flows allow the opposite to happen: for the <a
|
|
href="#available-extent"><i>available extent</i></a> to be defined, but
|
|
the <a href="#available-measure"><i>available measure</i></a> to be
|
|
infinite. In such cases a percentage of the containing block measure
|
|
cannot be defined, and thus the initial containing block's size is used
|
|
instead as a <a href="#fallback-measure"><i>fallback measure</i></a> to
|
|
calculate such percentages.
|
|
|
|
<h4 id=orthogonal-auto><span class=secno>7.3.1. </span> Auto-sizing in
|
|
Orthogonal Flows</h4>
|
|
|
|
<p>If the computed measure of an element establishing an orthogonal flow is
|
|
‘<code class=css>auto</code>’, then the used measure is
|
|
calculated as the <a href="#fit-content"><i>fit-content</i></a>
|
|
(shrink-to-fit) size using the initial containing block's size as the
|
|
available measure.
|
|
|
|
<h4 id=orthogonal-multicol><span class=secno>7.3.2. </span> Multi-column
|
|
Layout in Orthogonal Flows</h4>
|
|
|
|
<p>If the UA supports CSS Multi-column Layout <a href="#CSS3COL"
|
|
rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>, then for the case where
|
|
the element's extent or available extent is defined but the element's
|
|
measure is ‘<code class=css>auto</code>’:
|
|
|
|
<ol>
|
|
<li>If ‘<code class=property>column-count</code>’ and
|
|
‘<code class=property>column-width</code>’ are both
|
|
‘<code class=css>auto</code>’, a used ‘<code
|
|
class=property>column-width</code>’ is calculated for the element
|
|
as the <a href="#fill-available-measure"><i>fill-available
|
|
measure</i></a> using the <a href="#fallback-measure"><i>fallback
|
|
measure</i></a> as the <a href="#available-measure"><i>available
|
|
measure</i></a>.
|
|
|
|
<li>If the columns' extent is not fixed, the <a
|
|
href="#fill-available-extent"><i>fill-available extent</i></a> of the
|
|
element is used.
|
|
|
|
<li>The used column-count then follows from filling the resulting columns
|
|
with the element's content.
|
|
</ol>
|
|
|
|
<p>The used measure of the resulting multi-column element is then
|
|
calculated: if the content neither wraps nor paginates within the
|
|
multi-column element, then the used measure is the <a
|
|
href="#max-content-measure"><i>max-content measure</i></a> of the
|
|
element's contents; else it is calculated from the used column width,
|
|
column count, and column gap.
|
|
|
|
<p>The used extent of the element is either the used column extent (if
|
|
multiple columns were used) or the <a
|
|
href="#max-content-extent"><i>max-content extent</i></a> of the content.
|
|
|
|
<p class=note>This should behave the same as the auto-sizing algorithm
|
|
defined in the previous section, except overflowing content, instead of
|
|
continuing off the side of the containing block, is wrapped into columns
|
|
in the flow direction of the containing block, thus avoiding T-shaped
|
|
documents.
|
|
|
|
<h4 id=orthogonal-pagination><span class=secno>7.3.3. </span> Paginating
|
|
Orthogonal Flows</h4>
|
|
|
|
<p><em>This section is informative.</em>
|
|
|
|
<p>With regards to pagination, the rules in CSS2.1 still hold in vertical
|
|
writing modes and orthogonal flows: page break opportunities do not occur
|
|
inside line boxes, only between them. UAs that support <a href="#CSS3COL"
|
|
rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> may break in the
|
|
(potentially zero-width) gap between columns, however.
|
|
|
|
<p>Note that if content spills outside the pagination stream established by
|
|
the root element, the UA is not required to print such content. Authors
|
|
wishing to mix writing modes with long streams of text are thus encouraged
|
|
to use CSS columns to keep all content flowing in the document's
|
|
pagination direction.
|
|
|
|
<div class=note>
|
|
<p>In other words, if your document would require two scrollbars on the
|
|
screen it probably won't all print. Fix your layout, e.g. by using <a
|
|
href="http://www.w3.org/TR/css3-multicol/">columns</a> so that it all
|
|
scrolls (and therefore paginates) in one direction if you want to make
|
|
sure it'll all print. T-shaped documents tend not to print well.
|
|
</div>
|
|
|
|
<h3 id=logical-direction-layout><span class=secno>7.4. </span>
|
|
Flow-Relative Mappings</h3>
|
|
|
|
<p>Flow-relative directions are calculated with respect to the writing mode
|
|
of the <em>containing block</em> of the element and used to abstract
|
|
layout rules related to the box properties (margins, borders, padding) and
|
|
any properties related to positioning the box within its containing block
|
|
(‘<code class=property>float</code>’, ‘<code
|
|
class=property>clear</code>’, ‘<a href="#top"><code
|
|
class=property>top</code></a>’, ‘<a href="#bottom"><code
|
|
class=property>bottom</code></a>’, ‘<a href="#left"><code
|
|
class=property>left</code></a>’, ‘<a href="#right"><code
|
|
class=property>right</code></a>’) For inline-level elements, the
|
|
writing mode of the <em>parent element</em> is used instead.
|
|
|
|
<p>For example, the margin that is dropped when a box's inline dimension is
|
|
<a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">over-constrained</a>
|
|
is the end margin as determined by the writing mode of the containing
|
|
block.
|
|
|
|
<p>The <a
|
|
href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">margin
|
|
collapsing rules</a> apply exactly with the <em>before margin</em>
|
|
substituted for the top margin and the <em>after margin</em> substituted
|
|
for the bottom margin. Similarly the before padding and border are
|
|
substituted for the top padding and border, and the after padding and
|
|
border substituted for the bottom padding and border. Note this means only
|
|
before and after margins ever collapse.
|
|
|
|
<p>Flow-relative directions are calculated with respect to the writing mode
|
|
of the element and used to abstract layout related to the element's
|
|
contents:
|
|
|
|
<ul>
|
|
<li>The initial value of the ‘<code
|
|
class=property>text-align</code>’ property aligns to the start edge
|
|
of the line box.
|
|
|
|
<li>The ‘<code class=property>text-indent</code>’ property
|
|
indents from the start edge of the line box.
|
|
|
|
<li>For tables, the ordering of columns begins on the start side of the
|
|
table, and the ordering of rows begins on the before side of the table.
|
|
</ul>
|
|
|
|
<h3 id=line-mappings><span class=secno>7.5. </span> Line-Relative Mappings</h3>
|
|
|
|
<p>The <dfn id=line-relative-directions0>line-relative directions</dfn> are
|
|
<a href="#over">over</a>, <a href="#under">under</a>, <a
|
|
href="#line-left">line-left</a>, and <a href="#line-right">line-right</a>.
|
|
In an <abbr title=left-to-right>LTR</abbr> ‘<a
|
|
href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’
|
|
writing mode, they correspond to the top, bottom, left, and right
|
|
directions, respectively.
|
|
|
|
<p>The line-right and line-left directions are calculated with respect to
|
|
the writing mode of the element and used to interpret the ‘<a
|
|
href="#left"><code class=css>left</code></a>’ and ‘<a
|
|
href="#right"><code class=css>right</code></a>’ values of the
|
|
following properties:
|
|
|
|
<ul>
|
|
<li>the ‘<code class=property>text-align</code>’ property <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
</ul>
|
|
|
|
<p>The line-right and line-left directions are calculated with respect to
|
|
the writing mode of the <em>containing block</em> of the element and used
|
|
to interpret the ‘<a href="#left"><code
|
|
class=css>left</code></a>’ and ‘<a href="#right"><code
|
|
class=css>right</code></a>’ values of the following properties:
|
|
|
|
<ul>
|
|
<li>the ‘<code class=property>float</code>’ property <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<li>the ‘<code class=property>clear</code>’ property <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
</ul>
|
|
|
|
<p>The over and under directions are calculated with respect to the writing
|
|
mode of the element and used to define the interpretation of the "top"
|
|
(over edge) and "bottom" (under edge) of the line box as follows:
|
|
|
|
<ul>
|
|
<li>For the ‘<code class=property>vertical-align</code>’
|
|
property, the "top" of the line box is the over edge; the "bottom" of the
|
|
line box is the under edge. Positive length and percentage values shift
|
|
the baseline towards the over edge. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<li>For the ‘<code class=property>text-decoration</code>’
|
|
property, the underline is drawn on the under side of the text; the
|
|
overline is drawn on the over side of the text. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <span class=note>Note that
|
|
the CSS Text Module defines this in more detail and provides additional
|
|
controls for controlling the position of underlines and overlines. <a
|
|
href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a></span>
|
|
|
|
</ul>
|
|
|
|
<h3 id=physical-only><span class=secno>7.6. </span> Purely Physical
|
|
Mappings</h3>
|
|
|
|
<p>The following values are purely physical in their definitions and do not
|
|
respond to changes in writing mode:
|
|
|
|
<ul>
|
|
<li>the ‘<code class=css>rect()</code>’ notation of the
|
|
‘<code class=property>clip</code>’ property <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<li>the background properties <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <a href="#CSS3BG"
|
|
rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
|
|
|
|
<li>the border-image properties <a href="#CSS3BG"
|
|
rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
|
|
|
|
<li>the offsets of the ‘<code
|
|
class=property>box-shadow</code>’ and ‘<code
|
|
class=property>text-shadow</code>’ properties
|
|
</ul>
|
|
|
|
<h3 id=caption-side><span class=secno>7.7. </span> Table Caption Mappings:
|
|
the ‘<code class=property>caption-side</code>’ keywords</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Property:
|
|
|
|
<td>‘<code class=property>caption-side</code>’
|
|
|
|
<tr>
|
|
<th>New Values:
|
|
|
|
<td>‘<a href="#before"><code class=css>before</code></a>’ |
|
|
‘<a href="#after"><code class=css>after</code></a>’
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>before
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>same as CSS2.1
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>same as CSS2.1
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>same as CSS2.1
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>same as CSS2.1
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This module introduces two new values to the ‘<code
|
|
class=property>caption-side</code>’ property: ‘<a
|
|
href="#before"><code class=css>before</code></a>’ and ‘<a
|
|
href="#after"><code class=css>after</code></a>’, which position the
|
|
caption before and after the table box, respectively. For tables with
|
|
‘<a href="#horizontal-tb"><code
|
|
class=css>horizontal-tb</code></a>’ writing mode, they are
|
|
equivalent to the existing ‘<a href="#top"><code
|
|
class=css>top</code></a>’ and ‘<a href="#bottom"><code
|
|
class=css>bottom</code></a>’ values, respectively. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<p class=note>For implementations that support the ‘<code
|
|
class=property>top-outside</code>’ and ‘<code
|
|
class=property>bottom-outside</code>’ model, corresponding
|
|
‘<code class=property>before-outside</code>’ and ‘<code
|
|
class=property>after-outside</code>’ will be similarly introduced.
|
|
|
|
<p>Implementations that support the ‘<a href="#top"><code
|
|
class=css>top</code></a>’ and ‘<a href="#bottom"><code
|
|
class=css>bottom</code></a>’ values of the ‘<code
|
|
class=property>caption-side</code>’ property but do not support side
|
|
captions (i.e. ‘<a href="#left"><code
|
|
class=css>left</code></a>’ and ‘<a href="#right"><code
|
|
class=css>right</code></a>’ captions in horizontal writing modes)
|
|
must treat ‘<a href="#top"><code class=css>top</code></a>’ and
|
|
‘<a href="#bottom"><code class=css>bottom</code></a>’ as
|
|
‘<a href="#before"><code class=css>before</code></a>’, when
|
|
the table is in a vertical writing mode.
|
|
|
|
<p>For implementations that do support side captions (i.e. the ‘<a
|
|
href="#left"><code class=css>left</code></a>’ and ‘<a
|
|
href="#right"><code class=css>right</code></a>’ values from the
|
|
obsolete CSS 2.0 specification <a href="#CSS2"
|
|
rel=biblioentry>[CSS2]<!--{{CSS2}}--></a>), this module also introduces
|
|
the ‘<a href="#start"><code class=css>start</code></a>’ and
|
|
‘<a href="#end"><code class=css>end</code></a>’ values, which
|
|
behave similarly and which position the caption on the start and end sides
|
|
of the table box, calculated with respect to the writing mode of the table
|
|
element. For such implementations, the ‘<a href="#top"><code
|
|
class=css>top</code></a>’ and ‘<a href="#bottom"><code
|
|
class=css>bottom</code></a>’ values must place the caption on the
|
|
top and bottom sides of the table box, respectively.
|
|
|
|
<p class=note>The CSS2.0 side caption model had some <a
|
|
href="http://lists.w3.org/Archives/Public/www-style/2002Dec/0142.html">problems</a>
|
|
and will likely have a different definition in CSS3.</p>
|
|
<!--
|
|
<h3 id="html-attributes">HTML Attributes</h3>
|
|
|
|
<p>This section defines the mapping of HTML presentational attributes
|
|
in CSS. This section is normative for user agents supporting HTML
|
|
in addition to the 'writing-mode' property. [[!HTML40]] [[!HTML5]]
|
|
|
|
<h4 id="width-height-attributes">The <code>width</code> and <code>height</code> attributes</h4>
|
|
|
|
<p>The HTML <code>width</code> and <code>height</code> attributes refer
|
|
to the physical width and height for elements that that are replaced,
|
|
i.e.
|
|
<code><applet></code>,
|
|
<code><embed></code>,
|
|
<code><iframe></code>,
|
|
<code><img></code>,
|
|
<code><object></code>,
|
|
<code><canvas></code>,
|
|
and
|
|
<code><video></code>
|
|
|
|
<p>Form elements elements contain text, therefore their contents should be
|
|
affected by writing mode, in which case these attributes refer to the
|
|
<em>logical</em> width and height. The UA may, however, choose not
|
|
to rotate nor flip these elements in vertical writing modes if it is not
|
|
capable, and in that case, these attributes remain physical.</p>
|
|
<p class="issue">when not to rotate form elements/MathML,
|
|
should treat them as images (always upright)
|
|
or to force writing-mode to always calculate to horizontal-tb?</p>
|
|
|
|
<p>On table-related elements (<code><table></code>, <code><colgroup></code>,
|
|
<code><col></code>, <code><tr></code>, <code><th></code>,
|
|
<code><td></code>) the <code>width</code> and <code>height</code>
|
|
attributes are always logical.
|
|
|
|
<p>The <code>size</code> attribute of the <code><hr></code> element
|
|
is also logical (refers to the logical height).
|
|
|
|
<h4 id="alignment-attributes">Alignment, Float and Clear Attributes</h4>
|
|
|
|
<p>The following attributes behave the same way as their corresponding
|
|
CSS properties:</p>
|
|
|
|
<ul>
|
|
<li><code>align</code> as 'float' or 'text-align'</li>
|
|
<li><code>clear</code> as 'clear'</li>
|
|
<li><code>valign</code> as 'vertical-align'</li>
|
|
</ul>
|
|
|
|
<h4 id="spacing-attributes">Spacing Attributes</h4>
|
|
|
|
<p>The following attributes are logical and, as margins, are logical
|
|
with respect to the writing mode of the <em>parent</em> element.</p>
|
|
|
|
<ul>
|
|
<li><code>hspace</code> as start and end margins</li>
|
|
<li><code>vspace</code> as before and after margins</li>
|
|
<li>marginwidth</li>
|
|
<li>marginheight</li>
|
|
</ul>
|
|
-->
|
|
|
|
<h2 id=page-direction><span class=secno>8. </span> Page Flow: the page
|
|
progression direction</h2>
|
|
|
|
<p>In paged media CSS2.1 classifies all pages as either left or right
|
|
pages. The page progression direction, which determines whether the left
|
|
or right page in a spread is first in the flow and whether the first page
|
|
is by default a left or right page, depends on the writing direction as
|
|
follows:
|
|
|
|
<ul>
|
|
<li>The page progression is right-to-left if the root element's ‘<a
|
|
href="#writing-mode1"><code class=property>writing-mode</code></a>’
|
|
is ‘<a href="#vertical-rl"><code
|
|
class=css>vertical-rl</code></a>’ or if the root element's
|
|
‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ is ‘<a
|
|
href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ and
|
|
its ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ is ‘<a href="#rtl"><code
|
|
class=css>rtl</code></a>’.
|
|
|
|
<li>The page progression is left-to-right if the root element's ‘<a
|
|
href="#writing-mode1"><code class=property>writing-mode</code></a>’
|
|
is ‘<a href="#vertical-lr"><code
|
|
class=css>vertical-lr</code></a>’ or if the root element's
|
|
‘<a href="#writing-mode1"><code
|
|
class=property>writing-mode</code></a>’ is ‘<a
|
|
href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’ and
|
|
its ‘<a href="#direction0"><code
|
|
class=property>direction</code></a>’ is ‘<a href="#ltr"><code
|
|
class=css>ltr</code></a>’.
|
|
</ul>
|
|
|
|
<p>(Unless otherwise overridden, the first page of a document begins on the
|
|
second half of a spread, e.g. on the right page in a left-to-right page
|
|
progression.)
|
|
|
|
<h2 id=text-combine><span class=secno>9. </span> Glyph Composition</h2>
|
|
|
|
<h3 id=text-combine-horizontal><span class=secno>9.1. </span>
|
|
Horizonal-in-Vertical Composition: the ‘<a
|
|
href="#text-combine-horizontal0"><code
|
|
class=property>text-combine-horizontal</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-combine-horizontal0>text-combine-horizontal</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>none | all | [ [digits <integer> | ascii-digits <integer> ] ||
|
|
[ alpha <integer> | latin <integer> ] || alphanumeric
|
|
<integer> ]
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>non-replaced inline elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property allows the combination of multiple characters into the
|
|
space of a single character. This property only has an effect in vertical
|
|
writing modes. Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=none title="text-combine-horizontal:none">none</dfn>
|
|
|
|
<dd>No special processing.
|
|
|
|
<dt><dfn id=all title="text-combine-horizontal:all">all</dfn>
|
|
|
|
<dd>In vertical writing mode, attempt to display the text contents of the
|
|
element horizontally within the vertical line box, ideally within the
|
|
space of one ideographic character. (See below.) The resulting
|
|
composition is treated as a single glyph for the purposes of layout and
|
|
decoration. If the content contains any element boundaries this is
|
|
treated as ‘<code class=css>text-combine-horizontal:
|
|
none</code>’ on the element and any descendants.
|
|
|
|
<dt><dfn id=digits title="text-combine-horizontal:digits">digits</dfn>
|
|
|
|
<dd>Within the element, each sequence of consecutive horizontal digits
|
|
that has as many or fewer characters than the integer given is treated as
|
|
if it were in an anonymous inline box with ‘<code
|
|
class=css>text-combine-horizontal: all</code>’. For this property,
|
|
a <dfn id=horizontal-digit>horizontal digit</dfn> is any character
|
|
belonging to a Number category (N*) that does not belong to a <a
|
|
href="#script-orientations">vertical script</a>.
|
|
|
|
<dt><dfn id=ascii-digits
|
|
title="text-combine-horizontal:ascii-digits">ascii-digits</dfn>
|
|
|
|
<dd>Within the element, each sequence of consecutive ASCII digits
|
|
(U+0030–U+0039) that has as many or fewer characters than the
|
|
integer given is treated as if it were in an anonymous inline box with
|
|
‘<code class=css>text-combine-horizontal: all</code>’.
|
|
<p class=issue>This definition is would replace ‘<code
|
|
class=css>digits</code>’ as a simplification.
|
|
|
|
<dt><dfn id=alpha title="text-combine-horizontal:alpha">alpha</dfn>
|
|
|
|
<dd>Within the element, each sequence of consecutive horizontal letters
|
|
that has as many or fewer characters than the integer given is treated as
|
|
if it were in an anonymous inline box with ‘<code
|
|
class=css>text-combine-horizontal: all</code>’. For this property,
|
|
a <dfn id=horizonal-letter>horizonal letter</dfn> is any character
|
|
belonging to a Letter category (L*) that does not belong to a <a
|
|
href="#script-orientations">vertical script</a>.
|
|
|
|
<dt><dfn id=latin title="text-combine-horizontal:latin">latin</dfn>
|
|
|
|
<dd>Within the element, each sequence of Latin letters that has as many or
|
|
fewer characters than the integer given is treated as if it were in an
|
|
anonymous inline box with ‘<code class=css>text-combine-horizontal:
|
|
all</code>’. For this property, a <dfn id=latin-letter>Latin
|
|
letter</dfn> is any character belonging to a Letter category (L*) that
|
|
also belongs to the Latin script.
|
|
<p class=issue>This definition is would replace ‘<code
|
|
class=css>alpha</code>’ as a simplification.
|
|
|
|
<dt><dfn id=alphanumeric
|
|
title="text-combine-horizontal:alphanumeric">alphanumeric</dfn>
|
|
|
|
<dd>Within the element, each sequence of consecutive horizontal digits
|
|
and/or letters that has as many or fewer characters than the integer
|
|
given is treated as if it were in an anonymous inline box with
|
|
‘<code class=css>text-combine-horizontal: all</code>’.
|
|
</dl>
|
|
|
|
<p class=issue>All values except ‘<code class=css>all</code>’
|
|
and ‘<code class=css>none</code>’ are marked at-risk. Which
|
|
ones should we take to CR?
|
|
|
|
<p>When combining text as for ‘<code
|
|
class=css>text-combine-horizontal: all</code>’, the glyphs of the
|
|
combined text are stacked horizontally (without line breaks,
|
|
letter-spacing, etc., but using the specified font settings), similar to
|
|
the contents of an inline-box with a horizontal writing mode and a
|
|
line-height of 1em. The effective size of the composition is assumed to be
|
|
1em square; anything outside the square is not measured for layout
|
|
purposes. The UA should center the glyphs horizontally and vertically
|
|
within the measured 1em square. The baseline of the resulting composition
|
|
chosen such that the square is centered between the text-over and
|
|
text-under baselines of its parent inline box prior to any baseline
|
|
alignment shift. For text layout purposes, e.g. bidi ordering,
|
|
line-breaking, emphasis marks, text-decoration, etc. the resulting
|
|
composition is treated as a single glyph representing the Object
|
|
Replacement Character U+FFFC.
|
|
|
|
<p>In some fonts, the ideographic glyphs are given a compressed design such
|
|
that they are 1em wide but shorter than 1em tall. To accommodate such
|
|
fonts, the UA may vertically scale the contents of the composition to
|
|
match the advance height of 水 U+6C34.
|
|
<!-- 水 U+6C34 was chosen because it is a very basic character common to
|
|
all Han-based scripts, so would have to appear in any usable ideographic
|
|
font; and its shape is very full in both dimensions, so it would be
|
|
unlikely to be shortened in a proportional font -->
|
|
|
|
|
|
<p>Any CSS fullwidth transformations (‘<code
|
|
class=css>text-transform: full-width</code>’ <a href="#CSS3TEXT"
|
|
rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> or ‘<code
|
|
class=css>font-variant-east-asian-width: full-width</code>’ <a
|
|
href="#CSS3FONT" rel=biblioentry>[CSS3FONT]<!--{{CSS3FONT}}--></a>) are
|
|
turned off for combined text of more than one character.
|
|
|
|
<div class=example>
|
|
<p>In East Asian documents, the ‘<a
|
|
href="#text-combine-horizontal0"><code
|
|
class=css>text-combine-horizontal</code></a>’ effect is often used
|
|
to display Latin-based strings such as components of a date or letters of
|
|
an initialism, always in a horizontal writing mode regardless of the
|
|
writing mode of the line:</p>
|
|
|
|
<div class=figure>
|
|
<p><img alt="Diagram of tate-chu-yoko, showing the two digits of a date
|
|
set halfwidth side-by-side in a vertical column of text" class=example
|
|
src=tate-chu-yoko.png>
|
|
|
|
<p class=caption>Example of horizontal-in-vertical <i
|
|
lang=ja>tate-chu-yoko</i></p>
|
|
</div>
|
|
|
|
<p>The figure is the result of the rules</p>
|
|
|
|
<pre>
|
|
<!-- -->date { text-combine-horizontal: digits 2; }
|
|
</pre>
|
|
|
|
<p>and the following markup:</p>
|
|
|
|
<pre>
|
|
<!-- --><date>平成20年4月16日に</date>
|
|
</pre>
|
|
|
|
<p>In Japanese, this effect is known as <i lang=ja>tate-chu-yoko</i>.
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>The following example shows that applying ‘<code
|
|
class=css>text-combine-horizontal: digits 2</code>’ to an entire
|
|
document, rather than to a segment with a known type of numeric content,
|
|
can have unintended consequences:
|
|
|
|
<pre><p>あれは10,000円ですよ！</p></pre>
|
|
|
|
<div class=figure>
|
|
<p><img 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."
|
|
class=example src=bad-tate-chu-yoko.png>
|
|
|
|
<p class=caption>Example of mis-applied <i lang=ja>tate-chu-yoko</i></p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 id=text-combine-mode><span class=secno>9.2. </span>
|
|
Horizonal-in-Vertical Glyph Scaling: the ‘<a
|
|
href="#text-combine-mode0"><code
|
|
class=property>text-combine-mode</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-combine-mode0>text-combine-mode</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>auto | compress | [ no-compress || use-glyphs ]
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>non-replaced inline elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property controls how multiple characters are combined into the
|
|
space of a single character when specified to do so via ‘<a
|
|
href="#text-combine-horizontal0"><code
|
|
class=property>text-combine-horizontal</code></a>’. Values have the
|
|
following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=auto title="text-combine-mode:auto">auto</dfn>
|
|
|
|
<dd>If the contents are wider than 1em, the UA must attempt to fit the
|
|
contents within 1em, but may use any method to do so.
|
|
|
|
<dt><dfn id=compress title="text-combine-mode:compress">compress</dfn>
|
|
|
|
<dd>Compress the composition (horizontally) as a whole until it fits
|
|
within 1em. Do not substitute alternate-width glyphs.
|
|
|
|
<dt><dfn id=use-glyphs
|
|
title="text-combine-mode:use-glyphs">use-glyphs</dfn>
|
|
|
|
<dd>Attempt to substitute narrower glyphs as necessary to make the
|
|
composition fit within 1em:
|
|
<ul>
|
|
<li>a two-character composition uses 1/2-em or proportional glyphs
|
|
|
|
<li>a three-character composition uses 1/3-em glyphs (if the font
|
|
supports this feature, else fall back to 1/2-em or proportional glyphs)
|
|
|
|
|
|
<li>etc.
|
|
</ul>
|
|
|
|
<p>Since even fonts that have fractional-width glyphs available do not
|
|
have such glyphs for all characters, the UA must ensure the expected
|
|
advance width for ‘<code class=css>use-glyphs</code>’ by
|
|
either compressing or padding (equally on both sides) each glyph
|
|
individually if it does not match the required advance width. (This step
|
|
does not apply if ‘<code class=css>no-compress</code>’ is
|
|
specified.)
|
|
|
|
<dt><dfn id=no-compress
|
|
title="text-combine-mode:no-compress">no-compress</dfn>
|
|
|
|
<dd>Do not compress the composition or perform any glyph substitution in
|
|
order to make the composition fit within 1em. When combined with
|
|
‘<code class=css>use-glyphs</code>’, however, this indicates
|
|
to perform glyph substitution if possible per ‘<code
|
|
class=css>use-glyphs</code>’ but not to compress the glyphs if they
|
|
do not fit the size requirements. This value may cause the glyphs to
|
|
overflow the line significantly.
|
|
</dl>
|
|
|
|
<h2 class=no-num id=changes>Changes</h2>
|
|
|
|
<h3 class=no-num id=recent-changes> Changes from the <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/">May 2011
|
|
CSS Writing Modes Module Level 3 <abbr title="Working Draft">WD</abbr></a></h3>
|
|
|
|
<p>Major changes include:
|
|
|
|
<ul>
|
|
<li>Redefined which side of a bidi-broken box's border is drawn.
|
|
|
|
<li>Altered the allowed combinations of ‘<a
|
|
href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>’
|
|
values and defined ‘<a href="#plaintext"><code
|
|
class=css>plaintext</code></a>’ to use heuristics for inline
|
|
elements as well.
|
|
|
|
<li>Renamed ‘<code class=css>vertical-right</code>’ value of
|
|
‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ to ‘<a
|
|
href="#upright-right"><code class=css>upright-right</code></a>’.
|
|
|
|
<li>Renamed ‘<code class=css>rotate</code>’ values of
|
|
‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ to ‘<a
|
|
href="#sideways"><code class=property>sideways</code></a>’.
|
|
|
|
<li>Renamed ‘<code class=css>auto</code>’ value of ‘<a
|
|
href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ to ‘<a
|
|
href="#use-glyph-orientation"><code
|
|
class=css>use-glyph-orientation</code></a>’ and marked it at-risk.
|
|
|
|
<li>Tweaked rules for vertical typesetting to remove references to
|
|
<code>vrt2</code> feature, fix various errors and omissions in <a
|
|
href="#vertical-typesetting-details">synthesis rules</a>, etc.
|
|
|
|
<li>Renamed ‘<code class=property>text-combine</code>’
|
|
property to ‘<a href="#text-combine-horizontal0"><code
|
|
class=property>text-combine-horizontal</code></a>’ and added
|
|
ability to auto-combine by character classes.
|
|
|
|
<li>Added ‘<a href="#text-combine-mode0"><code
|
|
class=property>text-combine-mode</code></a>’ property to control
|
|
scaling method used to compose horizontal-in-vertical text.
|
|
|
|
<li>Added appendix on <a href="#character-properties">Characters and
|
|
Properties</a>.
|
|
</ul>
|
|
|
|
<h2 id=conformance><span class=secno>10. </span> Conformance</h2>
|
|
|
|
<h3 id=conventions><span class=secno>10.1. </span> Document Conventions</h3>
|
|
|
|
<p>Conformance requirements are expressed with a combination of descriptive
|
|
assertions and RFC 2119 terminology. The key words “MUST”, “MUST
|
|
NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
|
|
“SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
|
|
normative parts of this document are to be interpreted as described in RFC
|
|
2119. However, for readability, these words do not appear in all uppercase
|
|
letters in this specification.
|
|
|
|
<p>All of the text of this specification is normative except sections
|
|
explicitly marked as non-normative, examples, and notes. <a
|
|
href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
|
|
|
|
<p>Examples in this specification are introduced with the words “for
|
|
example” or are set apart from the normative text with
|
|
<code>class="example"</code>, like this:
|
|
|
|
<div class=example>
|
|
<p>This is an example of an informative example.</p>
|
|
</div>
|
|
|
|
<p>Informative notes begin with the word “Note” and are set apart from
|
|
the normative text with <code>class="note"</code>, like this:
|
|
|
|
<p class=note>Note, this is an informative note.
|
|
|
|
<h3 id=conformance-classes><span class=secno>10.2. </span> Conformance
|
|
Classes</h3>
|
|
|
|
<p>Conformance to CSS Writing Modes Level 3 is defined for three
|
|
conformance classes:
|
|
|
|
<dl>
|
|
<dt><dfn id=style-sheet title="style sheet!!as conformance class">style
|
|
sheet</dfn>
|
|
|
|
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
|
|
style sheet</a>.
|
|
|
|
<dt><dfn id=renderer>renderer</dfn>
|
|
|
|
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
|
|
that interprets the semantics of a style sheet and renders documents that
|
|
use them.
|
|
|
|
<dt><dfn id=authoring-tool>authoring tool</dfn>
|
|
|
|
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
|
|
that writes a style sheet.
|
|
</dl>
|
|
|
|
<p>A style sheet is conformant to CSS Writing Modes Level 3 if all of its
|
|
declarations that use properties defined in this module have values that
|
|
are valid according to the generic CSS grammar and the individual grammars
|
|
of each property as given in this module.
|
|
|
|
<p>A renderer is conformant to CSS Writing Modes Level 3 if, in addition to
|
|
interpreting the style sheet as defined by the appropriate specifications,
|
|
it supports all the features defined by CSS Writing Modes Level 3 by
|
|
parsing them correctly and rendering the document accordingly. However,
|
|
the inability of a UA to correctly render a document due to limitations of
|
|
the device does not make the UA non-conformant. (For example, a UA is not
|
|
required to render color on a monochrome monitor.)
|
|
|
|
<p>An authoring tool is conformant to CSS Writing Modes Level 3 if it
|
|
writes style sheets that are syntactically correct according to the
|
|
generic CSS grammar and the individual grammars of each feature in this
|
|
module, and meet all other conformance requirements of style sheets as
|
|
described in this module.
|
|
|
|
<h3 id=partial><span class=secno>10.3. </span> Partial Implementations</h3>
|
|
|
|
<p>So that authors can exploit the forward-compatible parsing rules to
|
|
assign fallback values, CSS renderers <strong>must</strong> treat as
|
|
invalid (and <a
|
|
href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
|
|
appropriate</a>) any at-rules, properties, property values, keywords, and
|
|
other syntactic constructs for which they have no usable level of support.
|
|
In particular, user agents <strong>must not</strong> selectively ignore
|
|
unsupported component values and honor supported values in a single
|
|
multi-value property declaration: if any value is considered invalid (as
|
|
unsupported values must be), CSS requires that the entire declaration be
|
|
ignored.
|
|
|
|
<h3 id=experimental><span class=secno>10.4. </span> Experimental
|
|
Implementations</h3>
|
|
|
|
<p>To avoid clashes with future CSS features, the CSS2.1 specification
|
|
reserves a <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
|
|
syntax</a> for proprietary and experimental extensions to CSS.
|
|
|
|
<p>Prior to a specification reaching the Candidate Recommendation stage in
|
|
the W3C process, all implementations of a CSS feature are considered
|
|
experimental. The CSS Working Group recommends that implementations use a
|
|
vendor-prefixed syntax for such features, including those in W3C Working
|
|
Drafts. This avoids incompatibilities with future changes in the draft.
|
|
|
|
<h3 id=testing><span class=secno>10.5. </span>Non-Experimental
|
|
Implementations</h3>
|
|
|
|
<p>Once a specification reaches the Candidate Recommendation stage,
|
|
non-experimental implementations are possible, and implementors should
|
|
release an unprefixed implementation of any CR-level feature they can
|
|
demonstrate to be correctly implemented according to spec.
|
|
|
|
<p>To establish and maintain the interoperability of CSS across
|
|
implementations, the CSS Working Group requests that non-experimental CSS
|
|
renderers submit an implementation report (and, if necessary, the
|
|
testcases used for that implementation report) to the W3C before releasing
|
|
an unprefixed implementation of any CSS features. Testcases submitted to
|
|
W3C are subject to review and correction by the CSS Working Group.
|
|
|
|
<p>Further information on submitting testcases and implementation reports
|
|
can be found from on the CSS Working Group's website at <a
|
|
href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
|
|
Questions should be directed to the <a
|
|
href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
|
|
mailing list.
|
|
|
|
<h3 id=cr-exit-criteria><span class=secno>10.6. </span> CR Exit Criteria</h3>
|
|
|
|
<p> For this specification to be advanced to Proposed Recommendation, there
|
|
must be at least two independent, interoperable implementations of each
|
|
feature. Each feature may be implemented by a different set of products,
|
|
there is no requirement that all features be implemented by a single
|
|
product. For the purposes of this criterion, we define the following
|
|
terms:
|
|
|
|
<dl>
|
|
<dt>independent
|
|
|
|
<dd>each implementation must be developed by a different party and cannot
|
|
share, reuse, or derive from code used by another qualifying
|
|
implementation. Sections of code that have no bearing on the
|
|
implementation of this specification are exempt from this requirement.
|
|
|
|
<dt>interoperable
|
|
|
|
<dd>passing the respective test case(s) in the official CSS test suite,
|
|
or, if the implementation is not a Web browser, an equivalent test. Every
|
|
relevant test in the test suite should have an equivalent test created if
|
|
such a user agent (UA) is to be used to claim interoperability. In
|
|
addition if such a UA is to be used to claim interoperability, then there
|
|
must one or more additional UAs which can also pass those equivalent
|
|
tests in the same way for the purpose of interoperability. The equivalent
|
|
tests must be made publicly available for the purposes of peer review.
|
|
|
|
<dt>implementation
|
|
|
|
<dd>a user agent which:
|
|
<ol class=inline>
|
|
<li>implements the specification.
|
|
|
|
<li>is available to the general public. The implementation may be a
|
|
shipping product or other publicly available version (i.e., beta
|
|
version, preview release, or “nightly build”). Non-shipping product
|
|
releases must have implemented the feature(s) for a period of at least
|
|
one month in order to demonstrate stability.
|
|
|
|
<li>is not experimental (i.e., a version specifically designed to pass
|
|
the test suite and is not intended for normal usage going forward).
|
|
</ol>
|
|
</dl>
|
|
|
|
<p>The specification will remain Candidate Recommendation for at least six
|
|
months.
|
|
|
|
<h2 class=no-num id=acknowledgements> Acknowledgements</h2>
|
|
|
|
<p>John Daggett, Martin Heijdra, Yasuo Kida, Tatsuo Kobayashi, Toshi
|
|
Kobayashi, Ken Lunde, Nat McCully, Paul Nelson, Kenzou Onozawa, Michel
|
|
Suignard, Taro Yamamoto, Steve Zilles
|
|
|
|
<h2 class=no-num id=character-properties>Appendix A. Characters and
|
|
Properties</h2>
|
|
|
|
<p>Unicode defines three codepoint-level properties that are referenced in
|
|
CSS Writing Modes:
|
|
|
|
<dl>
|
|
<dt><a href="http://www.unicode.org/reports/tr11/#Definitions">East Asian
|
|
width</a>
|
|
|
|
<dd>Defined in <a href="#UAX11"
|
|
rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a> and given as the
|
|
East_Asian_Width property in the Unicode Character Database <a
|
|
href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>.
|
|
|
|
<dt><a
|
|
href="http://www.unicode.org/reports/tr44/#General_Category_Values">General
|
|
Category</a>
|
|
|
|
<dd>Defined in <a href="#UAX44"
|
|
rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a> and given as the
|
|
General_Category property in the Unicode Character Database <a
|
|
href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>.
|
|
|
|
<dt><a href="http://www.unicode.org/reports/tr24/#Values">Script
|
|
property</a>
|
|
|
|
<dd>Defined in <a href="#UAX24"
|
|
rel=biblioentry>[UAX24]<!--{{!UAX24}}--></a> and given as the Script
|
|
property in the Unicode Character Database <a href="#UAX44"
|
|
rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>. (UAs should include any
|
|
ScriptExtensions.txt assignments in this mapping.)
|
|
</dl>
|
|
|
|
<p id=grapheme-cluster>In several sections (as noted), the term <dfn
|
|
id=character>character</dfn> is defined as <em>extended grapheme
|
|
cluster</em> per <a href="#UAX29"
|
|
rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a>. It is roughly equivalent to
|
|
what a language user considers to be a character or a basic unit of the
|
|
script (which might not be a single Unicode codepoint). The UA may further
|
|
tailor this definition as allowed by Unicode.
|
|
|
|
<p>Unicode defines properties for characters, but for ‘<a
|
|
href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ and <a
|
|
href="#vertical-typesetting-details">Vertical Typesetting Synthesis</a>,
|
|
it is necessary to determine the properties of a grapheme cluster. For the
|
|
purposes of CSS Writing Modes, the properties of a grapheme cluster are
|
|
given by its base character—except in two cases:
|
|
|
|
<ul>
|
|
<li>Grapheme clusters formed with an Enclosing Mark (Me) of the Common
|
|
script are considered to be Other Symbols (So) in the Common script. They
|
|
are assumed to have the same Unicode properties as the Replacement
|
|
Character U+FFFD.
|
|
|
|
<li>Grapheme clusters formed with a Space Separator (Zs) as the base are
|
|
considered to be Modifier Symbols (Sk). They are assumed to have the same
|
|
East Asian Width property as the base, but take their other properties
|
|
from the first combining character in the sequence.
|
|
</ul>
|
|
|
|
<h2 class=no-num id=script-orientations>Appendix B: Bi-orientational
|
|
Transformations</h2>
|
|
|
|
<p><em>This section is normative.</em>
|
|
|
|
<p>This appendix gives the orientational properties of scripts in Unicode
|
|
6.0 <a href="#UNICODE" rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>.
|
|
Any script not listed explicitly is assumed to be <i>horizontal-only</i>.
|
|
The script classification of Unicode characters is given by <a
|
|
href="#UAX24" rel=biblioentry>[UAX24]<!--{{!UAX24}}--></a>.
|
|
|
|
<table class=data>
|
|
<caption>Vertical Scripts and their Bi-orientational Transform</caption>
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>Code
|
|
|
|
<th>Name
|
|
|
|
<th>Transform
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>Bopo
|
|
|
|
<td>Bopomofo
|
|
|
|
<td>translate
|
|
|
|
<tr>
|
|
<td>Egyp
|
|
|
|
<td>Egyptian Hieroglyphs
|
|
|
|
<td>translate
|
|
|
|
<tr>
|
|
<td>Hira
|
|
|
|
<td>Hiragana
|
|
|
|
<td>translate
|
|
|
|
<tr>
|
|
<td>Kana
|
|
|
|
<td>Katakana
|
|
|
|
<td>translate
|
|
|
|
<tr>
|
|
<td>Hani
|
|
|
|
<td>Han
|
|
|
|
<td>translate
|
|
|
|
<tr>
|
|
<td>Hang
|
|
|
|
<td>Hangul
|
|
|
|
<td>translate
|
|
|
|
<tr>
|
|
<td>Mong
|
|
|
|
<td>Mongolian
|
|
|
|
<td>rotate
|
|
|
|
<tr>
|
|
<td>Phag
|
|
|
|
<td>Phags Pa
|
|
|
|
<td>rotate
|
|
|
|
<tr>
|
|
<td>Yiii
|
|
|
|
<td>Yi
|
|
|
|
<td>translate
|
|
</table>
|
|
|
|
<p><strong>Exceptions:</strong> For the purposes of this specification, all
|
|
fullwidth (F) and wide (W) characters are treated as belonging to a
|
|
vertical script with a translate bi-orientational transform. All halfwidth
|
|
(H) characters are treated as belonging to a vertical script with a rotate
|
|
bi-orientational transform. <a href="#UAX11"
|
|
rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a> Neutral (N), narrow (Na) and
|
|
ambiguous (A) Letters (L*) belonging to the Common script are treated as
|
|
belonging to a horizontal-only script.
|
|
|
|
<p class=note>Ogham is also a rotating bi-orientational script, but because
|
|
it is a bottom-to-top script, for the purposes of this specification it is
|
|
treated as left-to-right horizontal. A future version of CSS may define
|
|
proper handling of bottom-to-top scripts. Authors can work around this
|
|
lack of support with the ‘<a href="#sideways-left"><code
|
|
class=css>sideways-left</code></a>’ value of ‘<a
|
|
href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’.
|
|
|
|
<h2 class=no-num id=vertical-typesetting-details>Appendix C: Vertical
|
|
Typesetting Synthesis</h2>
|
|
|
|
<p>This section defines an algorithm for automatic typesetting of vertical
|
|
text. For readability, the term <a href="#character"><i>character</i></a>
|
|
is used in place of <em>extended grapheme cluster</em> in this section.
|
|
See <a href="#character-properties">Characters and Properties</a> for
|
|
further details.
|
|
|
|
<p class=issue>This section needs careful review. Please send feedback and
|
|
suggestions for improvement, particularly for the <a
|
|
href="http://unicode.org/cldr/utility/list-unicodeset.jsp?a=\p{Block%3DGeneral+Punctuation}%26[%3AGeneral_category%3DPo%3A]%0D%0A&g=">U+2016–U+205F</a>
|
|
range.
|
|
|
|
<p>When ‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ is either ‘<a
|
|
href="#upright-right"><code class=css>upright-right</code></a>’ or
|
|
‘<a href="#upright"><code class=css>upright</code></a>’, the
|
|
following settings are recommended:
|
|
|
|
<ol>
|
|
<li>Set any spaces (Zs), connectors (Pc), and bracketing punctuation (Ps,
|
|
Pe, Pi, Pf) either upright using vertical font settings if available or
|
|
sideways if they are not.
|
|
<p class=note>Thus a THREE-PER-EM SPACE (U+2004) can be expected to
|
|
provide a 1/3-em advance in the inline dimension, and brackets can be
|
|
expected to encase their contents.</p>
|
|
|
|
<li>Set East Asian fullwidth (F) and wide (W) characters upright (using
|
|
vertical font settings if available).
|
|
|
|
<li>Set any dashes (Pd) either upright using vertical font settings if
|
|
available or sideways if they are not.
|
|
<!-- fullwidth hyphen-minus need to be upright -->
|
|
|
|
<li>Set East Asian halfwidth (H) characters sideways (or upright with
|
|
vertical font settings if possible).
|
|
|
|
<li>Set any other characters that are assigned to a script (i.e. do not
|
|
belong to the Common, Inherited, or Unknown scripts) as required by
|
|
‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ and <a
|
|
href="#script-orientations">Appendix B</a>.
|
|
</ol>
|
|
|
|
<p>When ‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ is ‘<a
|
|
href="#upright-right"><code class=css>upright-right</code></a>’, the
|
|
following settings are recommended for characters not otherwise-specified
|
|
above:
|
|
|
|
<ol>
|
|
<li>Set the following characters using vertical font settings if
|
|
available, otherwise set them sideways:
|
|
<ul>
|
|
<li>Other Punctuation (Po) with an East Asian Width width of ambiguous
|
|
(A).
|
|
|
|
<li><abbr title="U+00B2, U+00B3, U+00B9, U+20070,
|
|
U+2074–U+2079">Superscripts</abbr>, <abbr
|
|
title="U+2080–U+2089">subscripts</abbr>, and non-Indic <abbr
|
|
title="U+00BC–U+00BE, U+2150–U+215F, U+2189">fractions</abbr> from
|
|
the Other Number (No) category.
|
|
|
|
<li>Private Use characters (Co).
|
|
</ul>
|
|
|
|
<li>Set the following characters sideways (i.e. rotated, using horizontal
|
|
font settings).
|
|
<ul>
|
|
<li>Currency Symbols (Sc), Math Symbols (Sm), and Modifier Symbols (Sk)
|
|
|
|
<li><abbr title="U+10107–U+10133">Aegean numbers</abbr> and <abbr
|
|
title="U+A830–U+A835">North Indic fractions</abbr> from the Other
|
|
Number (No) category.
|
|
|
|
<li>All characters from the <abbr title="U+2500–U+257F">Box
|
|
Drawing</abbr> and <abbr title="U+2580–U+259F">Block Elements</abbr>
|
|
blocks
|
|
|
|
<li>All directional arrows: the <abbr
|
|
title="U+2190–U+21FF">Arrows</abbr> block, the <abbr
|
|
title="U+261A–U+261F">Pointing hand symbols</abbr> from the
|
|
Miscellaneous Symbols block, any <abbr title="U+2B00–U+2B11,
|
|
U+2B45–U+2B46">arrow</abbr> from the Miscellaneous Symbols and Arrows
|
|
block, any <abbr title="U+2794–U+27BE">Dingbat arrows</abbr> from the
|
|
Dingbats block
|
|
|
|
<li>Other Symbols (So) from the Latin-1 Supplement and Letterlike
|
|
Symbols blocks.
|
|
|
|
<li>Other Symbols (So) from the Aegean Numbers, Ancient Symbols, Common
|
|
Indic Number Forms blocks
|
|
</ul>
|
|
|
|
<li>Set the following characters upright (i.e. translated, using vertical
|
|
font settings if available):
|
|
<ul>
|
|
<li>All Other Symbols (So) characters not otherwise specified above.
|
|
|
|
<li>All Other Numbers (No) characters not otherwise specified above.
|
|
</ul>
|
|
|
|
<li>Set all other characters sideways (i.e. rotated, using horizontal font
|
|
settings).
|
|
</ol>
|
|
|
|
<p>When ‘<a href="#text-orientation0"><code
|
|
class=property>text-orientation</code></a>’ is ‘<a
|
|
href="#upright"><code class=css>upright</code></a>’, set all
|
|
characters upright (using vertical font settings if available) unless
|
|
otherwise specified above.
|
|
|
|
<p class=note>In OpenType, vertical font settings are provided by the
|
|
<code>vhea</code>, <code>vmtx</code>, and <code>VORG</code> tables, as
|
|
well as the <code>vert</code> and <code>vrt2</code> GSUB features. If any
|
|
of these are present, the font is considered to have vertical font
|
|
settings available.
|
|
|
|
<p class=issue>It is a Unicode error that ScriptExtensions.txt does not
|
|
include the Aegean and Common Indic characters listed above as exceptions;
|
|
they shouldn't need special treatment once this is fixed.
|
|
|
|
<h2 class=no-num id=intrinsic-sizing>Appendix D: Intrinsic Dimensions</h2>
|
|
|
|
<p><em>This section is normative.</em>
|
|
|
|
<p>CSS layout has several different concepts of automatic sizing that are
|
|
used in various layout calculations. This section defines some more
|
|
precise terminology to help connect the layout behaviors of this spec to
|
|
the calculations used in other modules, and some new keywords for the
|
|
width and height properties to allow authors to assign elements the
|
|
dimensions resulting from these size calculations.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Properties:
|
|
|
|
<td>‘<code class=property>width</code>’, ‘<code
|
|
class=property>min-width</code>’, ‘<code
|
|
class=property>max-width</code>’, ‘<code
|
|
class=property>height</code>’, ‘<code
|
|
class=property>min-height</code>’, ‘<code
|
|
class=property>max-height</code>’
|
|
|
|
<tr>
|
|
<th>New Values:
|
|
|
|
<td>‘<a href="#min-content"><code
|
|
class=css>min-content</code></a>’ | ‘<a
|
|
href="#max-content"><code class=css>max-content</code></a>’ |
|
|
‘<a href="#fill-available"><code
|
|
class=css>fill-available</code></a>’ | ‘<a
|
|
href="#fit-content"><code class=css>fit-content</code></a>’
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>as defined in <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>as defined in <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>as defined in <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>as defined in <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>as defined in <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value if keyword specified, else as defined in <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
</table>
|
|
|
|
<p>There are four types of automatically-determined sizes in CSS (which are
|
|
represented in the width and height properties by the keywords defined
|
|
above):
|
|
<!-- XXX Make these anchors dated once CSS2.1 hits REC, since we might
|
|
decide to fix these gross editorial inconsistencies at some point in
|
|
the errata. -->
|
|
|
|
|
|
<dl>
|
|
<dt><dfn id=min-content>min-content</dfn>
|
|
|
|
<dd>Called the <i>preferred minimum width</i> in <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
|
|
and the <i>minimum content width</i> in <a
|
|
href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§5.2.2</a>,
|
|
the <dfn id=min-content-measure>min-content measure</dfn> is defined
|
|
roughly as the narrowest measure a box could take while fitting around
|
|
its contents if <em>all</em> line break opportunities within the box were
|
|
taken.
|
|
|
|
<dt><dfn id=max-content>max-content</dfn>
|
|
|
|
<dd>Called the <i>preferred width</i> in <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
|
|
and the <i>maximum cell width</i> in <a
|
|
href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§5.2.2</a>,
|
|
the <dfn id=max-content-measure>max-content measure</dfn> is defined
|
|
roughly as the narrowest measure a box could take while fitting around
|
|
its contents if <em>none</em> of the optional line break opportunities
|
|
within the box were taken.
|
|
|
|
<dt><dfn id=fill-available>fill-available</dfn>
|
|
|
|
<dd>Called the <i>available width</i> in <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
|
|
and computed by the rules in <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>,
|
|
the <dfn id=fill-available-measure>fill-available measure</dfn> is
|
|
calculated by subtracting out the element's margins, borders, and padding
|
|
from the <a href="#available-measure"><i>available measure</i></a> and
|
|
flooring the result at zero. If the available measure is infinite, then a
|
|
<dfn id=fallback-measure>fallback measure</dfn> is used in place of the
|
|
<a href="#available-measure"><i>available measure</i></a> in this
|
|
calculation. (In the case of orthogonal flows, this is the measure of the
|
|
initial containing block.) The <dfn
|
|
id=fill-available-extent>fill-available extent</dfn> is similarly
|
|
calculated by using the corresponding values from the block dimension.
|
|
|
|
<dt><dfn id=fit-content>fit-content</dfn>
|
|
|
|
<dd>Called the <i>shrink-to-fit</i> width in <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>,
|
|
and <a href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS
|
|
Multi-column Layout § 3.4</a>, the <dfn
|
|
id=fit-content-measure>fit-content measure</dfn> is defined as
|
|
<code>max(<a href="#min-content"><i>min-content</i></a>, min(<a
|
|
href="#max-content"><i>max-content</i></a>, <a
|
|
href="#fill-available"><i>fill-available</i></a>))</code> if the
|
|
available measure is finite, and as the <a
|
|
href="#max-content"><i>max-content</i></a> measure otherwise. The <dfn
|
|
id=fit-content-extent>fit-content extent</dfn> is calculated from the
|
|
same expression applied to the block dimension.
|
|
</dl>
|
|
|
|
<p>For the layout models in CSS2.1, both the <dfn
|
|
id=min-content-extent>min-content extent</dfn> and <dfn
|
|
id=max-content-extent>max-content extent</dfn> of non-replaced elements
|
|
are defined as the content extent as defined (for horizontal writing
|
|
modes) in <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1§10.6.3</a>
|
|
and <a
|
|
href="http://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1§17.5.3</a>
|
|
for elements with ‘<code class=css>height: auto</code>’.
|
|
|
|
<p>For replaced elements, the <a href="#min-content"><i>min-content</i></a>
|
|
and <a href="#max-content"><i>max-content</i></a> sizes are the same and
|
|
correspond used size of the replaced element according to the ‘<code
|
|
class=css>auto</code>’ width and height calculations.
|
|
|
|
<h3 class=no-num id=multicol-intrinsic> Intrinsic Sizes in Multi-column
|
|
Layout</h3>
|
|
|
|
<p>The <a href="#min-content"><i>min-content</i></a> and <a
|
|
href="#max-content"><i>max-content</i></a> sizes of a multi-column element
|
|
are undefined per <a href="#CSS3COL"
|
|
rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>. A future specification
|
|
may define them. <!-- Sketchbook area. See
|
|
http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html
|
|
http://lists.w3.org/Archives/Public/www-style/2011May/0468.html
|
|
|
|
<h4 id="multicol-intrinsic-measures">
|
|
Intrinsic Sizes for Multi-column Elements</h4>
|
|
|
|
<p class="issue">This section is under discussion and may be removed</p>
|
|
|
|
<dl>
|
|
<dt>min-content</dt>
|
|
<dd>The <i>min-content</i> measure of the multi-column element is
|
|
the <i>min-content</i> measure of the multi-column element's
|
|
contents.
|
|
<dt>max-content</dt>
|
|
</dl>
|
|
|
|
<p>For multi-column elements laid out with infinite available measure (see
|
|
<a href="#orthogonal-multicol">Multi-column Layout in Orthogonal Flows</a>),
|
|
the <i>min-content</i> extent is the extent that would result
|
|
from taking every permissible pagination break as a column break, and the
|
|
<i>max-content</i> extent is the extent that would result from taking
|
|
only the forced breaks. For all other multi-column elements it is, like
|
|
CSS2.1 block-level boxes, the extent that would be calculated for an
|
|
''auto'' extent per [[CSS3MULTICOL]].
|
|
|
|
NOTES FROM ROSSEN:
|
|
min-content measure is min(column-width, min-content)
|
|
max-content measure is
|
|
1. Pass w/ colspans displ: none;
|
|
Get width
|
|
2. Pass with colspans only in width
|
|
Get remaining height
|
|
3. Pass w/ spans again using remaining height
|
|
Get width
|
|
4. Layout in width as final
|
|
Will lay out perfectly without colspans; will have some slack but no
|
|
overflow when colspans present.
|
|
|
|
<h4 id="multicol-intrinsic-columns">
|
|
Intrinsic Sizes for Columns</h4>
|
|
-->
|
|
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Property:
|
|
|
|
<td>‘<code class=property>column-width</code>’
|
|
|
|
<tr>
|
|
<th>New Values:
|
|
|
|
<td>‘<a href="#min-content"><code
|
|
class=css>min-content</code></a>’ | ‘<a
|
|
href="#max-content"><code class=css>max-content</code></a>’ |
|
|
‘<a href="#fill-available"><code
|
|
class=css>fill-available</code></a>’ | ‘<a
|
|
href="#fit-content"><code class=css>fit-content</code></a>’
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>as defined in <a href="#CSS3COL"
|
|
rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>as defined in <a href="#CSS3COL"
|
|
rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>as defined in <a href="#CSS3COL"
|
|
rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>as defined in <a href="#CSS3COL"
|
|
rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>as defined in <a href="#CSS3COL"
|
|
rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value if keyword specified, else as defined in <a
|
|
href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
|
|
</table>
|
|
|
|
<p>When used as values for <a
|
|
href="http://www.w3.org/TR/css3-multicol/#cw">‘<code
|
|
class=property>column-width</code>’</a>, the new keywords specify
|
|
the optimal column width:
|
|
|
|
<dl>
|
|
<dt>‘<a href="#min-content"><code
|
|
class=css>min-content</code></a>’
|
|
|
|
<dd>Specifies the optimal column width as the <a
|
|
href="#min-content-measure"><i>min-content measure</i></a> of the
|
|
multi-column element's contents.
|
|
|
|
<dt>‘<a href="#max-content"><code
|
|
class=css>max-content</code></a>’
|
|
|
|
<dd>Specifies the optimal column width as the <a
|
|
href="#max-content-measure"><i>max-content measure</i></a> of the
|
|
multi-column element's contents.
|
|
|
|
<dt>‘<a href="#fill-available"><code
|
|
class=css>fill-available</code></a>’
|
|
|
|
<dd>Specifies the optimal column width as the <a
|
|
href="#fill-available-measure"><i>fill-available measure</i></a> of the
|
|
multi-column element.
|
|
|
|
<dt>‘<a href="#fit-content"><code
|
|
class=css>fit-content</code></a>’
|
|
|
|
<dd>Specifies the optimal column width as <code>max(<a
|
|
href="#min-content"><i>min-content</i></a>, min(<a
|
|
href="#max-content"><i>max-content</i></a>, <a
|
|
href="#fill-available"><i>fill-available</i></a>))</code>.
|
|
</dl>
|
|
|
|
<h2 class=no-num id=bidi-html> Appendix E: Bidi Rules for HTML</h2>
|
|
|
|
<p>The style sheet rules that would achieve the bidi behaviors specified in
|
|
<a href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a> for the
|
|
HTML Strict doctype are given below:
|
|
|
|
<pre>
|
|
/* HTML dir attribute creates an embedding */
|
|
*[dir="ltr"] { direction: ltr; unicode-bidi: embed; }
|
|
*[dir="rtl"] { direction: rtl; unicode-bidi: embed; }
|
|
|
|
/* BDO element creates an override */
|
|
bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; }
|
|
bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; }
|
|
|
|
/* HTML4.01:8.2.6 - preserve bidi behavior if 'display' is changed */
|
|
html, body,
|
|
div, address, blockquote, p,
|
|
ul, ol, li, dl, dt, dd,
|
|
fieldset, form,
|
|
h1, h2, h3, h4, h5, h6,
|
|
{ unicode-bidi: isolate; }
|
|
</pre>
|
|
|
|
<h2 class=no-num id=references> References</h2>
|
|
|
|
<h3 class=no-num id=normative-references> Normative references</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS21>[CSS21]
|
|
|
|
<dd>Bert Bos; et al. <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
|
|
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
|
|
2011. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3BG>[CSS3BG]
|
|
|
|
<dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
|
|
href="http://www.w3.org/TR/2011/CR-css3-background-20110215"><cite>CSS
|
|
Backgrounds and Borders Module Level 3.</cite></a> 15 February 2011. W3C
|
|
Candidate Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/CR-css3-background-20110215">http://www.w3.org/TR/2011/CR-css3-background-20110215</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3COL>[CSS3COL]
|
|
|
|
<dd>Håkon Wium Lie. <a
|
|
href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS
|
|
Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate
|
|
Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=RFC2119>[RFC2119]
|
|
|
|
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
|
|
words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
|
|
RFC 2119. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=SVG11>[SVG11]
|
|
|
|
<dd>Erik Dahlström; et al. <a
|
|
href="http://www.w3.org/TR/2011/PR-SVG11-20110609/"><cite>Scalable Vector
|
|
Graphics (SVG) 1.1 (Second Edition).</cite></a> 9 June 2011. W3C Proposed
|
|
Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/PR-SVG11-20110609/">http://www.w3.org/TR/2011/PR-SVG11-20110609/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UAX11>[UAX11]
|
|
|
|
<dd>Asmus Freytag. <a
|
|
href="http://www.unicode.org/unicode/reports/tr11/tr11-8.html"><cite>East
|
|
Asian Width.</cite></a> 23 March 2001. Unicode Standard Annex #11. URL:
|
|
<a
|
|
href="http://www.unicode.org/unicode/reports/tr11/tr11-8.html">http://www.unicode.org/unicode/reports/tr11/tr11-8.html</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UAX24>[UAX24]
|
|
|
|
<dd>Mark Davis; Ken Whistler. <a
|
|
href="http://www.unicode.org/reports/tr24/"><cite>Unicode Script
|
|
Property.</cite></a> 27 September 2010. Unicode Standard Annex #24. URL:
|
|
<a
|
|
href="http://www.unicode.org/reports/tr24/">http://www.unicode.org/reports/tr24/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UAX29>[UAX29]
|
|
|
|
<dd>Mark Davis. <a
|
|
href="http://www.unicode.org/reports/tr29/tr29-17.html"><cite>Unicode
|
|
Text Segmentation.</cite></a> 8 October 2010. Unicode Standard Annex #29.
|
|
URL: <a
|
|
href="http://www.unicode.org/reports/tr29/tr29-17.html">http://www.unicode.org/reports/tr29/tr29-17.html</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UAX44>[UAX44]
|
|
|
|
<dd>Mark Davis; Ken Whistler. <a
|
|
href="http://www.unicode.org/reports/tr44/tr44-6.html"><cite>Unicode
|
|
Character Database.</cite></a> 8 October 2010. Unicode Standard Annex
|
|
#44. URL: <a
|
|
href="http://www.unicode.org/reports/tr44/tr44-6.html">http://www.unicode.org/reports/tr44/tr44-6.html</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UNICODE>[UNICODE]
|
|
|
|
<dd>The Unicode Consortium. <a
|
|
href="http://www.unicode.org/unicode/standard/versions/enumeratedversions.html"><cite>The
|
|
Unicode Standard.</cite></a> 2003. Defined by: The Unicode Standard,
|
|
Version 4.0 (Boston, MA, Addison-Wesley, ISBN 0-321-18578-1), as updated
|
|
from time to time by the publication of new versions URL: <a
|
|
href="http://www.unicode.org/unicode/standard/versions/enumeratedversions.html">http://www.unicode.org/unicode/standard/versions/enumeratedversions.html</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class=no-num id=other-references> Other references</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS2>[CSS2]
|
|
|
|
<dd>Ian Jacobs; et al. <a
|
|
href="http://www.w3.org/TR/2008/REC-CSS2-20080411"><cite>Cascading Style
|
|
Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3COLOR>[CSS3COLOR]
|
|
|
|
<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
|
|
href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
|
|
Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3FONT>[CSS3FONT]
|
|
|
|
<dd>John Daggett. <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324"><cite>CSS Fonts
|
|
Module Level 3.</cite></a> 24 March 2011. W3C Working Draft. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324">http://www.w3.org/TR/2011/WD-css3-fonts-20110324</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3LIST>[CSS3LIST]
|
|
|
|
<dd>Tab Atkins Jr. <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-lists-20110524"><cite>CSS Lists
|
|
and Counters Module Level 3.</cite></a> 24 May 2011. W3C Working Draft.
|
|
(Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-lists-20110524">http://www.w3.org/TR/2011/WD-css3-lists-20110524</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3PAGE>[CSS3PAGE]
|
|
|
|
<dd>Håkon Wium Lie; Melinda Grant. <a
|
|
href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:
|
|
Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3TEXT>[CSS3TEXT]
|
|
|
|
<dd>Elika J. Etemad; Koji Ishii; Shinyu Murakami. <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-text-20110412/"><cite>CSS Text
|
|
Level 3.</cite></a> 12 April 2011. W3C Working Draft. (Work in progress.)
|
|
URL: <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-text-20110412/">http://www.w3.org/TR/2011/WD-css3-text-20110412/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=HTML401>[HTML401]
|
|
|
|
<dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
|
|
Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UTN22>[UTN22]
|
|
|
|
<dd>Elika J. Etemad. <a href="http://unicode.org/notes/tn22/"><cite>Robust
|
|
Vertical Text Layout.</cite></a> 25 April 2005. Unicode Technical Note
|
|
#22. URL: <a
|
|
href="http://unicode.org/notes/tn22/">http://unicode.org/notes/tn22/</a></dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
|
|
<h2 class=no-num id=property-index> Property Index</h2>
|
|
<!--begin-properties-->
|
|
|
|
<table class=proptable>
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th><a class=property href="#direction0">direction</a>
|
|
|
|
<td>ltr | rtl
|
|
|
|
<td>ltr
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><span class=property>‘caption-side’</span>
|
|
|
|
<td>‘before’ | ‘after’
|
|
|
|
<td>before
|
|
|
|
<td>same as CSS2.1
|
|
|
|
<td>same as CSS2.1
|
|
|
|
<td>same as CSS2.1
|
|
|
|
<td>same as CSS2.1
|
|
|
|
<tr>
|
|
<th><span class=property>‘column-width’</span>
|
|
|
|
<td>‘min-content’ | ‘max-content’ |
|
|
‘fill-available’ | ‘fit-content’
|
|
|
|
<td>as defined in [CSS3COL]
|
|
|
|
<td>as defined in [CSS3COL]
|
|
|
|
<td>as defined in [CSS3COL]
|
|
|
|
<td>as defined in [CSS3COL]
|
|
|
|
<td>as defined in [CSS3COL]
|
|
|
|
<tr>
|
|
<th><span class=property>‘width’</span>, <span
|
|
class=property>‘min-width’</span>, <span
|
|
class=property>‘max-width’</span>, <span
|
|
class=property>‘height’</span>, <span
|
|
class=property>‘min-height’</span>, <span
|
|
class=property>‘max-height’</span>
|
|
|
|
<td>‘min-content’ | ‘max-content’ |
|
|
‘fill-available’ | ‘fit-content’
|
|
|
|
<td>as defined in [CSS21]
|
|
|
|
<td>as defined in [CSS21]
|
|
|
|
<td>as defined in [CSS21]
|
|
|
|
<td>as defined in [CSS21]
|
|
|
|
<td>as defined in [CSS21]
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#text-combine-horizontal0">text-combine-horizontal</a>
|
|
|
|
<td>none | all | [ [digits <integer> | ascii-digits <integer> ] ||
|
|
[ alpha <integer> | latin <integer> ] || alphanumeric
|
|
<integer> ]
|
|
|
|
<td>none
|
|
|
|
<td>non-replaced inline elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-combine-mode0">text-combine-mode</a>
|
|
|
|
<td>auto | compress | [ no-compress || use-glyphs ]
|
|
|
|
<td>auto
|
|
|
|
<td>non-replaced inline elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-orientation0">text-orientation</a>
|
|
|
|
<td>upright-right | upright | sideways-right | sideways-left | sideways
|
|
| use-glyph-orientation
|
|
|
|
<td>upright-right
|
|
|
|
<td>all elements except table row groups, rows, column groups, and
|
|
columns
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#unicode-bidi0">unicode-bidi</a>
|
|
|
|
<td>normal | embed | [ isolate || bidi-override ] | plaintext
|
|
|
|
<td>normal
|
|
|
|
<td>all elements, but see prose
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#writing-mode1">writing-mode</a>
|
|
|
|
<td>horizontal-tb | vertical-rl | vertical-lr
|
|
|
|
<td>horizontal-tb
|
|
|
|
<td>All elements except table row groups, table column groups, table
|
|
rows, and table columns
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
</table>
|
|
<!--end-properties-->
|
|
<!-- Add alphabetic index? -->
|