Skip to content

Commit 88bd61e

Browse files
fantasaifantasai
committed
[css-ruby] Define some kind of sensibledefault line-stacking behavior
1 parent 8a6fdc4 commit 88bd61e

2 files changed

Lines changed: 124 additions & 26 deletions

File tree

‎css-ruby/Overview.html‎

Lines changed: 72 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<!--
22
33
Issues:
4-
white space
5-
line breaking
64
bidi
5+
line-stacking
76
87
Redo all examples with consistent font. (M+ 2p?)
98
@@ -214,6 +213,9 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
214213

215214
<li><a href="#line-breaking"><span class=secno>2.6. </span> Ruby box and
216215
line breaking</a>
216+
217+
<li><a href="#line-height"><span class=secno>2.7. </span> Ruby box and
218+
line stacking</a>
217219
</ul>
218220

219221
<li><a href="#ruby-props"><span class=secno>3. </span> Ruby Properties</a>
@@ -737,9 +739,13 @@ <h3 id=white-space><span class=secno>2.5. </span> White Space</h3>
737739
<!-- --> &lt;rt>とう&lt;/rt>&lt;rt>きょう&lt;/rt>
738740
<!-- -->&lt;/ruby></pre>
739741

740-
<p>However, this markup will: <!-- -->&lt;ruby> <!-- -->
741-
&lt;rb>東&lt;/rb> &lt;rb>京&lt;/rb> <!-- --> &lt;rt>とう&lt;/rt>
742-
&lt;rt>きょう&lt;/rt> <!-- -->&lt;/ruby>
742+
<p>However, this markup will:
743+
744+
<pre>
745+
<!-- -->&lt;ruby>
746+
<!-- --> &lt;rb>東&lt;/rb> &lt;rb>京&lt;/rb>
747+
<!-- --> &lt;rt>とう&lt;/rt> &lt;rt>きょう&lt;/rt>
748+
<!-- -->&lt;/ruby></pre>
743749
</div>
744750

745751
<p>Any preserved white space is then wrapped in an anonymous box belonging
@@ -835,18 +841,69 @@ <h3 id=line-breaking><span class=secno>2.6. </span> Ruby box and line
835841
<p class=caption>‘<code class=css>inter-character</code>’ ruby line
836842
breaking opportunity
837843
</div>
838-
<!-- <h3 id="ruby-line-height">
839-
Ruby box and line stacking</h3>
840844

841-
<div class="figure">
842-
<p>
843-
<img class="example"
844-
alt="Diagram showing the ruby text using 2 half leading"
845-
src="images/rlh-a.gif" width="210" height="138" /></p>
845+
<h3 id=line-height><span class=secno>2.7. </span> Ruby box and line
846+
stacking</h3>
847+
848+
<p>The ‘<code class=property>line-height</code>’ property controls
849+
spacing between lines in CSS. When inline content on line is shorter than
850+
the ‘<code class=property>line-height</code>’, half-leading is added
851+
on either side of the content, as specificed in <a
852+
href="http://www.w3.org/TR/CSS21/visudet.html#line-height">CSS2.1§10.8</a>.
853+
<a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
854+
855+
<p>In order to ensure consistent spacing of lines, documents with ruby
856+
typically ensure that the ‘<code class=property>line-height</code>’ is
857+
large enough to accommodate ruby between lines of text. Therefore,
858+
ordinarily, <a href="#ruby-annotation-container-box"><i>ruby annotation
859+
containers</i></a> and <a href="#ruby-annotation-box"><i>ruby annotation
860+
boxes</i></a> do not contribute to the measured height of a line's inline
861+
contents; any alignment (see ‘<code
862+
class=property>vertical-align</code>’) and line-height calculations are
863+
performed using only the <a href="#ruby-base-container-box"><i>ruby base
864+
container</i></a>, exactly as if it were a normal inline.
865+
866+
<p>However, if the ‘<code class=property>line-height</code>’ specified
867+
on the <a href="#ruby-container-box"><i>ruby container</i></a> is less
868+
than the distance between the top of the top <a
869+
href="#ruby-annotation-container-box"><i>ruby annotation container</i></a>
870+
and the bottom of the bottom <a
871+
href="#ruby-annotation-container-box"><i>ruby annotation
872+
container</i></a>, then additional leading is added on the appropriate
873+
side of the <a href="#ruby-base-container-box"><i>ruby base
874+
container</i></a> such that if a block consisted of three lines each
875+
containing ruby identical to this, none of the <a
876+
href="#ruby-container-box"><i>ruby containers</i></a> would overlap.
877+
878+
<p class=note>Note that this does not ensure that the <a
879+
href="#ruby-annotation-box"><i>ruby annotations</i></a> remain within the
880+
line box. It merely ensures that <em>if all lines had equal spacing</em>
881+
and equivalent amounts and positioning of <a
882+
href="#ruby-annotation-box"><i>ruby annotations</i></a>, there would be
883+
enough room to avoid overlap.
884+
885+
<p>Authors should ensure appropriate ‘<code
886+
class=property>line-height</code>’ and ‘<code
887+
class=property>padding</code>’ to accommodate ruby, and be particularly
888+
careful at the beginning or end of a block and when a line contains
889+
inline-level content (such as images, inline blocks, or elements shifted
890+
with ‘<code class=property>vertical-align</code>’) taller than the
891+
paragraph's default font size.
846892

847-
<p><b>Figure 3.3.1</b>: Excluded Ruby text</p>
848-
</div>
849-
-->
893+
<div class=figure>
894+
<p><img
895+
alt="The content of each line sits in the middle of its line height; the additional space on each side is called half-leading. Ruby fits between lines if it is smaller than twice the half-leading, but this means that it occupies space belonging to the half-leading of the previous line."
896+
src="images/rlh-a.gif">
897+
898+
<p class=caption>Ruby annotations will often overflow the line; authors
899+
should ensure content over/under a ruby-annotated line is adequately
900+
spaced to leave room for the ruby.
901+
</div>
902+
903+
<p class=note>More control over how ruby affects alignment and line layout
904+
will be part of the CSS Line Layout Module Level 3. Note, it is currently
905+
in the process of being rewritten; the current drafts should not be relied
906+
upon.
850907

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

‎css-ruby/Overview.src.html‎

Lines changed: 52 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<!--
22
33
Issues:
4-
white space
5-
line breaking
64
bidi
5+
line-stacking
76
87
Redo all examples with consistent font. (M+ 2p?)
98
@@ -453,6 +452,7 @@ <h3 id="white-space">
453452
<!-- --> &lt;rt>とう&lt;/rt>&lt;rt>きょう&lt;/rt>
454453
<!-- -->&lt;/ruby></pre>
455454
<p>However, this markup will:
455+
<pre>
456456
<!-- -->&lt;ruby>
457457
<!-- --> &lt;rb>東&lt;/rb> &lt;rb>京&lt;/rb>
458458
<!-- --> &lt;rt>とう&lt;/rt> &lt;rt>きょう&lt;/rt>
@@ -532,18 +532,59 @@ <h3 id="line-breaking">
532532
<p class="caption">''inter-character'' ruby line breaking opportunity
533533
</div>
534534

535-
<!-- <h3 id="ruby-line-height">
535+
<h3 id="line-height">
536536
Ruby box and line stacking</h3>
537537

538-
<div class="figure">
539-
<p>
540-
<img class="example"
541-
alt="Diagram showing the ruby text using 2 half leading"
542-
src="images/rlh-a.gif" width="210" height="138" /></p>
538+
<p>The 'line-height' property controls spacing between lines in CSS.
539+
When inline content on line is shorter than the 'line-height',
540+
half-leading is added on either side of the content,
541+
as specificed in <a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">CSS2.1&sect;10.8</a>. [[!CSS21]]
542+
543+
<p>In order to ensure consistent spacing of lines,
544+
documents with ruby typically ensure that the 'line-height' is large enough
545+
to accommodate ruby between lines of text.
546+
Therefore, ordinarily, <i>ruby annotation containers</i> and <i>ruby annotation boxes</i>
547+
do not contribute to the measured height of a line's inline contents;
548+
any alignment (see 'vertical-align') and line-height calculations
549+
are performed using only the <i>ruby base container</i>,
550+
exactly as if it were a normal inline.
551+
552+
<p>However, if the 'line-height' specified on the <i>ruby container</i>
553+
is less than the distance between
554+
the top of the top <i>ruby annotation container</i>
555+
and the bottom of the bottom <i>ruby annotation container</i>,
556+
then additional leading is added
557+
on the appropriate side of the <i>ruby base container</i>
558+
such that if a block consisted of three lines
559+
each containing ruby identical to this,
560+
none of the <i>ruby containers</i> would overlap.
561+
562+
<p class="note">Note that this does not ensure that the <i>ruby annotations</i> remain within the line box.
563+
It merely ensures that <em>if all lines had equal spacing</em>
564+
and equivalent amounts and positioning of <i>ruby annotations</i>,
565+
there would be enough room to avoid overlap.
566+
567+
<p>Authors should ensure appropriate 'line-height' and 'padding' to accommodate ruby,
568+
and be particularly careful at the beginning or end of a block
569+
and when a line contains inline-level content
570+
(such as images, inline blocks, or elements shifted with 'vertical-align')
571+
taller than the paragraph's default font size.
543572

544-
<p><b>Figure 3.3.1</b>: Excluded Ruby text</p>
545-
</div>
546-
-->
573+
<div class="figure">
574+
<p><img src="images/rlh-a.gif"
575+
alt="The content of each line sits in the middle of its line height;
576+
the additional space on each side is called half-leading.
577+
Ruby fits between lines if it is smaller than twice the half-leading,
578+
but this means that it occupies space belonging to the half-leading of the previous line.">
579+
<p class="caption">Ruby annotations will often overflow the line;
580+
authors should ensure content over/under a ruby-annotated line
581+
is adequately spaced to leave room for the ruby.
582+
</div>
583+
584+
<p class="note">More control over how ruby affects alignment and line layout
585+
will be part of the CSS Line Layout Module Level 3.
586+
Note, it is currently in the process of being rewritten;
587+
the current drafts should not be relied upon.
547588

548589
<h2 id="ruby-props">
549590
Ruby Properties</h2>

0 commit comments

Comments
 (0)