Skip to content

Commit 092bf24

Browse files
committed
[css-ruby] Define line-breaking. Delete old text wrt line-stacking.
1 parent 0f6fec0 commit 092bf24

File tree

3 files changed

+106
-145
lines changed

3 files changed

+106
-145
lines changed

css-ruby/Overview.html

Lines changed: 61 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<meta content="CSS Ruby Module Level 1" name=dcterms.title>
2121
<meta content=text name=dcterms.type>
22-
<meta content=2013-06-20 name=dcterms.date>
22+
<meta content=2013-06-21 name=dcterms.date>
2323
<meta content="Elika J. Etemad" name=dcterms.creator>
2424
<meta content="Koji Ishii" name=dcterms.creator>
2525
<meta content="Richard Ishida" name=dcterms.creator>
@@ -40,8 +40,8 @@
4040
<h1 class=p-name>CSS Ruby Module Level 1</h1>
4141

4242
<h2 class="no-num no-toc" id=longstatus-date->Editor's Draft <time
43-
class=dt-updated datetime=20130620>20 June 2013</time>
44-
<!-- for HTML4 doctype: <span class="value-title" title="20130620">20 June 2013</span></span> --></h2>
43+
class=dt-updated datetime=20130621>21 June 2013</time>
44+
<!-- for HTML4 doctype: <span class="value-title" title="20130621">21 June 2013</span></span> --></h2>
4545

4646
<dl>
4747
<dt>This version:
@@ -204,16 +204,7 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
204204
Ruby</a>
205205
</ul>
206206

207-
<li><a href="#box-model"><span class=secno>2.4. </span> Generating Ruby
208-
Structure</a>
209-
210-
<li><a href="#box-model"><span class=secno>2.5. </span> Ruby box
211-
model</a>
212-
213-
<li><a href="#ruby-line-height"><span class=secno>2.6. </span> Ruby box
214-
and line stacking</a>
215-
216-
<li><a href="#ruby-line-breaking"><span class=secno>2.7. </span> Ruby
207+
<li><a href="#ruby-line-breaking"><span class=secno>2.4. </span> Ruby
217208
box and line breaking</a>
218209
</ul>
219210

@@ -652,92 +643,79 @@ <h4 id=nested-pairing><span class=secno>2.3.1. </span> Nested Ruby</h4>
652643
<p class=issue>This shouldn't belong in Level 1. But HTML5 allows it, so we
653644
have to handle it. Yay HTML5.
654645

655-
<h3 id=box-model><span class=secno>2.4. </span> Generating Ruby Structure</h3>
656-
657-
<p>
658-
659-
<h3 id=box-model><span class=secno>2.5. </span> Ruby box model</h3>
660-
661-
<h3 id=ruby-line-height><span class=secno>2.6. </span> Ruby box and line
662-
stacking</h3>
663-
664-
<p>The interaction of the ruby box and line stacking is controlled by the
665-
<code class=property>line-stacking-ruby</code>’ property described in
666-
the CSS3 Line Module. That property takes two values: ‘<code
667-
class=property>include-ruby</code>’ and ‘<code class=css>exclude-ruby.
668-
Depending on the property value, the ruby box is considered or excluded
669-
for line stacking. Even if the ruby box is considered for line stacking,
670-
some values of the </code>’line-stacking-strategy' property (also
671-
described in the CSS3 Line module) can still create occurrences where a
672-
the ruby box will eventually be ignored (e.g. case where the ‘<code
673-
class=property>line-stacking-strategy</code>’ value is ‘<code
674-
class=property>block-line-height</code>’).
675-
676-
<p>In the following figure, each line box is shown with leading space
677-
distributed before and after the two text segments (‘<code
678-
class=css>Previous line</code>’ and ‘<a href="#ruby-base-box"><code
679-
class=css>Ruby base</code></a>’); the dotted lines show the line box for
680-
each line. The ‘<code class=property>line-stacking-ruby</code>
681-
property is set to ‘<code class=property>exclude-ruby</code>’. The
682-
achieved effect is that the ruby box does not affect the line to line
683-
spacing. It is however the responsibility of the style author to avoid
684-
<code class=property>bleeding</code>’ effects between the ruby text
685-
and the surrounding text of images.
646+
<h3 id=ruby-line-breaking><span class=secno>2.4. </span> Ruby box and line
647+
breaking</h3>
648+
649+
<p>When there is not enough space for an entire <a
650+
href="#ruby-container-box"><i>ruby container</i></a> to fit on the line,
651+
the ruby may be broken wherever all levels allow a break. In typical
652+
cases, line breaks are forbidden within each <a
653+
href="#ruby-base-box"><i>ruby base</i></a> and <a
654+
href="#ruby-annotation-box"><i>ruby annotation</i></a>, so the <a
655+
href="#ruby-container-box"><i>ruby container</i></a> can only break
656+
between adjacent <a href="#ruby-base-box"><i>ruby bases</i></a>, and only
657+
if no <a href="#ruby-annotation-box"><i>ruby annotations</i></a> span
658+
those <a href="#ruby-base-box"><i>ruby bases</i></a>. Whenever ruby breaks
659+
across lines, <a href="#ruby-annotation-box"><i>ruby annotations</i></a>
660+
<em>must stay with their respective bases. </em>
686661

687662
<div class=figure>
688-
<p> <img alt="Diagram showing the ruby text using 2 half leading"
689-
class=example height=138 src="images/rlh-a.gif" width=210>
663+
<p><img
664+
alt="Diagram showing the line breaking opportunity in a complex ruby"
665+
src="images/r-break-a.gif">
690666

691-
<p><b>Figure 3.3.1</b>: Excluded Ruby text
667+
<p class=caption>Ruby line breaking opportunity
692668
</div>
693669

694-
<p>In the following figure, the line boxes have no extra leading space. The
695-
<code class=property>line-stacking-ruby</code>’ property is set to
696-
<code class=property>include-ruby</code>’ and the ‘<code
697-
class=property>line-stacking-strategy</code>’ property is set to a value
698-
where inline boxes are considered for line stacking. In this case, the
699-
line box with the ruby text is affected and has its ‘<code
700-
class=property>stack-height</code>’ increased by the amount necessary to
701-
fit the ruby text.
702-
703-
<div class=figure>
704-
<p> <img alt="Diagram showing the ruby text expanding above base text"
705-
class=example height=111 src="images/rlh-b.gif" width=210>
670+
<p>Whether ruby can break between two adjacent <a
671+
href="#ruby-base-box"><i>ruby bases</i></a> is controlled by normal
672+
line-breaking rules for the affected text, exactly as if the <a
673+
href="#ruby-base-box"><i>ruby bases</i></a> were regular <i>inline</i>
674+
boxes.
706675

707-
<p><b>Figure 3.3.2</b>: Ruby text increasing line height
676+
<div class=example>
677+
<p>For example, if two adjacent ruby bases are “蝴” and “蝶”,
678+
the line may break between them, because lines are normally allowed to
679+
break between two Han characters. However, if ‘<code
680+
class=property>word-break</code>’ is ‘<code
681+
class=css>keep-all</code>’, that line break is forbidden.
708682
</div>
709683

710-
<p>This mechanism allows rendering of evenly spaced lines of text within a
711-
block-level element, whether a line contains ruby or not. The authors need
712-
only to set for the block-level element a line height value larger than
713-
the computed line-height of the largest ruby element within the block.
684+
<p>Inter-base white space is significant for evaluating line break
685+
opportunities between <a href="#ruby-base-box"><i>ruby bases</i></a>. As
686+
with white space between inlines, it collapses when the line breaks there.
714687

715-
<h3 id=ruby-line-breaking><span class=secno>2.7. </span> Ruby box and line
716-
breaking</h3>
688+
<div class=example>
689+
<p>For example, given the following markup:
717690

718-
<p>When a ruby falls at the end of a line where there is not sufficient
719-
room for the entire ruby to fit on the line, the complex ruby may be
720-
broken at locations where boxes of the ruby container align. Some examples
721-
are provided below to provide more clarity.
691+
<pre>&lt;ruby>&lt;rb>one&lt;/rb> &lt;rb>two&lt;/rb> &lt;rt>1&lt;/rt> &lt;rt>2&lt;/rt>&lt;/ruby></pre>
722692

723-
<p> <img
724-
alt="Diagram showing the line breaking opportunity in a complex ruby"
725-
class=example height=201 src="images/r-break-a.gif" width=408>
693+
<p>Due to the space, the line may break between “one” and “two“.
694+
If the line breaks there, that space disappears, in accordance with
695+
standard CSS white space processing rules. [[CSS3-TEXT]]
696+
</div>
726697

727-
<p><b>Figure 3.4.1</b>: Complex ruby line breaking opportunity
698+
<p>The line <em>must not</em> break between a <a
699+
href="#ruby-base-box"><i>ruby base</i></a> and its annotations.
728700

729-
<p> <img
701+
<div class=figure> <img
730702
alt="Diagram showing the line breaking opportunity in a &#34;Bopomofo&#34; ruby"
731-
class=example height=90 src="images/r-break-b.gif" width=300>
703+
src="images/r-break-b.gif">
704+
<p class=caption><code class=css>inter-character</code>’ ruby line
705+
breaking opportunity
706+
</div>
707+
<!-- <h3 id="ruby-line-height">
708+
Ruby box and line stacking</h3>
732709
733-
<p><b>Figure 3.4.1</b>: "Bopomofo" ruby line breaking opportunity
710+
<div class="figure">
711+
<p>
712+
<img class="example"
713+
alt="Diagram showing the ruby text using 2 half leading"
714+
src="images/rlh-a.gif" width="210" height="138" /></p>
734715
735-
<p class=issue><span class=issuehead>Issue: </span> Line breaks should
736-
only be allowed within ruby if the ruby base text can be broken at that
737-
point. E.g. if complex Ruby is used to annotate the two morphemes of
738-
&quot;butterfly&quot;, the fact that we have added ruby annotations should
739-
not cause a line breaking opportunity to be present between
740-
&quot;butter&quot; and &quot;fly&quot;
716+
<p><b>Figure 3.3.1</b>: Excluded Ruby text</p>
717+
</div>
718+
-->
741719

742720
<h2 id=ruby-props><span class=secno>3. </span> Ruby Properties</h2>
743721

css-ruby/Overview.src.html

Lines changed: 45 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -381,83 +381,66 @@ <h4 id="nested-pairing">
381381

382382
<p class="issue">This shouldn't belong in Level 1. But HTML5 allows it, so we have to handle it. Yay HTML5.
383383

384-
<h3 id="box-model">
385-
Generating Ruby Structure</h3>
384+
<h3 id="ruby-line-breaking">
385+
Ruby box and line breaking</h3>
386386

387-
<p>
387+
<p>When there is not enough space for an entire <i>ruby container</i> to fit on the line,
388+
the ruby may be broken wherever all levels allow a break.
389+
In typical cases, line breaks are forbidden within each <i>ruby base</i> and <i>ruby annotation</i>,
390+
so the <i>ruby container</i> can only break between adjacent <i>ruby bases</i>,
391+
and only if no <i>ruby annotations</i> span those <i>ruby bases</i>.
392+
Whenever ruby breaks across lines, <i>ruby annotations</i>
393+
<em>must</i> stay with their respective bases.
388394

389-
<h3 id="box-model">
390-
Ruby box model</h3>
395+
<div class="figure">
396+
<p><img src="images/r-break-a.gif"
397+
alt="Diagram showing the line breaking opportunity in a complex ruby">
398+
<p class="caption">Ruby line breaking opportunity
399+
</div>
391400

392-
<h3 id="ruby-line-height">
393-
Ruby box and line stacking</h3>
401+
<p>Whether ruby can break between two adjacent <i>ruby bases</i>
402+
is controlled by normal line-breaking rules for the affected text,
403+
exactly as if the <i>ruby bases</i> were regular <i>inline</i> boxes.
394404

395-
<p>The interaction of the ruby box and line stacking is controlled by the
396-
'line-stacking-ruby' property described in the CSS3 Line Module. That property
397-
takes two values: 'include-ruby' and 'exclude-ruby. Depending on the property
398-
value, the ruby box is considered or excluded for line stacking. Even if the
399-
ruby box is considered for line stacking, some values of the
400-
'line-stacking-strategy' property (also described in the CSS3 Line module) can
401-
still create occurrences where a the ruby box will eventually be ignored (e.g.
402-
case where the 'line-stacking-strategy' value is 'block-line-height').</p>
403-
404-
<p>In the following figure, each line box is shown with leading space
405-
distributed before and after the two text segments ('Previous line' and 'Ruby
406-
base'); the dotted lines show the line box for each line. The
407-
'line-stacking-ruby' property is set to 'exclude-ruby'. The achieved effect is
408-
that the ruby box does not affect the line to line spacing. It is however the
409-
responsibility of the style author to avoid 'bleeding' effects between the ruby
410-
text and the surrounding text of images.</p>
405+
<div class="example">
406+
<p>For example, if two adjacent ruby bases are “蝴” and “蝶”,
407+
the line may break between them,
408+
because lines are normally allowed to break between two Han characters.
409+
However, if 'word-break' is ''keep-all'', that line break is forbidden.
410+
</div>
411411

412-
<div class="figure">
413-
<p>
414-
<img class="example"
415-
alt="Diagram showing the ruby text using 2 half leading"
416-
src="images/rlh-a.gif" width="210" height="138" /></p>
412+
<p>Inter-base white space is significant for evaluating line break opportunities between <i>ruby bases</i>.
413+
As with white space between inlines, it collapses when the line breaks there.
417414

418-
<p><b>Figure 3.3.1</b>: Excluded Ruby text</p>
419-
</div>
415+
<div class="example">
416+
<p>For example, given the following markup:
417+
<pre>&lt;ruby>&lt;rb>one&lt;/rb> &lt;rb>two&lt;/rb> &lt;rt>1&lt;/rt> &lt;rt>2&lt;/rt>&lt;/ruby></pre>
418+
<p>Due to the space, the line may break between “one” and “two“.
419+
If the line breaks there, that space disappears,
420+
in accordance with standard CSS white space processing rules. [[CSS3-TEXT]]
421+
</div>
422+
423+
<p>The line <em>must not</em> break between a <i>ruby base</i> and its annotations.
420424

425+
<div class="figure">
426+
<img src="images/r-break-b.gif"
427+
alt='Diagram showing the line breaking opportunity in a "Bopomofo" ruby'>
428+
<p class="caption">''inter-character'' ruby line breaking opportunity
429+
</div>
421430

422-
<p>In the following figure, the line boxes have no extra leading space. The
423-
'line-stacking-ruby' property is set to 'include-ruby' and the
424-
'line-stacking-strategy' property is set to a value where inline boxes are
425-
considered for line stacking. In this case, the line box with
426-
the ruby text is affected and has its 'stack-height' increased by the amount
427-
necessary to fit the ruby text.</p>
431+
<!-- <h3 id="ruby-line-height">
432+
Ruby box and line stacking</h3>
428433
429434
<div class="figure">
430435
<p>
431436
<img class="example"
432-
alt="Diagram showing the ruby text expanding above base text"
433-
src="images/rlh-b.gif" width="210" height="111" /></p>
437+
alt="Diagram showing the ruby text using 2 half leading"
438+
src="images/rlh-a.gif" width="210" height="138" /></p>
434439
435-
<p><b>Figure 3.3.2</b>: Ruby text increasing line height</p>
440+
<p><b>Figure 3.3.1</b>: Excluded Ruby text</p>
436441
</div>
437-
<p>This mechanism allows rendering of evenly spaced lines of text within a
438-
block-level element, whether a line contains ruby or not. The authors need
439-
only to set for the block-level element a line height value larger than the
440-
computed line-height of the largest ruby element within the block.</p>
441-
442-
<h3 id="ruby-line-breaking">
443-
Ruby box and line breaking</h3>
444-
445-
<p>When a ruby falls at the end of a line where there is not sufficient room for the entire ruby to fit on the line, the complex ruby may be broken at locations where boxes of the ruby container align. Some examples are provided below to provide more clarity.</p>
446-
447-
<p>
448-
<img class="example"
449-
alt="Diagram showing the line breaking opportunity in a complex ruby"
450-
src="images/r-break-a.gif" width="408" height="201" /></p>
451-
452-
<p><b>Figure 3.4.1</b>: Complex ruby line breaking opportunity</p>
453-
454-
<p>
455-
<img class="example"
456-
alt='Diagram showing the line breaking opportunity in a "Bopomofo" ruby'
457-
src="images/r-break-b.gif" width="300" height="90" /></p>
442+
-->
458443

459-
<p><b>Figure 3.4.1</b>: "Bopomofo" ruby line breaking opportunity</p>
460-
<p class="issue"><span class="issuehead">Issue:&nbsp;</span> Line breaks should only be allowed within ruby if the ruby base text can be broken at that point. E.g. if complex Ruby is used to annotate the two morphemes of &quot;butterfly&quot;, the fact that we have added ruby annotations should not cause a line breaking opportunity to be present between &quot;butter&quot; and &quot;fly&quot; </p>
461444
<h2 id="ruby-props">
462445
Ruby Properties</h2>
463446

css-ruby/images/r-break-a.gif

15 Bytes
Loading

0 commit comments

Comments
 (0)