- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 14 Oct 2011 00:46:59 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-writing-modes
In directory hutz:/tmp/cvs-serv4772
Modified Files:
Overview.html Overview.src.html
Log Message:
Some clarifications after discussions with szilles and emueller
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-writing-modes/Overview.html,v
retrieving revision 1.212
retrieving revision 1.213
diff -u -d -r1.212 -r1.213
--- Overview.html 8 Sep 2011 23:37:00 -0000 1.212
+++ Overview.html 14 Oct 2011 00:46:46 -0000 1.213
@@ -32,7 +32,7 @@
<h1>CSS Writing Modes Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 September
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 October
2011</h2>
<dl>
@@ -41,7 +41,7 @@
<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-20110908/">http://www.w3.org/TR/2011/ED-css3-writing-modes-20110908/</a>
+ <dd><a href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20111014/">http://www.w3.org/TR/2011/ED-css3-writing-modes-20111014/</a>
-->
@@ -83,13 +83,13 @@
<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/"><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>
@@ -307,8 +307,8 @@
<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>
+ 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>
@@ -456,7 +456,7 @@
<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
+ orientation</i></a> and the <i>typographic 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"
@@ -505,9 +505,8 @@
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."
+ <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>
@@ -793,10 +792,9 @@
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
+ <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
@@ -977,11 +975,9 @@
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><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>
@@ -1002,9 +998,8 @@
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."
+ <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
@@ -1015,11 +1010,8 @@
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."
+ <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>
@@ -1028,9 +1020,9 @@
<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><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>
@@ -1086,44 +1078,55 @@
<td>specified value
</table>
- <p>This property sets the block flow direction. Possible values:
+ <p>This property specifies whether lines of text are laid out horizontally
+ or vertically and the direction in which blocks progress. Possible values:
<dl>
<dt><dfn id=horizontal-tb>horizontal-tb</dfn>
- <dd>Top-to-bottom block flow. The writing mode is horizontal.
+ <dd>Top-to-bottom <a href="#block-flow-direction"><i>block flow
+ direction</i></a>. The <a href="#writing-mode0"><i>writing mode</i></a>
+ is horizontal.
<dt><dfn id=vertical-rl>vertical-rl</dfn>
- <dd>Right-to-left block flow. The writing mode is vertical.
+ <dd>Right-to-left <a href="#block-flow-direction"><i>block flow
+ direction</i></a>. The <a href="#writing-mode0"><i>writing mode</i></a>
+ is vertical.
<dt><dfn id=vertical-lr>vertical-lr</dfn>
- <dd>Left-to-right block flow. The writing mode is vertical.
+ <dd>Left-to-right <a href="#block-flow-direction"><i>block flow
+ direction</i></a>. The <a href="#writing-mode0"><i>writing mode</i></a>
+ 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
+ class=property>writing-mode</code></a>’ property specifies the <a
+ href="#block-flow-direction"><i>block flow direction</i></a>, which
+ determines the progression of block-level boxes in a block formatting
+ context; the progression of line boxes in a block container that contains
+ inlines; the progression of rows in a table; etc. By virtue of determining
+ the stacking direction of line boxes, 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.
+ property also determines whether the line boxes' orientation (and thus the
+ <a href="#writing-mode0"><i>writing mode</i></a>) is horizontal or
+ vertical. The ‘<a href="#text-orientation0"><code
+ class=property>text-orientation</code></a>’ property then determines
+ how text is laid out within the line box.
+
+ <p>The <dfn id=principal-writing-mode>principal writing mode</dfn> of the
+ document is determined by the ‘<a href="#writing-mode1"><code
+ class=property>writing-mode</code></a>’ and ‘<a
+ href="#direction0"><code class=property>direction</code></a>’ values
+ specified on the root element. This writing mode is used, for example, to
+ determine the default page progression direction. (See <a href="#CSS3PAGE"
+ rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>.) Like ‘<a
+ href="#direction0"><code class=property>direction</code></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
@@ -1147,10 +1150,10 @@
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.
+ <li>If the element is a block container, then it establishes a new block
+ formatting context.
+ </ul>
<p>The content of replaced elements do not rotate due to the writing mode:
images, for example, remain upright. However replaced content involving
@@ -1165,23 +1168,24 @@
<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><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><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>
+ <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>
@@ -1204,11 +1208,8 @@
<!-- --> <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."
+ <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>
@@ -1225,9 +1226,9 @@
<!-- --> 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><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>
@@ -1331,12 +1332,9 @@
<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><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>
@@ -1361,7 +1359,7 @@
<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.
+ typographic modes and the horizontal tables otherwise.
<h3 id=text-baselines><span class=secno>4.2. </span> Text Baselines</h3>
@@ -1465,10 +1463,8 @@
<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."
+ <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>
@@ -1497,6 +1493,18 @@
Includes: Han, Hangul, Japanese Kana
</dl>
+ <p>A <dfn id=vertical-script>vertical script</dfn> is one that has a native
+ vertical orientation: i.e. one that is either vertical-only or that is
+ bi-orientational. A <dfn id=horizontal-script>horizontal script</dfn> is
+ one that has a native horizontal orientation: i.e. one that is either
+ horizontal-only or that is bi-orientational.
+
+ <div class=figure>
+ <p><img
+ alt="A Venn diagram of these distinctions would show two circles: one labelled 'vertical', the other 'horizonal'. The overlapped region would represent the bi-orientational scripts, while horizontal-only and vertical-only scripts would occupy their respective circles' exclusive regions."
+ src=baseline-align-super.gif>
+ </div>
+
<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
@@ -1508,8 +1516,8 @@
<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
+ 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
@@ -1604,9 +1612,10 @@
<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>This property specifies the typographic mode and orientation of text
+ within a line. Current values only have an effect in vertical writing
+ modes; the property has no effect on elements in horizontal 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
@@ -1624,9 +1633,8 @@
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.
+ <p>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>
@@ -1646,8 +1654,7 @@
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>.
+ <p>This value puts the element in a <i>vertical typographic mode</i>.
<dt><dfn id=sideways-right>sideways-right</dfn>
@@ -1732,7 +1739,7 @@
<p class=note>This value is at-risk and may be dropped during CR.
</dl>
- <div class=figure>
+ <div class=figure class=data>
<table>
<tbody>
<tr>
@@ -1930,8 +1937,9 @@
</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>
+ 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>
@@ -2060,14 +2068,14 @@
<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><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>
+ <th colspan=2><abbr
+ title="upright-right, upright, sideways-right">*right</abbr>
<tr>
<th scope=row>‘<a href="#direction0"><code
@@ -2287,10 +2295,8 @@
<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>
+ 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>
@@ -2993,9 +2999,9 @@
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><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>
@@ -3025,9 +3031,8 @@
<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."
+ <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>
@@ -3434,6 +3439,10 @@
The script classification of Unicode characters is given by <a
href="#UAX24" rel=biblioentry>[UAX24]<!--{{!UAX24}}--></a>.
+ <p class=note>Note that for vertical-only scripts (Mongolian, Phags Pa),
+ the glyphs in the Unicode code charts are shown in their vertical
+ orientation.
+
<table class=data>
<caption>Vertical Scripts and their Bi-orientational Transform</caption>
@@ -3586,9 +3595,9 @@
<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
+ <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.
@@ -3611,10 +3620,10 @@
<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
+ 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.
@@ -3978,10 +3987,10 @@
<dt id=CSS21>[CSS21]
<dd>Bert Bos; et al. <a
- href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
+ 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>
+ href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
</dd>
<!---->
@@ -4097,15 +4106,16 @@
<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
+ 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>
+ 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
+ <dd>❧ (please update this reference to CSS3-FONTS, thanks, bye)
+ 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
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-writing-modes/Overview.src.html,v
retrieving revision 1.222
retrieving revision 1.223
diff -u -d -r1.222 -r1.223
--- Overview.src.html 8 Sep 2011 23:37:00 -0000 1.222
+++ Overview.src.html 14 Oct 2011 00:46:56 -0000 1.223
@@ -166,7 +166,7 @@
</ul>
<p>The 'text-orientation' component of the writing mode determines the
- <i>line orientation</i> and the <i>typesetting mode</i>, and controls
+ <i>line orientation</i> and the <i>typographic mode</i>, and controls
details of text layout such as the <i>glyph orientation</i>.
<p class="note">See Unicode Technical Note #22 [[UTN22]]
@@ -713,33 +713,38 @@
</tbody>
</table>
- <p>This property sets the block flow direction. Possible values:</p>
+ <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>
<dt><dfn>horizontal-tb</dfn></dt>
- <dd>Top-to-bottom block flow. The writing mode is horizontal.</dd>
+ <dd>Top-to-bottom <i>block flow direction</i>.
+ The <i>writing mode</i> is horizontal.</dd>
<dt><dfn>vertical-rl</dfn></dt>
- <dd>Right-to-left block flow. The writing mode is vertical.</dd>
+ <dd>Right-to-left <i>block flow direction</i>.
+ The <i>writing mode</i> is vertical.</dd>
<dt><dfn>vertical-lr</dfn></dt>
- <dd>Left-to-right block flow. The writing mode is vertical.</dd>
+ <dd>Left-to-right <i>block flow direction</i>.
+ The <i>writing mode</i> is vertical.</dd>
</dl>
- <p>The 'writing-mode' property determines the direction of block flow.
- This determines the progression of block-level boxes in a block formatting
+ <p>The 'writing-mode' property specifies the <i>block flow direction</i>,
+ which 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
+ inlines; the progression of rows in a table; etc. By virtue of determining
the stacking direction of line boxes, the 'writing-mode' property also
- determines whether line boxes and thus the writing mode is horizontal or
- vertical.
+ determines whether the line boxes' orientation (and thus the <i>writing mode</i>)
+ is horizontal or vertical. The 'text-orientation' property then determines
+ how text is laid out within the line box.
- <p>When set on the root element, the 'writing-mode' property together
- with the 'direction' property determines the
- <dfn id="principal-writing-mode">principal writing mode</dfn>
- of the document. This writing mode is used, for example,
+ <p>The <dfn id="principal-writing-mode">principal writing mode</dfn> of the
+ document is determined by the 'writing-mode' and 'direction' values
+ specified on the root element. This writing mode is used, for example,
to determine the default page progression direction. (See [[CSS3PAGE]].)
- The 'writing-mode' 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.
+ Like 'direction', the 'writing-mode' 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 'writing-mode' property of the HTML BODY
element is <em>not</em> propagated to the viewport. That special
@@ -752,9 +757,9 @@
computes to 'inline-block'. [[!CSS21]]
<li>If the element has a specified 'display' of ''run-in'', its 'display'
computes to 'block'. [[!CSS21]]
+ <li>If the element is a block container, then it establishes a new block
+ formatting context.
</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
@@ -929,7 +934,7 @@
<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
+ tables in vertical typographic modes and the horizontal tables
otherwise.
<h3 id="text-baselines">
@@ -1045,6 +1050,20 @@
Includes: Han, Hangul, Japanese Kana
</dl>
+ <p>A <dfn>vertical script</dfn> is one that has a native vertical orientation:
+ i.e. one that is either vertical-only or that is bi-orientational.
+ A <dfn>horizontal script</dfn> is one that has a native horizontal orientation:
+ i.e. one that is either horizontal-only or that is bi-orientational.
+
+ <div class="figure">
+ <p><img alt="A Venn diagram of these distinctions would show two circles:
+ one labelled 'vertical', the other 'horizonal'. The overlapped
+ region would represent the bi-orientational scripts, while
+ horizontal-only and vertical-only scripts would occupy their
+ respective circles' exclusive regions."
+ src="baseline-align-super.gif">
+ </div>
+
<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
@@ -1134,9 +1153,9 @@
</tbody>
</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>This property specifies the typographic mode and orientation of text
+ within a line. Current values only have an effect in vertical writing
+ modes; the property has no effect on elements in horizontal writing modes.
<p>For readability, the term <i>character</i> is used in place of
<em>extended grapheme cluster</em> in this section.
@@ -1151,9 +1170,8 @@
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.
+ <p>This value puts the element in a <i>vertical typographic mode</i>
+ and is typical for layout of primarily vertical-script text.
<dt><dfn>upright</dfn></dt>
<dd><p>In vertical writing modes, characters from horizonal-only
scripts are rendered upright, i.e. in their standard horizontal
@@ -1167,8 +1185,7 @@
<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 'direction' to be ''ltr''.
- <p>In vertical writing modes, this value puts the element in a <i>vertical
- typographic mode</i>.
+ <p>This value puts the element in a <i>vertical typographic mode</i>.
<dt><dfn>sideways-right</dfn></dt>
<dd><p>In vertical writing modes, this causes text to be set as if
in a horizontal layout (using horizontal glyph variants and metrics),
@@ -1216,7 +1233,7 @@
<p class="note">This value is at-risk and may be dropped during CR.
</dl>
- <div class="figure">
+ <div class="figure" class=data>
<table>
<tr>
<td>
@@ -2572,6 +2589,10 @@
<i>horizontal-only</i>. The script classification of Unicode characters is
given by [[!UAX24]].
+ <p class="note">Note that for vertical-only scripts (Mongolian, Phags Pa),
+ the glyphs in the Unicode code charts are shown in their vertical
+ orientation.
+
<table class="data">
<caption>Vertical Scripts and their Bi-orientational Transform</caption>
<thead>
Received on Friday, 14 October 2011 00:47:10 UTC