Skip to content

Commit 2bc0f28

Browse files
fantasaifantasai
committed
[css-ruby] Clarify display roles of ruby-specific display types
1 parent 355862e commit 2bc0f28

File tree

2 files changed

+89
-16
lines changed

2 files changed

+89
-16
lines changed

‎css-ruby/Overview.html

+46-9
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</p>
5555
<h1 class="p-name no-ref" id=title>CSS Inter-linear (Ruby) Annotation Layout Module Level 1</h1>
5656
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
57-
<span class=dt-updated><span class=value-title title=20140629>29 June 2014</span></span></span></h2>
57+
<span class=dt-updated><span class=value-title title=20140702>2 July 2014</span></span></span></h2>
5858
<div data-fill-with=spec-metadata><dl>
5959
<dt>This version:
6060
<dd><a class=u-url href=http://dev.w3.org/csswg/css-ruby-1/>http://dev.w3.org/csswg/css-ruby-1/</a>
@@ -130,7 +130,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
130130
<ul class=toc>
131131
<li><a href=#ruby-display><span class=secno>2.1</span> Ruby-specific <span>display</span> Values</a>
132132
<ul class=toc>
133-
<li><a href=#block-ruby><span class=secno>2.1.1</span> Block-level Ruby</a></ul>
133+
<li><a href=#display-inside-outside><span class=secno>2.1.1</span> Ruby-specific <span>display-inside</span> and <span>display-outside</span> values</a></ul>
134134
<li><a href=#box-fixup><span class=secno>2.2</span> Anonymous Ruby Box Generation</a>
135135
<li><a href=#ruby-pairing><span class=secno>2.3</span> Annotation Pairing</a>
136136
<ul class=toc>
@@ -365,16 +365,49 @@ <h3 class="heading settled heading" data-level=2.1 id=ruby-display><span class=s
365365
(Corresponds to HTML/XHTML <code>&lt;rtc&gt;</code> elements.)
366366
</dl>
367367

368+
<p><a data-link-type=dfn href=#ruby-container title="ruby containers">Ruby containers</a> are non-atomic inline-level boxes:
369+
like inline boxes, they break across lines and
370+
their base-level contents participate in the same inline formatting context as the <a data-link-type=dfn href=#ruby-container title="ruby container">ruby container</a> itself.
371+
<a data-link-type=dfn href=#ruby-base-box title="ruby bases">Ruby bases</a>, <a data-link-type=dfn href=#ruby-annotation-box title="ruby annotations">ruby annotations</a>, <a data-link-type=dfn href=#ruby-base-container-box title="ruby base containers">ruby base containers</a>, and <a data-link-type=dfn href=#ruby-annotation-container-box title="ruby annotation containers">ruby annotation containers</a>
372+
are <dfn data-dfn-type=dfn data-noexport="" id=internal-ruby-boxes>internal ruby boxes<a class=self-link href=#internal-ruby-boxes></a></dfn>:
373+
like <i data-link-type=dfn title="internal table elements">internal table elements</i>,
374+
they have specific roles in ruby layout.
375+
<span class=issue id=issue-ca88244c><a class=self-link href=#issue-ca88244c></a>Are internal ruby boxes inline-level?</span>
376+
368377
<p>Authors using a language (such as HTML) that supports ruby markup
369378
should use that markup rather than styling arbitrary elements (like <code>&lt;span&gt;</code>)
370379
with ruby <a class=property data-link-type=propdesc href=#propdef-display title=display>display</a> values.
371380
Using the correct markup ensures that screen readers
372381
and non-CSS renderers can interpret the ruby structures.
373382

374-
<h4 class="heading settled heading" data-level=2.1.1 id=block-ruby><span class=secno>2.1.1 </span><span class=content>
375-
Block-level Ruby</span><a class=self-link href=#block-ruby></a></h4>
383+
<h4 class="heading settled heading" data-level=2.1.1 id=display-inside-outside><span class=secno>2.1.1 </span><span class=content>
384+
Ruby-specific <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-inside title=display-inside>display-inside</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-outside title=display-outside>display-outside</a> values</span><a class=self-link href=#display-inside-outside></a></h4>
385+
386+
<p>The ruby-specific <a class=property data-link-type=propdesc href=#propdef-display title=display>display</a> values map to <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-inside title=display-inside>display-inside</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-outside title=display-outside>display-outside</a> as follows:
387+
<table class=data>
388+
<thead>
389+
<tr><th><a class=property data-link-type=propdesc href=#propdef-display title=display>display</a>
390+
<th><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-inside title=display-inside>display-inside</a>
391+
<th><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-outside title=display-outside>display-outside</a>
392+
<tbody>
393+
<tr><td><a class=css data-link-type=maybe href=#ruby title=ruby>ruby</a>
394+
<td><span class=css data-link-type=maybe title=inline-level>inline-level</span>
395+
<td><a class=css data-link-type=maybe href=#ruby title=ruby>ruby</a>
396+
<tr><td><span class=css data-link-type=maybe title=ruby-base>ruby-base</span>
397+
<td><span class=css data-link-type=maybe title=ruby-base>ruby-base</span>
398+
<td><span class=css data-link-type=maybe title=auto>auto</span>
399+
<tr><td><span class=css data-link-type=maybe title=ruby-text>ruby-text</span>
400+
<td><span class=css data-link-type=maybe title=ruby-text>ruby-text</span>
401+
<td><span class=css data-link-type=maybe title=auto>auto</span>
402+
<tr><td><span class=css data-link-type=maybe title=ruby-base-container>ruby-base-container</span>
403+
<td><span class=css data-link-type=maybe title=ruby-base-container>ruby-base-container</span>
404+
<td><span class=css data-link-type=maybe title=auto>auto</span>
405+
<tr><td><span class=css data-link-type=maybe title=ruby-text-container>ruby-text-container</span>
406+
<td><span class=css data-link-type=maybe title=ruby-text-container>ruby-text-container</span>
407+
<td><span class=css data-link-type=maybe title=auto>auto</span>
408+
</table>
376409

377-
<p>If an element has a computed <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-inside title=display-inside>display-inside</a> of <a class=css data-link-type=maybe href=#ruby title=ruby>ruby</a>
410+
<p id=block-ruby>If an element has a computed <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-inside title=display-inside>display-inside</a> of <a class=css data-link-type=maybe href=#ruby title=ruby>ruby</a>
378411
and a computed <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-outside title=display-outside>display-outside</a> other than <span class=css data-link-type=maybe title=inline-level>inline-level</span>,
379412
then it generates two boxes:
380413
a principal block container box of the required <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-outside title=display-outside>display-outside</a> type,
@@ -384,10 +417,9 @@ <h4 class="heading settled heading" data-level=2.1.1 id=block-ruby><span class=s
384417
This allows styling the element as a block,
385418
while correctly maintaining the internal ruby structure.
386419

420+
387421
<p>See the <a href=http://www.w3.org/TR/css-display/>CSS Display Module</a>
388-
for more information on <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-inside title=display-inside>display-inside</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-outside title=display-outside>display-outside</a>.
389-
Note: There is no dedicated block-level <a class=property data-link-type=propdesc href=#propdef-display title=display>display</a> keyword
390-
because ruby is fundamentally an inline layout feature.
422+
for more information on <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-inside title=display-inside>display-inside</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-display-3/#propdef-display-outside title=display-outside>display-outside</a>. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-display title=biblio-css3-display>[CSS3-DISPLAY]</a>
391423

392424
<h3 class="heading settled heading" data-level=2.2 id=box-fixup><span class=secno>2.2 </span><span class=content>
393425
Anonymous Ruby Box Generation</span><a class=self-link href=#box-fixup></a></h3>
@@ -421,6 +453,7 @@ <h3 class="heading settled heading" data-level=2.2 id=box-fixup><span class=secn
421453

422454
<li id=anon-gen-bare-inlines><a class=self-link href=#anon-gen-bare-inlines></a><strong>Wrap misparented inline-level content:</strong>
423455
Any consecutive sequence of text and inline-level boxes
456+
(that are not <a data-link-type=dfn href=#ruby-container title="ruby containers">ruby containers</a> or <a data-link-type=dfn href=#internal-ruby-boxes title="internal ruby boxes">internal ruby boxes</a>)
424457
directly parented by a <a data-link-type=dfn href=#ruby-container title="ruby container">ruby container</a> or <a data-link-type=dfn href=#ruby-base-container-box title="ruby base container">ruby base container</a>
425458
is wrapped in an anonymous <a data-link-type=dfn href=#ruby-base-box title="ruby base">ruby base</a>.
426459
Similarly, any consecutive sequence of text and inline-level boxes
@@ -1575,6 +1608,7 @@ <h3 class="no-num no-ref heading settled heading" id=normative><span class=conte
15751608
Normative References</span><a class=self-link href=#normative></a></h3>
15761609
<div data-fill-with=normative-references><dl>
15771610
<dt id=biblio-css21 title=CSS21><a class=self-link href=#biblio-css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a></dd>
1611+
<dt id=biblio-css3-display title=CSS3-DISPLAY><a class=self-link href=#biblio-css3-display></a>[CSS3-DISPLAY]<dd>Tab Atkins. <a href=http://www.w3.org/TR/2014/WD-css-display-3-20140220/>CSS Display Module Level 3</a>. 20 February 2014. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2014/WD-css-display-3-20140220/>http://www.w3.org/TR/2014/WD-css-display-3-20140220/</a></dd>
15781612
<dt id=biblio-css3text title=CSS3TEXT><a class=self-link href=#biblio-css3text></a>[CSS3TEXT]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-text-20121113/>CSS Text Module Level 3</a>. 13 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-text-20121113/>http://www.w3.org/TR/2012/WD-css3-text-20121113/</a></dd>
15791613
<dt id=biblio-rfc2119 title=RFC2119><a class=self-link href=#biblio-rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dd>
15801614
</dl></div>
@@ -1604,6 +1638,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
16041638
<li>inter-base white space, <a href=#inter-base-white-space title="section 2.2">2.2</a>
16051639
<li>inter-character, <a href=#valdef-ruby-position.inter-character title="section 4.1">4.1</a>
16061640
<li>inter-level white space, <a href=#inter-level-white-space title="section 2.2">2.2</a>
1641+
<li>internal ruby boxes, <a href=#internal-ruby-boxes title="section 2.1">2.1</a>
16071642
<li>inter-segment white space, <a href=#inter-segment-white-space title="section 2.2">2.2</a>
16081643
<li>intra-level white space, <a href=#intra-level-white-space title="section 2.2">2.2</a>
16091644
<li>intra-ruby white space, <a href=#intra-ruby-white-space title="section 2.2">2.2</a>
@@ -1669,7 +1704,9 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
16691704
on the same side as the first have no effect.
16701705
</p><a href=#issue-8c07d92e> ↵ </a></div>
16711706

1672-
<div class=issue>The goal of this is to simplify the layout model by suppressing any line breaks within ruby annotations.
1707+
<div class=issue>Are internal ruby boxes inline-level?<a href=#issue-ca88244c> ↵ </a></div>
1708+
1709+
<div class=issue>The goal of this is to simplify the layout model by suppressing any line breaks within ruby annotations.
16731710
Alternatively we could try to define some kind of acceptable behavior for them.
16741711
<a href=#issue-8af70305> ↵ </a></div><div class=issue>Make this into an example:
16751712
<img src=http://lists.w3.org/Archives/Public/www-archive/2014Jun/att-0027/PastedGraphic-1.png style="display: block; width: 100%">

‎css-ruby/Overview.src.html

+43-7
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h1>CSS Inter-linear (Ruby) Annotation Layout Module Level 1</h1>
1313
Abstract: Inter-linear annotations, also known as “ruby”, are short runs of text alongside the base text,
1414
Abstract: typically used in East Asian documents to indicate pronunciation or to provide a short annotation.
1515
Abstract: This module describes the rendering model and formatting controls related to displaying ruby annotations in CSS.
16-
Ignored terms: collapsible, collapsible white space, white space, segment break, soft wrap opportunity, justification opportunity, justification opportunities, characters
16+
Ignored terms: collapsible, collapsible white space, white space, segment break, soft wrap opportunity, justification opportunity, justification opportunities, characters, internal table elements
1717
</pre>
1818

1919
<!--
@@ -208,16 +208,49 @@ <h3 id="ruby-display">
208208
(Corresponds to HTML/XHTML <code>&lt;rtc&gt;</code> elements.)
209209
</dl>
210210

211+
<p><i>Ruby containers</i> are non-atomic inline-level boxes:
212+
like inline boxes, they break across lines and
213+
their base-level contents participate in the same inline formatting context as the <i>ruby container</i> itself.
214+
<i>Ruby bases</i>, <i>ruby annotations</i>, <i>ruby base containers</i>, and <i>ruby annotation containers</i>
215+
are <dfn>internal ruby boxes</dfn>:
216+
like <i>internal table elements</i>,
217+
they have specific roles in ruby layout.
218+
<span class="issue">Are internal ruby boxes inline-level?</span>
219+
211220
<p>Authors using a language (such as HTML) that supports ruby markup
212221
should use that markup rather than styling arbitrary elements (like <code>&lt;span&gt;</code>)
213222
with ruby 'display' values.
214223
Using the correct markup ensures that screen readers
215224
and non-CSS renderers can interpret the ruby structures.
216225

217-
<h4 id="block-ruby">
218-
Block-level Ruby</h4>
226+
<h4 id="display-inside-outside">
227+
Ruby-specific 'display-inside' and 'display-outside' values</h4>
228+
229+
<p>The ruby-specific 'display' values map to 'display-inside' and 'display-outside' as follows:
230+
<table class="data">
231+
<thead>
232+
<tr><th>'display'
233+
<th>'display-inside'
234+
<th>'display-outside'
235+
<tbody>
236+
<tr><td>''ruby''
237+
<td>''inline-level''
238+
<td>''ruby''
239+
<tr><td>''ruby-base''
240+
<td>''ruby-base''
241+
<td>''auto''
242+
<tr><td>''ruby-text''
243+
<td>''ruby-text''
244+
<td>''auto''
245+
<tr><td>''ruby-base-container''
246+
<td>''ruby-base-container''
247+
<td>''auto''
248+
<tr><td>''ruby-text-container''
249+
<td>''ruby-text-container''
250+
<td>''auto''
251+
</table>
219252

220-
<p>If an element has a computed 'display-inside' of ''ruby''
253+
<p id="block-ruby">If an element has a computed 'display-inside' of ''ruby''
221254
and a computed 'display-outside' other than ''inline-level'',
222255
then it generates two boxes:
223256
a principal block container box of the required 'display-outside' type,
@@ -226,11 +259,13 @@ <h4 id="block-ruby">
226259
(and if inheritable, inherit to the <i>ruby container box</i>).
227260
This allows styling the element as a block,
228261
while correctly maintaining the internal ruby structure.
262+
<!--
263+
Note: There is no dedicated block-level 'display' shorthand keyword
264+
because ruby is fundamentally an inline layout feature.
265+
-->
229266

230267
<p>See the <a href="http://www.w3.org/TR/css-display/">CSS Display Module</a>
231-
for more information on 'display-inside' and 'display-outside'.
232-
Note: There is no dedicated block-level 'display' keyword
233-
because ruby is fundamentally an inline layout feature.
268+
for more information on 'display-inside' and 'display-outside'. [[!CSS3-DISPLAY]]
234269

235270
<h3 id="box-fixup">
236271
Anonymous Ruby Box Generation</h3>
@@ -264,6 +299,7 @@ <h3 id="box-fixup">
264299

265300
<li id="anon-gen-bare-inlines"><strong>Wrap misparented inline-level content:</strong>
266301
Any consecutive sequence of text and inline-level boxes
302+
(that are not <i>ruby containers</i> or <i>internal ruby boxes</i>)
267303
directly parented by a <i>ruby container</i> or <i>ruby base container</i>
268304
is wrapped in an anonymous <i>ruby base</i>.
269305
Similarly, any consecutive sequence of text and inline-level boxes

0 commit comments

Comments
 (0)