Skip to content

Commit 7750409

Browse files
fantasaifantasai
committed
[css-ruby] Add default UA style sheet and other useful style sheets.
1 parent 2ad3511 commit 7750409

2 files changed

Lines changed: 153 additions & 51 deletions

File tree

‎css-ruby/Overview.html‎

Lines changed: 102 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -206,25 +206,34 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
206206
the ‘<code class=property>ruby-align</code>’ property</a>
207207
</ul>
208208

209-
<li><a href="#profiles"><span class=secno>4. </span> Profiles</a>
209+
<li class=no-num><a href="#default-stylesheet"> Appendix A: Default Style
210+
Sheet</a>
211+
<ul class=toc>
212+
<li class=no-num><a href="#default-ua-ruby"> Supporting Ruby Layout</a>
213+
214+
<li class=no-num><a href="#default-inline"> Inlining Ruby
215+
Annotations</a>
216+
217+
<li class=no-num><a href="#default-parens"> Generating Parentheses</a>
218+
</ul>
210219

211-
<li><a href="#glossary"><span class=secno>5. </span> Glossary</a>
220+
<li><a href="#glossary"><span class=secno>4. </span> Glossary</a>
212221

213-
<li><a href="#conformance"><span class=secno>6. </span> Conformance</a>
222+
<li><a href="#conformance"><span class=secno>5. </span> Conformance</a>
214223
<ul class=toc>
215-
<li><a href="#conventions"><span class=secno>6.1. </span> Document
224+
<li><a href="#conventions"><span class=secno>5.1. </span> Document
216225
conventions</a>
217226

218-
<li><a href="#conformance-classes"><span class=secno>6.2. </span>
227+
<li><a href="#conformance-classes"><span class=secno>5.2. </span>
219228
Conformance classes</a>
220229

221-
<li><a href="#partial"><span class=secno>6.3. </span> Partial
230+
<li><a href="#partial"><span class=secno>5.3. </span> Partial
222231
implementations</a>
223232

224-
<li><a href="#experimental"><span class=secno>6.4. </span> Experimental
233+
<li><a href="#experimental"><span class=secno>5.4. </span> Experimental
225234
implementations</a>
226235

227-
<li><a href="#testing"><span class=secno>6.5. </span> Non-experimental
236+
<li><a href="#testing"><span class=secno>5.5. </span> Non-experimental
228237
implementations</a>
229238
</ul>
230239

@@ -1312,34 +1321,69 @@ <h3 id="rubyspan">
13121321
&lt;myrt rbspan=&quot;3&quot;&gt;Expiration Date&lt;/myrt&gt;
13131322
&lt;/myrtc&gt;
13141323
&lt;/myruby&gt;</pre>
1315-
1316-
<p class="issue"><span class="issuehead">Issue: </span> The i18n WG has requested the addition of a sample user agent default style sheet, as promised by Ruby Annotation section 3.4. See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20Default+stylesheet&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this thread</a>.</p>
13171324
-->
13181325

1319-
<h2 id=profiles><span class=secno>4. </span> Profiles</h2>
1326+
<h2 class=no-num id=default-stylesheet> Appendix A: Default Style Sheet</h2>
1327+
1328+
<p><em>This section is informative.</em>
1329+
1330+
<h3 class=no-num id=default-ua-ruby> Supporting Ruby Layout</h3>
1331+
1332+
<p>The following represents a default UA style sheet for rendering HTML
1333+
and XHTML ruby markup as ruby layout:
1334+
1335+
<pre>
1336+
<!-- -->ruby { display: ruby; }
1337+
<!-- -->rb { display: ruby-base; white-space: nowrap; }
1338+
<!-- -->rt { display: ruby-text; white-space: nowrap; font-size: 50%; }
1339+
<!-- -->rbc { display: ruby-base-container; }
1340+
<!-- -->rtc { display: ruby-text-container; }</pre>
1341+
1342+
<p>Additional rules for UAs supporting the relevant features of <a
1343+
href="#CSS3-TEXT-DECOR"
1344+
rel=biblioentry>[CSS3-TEXT-DECOR]<!--{{CSS3-TEXT-DECOR}}--></a> and <a
1345+
href="#CSS3-FONTS"
1346+
rel=biblioentry>[CSS3-FONTS]<!--{{CSS3-FONTS}}--></a>:
1347+
1348+
<pre>rt { font-variant-east-asian: ruby; text-emphasis: none; }</pre>
1349+
1350+
<p class=note>Authors should not use the above rules; a UA that supports
1351+
ruby layout should provide these by default.
1352+
1353+
<h3 class=no-num id=default-inline> Inlining Ruby Annotations</h3>
13201354

1321-
<p>There are two modules defined by this module:
1355+
<p>The following represents a sample style sheet for rendering HTML and
1356+
XHTML ruby markup as inline annotations:
13221357

1323-
<p>CSS3 Simple Ruby model
1358+
<pre>ruby, rb, rt, rbc, rtc, rp {
1359+
<!-- --> display: inline; white-space: inherit;
1360+
<!-- --> font-variant-east-asian: inherit; text-emphasis: inherit; }</pre>
13241361

1325-
<p>CSS3 Complex Ruby model.
1362+
<h3 class=no-num id=default-parens> Generating Parentheses</h3>
13261363

1327-
<p>They both contain all the properties specified by this CSS chapter,
1328-
i.e. <a href="#rubyalign">‘<code
1329-
class=property>ruby-align</code>’</a>, <a href="#rubyover">‘<code
1330-
class=property>ruby-overhang</code>’</a>, <a href="#rubypos">‘<code
1331-
class=property>ruby-position</code>’</a> and <a
1332-
href="#rubyspan">‘<code class=property>ruby-span</code>’</a>. They
1333-
differ by the required ‘<code class=property>display</code>’
1334-
property values. The Simple Ruby model requires the values: ‘<a
1335-
href="#ruby"><code class=property>ruby</code></a>’, ‘<code
1336-
class=property>ruby-base</code>’ and ‘<code
1337-
class=property>ruby-text</code>’. The Complex Ruby model requires in
1338-
addition the values: ‘<code
1339-
class=property>ruby-base-container</code>’ and ‘<code
1340-
class=property>ruby-text-container</code>’.
1364+
<p>Unfortunately, because Selectors cannot match against text nodes, it's
1365+
not possible with CSS to express rules that will automatically and
1366+
correctly add parentheses to unparenthesized ruby annotations in HTML.
1367+
However, an author rigorously using <code>&lt;rtc&gt;</code> elements
1368+
around all annotations can use CSS Level 2 generated content <a
1369+
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> to generate
1370+
parentheses:
13411371

1342-
<h2 id=glossary><span class=secno>5. </span> Glossary</h2>
1372+
<pre>
1373+
<!-- -->rtc::before { content: "("; }
1374+
<!-- -->rtc::after { content: ")"; }</pre>
1375+
1376+
<p>Alternatively, an author rigorously using both <code>&lt;rb&gt;</code>
1377+
and <code>&lt;rt&gt;</code> elements but no <code>&lt;rtc&gt;</code>
1378+
elements can use these rules instead:
1379+
1380+
<pre>
1381+
<!-- -->rb + rt::before { content: "("; }
1382+
<!-- -->rt:last-child::after, rt + rb::before { content: ")"; }</pre>
1383+
1384+
<p class=Issue>Try to make these smarter somehow?
1385+
1386+
<h2 id=glossary><span class=secno>4. </span> Glossary</h2>
13431387

13441388
<dl>
13451389
<dt><a id=g-bopomofo><strong><span lang=zh>Bopomofo</span></strong></a>
@@ -1398,9 +1442,9 @@ <h2 id=glossary><span class=secno>5. </span> Glossary</h2>
13981442
and serves as an annotation or a pronunciation guide for that text.
13991443
</dl>
14001444

1401-
<h2 id=conformance><span class=secno>6. </span> Conformance</h2>
1445+
<h2 id=conformance><span class=secno>5. </span> Conformance</h2>
14021446

1403-
<h3 id=conventions><span class=secno>6.1. </span> Document conventions</h3>
1447+
<h3 id=conventions><span class=secno>5.1. </span> Document conventions</h3>
14041448

14051449
<p>Conformance requirements are expressed with a combination of
14061450
descriptive assertions and RFC 2119 terminology. The key words
@@ -1427,7 +1471,7 @@ <h3 id=conventions><span class=secno>6.1. </span> Document conventions</h3>
14271471

14281472
<p class=note>Note, this is an informative note.
14291473

1430-
<h3 id=conformance-classes><span class=secno>6.2. </span> Conformance
1474+
<h3 id=conformance-classes><span class=secno>5.2. </span> Conformance
14311475
classes</h3>
14321476

14331477
<p>Conformance to CSS Ruby Module is defined for three conformance
@@ -1473,7 +1517,7 @@ <h3 id=conformance-classes><span class=secno>6.2. </span> Conformance
14731517
meet all other conformance requirements of style sheets as described in
14741518
this module.
14751519

1476-
<h3 id=partial><span class=secno>6.3. </span> Partial implementations</h3>
1520+
<h3 id=partial><span class=secno>5.3. </span> Partial implementations</h3>
14771521

14781522
<p>So that authors can exploit the forward-compatible parsing rules to
14791523
assign fallback values, CSS renderers <strong>must</strong> treat as
@@ -1487,7 +1531,7 @@ <h3 id=partial><span class=secno>6.3. </span> Partial implementations</h3>
14871531
considered invalid (as unsupported values must be), CSS requires that
14881532
the entire declaration be ignored.
14891533

1490-
<h3 id=experimental><span class=secno>6.4. </span> Experimental
1534+
<h3 id=experimental><span class=secno>5.4. </span> Experimental
14911535
implementations</h3>
14921536

14931537
<p>To avoid clashes with future CSS features, the CSS2.1 specification
@@ -1502,7 +1546,7 @@ <h3 id=experimental><span class=secno>6.4. </span> Experimental
15021546
Working Drafts. This avoids incompatibilities with future changes in the
15031547
draft.
15041548

1505-
<h3 id=testing><span class=secno>6.5. </span> Non-experimental
1549+
<h3 id=testing><span class=secno>5.5. </span> Non-experimental
15061550
implementations</h3>
15071551

15081552
<p>Once a specification reaches the Candidate Recommendation stage,
@@ -1571,6 +1615,26 @@ <h3 class=no-num id=other-references> Other references</h3>
15711615
style="display: none"><!-- keeps the doc valid if the DL is empty -->
15721616
<!---->
15731617

1618+
<dt id=CSS3-FONTS>[CSS3-FONTS]
1619+
1620+
<dd>John Daggett. <a
1621+
href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/"><cite>CSS
1622+
Fonts Module Level 3.</cite></a> 12 February 2013. W3C Working Draft.
1623+
(Work in progress.) URL: <a
1624+
href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a>
1625+
</dd>
1626+
<!---->
1627+
1628+
<dt id=CSS3-TEXT-DECOR>[CSS3-TEXT-DECOR]
1629+
1630+
<dd>Elika J. Etemad; Koji Ishii. <a
1631+
href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/"><cite>CSS
1632+
Text Decoration Module Level 3.</cite></a> 3 January 2013. W3C Working
1633+
Draft. (Work in progress.) URL: <a
1634+
href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/">http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/</a>
1635+
</dd>
1636+
<!---->
1637+
15741638
<dt id=CSS3VAL>[CSS3VAL]
15751639

15761640
<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
@@ -1612,10 +1676,10 @@ <h2 class=no-num id=index> Index</h2>
16121676
<!--begin-index-->
16131677
<ul class=indexlist>
16141678
<li>authoring tool, <a href="#authoring-tool"
1615-
title="section 6.2."><strong>6.2.</strong></a>
1679+
title="section 5.2."><strong>5.2.</strong></a>
16161680

16171681
<li>renderer, <a href="#renderer"
1618-
title="section 6.2."><strong>6.2.</strong></a>
1682+
title="section 5.2."><strong>5.2.</strong></a>
16191683

16201684
<li>Ruby, <a href="#ruby" title="section 1.4."><strong>1.4.</strong></a>
16211685

@@ -1683,7 +1747,7 @@ <h2 class=no-num id=index> Index</h2>
16831747
<li>style sheet
16841748
<ul>
16851749
<li>as conformance class, <a href="#style-sheet"
1686-
title="section 6.2."><strong>6.2.</strong></a>
1750+
title="section 5.2."><strong>5.2.</strong></a>
16871751
</ul>
16881752
</ul>
16891753
<!--end-index-->

‎css-ruby/Overview.src.html‎

Lines changed: 51 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -967,25 +967,63 @@ <h3 id="rubyspan">
967967
&lt;myrt rbspan=&quot;3&quot;&gt;Expiration Date&lt;/myrt&gt;
968968
&lt;/myrtc&gt;
969969
&lt;/myruby&gt;</pre>
970-
971-
<p class="issue"><span class="issuehead">Issue:&nbsp;</span> The i18n WG has requested the addition of a sample user agent default style sheet, as promised by Ruby Annotation section 3.4. See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20Default+stylesheet&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this thread</a>.</p>
972970
-->
973971

974-
<h2 id="profiles">
975-
Profiles</h2>
972+
<h2 id="default-stylesheet" class="no-num">
973+
Appendix A: Default Style Sheet</h2>
974+
975+
<p><em>This section is informative.</em>
976+
977+
<h3 id="default-ua-ruby" class="no-num">
978+
<span class="secno">A.1</span> Supporting Ruby Layout</h3>
979+
980+
<p>The following represents a default UA style sheet
981+
for rendering HTML and XHTML ruby markup as ruby layout:
982+
983+
<pre>
984+
<!-- -->ruby { display: ruby; }
985+
<!-- -->rb { display: ruby-base; white-space: nowrap; }
986+
<!-- -->rt { display: ruby-text; white-space: nowrap; font-size: 50%; }
987+
<!-- -->rbc { display: ruby-base-container; }
988+
<!-- -->rtc { display: ruby-text-container; }</pre>
989+
990+
<p>Additional rules for UAs supporting the relevant features of [[CSS3-TEXT-DECOR]] and [[CSS3-FONTS]]:
991+
<pre>rt { font-variant-east-asian: ruby; text-emphasis: none; }</pre>
992+
993+
<p class="note">Authors should not use the above rules;
994+
a UA that supports ruby layout should provide these by default.
995+
996+
<h3 id="default-inline" class="no-num">
997+
<span class="secno">A.2</span> Inlining Ruby Annotations</h3>
998+
999+
<p>The following represents a sample style sheet
1000+
for rendering HTML and XHTML ruby markup as inline annotations:
1001+
1002+
<pre>ruby, rb, rt, rbc, rtc, rp {
1003+
<!-- --> display: inline; white-space: inherit;
1004+
<!-- --> font-variant-east-asian: inherit; text-emphasis: inherit; }</pre>
9761005

977-
<p>There are two modules defined by this module:</p>
1006+
<h3 id="default-parens" class="no-num">
1007+
<span class="secno">A.3</span> Generating Parentheses</h3>
9781008

979-
<p>CSS3 Simple Ruby model</p>
1009+
<p>Unfortunately, because Selectors cannot match against text nodes,
1010+
it's not possible with CSS to express rules that will automatically and correctly
1011+
add parentheses to unparenthesized ruby annotations in HTML.
1012+
However, an author rigorously using <code>&lt;rtc&gt;</code> elements
1013+
around all annotations
1014+
can use CSS Level 2 generated content [[!CSS21]] to generate parentheses:
1015+
<pre>
1016+
<!-- -->rtc::before { content: "("; }
1017+
<!-- -->rtc::after { content: ")"; }</pre>
9801018

981-
<p>CSS3 Complex Ruby model.</p>
1019+
<p>Alternatively, an author rigorously using
1020+
both <code>&lt;rb&gt;</code> and <code>&lt;rt&gt;</code> elements but no <code>&lt;rtc&gt;</code> elements
1021+
can use these rules instead:
1022+
<pre>
1023+
<!-- -->rb + rt::before { content: "("; }
1024+
<!-- -->rt:last-child::after, rt + rb::before { content: ")"; }</pre>
9821025

983-
<p>They both contain all the properties specified by this CSS chapter, i.e. <a
984-
href="#rubyalign">'ruby-align'</a>, <a href="#rubyover">'ruby-overhang'</a>, <a href="#rubypos">'ruby-position'</a>
985-
and <a href="#rubyspan">'ruby-span'</a>. They differ by the required
986-
'display' property values. The Simple Ruby model requires the values: 'ruby',
987-
'ruby-base' and 'ruby-text'. The Complex Ruby model requires in addition the
988-
values: 'ruby-base-container' and 'ruby-text-container'.</p>
1026+
<p class="Issue">Try to make these smarter somehow?</p>
9891027

9901028
<h2 id="glossary">
9911029
Glossary</h2>

0 commit comments

Comments
 (0)