css-ruby/Overview.src.html

Fri, 13 Sep 2013 14:35:11 -0700

author
fantasai <fantasai.cvs@inkedblade.net>
date
Fri, 13 Sep 2013 14:35:11 -0700
changeset 9173
a509cde54544
parent 9172
b0abc18cf23b
child 9174
d0cb61f45f33
permissions
-rw-r--r--

[css-ruby] Fix some markup errors

fantasai@9173 1 <!DOCTYPE html>
fantasai@8526 2 <!--
fantasai@8526 3
fantasai@8526 4 Issues:
fantasai@8526 5 bidi
fantasai@8561 6 box layout/sizing
fantasai@8833 7 clean up inter-character vs. parallel layout requirements
fantasai@8526 8
fantasai@8547 9 Redo all examples with consistent font. (M+ 2p?)
fantasai@8547 10
fantasai@8526 11 -->
fantasai@8479 12 <html lang="en">
ishida@1665 13 <head>
fantasai@8493 14 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
fantasai@8493 15 <title>CSS Ruby Module Level 1</title>
fantasai@8493 16 <link rel=contents href="#contents">
fantasai@8493 17 <link rel=index href="#index">
fantasai@8493 18 <link rel="stylesheet" type="text/css" href="../default.css">
fantasai@8493 19 <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
fantasai@8493 20 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
ishida@1665 21 </head>
ishida@1665 22
fantasai@8479 23 <body class="h-entry">
ishida@1665 24
ishida@1665 25 <div class="head">
fantasai@8479 26 <!--logo-->
ishida@1665 27
fantasai@8479 28 <h1 class="p-name">CSS Ruby Module Level 1</h1>
ishida@1665 29
fantasai@8479 30 <h2 class="no-num no-toc">[LONGSTATUS] <time class="dt-updated" datetime="[CDATE]">[DATE]</time> <!-- for HTML4 doctype: <span class="value-title" title="[CDATE]">[DATE]</span></span> --> </h2>
ishida@1665 31 <dl>
fantasai@8493 32 <dt>This version:
fantasai@8493 33 <dd><a class="u-url" href="[VERSION]">[VERSION]</a>
fantasai@7857 34
fantasai@8493 35 <dt>Latest version:
fantasai@8493 36 <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/css3-ruby/</a>
fantasai@8479 37
fantasai@8493 38 <dt>Editor's draft:
fantasai@8493 39 <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
fantasai@8493 40 (<a href="https://dvcs.w3.org/hg/csswg/log/tip/[SHORTNAME]/Overview.src.html">change log</a>)
fantasai@8479 41
fantasai@8493 42 <dt>Previous version:
fantasai@8493 43 <dd><a href="http://www.w3.org/TR/2011/WD-css3-ruby-20110630/">
fantasai@8493 44 http://www.w3.org/TR/2011/WD-css3-ruby-20110630/</a>
fantasai@8479 45
fantasai@8493 46 <dt>Issue Tracking:</dt>
fantasai@8493 47 <dd><a rel="issues" href="http://www.w3.org/Style/CSS/Tracker/products/FIXME">http://www.w3.org/Style/CSS/Tracker/products/FIXME</a>
fantasai@8479 48
fantasai@8493 49 <dt>Feedback:</dt>
fantasai@8493 50 <dd><a href="mailto:www-style@w3.org?subject=%5BSHORTNAME%5D%20feedback"
fantasai@8493 51 >www-style@w3.org</a>
fantasai@8493 52 with subject line &ldquo;<kbd>[[SHORTNAME]]
fantasai@8493 53 <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
fantasai@8493 54 (<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/"
fantasai@8493 55 >archives</a>)
fantasai@8479 56
fantasai@8493 57 <dt>Editors:
fantasai@8493 58 <dd class="p-author h-card vcard">
fantasai@8493 59 <a class="p-name fn u-url url" rel="author"
fantasai@8493 60 href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>,
fantasai@8493 61 <a class="p-org org h-org" href="http://www.mozilla.org/">Mozilla</a>
fantasai@8493 62 <dd class="p-author h-card vcard">
fantasai@8493 63 <a class="p-name fn u-url url" rel="author"
fantasai@8493 64 href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a>,
fantasai@8493 65 <span class="p-org org">Rakuten, Inc.</span>
fantasai@8493 66 <dd class="p-author h-card vcard">
fantasai@8493 67 <a class="p-name fn u-url url" rel="author"
fantasai@8493 68 href="mailto:ishida@w3.org">Richard Ishida</a>,
fantasai@8493 69 <span class="p-org org">W3C</span>
fantasai@8479 70
fantasai@8493 71 <dt>Former editors:
fantasai@8493 72 <dd>Michel Suignard, Microsoft
fantasai@8493 73 <dd>Marcin Sawicki, Microsoft
ishida@1665 74 </dl>
ishida@1665 75
fantasai@8479 76 <!--copyright-->
ishida@1665 77
fantasai@8479 78 <hr title="Separator for header">
ishida@1665 79 </div>
ishida@1665 80
fantasai@8479 81 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
ishida@1665 82
fantasai@8493 83 <p>
fantasai@8493 84 <span class="p-summary">
fantasai@8493 85 “Ruby” are short runs of text alongside the base text,
fantasai@8493 86 typically used in East Asian documents to indicate pronunciation
fantasai@8493 87 or to provide a short annotation.
fantasai@8493 88 This module describes the rendering model and formatting controls
fantasai@8493 89 related to displaying ruby annotations in CSS.
fantasai@8493 90 </span>
fantasai@8493 91
fantasai@8493 92 <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing
fantasai@8493 93 the rendering of structured documents (such as HTML and XML) on screen, on
fantasai@8493 94 paper, in speech, etc.
ishida@1665 95
fantasai@8479 96 <h2 class="no-num no-toc" id="status">Status of this document</h2>
ishida@1665 97
fantasai@8479 98 <!--status-->
fantasai@8479 99
fantasai@8479 100 <p>The following features are at risk: &hellip;
fantasai@8479 101
fantasai@8479 102 <h2 class="no-num no-toc" id="contents">
fantasai@8479 103 Table of Contents</h2>
fantasai@8479 104
fantasai@8479 105 <!--toc-->
fantasai@8479 106
fantasai@8479 107 <h2 id="intro">
fantasai@8479 108 Introduction</h2>
fantasai@8479 109
fantasai@8493 110 <p><em>This section is not normative.</em>
fantasai@8479 111
fantasai@8479 112 <h3 id="placement">
fantasai@8479 113 Module interactions</h3>
fantasai@8479 114
fantasai@8493 115 <p>This module extends the inline box model of CSS Level 2 [[!CSS21]]
fantasai@8493 116 to support ruby.
fantasai@8479 117
fantasai@8493 118 <p>None of the properties in this module apply to the <code>::first-line</code> or
fantasai@8493 119 <code>::first-letter</code> pseudo-elements.
fantasai@8479 120
fantasai@8479 121 <h3 id="values">
fantasai@8479 122 Values</h3>
fantasai@8479 123
fantasai@8493 124 <p>This specification follows the
fantasai@8493 125 <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
fantasai@8493 126 definition conventions</a> from [[!CSS21]]. Value types not defined in
fantasai@8493 127 this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
fantasai@8493 128 Other CSS modules may expand the definitions of these value types: for
fantasai@8493 129 example [[CSS3VAL]], when combined with this module, expands the
fantasai@8493 130 definition of the <var>&lt;length&gt;</var> value type as used in this specification.</p>
fantasai@8493 131
fantasai@8493 132 <p>In addition to the property-specific values listed in their definitions,
fantasai@8493 133 all properties defined in this specification also accept the
fantasai@8493 134 <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
fantasai@8493 135 keyword as their property value. For readability it has not been repeated
fantasai@8493 136 explicitly.
fantasai@8479 137
fantasai@9173 138 <h3 id="diagram-conventions">
fantasai@9173 139 Diagram conventions</h3>
ishida@1665 140
fantasai@8492 141 <p>Many typographical conventions in East Asian typography depend
fantasai@8492 142 on whether the character rendered is wide (CJK) or narrow (non-CJK).
fantasai@8492 143 There are a number of illustrations in this document
fantasai@8492 144 for which the following legend is used:
ishida@1665 145
fantasai@8492 146 <dl>
fantasai@8492 147 <dt><img alt="Symbolic wide-cell glyph representation" width="39" height="39" src="images/fullwidth.gif">
fantasai@8492 148 <dd>Wide-cell glyph (e.g. Han) that is the <var>n</var>th character in the text run.
fantasai@8492 149 They are typically sized to 50% when used as annotations.
fantasai@8492 150 <dt><img alt="Symbolic narrow-cell glyph representation" width="19" height="39" src="images/halfwidth.gif">
fantasai@8492 151 <dd>Narrow-cell glyph (e.g. Roman) which is the <var>n</var>th glyph in the text run.
fantasai@8526 152 </dl>
ishida@1665 153
fantasai@8492 154 <p>The orientation which the above symbols assume in the diagrams
fantasai@8492 155 corresponds to the orientation that the glyphs they represent
fantasai@8492 156 are intended to assume when rendered by the user agent.
fantasai@8492 157 Spacing between these characters in the diagrams is incidental,
fantasai@8492 158 unless intentionally changed to make a point.
ishida@1665 159
fantasai@8479 160 <h3 id="ruby-def">
fantasai@8479 161 What is ruby?</h3>
ishida@1665 162
fantasai@8492 163 <p><dfn>Ruby</dfn> is the commonly-used name for a run of text
fantasai@8492 164 that appears alongside another run of text (referred to as the “base”)
fantasai@8492 165 and serves as an annotation or a pronunciation guide associated with that run of text.
ishida@1665 166
fantasai@8492 167 <p>The following figures show two examples of Ruby,
fantasai@8492 168 a simple case and one with more complicated structure.
ishida@1665 169
fantasai@8492 170 <div class="example">
fantasai@8492 171 <p>In this first example, a single annotation is used to annotate the base text.
fantasai@8492 172 <div class="figure">
fantasai@8492 173 <p><img src="images/licence.png"
fantasai@8492 174 alt="Example of ruby applied on top of a Japanese expression">
fantasai@8492 175 <p class="caption">Example of ruby used in Japanese (simple case)
fantasai@8492 176 </div>
fantasai@8492 177 <p>In Japanese typography, this case is sometimes called
fantasai@8492 178 <i lang="ja">taigo</i> ruby or group-ruby (per-word ruby),
fantasai@8492 179 because the annotation as a whole is associated
fantasai@8492 180 with multi-character word (as a whole).
fantasai@8492 181 </div>
ishida@1665 182
fantasai@8492 183 <div class="example">
fantasai@8492 184 <p>In this second example,
fantasai@8492 185 two levels of annotations are attached to a base sequence:
fantasai@8492 186 the hiragana characters on top refer to the pronunciation of each of the base kanji characters,
fantasai@8492 187 while the words “Keio” and “University” on the bottom are annotations describing the English translation.
fantasai@8492 188 <div class="figure">
fantasai@8492 189 <p><img src="images/ruby-univ.gif"
fantasai@8492 190 alt="Example showing complex ruby with annotation text over and under the base characters">
fantasai@8492 191 <p class="caption">Complex ruby with annotation text over and under the base characters
fantasai@8492 192 </div>
fantasai@8492 193 <p>
fantasai@8492 194 <p>Notice that to allow correct association between the hiragana characters and
fantasai@8492 195 their corresponding Kanji base characters,
fantasai@8492 196 the spacing between these Kanji characters is adjusted.
fantasai@8492 197 (This happens around the fourth Kanji character in the figure above.)
fantasai@8492 198 To avoid variable spacing between the Kanji characters in the example above
fantasai@8492 199 the hiragana annotations can be styled as a <i>collapsed annotation</i>,
fantasai@8492 200 which will look more like the group-ruby example earlier.
fantasai@8492 201 However because the base-annotation pairings are recorded in the ruby structure,
fantasai@8492 202 if the text breaks across lines, the annotation characters will stay
fantasai@8492 203 correctly paired with their respective base characters.
fantasai@8492 204 </div>
ishida@1665 205
fantasai@8526 206 <p><i>Ruby</i> formatting as used in Japanese is described in JIS X-4051 [[JIS4051]] (in Japanese)
fantasai@8492 207 and in Requirements for Japanese Text Layout [[JLREQ]] (in English and Japanese)].
fantasai@8492 208 In HTML, ruby structure and markup to represent it is described
fantasai@8492 209 in the Ruby Markup Extension specification.
fantasai@8492 210 This module describes the CSS rendering model
fantasai@8492 211 and formatting controls relevant to ruby layout of such markup.
ishida@1665 212
fantasai@8479 213 <h2 id="ruby-model">
fantasai@8479 214 Ruby Formatting Model</h2>
ishida@1665 215
fantasai@8492 216 <p>The CSS ruby model is based on
fantasai@8492 217 the <a href="http://darobin.github.io/html-ruby/">HTML Ruby Markup Extension</a>
fantasai@8492 218 and <a href="http://www.w3.org/TR/ruby/">XHTML Ruby Annotation Recommendation</a> [[RUBY]].
fantasai@8492 219 In this model, a ruby structure consists of
fantasai@8492 220 one or more <dfn>ruby base</dfn> elements representing the base (annotated) text,
fantasai@8492 221 associated with one or more levels of <dfn>ruby annotation</dfn> elements representing the annotations.
fantasai@8492 222 The structure of ruby is similar to that of a table:
fantasai@8492 223 there are “rows” (the base text level, each annotation level)
fantasai@8492 224 and “columns” (each <i>ruby base</i> and its corresponding <i>ruby annotations</i>).
ishida@1665 225
fantasai@8492 226 <p>Consecutive bases and annotations are grouped together into <dfn>ruby segments</dfn>.
fantasai@9108 227 Within a <i>ruby segment</i>, a <i>ruby annotation</i> may span multiple <i>ruby bases</i>.
ishida@1665 228
fantasai@8492 229 <p class="note">In HTML, a single <code>&lt;ruby&gt;</code> element may contain multiple <i>ruby segments</i>.
fantasai@8492 230 (In the XHTML Ruby model, a single <code>&lt;ruby&gt;</code> element can only contain one <i>ruby segment</i>.)
ishida@1665 231
fantasai@8492 232 <h3 id="ruby-display">
fantasai@8492 233 Ruby-specific 'display' property values</h3>
ishida@1665 234
fantasai@8492 235 <p>For document languages (such as XML applications) that do not have pre-defined ruby elements,
fantasai@8492 236 authors must map document language elements to ruby elements;
fantasai@8492 237 this is done with the 'display' property.
fantasai@8492 238
fantasai@8492 239 <table class="propdef">
fantasai@8492 240 <tr>
fantasai@8492 241 <th>Name:
fantasai@8492 242 <td>display
fantasai@8492 243 <tr>
fantasai@8492 244 <th><a href="#values">New Values</a>:
fantasai@8492 245 <td>ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container
fantasai@8492 246 </table>
fantasai@8492 247
fantasai@8492 248 <p>The following new 'display' values assign ruby layout roles to an arbitrary element:
fantasai@8492 249
fantasai@8492 250 <dl>
fantasai@8492 251 <dt>''ruby''
fantasai@8504 252 <dd>Specifies that an element generates a <dfn title="ruby container | ruby container box">ruby container box</dfn>.
fantasai@8492 253 (Corresponds to HTML/XHTML <code>&lt;ruby&gt;</code> elements.)
fantasai@8492 254 <dt>''ruby-base''
fantasai@8504 255 <dd>Specifies that an element generates a <dfn title="ruby base box | ruby base">ruby base box</dfn>.
fantasai@8492 256 (Corresponds to HTML/XHTML <code>&lt;rb&gt;</code> elements.)
fantasai@8492 257 <dt>''ruby-text''
fantasai@8504 258 <dd>Specifies that an element generates a <dfn title="ruby annotation box | ruby annotation">ruby annotation box</dfn>.
fantasai@8492 259 (Corresponds to HTML/XHTML <code>&lt;rt&gt;</code> elements.)
fantasai@8492 260 <dt>''ruby-base-container''
fantasai@8504 261 <dd>Specifies that an element generates a <dfn title="ruby base container box | ruby base container">ruby base container box</dfn>.
fantasai@8492 262 (Corresponds to XHTML <code>&lt;rbc&gt;</code> elements; always implied in HTML.)
fantasai@8492 263 <dt>''ruby-text-container''
fantasai@8504 264 <dd>Specifies that an element generates a <dfn title="ruby annotation container box | ruby annotation container">ruby annotation container box</dfn>.
fantasai@8492 265 (Corresponds to HTML/XHTML <code>&lt;ruby&gt;</code> elements.)
fantasai@8492 266 </dl>
fantasai@8492 267
fantasai@8504 268 <h3 id="box-fixup">
fantasai@8504 269 Anonymous Ruby Box Generation</h3>
fantasai@8504 270
fantasai@8492 271 <p>The CSS model does not require that the document language
fantasai@8492 272 include elements that correspond to each of these components.
fantasai@8504 273 Missing parts of the structure are implied through the anonymous box generation rules
fantasai@8504 274 <a href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">similar to those used to normalize tables</a>. [[!CSS21]]
fantasai@8492 275
fantasai@8504 276 <ol>
fantasai@8504 277 <li>Any in-flow block-level boxes directly contained by a
fantasai@8504 278 <i>ruby container</i>,
fantasai@8504 279 <i>ruby base container</i>,
fantasai@8504 280 <i>ruby annotation container</i>,
fantasai@8504 281 <i>ruby base box</i>,
fantasai@8504 282 or <i>ruby annotation box</i>
fantasai@8504 283 are forced to be inline-level boxes,
fantasai@8504 284 and their 'display' value computed accordingly.
fantasai@8504 285 For example,
fantasai@8504 286 the 'display' property of an in-flow element with ''display: block''
fantasai@8504 287 parented by an element with ''display: ruby-text''
fantasai@8504 288 computes to ''inline-block''.
fantasai@8504 289 This computation occurs after any intermediary anonymous-box fixup
fantasai@8504 290 (such as that required by internal table elements).
fantasai@8504 291
fantasai@8504 292 <li>Any consecutive sequence of <i>ruby bases</i> not parented by a <i>ruby base container</i>
fantasai@8504 293 is wrapped in an anonymous <i>ruby base container</i>.
fantasai@8504 294 Similarly, any consecutive sequence of <i>ruby annotations</i> not parented by a <i>ruby annotation container</i>
fantasai@8504 295 is wrapped in an anonymous <i>ruby annotation container</i>.
fantasai@8504 296
fantasai@8504 297 <li>Within each <i>ruby base container</i>,
fantasai@8504 298 each sequence of inline-level boxes is wrapped in an anonymous <i>ruby base box</i>.
fantasai@8504 299 Similarly, within each <i>ruby annotation container</i>,
fantasai@8504 300 each sequence of inline-level boxes is wrapped in an anonymous <i>ruby annotation box</i>.
fantasai@8504 301
fantasai@8504 302 <li>A sequence of <i>ruby base containers</i> and/or <i>ruby annotation containers</i>
fantasai@8504 303 not parented by a <i>ruby container</i>
fantasai@8504 304 is wrapped in an anonymous <i>ruby container</i>.
fantasai@8504 305 </ol>
fantasai@8504 306
fantasai@8504 307 <p>At this point, all ruby layout structures are properly parented,
fantasai@8504 308 and the UA can start to associate bases with their annotations.
fantasai@8504 309
fantasai@8504 310 <p class="note">
fantasai@8504 311 Note that the UA is not required to create any of these anonymous boxes in its internal structures,
fantasai@8504 312 as long as pairing and layout behaves as if they existed.
fantasai@8504 313
fantasai@8504 314 <h3 id="pairing">
fantasai@8504 315 Ruby Pairing and Annotation Levels</h3>
fantasai@8504 316
fantasai@8504 317 <p>Within a ruby structure,
fantasai@8661 318 each <i>ruby base</i> is associated with <i>ruby annotations</i>
fantasai@8504 319 and vice versa.
fantasai@8504 320 A <i>ruby base</i> can be associated with at most one <i>ruby annotation</i> per annotation level.
fantasai@8504 321 If there are multiple annotation levels, it can therefore be associated with multiple <i>ruby annotations</i>.
fantasai@8504 322 A <i>ruby annotation</i> is associated with one or more <i>ruby bases</i>;
fantasai@8504 323 annotations can span multiple bases.
fantasai@8504 324
fantasai@8504 325 <p><dfn>Annotation pairing</dfn> is the process of associating
fantasai@8504 326 <i>ruby annotations</i> with <i>ruby bases</i>.
fantasai@8504 327
fantasai@8504 328 <ol>
fantasai@8504 329 <li>
fantasai@8504 330 <p>First, the ruby structure is divided into <i>ruby segments</i>,
fantasai@8504 331 each consisting of a single <i>ruby base container</i>
fantasai@8504 332 followed by one or more <i>ruby annotation containers</i>.
fantasai@8504 333 If the first child of a <i>ruby container</i> is a <i>ruby annotation container</i>,
fantasai@8504 334 an anonymous, empty <i>ruby base container</i> is assumed to exist before it.
fantasai@8504 335 Similarly, if the <i>ruby container</i> contains consecutive <i>ruby base containers</i>,
fantasai@8504 336 anonymous, empty <i>ruby annotation containers</i> are assumed to exist between them.
fantasai@8504 337 The <i>ruby base container</i> in each segment is thus associated
fantasai@8504 338 with each of the <i>ruby annotation containers</i> in that segment.
fantasai@8504 339
fantasai@8504 340 <p>Each <i>ruby annotation containers</i> in a <i>ruby segment</i>
fantasai@8504 341 represents one <dfn title="annotation level | level">level</dfn> of annotation:
fantasai@8504 342 the first one represents the first level of annotation,
fantasai@8504 343 the second one represents the second level of annotation,
fantasai@8504 344 and so on.
fantasai@8504 345
fantasai@8504 346 <li>Within each <i>ruby segment</i>,
fantasai@8504 347 each <i>ruby base box</i> in the <i>ruby base container</i>
fantasai@8504 348 is paired with one <i>ruby annotation box</i>
fantasai@8504 349 from each <i>ruby annotation container</i> in its <i>ruby segment</i>.
fantasai@8504 350 If there are not enough <i>ruby annotations</i> in a <i>ruby annotation container</i>,
fantasai@8504 351 the last one is associated with any excess <i>ruby bases</i>.
fantasai@8504 352 (If there are not any in the <i>ruby annotation container</i>, an anonymous empty one is assumed to exist.)
fantasai@8504 353 If there are not enough <i>ruby bases</i>,
fantasai@8504 354 any remaining <i>ruby annotations</i> are assumed to be associated
fantasai@8504 355 with empty, anonymous bases inserted at the end of the <i>ruby base container</i>.
fantasai@8506 356
fantasai@8506 357 <p>If an implementation supports ruby markup with explicit spanning
fantasai@8506 358 (e.g. XHTML Complex Ruby Annotations),
fantasai@8506 359 it must adjust the pairing rules to pair spanning annotations to multiple bases
fantasai@8506 360 appropriately.
fantasai@8504 361 </ol>
fantasai@8504 362
fantasai@8504 363 <p>A this point, ruby “columns” are defined,
fantasai@8504 364 each represented by a single <i>ruby base</i>
fantasai@8504 365 and associated with one <i>ruby annotation</i> (possibly an empty, anonymous one)
fantasai@8504 366 from each <i>annotation level</i>.
fantasai@8504 367
fantasai@8504 368 <h4 id="nested-pairing">
fantasai@8504 369 Nested Ruby</h4>
fantasai@8504 370
fantasai@8504 371 <p>When <i>ruby containers</i> are nested,
fantasai@8504 372 pairing begins with the deepest <i>ruby container</i>,
fantasai@8504 373 then expands out,
fantasai@8504 374 treating each <i>ruby container</i> nested within another <i>ruby container</i>
fantasai@9108 375 essentially as a single <i>ruby base</i> in the outer <i>ruby container</i>,
fantasai@8504 376 and associating each <i>ruby annotation</i>
fantasai@9108 377 paired with the nested <i>ruby container</i>
fantasai@8504 378 as being associated with (spanning) all of its <i>ruby bases</i>.
fantasai@8504 379
fantasai@8504 380 <p>Using nested <i>ruby containers</i> thus allows the representation
fantasai@8504 381 of complex spanning relationships.
fantasai@8504 382
fantasai@9108 383 <p class="issue">This has to be Level 1 because HTML5 allows it, so we have to handle it. Yay HTML5.
fantasai@8504 384
fantasai@8547 385 <h3 id="autohide">
fantasai@8547 386 Autohiding Annotations</h3>
fantasai@8547 387
fantasai@9169 388 <p>If a <i>ruby annotation</i> has the exact same text content as its base,
fantasai@8547 389 it is <dfn title="hidden ruby annotation | hidden annotation">hidden</dfn>.
fantasai@8547 390 Hiding a <i>ruby annotation</i> does not affect annotation pairing
fantasai@8547 391 or the block-axis positioning of boxes in other <i>levels</i>.
fantasai@8547 392 However the <i>hidden annotation</i> is not visible,
fantasai@8547 393 and it has no impact on layout
fantasai@8547 394 other than to separate adjacent sequences of <i>ruby annotation boxes</i> within its level,
fantasai@8547 395 as if they belonged to separate segments
fantasai@8547 396 and the <i>hidden annotation</i>’s base were not a <i>ruby base</i> but an intervening inline.
fantasai@8547 397
fantasai@8547 398 <div class="example">
fantasai@8547 399 <p>This is to allow correct inlined display of annotations
fantasai@8547 400 for Japanese words that are a mix of kanji and hirangana.
fantasai@8547 401 For example, the word <i>振り仮名</i> should be inlined as
fantasai@8547 402 <p class="figure">振り仮名(ふりがな)
fantasai@8547 403 <p>and therefore marked up as
fantasai@8547 404 <pre>
fantasai@8547 405 <!-- -->&lt;ruby>
fantasai@8547 406 <!-- --> &lt;rb>振&lt;/rb>&lt;rb>り&lt;/rb>&lt;rb>仮&lt;/rb>&lt;rb>名&lt;/rb>
fantasai@8547 407 <!-- --> &lt;rp>(&lt;/rp>&lt;rt>ふ&lt;/rt>&lt;rt>り&lt;/rt>&lt;rt>が&lt;/rt>&lt;rt>な&lt;/rt>&lt;rp>)&lt;/rp>
fantasai@8547 408 <!-- -->&lt;ruby></pre>
fantasai@8547 409 <p>However, when displayed as ruby, the “り” should be hidden
fantasai@8547 410 <div class="figure">
fantasai@8547 411 <p><img src="images/furigana-separate.png"
fantasai@8547 412 alt="Hiragana annotations for 振り仮名 appear, each above its base character.">
fantasai@8547 413 <p class="caption">Hiragana ruby for 振り仮名
fantasai@8547 414 </div>
fantasai@8547 415 </div>
fantasai@8547 416
fantasai@8547 417 <p class="note">
fantasai@8547 418 Future levels of CSS Ruby may add controls for this,
fantasai@9169 419 but in this level it is always forced.
fantasai@8547 420
fantasai@8547 421 <p>The content comparison for this auto-hiding behavior
fantasai@9169 422 takes place prior to white space collapsing
fantasai@9169 423 and ignores elements (considers only the <code>textContent</code> of the boxes).
fantasai@9173 424 <p class="issue">Is before or after white space collapsing easier? We should do whatever is easier, as it really doesn't matter much which way to go.
fantasai@8547 425
fantasai@8534 426 <h3 id="white-space">
fantasai@8534 427 White Space</h3>
fantasai@8534 428
fantasai@9167 429 <p><i>Collapsible</i> white space within a ruby structure is discarded
fantasai@9167 430 <ul>
fantasai@9167 431 <li>at the beginning and end of a <i>ruby container</i>, <i>ruby annotation container</i>, or <i>ruby base container</i>,
fantasai@9167 432 <li>at the beginning/end of a <i>ruby annotation box</i> or <i>ruby base box</i> if white space is not its only contents,
fantasai@9167 433 <li>between a <i>ruby base container</i> and its following <i>ruby annotation container</i>,
fantasai@9167 434 <li>between <i>ruby annotation containers</i>.
fantasai@9167 435 </ul>
fantasai@8534 436
fantasai@9167 437 <p>Between <i>ruby segments</i>, between <i>ruby bases</i>, and between <i>ruby annotations</i>, however,
fantasai@8534 438 white space is not discarded.
fantasai@9167 439
fantasai@9167 440 <p>Where undiscarded white space is <i>collapsible</i>, it will collapse
fantasai@8661 441 following the standard <a href="http://www.w3.org/TR/css3-text/#white-space-rules">white space processing rules</a>. [[!CSS3TEXT]]
fantasai@9167 442 For <i>collapsible</i> white space between <i>ruby segments</i>, however,
fantasai@8534 443 the contextual text for determining collapsing behavior is given by the <i>ruby bases</i> on either side,
fantasai@8534 444 not the text on either side of the white space in the source document.
fantasai@8534 445
fantasai@8534 446 <div class="note">
fantasai@8534 447 <p>Note that the white space processing rules
fantasai@8534 448 cause a white space sequence containing a <i>segment break</i> (such as a line feed)
fantasai@8534 449 to <a href="http://www.w3.org/TR/css3-text/#line-break-transform">collapse to nothing</a> between CJK characters.
fantasai@8534 450 This means that CJK ruby can safely use white space for indentation of the ruby markup.
fantasai@8534 451 For example, the following markup will display without any spaces:
fantasai@8534 452 <pre>
fantasai@8534 453 <!-- -->&lt;ruby>
fantasai@8534 454 <!-- --> &lt;rb>東&lt;/rb>&lt;rb>京&lt;/rb>
fantasai@8534 455 <!-- --> &lt;rt>とう&lt;/rt>&lt;rt>きょう&lt;/rt>
fantasai@8534 456 <!-- -->&lt;/ruby></pre>
fantasai@9167 457 <p>However, white space that does not contain a <i>segment break</i> does not collapse completely away,
fantasai@9167 458 so this markup will display with a space between the first and second ruby pairs:
fantasai@8548 459 <pre>
fantasai@8534 460 <!-- -->&lt;ruby>
fantasai@8534 461 <!-- --> &lt;rb>東&lt;/rb> &lt;rb>京&lt;/rb>
fantasai@9167 462 <!-- --> &lt;rt>とう&lt;/rt> &lt;rt>きょう&lt;/rt>
fantasai@8534 463 <!-- -->&lt;/ruby></pre>
fantasai@8534 464 </div>
fantasai@8534 465
fantasai@8534 466 <p>Any preserved white space is then wrapped in an anonymous box belonging to
fantasai@8534 467 the <i>ruby base container</i> (if between <i>ruby bases</i>),
fantasai@8534 468 <i>ruby annotation container</i> (if between <i>ruby annotations</i>),
fantasai@8534 469 or <i>ruby container</i> (if between <i>ruby segments</i>).
fantasai@8534 470 In the latter case, the text is considered part of the <i>base level</i>.
fantasai@9167 471 Such anonynmous boxes do not take part in pairing.
fantasai@9167 472 They merely ensure separation between adjacent bases/annotations.
fantasai@9167 473
fantasai@9167 474 <p class="issue">Specify how these anonymous white space boxes impact layout.
fantasai@8534 475
fantasai@8534 476 <div class="example">
fantasai@8534 477 <p>These rules allow ruby to be used with space-separated scripts such as Latin.
fantasai@8534 478 For example,
fantasai@8534 479 <pre>
fantasai@8534 480 <!-- -->&lt;ruby>
fantasai@8534 481 <!-- --> &lt;rb>W&lt;/rb>&lt;rb>W&lt;/rb>&lt;rb>W&lt;/rb>
fantasai@8534 482 <!-- --> &lt;rt>World&lt;/rt> &lt;rt>Wide&lt;/rt> &lt;rt>Web&lt;/rt>
fantasai@8534 483 <!-- -->&lt;/ruby></pre>
fantasai@8534 484 <p>They also ensure that annotated white space is preserved. For example,
fantasai@8534 485 <pre>
fantasai@8534 486 <!-- -->&lt;ruby>
fantasai@8534 487 <!-- --> &lt;rb>Aerith&lt;/rb>&lt;rb> &lt;/rb>&lt;rb>Gainsboro&lt;/rb>
fantasai@8534 488 <!-- --> &lt;rt>エアリス&lt;/rt>&lt;rt>・&lt;/rt>&lt;rt>ゲインズブール&lt;/rt>
fantasai@8534 489 <!-- -->&lt;/ruby></pre>
fantasai@8534 490 </div>
fantasai@8534 491
fantasai@8661 492 <h3 id="ruby-layout">
fantasai@8661 493 Ruby layout</h3>
fantasai@8661 494
fantasai@8661 495 <p>When a ruby structure is laid out,
fantasai@8661 496 its base level is laid out on the line,
fantasai@8661 497 aligned according to its 'vertical-align' property
fantasai@8663 498 exactly as if its <i>bases</i> were a regular sequence of <i>inline</i> boxes.
fantasai@8661 499 Each <i>ruby base container</i> is sized and positioned
fantasai@8661 500 to contain exactly the full height of its <i>ruby bases</i>.
fantasai@8661 501
fantasai@8661 502 <p><i>Ruby annotations</i> associated with the base level
fantasai@8661 503 are then positioned with respect to their <i>ruby base boxes</i>
fantasai@8661 504 according to the applicable 'ruby-position' values.
fantasai@8661 505 <i>Ruby annotations</i> within a level (within a single <i>ruby container</i>)
fantasai@8661 506 are aligned to each other as if they were inline boxes
fantasai@8661 507 participating in the same inline formatting context.
fantasai@8661 508 Each <i>ruby annotation container</i> is sized and positioned
fantasai@8661 509 to contain exactly the full height of its <i>ruby annotations</i>.
fantasai@8661 510
fantasai@8661 511 <p>A ruby container (or fragment thereof)
fantasai@8661 512 measures as wide as the content of its widest level.
fantasai@8661 513 Similarly, <i>ruby base boxes</i> and <i>ruby annotation boxes</i>
fantasai@8661 514 within a ruby “column” have the measure of the widest content in that “column”.
fantasai@8661 515 In the case of spanning <i>annotations</i>
fantasai@8662 516 (whether actually spanning or pretending to span per 'ruby-collapse'),
fantasai@8661 517 the measures of the <i>ruby annotation box</i> and
fantasai@8661 518 the sum of its associated <i>ruby base boxes</i> must match.
fantasai@8661 519
fantasai@8661 520 <p>How the extra space is distributed
fantasai@8661 521 when ruby content is narrower than the measure of its box
fantasai@8661 522 is specified by the 'ruby-align' property.
fantasai@8661 523
fantasai@8663 524 <h4 id="inter-character-layout">
fantasai@8663 525 Inter-character ruby layout</h4>
fantasai@8663 526
fantasai@8663 527 <p>Inter-character annotations have special layout.
fantasai@9108 528 When 'ruby-position' indicates ''inter-character'' annotations,
fantasai@9108 529 the affected <i>annotation boxes</i>
fantasai@8663 530 are spliced into and measured as part of the layout of the base level.
fantasai@8663 531 The <i>ruby base container</i> must be sized to include both the <i>base boxes</i>
fantasai@9108 532 as well as the ''inter-character'' <i>annotation boxes</i>.
fantasai@8663 533 The affected <i>ruby annotation container</i> is similarly sized
fantasai@8663 534 so that its content box coincides with that of the <i>ruby base container</i>.
fantasai@8663 535
fantasai@8663 536 <p>For the purpose of laying out other levels of annotations,
fantasai@8663 537 an ''inter-character'' annotation effectively becomes part of its base.
fantasai@8663 538 <span class="issue">Or should it become a quasi-base between two bases?</span>
fantasai@8663 539 A spanning ''inter-character'' annotation is placed after
fantasai@8663 540 all the bases that it spans.
fantasai@8663 541
fantasai@8663 542 <h3 id="box-style">
fantasai@8663 543 Styling Ruby Boxes</h4>
fantasai@8663 544
fantasai@8663 545 <p>In most respects, ruby boxes can be styled similar to inline boxes.
fantasai@8663 546 However, the UA is not required to support
fantasai@8663 547 any of the box properties (borders, margins, padding),
fantasai@8663 548 any of the background properties or outline properties,
fantasai@8663 549 or any other property that illustrates the bounds of the box
fantasai@8682 550 on <i>ruby base container boxes</i>, <i>ruby annotation container boxes</i>,
fantasai@8682 551 or <a href="#nested-pairing">ruby-internal <i>ruby container boxes</i></a>.
fantasai@8663 552 The UA may implement these boxes simply as abstractions for inheritance
fantasai@8663 553 and control over the layout of their contents.
fantasai@8663 554
fantasai@8663 555 <p class="issue">
fantasai@8663 556 Alternatively... use margins to control offsets?
fantasai@8663 557 Or could line-height be adequate? Its centering behavior can be awkward.
fantasai@8663 558
fantasai@8682 559 <h3 id="line-breaks">
fantasai@8533 560 Ruby box and line breaking</h3>
fantasai@8504 561
fantasai@8533 562 <p>When there is not enough space for an entire <i>ruby container</i> to fit on the line,
fantasai@9108 563 the ruby may be broken wherever all levels simultaneously allow a break.
fantasai@8682 564 Ruby most often breaks between base-annotation sets,
fantasai@8682 565 but if the line-breaking rules allow it, can also break within a <i>ruby base</i>
fantasai@8682 566 (and, in parallel, its associated <i>annotation boxes</i>).
fantasai@8682 567
fantasai@8682 568 <p>Whenever ruby breaks across lines, <i>ruby annotations</i> must stay
fantasai@8682 569 with their respective <i>bases</i>.
fantasai@8682 570 The line <em>must not</em> break between a <i>ruby base</i> and its <i>annotations</i>,
fantasai@8682 571 even in the case of ''inter-character'' <i>annotations</i>.
fantasai@8682 572
fantasai@8682 573 <div class="figure">
fantasai@8682 574 <img src="images/r-break-b.gif"
fantasai@8682 575 alt='Diagram showing the line breaking opportunity in a "Bopomofo" ruby'>
fantasai@8682 576 <p class="caption">''inter-character'' ruby line breaking opportunity
fantasai@8682 577 </div>
fantasai@8682 578
fantasai@8682 579 <h4 id="break-between">
fantasai@8682 580 Breaking between bases</h4>
fantasai@8682 581
fantasai@8682 582 <p>In typical cases, <i>ruby base boxes</i> and <i>ruby annotation boxes</i>
fantasai@8682 583 are styled to forbid internal line wrapping and do not contain forced breaks.
fantasai@8682 584 (See <a href="#default-stylesheet">Appendix A</a>.)
fantasai@8682 585 In such cases the <i>ruby container</i> can only break between adjacent <i>ruby bases</i>,
fantasai@8533 586 and only if no <i>ruby annotations</i> span those <i>ruby bases</i>.
ishida@1665 587
fantasai@8533 588 <div class="figure">
fantasai@8533 589 <p><img src="images/r-break-a.gif"
fantasai@8533 590 alt="Diagram showing the line breaking opportunity in a complex ruby">
fantasai@8533 591 <p class="caption">Ruby line breaking opportunity
fantasai@8533 592 </div>
ishida@1665 593
fantasai@8533 594 <p>Whether ruby can break between two adjacent <i>ruby bases</i>
fantasai@9108 595 is controlled by normal line-breaking rules for the base text,
fantasai@8682 596 exactly as if the <i>ruby bases</i> were adjacent <i>inline</i> boxes.
fantasai@8682 597 (The annotations are ignored when determining soft wrap opportunities for the base level.)
fantasai@8533 598
fantasai@8533 599 <div class="example">
fantasai@8533 600 <p>For example, if two adjacent ruby bases are “蝴” and “蝶”,
fantasai@8533 601 the line may break between them,
fantasai@8533 602 because lines are normally allowed to break between two Han characters.
fantasai@8533 603 However, if 'word-break' is ''keep-all'', that line break is forbidden.
fantasai@8682 604 <pre>&lt;ruby>蝴&lt;rt>hú&lt;/rt>蝶&lt;rt>dié&lt;/rt></pre>
fantasai@8533 605 </div>
fantasai@8533 606
fantasai@8533 607 <p>Inter-base white space is significant for evaluating line break opportunities between <i>ruby bases</i>.
fantasai@8533 608 As with white space between inlines, it collapses when the line breaks there.
fantasai@8682 609 Similarly, annotation white space is also trimmed at a line break.
fantasai@8533 610
fantasai@8533 611 <div class="example">
fantasai@8533 612 <p>For example, given the following markup:
fantasai@8533 613 <pre>&lt;ruby>&lt;rb>one&lt;/rb> &lt;rb>two&lt;/rb> &lt;rt>1&lt;/rt> &lt;rt>2&lt;/rt>&lt;/ruby></pre>
fantasai@8533 614 <p>Due to the space, the line may break between “one” and “two“.
fantasai@8682 615 If the line breaks there, that space&mdash;and the space between “1” and “2”&mdash;disappears,
fantasai@8682 616 in accordance with standard CSS white space processing rules. [[CSS3TEXT]]
fantasai@8533 617 </div>
fantasai@8533 618
fantasai@8682 619 <h4 id="break-within">
fantasai@8682 620 Breaking within bases</h4>
fantasai@8533 621
fantasai@8833 622 <p>For longer base texts, it is sometimes appropriate to allow breaking within a base-annotation pair.
fantasai@8833 623 For example, if an English sentence is annotated with its Japanese translation,
fantasai@8833 624 allowing the text to wrap allows for reasonable line breaking behavior in the paragraph.
fantasai@8833 625
fantasai@8833 626 <p class="issue">
fantasai@8833 627 Insert scanned example so people don't think this is just the ramblings of an insane spec-writer.
fantasai@8833 628
fantasai@8833 629 <p>Line-breaking within a <i>ruby base</i> is only allowed if the 'white-space' property
fantasai@8833 630 of the <i>ruby base</i> and all its parallel <i>annotations</i> allow it,
fantasai@8833 631 and there exists a <i>soft wrap opportunity</i> <em>within</em> (i.e. not at the start or end)
fantasai@8833 632 the content of each base/annotation box.
fantasai@8833 633 Since there is no structural correspondance between fragments of content
fantasai@8833 634 within <i>ruby bases</i> and <i>annotations</i>,
fantasai@8833 635 the UA may break at any set of opportunities;
fantasai@8833 636 but it is recommended that the UA attempt to proportionally balance
fantasai@8833 637 the amount of content inside each fragment.
fantasai@8682 638
fantasai@8682 639 <p>There are no line breaking opportunities within ''inter-character'' <i>annotations</i>.
fantasai@8533 640
fantasai@8833 641 <p>Ruby alignment takes place within each fragment, after line-breaking.
fantasai@8833 642
fantasai@8833 643 <h3 id="ruby-bidi">
fantasai@8833 644 Bidi Reordering</h3>
fantasai@8833 645
fantasai@9168 646 <p class="issue">
fantasai@9168 647 Constraints:
fantasai@9168 648 Text within a ruby base must remain contiguous,
fantasai@9168 649 and bases belonging to a single annotation must remain contiguous.
fantasai@9168 650 Still figuring out exactly to enforce these limitations in a sensible manner.
fantasai@8833 651
fantasai@8854 652 <!--
fantasai@8854 653
fantasai@8833 654 <p>The Unicode bidirectional algorithm orders logically-stored text for visual presentation
fantasai@8833 655 when characters from scripts of opposing directionalities are mixed
fantasai@8833 656 within a single paragraph.
fantasai@8833 657 (See [[CSS3-WRITING-MODES]] for a more in-depth discussion of bidirectional text in CSS.)
fantasai@8833 658 Bidi reordering of ruby-annotation pairs is controlled by the ordering of the base text, as follows:
fantasai@8833 659
fantasai@8854 660 <h4 id="bidi-B">Proposal A</h4>
fantasai@8833 661
fantasai@8833 662 <p class="note">This proposal is simpler, but will require more frequent tagging of mixed-directionality content.
fantasai@8833 663
fantasai@8833 664 <p>To avoid the interference of the <i>annotations</i> in the ordering of base text,
fantasai@8833 665 all annotations are ignored for the purpose of resolving neutral characters in the base level.
fantasai@8833 666
fantasai@8833 667 <p>To preserve the correspondance of <i>ruby annotations</i>
fantasai@8833 668 to their respective <i>ruby bases</i>,
fantasai@8833 669 a few restrictions are imposed:
fantasai@8833 670 <ul>
fantasai@8854 671 <li>The contents of a <i>ruby base</i> or <i>ruby annotation</i> must remain contiguous.
fantasai@8854 672 To this end, the contents of each <i>ruby base</i> and <i>ruby annotation</i> are treated as if within a <i>bidi isolation</i>.
fantasai@8854 673 <li>For the purpose of ordering <i>ruby bases</i> within a <i>ruby container</i>,
fantasai@8854 674 each <i>ruby base</i> is treated as a strong character of its specified 'direction'.
fantasai@8854 675 (<i>Ruby annotations</i> are positioned with respect to their <i>bases</i>,
fantasai@8854 676 so are affected by reordering, but do not themselves participate in reordering.)
fantasai@8833 677 <li>All <i>bases</i> spanned by a single <i>annotation</i> must remain contiguous.
fantasai@8854 678 To this end, the embedding level of all bases spanned by a spanning <i>annotation</i>
fantasai@8854 679 is increased by two prior to reordering.
fantasai@8833 680 </ul>
fantasai@8833 681
fantasai@8833 682 <h4 id="bidi-B">Proposal B</h4>
fantasai@8833 683
fantasai@8833 684 <p class="note">This preserves some aspects of implicit bidi.
fantasai@8833 685 For example, annotating each half of "first-second" would not cause the word to reverse itself to "second-first" within an opposite-order paragraph.
fantasai@8833 686
fantasai@8833 687 <p>To avoid the interference of the <i>annotations</i> in the ordering of the base text,
fantasai@8833 688 all annotations are ignored for the purpose of resolving neutral characters in the base text;
fantasai@8833 689 and the base text is resolved exactly as if each <i>ruby base</i> were
fantasai@8833 690 just a normal <i>inline box</i> embedded in the <i>ruby container</i>'s inline formatting context.
fantasai@8833 691
fantasai@8833 692 <p>Furthermore, to preserve the correspondance of <i>ruby annotations</i>
fantasai@8833 693 to their respective <i>ruby bases</i>,
fantasai@8833 694 a few restrictions are imposed:
fantasai@8833 695 <ul>
fantasai@8833 696 <li>The contents of a <i>ruby base</i> must remain contiguous.
fantasai@8833 697 <li>All <i>bases</i> spanned by a single <i>annotation</i> must remain contiguous.
fantasai@8833 698 </ul>
fantasai@8833 699 <p>To this end, the text of <i>ruby base</i> boxes that are not <i>bidi-isolated</i>
fantasai@8833 700 must have its embedding level increased by two;
fantasai@8833 701 and if an <i>annotation</i> spans more than one <i>ruby base</i>,
fantasai@8833 702 the spanned text's embedding level
fantasai@8833 703 (or the embedding level assigned to the isolation, if the <i>ruby base</i> is <i>bidi-isolated</i>)
fantasai@8833 704 is further increased by two.
fantasai@8833 705
fantasai@8833 706 -->
fantasai@8833 707
fantasai@8548 708 <h3 id="line-height">
fantasai@8479 709 Ruby box and line stacking</h3>
ishida@1665 710
fantasai@8548 711 <p>The 'line-height' property controls spacing between lines in CSS.
fantasai@8548 712 When inline content on line is shorter than the 'line-height',
fantasai@8548 713 half-leading is added on either side of the content,
fantasai@8548 714 as specificed in <a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">CSS2.1&sect;10.8</a>. [[!CSS21]]
ishida@1665 715
fantasai@8548 716 <p>In order to ensure consistent spacing of lines,
fantasai@8548 717 documents with ruby typically ensure that the 'line-height' is large enough
fantasai@8548 718 to accommodate ruby between lines of text.
fantasai@8548 719 Therefore, ordinarily, <i>ruby annotation containers</i> and <i>ruby annotation boxes</i>
fantasai@8548 720 do not contribute to the measured height of a line's inline contents;
fantasai@8548 721 any alignment (see 'vertical-align') and line-height calculations
fantasai@8548 722 are performed using only the <i>ruby base container</i>,
fantasai@8548 723 exactly as if it were a normal inline.
fantasai@8548 724
fantasai@8548 725 <p>However, if the 'line-height' specified on the <i>ruby container</i>
fantasai@8548 726 is less than the distance between
fantasai@8548 727 the top of the top <i>ruby annotation container</i>
fantasai@8548 728 and the bottom of the bottom <i>ruby annotation container</i>,
fantasai@8548 729 then additional leading is added
fantasai@8548 730 on the appropriate side of the <i>ruby base container</i>
fantasai@8548 731 such that if a block consisted of three lines
fantasai@8548 732 each containing ruby identical to this,
fantasai@8548 733 none of the <i>ruby containers</i> would overlap.
fantasai@8548 734
fantasai@8548 735 <p class="note">Note that this does not ensure that the <i>ruby annotations</i> remain within the line box.
fantasai@8548 736 It merely ensures that <em>if all lines had equal spacing</em>
fantasai@8548 737 and equivalent amounts and positioning of <i>ruby annotations</i>,
fantasai@8548 738 there would be enough room to avoid overlap.
fantasai@8548 739
fantasai@8548 740 <p>Authors should ensure appropriate 'line-height' and 'padding' to accommodate ruby,
fantasai@8548 741 and be particularly careful at the beginning or end of a block
fantasai@8548 742 and when a line contains inline-level content
fantasai@8548 743 (such as images, inline blocks, or elements shifted with 'vertical-align')
fantasai@8548 744 taller than the paragraph's default font size.
fantasai@8548 745
fantasai@8548 746 <div class="figure">
fantasai@8548 747 <p><img src="images/rlh-a.gif"
fantasai@8548 748 alt="The content of each line sits in the middle of its line height;
fantasai@8548 749 the additional space on each side is called half-leading.
fantasai@8548 750 Ruby fits between lines if it is smaller than twice the half-leading,
fantasai@8548 751 but this means that it occupies space belonging to the half-leading of the previous line.">
fantasai@8548 752 <p class="caption">Ruby annotations will often overflow the line;
fantasai@8548 753 authors should ensure content over/under a ruby-annotated line
fantasai@8548 754 is adequately spaced to leave room for the ruby.
fantasai@8548 755 </div>
fantasai@8548 756
fantasai@8548 757 <p class="note">More control over how ruby affects alignment and line layout
fantasai@8548 758 will be part of the CSS Line Layout Module Level 3.
fantasai@8548 759 Note, it is currently in the process of being rewritten;
fantasai@8548 760 the current drafts should not be relied upon.
ishida@1665 761
fantasai@8479 762 <h2 id="ruby-props">
fantasai@8479 763 Ruby Properties</h2>
ishida@1665 764
fantasai@8526 765 <p>The following properties are introduced to control ruby positioning and alignment.
fantasai@8526 766
fantasai@8479 767 <h3 id="rubypos">
fantasai@8479 768 Ruby positioning: the 'ruby-position' property</h3>
ishida@1665 769
kojiishi@8496 770 <table class="propdef">
kojiishi@8496 771 <tr>
kojiishi@8496 772 <th>Name:
kojiishi@8496 773 <td><dfn>ruby-position</dfn>
kojiishi@8496 774 <tr>
kojiishi@8496 775 <th><a href="#values">Value</a>:
kojiishi@8496 776 <td>[ over | under | inter-character ] && [ right | left ]
kojiishi@8496 777 <tr>
kojiishi@8496 778 <th>Initial:
kojiishi@8496 779 <td>over right
kojiishi@8496 780 <tr>
kojiishi@8496 781 <th>Applies to:
fantasai@8526 782 <td>ruby annotation containers
kojiishi@8496 783 <tr>
kojiishi@8496 784 <th>Inherited:
kojiishi@8496 785 <td>yes
kojiishi@8496 786 <tr>
kojiishi@8496 787 <th>Percentages:
kojiishi@8496 788 <td>N/A
kojiishi@8496 789 <tr>
kojiishi@8496 790 <th>Media:
kojiishi@8496 791 <td>visual
kojiishi@8496 792 <tr>
kojiishi@8496 793 <th>Computed value:
fantasai@8526 794 <td>specified value
kojiishi@8496 795 <tr>
kojiishi@8496 796 <th>Animatable:
kojiishi@8496 797 <td>no
kojiishi@8496 798 <tr>
kojiishi@8496 799 <th>Canonical order:
kojiishi@8496 800 <td><abbr title="follows order of property value definition">per grammar</abbr>
kojiishi@8496 801 </table>
fantasai@8526 802
fantasai@8526 803 <p>This property controls position of the ruby text with respect to its base.
fantasai@8526 804 Values have the following meanings:
fantasai@8526 805
kojiishi@8496 806 <p class="issue"><span class="issuehead">Issue-107:&nbsp;</span> Roland Steiner has requested the addition of an auto value as default. See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=ruby-position%3A+undesirable+default+value+%27before%27+for+complex+ruby&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;period_month=&amp;period_year=&amp;index-grp=Public__FULL&amp;index-type=t&amp;type-index=www-style&amp;resultsperpage=20&amp;sortby=date">this thread</a> and <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=Styling+of+complex+Ruby&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;period_month=&amp;period_year=&amp;index-grp=Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core&amp;resultsperpage=20&amp;sortby=date">this one</a>.</p>
kojiishi@8496 807 <dl>
fantasai@8526 808 <dt><dfn title="ruby-position:over">''over''</dfn>
fantasai@8526 809 <dd>The ruby text appears <i>over</i> the base in horizontal text.
ishida@1665 810
kojiishi@8496 811 <div class="figure">
fantasai@8526 812 <p><img src="images/shinkansen-top.gif"
fantasai@8526 813 alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing above the base">
fantasai@8526 814 <p class="caption">Ruby over Japanese base text in horizontal layout
kojiishi@8496 815 </div>
kojiishi@8496 816 </dd>
ishida@1665 817
fantasai@8526 818 <dt><dfn title="ruby-position:right">''right''</dfn>
kojiishi@8496 819 <dd>The ruby text appears on the right side of the base in vertical text.
kojiishi@8496 820 <div class="figure">
fantasai@8526 821 <p><img src="images/shinkansen-right.gif" width="33"
fantasai@8526 822 alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the right of the base">
fantasai@8526 823 <p class="caption">Ruby to the right of Japanese base text in vertical layout
kojiishi@8496 824 </div>
kojiishi@8496 825 </dd>
ishida@1665 826
fantasai@8526 827 <dt><dfn title="ruby-position:under">''under''</dfn>
kojiishi@8496 828 <dd>The ruby text appears under the base in horizontal text.
kojiishi@8496 829 This is a relatively rare setting used in ideographic East Asian writing systems,
kojiishi@8496 830 most easily found in educational text.
ishida@1665 831
kojiishi@8496 832 <div class="figure">
fantasai@8526 833 <p><img src="images/shinkansen-bottom.gif"
fantasai@8526 834 alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing below the base">
fantasai@8526 835 <p class="caption">Ruby under Japanese base text in horizontal layout
kojiishi@8496 836 </div>
kojiishi@8496 837 </dd>
ishida@1665 838
fantasai@8526 839 <dt><dfn title="ruby-position:left">''left''</dfn>
kojiishi@8496 840 <dd>The ruby text appears on the left side of the base in vertical text.
kojiishi@8496 841
kojiishi@8496 842 <div class="figure">
fantasai@8526 843 <p><img src="images/shinkansen-left.gif"
fantasai@8526 844 alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the left of the base">
fantasai@8526 845 <p class="caption">Ruby to the left of Japanese base text in vertical layout
kojiishi@8496 846 </div>
kojiishi@8496 847 </dd>
kojiishi@8496 848
kojiishi@8496 849 <dt><dfn title="ruby-position:inter-character">''inter-character''</dfn></dt>
kojiishi@8496 850 <dd>
kojiishi@8496 851 <p>The ruby text appears on the right of the base in horizontal text.
fantasai@8526 852 This value forces the 'writing-mode' of the <i>ruby annotation</i> to be vertical.
fantasai@8526 853
fantasai@8526 854 <p>This value is provided for the special case of traditional Chinese
fantasai@8526 855 as used especially in Taiwan:
fantasai@8526 856 ruby (made of <a href="#g-bopomofo">bopomofo</a> glyphs) in that context
fantasai@8526 857 appears vertically along the right side of the base glyph,
fantasai@8526 858 even when the layout of the base characters is horizontal:
kojiishi@8496 859
kojiishi@8496 860 <div class="figure">
fantasai@8526 861 <p><img src="images/bopomofo.gif"
fantasai@8526 862 alt="Example of Taiwanese-style ruby">
fantasai@8526 863 <p class="caption">“Bopomofo” ruby in traditional Chinese
fantasai@8526 864 (ruby text shown in blue for clarity) in horizontal layout
kojiishi@8496 865 </div>
fantasai@8526 866 <p class="note">
fantasai@8526 867 Note that the user agent is responsible for ensuring the correct relative alignment and positioning of the glyphs,
fantasai@8526 868 including those corresponding to the tone marks, when displaying.
fantasai@8526 869 Tone marks are spacing characters that occur (in memory) at the end of the ruby text for each base character.
fantasai@8526 870 They are usually displayed in a separate column to the right of the bopomofo characters,
fantasai@8526 871 and the height of the tone mark depends on the number of characters in the syllable.
fantasai@8526 872 One tone mark, however, is placed above the bopomofo, not to the right of it.
kojiishi@8496 873 <!-- See Taiwanese requirements doc for EPUB at http://epub-revision.googlecode.com/files/EGLS_TW_eng.ppt -->
kojiishi@8496 874 </dd>
kojiishi@8496 875 </dl>
ishida@1665 876
fantasai@8526 877 <p>If multiple <i>ruby annotation containers</i> have the same 'ruby-position',
fantasai@8526 878 they stack along the block axis,
fantasai@8526 879 with lower levels of annotation closer to the base text.
ishida@1665 880
fantasai@8526 881 <h3 id="collapsed-ruby">
fantasai@8526 882 Collapsed Ruby Annotations: the 'ruby-merge' property</h3>
kojiishi@8499 883
kojiishi@8499 884 <table class="propdef">
kojiishi@8499 885 <tr>
kojiishi@8499 886 <th>Name:
kojiishi@8499 887 <td><dfn>ruby-merge</dfn>
kojiishi@8499 888 <tr>
kojiishi@8499 889 <th><a href="#values">Value</a>:
kojiishi@8499 890 <td>separate | collapse | auto
kojiishi@8499 891 <tr>
kojiishi@8499 892 <th>Initial:
kojiishi@8499 893 <td>separate
kojiishi@8499 894 <tr>
kojiishi@8499 895 <th>Applies to:
fantasai@8526 896 <td>ruby annotation containers
fantasai@8526 897 <tr>
fantasai@8526 898 <th>Inherited:
fantasai@8526 899 <td>yes
fantasai@8526 900 <tr>
fantasai@8526 901 <th>Percentages:
fantasai@8526 902 <td>N/A
fantasai@8526 903 <tr>
fantasai@8526 904 <th>Media:
fantasai@8526 905 <td>visual
fantasai@8526 906 <tr>
fantasai@8526 907 <th>Computed value:
fantasai@8526 908 <td>specified value
fantasai@8526 909 <tr>
fantasai@8526 910 <th>Animatable:
fantasai@8526 911 <td>no
fantasai@8526 912 <tr>
fantasai@8526 913 <th>Canonical order:
fantasai@8526 914 <td><abbr title="follows order of property value definition">per grammar</abbr>
fantasai@8526 915 </table>
fantasai@8526 916
fantasai@8526 917 <p>
fantasai@8526 918 This property controls how ruby annotation boxes should be rendered
fantasai@8526 919 when there are more than one in a ruby container box.
fantasai@8526 920
fantasai@8526 921 <p>Possible values:</p>
fantasai@8526 922 <dl>
fantasai@8526 923 <dt><dfn title="ruby-merge:separate">''separate''</dfn>
fantasai@8526 924 <dd>
fantasai@8526 925 <p>
fantasai@8526 926 Each ruby annotation box is rendered in the same column(s) as its corresponding base box(es).
fantasai@8526 927 This style is called “mono ruby” in [[JLREQ]].
fantasai@8526 928
fantasai@8526 929 <div class="example">
fantasai@8526 930 <p>For example, the following two markups render the same:
fantasai@8526 931 <pre>&lt;ruby&gt;無&lt;rt&gt;む&lt;/ruby&gt;&lt;ruby&gt;常&lt;rt&gt;じょう&lt;/ruby&gt;</pre>
fantasai@8526 932 <p>and:
fantasai@8526 933 <pre>&lt;ruby style="ruby-merge:separate"&gt;&lt;rb&gt;無&lt;rb&gt;常&lt;rt&gt;む&lt;rt&gt;じょう&lt;/ruby&gt;</pre>
fantasai@8526 934 </div>
fantasai@8526 935 </dd>
fantasai@8526 936
fantasai@8526 937 <dt><dfn title="ruby-merge:collapse">''collapse''</dfn>
fantasai@8526 938 <dd>
fantasai@8526 939 <p>
fantasai@8526 940 All <i>ruby annotation boxes</i> within the same <i>ruby segment</i> on the same line are concatenated,
fantasai@8526 941 and laid out as if their contents belonged to a single <i>ruby annotation box</i>
fantasai@9108 942 spanning all their associated <i>ruby base boxes</i>.
fantasai@8526 943 This style renders similar to “group ruby” in [[JLREQ]],
fantasai@8526 944 except that <i>ruby annotations</i> are kept together with their respective <i>ruby bases</i> when breaking lines.
fantasai@8526 945 </p>
fantasai@8526 946
fantasai@8526 947 <div class="example">
fantasai@8526 948 <p>The following two markups render the same both characters fit on one line:
fantasai@8526 949 <pre>&lt;ruby&gt;無常&lt;rt&gt;むじょう&lt;/ruby&gt;</pre>
fantasai@8526 950 <p>and:
fantasai@8526 951 <pre>&lt;ruby style="ruby-merge:collapse"&gt;&lt;rb&gt;無&lt;rb&gt;常&lt;rt&gt;む&lt;rt&gt;じょう&lt;/ruby&gt;</pre>
fantasai@8526 952 <p>However, the second one renders the same as ''ruby-position: separate''
fantasai@8526 953 when the two bases are split across lines.
fantasai@8526 954 </div>
fantasai@8526 955 </dd>
fantasai@8526 956
fantasai@8526 957 <dt><dfn title="ruby-merge:auto">''auto''</dfn></dt>
fantasai@8526 958 <dd>
fantasai@8526 959 <p>
fantasai@8526 960 The user agent may use any algorithm to determine how each ruby annotation box
fantasai@9163 961 is rendered to its corresponding base box,
fantasai@9163 962 with the intention that if all annotations fit over their respective bases,
fantasai@9163 963 the result is identical to “mono ruby”,
fantasai@9163 964 but if some annotations are wider than their bases
fantasai@9163 965 the space is shared in some way
fantasai@9163 966 to avoid forcing space between bases.
fantasai@8526 967 <div class="example">
fantasai@8526 968 <p>
fantasai@9163 969 One possible algorithm is described as “jukugo ruby” in [[JLREQ]].
fantasai@8526 970 <p>
fantasai@9163 971 Another, more simplified algorithm of “jukugo ruby” is
fantasai@9163 972 to render as ''separate'' if all ruby annotation boxes fit
fantasai@9163 973 within the advances of their corresponding base boxes,
fantasai@9163 974 and render as ''collapse'' otherwise.
fantasai@8526 975 </p>
fantasai@8526 976 </div>
fantasai@8526 977 </dd>
fantasai@8526 978 </dl>
fantasai@8526 979
fantasai@9108 980 <h3 id="ruby-align-property"><a name="rubyalign"></a>
fantasai@8526 981 Ruby Text Distribution: the 'ruby-align' property</h3>
fantasai@8526 982
fantasai@8526 983 <table class="propdef">
fantasai@8526 984 <tr>
fantasai@8526 985 <th>Name:
fantasai@8526 986 <td><dfn>ruby-align</dfn>
fantasai@8526 987 <tr>
fantasai@8526 988 <th><a href="#values">Value</a>:
fantasai@9110 989 <td>start | center | space-between | space-around
fantasai@8526 990 <tr>
fantasai@8526 991 <th>Initial:
fantasai@9110 992 <td>space-around
fantasai@8526 993 <tr>
fantasai@8526 994 <th>Applies to:
fantasai@8526 995 <td>ruby bases, ruby annotations, ruby base containers, ruby annotation containers
kojiishi@8499 996 <tr>
kojiishi@8499 997 <th>Inherited:
kojiishi@8499 998 <td>yes
kojiishi@8499 999 <tr>
kojiishi@8499 1000 <th>Percentages:
kojiishi@8499 1001 <td>N/A
kojiishi@8499 1002 <tr>
kojiishi@8499 1003 <th>Media:
kojiishi@8499 1004 <td>visual
kojiishi@8499 1005 <tr>
kojiishi@8499 1006 <th>Computed value:
kojiishi@8499 1007 <td>specified value (except for initial and inherit)
kojiishi@8499 1008 </table>
kojiishi@8499 1009
fantasai@8526 1010 <p>This property specifies how text is distributed within the various ruby boxes
fantasai@9108 1011 when their contents do not exactly fill their respective boxes.
fantasai@9113 1012 Note that space distributed by 'ruby-align' is unrelated to, and independent of,
fantasai@9113 1013 any space distributed due to justification.
kojiishi@8499 1014
fantasai@8526 1015 <p>Values have the following meanings:
kojiishi@8496 1016 <dl>
fantasai@9108 1017 <dt><dfn title="ruby-align:start">''start''</dfn></dt>
fantasai@9108 1018 <dd>The ruby content is aligned with the start edge of its box.
fantasai@9108 1019 <div class="figure">
fantasai@9108 1020 <p><img
fantasai@9108 1021 alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base"
fantasai@9108 1022 width="145" height="91" src="images/ra-l.gif" /><img
fantasai@9108 1023 width="145" height="91"
fantasai@9108 1024 alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
fantasai@9108 1025 src="images/ra-l-rb.gif" />
fantasai@9110 1026 <p class="caption">''start'' ruby distribution
fantasai@9108 1027 </div>
fantasai@9108 1028 </dd>
fantasai@9108 1029
fantasai@9108 1030 <dt><dfn title="ruby-align:center">''center''</dfn></dt>
fantasai@9108 1031 <dd>The ruby content is centered within its box.
fantasai@9108 1032 <div class="figure">
fantasai@9108 1033 <p><img width="145" height="91"
fantasai@9108 1034 alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base"
fantasai@9108 1035 src="images/ra-c.gif" /><img width="145" height="91"
fantasai@9108 1036 alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
fantasai@9108 1037 src="images/ra-c-rb.gif" />
fantasai@9110 1038 <p class="caption">''center'' ruby distribution
fantasai@9108 1039 </div>
fantasai@9108 1040 </dd>
fantasai@9108 1041
fantasai@9108 1042 <dt><dfn title="ruby-align:space-between">''space-between''</dfn></dt>
kojiishi@8496 1043 <dd>
fantasai@9108 1044 <p>The ruby content expands as defined for normal text justification
fantasai@9108 1045 (as defined by 'text-justify'),
fantasai@9110 1046 except that if there are no <a href="http://www.w3.org/TR/css3-text/#expansion-opportunity"><i>expansion opportunities</i></a>
fantasai@9110 1047 the content is centered.
fantasai@9108 1048 <div class="figure">
fantasai@9108 1049 <p><img width="145" height="91"
fantasai@9108 1050 alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base"
fantasai@9108 1051 src="images/ra-dl.gif" /><img width="145" height="91"
fantasai@9108 1052 alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base"
fantasai@9108 1053 src="images/ra-dl-rb.gif" />
fantasai@9110 1054 <p class="caption">''space-between'' ruby distribution
fantasai@9108 1055 </div>
fantasai@9108 1056 </dd>
fantasai@9108 1057
fantasai@9108 1058 <dt><dfn title="ruby-align:space-around">''space-around''</dfn></dt>
fantasai@9108 1059 <dd>
fantasai@9108 1060 <p>As for ''space-between''
fantasai@9108 1061 except that there exists an extra <a href="http://www.w3.org/TR/css3-text/#expansion-opportunity"><i>expansion opportunity</i></a>
fantasai@9108 1062 whose space is distributed half before and half after the ruby content.
fantasai@9108 1063 <div class="example">
fantasai@9110 1064 <p>Since a typical implementation will by default define <i>expansion opportunities</i>
fantasai@9108 1065 between every adjacent pair of CJK <i>characters</i>
fantasai@9108 1066 and not between adjacent pairs of Latin <i>characters</i>,
fantasai@9108 1067 this should result in the behavior recommended by [[JLREQ]]:
fantasai@9110 1068 for wide-cell ruby content to be distributed...
kojiishi@8496 1069 <div class="figure">
kojiishi@8496 1070 <p><img width="145" height="91"
kojiishi@8496 1071 alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base"
kojiishi@8496 1072 src="images/ra-ds.gif" /><img width="145" height="91"
kojiishi@8496 1073 alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base"
fantasai@9108 1074 src="images/ra-ds-rb.gif" />
fantasai@9110 1075 <p class="caption">Wide-cell text in ''space-around'' ruby distribution is spaced apart
kojiishi@8496 1076 </div>
fantasai@9110 1077 <p>... and narrow-cell glyph ruby to be centered.
kojiishi@8496 1078 <div class="figure">
kojiishi@8496 1079 <p><img
kojiishi@8496 1080 alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base"
kojiishi@8496 1081 width="145" height="91"
kojiishi@8496 1082 src="images/ra-c-h.gif" /><img
kojiishi@8496 1083 alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base"
kojiishi@8496 1084 width="145" height="91"
fantasai@9108 1085 src="images/ra-c-rb-h.gif" />
fantasai@9110 1086 <p class="caption">Narrow-width ruby text in ''space-around'' ruby distribution is centered
kojiishi@8496 1087 </div>
kojiishi@8496 1088 </div>
kojiishi@8496 1089 </dd>
kojiishi@8496 1090 </dl>
ishida@1665 1091
fantasai@9112 1092 <p class="issue">Add a paragraph explaining how to distribute space in situations with spanning annotations.
fantasai@9112 1093 <!--
kojiishi@8496 1094 <p>For a complex ruby with spanning elements, one additional consideration is
kojiishi@8496 1095 required. If the spanning element spans multiple 'rows' (other rbc or rtc
kojiishi@8496 1096 elements), and the ruby alignment requires space distribution among the
kojiishi@8496 1097 'spanned' elements, a ratio must be determined among the 'columns' of spanned
kojiishi@8496 1098 elements. This ratio is computed by taking into consideration the widest
kojiishi@8496 1099 element within each column.</p>
fantasai@9112 1100 -->
fantasai@8527 1101 <h2 id="edge-effects">
fantasai@8527 1102 Edge Effects</h2>
fantasai@8527 1103
fantasai@8527 1104 <h3 id="ruby-overhang">
fantasai@8527 1105 Overhanging Ruby</h3>
kojiishi@8502 1106
kojiishi@8502 1107 <p>
kojiishi@8502 1108 When <i>ruby annotation box</i> is longer than its corresponding <i>ruby base box</i>,
kojiishi@8502 1109 the <i>ruby annotation box</i> may partially overhang adjacent boxes.
kojiishi@8502 1110 </p>
kojiishi@8502 1111 <p>
fantasai@8527 1112 This level of the specification does not define
kojiishi@8503 1113 how much the overhang may be allowed, and under what conditions.
kojiishi@8502 1114 </p>
fantasai@8527 1115
fantasai@8527 1116 <p>If the ruby text is not allowed to overhang,
fantasai@8527 1117 then the ruby behaves like a traditional inline box,
fantasai@8527 1118 i.e. only its own contents are rendered within its boundaries
fantasai@8527 1119 and adjacent elements do not cross the box boundary:
fantasai@8527 1120
fantasai@8527 1121 <div class="figure">
fantasai@8527 1122 <p><img src="images/ro-n.gif"
fantasai@8527 1123 alt="Diagram showing the ruby boxes interacting with adjacent text">
fantasai@8527 1124 <p class="caption">Simple ruby whose text is not allowed to overhang adjacent text
fantasai@8527 1125 </div>
fantasai@8527 1126
fantasai@8527 1127 <p>However, if <i>ruby annotation</i> content is allowed to overhang adjacent elements
fantasai@8527 1128 and it happens to be wider than its base,
fantasai@8527 1129 then the adjacent content is partially rendered within the area of the <i>ruby container box</i>,
fantasai@8527 1130 while the <i>ruby annotation</i> may partially overlap the upper blank parts of the adjacent content:
fantasai@8527 1131
fantasai@8527 1132 <div class="figure">
fantasai@8527 1133 <p><img src="images/ro-a.gif"
fantasai@8527 1134 alt="Diagram showing the ruby boxes interacting with adjacent text">
fantasai@8527 1135 <p class="caption">Simple ruby whose text is allowed to overhang adjacent text
fantasai@8527 1136 </div>
fantasai@8527 1137
fantasai@8527 1138 <p>The <i>ruby annotations</i> related to a <i>ruby base</i>
fantasai@8527 1139 must never overhang another <i>ruby base</i>.
fantasai@8527 1140
fantasai@8527 1141 <p>The alignment of the contents of the base or the ruby text
fantasai@8527 1142 is not affected by overhanging behavior.
fantasai@8527 1143 The alignment is achieved the same way regardless of the overhang behavior setting
fantasai@8527 1144 and it is computed before the space available for overlap is determined.
fantasai@8527 1145 It is controlled by the 'ruby-align' property.
fantasai@8527 1146
fantasai@8661 1147 <p class="issue">
fantasai@8661 1148 I suspect overhanging interacts with alignment in some cases;
fantasai@8661 1149 might need to look into this later.
fantasai@8661 1150
fantasai@8527 1151 <p>This entire logic applies the same way in vertical ideographic layout,
fantasai@8527 1152 only the dimension in which it works in such a layout is vertical,
fantasai@8527 1153 instead of horizontal.
fantasai@8527 1154
kojiishi@8502 1155 <div class="example">
kojiishi@8502 1156 <p>
kojiishi@8502 1157 The user agent may use [[JIS4051]] recommendation of
kojiishi@8502 1158 using one ruby text character length as the maximum overhang length.
kojiishi@8502 1159 Detailed rules for how ruby text can overhang adjacent characters for Japanese are described by [[JLREQ]].
kojiishi@8502 1160 </p>
kojiishi@8502 1161 </div>
kojiishi@8502 1162
fantasai@8527 1163 <h3 id="line-edge">
fantasai@8527 1164 Line-edge Alignment</h3>
fantasai@8527 1165
kojiishi@8502 1166 <p>
fantasai@8527 1167 When a <i>ruby annotation box</i> that is longer than its <i>ruby base</i>
fantasai@8527 1168 is at the start or end edge of a line,
fantasai@8527 1169 the user agent <em>may</em> force the side of the <i>ruby annotation</i> that touches the edge of the line
fantasai@8527 1170 to align to the corresponding edge of the base.
kojiishi@8502 1171 This type of alignment is described by [[JLREQ]].
kojiishi@8502 1172 </p>
kojiishi@8502 1173 <p>
fantasai@8527 1174 This level of the specification does not provide a mechanism to control this behavior.
kojiishi@8502 1175 </p>
kojiishi@8502 1176 <div class="figure">
fantasai@8527 1177 <p><img src="images/ra-le-l.gif"
fantasai@8527 1178 alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base">
fantasai@8527 1179 <img src="images/ra-le-r.gif"
fantasai@8527 1180 alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base">
fantasai@8527 1181 <p class="caption">Line-edge alignment
kojiishi@8502 1182 </div>
kojiishi@8502 1183
kojiishi@8496 1184 <!--
fantasai@8479 1185 <h3 id="rubyover">
fantasai@8479 1186 Ruby overhanging: the 'ruby-overhang' property</h3>
ishida@1665 1187
fantasai@8479 1188 <table class="propdef">
fantasai@8479 1189 <tr>
fantasai@8479 1190 <th>Name:
fantasai@8479 1191 <td><dfn>ruby-overhang</dfn>
fantasai@8479 1192 <tr>
fantasai@8479 1193 <th>Value:
fantasai@8479 1194 <td>auto | start | end | none
fantasai@8479 1195 <tr>
fantasai@8479 1196 <th>Initial:
fantasai@8479 1197 <td>none
fantasai@8479 1198 <tr>
fantasai@8479 1199 <th>Applies to:
fantasai@8479 1200 <td>the parent of elements with display: ruby-text
fantasai@8479 1201 <tr>
fantasai@8479 1202 <th>Inherited:
fantasai@8479 1203 <td>yes
fantasai@8479 1204 <tr>
fantasai@8479 1205 <th>Percentages:
fantasai@8479 1206 <td>N/A
fantasai@8479 1207 <tr>
fantasai@8479 1208 <th>Media:
fantasai@8479 1209 <td>visual
fantasai@8479 1210 <tr>
fantasai@8479 1211 <th>Computed value:
fantasai@8479 1212 <td>specified value (except for initial and inherit)
fantasai@8479 1213 </table>
ishida@1665 1214
ishida@1665 1215 <p>This property determines whether, and on which side, ruby text is allowed
ishida@1665 1216 to partially overhang any adjacent text in addition to its own base, when the
ishida@1665 1217 ruby text is wider than the ruby base. Note that ruby text is never allowed to
ishida@1665 1218 overhang glyphs belonging to another ruby base. <span class="issue"><span class="issuehead">Issue:&nbsp;</span> This rule must be broken if we are to allow support for jukugo ruby.</span> Also the user agent is free to assume
ishida@1665 1219 a maximum amount by which ruby text may overhang adjacent text. The user agent may use
fantasai@8479 1220 the [[JIS4051]] recommendation of using one ruby text character
fantasai@8479 1221 length as the maximum overhang length. Detailed rules for how ruby text can overhang adjacent characters for Japanese are described by [[JLREQ]].</p>
ishida@1665 1222
ishida@1665 1223 <p>Possible values:</p>
ishida@1665 1224 <dl>
ishida@1665 1225 <dt><strong>auto</strong></dt>
fantasai@8479 1226 <dd>The ruby text can overhang text adjacent to the base on either side. [[JLREQ]] and [[JIS4051]] specify the categories of characters that
ishida@3034 1227 ruby text can overhang. The user agent is free to follow those recommendations or specify its own classes of
ishida@1665 1228 characters to overhang. This is the initial value.
ishida@1665 1229 <div class="figure">
ishida@1665 1230 <p><img class="example" width="177" height="91"
ishida@1666 1231 alt="Diagram of glyph layout in overhanging ruby" src="images/ro-a.gif" /></p>
ishida@1665 1232 <p><b>Figure 4.3.1</b>: Ruby overhanging adjacent text</p>
ishida@1665 1233 </div>
ishida@1665 1234 </dd>
ishida@1665 1235 <dt><strong>start</strong></dt>
ishida@3034 1236 <dd>The ruby text can only overhang the text that precedes it. That means, for
ishida@3034 1237 example, that ruby cannot overhang text that is to the right of it in
ishida@3034 1238 horizontal LTR layout, and it cannot overhang text that is below it in
ishida@1665 1239 vertical-ideographic layout.
ishida@1665 1240 <div class="figure">
ishida@1665 1241 <p><img class="example" width="199" height="91"
ishida@1665 1242 alt="Diagram of glyph layout when ruby overhangs the preceding glyphs only"
ishida@1666 1243 src="images/ro-s.gif" /></p>
ishida@1665 1244 <p><b>Figure 4.3.2</b>: Ruby overhanging preceding text only</p>
ishida@1665 1245 </div>
ishida@1665 1246 </dd>
ishida@1665 1247 <dt><strong>end</strong></dt>
ishida@3034 1248 <dd>The ruby text can only overhang the text that follows it. That means, for
ishida@3034 1249 example, that ruby cannot overhang text that is to the left of it in
ishida@3034 1250 horizontal LTR layout, and it cannot overhang text that is above it in
ishida@1665 1251 vertical-ideographic layout.
ishida@1665 1252 <div class="figure">
ishida@1665 1253 <p><img class="example" width="198" height="91"
ishida@1665 1254 alt="Diagram of glyph layout when ruby overhangs the following characters only"
ishida@1666 1255 src="images/ro-e.gif" /></p>
ishida@1665 1256 <p><b>Figure 4.3.3</b>: Ruby overhanging following text only</p>
ishida@1665 1257 </div>
ishida@1665 1258 </dd>
ishida@1665 1259 <dt><strong>none</strong></dt>
ishida@1665 1260 <dd>The ruby text cannot overhang any text adjacent to its base, only its
ishida@1665 1261 own base.
ishida@1665 1262
ishida@1665 1263 <div class="figure">
ishida@1665 1264 <p><img class="example" width="220" height="91"
ishida@1665 1265 alt="Diagram of glyph layout in non-overhanging ruby"
ishida@1666 1266 src="images/ro-n.gif" /></p>
ishida@1665 1267 <p><b>Figure 4.3.4</b>: Ruby not allowed to overhang adjacent text</p>
ishida@1665 1268 </div>
ishida@1665 1269 </dd>
ishida@1665 1270 </dl>
ishida@1665 1271
fantasai@8479 1272 <h3 id="rubyspan">
fantasai@8479 1273 Ruby annotation spanning: the 'ruby-span' property</h3>
ishida@1665 1274
fantasai@8479 1275 <table class="propdef">
fantasai@8479 1276 <tr>
fantasai@8479 1277 <th>Name:
fantasai@8479 1278 <td><dfn>ruby-span</dfn>
fantasai@8479 1279 <tr>
fantasai@8479 1280 <th>Value:
fantasai@8479 1281 <td>attr(x) | none
fantasai@8479 1282 <tr>
fantasai@8479 1283 <th>Initial:
fantasai@8479 1284 <td>none
fantasai@8479 1285 <tr>
fantasai@8479 1286 <th>Applies to:
fantasai@8479 1287 <td>elements with display: ruby-text
fantasai@8479 1288 <tr>
fantasai@8479 1289 <th>Inherited:
fantasai@8479 1290 <td>no
fantasai@8479 1291 <tr>
fantasai@8479 1292 <th>Percentages:
fantasai@8479 1293 <td>N/A
fantasai@8479 1294 <tr>
fantasai@8479 1295 <th>Media:
fantasai@8479 1296 <td>visual
fantasai@8479 1297 <tr>
fantasai@8479 1298 <th>Computed value:
fantasai@8479 1299 <td>&lt;number&gt;
fantasai@8479 1300 </table>
ishida@1665 1301
ishida@1665 1302 <p>This property controls the spanning behavior of annotation elements. </p>
ishida@1665 1303
ishida@1665 1304 <p class="note"><span class="note-label">Note:</span> A XHTML user agent may also use the <samp>rbspan</samp>
ishida@1665 1305 attribute to get the same effect.</p>
ishida@1665 1306
ishida@1665 1307 <p>Possible values:</p>
ishida@1665 1308
ishida@1665 1309 <dl>
ishida@1665 1310 <dt><strong>attr(x)</strong></dt>
ishida@1665 1311 <dd>The value of attribute 'x' as a string value. The string value is
ishida@1665 1312 evaluated as a &lt;number&gt; to determine the number of ruby base elements to be
ishida@1665 1313 spanned by the annotation element. If the &lt;number&gt; is &#39;0&#39;, it is replaced by
ishida@1665 1314 &#39;1&#39;.The &lt;number&gt; is the computed value. </dd>
ishida@1665 1315 <dt>none</dt>
ishida@1665 1316 <dd>No spanning. The computed value is &#39;1&#39;.</dd>
ishida@1665 1317 </dl>
ishida@1665 1318
ishida@1665 1319 <p>The following example shows an XML example using the 'display' property
ishida@1665 1320 values associated with the 'ruby structure and the 'ruby-span' property</p>
ishida@3034 1321 <pre class="xml">myruby { display: ruby; }
ishida@1665 1322 myrbc { display: ruby-base-container; }
ishida@1665 1323 myrb { display: ruby-base; }
ishida@1665 1324 myrtc.before { display: ruby-text-container; ruby-position: before}
ishida@1665 1325 myrtc.after { display: ruby-text-container; ruby-position: after}
ishida@1665 1326 myrt { display: ruby-text; ruby-span: attr(rbspan); }
ishida@1665 1327 ...
ishida@1665 1328 &lt;myruby&gt;
ishida@1665 1329 &lt;myrbc&gt;
ishida@1665 1330 &lt;myrb&gt;10&lt;/myrb&gt;
ishida@1665 1331 &lt;myrb&gt;31&lt;/myrb&gt;
ishida@1665 1332 &lt;myrb&gt;2002&lt;/myrb&gt;
ishida@1665 1333 &lt;/myrbc&gt;
ishida@1665 1334 &lt;myrtc class=&quot;before&quot;&gt;
ishida@1665 1335 &lt;myrt&gt;Month&lt;/myrt&gt;
ishida@1665 1336 &lt;myrt&gt;Day&lt;/myrt&gt;
ishida@1665 1337 &lt;myrt&gt;Year&lt;/myrt&gt;
ishida@1665 1338 &lt;/myrtc&gt;
ishida@1665 1339 &lt;myrtc class=&quot;after&quot;&gt;
ishida@1665 1340 &lt;myrt rbspan=&quot;3&quot;&gt;Expiration Date&lt;/myrt&gt;
ishida@1665 1341 &lt;/myrtc&gt;
ishida@1665 1342 &lt;/myruby&gt;</pre>
kojiishi@8496 1343 -->
ishida@1665 1344
fantasai@8497 1345 <h2 id="default-stylesheet" class="no-num">
fantasai@8497 1346 Appendix A: Default Style Sheet</h2>
ishida@1665 1347
fantasai@8497 1348 <p><em>This section is informative.</em>
ishida@1665 1349
fantasai@8497 1350 <h3 id="default-ua-ruby" class="no-num">
fantasai@8497 1351 <span class="secno">A.1</span> Supporting Ruby Layout</h3>
ishida@1665 1352
fantasai@8497 1353 <p>The following represents a default UA style sheet
fantasai@8497 1354 for rendering HTML and XHTML ruby markup as ruby layout:
ishida@1665 1355
fantasai@8497 1356 <pre>
fantasai@8497 1357 <!-- -->ruby { display: ruby; }
fantasai@8497 1358 <!-- -->rb { display: ruby-base; white-space: nowrap; }
fantasai@8497 1359 <!-- -->rt { display: ruby-text; white-space: nowrap; font-size: 50%; }
fantasai@8497 1360 <!-- -->rbc { display: ruby-base-container; }
fantasai@8854 1361 <!-- -->rtc { display: ruby-text-container; }
fantasai@8854 1362 <!-- -->ruby, rb, rt, rbc, rtc { unicode-bidi: isolate; }</pre>
fantasai@8497 1363
fantasai@8497 1364 <p>Additional rules for UAs supporting the relevant features of [[CSS3-TEXT-DECOR]] and [[CSS3-FONTS]]:
fantasai@8497 1365 <pre>rt { font-variant-east-asian: ruby; text-emphasis: none; }</pre>
fantasai@8497 1366
fantasai@8497 1367 <p class="note">Authors should not use the above rules;
fantasai@8497 1368 a UA that supports ruby layout should provide these by default.
fantasai@8497 1369
fantasai@8497 1370 <h3 id="default-inline" class="no-num">
fantasai@8497 1371 <span class="secno">A.2</span> Inlining Ruby Annotations</h3>
fantasai@8497 1372
fantasai@8497 1373 <p>The following represents a sample style sheet
fantasai@8497 1374 for rendering HTML and XHTML ruby markup as inline annotations:
fantasai@8497 1375
fantasai@8497 1376 <pre>ruby, rb, rt, rbc, rtc, rp {
fantasai@8497 1377 <!-- --> display: inline; white-space: inherit;
fantasai@8497 1378 <!-- --> font-variant-east-asian: inherit; text-emphasis: inherit; }</pre>
fantasai@8497 1379
fantasai@8497 1380 <h3 id="default-parens" class="no-num">
fantasai@8497 1381 <span class="secno">A.3</span> Generating Parentheses</h3>
fantasai@8497 1382
fantasai@8497 1383 <p>Unfortunately, because Selectors cannot match against text nodes,
fantasai@8497 1384 it's not possible with CSS to express rules that will automatically and correctly
fantasai@8497 1385 add parentheses to unparenthesized ruby annotations in HTML.
fantasai@8498 1386 (This is because HTML ruby allows implying the <i>ruby base</i> from raw text, without a corresponding element.)
fantasai@8498 1387 However, these rules will handle cases where either <code>&lt;rb&gt;</code>
fantasai@8498 1388 or <code>&lt;rtc&gt;</code> is used rigorously.
fantasai@8498 1389
fantasai@8497 1390 <pre>
fantasai@8498 1391 <!-- -->/* Parens around &lt;rtc> */
fantasai@8497 1392 <!-- -->rtc::before { content: "("; }
fantasai@8498 1393 <!-- -->rtc::after { content: ")"; }
fantasai@8497 1394
fantasai@8498 1395 <!-- -->/* Parens before first &lt;rt> not inside &lt;rtc> */
fantasai@8498 1396 <!-- -->rb + rt::before,
fantasai@8498 1397 <!-- -->rtc + rt::before { content: "("; }
fantasai@8497 1398
fantasai@8498 1399 <!-- -->/* Parens after &lt;rt> not inside &lt;rtc> */
fantasai@8498 1400 <!-- -->rb ~ rt:last-child::after,
fantasai@8498 1401 <!-- -->rt + rb::before { content: ")"; }
fantasai@8498 1402 <!-- -->rt + rtc::before { content: ")("; }</pre>
ishida@1665 1403
fantasai@8479 1404 <h2 id="glossary">
fantasai@8479 1405 Glossary</h2>
ishida@1665 1406 <dl>
ishida@1665 1407 <dt><a id="g-bopomofo"><strong><span
ishida@1665 1408 lang="zh">Bopomofo</span></strong></a></dt>
ishida@1665 1409 <dd>37 characters and 4 tone markings used as phonetics in Chinese,
ishida@1665 1410 especially standard Mandarin.</dd>
ishida@1665 1411 <dt><a id="g-hanja"><strong><span
ishida@1665 1412 lang="ko">Hanja</span></strong></a></dt>
ishida@1665 1413 <dd>Subset of the Korean writing system that utilizes ideographic
ishida@1665 1414 characters borrowed or adapted from the Chinese writing system. Also see
ishida@1665 1415 <a href="#g-kanji"><span lang="ja">Kanji</span></a>.</dd>
ishida@1665 1416 <dt><a id="g-hiragana"><strong><span
ishida@1665 1417 lang="ja">Hiragana</span></strong></a></dt>
ishida@1665 1418 <dd>Japanese syllabic script, or character of that script. Rounded and
ishida@1665 1419 cursive in appearance. Subset of the Japanese writing system, used together
ishida@1665 1420 with kanji and katakana. In recent times, mostly used to write Japanese
ishida@1665 1421 words when kanji are not available or appropriate, and word endings and
ishida@1665 1422 particles. Also see <a
ishida@1665 1423 href="#g-katakana"><span lang="ja">Katakana</span></a>.</dd>
ishida@1665 1424 <dt><a id="g-ideogram"><strong>Ideograph</strong></a></dt>
ishida@1665 1425 <dd>A character that is used to represent an idea, word, or word component,
ishida@1665 1426 in contrast to a character from an alphabetic or syllabic script. The most
ishida@1665 1427 well-known ideographic script is used (with some variation) in East Asia
ishida@1665 1428 (China, Japan, Korea,...).</dd>
ishida@1665 1429 <dt><a id="g-kana"><strong><span lang="ja">Kana</span></strong></a></dt>
ishida@1665 1430 <dd>Collective term for hiragana and katakana.</dd>
ishida@1665 1431 <dt><a id="g-kanji"><strong>Kanji</strong></a></dt>
ishida@1665 1432 <dd>Japanese term for ideographs; ideographs used in Japanese. Subset of the
ishida@1665 1433 Japanese writing system, used together with hiragana and katakana. Also see <a
ishida@1665 1434 href="#g-hanja"><span lang="ko">Hanja</span></a>.</dd>
ishida@1665 1435 <dt><a id="g-katakana"><strong><span
ishida@1665 1436 lang="ja">Katakana</span></strong></a></dt>
ishida@1665 1437 <dd>Japanese syllabic script, or character of that script. Angular in
ishida@1665 1438 appearance. Subset of the Japanese writing system,&nbsp; used together with
ishida@1665 1439 kanji and hiragana. In recent times, mainly used to write foreign words. Also see <a
ishida@1665 1440 href="#g-hiragana"><span lang="ja">Hiragana</span></a>.</dd>
ishida@1665 1441 </dl>
ishida@1665 1442
fantasai@8479 1443 <h2 id="conformance">
fantasai@8479 1444 Conformance</h2>
fantasai@8479 1445
fantasai@8479 1446 <h3 id="conventions">
fantasai@8479 1447 Document conventions</h3>
fantasai@8479 1448
fantasai@8479 1449 <p>Conformance requirements are expressed with a combination of
fantasai@8479 1450 descriptive assertions and RFC 2119 terminology. The key words “MUST”,
fantasai@8479 1451 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
fantasai@8479 1452 “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
fantasai@8479 1453 document are to be interpreted as described in RFC 2119.
fantasai@8479 1454 However, for readability, these words do not appear in all uppercase
fantasai@8479 1455 letters in this specification.
fantasai@8479 1456
fantasai@8479 1457 <p>All of the text of this specification is normative except sections
fantasai@8479 1458 explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
fantasai@8479 1459
fantasai@8479 1460 <p>Examples in this specification are introduced with the words “for example”
fantasai@8479 1461 or are set apart from the normative text with <code>class="example"</code>,
fantasai@8479 1462 like this:
fantasai@8479 1463
fantasai@8479 1464 <div class="example">
fantasai@8479 1465 <p>This is an example of an informative example.</p>
fantasai@8479 1466 </div>
fantasai@8479 1467
fantasai@8479 1468 <p>Informative notes begin with the word “Note” and are set apart from the
fantasai@8479 1469 normative text with <code>class="note"</code>, like this:
fantasai@8479 1470
fantasai@8479 1471 <p class="note">Note, this is an informative note.</p>
fantasai@8479 1472
fantasai@8479 1473 <h3 id="conformance-classes">
fantasai@8479 1474 Conformance classes</h3>
fantasai@8479 1475
fantasai@8479 1476 <p>Conformance to CSS Ruby Module
fantasai@8479 1477 is defined for three conformance classes:
fantasai@8479 1478 <dl>
fantasai@8479 1479 <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
fantasai@8479 1480 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
fantasai@8479 1481 style sheet</a>.
fantasai@8479 1482 <dt><dfn>renderer</dfn></dt>
fantasai@8479 1483 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
fantasai@8479 1484 that interprets the semantics of a style sheet and renders
fantasai@8479 1485 documents that use them.
fantasai@8479 1486 <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
fantasai@8479 1487 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
fantasai@8479 1488 that writes a style sheet.
fantasai@8479 1489 </dl>
fantasai@8479 1490
fantasai@8479 1491 <p>A style sheet is conformant to CSS Ruby Module
fantasai@8479 1492 if all of its statements that use syntax defined in this module are valid
fantasai@8479 1493 according to the generic CSS grammar and the individual grammars of each
fantasai@8479 1494 feature defined in this module.
fantasai@8479 1495
fantasai@8479 1496 <p>A renderer is conformant to CSS Ruby Module
fantasai@8479 1497 if, in addition to interpreting the style sheet as defined by the
fantasai@8479 1498 appropriate specifications, it supports all the features defined
fantasai@8479 1499 by CSS Ruby Module by parsing them correctly
fantasai@8479 1500 and rendering the document accordingly. However, the inability of a
fantasai@8479 1501 UA to correctly render a document due to limitations of the device
fantasai@8479 1502 does not make the UA non-conformant. (For example, a UA is not
fantasai@8479 1503 required to render color on a monochrome monitor.)
fantasai@8479 1504
fantasai@8479 1505 <p>An authoring tool is conformant to CSS Ruby Module
fantasai@8479 1506 if it writes style sheets that are syntactically correct according to the
fantasai@8479 1507 generic CSS grammar and the individual grammars of each feature in
fantasai@8479 1508 this module, and meet all other conformance requirements of style sheets
fantasai@8479 1509 as described in this module.
fantasai@8479 1510
fantasai@8479 1511 <h3 id="partial">
fantasai@8479 1512 Partial implementations</h3>
fantasai@8479 1513
fantasai@8479 1514 <p>So that authors can exploit the forward-compatible parsing rules to
fantasai@8479 1515 assign fallback values, CSS renderers <strong>must</strong>
fantasai@8479 1516 treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
fantasai@8479 1517 as appropriate</a>) any at-rules, properties, property values, keywords,
fantasai@8479 1518 and other syntactic constructs for which they have no usable level of
fantasai@8479 1519 support. In particular, user agents <strong>must not</strong> selectively
fantasai@8479 1520 ignore unsupported component values and honor supported values in a single
fantasai@8479 1521 multi-value property declaration: if any value is considered invalid
fantasai@8479 1522 (as unsupported values must be), CSS requires that the entire declaration
fantasai@8479 1523 be ignored.</p>
fantasai@8479 1524
fantasai@8479 1525 <h3 id="experimental">
fantasai@8479 1526 Experimental implementations</h3>
fantasai@8479 1527
fantasai@8479 1528 <p>To avoid clashes with future CSS features, the CSS2.1 specification
fantasai@8479 1529 reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
fantasai@8479 1530 syntax</a> for proprietary and experimental extensions to CSS.
fantasai@8479 1531
fantasai@8479 1532 <p>Prior to a specification reaching the Candidate Recommendation stage
fantasai@8479 1533 in the W3C process, all implementations of a CSS feature are considered
fantasai@8479 1534 experimental. The CSS Working Group recommends that implementations
fantasai@8479 1535 use a vendor-prefixed syntax for such features, including those in
fantasai@8479 1536 W3C Working Drafts. This avoids incompatibilities with future changes
fantasai@8479 1537 in the draft.
fantasai@8479 1538 </p>
fantasai@8479 1539
fantasai@8479 1540 <h3 id="testing">
fantasai@8479 1541 Non-experimental implementations</h3>
fantasai@8479 1542
fantasai@8479 1543 <p>Once a specification reaches the Candidate Recommendation stage,
fantasai@8479 1544 non-experimental implementations are possible, and implementors should
fantasai@8479 1545 release an unprefixed implementation of any CR-level feature they
fantasai@8479 1546 can demonstrate to be correctly implemented according to spec.
fantasai@8479 1547
fantasai@8479 1548 <p>To establish and maintain the interoperability of CSS across
fantasai@8479 1549 implementations, the CSS Working Group requests that non-experimental
fantasai@8479 1550 CSS renderers submit an implementation report (and, if necessary, the
fantasai@8479 1551 testcases used for that implementation report) to the W3C before
fantasai@8479 1552 releasing an unprefixed implementation of any CSS features. Testcases
fantasai@8479 1553 submitted to W3C are subject to review and correction by the CSS
fantasai@8479 1554 Working Group.
fantasai@8479 1555
fantasai@8479 1556 <p>Further information on submitting testcases and implementation reports
fantasai@8479 1557 can be found from on the CSS Working Group's website at
fantasai@8479 1558 <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
fantasai@8479 1559 Questions should be directed to the
fantasai@8479 1560 <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
fantasai@8479 1561 mailing list.
fantasai@8479 1562
fantasai@8479 1563 <h2 class=no-num id="acknowledgments">
fantasai@8479 1564 Acknowledgments</h2>
ishida@1665 1565
ishida@1665 1566 <p>This specification would not have been possible without the help from:</p>
ishida@1665 1567
fantasai@8479 1568 <p>Stephen Deach, Martin Dürst,  Hideki Hiura(<span lang="ja">樋浦 秀樹</span>), Masayasu Ishikawa(<span lang="ja">石川
ishida@1665 1569 雅康</span>), Chris
fantasai@8479 1570 Pratley, Takao Suzuki(<span lang="ja">鈴木 孝雄</span>), Frank Yung-Fong Tang, Chris Thrasher, Masafumi Yabe<span lang="ja">家辺
ishida@1665 1571 勝文</span>), Steve Zilles.</p>
ishida@1665 1572
fantasai@8509 1573 <h2 class="no-num" id="changes">
fantasai@8509 1574 Changes</h2>
fantasai@8509 1575
fantasai@8509 1576 <p>The following major changes have been made since the previous Working Draft:
fantasai@8509 1577 <dl>
fantasai@8509 1578 <dt>Remove 'ruby-span' and mentions of <code>rbspan</code>.
fantasai@8509 1579 <dd>
fantasai@8509 1580 Explicit spanning is not used in HTML ruby in favor of implicit spanning.
fantasai@8509 1581 This can't handle some pathological double-sided spanning cases,
fantasai@8509 1582 but there seems to be no requirement for these at the moment.
fantasai@8509 1583 (For implementations that support full complex XHTML Ruby,
fantasai@8509 1584 they can imply spanning from the markup the same magic way
fantasai@8509 1585 that we handle cell spanning from tables. It doesn't seem
fantasai@8509 1586 necessary to include controls this in Level 1.)
fantasai@8509 1587
fantasai@8509 1588 <dt>Defer 'ruby-overhang' and ''ruby-align: line-end'' to Level 2.
fantasai@8509 1589 <dd>
fantasai@8509 1590 It's somewhat complicated, advanced feature.
fantasai@8509 1591 Proposal is to make this behavior UA-defined
fantasai@8509 1592 and provide some examples of acceptable options.
fantasai@8509 1593
fantasai@8509 1594 <dt>Close issue requesting 'display: rp': use ''display: none''.
fantasai@8509 1595 <dd>
fantasai@9168 1596 The Internationalization WG added an issue requesting a display value for &lt;rp> elements.
fantasai@9173 1597 They're supposed to be hidden when &lt;ruby> is displayed as ruby.
fantasai@8509 1598 But this is easily accomplished already with ''display: none''.
fantasai@8509 1599
fantasai@8509 1600 <dt>Change 'ruby-position' values to match 'text-emphasis-position'.
fantasai@8509 1601 <dd>
fantasai@8509 1602 Other than ''inter-character'', which we need to keep,
fantasai@8509 1603 it makes more sense to align ruby positions with 'text-emphasis-position',
fantasai@8509 1604 which can correctly handle various combinations of horizontal/vertical preferences.
fantasai@8509 1605
fantasai@8509 1606 <dt>Remove unused values of 'ruby-align'.
fantasai@8509 1607 <dd>
fantasai@9109 1608 ''left'', ''right'', and ''end'' are not needed.
fantasai@9109 1609
fantasai@9168 1610 <dt>Replace ''auto'', ''distribute-letter'', and ''distribute-space'' from 'ruby-align' with ''space-between'' and ''space-around''.
fantasai@9109 1611 <dd>
fantasai@9109 1612 The ''auto'' value relied on inspecting content to determine behavior;
fantasai@9109 1613 this can be avoided by just using ''space-around'' with standard justification rules
fantasai@9109 1614 (which allow spacing between CJK but not between Latin).
fantasai@9109 1615 Replaced ''distribute-letter'' and ''distribute-space'' with
fantasai@9168 1616 ''space-between'' and ''space-around'' for consistency with distribution keywords
fantasai@9168 1617 in [[CSS3-FLEXBOX]] and [[CSS3-ALIGN]]
fantasai@9168 1618 and to avoid any links to the definition of ''text-justify: distribute''.
fantasai@8509 1619
fantasai@8509 1620 <dt>Added 'ruby-merge' property to control jukugo rendering.
fantasai@8509 1621 <dd>
fantasai@8509 1622 This is a stylistic effect, not a structural one;
fantasai@8509 1623 the previous model assumed that it was structural and suggested handling it by changing markup. :(
fantasai@8509 1624
fantasai@8509 1625 <dt>Remove ''inline'' from 'ruby-position'.
fantasai@8509 1626 <dd>
fantasai@8509 1627 This is do-able via ''display: inline'' on all the ruby-related elements,
fantasai@8509 1628 see <a href="#default-inline">Appendix A</a>
fantasai@8509 1629
fantasai@8509 1630 <dt>Added <a href="#default-style">Default Style</a> rules
fantasai@8509 1631 <dd>
fantasai@9168 1632 As requested by Internationalization WG.
fantasai@8509 1633
fantasai@8509 1634 <dt>Wrote anonymous box generation rules
fantasai@8509 1635 <dd>
fantasai@8509 1636 And defined pairing of bases and annotations.
fantasai@8509 1637 Should now handle all the crazy proposed permutations of HTML ruby markup.
fantasai@9168 1638
fantasai@9168 1639 <dt>Defined layout of ruby
fantasai@9168 1640 <dd>
fantasai@9168 1641 Defined in detail space distribution, white space handling, line breaking, line stacking, etc.
fantasai@9168 1642 Open issue left for bidi.
fantasai@8509 1643 </dl>
fantasai@8509 1644
fantasai@8479 1645 <h2 class=no-num id="references">
fantasai@8479 1646 References</h2>
ishida@1665 1647
fantasai@8479 1648 <h3 class="no-num" id="normative-references">
fantasai@8479 1649 Normative references</h3>
fantasai@8479 1650 <!--normative-->
ishida@1665 1651
fantasai@8479 1652 <h3 class="no-num" id="other-references">
fantasai@8479 1653 Other references</h3>
fantasai@8479 1654 <!--informative-->
ishida@1665 1655
fantasai@8479 1656 <h2 class="no-num" id="index">
fantasai@8479 1657 Index</h2>
fantasai@8479 1658 <!--index-->
ishida@1665 1659
fantasai@8479 1660 <h2 class="no-num" id="property-index">
fantasai@8479 1661 Property index</h2>
fantasai@8479 1662 <!-- properties -->
ishida@1665 1663
ishida@1665 1664 </body>
ishida@1665 1665 </html>
ishida@1665 1666 <!-- Keep this comment at the end of the file
ishida@1665 1667 Local variables:
ishida@1665 1668 mode: sgml
fantasai@8479 1669 sgml-declaration:"~/SGML/HTML4.decl"
ishida@1665 1670 sgml-default-doctype-name:"html"
ishida@1665 1671 sgml-minimize-attributes:t
ishida@1665 1672 sgml-nofill-elements:("pre" "style" "br")
fantasai@8479 1673 sgml-live-element-indicator:t
fantasai@8479 1674 sgml-omittag:nil
fantasai@8479 1675 sgml-shorttag:nil
fantasai@8479 1676 sgml-namecase-general:t
fantasai@8479 1677 sgml-general-insert-case:lower
fantasai@8479 1678 sgml-always-quote-attributes:t
fantasai@8479 1679 sgml-indent-step:nil
fantasai@8479 1680 sgml-indent-data:t
fantasai@8479 1681 sgml-parent-document:nil
fantasai@8479 1682 sgml-exposed-tags:nil
fantasai@8479 1683 sgml-local-catalogs:nil
fantasai@8479 1684 sgml-local-ecat-files:nil
ishida@1665 1685 End:
ishida@1665 1686 -->
fantasai@8479 1687

mercurial