[css-ruby] Define auto-hiding behavior for handling furigana.

Mon, 24 Jun 2013 17:43:42 -0700

author
fantasai <fantasai.cvs@inkedblade.net>
date
Mon, 24 Jun 2013 17:43:42 -0700
changeset 8547
04b962156bd3
parent 8546
cea25edf894d
child 8548
0532b1e2bf07

[css-ruby] Define auto-hiding behavior for handling furigana.

css-ruby/Overview.html file | annotate | diff | comparison | revisions
css-ruby/Overview.src.html file | annotate | diff | comparison | revisions
default.css file | annotate | diff | comparison | revisions
     1.1 --- a/css-ruby/Overview.html	Mon Jun 24 14:42:20 2013 -0700
     1.2 +++ b/css-ruby/Overview.html	Mon Jun 24 17:43:42 2013 -0700
     1.3 @@ -5,6 +5,8 @@
     1.4  	line breaking
     1.5  	bidi
     1.6  
     1.7 +Redo all examples with consistent font. (M+ 2p?)
     1.8 +
     1.9  -->
    1.10  <!DOCTYPE html>
    1.11  
    1.12 @@ -19,7 +21,7 @@
    1.13  
    1.14    <meta content="CSS Ruby Module Level 1" name=dcterms.title>
    1.15    <meta content=text name=dcterms.type>
    1.16 -  <meta content=2013-06-22 name=dcterms.date>
    1.17 +  <meta content=2013-06-25 name=dcterms.date>
    1.18    <meta content="Elika J. Etemad" name=dcterms.creator>
    1.19    <meta content="Koji Ishii" name=dcterms.creator>
    1.20    <meta content="Richard Ishida" name=dcterms.creator>
    1.21 @@ -40,8 +42,8 @@
    1.22     <h1 class=p-name>CSS Ruby Module Level 1</h1>
    1.23  
    1.24     <h2 class="no-num no-toc" id=longstatus-date->Editor's Draft <time
    1.25 -    class=dt-updated datetime=20130622>22 June 2013</time>
    1.26 -    <!-- for HTML4 doctype: <span class="value-title" title="20130622">22 June 2013</span></span> --></h2>
    1.27 +    class=dt-updated datetime=20130625>25 June 2013</time>
    1.28 +    <!-- for HTML4 doctype: <span class="value-title" title="20130625">25 June 2013</span></span> --></h2>
    1.29  
    1.30     <dl>
    1.31      <dt>This version:
    1.32 @@ -204,10 +206,13 @@
    1.33          Ruby</a>
    1.34        </ul>
    1.35  
    1.36 -     <li><a href="#white-space"><span class=secno>2.4. </span> White
    1.37 +     <li><a href="#autohide"><span class=secno>2.4. </span> Autohiding
    1.38 +      Annotations</a>
    1.39 +
    1.40 +     <li><a href="#white-space"><span class=secno>2.5. </span> White
    1.41        Space</a>
    1.42  
    1.43 -     <li><a href="#line-breaking"><span class=secno>2.5. </span> Ruby box and
    1.44 +     <li><a href="#line-breaking"><span class=secno>2.6. </span> Ruby box and
    1.45        line breaking</a>
    1.46      </ul>
    1.47  
    1.48 @@ -646,7 +651,56 @@
    1.49    <p class=issue>This shouldn't belong in Level 1. But HTML5 allows it, so we
    1.50     have to handle it. Yay HTML5.
    1.51  
    1.52 -  <h3 id=white-space><span class=secno>2.4. </span> White Space</h3>
    1.53 +  <h3 id=autohide><span class=secno>2.4. </span> Autohiding Annotations</h3>
    1.54 +
    1.55 +  <p>If a <a href="#ruby-annotation-box"><i>ruby annotation</i></a> has the
    1.56 +   exact same content as its base, it is <dfn id=hidden
    1.57 +   title="hidden ruby annotation | hidden annotation">hidden</dfn>. Hiding a
    1.58 +   <a href="#ruby-annotation-box"><i>ruby annotation</i></a> does not affect
    1.59 +   annotation pairing or the block-axis positioning of boxes in other <a
    1.60 +   href="#level"><i>levels</i></a>. However the <a href="#hidden"><i>hidden
    1.61 +   annotation</i></a> is not visible, and it has no impact on layout other
    1.62 +   than to separate adjacent sequences of <a
    1.63 +   href="#ruby-annotation-box"><i>ruby annotation boxes</i></a> within its
    1.64 +   level, as if they belonged to separate segments and the <a
    1.65 +   href="#hidden"><i>hidden annotation</i></a>’s base were not a <a
    1.66 +   href="#ruby-base-box"><i>ruby base</i></a> but an intervening inline.
    1.67 +
    1.68 +  <div class=example>
    1.69 +   <p>This is to allow correct inlined display of annotations for Japanese
    1.70 +    words that are a mix of kanji and hirangana. For example, the word
    1.71 +    <i>振り仮名</i> should be inlined as
    1.72 +
    1.73 +   <p class=figure>振り仮名(ふりがな)
    1.74 +
    1.75 +   <p>and therefore marked up as
    1.76 +
    1.77 +   <pre>
    1.78 +<!--		-->&lt;ruby>
    1.79 +<!--		-->  &lt;rb>振&lt;/rb>&lt;rb>り&lt;/rb>&lt;rb>仮&lt;/rb>&lt;rb>名&lt;/rb>
    1.80 +<!--		-->  &lt;rp>(&lt;/rp>&lt;rt>ふ&lt;/rt>&lt;rt>り&lt;/rt>&lt;rt>が&lt;/rt>&lt;rt>な&lt;/rt>&lt;rp>)&lt;/rp>
    1.81 +<!--		-->&lt;ruby></pre>
    1.82 +
    1.83 +   <p>However, when displayed as ruby, the “り” should be hidden
    1.84 +
    1.85 +   <div class=figure>
    1.86 +    <p><img
    1.87 +     alt="Hiragana annotations for 振り仮名 appear, each above its base character."
    1.88 +     src="images/furigana-separate.png">
    1.89 +
    1.90 +    <p class=caption>Hiragana ruby for 振り仮名
    1.91 +   </div>
    1.92 +  </div>
    1.93 +
    1.94 +  <p class=note> Future levels of CSS Ruby may add controls for this, however
    1.95 +   in this level it is always forced.
    1.96 +
    1.97 +  <p>The content comparison for this auto-hiding behavior takes place prior
    1.98 +   to white space collapsing. <span class=issue>Is this easier? Or after
    1.99 +   collapsing is easier? We should do whatever is easier, as it really
   1.100 +   doesn't matter much which way to go. </span>
   1.101 +
   1.102 +  <h3 id=white-space><span class=secno>2.5. </span> White Space</h3>
   1.103  
   1.104    <p class=issue>I'm unsure exactly where space should be trimmed. :/ But
   1.105     pretty sure we need to keep spaces between things, otherwise ruby only
   1.106 @@ -660,8 +714,8 @@
   1.107     only contents. Between <a href="#ruby-segments"><i>ruby segments</i></a>,
   1.108     between <a href="#ruby-base-box"><i>ruby bases</i></a>, and between <a
   1.109     href="#ruby-annotation-box"><i>ruby annotations</i></a>, however, white
   1.110 -   space is not discarded. If such the white space is <i>collapsible</i>, it
   1.111 -   will collapse following the standard <a
   1.112 +   space is not discarded. If such white space is <i>collapsible</i>, it will
   1.113 +   collapse following the standard <a
   1.114     href="http://www.w3.org/TR/css3-text/#white-space-rules">white space
   1.115     processing rules</a>. [[!CSS3-TEXT]] Between <a
   1.116     href="#ruby-segments"><i>ruby segments</i></a>, however, the contextual
   1.117 @@ -720,7 +774,7 @@
   1.118  
   1.119    <p class=issue>Specify how this impacts layout, or not.
   1.120  
   1.121 -  <h3 id=line-breaking><span class=secno>2.5. </span> Ruby box and line
   1.122 +  <h3 id=line-breaking><span class=secno>2.6. </span> Ruby box and line
   1.123     breaking</h3>
   1.124  
   1.125    <p>When there is not enough space for an entire <a
   1.126 @@ -1983,6 +2037,12 @@
   1.127     <li>authoring tool, <a href="#authoring-tool"
   1.128      title="section 6.2."><strong>6.2.</strong></a>
   1.129  
   1.130 +   <li>hidden annotation, <a href="#hidden"
   1.131 +    title="section 2.4."><strong>2.4.</strong></a>
   1.132 +
   1.133 +   <li>hidden ruby annotation, <a href="#hidden"
   1.134 +    title="section 2.4."><strong>2.4.</strong></a>
   1.135 +
   1.136     <li>level, <a href="#level" title="section 2.3."><strong>2.3.</strong></a>
   1.137  
   1.138     <li>renderer, <a href="#renderer"
     2.1 --- a/css-ruby/Overview.src.html	Mon Jun 24 14:42:20 2013 -0700
     2.2 +++ b/css-ruby/Overview.src.html	Mon Jun 24 17:43:42 2013 -0700
     2.3 @@ -5,6 +5,8 @@
     2.4  	line breaking
     2.5  	bidi
     2.6  
     2.7 +Redo all examples with consistent font. (M+ 2p?)
     2.8 +
     2.9  -->
    2.10  
    2.11  <!DOCTYPE html>
    2.12 @@ -381,6 +383,46 @@
    2.13  
    2.14  	<p class="issue">This shouldn't belong in Level 1. But HTML5 allows it, so we have to handle it. Yay HTML5.
    2.15  
    2.16 +<h3 id="autohide">
    2.17 +Autohiding Annotations</h3>
    2.18 +
    2.19 +	<p>If a <i>ruby annotation</i> has the exact same content as its base,
    2.20 +	it is <dfn title="hidden ruby annotation | hidden annotation">hidden</dfn>.
    2.21 +	Hiding a <i>ruby annotation</i> does not affect annotation pairing
    2.22 +	or the block-axis positioning of boxes in other <i>levels</i>.
    2.23 +	However the <i>hidden annotation</i> is not visible,
    2.24 +	and it has no impact on layout
    2.25 +	other than to separate adjacent sequences of <i>ruby annotation boxes</i> within its level,
    2.26 +	as if they belonged to separate segments
    2.27 +	and the <i>hidden annotation</i>’s base were not a <i>ruby base</i> but an intervening inline.
    2.28 +
    2.29 +	<div class="example">
    2.30 +		<p>This is to allow correct inlined display of annotations
    2.31 +		for Japanese words that are a mix of kanji and hirangana.
    2.32 +		For example, the word <i>振り仮名</i> should be inlined as
    2.33 +		<p class="figure">振り仮名(ふりがな)
    2.34 +		<p>and therefore marked up as
    2.35 +		<pre>
    2.36 +<!--		-->&lt;ruby>
    2.37 +<!--		-->  &lt;rb>振&lt;/rb>&lt;rb>り&lt;/rb>&lt;rb>仮&lt;/rb>&lt;rb>名&lt;/rb>
    2.38 +<!--		-->  &lt;rp>(&lt;/rp>&lt;rt>ふ&lt;/rt>&lt;rt>り&lt;/rt>&lt;rt>が&lt;/rt>&lt;rt>な&lt;/rt>&lt;rp>)&lt;/rp>
    2.39 +<!--		-->&lt;ruby></pre>
    2.40 +		<p>However, when displayed as ruby, the “り” should be hidden
    2.41 +		<div class="figure">
    2.42 +			<p><img src="images/furigana-separate.png"
    2.43 +			        alt="Hiragana annotations for 振り仮名 appear, each above its base character.">
    2.44 +			<p class="caption">Hiragana ruby for 振り仮名
    2.45 +		</div>
    2.46 +	</div>
    2.47 +
    2.48 +	<p class="note">
    2.49 +		Future levels of CSS Ruby may add controls for this,
    2.50 +		however in this level it is always forced.
    2.51 +
    2.52 +	<p>The content comparison for this auto-hiding behavior
    2.53 +	takes place prior to white space collapsing.
    2.54 +	<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.
    2.55 +
    2.56  <h3 id="white-space">
    2.57  White Space</h3>
    2.58  
     3.1 --- a/default.css	Mon Jun 24 14:42:20 2013 -0700
     3.2 +++ b/default.css	Mon Jun 24 17:43:42 2013 -0700
     3.3 @@ -228,7 +228,7 @@
     3.4  s, del {text-decoration: line-through; color: red}
     3.5  u, ins {text-decoration: underline; background: #bfa}
     3.6  
     3.7 -div.figure, div.sidefigure, figure {
     3.8 +div.figure, p.figure, div.sidefigure, figure {
     3.9  	text-align: center;
    3.10  	margin: 2.5em 0;
    3.11  }

mercurial