You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
we might want to limit (via the at-risk list) CSS Ruby Layout Level 1, like HTML5,
199
-
to two levels of annotation.
200
-
Subsequent levels would be inlined immediately after their ruby segment.
201
-
(Not sure how to represent that limitation in <code>@supports</code>, though.)
202
-
203
-
<p>FWIW, the main complexity item of concern with >2 levels is nested ruby.
204
-
The next most complex feature, after nested ruby,
205
-
is allowing two levels of ruby on the same side of the text.
206
-
Removing either of these features, however, boxes us into a corner.
207
-
By removing nested ruby handling,
208
-
we’d create a dependency on nested ruby not being handled optimally
209
-
(unless we did something dumb and always obviously broken somehow).
210
-
By forcing a second annotation to be on the opposite side of the first,
211
-
we create an assumption that it can never be placed on the same side,
212
-
and that <aclass=propertydata-link-type=propdeschref=#propdef-ruby-positiontitle=ruby-position>ruby-position</a> rules that would place the second annotation
(Corresponds to HTML/XHTML <code><rtc></code> elements.)
367
348
</dl>
368
349
369
-
<p><adata-link-type=dfnhref=#ruby-containertitle="ruby containers">Ruby containers</a> are non-atomic inline-level boxes:
370
-
like inline boxes, they break across lines and
371
-
their base-level contents participate in the same inline formatting context as the <adata-link-type=dfnhref=#ruby-containertitle="ruby container">ruby container</a> itself.
350
+
<pclass=advisement>Authors using a language (such as HTML)
351
+
that supports dedicated ruby markup
352
+
should use that markup rather than
353
+
styling arbitrary elements (like <code><span></code>)
354
+
with ruby <aclass=propertydata-link-type=propdeschref=#propdef-displaytitle=display>display</a> values.
355
+
Using the correct markup ensures that screen readers
356
+
and non-CSS renderers can interpret the ruby structures.
The Ruby Formatting Context</span><aclass=self-linkhref=#formatting-context></a></h4>
360
+
361
+
<p><adata-link-type=dfnhref=#ruby-containertitle="ruby containers">Ruby containers</a> are non-atomic inline-level boxes.
362
+
Like inline boxes, they break across lines,
363
+
and their containing block is the nearest block container ancestor.
364
+
And just as the contents of an inline box
365
+
participate in the same inline formatting context that contains the inline box itself,
366
+
a <adata-link-type=dfnhref=#ruby-containertitle="ruby container">ruby container</a> and its base-level contents
367
+
participate in the same inline formatting context that contains the <adata-link-type=dfnhref=#ruby-containertitle="ruby container">ruby container</a> itself,
368
+
369
+
<p>However <adata-link-type=dfnhref=#ruby-containertitle="ruby containers">ruby containers</a> also establish a <dfndata-dfn-type=dfndata-noexport="" id=ruby-formatting-context>ruby formatting context<aclass=self-linkhref=#ruby-formatting-context></a></dfn>
370
+
that builds further structure around their segment of the inline formatting context.
372
371
<adata-link-type=dfnhref=#ruby-base-boxtitle="ruby bases">Ruby bases</a>, <adata-link-type=dfnhref=#ruby-annotation-boxtitle="ruby annotations">ruby annotations</a>, <adata-link-type=dfnhref=#ruby-base-container-boxtitle="ruby base containers">ruby base containers</a>, and <adata-link-type=dfnhref=#ruby-annotation-container-boxtitle="ruby annotation containers">ruby annotation containers</a>
373
372
are <dfndata-dfn-type=dfndata-noexport="" id=internal-ruby-boxestitle="internal ruby boxes|internal ruby display types">internal ruby boxes<aclass=self-linkhref=#internal-ruby-boxes></a></dfn>:
374
373
like <idata-link-type=dfntitle="internal table elements">internal table elements</i>,
and participate in their <adata-link-type=dfnhref=#ruby-containertitle="ruby container">ruby container</a>’s <adata-link-type=dfnhref=#ruby-formatting-contexttitle="ruby formatting context">ruby formatting context</a>.
377
376
378
-
<p>Authors using a language (such as HTML) that supports ruby markup
379
-
should use that markup rather than styling arbitrary elements (like <code><span></code>)
380
-
with ruby <aclass=propertydata-link-type=propdeschref=#propdef-displaytitle=display>display</a> values.
381
-
Using the correct markup ensures that screen readers
382
-
and non-CSS renderers can interpret the ruby structures.
Ruby-specific <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-display-3/#propdef-display-insidetitle=display-inside>display-inside</a> and <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-display-3/#propdef-display-outsidetitle=display-outside>display-outside</a> values</span><aclass=self-linkhref=#display-inside-outside></a></h4>
386
381
387
382
<p>The ruby-specific <aclass=propertydata-link-type=propdeschref=#propdef-displaytitle=display>display</a> values map to <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-display-3/#propdef-display-insidetitle=display-inside>display-inside</a> and <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-display-3/#propdef-display-outsidetitle=display-outside>display-outside</a> as follows:
<p>See the <ahref=http://www.w3.org/TR/css-display/>CSS Display Module</a>
412
407
for more information on <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-display-3/#propdef-display-insidetitle=display-inside>display-inside</a> and <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-display-3/#propdef-display-outsidetitle=display-outside>display-outside</a>. <adata-biblio-type=normativedata-link-type=bibliohref=#biblio-css3-displaytitle=biblio-css3-display>[CSS3-DISPLAY]</a>
<p>If an element has a computed <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-display-3/#propdef-display-insidetitle=display-inside>display-inside</a> of <aclass=cssdata-link-type=maybehref=#rubytitle=ruby>ruby</a>
Note: There is no dedicated block-level <aclass=propertydata-link-type=propdeschref=#propdef-displaytitle=display>display</a> shorthand keyword
429
424
because ruby is fundamentally an inline layout feature.
430
-
<spanclass=issueid=issue-feac3754><aclass=self-linkhref=#issue-feac3754></a>We might need one to handle <aclass=propertydata-link-type=propdeschref=#propdef-displaytitle=display>display</a> blockification, though. :(</span>
431
425
432
426
<p>Absolute positioning or floating an element causes its <aclass=propertydata-link-type=propdeschref=#propdef-displaytitle=display>display</a> value
433
427
to compute to a block-level equivalent. (See <adata-biblio-type=normativedata-link-type=bibliohref=#biblio-css21title=biblio-css21>[CSS21]</a> section 9.7.)
<tr><thscope=row><aclass=css-codedata-link-type=propertyhref=#propdef-ruby-aligntitle=ruby-align>ruby-align</a><td>start | center | space-between | space-around<td>space-around<td>ruby bases, ruby annotations, ruby base containers, ruby annotation containers<td>yes<td>N/A<td>visual<td><td><td>specified value (except for initial and inherit)<td></table></div>
we might want to limit (via the at-risk list) CSS Ruby Layout Level 1, like HTML5,
1754
-
to two levels of annotation.
1755
-
Subsequent levels would be inlined immediately after their ruby segment.
1756
-
(Not sure how to represent that limitation in <code>@supports</code>, though.)
1757
-
1758
-
<p>FWIW, the main complexity item of concern with >2 levels is nested ruby.
1759
-
The next most complex feature, after nested ruby,
1760
-
is allowing two levels of ruby on the same side of the text.
1761
-
Removing either of these features, however, boxes us into a corner.
1762
-
By removing nested ruby handling,
1763
-
we’d create a dependency on nested ruby not being handled optimally
1764
-
(unless we did something dumb and always obviously broken somehow).
1765
-
By forcing a second annotation to be on the opposite side of the first,
1766
-
we create an assumption that it can never be placed on the same side,
1767
-
and that <aclass=propertydata-link-type=propdeschref=#propdef-ruby-positiontitle=ruby-position>ruby-position</a> rules that would place the second annotation
Note: There is no dedicated block-level <aclass=propertydata-link-type=propdeschref=#propdef-displaytitle=display>display</a> shorthand keyword
1775
-
because ruby is fundamentally an inline layout feature.
1776
-
<spanclass=issue>We might need one to handle <aclass=propertydata-link-type=propdeschref=#propdef-displaytitle=display>display</a> blockification, though. :(</span>
1777
-
1778
-
<ahref=#issue-b4dd0f5f> ↵ </a></div><divclass=issue>We might need one to handle <aclass=propertydata-link-type=propdeschref=#propdef-displaytitle=display>display</a> blockification, though. :(<ahref=#issue-feac3754> ↵ </a></div>
0 commit comments