|
19 | 19 |
|
20 | 20 | <meta content="CSS Ruby Module Level 1" name=dcterms.title>
|
21 | 21 | <meta content=text name=dcterms.type>
|
22 |
| - <meta content=2013-06-20 name=dcterms.date> |
| 22 | + <meta content=2013-06-21 name=dcterms.date> |
23 | 23 | <meta content="Elika J. Etemad" name=dcterms.creator>
|
24 | 24 | <meta content="Koji Ishii" name=dcterms.creator>
|
25 | 25 | <meta content="Richard Ishida" name=dcterms.creator>
|
|
40 | 40 | <h1 class=p-name>CSS Ruby Module Level 1</h1>
|
41 | 41 |
|
42 | 42 | <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> |
45 | 45 |
|
46 | 46 | <dl>
|
47 | 47 | <dt>This version:
|
@@ -204,16 +204,7 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
|
204 | 204 | Ruby</a>
|
205 | 205 | </ul>
|
206 | 206 |
|
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 |
217 | 208 | box and line breaking</a>
|
218 | 209 | </ul>
|
219 | 210 |
|
@@ -652,92 +643,79 @@ <h4 id=nested-pairing><span class=secno>2.3.1. </span> Nested Ruby</h4>
|
652 | 643 | <p class=issue>This shouldn't belong in Level 1. But HTML5 allows it, so we
|
653 | 644 | have to handle it. Yay HTML5.
|
654 | 645 |
|
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> |
686 | 661 |
|
687 | 662 | <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"> |
690 | 666 |
|
691 |
| - <p><b>Figure 3.3.1</b>: Excluded Ruby text |
| 667 | + <p class=caption>Ruby line breaking opportunity |
692 | 668 | </div>
|
693 | 669 |
|
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. |
706 | 675 |
|
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. |
708 | 682 | </div>
|
709 | 683 |
|
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. |
714 | 687 |
|
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: |
717 | 690 |
|
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><ruby><rb>one</rb> <rb>two</rb> <rt>1</rt> <rt>2</rt></ruby></pre> |
722 | 692 |
|
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> |
726 | 697 |
|
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. |
728 | 700 |
|
729 |
| - <p> <img |
| 701 | + <div class=figure> <img |
730 | 702 | alt="Diagram showing the line breaking opportunity in a "Bopomofo" 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> |
732 | 709 |
|
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> |
734 | 715 |
|
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 |
| - "butterfly", the fact that we have added ruby annotations should |
739 |
| - not cause a line breaking opportunity to be present between |
740 |
| - "butter" and "fly" |
| 716 | +<p><b>Figure 3.3.1</b>: Excluded Ruby text</p> |
| 717 | +</div> |
| 718 | +--> |
741 | 719 |
|
742 | 720 | <h2 id=ruby-props><span class=secno>3. </span> Ruby Properties</h2>
|
743 | 721 |
|
|
0 commit comments