8000 csswg-drafts/css-writing-modes-3/Overview.bs at 16a54c21c70e005f2d478c9bffc55f53b0a8ca4e · w3c/csswg-drafts · GitHub
Skip to content

Overview.bs

Latest commit

 

History

History
2599 lines (2245 loc) · 113 KB

Overview.bs

File metadata and controls

2599 lines (2245 loc) · 113 KB
<p>Since bidi reordering can split apart and reorder text
that is logically contiguous,
bidirectional text can cause an <a>inline box</a> containing such text
to be split and its fragments reordered within a line.
<!-- CSS2.1 8.6 -->
<p>For each line box, UAs must take the fragments of each inline box
and assign the margins, borders, and padding in visual order (not logical order).
The <a>start</a>-most fragment on the first line box in which the box appears
has the <a>start</a> edge's margin, border, and padding;
and the end-most fragment on the last line box in which the box appears
has the <a>end</a> edge's margin, border, and padding.
For example, in the ''horizontal-tb'' writing mode:
<ul>
<li>When the parent's 'direction' property is ''ltr'',
the left-most box fragment on the first line box in which the box appears
has the left margin, left border and left padding,
and the right-most box fragment on the last line box in which the box appears
has the right padding, right border and right margin.
<li>When the parent's 'direction' property is ''rtl'',
the right-most fragment of the first line box in which the box appears
has the right padding, right border and right margin,
and the left-most fragment of the last line box in which the box appears
has the left margin, left border and left padding.
</ul>
<p>Analogous rules hold for vertical writing modes.</p>
<p class="note">The 'box-decoration-break' property can override this behavior
to draw box decorations on both sides of each fragment. [[!CSS3-BREAK]]
<h2 id="vertical-modes">
Vertical Writing Modes</h2>
<p>In addition to extensions to CSS2.1&rsquo;s support for bidirectional text,
this module introduces the rules and properties needed to support vertical
text layout in CSS.
<h3 id="vertical-intro">
Introduction to Vertical Writing</h3>
<p><em>This subsection is non-normative.</em></p>
<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 src="images/vert-horiz-comparison.png"
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."></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>
<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 src="images/vert-latin-layouts.png"
alt="A dictionary definition for &#x30F4;&#x30A3;&#x30EB;&#x30B9;
might write the English word 'virus' rotated 90&deg; clockwise,
but stack the letters of the initialisms 'RNA' and 'DNA' upright."></p>
<p class="caption">Examples of Latin in vertical Japanese: Daijirin Viewer 1.4 (iOS)
</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 src="images/vert-number-layouts.png"
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
&ldquo;for Mac 2011&rdquo;, where the date is rotated to
match the rotated Latin."></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 src="images/vert-horiz-combination.png"
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."></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="block-flow">
Block Flow Direction: the 'writing-mode' property</h3>
<pre class='propdef'>
Name: writing-mode
Value: horizontal-tb | vertical-rl | vertical-lr
Initial: horizontal-tb
Applies to: All elements except table row groups, table column groups, table rows, table columns, ruby base container, ruby annotation container
Inherited: yes
Percentages: n/a
Media: visual
Computed value: specified value
Animatable: no
Canonical order: n/a
</pre>
<p>This property specifies whether lines of text are laid out horizontally
or vertically and the direction in which blocks progress. Possible
values:</p>
<dl dfn-for=writing-mode dfn-type=value>
<dt><dfn>horizontal-tb</dfn></dt>
<dd>Top-to-bottom <a>block flow direction</a>.
Both the <a>writing mode</a> and the <a>typographic mode</a> are horizontal.</dd>
<dt><dfn>vertical-rl</dfn></dt>
<dd>Right-to-left <a>block flow direction</a>.
Both the <a>writing mode</a> and the <a>typographic mode</a> are vertical.</dd>
<dt><dfn>vertical-lr</dfn></dt>
<dd>Left-to-right <a>block flow direction</a>.
Both the <a>writing mode</a> and the <a>typographic mode</a> are vertical.</dd>
</dl>
<p>The 'writing-mode' property specifies the <a>block flow direction</a>,
which determines the ordering direction of block-level boxes in a block formatting context;
the ordering direction of line boxes in a block container that contains inlines;
the ordering direction of rows in a table; etc.
By virtue of determining the stacking direction of line boxes,
the 'writing-mode' property also determines whether the line boxes' orientation (and thus the <a>writing mode</a>)
is horizontal or vertical.
The 'text-orientation' property then determines how text is laid out within the line box.
<p>The content of <a>replaced elements</a> do not rotate due to the writing mode:
images and external content such as from <code>&lt;iframe></code>s, for example, remain upright,
and the <a>default object size</a> of 300px&times;150px does not re-orient.
However embedded 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"
src="images/horizontal.png" width="219" height="300" ></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"
src="images/vertical-rl.png" height="191" 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"
src="images/vertical-lr.png" height="191" width="300" ></p>
</div>
<div class="example">
<p>In the following example, some form controls are rendered inside
a block with ''vertical-rl'' writing mode. The form controls are
rendered to match the writing mode.
<pre>
<!-- -->&lt;style>
<!-- --> form { writing-mode: vertical-rl; }
<!-- -->&lt;/style>
<!-- -->...
<!-- -->&lt;form>
<!-- -->&lt;p>&lt;label>姓名&#x3000;&lt;input value="艾俐俐">&lt;/label>
<!-- -->&lt;p>&lt;label>语言&#x3000;&lt;select>&lt;option>English
<!-- --> &lt;option>français
<!-- --> &lt;option>فارسی
<!-- --> &lt;option>中文
<!-- --> &lt;option>日本語&lt;/select>&lt;/label>
<!-- -->&lt;/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="images/vertical-form.png"></p>
</div>
<p>If a box has a different 'writing-mode' value than its parent box
(i.e. nearest ancestor without ''display: contents''):
<ul>
<li>If the box would otherwise become an in-flow box
with a computed 'display' of ''display/inline'',
its 'display' computes instead to ''inline-block''.
<li>If the box is a block container,
then it establishes a new block formatting context.
<li>More generally, if its specified <a>inner display type</a> is ''flow'',
then its computed <a>inner display type</a> becomes ''flow-root''. [[!CSS-DISPLAY-3]]
</ul>
<div class="note" id="embedded-svg-inheritance">
<p>As all other inherited CSS properties do,
the 'writing-mode' property inherits to SVG elements inlined
(rather than linked) into the source document.
This could cause unintentional side effects when, for example,
an SVG image designed only for horizontal flow was embedded into a vertical flow document.
<p>Authors can prevent this from happening by adding the following rule:
<div class="example">
<pre>svg { writing-mode: initial; }</pre>
</div>
</div>
<h4 id="svg-writing-mode">
Obsolete SVG1.1 'writing-mode' Values</h4>
<p>SVG1.1 [[!SVG11]] defines some additional values: ''lr'',
''lr-tb'', ''rl'', 8FBA ''rl-tb'', ''tb'', and ''tb-rl''.
<p>These values are <em>obsolete</em> in any context except SVG1 documents
and are therefore <em>optional</em> for non-SVG UAs.
<h5 id="svg-writing-mode-css" class="no-toc">
Supporting SVG1.1 'writing-mode' values in CSS syntax</h5>
<p>UAs that wish to support these values in the context of CSS
must compute them as follows:
<table class="data">
<caption>Mapping of Obsolete SVG1.1 'writing-mode' values to modern CSS</caption>
<thead>
<tr><th>Specified</th> <th>Computed</th></tr>
</thead>
<tbody>
<tr><td>''lr''</td> <td rowspan=4>''horizontal-tb''</td></tr>
<tr><td>''lr-tb''</td></tr>
<tr><td>''rl''</td></tr>
<tr><td>''rl-tb''</td></tr>
<tr><td>''tb''</td> <td rowspan=2>''vertical-rl''</td></tr>
<tr><td>''tb-rl''</td></tr>
</tbody>
</table>
<p class="note">The SVG1.1 values were also present
in an older of the CSS 'writing-mode' specification,
which is obsoleted by this specification.
The additional ''tb-lr'' value of that revision
is replaced by ''vertical-lr''.
<h5 id="svg-writing-mode-markup" class="no-toc">
Supporting SVG1.1 'writing-mode' values in presentational attributes</h5>
<p>In order to support legacy content with presentational attributes,
and to allow authors to create documents that support older clients,
SVG UAs must add the following style sheet rules to their default UA stylesheet:
<pre highlight=css>
@namespace svg "http://www.w3.org/2000/svg";
svg|*[writing-mode=lr], svg|*[writing-mode=lr-tb],
svg|*[writing-mode=rl], svg|*[writing-mode=rl-tb] {
writing-mode: horizontal-tb; }
svg|*[writing-mode=tb], svg|*[writing-mode=tb-rl] {
writing-mode: vertical-rl; }
</pre>
<div class="note">
Authors who wish to create forwards and backwards-compatible SVG content
in CSS syntax can use the CSS forwards-compatible parsing rules to do so,
e.g.
<pre>svg|text { writing-mode: tb; writing-mode: vertical-rl; }</pre>
</div>
<h2 id="inline-alignment">
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 'vertical-align'
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 'vertical-align' property to
determine the alignment of inline-level content.
<h3 id="intro-baselines">
Introduction to Baselines</h3>
<p><em>This section is non-normative.</em></p>
<p>A <dfn>baseline</dfn> is a line along the <a>inline axis</a> 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">
<p><img alt="Picture of alphabetic text in two font sizes with the baseline and em-boxes"
width="480"
src="images/alphabetic-baseline-in-two-font-sizes.svg"></p>
<p class="caption">Alphabetic text in two font sizes with the baseline and em-boxes</p>
</div>
<p>Different writing systems prefer different baseline tables.</p>
<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
View remainder of file in raw view