Skip to content

Commit 17bd138

Browse files
fantasaifantasai
committed
Rework box model for inline bidi section
1 parent 45a9dd7 commit 17bd138

2 files changed

Lines changed: 87 additions & 50 deletions

File tree

‎css3-writing-modes/Overview.html‎

Lines changed: 56 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -730,12 +730,6 @@ <h3 id=unicode-bidi><span class=secno>2.2. </span>Embeddings and Overrides:
730730
element are closed at the paragraph break and reopened on the other side
731731
of it.)
732732

733-
<p>Please note that in order to be able to flow inline boxes in a uniform
734-
direction (either entirely left-to-right or entirely right-to-left), more
735-
inline boxes (including anonymous inline boxes) may have to be created,
736-
and some inline boxes may have to be split up and reordered before
737-
flowing.
738-
739733
<p>Because the Unicode algorithm has a limit of <em title="According to
740734
unicode 3.0, chapter 3, section 12, definition BD2. Specifically, page 58
741735
here: http://www.unicode.org/unicode/uni2book/ch03.pdf"> 61 levels</em> of
@@ -856,34 +850,57 @@ <h3 id=bidi-example><span class=secno>2.3. </span>Example of Bidirectional
856850

857851
<h3 id=bidi-box-model><span class=secno>2.4. </span>Box model for inline
858852
elements in bidirectional context</h3>
853+
854+
<p>Since bidi reordering can split apart and reorder text that is logically
855+
contiguous, bidirectional text can cause an inline boxes to be split and
856+
reordered within a line.
857+
858+
<p class=note>Note that in order to be able to flow inline boxes in a
859+
uniform direction (either entirely left-to-right or entirely
860+
right-to-left), anonymous inline boxes may have to be created.</p>
859861
<!-- CSS2.1 8.6 -->
860862

861863
<p>For each line box, UAs must take the inline boxes generated for each
862864
element and render the margins, borders and padding in visual order (not
863-
logical order).
864-
865-
<p>When the element's &lsquo;<a href="#direction0"><code
866-
class=property>direction</code></a>&rsquo; property is &lsquo;<a
867-
href="#ltr"><code class=css>ltr</code></a>&rsquo;, the left-most generated
868-
box of the first line box in which the element appears has the left
869-
margin, left border and left padding, and the right-most generated box of
870-
the last line box in which the element appears has the right padding,
871-
right border and right margin.
872-
873-
<p>When the element's &lsquo;<a href="#direction0"><code
874-
class=property>direction</code></a>&rsquo; property is &lsquo;<a
875-
href="#rtl"><code class=css>rtl</code></a>&rsquo;, the right-most
876-
generated box of the first line box in which the element appears has the
877-
right padding, right border and right margin, and the left-most generated
878-
box of the last line box in which the element appears has the left margin,
879-
left border and left padding.
865+
logical order). The <a href="#start"><i>start</i></a>-most box on the
866+
first line box in which the element appears has the <a
867+
href="#start"><i>start</i></a> edge's margin, border, and padding; and the
868+
end-most box on the last line box in which the element appears has the <a
869+
href="#end"><i>end</i></a> edge's margin, border, and padding. For
870+
example, in the &lsquo;<a href="#horizontal-tb"><code
871+
class=css>horizontal-tb</code></a>&rsquo; writing mode:
872+
873+
<ul>
874+
<li>When the element's &lsquo;<a href="#direction0"><code
875+
class=property>direction</code></a>&rsquo; property is &lsquo;<a
876+
href="#ltr"><code class=css>ltr</code></a>&rsquo;, the left-most
877+
generated box of the first line box in which the element appears has the
878+
left margin, left border and left padding, and the right-most generated
879+
box of the last line box in which the element appears has the right
880+
padding, right border and right margin.
881+
882+
<li>When the element's &lsquo;<a href="#direction0"><code
883+
class=property>direction</code></a>&rsquo; property is &lsquo;<a
884+
href="#rtl"><code class=css>rtl</code></a>&rsquo;, the right-most
885+
generated box of the first line box in which the element appears has the
886+
right padding, right border and right margin, and the left-most generated
887+
box of the last line box in which the element appears has the left
888+
margin, left border and left padding.
889+
</ul>
890+
891+
<p>Analogous rules hold for vertical writing modes.
892+
893+
<p class=note>The &lsquo;<code
894+
class=property>box-decoration-break</code>&rsquo; property can override
895+
this behavior to draw box decorations on both sides of each box. <a
896+
href="#CSS3BG" rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>
880897

881898
<h2 id=vertical-intro><span class=secno>3. </span> Introduction to Vertical
882899
Text</h2>
883900

884-
<p>In addition to extensions to CSS2.1&lsquo;<code class=css>s support for
885-
bidirectional text, this module introduces the rules and properties needed
886-
to support vertical text layout in CSS. </code>
901+
<p>In addition to extensions to CSS2.1&rsquo;s support for bidirectional
902+
text, this module introduces the rules and properties needed to support
903+
vertical text layout in CSS.
887904

888905
<p>Unlike languages that use the Latin script which are primarily laid out
889906
horizontally, Asian languages such as Chinese and Japanese can be laid out
@@ -920,10 +937,9 @@ <h2 id=vertical-intro><span class=secno>3. </span> Introduction to Vertical
920937

921938
<div class=figure>
922939
<p><img alt="A dictionary definition for &#x30F4;&#x30A3;&#x30EB;&#x30B9;
923-
might write the English word </code>&rsquo;virus' rotated 90&deg;
924-
clockwise, but stack the letters of the initialisms &lsquo;<code
925-
class=property>RNA</code>&rsquo; and &lsquo;<code
926-
class=property>DNA</code>&rsquo; upright." src=vert-latin-layouts.png></p>
940+
might write the English word 'virus' rotated 90&deg; clockwise, but stack
941+
the letters of the initialisms 'RNA' and 'DNA' upright."
942+
src=vert-latin-layouts.png></p>
927943

928944
<p class=caption>Examples of Latin in vertical Japanese: Daijirin Viewer
929945
1.4 (iOS)</p>
@@ -2971,6 +2987,16 @@ <h3 class=no-num id=other-references>Other references</h3>
29712987
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
29722988
<!---->
29732989

2990+
<dt id=CSS3BG>[CSS3BG]
2991+
2992+
<dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
2993+
href="http://www.w3.org/TR/2011/CR-css3-background-20110215"><cite>CSS
2994+
Backgrounds and Borders Module Level 3.</cite></a> 15 February 2011. W3C
2995+
Candidate Recommendation. (Work in progress.) URL: <a
2996+
href="http://www.w3.org/TR/2011/CR-css3-background-20110215">http://www.w3.org/TR/2011/CR-css3-background-20110215</a>
2997+
</dd>
2998+
<!---->
2999+
29743000
<dt id=CSS3COLOR>[CSS3COLOR]
29753001

29763002
<dd>Tantek &#199;elik; Chris Lilley; L. David Baron. <a

‎css3-writing-modes/Overview.src.html‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -436,12 +436,6 @@ <h3 id="unicode-bidi">Embeddings and Overrides: the 'unicode-bidi' property</h3>
436436
levels or overrides started by the element are closed at the paragraph
437437
break and reopened on the other side of it.)
438438

439-
<p>Please note that in order to be able to flow inline boxes in a
440-
uniform direction (either entirely left-to-right or entirely
441-
right-to-left), more inline boxes (including anonymous inline boxes)
442-
may have to be created, and some inline boxes may have to be split up
443-
and reordered before flowing.</p>
444-
445439
<p>Because the Unicode algorithm has a limit of
446440
<em title="According to unicode 3.0, chapter 3, section 12, definition BD2.
447441
Specifically, page 58 here: http://www.unicode.org/unicode/uni2book/ch03.pdf">
@@ -557,27 +551,44 @@ <h3 id="bidi-example">Example of Bidirectional Text</h3>
557551
</div><!-- example -->
558552

559553
<h3 id="bidi-box-model">Box model for inline elements in bidirectional context</h3>
554+
555+
<p>Since bidi reordering can split apart and reorder text that is
556+
logically contiguous, bidirectional text can cause an inline boxes
557+
to be split and reordered within a line.
558+
559+
<p class="note">Note that in order to be able to flow inline boxes in a
560+
uniform direction (either entirely left-to-right or entirely
561+
right-to-left), anonymous inline boxes may have to be created.</p>
562+
560563
<!-- CSS2.1 8.6 -->
561564
<p>For each line box, UAs must take the inline boxes generated for each
562565
element and render the margins, borders and padding in visual order
563-
(not logical order).
564-
565-
<p>When the element's 'direction' property is ''ltr'', the left-most
566-
generated box of the first line box in which the element appears
567-
has the left margin, left border and left padding, and the right-most
568-
generated box of the last line box in which the element appears has
569-
the right padding, right border and right margin.
570-
571-
<p>When the element's 'direction' property is ''rtl'', the right-most
572-
generated box of the first line box in which the element appears has
573-
the right padding, right border and right margin, and the left-most
574-
generated box of the last line box in which the element appears has
575-
the left margin, left border and left padding.
566+
(not logical order). The <i>start</i>-most box on the first line box
567+
in which the element appears has the <i>start</i> edge's margin, border,
568+
and padding; and the end-most box on the last line box in which the
569+
element appears has the <i>end</i> edge's margin, border, and padding.
570+
For example, in the ''horizontal-tb'' writing mode:
571+
<ul>
572+
<li>When the element's 'direction' property is ''ltr'', the left-most
573+
generated box of the first line box in which the element appears
574+
has the left margin, left border and left padding, and the right-most
575+
generated box of the last line box in which the element appears has
576+
the right padding, right border and right margin.
577+
<li>When the element's 'direction' property is ''rtl'', the right-most
578+
generated box of the first line box in which the element appears has
579+
the right padding, right border and right margin, and the left-most
580+
generated box of the last line box in which the element appears has
581+
the left margin, left border and left padding.
582+
</ul>
583+
<p>Analogous rules hold for vertical writing modes.</p>
584+
585+
<p class="note">The 'box-decoration-break' property can override this
586+
behavior to draw box decorations on both sides of each box. [[CSS3BG]] </p>
576587

577588
<h2 id="vertical-intro">
578589
Introduction to Vertical Text</h2>
579590

580-
<p>In addition to extensions to CSS2.1's support for bidirectional text,
591+
<p>In addition to extensions to CSS2.1&rsquo;s support for bidirectional text,
581592
this module introduces the rules and properties needed to support vertical
582593
text layout in CSS.
583594

0 commit comments

Comments
 (0)