Skip to content

Commit ba129ef

Browse files
committed
Changes to address feedback:
- Add module boilerplate, including values definition <http://lists.w3.org/Archives/Public/www-style/2011Mar/0202.html> - Fix inline-level / inline / block container terminology to match CSS2.1 - Address some editorial/clarifying comments from I18N <http://lists.w3.org/Archives/Public/www-style/2011Mar/0199.html> <http://lists.w3.org/Archives/Public/www-style/2011Mar/0200.html> <http://lists.w3.org/Archives/Public/www-style/2011Mar/0201.html - Clarify rotate-left <http://lists.w3.org/Archives/Public/www-style/2011Mar/0541.html>
1 parent 08927d5 commit ba129ef

2 files changed

Lines changed: 201 additions & 65 deletions

File tree

css3-writing-modes/Overview.html

Lines changed: 125 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,15 @@ <h2 class="no-num no-toc" id=Contents>Table of Contents</h2>
142142
<ul class=toc>
143143
<li><a href="#text-flow"><span class=secno>1. </span>Introduction to
144144
Writing Modes</a>
145+
<ul class=toc>
146+
<li><a href="#placement"><span class=secno>1.1. </span>Module
147+
Interactions</a>
148+
149+
<li><a href="#conventions"><span class=secno>1.2. </span>Document
150+
Conventions</a>
151+
152+
<li><a href="#values"><span class=secno>1.3. </span>Values</a>
153+
</ul>
145154

146155
<li><a href="#text-direction"><span class=secno>2. </span>Inline Direction
147156
and Bidirectionality</a>
@@ -366,6 +375,61 @@ <h2 id=text-flow><span class=secno>1. </span>Introduction to Writing Modes</h2>
366375
<p class=issue>Point at Intro to Text Orientation section once it's
367376
written.
368377

378+
<h3 id=placement><span class=secno>1.1. </span>Module Interactions</h3>
379+
380+
<p>This module replaces and extends the &lsquo;<a
381+
href="#unicode-bidi0"><code class=property>unicode-bidi</code></a>&rsquo;
382+
and &lsquo;<a href="#direction0"><code
383+
class=property>direction</code></a>&rsquo; features defined in <a
384+
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections 8.6
385+
and 9.10.
386+
387+
<h3 id=conventions><span class=secno>1.2. </span>Document Conventions</h3>
388+
389+
<p>Conformance requirements are expressed with a combination of descriptive
390+
assertions and RFC 2119 terminology. The key words “MUST”, “MUST
391+
NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
392+
“SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
393+
normative parts of this document are to be interpreted as described in RFC
394+
2119. However, for readability, these words do not appear in all uppercase
395+
letters in this specification.
396+
397+
<p>All of the text of this specification is normative except sections
398+
explicitly marked as non-normative, examples, and notes. <a
399+
href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
400+
401+
<p>Examples in this specification are introduced with the words “for
402+
example” or are set apart from the normative text with
403+
<code>class="example"</code>, like this:
404+
405+
<div class=example>
406+
<p>This is an example of an informative example.</p>
407+
</div>
408+
409+
<p>Informative notes begin with the word “Note” and are set apart from
410+
the normative text with <code>class="note"</code>, like this:
411+
412+
<p class=note>Note, this is an informative note.
413+
414+
<h3 id=values><span class=secno>1.3. </span>Values</h3>
415+
416+
<p>This specification follows the <a
417+
href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
418+
definition conventions</a> from <a href="#CSS21"
419+
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
420+
this specification are defined in CSS Level 2 Revision 1 <a
421+
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
422+
modules may expand the definitions of these value types: for example <a
423+
href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
424+
when combined with this module, expands the definition of the
425+
&lt;color&gt; value type as used in this specification.
426+
427+
<p>In addition to the property-specific values listed in their definitions,
428+
all properties defined in this specification also accept the <a
429+
href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
430+
keyword as their property value. For readability it has not been repeated
431+
explicitly.
432+
369433
<h2 id=text-direction><span class=secno>2. </span>Inline Direction and
370434
Bidirectionality</h2>
371435

@@ -585,35 +649,21 @@ <h3 id=unicode-bidi><span class=secno>2.2. </span>Embeddings and Overrides:
585649
<dt><strong>normal</strong>
586650

587651
<dd>The element does not open an additional level of embedding with
588-
respect to the bidirectional algorithm. For inline-level elements,
589-
implicit reordering works across element boundaries.
652+
respect to the bidirectional algorithm. For inline elements, implicit
653+
reordering works across element boundaries.
590654

591655
<dt><strong>embed</strong>
592656

593-
<dd>If the element is inline-level, this value opens an additional level
594-
of embedding with respect to the bidirectional algorithm. The direction
595-
of this embedding level is given by the &lsquo;<a
596-
href="#direction0"><code class=property>direction</code></a>&rsquo;
597-
property. Inside the element, reordering is done implicitly. This
598-
corresponds to adding a LRE (U+202A; for &lsquo;<code
599-
class=css>direction: ltr</code>&rsquo;) or RLE (U+202B; for &lsquo;<code
600-
class=css>direction: rtl</code>&rsquo;) at the start of the element and a
601-
PDF (U+202C) at the end of the element.
602-
603-
<dt><strong>bidi-override</strong>
604-
605-
<dd>For inline-level elements this creates an override. For block-level,
606-
table-cell, table-caption, or inline-block elements this creates an
607-
override for inline-level descendants not within another block-level,
608-
table-cell, table-caption, or inline-block element. This means that
609-
inside the element, reordering is strictly in sequence according to the
610-
<span class=propinst-direction>&lsquo;<a href="#direction0"><code
611-
class=property>direction</code></a>&rsquo;</span> property; the implicit
612-
part of the bidirectional algorithm is ignored. This corresponds to
613-
adding a LRO (U+202D; for &lsquo;<code class=css>direction:
614-
ltr</code>&rsquo;) or RLO (U+202E; for &lsquo;<code class=css>direction:
615-
rtl</code>&rsquo;) at the start of the element and a PDF (U+202C) at the
616-
end of the element.
657+
<dd>If the element is inline, this value opens an additional level of
658+
embedding with respect to the bidirectional algorithm. The direction of
659+
this embedding level is given by the &lsquo;<a href="#direction0"><code
660+
class=property>direction</code></a>&rsquo; property. Inside the element,
661+
reordering is done implicitly. This corresponds to adding a LRE (U+202A),
662+
for &lsquo;<code class=css>direction: ltr</code>&rsquo;, or RLE (U+202B),
663+
for &lsquo;<code class=css>direction: rtl</code>&rsquo;, at the start of
664+
the element and a PDF (U+202C) at the end of the element. <span
665+
class=note>This value has no effect on elements that are not
666+
inline.</span>
617667

618668
<dt><strong>isolate</strong>
619669

@@ -629,11 +679,24 @@ <h3 id=unicode-bidi><span class=secno>2.2. </span>Embeddings and Overrides:
629679

630680
<dd>
631681
<p>For the purposes of the Unicode bidirectional algorithm, the base
632-
directionality of each "paragraph" for which the element forms the
682+
directionality of each bidi paragraph for which the element forms the
633683
containing block is determined not by the element's computed &lsquo;<a
634684
href="#direction0"><code class=property>direction</code></a>&rsquo; as
635685
usual, but by following rules P2 and P3 of the Unicode bidirectional
636686
algorithm. Note this value has no effect on inline elements.
687+
688+
<dt><strong>bidi-override</strong>
689+
690+
<dd>For inline elements this creates an override. For block-container
691+
elements this creates an override for inline-level descendants not within
692+
another block container element. This means that inside the element,
693+
reordering is strictly in sequence according to the &lsquo;<a
694+
href="#direction0"><code class=property>direction</code></a>&rsquo;
695+
property; the implicit part of the bidirectional algorithm is ignored.
696+
This corresponds to adding a LRO (U+202D), for &lsquo;<code
697+
class=css>direction: ltr</code>&rsquo;, or RLO (U+202E), for &lsquo;<code
698+
class=css>direction: rtl</code>&rsquo;, at the start of the element and a
699+
PDF (U+202C) at the end of the element.
637700
</dl>
638701

639702
<p>The final order of characters within in each bidi paragraph is the same
@@ -807,9 +870,9 @@ <h3 id=bidi-box-model><span class=secno>2.4. </span>Box model for inline
807870
<h2 id=vertical-intro><span class=secno>3. </span> Introduction to Vertical
808871
Text</h2>
809872

810-
<p>In addition to extensions to CSS2.1&apos;s support for bidirectional
811-
text, this module introduces the rules and properties needed to support
812-
vertical text layout in CSS.
873+
<p>In addition to extensions to CSS2.1&lsquo;<code class=css>s support for
874+
bidirectional text, this module introduces the rules and properties needed
875+
to support vertical text layout in CSS. </code>
813876

814877
<p>Unlike languages that use the Latin script which are primarily laid out
815878
horizontally, Asian languages such as Chinese and Japanese can be laid out
@@ -846,8 +909,9 @@ <h2 id=vertical-intro><span class=secno>3. </span> Introduction to Vertical
846909

847910
<div class=figure>
848911
<p><img alt="A dictionary definition for &#x30F4;&#x30A3;&#x30EB;&#x30B9;
849-
might write the English word 'virus' rotated 90&deg; clockwise, but stack
850-
the letters of the initialisms 'RNA' and 'DNA' upright."
912+
might write the English word &lsquo;<code
913+
class=property>virus</code>&rsquo; rotated 90&deg; clockwise, but stack
914+
the letters of the initialisms </code>&rsquo;RNA' and 'DNA' upright."
851915
src=vert-latin-layouts.png></p>
852916

853917
<p class=caption>Examples of Latin in vertical Japanese: Daijirin Viewer
@@ -1466,12 +1530,16 @@ <h3 id=text-orientation><span class=secno>5.1. </span> Orienting Text: the
14661530
computed value of &lsquo;<a href="#unicode-bidi0"><code
14671531
class=property>unicode-bidi</code></a>&rsquo;. Layout of text is exactly
14681532
as for &lsquo;<a href="#rotate-right"><code
1469-
class=css>rotate-right</code></a>&rsquo; except that the entire text
1470-
content and baseline table of the element is mirrored: each box of the
1471-
inline is mirrored around a vertical axis such that its content box does
1472-
not move. (However the contents of atomic inlines are not mirrored; only
1473-
their alignment is changed.) Similarly, if a child of the element has a
1474-
&lsquo;<a href="#text-orientation0"><code
1533+
class=css>rotate-right</code></a>&rsquo; except that the text content
1534+
and baseline table of each of the element's inline boxes is mirrored
1535+
around a vertical axis along the center of its content box. The
1536+
positions of text decorations propagated from an ancestor inline
1537+
(including the block container's root inline) are not mirrored, but any
1538+
text decorations introduced by the element are positioned using the
1539+
mirrored baseline table.
1540+
1541+
<p>Similarly, if an inline child of the element has a &lsquo;<a
1542+
href="#text-orientation0"><code
14751543
class=property>text-orientation</code></a>&rsquo; value other than
14761544
&lsquo;<a href="#rotate-left"><code
14771545
class=css>rotate-left</code></a>&rsquo;, an analogous transformation is
@@ -2716,6 +2784,15 @@ <h3 class=no-num id=normative-references>Normative references</h3>
27162784
</dd>
27172785
<!---->
27182786

2787+
<dt id=RFC2119>[RFC2119]
2788+
2789+
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
2790+
words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
2791+
RFC 2119. URL: <a
2792+
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
2793+
</dd>
2794+
<!---->
2795+
27192796
<dt id=SVG11>[SVG11]
27202797

27212798
<dd>Erik Dahlstr&#246;m; et al. <a
@@ -2767,6 +2844,16 @@ <h3 class=no-num id=other-references>Other references</h3>
27672844
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
27682845
<!---->
27692846

2847+
<dt id=CSS3COLOR>[CSS3COLOR]
2848+
2849+
<dd>Tantek &#199;elik; Chris Lilley; L. David Baron. <a
2850+
href="http://www.w3.org/TR/2010/PR-css3-color-20101028"><cite>CSS Color
2851+
Module Level 3.</cite></a> 28 October 2010. W3C Proposed Recommendation.
2852+
(Work in progress.) URL: <a
2853+
href="http://www.w3.org/TR/2010/PR-css3-color-20101028">http://www.w3.org/TR/2010/PR-css3-color-20101028</a>
2854+
</dd>
2855+
<!---->
2856+
27702857
<dt id=CSS3PAGE>[CSS3PAGE]
27712858

27722859
<dd>Melinda Grant; H&#229;kon Wium Lie. <a

css3-writing-modes/Overview.src.html

Lines changed: 76 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,54 @@ <h2 id="text-flow">Introduction to Writing Modes</h2>
148148

149149
<p class="issue">Point at Intro to Text Orientation section once it's written.</p>
150150

151+
<h3 id="placement">Module Interactions</h3>
152+
153+
<p>This module replaces and extends the 'unicode-bidi' and 'direction'
154+
features defined in [[!CSS21]] sections 8.6 and 9.10</var>.
155+
156+
<h3 id="conventions">Document Conventions</h3>
157+
158+
<p>Conformance requirements are expressed with a combination of
159+
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
160+
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
161+
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
162+
document are to be interpreted as described in RFC 2119.
163+
However, for readability, these words do not appear in all uppercase
164+
letters in this specification.
165+
166+
<p>All of the text of this specification is normative except sections
167+
explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
168+
169+
<p>Examples in this specification are introduced with the words “for example”
170+
or are set apart from the normative text with <code>class="example"</code>,
171+
like this:
172+
173+
<div class="example">
174+
<p>This is an example of an informative example.</p>
175+
</div>
176+
177+
<p>Informative notes begin with the word “Note” and are set apart from the
178+
normative text with <code>class="note"</code>, like this:
179+
180+
<p class="note">Note, this is an informative note.</p>
181+
182+
<h3 id="values">Values</h3>
183+
184+
<p>This specification follows the
185+
<a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
186+
definition conventions</a> from [[!CSS21]]. Value types not defined in
187+
this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
188+
Other CSS modules may expand the definitions of these value types: for
189+
example [[CSS3COLOR]], when combined with this module, expands the
190+
definition of the &lt;color&gt; value type as used in this specification.</p>
191+
192+
<p>In addition to the property-specific values listed in their definitions,
193+
all properties defined in this specification also accept the
194+
<a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
195+
keyword as their property value. For readability it has not been repeated
196+
explicitly.
197+
198+
151199
<h2 id="text-direction">Inline Direction and Bidirectionality</h2>
152200

153201
<p>While the characters in most scripts are written from left to right,
@@ -325,28 +373,18 @@ <h3 id="unicode-bidi">Embeddings and Overrides: the 'unicode-bidi' property</h3>
325373
<dl>
326374
<dt><strong>normal</strong></dt>
327375
<dd>The element does not open an additional level of embedding with
328-
respect to the bidirectional algorithm. For inline-level elements,
376+
respect to the bidirectional algorithm. For inline elements,
329377
implicit reordering works across element boundaries.</dd>
330378
<dt><strong>embed</strong></dt>
331-
<dd>If the element is inline-level, this value
332-
opens an additional level of embedding with respect to the
333-
bidirectional algorithm. The direction of this embedding level is
334-
given by the 'direction'
379+
<dd>If the element is inline, this value opens an additional level
380+
of embedding with respect to the bidirectional algorithm.
381+
The direction of this embedding level is given by the 'direction'
335382
property. Inside the element, reordering is done implicitly. This
336-
corresponds to adding a LRE (U+202A; for 'direction: ltr') or RLE
337-
(U+202B; for 'direction: rtl') at the start of the element and a PDF
338-
(U+202C) at the end of the element.</dd>
339-
<dt><strong>bidi-override</strong></dt>
340-
<dd>For inline-level elements this creates an override.
341-
For block-level, table-cell, table-caption, or inline-block elements
342-
this creates an override for inline-level descendants not within
343-
another block-level, table-cell, table-caption, or inline-block
344-
element. This means that inside the element, reordering is strictly in sequence
345-
according to the <span class="propinst-direction">'direction'</span>
346-
property; the implicit part of the bidirectional algorithm is
347-
ignored. This corresponds to adding a LRO (U+202D; for 'direction:
348-
ltr') or RLO (U+202E; for 'direction: rtl') at the start of the
349-
element and a PDF (U+202C) at the end of the element.</dd>
383+
corresponds to adding a LRE (U+202A), for 'direction: ltr', or RLE
384+
(U+202B), for 'direction: rtl', at the start of the element and a PDF
385+
(U+202C) at the end of the element.
386+
<span class="note">This value has no effect on elements that are
387+
not inline.</span></dd>
350388
<dt><strong>isolate</strong></dt>
351389
<dd>For the purposes of the Unicode bidirectional algorithm, the
352390
contents of the element are considered to be inside a separate,
@@ -357,11 +395,20 @@ <h3 id="unicode-bidi">Embeddings and Overrides: the 'unicode-bidi' property</h3>
357395
of the element is treated as an Object Replacement Character.)</dd>
358396
<dt><strong>plaintext</strong></dt>
359397
<dd><p>For the purposes of the Unicode bidirectional algorithm, the
360-
base directionality of each "paragraph" for which the element
398+
base directionality of each bidi paragraph for which the element
361399
forms the containing block is determined not by the element's
362400
computed 'direction' as usual, but by following rules P2
363401
and P3 of the Unicode bidirectional algorithm. Note this value
364402
has no effect on inline elements.
403+
<dt><strong>bidi-override</strong></dt>
404+
<dd>For inline elements this creates an override. For block-container
405+
elements this creates an override for inline-level descendants not
406+
within another block container element. This means that inside the
407+
element, reordering is strictly in sequence according to the
408+
'direction' property; the implicit part of the bidirectional algorithm
409+
is ignored. This corresponds to adding a LRO (U+202D), for ''direction:
410+
ltr'', or RLO (U+202E), for ''direction: rtl'', at the start of the
411+
element and a PDF (U+202C) at the end of the element.</dd>
365412
</dl>
366413

367414
<p>The final order of characters within in each bidi paragraph is the
@@ -525,7 +572,7 @@ <h3 id="bidi-box-model">Box model for inline elements in bidirectional context</
525572
<h2 id="vertical-intro">
526573
Introduction to Vertical Text</h2>
527574

528-
<p>In addition to extensions to CSS2.1&apos;s support for bidirectional text,
575+
<p>In addition to extensions to CSS2.1's support for bidirectional text,
529576
this module introduces the rules and properties needed to support vertical
530577
text layout in CSS.
531578

@@ -1066,12 +1113,14 @@ <h3 id="text-orientation">
10661113
<p>If set on a non-replaced inline whose parent is not ''rotate-left'',
10671114
this forces ''isolate'' to be added to the computed value of 'unicode-bidi'.
10681115
Layout of text is exactly as for ''rotate-right'' except that the
1069-
entire text content and baseline table of the element is mirrored:
1070-
each box of the inline is mirrored around a vertical axis such that
1071-
its content box does not move. (However the contents of atomic
1072-
inlines are not mirrored; only their alignment is changed.)
1073-
Similarly, if a child of the element has a 'text-orientation' value
1074-
other than ''rotate-left'', an analogous transformation is applied.
1116+
text content and baseline table of each of the element's inline boxes
1117+
is mirrored around a vertical axis along the center of its content box.
1118+
The positions of text decorations propagated from an ancestor inline
1119+
(including the block container's root inline) are not mirrored, but any
1120+
text decorations introduced by the element are positioned using the
1121+
mirrored baseline table.
1122+
<p>Similarly, if an inline child of the element has a 'text-orientation'
1123+
value other than ''rotate-left'', an analogous transformation is applied.
10751124
<dt><dfn>rotate-normal</dfn></dt>
10761125
<dd><p>This value is equivalent to ''rotate-right'' in ''vertical-rl''
10771126
writing mode and equivalent to ''rotate-left'' in ''vertical-lr''

0 commit comments

Comments
 (0)