8000 [css-ruby] Define auto-hiding behavior for handling furigana. · simonwuelker/csswg-drafts@8a6fdc4 · GitHub
Skip to content

Commit 8a6fdc4

Browse files
fantasaifantasai
committed
[css-ruby] Define auto-hiding behavior for handling furigana.
--HG-- extra : rebase_source : b6f585d12c338f716d5d092e1829cd45f5b75c40
1 parent 101ca2c commit 8a6fdc4

3 files changed

Lines changed: 112 additions & 10 deletions

File tree

‎css-ruby/Overview.html‎

Lines changed: 69 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
line breaking
66
bidi
77
8+
Redo all examples with consistent font. (M+ 2p?)
9+
810
-->
911
<!DOCTYPE html>
1012

@@ -19,7 +21,7 @@
1921

2022
<meta content="CSS Ruby Module Level 1" name=dcterms.title>
2123
<meta content=text name=dcterms.type>
22-
<meta content=2013-06-22 name=dcterms.date>
24+
<meta content=2013-06-25 name=dcterms.date>
2325
<meta content="Elika J. Etemad" name=dcterms.creator>
2426
<meta content="Koji Ishii" name=dcterms.creator>
2527
<meta content="Richard Ishida" name=dcterms.creator>
@@ -40,8 +42,8 @@
4042
<h1 class=p-name>CSS Ruby Module Level 1</h1>
4143

4244
<h2 class="no-num no-toc" id=longstatus-date->Editor's Draft <time
43-
class=dt-updated datetime=20130622>22 June 2013</time>
44-
<!-- for HTML4 doctype: <span class="value-title" title="20130622">22 June 2013</span></span> --></h2>
45+
class=dt-updated datetime=20130625>25 June 2013</time>
46+
<!-- for HTML4 doctype: <span class="value-title" title="20130625">25 June 2013</span></span> --></h2>
4547

4648
<dl>
4749
<dt>This version:
@@ -204,10 +206,13 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
204206
Ruby</a>
205207
</ul>
206208

207-
<li><a href="#white-space"><span class=secno>2.4. </span> White
209+
<li><a href="#autohide"><span class=secno>2.4. </span> Autohiding
210+
Annotations</a>
211+
212+
<li><a href="#white-space"><span class=secno>2.5. </span> White
208213
Space</a>
209214

210-
<li><a href="#line-breaking"><span class=secno>2.5. </span> Ruby box and
215+
<li><a href="#line-breaking"><span class=secno>2.6. </span> Ruby box and
211216
line breaking</a>
212217
</ul>
213218

@@ -646,7 +651,56 @@ <h4 id=nested-pairing><span class=secno>2.3.1. </span> Nested Ruby</h4>
646651
<p class=issue>This shouldn't belong in Level 1. But HTML5 allows it, so we
647652
have to handle it. Yay HTML5.
648653

649-
<h3 id=white-space><span class=secno>2.4. </span> White Space</h3>
654+
<h3 id=autohide><span class=secno>2.4. </span> Autohiding Annotations</h3>
655+
656+
<p>If a <a href="#ruby-annotation-box"><i>ruby annotation</i></a> has the
657+
exact same content as its base, it is <dfn id=hidden
658+
title="hidden ruby annotation | hidden annotation">hidden</dfn>. Hiding a
659+
<a href="#ruby-annotation-box"><i>ruby annotation</i></a> does not affect
660+
annotation pairing or the block-axis positioning of boxes in other <a
661+
href="#level"><i>levels</i></a>. However the <a href="#hidden"><i>hidden
662+
annotation</i></a> is not visible, and it has no impact on layout other
663+
than to separate adjacent sequences of <a
664+
href="#ruby-annotation-box"><i>ruby annotation boxes</i></a> within its
665+
level, as if they belonged to separate segments and the <a
666+
href="#hidden"><i>hidden annotation</i></a>’s base were not a <a
667+
href="#ruby-base-box"><i>ruby base</i></a> but an intervening inline.
668+
669+
<div class=example>
670+
<p>This is to allow correct inlined display of annotations for Japanese
671+
words that are a mix of kanji and hirangana. For example, the word
672+
<i>振り仮名</i> should be inlined as
673+
674+
<p class=figure>振り仮名(ふりがな)
675+
676+
<p>and therefore marked up as
677+
678+
<pre>
679+
<!-- -->&lt;ruby>
680+
<!-- --> &lt;rb>振&lt;/rb>&lt;rb>り&lt;/rb>&lt;rb>仮&lt;/rb>&lt;rb>名&lt;/rb>
681+
<!-- --> &lt;rp>(&lt;/rp>&lt;rt>ふ&lt;/rt>&lt;rt>り&lt;/rt>&lt;rt>が&lt;/rt>&lt;rt>な&lt;/rt>&lt;rp>)&lt;/rp>
682+
<!-- -->&lt;ruby></pre>
683+
684+
<p>However, when displayed as ruby, the “り” should be hidden
685+
686+
<div class=figure>
687+
<p><img
688+
alt="Hiragana annotations for 振り仮名 appear, each above its base character."
689+
src="images/furigana-separate.png">
690+
691+
<p class=caption>Hiragana ruby for 振り仮名
692+
</div>
693+
</div>
694+
695+
<p class=note> Future levels of CSS Ruby may add controls for this, however
696+
in this level it is always forced.
697+
698+
<p>The content comparison for this auto-hiding behavior takes place prior
699+
to white space collapsing. <span class=issue>Is this easier? Or after
700+
collapsing is easier? We should do whatever is easier, as it really
701+
doesn't matter much which way to go. </span>
702+
703+
<h3 id=white-space><span class=secno>2.5. </span> White Space</h3>
650704

651705
<p class=issue>I'm unsure exactly where space should be trimmed. :/ But
652706
pretty sure we need to keep spaces between things, otherwise ruby only
@@ -660,8 +714,8 @@ <h3 id=white-space><span class=secno>2.4. </span> White Space</h3>
660714
only contents. Between <a href="#ruby-segments"><i>ruby segments</i></a>,
661715
between <a href="#ruby-base-box"><i>ruby bases</i></a>, and between <a
662716
href="#ruby-annotation-box"><i>ruby annotations</i></a>, however, white
663-
space is not discarded. If such the white space is <i>collapsible</i>, it
664-
will collapse following the standard <a
717+
space is not discarded. If such white space is <i>collapsible</i>, it will
718+
collapse following the standard <a
665719
href="http://www.w3.org/TR/css3-text/#white-space-rules">white space
666720
processing rules</a>. [[!CSS3-TEXT]] Between <a
667721
href="#ruby-segments"><i>ruby segments</i></a>, however, the contextual
@@ -720,7 +774,7 @@ <h3 id=white-space><span class=secno>2.4. </span> White Space</h3>
720774

721775
<p class=issue>Specify how this impacts layout, or not.
722776

723-
<h3 id=line-breaking><span class=secno>2.5. </span> Ruby box and line
777+
<h3 id=line-breaking><span class=secno>2.6. </span> Ruby box and line
724778
breaking</h3>
725779

726780
<p>When there is not enough space for an entire <a
@@ -1983,6 +2037,12 @@ <h2 class=no-num id=index> Index</h2>
19832037
<li>authoring tool, <a href="#authoring-tool"
19842038
title="section 6.2."><strong>6.2.</strong></a>
19852039

2040+
<li>hidden annotation, <a href="#hidden"
2041+
title="section 2.4."><strong>2.4.</strong></a>
2042+
2043+
<li>hidden ruby annotation, <a href="#hidden"
2044+
title="section 2.4."><strong>2.4.</strong></a>
2045+
19862046
<li>level, <a href="#level" title="section 2.3."><strong>2.3.</strong></a>
19872047

19882048
<li>renderer, <a href="#renderer"

‎css-ruby/Overview.src.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
line breaking
66
bidi
77
8+
Redo all examples with consistent font. (M+ 2p?)
9+
810
-->
911

1012
<!DOCTYPE html>
@@ -381,6 +383,46 @@ <h4 id="nested-pairing">
381383

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

386+
<h3 id="autohide">
387+
Autohiding Annotations</h3>
388+
389+
<p>If a <i>ruby annotation</i> has the exact same content as its base,
390+
it is <dfn title="hidden ruby annotation | hidden annotation">hidden</dfn>.
391+
Hiding a <i>ruby annotation</i> does not affect annotation pairing
392+
or the block-axis positioning of boxes in other <i>levels</i>.
393+
However the <i>hidden annotation</i> is not visible,
394+
and it has no impact on layout
395+
other than to separate adjacent sequences of <i>ruby annotation boxes</i> within its level,
396+
as if they belonged to separate segments
397+
and the <i>hidden annotation</i>’s base were not a <i>ruby base</i> but an intervening inline.
398+
399+
<div class="example">
400+
<p>This is to allow correct inlined display of annotations
401+
for Japanese words that are a mix of kanji and hirangana.
402+
For example, the word <i>振り仮名</i> should be inlined as
403+
<p class="figure">振り仮名(ふりがな)
404+
<p>and therefore marked up as
405+
<pre>
406+
<!-- -->&lt;ruby>
407+
<!-- --> &lt;rb>振&lt;/rb>&lt;rb>り&lt;/rb>&lt;rb>仮&lt;/rb>&lt;rb>名&lt;/rb>
408+
<!-- --> &lt;rp>(&lt;/rp>&lt;rt>ふ&lt;/rt>&lt;rt>り&lt;/rt>&lt;rt>が&lt;/rt>&lt;rt>な&lt;/rt>&lt;rp>)&lt;/rp>
409+
<!-- -->&lt;ruby></pre>
410+
<p>However, when displayed as ruby, the “り” should be hidden
411+
<div class="figure">
412+
<p><img src="images/furigana-separate.png"
413+
alt="Hiragana annotations for 振り仮名 appear, each above its base character.">
414+
<p class="caption">Hiragana ruby for 振り仮名
415+
</div>
416+
</div>
417+
418+
<p class="note">
419+
Future levels of CSS Ruby may add controls for this,
420+
however in this level it is always forced.
421+
422+
<p>The content comparison for this auto-hiding behavior
423+
takes place prior to white space collapsing.
424+
<span class="issue">Is this easier? Or after collapsing is easier? We should do whatever is easier, as it really doesn't matter much which way to go.
425+
384426
<h3 id="white-space">
385427
White Space</h3>
386428

‎default.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ ul.index {
228228
s, del {text-decoration: line-through; color: red}
229229
u, ins {text-decoration: underline; background: #bfa}
230230

231-
div.figure, div.sidefigure, figure {
231+
div.figure, p.figure, div.sidefigure, figure {
232232
text-align: center;
233233
margin: 2.5em 0;
234234
}

0 commit comments

Comments
 (0)