css-ruby/Overview.src.html

Fri, 13 Sep 2013 15:24:38 -0700

author
fantasai <fantasai.cvs@inkedblade.net>
date
Fri, 13 Sep 2013 15:24:38 -0700
changeset 9177
dbc00077efcc
parent 9174
d0cb61f45f33
child 13469
86d51f1d4fa6
permissions
-rw-r--r--

[css-ruby] Remove issue text that's not particularly helpful...

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@9174 543 Styling Ruby Boxes</h3>
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@8682 555 <h3 id="line-breaks">
fantasai@8533 556 Ruby box and line breaking</h3>
fantasai@8504 557
fantasai@8533 558 <p>When there is not enough space for an entire <i>ruby container</i> to fit on the line,
fantasai@9108 559 the ruby may be broken wherever all levels simultaneously allow a break.
fantasai@8682 560 Ruby most often breaks between base-annotation sets,
fantasai@8682 561 but if the line-breaking rules allow it, can also break within a <i>ruby base</i>
fantasai@8682 562 (and, in parallel, its associated <i>annotation boxes</i>).
fantasai@8682 563
fantasai@8682 564 <p>Whenever ruby breaks across lines, <i>ruby annotations</i> must stay
fantasai@8682 565 with their respective <i>bases</i>.
fantasai@8682 566 The line <em>must not</em> break between a <i>ruby base</i> and its <i>annotations</i>,
fantasai@8682 567 even in the case of ''inter-character'' <i>annotations</i>.
fantasai@8682 568
fantasai@8682 569 <div class="figure">
fantasai@8682 570 <img src="images/r-break-b.gif"
fantasai@8682 571 alt='Diagram showing the line breaking opportunity in a "Bopomofo" ruby'>
fantasai@8682 572 <p class="caption">''inter-character'' ruby line breaking opportunity
fantasai@8682 573 </div>
fantasai@8682 574
fantasai@8682 575 <h4 id="break-between">
fantasai@8682 576 Breaking between bases</h4>
fantasai@8682 577
fantasai@8682 578 <p>In typical cases, <i>ruby base boxes</i> and <i>ruby annotation boxes</i>
fantasai@8682 579 are styled to forbid internal line wrapping and do not contain forced breaks.
fantasai@8682 580 (See <a href="#default-stylesheet">Appendix A</a>.)
fantasai@8682 581 In such cases the <i>ruby container</i> can only break between adjacent <i>ruby bases</i>,
fantasai@8533 582 and only if no <i>ruby annotations</i> span those <i>ruby bases</i>.
ishida@1665 583
fantasai@8533 584 <div class="figure">
fantasai@8533 585 <p><img src="images/r-break-a.gif"
fantasai@8533 586 alt="Diagram showing the line breaking opportunity in a complex ruby">
fantasai@8533 587 <p class="caption">Ruby line breaking opportunity
fantasai@8533 588 </div>
ishida@1665 589
fantasai@8533 590 <p>Whether ruby can break between two adjacent <i>ruby bases</i>
fantasai@9108 591 is controlled by normal line-breaking rules for the base text,
fantasai@8682 592 exactly as if the <i>ruby bases</i> were adjacent <i>inline</i> boxes.
fantasai@8682 593 (The annotations are ignored when determining soft wrap opportunities for the base level.)
fantasai@8533 594
fantasai@8533 595 <div class="example">
fantasai@8533 596 <p>For example, if two adjacent ruby bases are “蝴” and “蝶”,
fantasai@8533 597 the line may break between them,
fantasai@8533 598 because lines are normally allowed to break between two Han characters.
fantasai@8533 599 However, if 'word-break' is ''keep-all'', that line break is forbidden.
fantasai@8682 600 <pre>&lt;ruby>蝴&lt;rt>hú&lt;/rt>蝶&lt;rt>dié&lt;/rt></pre>
fantasai@8533 601 </div>
fantasai@8533 602
fantasai@8533 603 <p>Inter-base white space is significant for evaluating line break opportunities between <i>ruby bases</i>.
fantasai@8533 604 As with white space between inlines, it collapses when the line breaks there.
fantasai@8682 605 Similarly, annotation white space is also trimmed at a line break.
fantasai@8533 606
fantasai@8533 607 <div class="example">
fantasai@8533 608 <p>For example, given the following markup:
fantasai@8533 609 <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 610 <p>Due to the space, the line may break between “one” and “two“.
fantasai@8682 611 If the line breaks there, that space&mdash;and the space between “1” and “2”&mdash;disappears,
fantasai@8682 612 in accordance with standard CSS white space processing rules. [[CSS3TEXT]]
fantasai@8533 613 </div>
fantasai@8533 614
fantasai@8682 615 <h4 id="break-within">
fantasai@8682 616 Breaking within bases</h4>
fantasai@8533 617
fantasai@8833 618 <p>For longer base texts, it is sometimes appropriate to allow breaking within a base-annotation pair.
fantasai@8833 619 For example, if an English sentence is annotated with its Japanese translation,
fantasai@8833 620 allowing the text to wrap allows for reasonable line breaking behavior in the paragraph.
fantasai@8833 621
fantasai@8833 622 <p class="issue">
fantasai@8833 623 Insert scanned example so people don't think this is just the ramblings of an insane spec-writer.
fantasai@8833 624
fantasai@8833 625 <p>Line-breaking within a <i>ruby base</i> is only allowed if the 'white-space' property
fantasai@8833 626 of the <i>ruby base</i> and all its parallel <i>annotations</i> allow it,
fantasai@8833 627 and there exists a <i>soft wrap opportunity</i> <em>within</em> (i.e. not at the start or end)
fantasai@8833 628 the content of each base/annotation box.
fantasai@8833 629 Since there is no structural correspondance between fragments of content
fantasai@8833 630 within <i>ruby bases</i> and <i>annotations</i>,
fantasai@8833 631 the UA may break at any set of opportunities;
fantasai@8833 632 but it is recommended that the UA attempt to proportionally balance
fantasai@8833 633 the amount of content inside each fragment.
fantasai@8682 634
fantasai@8682 635 <p>There are no line breaking opportunities within ''inter-character'' <i>annotations</i>.
fantasai@8533 636
fantasai@8833 637 <p>Ruby alignment takes place within each fragment, after line-breaking.
fantasai@8833 638
fantasai@8833 639 <h3 id="ruby-bidi">
fantasai@8833 640 Bidi Reordering</h3>
fantasai@8833 641
fantasai@9168 642 <p class="issue">
fantasai@9168 643 Constraints:
fantasai@9168 644 Text within a ruby base must remain contiguous,
fantasai@9168 645 and bases belonging to a single annotation must remain contiguous.
fantasai@9168 646 Still figuring out exactly to enforce these limitations in a sensible manner.
fantasai@8833 647
fantasai@8854 648 <!--
fantasai@8854 649
fantasai@8833 650 <p>The Unicode bidirectional algorithm orders logically-stored text for visual presentation
fantasai@8833 651 when characters from scripts of opposing directionalities are mixed
fantasai@8833 652 within a single paragraph.
fantasai@8833 653 (See [[CSS3-WRITING-MODES]] for a more in-depth discussion of bidirectional text in CSS.)
fantasai@8833 654 Bidi reordering of ruby-annotation pairs is controlled by the ordering of the base text, as follows:
fantasai@8833 655
fantasai@8854 656 <h4 id="bidi-B">Proposal A</h4>
fantasai@8833 657
fantasai@8833 658 <p class="note">This proposal is simpler, but will require more frequent tagging of mixed-directionality content.
fantasai@8833 659
fantasai@8833 660 <p>To avoid the interference of the <i>annotations</i> in the ordering of base text,
fantasai@8833 661 all annotations are ignored for the purpose of resolving neutral characters in the base level.
fantasai@8833 662
fantasai@8833 663 <p>To preserve the correspondance of <i>ruby annotations</i>
fantasai@8833 664 to their respective <i>ruby bases</i>,
fantasai@8833 665 a few restrictions are imposed:
fantasai@8833 666 <ul>
fantasai@8854 667 <li>The contents of a <i>ruby base</i> or <i>ruby annotation</i> must remain contiguous.
fantasai@8854 668 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 669 <li>For the purpose of ordering <i>ruby bases</i> within a <i>ruby container</i>,
fantasai@8854 670 each <i>ruby base</i> is treated as a strong character of its specified 'direction'.
fantasai@8854 671 (<i>Ruby annotations</i> are positioned with respect to their <i>bases</i>,
fantasai@8854 672 so are affected by reordering, but do not themselves participate in reordering.)
fantasai@8833 673 <li>All <i>bases</i> spanned by a single <i>annotation</i> must remain contiguous.
fantasai@8854 674 To this end, the embedding level of all bases spanned by a spanning <i>annotation</i>
fantasai@8854 675 is increased by two prior to reordering.
fantasai@8833 676 </ul>
fantasai@8833 677
fantasai@8833 678 <h4 id="bidi-B">Proposal B</h4>
fantasai@8833 679
fantasai@8833 680 <p class="note">This preserves some aspects of implicit bidi.
fantasai@8833 681 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 682
fantasai@8833 683 <p>To avoid the interference of the <i>annotations</i> in the ordering of the base text,
fantasai@8833 684 all annotations are ignored for the purpose of resolving neutral characters in the base text;
fantasai@8833 685 and the base text is resolved exactly as if each <i>ruby base</i> were
fantasai@8833 686 just a normal <i>inline box</i> embedded in the <i>ruby container</i>'s inline formatting context.
fantasai@8833 687
fantasai@8833 688 <p>Furthermore, to preserve the correspondance of <i>ruby annotations</i>
fantasai@8833 689 to their respective <i>ruby bases</i>,
fantasai@8833 690 a few restrictions are imposed:
fantasai@8833 691 <ul>
fantasai@8833 692 <li>The contents of a <i>ruby base</i> must remain contiguous.
fantasai@8833 693 <li>All <i>bases</i> spanned by a single <i>annotation</i> must remain contiguous.
fantasai@8833 694 </ul>
fantasai@8833 695 <p>To this end, the text of <i>ruby base</i> boxes that are not <i>bidi-isolated</i>
fantasai@8833 696 must have its embedding level increased by two;
fantasai@8833 697 and if an <i>annotation</i> spans more than one <i>ruby base</i>,
fantasai@8833 698 the spanned text's embedding level
fantasai@8833 699 (or the embedding level assigned to the isolation, if the <i>ruby base</i> is <i>bidi-isolated</i>)
fantasai@8833 700 is further increased by two.
fantasai@8833 701
fantasai@8833 702 -->
fantasai@8833 703
fantasai@8548 704 <h3 id="line-height">
fantasai@8479 705 Ruby box and line stacking</h3>
ishida@1665 706
fantasai@8548 707 <p>The 'line-height' property controls spacing between lines in CSS.
fantasai@8548 708 When inline content on line is shorter than the 'line-height',
fantasai@8548 709 half-leading is added on either side of the content,
fantasai@8548 710 as specificed in <a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">CSS2.1&sect;10.8</a>. [[!CSS21]]
ishida@1665 711
fantasai@8548 712 <p>In order to ensure consistent spacing of lines,
fantasai@8548 713 documents with ruby typically ensure that the 'line-height' is large enough
fantasai@8548 714 to accommodate ruby between lines of text.
fantasai@8548 715 Therefore, ordinarily, <i>ruby annotation containers</i> and <i>ruby annotation boxes</i>
fantasai@8548 716 do not contribute to the measured height of a line's inline contents;
fantasai@8548 717 any alignment (see 'vertical-align') and line-height calculations
fantasai@8548 718 are performed using only the <i>ruby base container</i>,
fantasai@8548 719 exactly as if it were a normal inline.
fantasai@8548 720
fantasai@8548 721 <p>However, if the 'line-height' specified on the <i>ruby container</i>
fantasai@8548 722 is less than the distance between
fantasai@8548 723 the top of the top <i>ruby annotation container</i>
fantasai@8548 724 and the bottom of the bottom <i>ruby annotation container</i>,
fantasai@8548 725 then additional leading is added
fantasai@8548 726 on the appropriate side of the <i>ruby base container</i>
fantasai@8548 727 such that if a block consisted of three lines
fantasai@8548 728 each containing ruby identical to this,
fantasai@8548 729 none of the <i>ruby containers</i> would overlap.
fantasai@8548 730
fantasai@8548 731 <p class="note">Note that this does not ensure that the <i>ruby annotations</i> remain within the line box.
fantasai@8548 732 It merely ensures that <em>if all lines had equal spacing</em>
fantasai@8548 733 and equivalent amounts and positioning of <i>ruby annotations</i>,
fantasai@8548 734 there would be enough room to avoid overlap.
fantasai@8548 735
fantasai@8548 736 <p>Authors should ensure appropriate 'line-height' and 'padding' to accommodate ruby,
fantasai@8548 737 and be particularly careful at the beginning or end of a block
fantasai@8548 738 and when a line contains inline-level content
fantasai@8548 739 (such as images, inline blocks, or elements shifted with 'vertical-align')
fantasai@8548 740 taller than the paragraph's default font size.
fantasai@8548 741
fantasai@8548 742 <div class="figure">
fantasai@8548 743 <p><img src="images/rlh-a.gif"
fantasai@8548 744 alt="The content of each line sits in the middle of its line height;
fantasai@8548 745 the additional space on each side is called half-leading.
fantasai@8548 746 Ruby fits between lines if it is smaller than twice the half-leading,
fantasai@8548 747 but this means that it occupies space belonging to the half-leading of the previous line.">
fantasai@8548 748 <p class="caption">Ruby annotations will often overflow the line;
fantasai@8548 749 authors should ensure content over/under a ruby-annotated line
fantasai@8548 750 is adequately spaced to leave room for the ruby.
fantasai@8548 751 </div>
fantasai@8548 752
fantasai@8548 753 <p class="note">More control over how ruby affects alignment and line layout
fantasai@8548 754 will be part of the CSS Line Layout Module Level 3.
fantasai@8548 755 Note, it is currently in the process of being rewritten;
fantasai@8548 756 the current drafts should not be relied upon.
ishida@1665 757
fantasai@8479 758 <h2 id="ruby-props">
fantasai@8479 759 Ruby Properties</h2>
ishida@1665 760
fantasai@8526 761 <p>The following properties are introduced to control ruby positioning and alignment.
fantasai@8526 762
fantasai@8479 763 <h3 id="rubypos">
fantasai@8479 764 Ruby positioning: the 'ruby-position' property</h3>
ishida@1665 765
kojiishi@8496 766 <table class="propdef">
kojiishi@8496 767 <tr>
kojiishi@8496 768 <th>Name:
kojiishi@8496 769 <td><dfn>ruby-position</dfn>
kojiishi@8496 770 <tr>
kojiishi@8496 771 <th><a href="#values">Value</a>:
kojiishi@8496 772 <td>[ over | under | inter-character ] && [ right | left ]
kojiishi@8496 773 <tr>
kojiishi@8496 774 <th>Initial:
kojiishi@8496 775 <td>over right
kojiishi@8496 776 <tr>
kojiishi@8496 777 <th>Applies to:
fantasai@8526 778 <td>ruby annotation containers
kojiishi@8496 779 <tr>
kojiishi@8496 780 <th>Inherited:
kojiishi@8496 781 <td>yes
kojiishi@8496 782 <tr>
kojiishi@8496 783 <th>Percentages:
kojiishi@8496 784 <td>N/A
kojiishi@8496 785 <tr>
kojiishi@8496 786 <th>Media:
kojiishi@8496 787 <td>visual
kojiishi@8496 788 <tr>
kojiishi@8496 789 <th>Computed value:
fantasai@8526 790 <td>specified value
kojiishi@8496 791 <tr>
kojiishi@8496 792 <th>Animatable:
kojiishi@8496 793 <td>no
kojiishi@8496 794 <tr>
kojiishi@8496 795 <th>Canonical order:
kojiishi@8496 796 <td><abbr title="follows order of property value definition">per grammar</abbr>
kojiishi@8496 797 </table>
fantasai@8526 798
fantasai@8526 799 <p>This property controls position of the ruby text with respect to its base.
fantasai@8526 800 Values have the following meanings:
fantasai@8526 801
kojiishi@8496 802 <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 803 <dl>
fantasai@8526 804 <dt><dfn title="ruby-position:over">''over''</dfn>
fantasai@8526 805 <dd>The ruby text appears <i>over</i> the base in horizontal text.
ishida@1665 806
kojiishi@8496 807 <div class="figure">
fantasai@8526 808 <p><img src="images/shinkansen-top.gif"
fantasai@8526 809 alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing above the base">
fantasai@8526 810 <p class="caption">Ruby over Japanese base text in horizontal layout
kojiishi@8496 811 </div>
kojiishi@8496 812 </dd>
ishida@1665 813
fantasai@8526 814 <dt><dfn title="ruby-position:right">''right''</dfn>
kojiishi@8496 815 <dd>The ruby text appears on the right side of the base in vertical text.
kojiishi@8496 816 <div class="figure">
fantasai@8526 817 <p><img src="images/shinkansen-right.gif" width="33"
fantasai@8526 818 alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the right of the base">
fantasai@8526 819 <p class="caption">Ruby to the right of Japanese base text in vertical layout
kojiishi@8496 820 </div>
kojiishi@8496 821 </dd>
ishida@1665 822
fantasai@8526 823 <dt><dfn title="ruby-position:under">''under''</dfn>
kojiishi@8496 824 <dd>The ruby text appears under the base in horizontal text.
kojiishi@8496 825 This is a relatively rare setting used in ideographic East Asian writing systems,
kojiishi@8496 826 most easily found in educational text.
ishida@1665 827
kojiishi@8496 828 <div class="figure">
fantasai@8526 829 <p><img src="images/shinkansen-bottom.gif"
fantasai@8526 830 alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing below the base">
fantasai@8526 831 <p class="caption">Ruby under Japanese base text in horizontal layout
kojiishi@8496 832 </div>
kojiishi@8496 833 </dd>
ishida@1665 834
fantasai@8526 835 <dt><dfn title="ruby-position:left">''left''</dfn>
kojiishi@8496 836 <dd>The ruby text appears on the left side of the base in vertical text.
kojiishi@8496 837
kojiishi@8496 838 <div class="figure">
fantasai@8526 839 <p><img src="images/shinkansen-left.gif"
fantasai@8526 840 alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the left of the base">
fantasai@8526 841 <p class="caption">Ruby to the left of Japanese base text in vertical layout
kojiishi@8496 842 </div>
kojiishi@8496 843 </dd>
kojiishi@8496 844
kojiishi@8496 845 <dt><dfn title="ruby-position:inter-character">''inter-character''</dfn></dt>
kojiishi@8496 846 <dd>
kojiishi@8496 847 <p>The ruby text appears on the right of the base in horizontal text.
fantasai@8526 848 This value forces the 'writing-mode' of the <i>ruby annotation</i> to be vertical.
fantasai@8526 849
fantasai@8526 850 <p>This value is provided for the special case of traditional Chinese
fantasai@8526 851 as used especially in Taiwan:
fantasai@8526 852 ruby (made of <a href="#g-bopomofo">bopomofo</a> glyphs) in that context
fantasai@8526 853 appears vertically along the right side of the base glyph,
fantasai@8526 854 even when the layout of the base characters is horizontal:
kojiishi@8496 855
kojiishi@8496 856 <div class="figure">
fantasai@8526 857 <p><img src="images/bopomofo.gif"
fantasai@8526 858 alt="Example of Taiwanese-style ruby">
fantasai@8526 859 <p class="caption">“Bopomofo” ruby in traditional Chinese
fantasai@8526 860 (ruby text shown in blue for clarity) in horizontal layout
kojiishi@8496 861 </div>
fantasai@8526 862 <p class="note">
fantasai@8526 863 Note that the user agent is responsible for ensuring the correct relative alignment and positioning of the glyphs,
fantasai@8526 864 including those corresponding to the tone marks, when displaying.
fantasai@8526 865 Tone marks are spacing characters that occur (in memory) at the end of the ruby text for each base character.
fantasai@8526 866 They are usually displayed in a separate column to the right of the bopomofo characters,
fantasai@8526 867 and the height of the tone mark depends on the number of characters in the syllable.
fantasai@8526 868 One tone mark, however, is placed above the bopomofo, not to the right of it.
kojiishi@8496 869 <!-- See Taiwanese requirements doc for EPUB at http://epub-revision.googlecode.com/files/EGLS_TW_eng.ppt -->
kojiishi@8496 870 </dd>
kojiishi@8496 871 </dl>
ishida@1665 872
fantasai@8526 873 <p>If multiple <i>ruby annotation containers</i> have the same 'ruby-position',
fantasai@8526 874 they stack along the block axis,
fantasai@8526 875 with lower levels of annotation closer to the base text.
ishida@1665 876
fantasai@8526 877 <h3 id="collapsed-ruby">
fantasai@8526 878 Collapsed Ruby Annotations: the 'ruby-merge' property</h3>
kojiishi@8499 879
kojiishi@8499 880 <table class="propdef">
kojiishi@8499 881 <tr>
kojiishi@8499 882 <th>Name:
kojiishi@8499 883 <td><dfn>ruby-merge</dfn>
kojiishi@8499 884 <tr>
kojiishi@8499 885 <th><a href="#values">Value</a>:
kojiishi@8499 886 <td>separate | collapse | auto
kojiishi@8499 887 <tr>
kojiishi@8499 888 <th>Initial:
kojiishi@8499 889 <td>separate
kojiishi@8499 890 <tr>
kojiishi@8499 891 <th>Applies to:
fantasai@8526 892 <td>ruby annotation containers
fantasai@8526 893 <tr>
fantasai@8526 894 <th>Inherited:
fantasai@8526 895 <td>yes
fantasai@8526 896 <tr>
fantasai@8526 897 <th>Percentages:
fantasai@8526 898 <td>N/A
fantasai@8526 899 <tr>
fantasai@8526 900 <th>Media:
fantasai@8526 901 <td>visual
fantasai@8526 902 <tr>
fantasai@8526 903 <th>Computed value:
fantasai@8526 904 <td>specified value
fantasai@8526 905 <tr>
fantasai@8526 906 <th>Animatable:
fantasai@8526 907 <td>no
fantasai@8526 908 <tr>
fantasai@8526 909 <th>Canonical order:
fantasai@8526 910 <td><abbr title="follows order of property value definition">per grammar</abbr>
fantasai@8526 911 </table>
fantasai@8526 912
fantasai@8526 913 <p>
fantasai@8526 914 This property controls how ruby annotation boxes should be rendered
fantasai@8526 915 when there are more than one in a ruby container box.
fantasai@8526 916
fantasai@8526 917 <p>Possible values:</p>
fantasai@8526 918 <dl>
fantasai@8526 919 <dt><dfn title="ruby-merge:separate">''separate''</dfn>
fantasai@8526 920 <dd>
fantasai@8526 921 <p>
fantasai@8526 922 Each ruby annotation box is rendered in the same column(s) as its corresponding base box(es).
fantasai@8526 923 This style is called “mono ruby” in [[JLREQ]].
fantasai@8526 924
fantasai@8526 925 <div class="example">
fantasai@8526 926 <p>For example, the following two markups render the same:
fantasai@8526 927 <pre>&lt;ruby&gt;無&lt;rt&gt;む&lt;/ruby&gt;&lt;ruby&gt;常&lt;rt&gt;じょう&lt;/ruby&gt;</pre>
fantasai@8526 928 <p>and:
fantasai@8526 929 <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 930 </div>
fantasai@8526 931 </dd>
fantasai@8526 932
fantasai@8526 933 <dt><dfn title="ruby-merge:collapse">''collapse''</dfn>
fantasai@8526 934 <dd>
fantasai@8526 935 <p>
fantasai@8526 936 All <i>ruby annotation boxes</i> within the same <i>ruby segment</i> on the same line are concatenated,
fantasai@8526 937 and laid out as if their contents belonged to a single <i>ruby annotation box</i>
fantasai@9108 938 spanning all their associated <i>ruby base boxes</i>.
fantasai@8526 939 This style renders similar to “group ruby” in [[JLREQ]],
fantasai@8526 940 except that <i>ruby annotations</i> are kept together with their respective <i>ruby bases</i> when breaking lines.
fantasai@8526 941 </p>
fantasai@8526 942
fantasai@8526 943 <div class="example">
fantasai@8526 944 <p>The following two markups render the same both characters fit on one line:
fantasai@8526 945 <pre>&lt;ruby&gt;無常&lt;rt&gt;むじょう&lt;/ruby&gt;</pre>
fantasai@8526 946 <p>and:
fantasai@8526 947 <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 948 <p>However, the second one renders the same as ''ruby-position: separate''
fantasai@8526 949 when the two bases are split across lines.
fantasai@8526 950 </div>
fantasai@8526 951 </dd>
fantasai@8526 952
fantasai@8526 953 <dt><dfn title="ruby-merge:auto">''auto''</dfn></dt>
fantasai@8526 954 <dd>
fantasai@8526 955 <p>
fantasai@8526 956 The user agent may use any algorithm to determine how each ruby annotation box
fantasai@9163 957 is rendered to its corresponding base box,
fantasai@9163 958 with the intention that if all annotations fit over their respective bases,
fantasai@9163 959 the result is identical to “mono ruby”,
fantasai@9163 960 but if some annotations are wider than their bases
fantasai@9163 961 the space is shared in some way
fantasai@9163 962 to avoid forcing space between bases.
fantasai@8526 963 <div class="example">
fantasai@8526 964 <p>
fantasai@9163 965 One possible algorithm is described as “jukugo ruby” in [[JLREQ]].
fantasai@8526 966 <p>
fantasai@9163 967 Another, more simplified algorithm of “jukugo ruby” is
fantasai@9163 968 to render as ''separate'' if all ruby annotation boxes fit
fantasai@9163 969 within the advances of their corresponding base boxes,
fantasai@9163 970 and render as ''collapse'' otherwise.
fantasai@8526 971 </p>
fantasai@8526 972 </div>
fantasai@8526 973 </dd>
fantasai@8526 974 </dl>
fantasai@8526 975
fantasai@9174 976 <h3 id="ruby-align-property"><a id="rubyalign"></a>
fantasai@8526 977 Ruby Text Distribution: the 'ruby-align' property</h3>
fantasai@8526 978
fantasai@8526 979 <table class="propdef">
fantasai@8526 980 <tr>
fantasai@8526 981 <th>Name:
fantasai@8526 982 <td><dfn>ruby-align</dfn>
fantasai@8526 983 <tr>
fantasai@8526 984 <th><a href="#values">Value</a>:
fantasai@9110 985 <td>start | center | space-between | space-around
fantasai@8526 986 <tr>
fantasai@8526 987 <th>Initial:
fantasai@9110 988 <td>space-around
fantasai@8526 989 <tr>
fantasai@8526 990 <th>Applies to:
fantasai@8526 991 <td>ruby bases, ruby annotations, ruby base containers, ruby annotation containers
kojiishi@8499 992 <tr>
kojiishi@8499 993 <th>Inherited:
kojiishi@8499 994 <td>yes
kojiishi@8499 995 <tr>
kojiishi@8499 996 <th>Percentages:
kojiishi@8499 997 <td>N/A
kojiishi@8499 998 <tr>
kojiishi@8499 999 <th>Media:
kojiishi@8499 1000 <td>visual
kojiishi@8499 1001 <tr>
kojiishi@8499 1002 <th>Computed value:
kojiishi@8499 1003 <td>specified value (except for initial and inherit)
kojiishi@8499 1004 </table>
kojiishi@8499 1005
fantasai@8526 1006 <p>This property specifies how text is distributed within the various ruby boxes
fantasai@9108 1007 when their contents do not exactly fill their respective boxes.
fantasai@9113 1008 Note that space distributed by 'ruby-align' is unrelated to, and independent of,
fantasai@9113 1009 any space distributed due to justification.
kojiishi@8499 1010
fantasai@8526 1011 <p>Values have the following meanings:
kojiishi@8496 1012 <dl>
fantasai@9108 1013 <dt><dfn title="ruby-align:start">''start''</dfn></dt>
fantasai@9108 1014 <dd>The ruby content is aligned with the start edge of its box.
fantasai@9108 1015 <div class="figure">
fantasai@9108 1016 <p><img
fantasai@9108 1017 alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base"
fantasai@9108 1018 width="145" height="91" src="images/ra-l.gif" /><img
fantasai@9108 1019 width="145" height="91"
fantasai@9108 1020 alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
fantasai@9108 1021 src="images/ra-l-rb.gif" />
fantasai@9110 1022 <p class="caption">''start'' ruby distribution
fantasai@9108 1023 </div>
fantasai@9108 1024 </dd>
fantasai@9108 1025
fantasai@9108 1026 <dt><dfn title="ruby-align:center">''center''</dfn></dt>
fantasai@9108 1027 <dd>The ruby content is centered within its box.
fantasai@9108 1028 <div class="figure">
fantasai@9108 1029 <p><img width="145" height="91"
fantasai@9108 1030 alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base"
fantasai@9108 1031 src="images/ra-c.gif" /><img width="145" height="91"
fantasai@9108 1032 alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
fantasai@9108 1033 src="images/ra-c-rb.gif" />
fantasai@9110 1034 <p class="caption">''center'' ruby distribution
fantasai@9108 1035 </div>
fantasai@9108 1036 </dd>
fantasai@9108 1037
fantasai@9108 1038 <dt><dfn title="ruby-align:space-between">''space-between''</dfn></dt>
kojiishi@8496 1039 <dd>
fantasai@9108 1040 <p>The ruby content expands as defined for normal text justification
fantasai@9108 1041 (as defined by 'text-justify'),
fantasai@9110 1042 except that if there are no <a href="http://www.w3.org/TR/css3-text/#expansion-opportunity"><i>expansion opportunities</i></a>
fantasai@9110 1043 the content is centered.
fantasai@9108 1044 <div class="figure">
fantasai@9108 1045 <p><img width="145" height="91"
fantasai@9108 1046 alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base"
fantasai@9108 1047 src="images/ra-dl.gif" /><img width="145" height="91"
fantasai@9108 1048 alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base"
fantasai@9108 1049 src="images/ra-dl-rb.gif" />
fantasai@9110 1050 <p class="caption">''space-between'' ruby distribution
fantasai@9108 1051 </div>
fantasai@9108 1052 </dd>
fantasai@9108 1053
fantasai@9108 1054 <dt><dfn title="ruby-align:space-around">''space-around''</dfn></dt>
fantasai@9108 1055 <dd>
fantasai@9108 1056 <p>As for ''space-between''
fantasai@9108 1057 except that there exists an extra <a href="http://www.w3.org/TR/css3-text/#expansion-opportunity"><i>expansion opportunity</i></a>
fantasai@9108 1058 whose space is distributed half before and half after the ruby content.
fantasai@9108 1059 <div class="example">
fantasai@9110 1060 <p>Since a typical implementation will by default define <i>expansion opportunities</i>
fantasai@9108 1061 between every adjacent pair of CJK <i>characters</i>
fantasai@9108 1062 and not between adjacent pairs of Latin <i>characters</i>,
fantasai@9108 1063 this should result in the behavior recommended by [[JLREQ]]:
fantasai@9110 1064 for wide-cell ruby content to be distributed...
kojiishi@8496 1065 <div class="figure">
kojiishi@8496 1066 <p><img width="145" height="91"
kojiishi@8496 1067 alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base"
kojiishi@8496 1068 src="images/ra-ds.gif" /><img width="145" height="91"
kojiishi@8496 1069 alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base"
fantasai@9108 1070 src="images/ra-ds-rb.gif" />
fantasai@9110 1071 <p class="caption">Wide-cell text in ''space-around'' ruby distribution is spaced apart
kojiishi@8496 1072 </div>
fantasai@9110 1073 <p>... and narrow-cell glyph ruby to be centered.
kojiishi@8496 1074 <div class="figure">
kojiishi@8496 1075 <p><img
kojiishi@8496 1076 alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base"
kojiishi@8496 1077 width="145" height="91"
kojiishi@8496 1078 src="images/ra-c-h.gif" /><img
kojiishi@8496 1079 alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base"
kojiishi@8496 1080 width="145" height="91"
fantasai@9108 1081 src="images/ra-c-rb-h.gif" />
fantasai@9110 1082 <p class="caption">Narrow-width ruby text in ''space-around'' ruby distribution is centered
kojiishi@8496 1083 </div>
kojiishi@8496 1084 </div>
kojiishi@8496 1085 </dd>
kojiishi@8496 1086 </dl>
ishida@1665 1087
fantasai@9112 1088 <p class="issue">Add a paragraph explaining how to distribute space in situations with spanning annotations.
fantasai@9112 1089 <!--
kojiishi@8496 1090 <p>For a complex ruby with spanning elements, one additional consideration is
kojiishi@8496 1091 required. If the spanning element spans multiple 'rows' (other rbc or rtc
kojiishi@8496 1092 elements), and the ruby alignment requires space distribution among the
kojiishi@8496 1093 'spanned' elements, a ratio must be determined among the 'columns' of spanned
kojiishi@8496 1094 elements. This ratio is computed by taking into consideration the widest
kojiishi@8496 1095 element within each column.</p>
fantasai@9112 1096 -->
fantasai@8527 1097 <h2 id="edge-effects">
fantasai@8527 1098 Edge Effects</h2>
fantasai@8527 1099
fantasai@8527 1100 <h3 id="ruby-overhang">
fantasai@8527 1101 Overhanging Ruby</h3>
kojiishi@8502 1102
kojiishi@8502 1103 <p>
kojiishi@8502 1104 When <i>ruby annotation box</i> is longer than its corresponding <i>ruby base box</i>,
kojiishi@8502 1105 the <i>ruby annotation box</i> may partially overhang adjacent boxes.
kojiishi@8502 1106 </p>
kojiishi@8502 1107 <p>
fantasai@8527 1108 This level of the specification does not define
kojiishi@8503 1109 how much the overhang may be allowed, and under what conditions.
kojiishi@8502 1110 </p>
fantasai@8527 1111
fantasai@8527 1112 <p>If the ruby text is not allowed to overhang,
fantasai@8527 1113 then the ruby behaves like a traditional inline box,
fantasai@8527 1114 i.e. only its own contents are rendered within its boundaries
fantasai@8527 1115 and adjacent elements do not cross the box boundary:
fantasai@8527 1116
fantasai@8527 1117 <div class="figure">
fantasai@8527 1118 <p><img src="images/ro-n.gif"
fantasai@8527 1119 alt="Diagram showing the ruby boxes interacting with adjacent text">
fantasai@8527 1120 <p class="caption">Simple ruby whose text is not allowed to overhang adjacent text
fantasai@8527 1121 </div>
fantasai@8527 1122
fantasai@8527 1123 <p>However, if <i>ruby annotation</i> content is allowed to overhang adjacent elements
fantasai@8527 1124 and it happens to be wider than its base,
fantasai@8527 1125 then the adjacent content is partially rendered within the area of the <i>ruby container box</i>,
fantasai@8527 1126 while the <i>ruby annotation</i> may partially overlap the upper blank parts of the adjacent content:
fantasai@8527 1127
fantasai@8527 1128 <div class="figure">
fantasai@8527 1129 <p><img src="images/ro-a.gif"
fantasai@8527 1130 alt="Diagram showing the ruby boxes interacting with adjacent text">
fantasai@8527 1131 <p class="caption">Simple ruby whose text is allowed to overhang adjacent text
fantasai@8527 1132 </div>
fantasai@8527 1133
fantasai@8527 1134 <p>The <i>ruby annotations</i> related to a <i>ruby base</i>
fantasai@8527 1135 must never overhang another <i>ruby base</i>.
fantasai@8527 1136
fantasai@8527 1137 <p>The alignment of the contents of the base or the ruby text
fantasai@8527 1138 is not affected by overhanging behavior.
fantasai@8527 1139 The alignment is achieved the same way regardless of the overhang behavior setting
fantasai@8527 1140 and it is computed before the space available for overlap is determined.
fantasai@8527 1141 It is controlled by the 'ruby-align' property.
fantasai@8527 1142
fantasai@8661 1143 <p class="issue">
fantasai@8661 1144 I suspect overhanging interacts with alignment in some cases;
fantasai@8661 1145 might need to look into this later.
fantasai@8661 1146
fantasai@8527 1147 <p>This entire logic applies the same way in vertical ideographic layout,
fantasai@8527 1148 only the dimension in which it works in such a layout is vertical,
fantasai@8527 1149 instead of horizontal.
fantasai@8527 1150
kojiishi@8502 1151 <div class="example">
kojiishi@8502 1152 <p>
kojiishi@8502 1153 The user agent may use [[JIS4051]] recommendation of
kojiishi@8502 1154 using one ruby text character length as the maximum overhang length.
kojiishi@8502 1155 Detailed rules for how ruby text can overhang adjacent characters for Japanese are described by [[JLREQ]].
kojiishi@8502 1156 </p>
kojiishi@8502 1157 </div>
kojiishi@8502 1158
fantasai@8527 1159 <h3 id="line-edge">
fantasai@8527 1160 Line-edge Alignment</h3>
fantasai@8527 1161
kojiishi@8502 1162 <p>
fantasai@8527 1163 When a <i>ruby annotation box</i> that is longer than its <i>ruby base</i>
fantasai@8527 1164 is at the start or end edge of a line,
fantasai@8527 1165 the user agent <em>may</em> force the side of the <i>ruby annotation</i> that touches the edge of the line
fantasai@8527 1166 to align to the corresponding edge of the base.
kojiishi@8502 1167 This type of alignment is described by [[JLREQ]].
kojiishi@8502 1168 </p>
kojiishi@8502 1169 <p>
fantasai@8527 1170 This level of the specification does not provide a mechanism to control this behavior.
kojiishi@8502 1171 </p>
kojiishi@8502 1172 <div class="figure">
fantasai@8527 1173 <p><img src="images/ra-le-l.gif"
fantasai@8527 1174 alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base">
fantasai@8527 1175 <img src="images/ra-le-r.gif"
fantasai@8527 1176 alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base">
fantasai@8527 1177 <p class="caption">Line-edge alignment
kojiishi@8502 1178 </div>
kojiishi@8502 1179
kojiishi@8496 1180 <!--
fantasai@8479 1181 <h3 id="rubyover">
fantasai@8479 1182 Ruby overhanging: the 'ruby-overhang' property</h3>
ishida@1665 1183
fantasai@8479 1184 <table class="propdef">
fantasai@8479 1185 <tr>
fantasai@8479 1186 <th>Name:
fantasai@8479 1187 <td><dfn>ruby-overhang</dfn>
fantasai@8479 1188 <tr>
fantasai@8479 1189 <th>Value:
fantasai@8479 1190 <td>auto | start | end | none
fantasai@8479 1191 <tr>
fantasai@8479 1192 <th>Initial:
fantasai@8479 1193 <td>none
fantasai@8479 1194 <tr>
fantasai@8479 1195 <th>Applies to:
fantasai@8479 1196 <td>the parent of elements with display: ruby-text
fantasai@8479 1197 <tr>
fantasai@8479 1198 <th>Inherited:
fantasai@8479 1199 <td>yes
fantasai@8479 1200 <tr>
fantasai@8479 1201 <th>Percentages:
fantasai@8479 1202 <td>N/A
fantasai@8479 1203 <tr>
fantasai@8479 1204 <th>Media:
fantasai@8479 1205 <td>visual
fantasai@8479 1206 <tr>
fantasai@8479 1207 <th>Computed value:
fantasai@8479 1208 <td>specified value (except for initial and inherit)
fantasai@8479 1209 </table>
ishida@1665 1210
ishida@1665 1211 <p>This property determines whether, and on which side, ruby text is allowed
ishida@1665 1212 to partially overhang any adjacent text in addition to its own base, when the
ishida@1665 1213 ruby text is wider than the ruby base. Note that ruby text is never allowed to
ishida@1665 1214 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 1215 a maximum amount by which ruby text may overhang adjacent text. The user agent may use
fantasai@8479 1216 the [[JIS4051]] recommendation of using one ruby text character
fantasai@8479 1217 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 1218
ishida@1665 1219 <p>Possible values:</p>
ishida@1665 1220 <dl>
ishida@1665 1221 <dt><strong>auto</strong></dt>
fantasai@8479 1222 <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 1223 ruby text can overhang. The user agent is free to follow those recommendations or specify its own classes of
ishida@1665 1224 characters to overhang. This is the initial value.
ishida@1665 1225 <div class="figure">
ishida@1665 1226 <p><img class="example" width="177" height="91"
ishida@1666 1227 alt="Diagram of glyph layout in overhanging ruby" src="images/ro-a.gif" /></p>
ishida@1665 1228 <p><b>Figure 4.3.1</b>: Ruby overhanging adjacent text</p>
ishida@1665 1229 </div>
ishida@1665 1230 </dd>
ishida@1665 1231 <dt><strong>start</strong></dt>
ishida@3034 1232 <dd>The ruby text can only overhang the text that precedes it. That means, for
ishida@3034 1233 example, that ruby cannot overhang text that is to the right of it in
ishida@3034 1234 horizontal LTR layout, and it cannot overhang text that is below it in
ishida@1665 1235 vertical-ideographic layout.
ishida@1665 1236 <div class="figure">
ishida@1665 1237 <p><img class="example" width="199" height="91"
ishida@1665 1238 alt="Diagram of glyph layout when ruby overhangs the preceding glyphs only"
ishida@1666 1239 src="images/ro-s.gif" /></p>
ishida@1665 1240 <p><b>Figure 4.3.2</b>: Ruby overhanging preceding text only</p>
ishida@1665 1241 </div>
ishida@1665 1242 </dd>
ishida@1665 1243 <dt><strong>end</strong></dt>
ishida@3034 1244 <dd>The ruby text can only overhang the text that follows it. That means, for
ishida@3034 1245 example, that ruby cannot overhang text that is to the left of it in
ishida@3034 1246 horizontal LTR layout, and it cannot overhang text that is above it in
ishida@1665 1247 vertical-ideographic layout.
ishida@1665 1248 <div class="figure">
ishida@1665 1249 <p><img class="example" width="198" height="91"
ishida@1665 1250 alt="Diagram of glyph layout when ruby overhangs the following characters only"
ishida@1666 1251 src="images/ro-e.gif" /></p>
ishida@1665 1252 <p><b>Figure 4.3.3</b>: Ruby overhanging following text only</p>
ishida@1665 1253 </div>
ishida@1665 1254 </dd>
ishida@1665 1255 <dt><strong>none</strong></dt>
ishida@1665 1256 <dd>The ruby text cannot overhang any text adjacent to its base, only its
ishida@1665 1257 own base.
ishida@1665 1258
ishida@1665 1259 <div class="figure">
ishida@1665 1260 <p><img class="example" width="220" height="91"
ishida@1665 1261 alt="Diagram of glyph layout in non-overhanging ruby"
ishida@1666 1262 src="images/ro-n.gif" /></p>
ishida@1665 1263 <p><b>Figure 4.3.4</b>: Ruby not allowed to overhang adjacent text</p>
ishida@1665 1264 </div>
ishida@1665 1265 </dd>
ishida@1665 1266 </dl>
ishida@1665 1267
fantasai@8479 1268 <h3 id="rubyspan">
fantasai@8479 1269 Ruby annotation spanning: the 'ruby-span' property</h3>
ishida@1665 1270
fantasai@8479 1271 <table class="propdef">
fantasai@8479 1272 <tr>
fantasai@8479 1273 <th>Name:
fantasai@8479 1274 <td><dfn>ruby-span</dfn>
fantasai@8479 1275 <tr>
fantasai@8479 1276 <th>Value:
fantasai@8479 1277 <td>attr(x) | none
fantasai@8479 1278 <tr>
fantasai@8479 1279 <th>Initial:
fantasai@8479 1280 <td>none
fantasai@8479 1281 <tr>
fantasai@8479 1282 <th>Applies to:
fantasai@8479 1283 <td>elements with display: ruby-text
fantasai@8479 1284 <tr>
fantasai@8479 1285 <th>Inherited:
fantasai@8479 1286 <td>no
fantasai@8479 1287 <tr>
fantasai@8479 1288 <th>Percentages:
fantasai@8479 1289 <td>N/A
fantasai@8479 1290 <tr>
fantasai@8479 1291 <th>Media:
fantasai@8479 1292 <td>visual
fantasai@8479 1293 <tr>
fantasai@8479 1294 <th>Computed value:
fantasai@8479 1295 <td>&lt;number&gt;
fantasai@8479 1296 </table>
ishida@1665 1297
ishida@1665 1298 <p>This property controls the spanning behavior of annotation elements. </p>
ishida@1665 1299
ishida@1665 1300 <p class="note"><span class="note-label">Note:</span> A XHTML user agent may also use the <samp>rbspan</samp>
ishida@1665 1301 attribute to get the same effect.</p>
ishida@1665 1302
ishida@1665 1303 <p>Possible values:</p>
ishida@1665 1304
ishida@1665 1305 <dl>
ishida@1665 1306 <dt><strong>attr(x)</strong></dt>
ishida@1665 1307 <dd>The value of attribute 'x' as a string value. The string value is
ishida@1665 1308 evaluated as a &lt;number&gt; to determine the number of ruby base elements to be
ishida@1665 1309 spanned by the annotation element. If the &lt;number&gt; is &#39;0&#39;, it is replaced by
ishida@1665 1310 &#39;1&#39;.The &lt;number&gt; is the computed value. </dd>
ishida@1665 1311 <dt>none</dt>
ishida@1665 1312 <dd>No spanning. The computed value is &#39;1&#39;.</dd>
ishida@1665 1313 </dl>
ishida@1665 1314
ishida@1665 1315 <p>The following example shows an XML example using the 'display' property
ishida@1665 1316 values associated with the 'ruby structure and the 'ruby-span' property</p>
ishida@3034 1317 <pre class="xml">myruby { display: ruby; }
ishida@1665 1318 myrbc { display: ruby-base-container; }
ishida@1665 1319 myrb { display: ruby-base; }
ishida@1665 1320 myrtc.before { display: ruby-text-container; ruby-position: before}
ishida@1665 1321 myrtc.after { display: ruby-text-container; ruby-position: after}
ishida@1665 1322 myrt { display: ruby-text; ruby-span: attr(rbspan); }
ishida@1665 1323 ...
ishida@1665 1324 &lt;myruby&gt;
ishida@1665 1325 &lt;myrbc&gt;
ishida@1665 1326 &lt;myrb&gt;10&lt;/myrb&gt;
ishida@1665 1327 &lt;myrb&gt;31&lt;/myrb&gt;
ishida@1665 1328 &lt;myrb&gt;2002&lt;/myrb&gt;
ishida@1665 1329 &lt;/myrbc&gt;
ishida@1665 1330 &lt;myrtc class=&quot;before&quot;&gt;
ishida@1665 1331 &lt;myrt&gt;Month&lt;/myrt&gt;
ishida@1665 1332 &lt;myrt&gt;Day&lt;/myrt&gt;
ishida@1665 1333 &lt;myrt&gt;Year&lt;/myrt&gt;
ishida@1665 1334 &lt;/myrtc&gt;
ishida@1665 1335 &lt;myrtc class=&quot;after&quot;&gt;
ishida@1665 1336 &lt;myrt rbspan=&quot;3&quot;&gt;Expiration Date&lt;/myrt&gt;
ishida@1665 1337 &lt;/myrtc&gt;
ishida@1665 1338 &lt;/myruby&gt;</pre>
kojiishi@8496 1339 -->
ishida@1665 1340
fantasai@8497 1341 <h2 id="default-stylesheet" class="no-num">
fantasai@8497 1342 Appendix A: Default Style Sheet</h2>
ishida@1665 1343
fantasai@8497 1344 <p><em>This section is informative.</em>
ishida@1665 1345
fantasai@8497 1346 <h3 id="default-ua-ruby" class="no-num">
fantasai@8497 1347 <span class="secno">A.1</span> Supporting Ruby Layout</h3>
ishida@1665 1348
fantasai@8497 1349 <p>The following represents a default UA style sheet
fantasai@8497 1350 for rendering HTML and XHTML ruby markup as ruby layout:
ishida@1665 1351
fantasai@8497 1352 <pre>
fantasai@8497 1353 <!-- -->ruby { display: ruby; }
fantasai@8497 1354 <!-- -->rb { display: ruby-base; white-space: nowrap; }
fantasai@8497 1355 <!-- -->rt { display: ruby-text; white-space: nowrap; font-size: 50%; }
fantasai@8497 1356 <!-- -->rbc { display: ruby-base-container; }
fantasai@8854 1357 <!-- -->rtc { display: ruby-text-container; }
fantasai@8854 1358 <!-- -->ruby, rb, rt, rbc, rtc { unicode-bidi: isolate; }</pre>
fantasai@8497 1359
fantasai@8497 1360 <p>Additional rules for UAs supporting the relevant features of [[CSS3-TEXT-DECOR]] and [[CSS3-FONTS]]:
fantasai@8497 1361 <pre>rt { font-variant-east-asian: ruby; text-emphasis: none; }</pre>
fantasai@8497 1362
fantasai@8497 1363 <p class="note">Authors should not use the above rules;
fantasai@8497 1364 a UA that supports ruby layout should provide these by default.
fantasai@8497 1365
fantasai@8497 1366 <h3 id="default-inline" class="no-num">
fantasai@8497 1367 <span class="secno">A.2</span> Inlining Ruby Annotations</h3>
fantasai@8497 1368
fantasai@8497 1369 <p>The following represents a sample style sheet
fantasai@8497 1370 for rendering HTML and XHTML ruby markup as inline annotations:
fantasai@8497 1371
fantasai@8497 1372 <pre>ruby, rb, rt, rbc, rtc, rp {
fantasai@8497 1373 <!-- --> display: inline; white-space: inherit;
fantasai@8497 1374 <!-- --> font-variant-east-asian: inherit; text-emphasis: inherit; }</pre>
fantasai@8497 1375
fantasai@8497 1376 <h3 id="default-parens" class="no-num">
fantasai@8497 1377 <span class="secno">A.3</span> Generating Parentheses</h3>
fantasai@8497 1378
fantasai@8497 1379 <p>Unfortunately, because Selectors cannot match against text nodes,
fantasai@8497 1380 it's not possible with CSS to express rules that will automatically and correctly
fantasai@8497 1381 add parentheses to unparenthesized ruby annotations in HTML.
fantasai@8498 1382 (This is because HTML ruby allows implying the <i>ruby base</i> from raw text, without a corresponding element.)
fantasai@8498 1383 However, these rules will handle cases where either <code>&lt;rb&gt;</code>
fantasai@8498 1384 or <code>&lt;rtc&gt;</code> is used rigorously.
fantasai@8498 1385
fantasai@8497 1386 <pre>
fantasai@8498 1387 <!-- -->/* Parens around &lt;rtc> */
fantasai@8497 1388 <!-- -->rtc::before { content: "("; }
fantasai@8498 1389 <!-- -->rtc::after { content: ")"; }
fantasai@8497 1390
fantasai@8498 1391 <!-- -->/* Parens before first &lt;rt> not inside &lt;rtc> */
fantasai@8498 1392 <!-- -->rb + rt::before,
fantasai@8498 1393 <!-- -->rtc + rt::before { content: "("; }
fantasai@8497 1394
fantasai@8498 1395 <!-- -->/* Parens after &lt;rt> not inside &lt;rtc> */
fantasai@8498 1396 <!-- -->rb ~ rt:last-child::after,
fantasai@8498 1397 <!-- -->rt + rb::before { content: ")"; }
fantasai@8498 1398 <!-- -->rt + rtc::before { content: ")("; }</pre>
ishida@1665 1399
fantasai@8479 1400 <h2 id="glossary">
fantasai@8479 1401 Glossary</h2>
ishida@1665 1402 <dl>
ishida@1665 1403 <dt><a id="g-bopomofo"><strong><span
ishida@1665 1404 lang="zh">Bopomofo</span></strong></a></dt>
ishida@1665 1405 <dd>37 characters and 4 tone markings used as phonetics in Chinese,
ishida@1665 1406 especially standard Mandarin.</dd>
ishida@1665 1407 <dt><a id="g-hanja"><strong><span
ishida@1665 1408 lang="ko">Hanja</span></strong></a></dt>
ishida@1665 1409 <dd>Subset of the Korean writing system that utilizes ideographic
ishida@1665 1410 characters borrowed or adapted from the Chinese writing system. Also see
ishida@1665 1411 <a href="#g-kanji"><span lang="ja">Kanji</span></a>.</dd>
ishida@1665 1412 <dt><a id="g-hiragana"><strong><span
ishida@1665 1413 lang="ja">Hiragana</span></strong></a></dt>
ishida@1665 1414 <dd>Japanese syllabic script, or character of that script. Rounded and
ishida@1665 1415 cursive in appearance. Subset of the Japanese writing system, used together
ishida@1665 1416 with kanji and katakana. In recent times, mostly used to write Japanese
ishida@1665 1417 words when kanji are not available or appropriate, and word endings and
ishida@1665 1418 particles. Also see <a
ishida@1665 1419 href="#g-katakana"><span lang="ja">Katakana</span></a>.</dd>
ishida@1665 1420 <dt><a id="g-ideogram"><strong>Ideograph</strong></a></dt>
ishida@1665 1421 <dd>A character that is used to represent an idea, word, or word component,
ishida@1665 1422 in contrast to a character from an alphabetic or syllabic script. The most
ishida@1665 1423 well-known ideographic script is used (with some variation) in East Asia
ishida@1665 1424 (China, Japan, Korea,...).</dd>
ishida@1665 1425 <dt><a id="g-kana"><strong><span lang="ja">Kana</span></strong></a></dt>
ishida@1665 1426 <dd>Collective term for hiragana and katakana.</dd>
ishida@1665 1427 <dt><a id="g-kanji"><strong>Kanji</strong></a></dt>
ishida@1665 1428 <dd>Japanese term for ideographs; ideographs used in Japanese. Subset of the
ishida@1665 1429 Japanese writing system, used together with hiragana and katakana. Also see <a
ishida@1665 1430 href="#g-hanja"><span lang="ko">Hanja</span></a>.</dd>
ishida@1665 1431 <dt><a id="g-katakana"><strong><span
ishida@1665 1432 lang="ja">Katakana</span></strong></a></dt>
ishida@1665 1433 <dd>Japanese syllabic script, or character of that script. Angular in
ishida@1665 1434 appearance. Subset of the Japanese writing system,&nbsp; used together with
ishida@1665 1435 kanji and hiragana. In recent times, mainly used to write foreign words. Also see <a
ishida@1665 1436 href="#g-hiragana"><span lang="ja">Hiragana</span></a>.</dd>
ishida@1665 1437 </dl>
ishida@1665 1438
fantasai@8479 1439 <h2 id="conformance">
fantasai@8479 1440 Conformance</h2>
fantasai@8479 1441
fantasai@8479 1442 <h3 id="conventions">
fantasai@8479 1443 Document conventions</h3>
fantasai@8479 1444
fantasai@8479 1445 <p>Conformance requirements are expressed with a combination of
fantasai@8479 1446 descriptive assertions and RFC 2119 terminology. The key words “MUST”,
fantasai@8479 1447 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
fantasai@8479 1448 “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
fantasai@8479 1449 document are to be interpreted as described in RFC 2119.
fantasai@8479 1450 However, for readability, these words do not appear in all uppercase
fantasai@8479 1451 letters in this specification.
fantasai@8479 1452
fantasai@8479 1453 <p>All of the text of this specification is normative except sections
fantasai@8479 1454 explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
fantasai@8479 1455
fantasai@8479 1456 <p>Examples in this specification are introduced with the words “for example”
fantasai@8479 1457 or are set apart from the normative text with <code>class="example"</code>,
fantasai@8479 1458 like this:
fantasai@8479 1459
fantasai@8479 1460 <div class="example">
fantasai@8479 1461 <p>This is an example of an informative example.</p>
fantasai@8479 1462 </div>
fantasai@8479 1463
fantasai@8479 1464 <p>Informative notes begin with the word “Note” and are set apart from the
fantasai@8479 1465 normative text with <code>class="note"</code>, like this:
fantasai@8479 1466
fantasai@8479 1467 <p class="note">Note, this is an informative note.</p>
fantasai@8479 1468
fantasai@8479 1469 <h3 id="conformance-classes">
fantasai@8479 1470 Conformance classes</h3>
fantasai@8479 1471
fantasai@8479 1472 <p>Conformance to CSS Ruby Module
fantasai@8479 1473 is defined for three conformance classes:
fantasai@8479 1474 <dl>
fantasai@8479 1475 <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
fantasai@8479 1476 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
fantasai@8479 1477 style sheet</a>.
fantasai@8479 1478 <dt><dfn>renderer</dfn></dt>
fantasai@8479 1479 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
fantasai@8479 1480 that interprets the semantics of a style sheet and renders
fantasai@8479 1481 documents that use them.
fantasai@8479 1482 <dt><dfn id="authoring-tool">authoring tool</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 writes a style sheet.
fantasai@8479 1485 </dl>
fantasai@8479 1486
fantasai@8479 1487 <p>A style sheet is conformant to CSS Ruby Module
fantasai@8479 1488 if all of its statements that use syntax defined in this module are valid
fantasai@8479 1489 according to the generic CSS grammar and the individual grammars of each
fantasai@8479 1490 feature defined in this module.
fantasai@8479 1491
fantasai@8479 1492 <p>A renderer is conformant to CSS Ruby Module
fantasai@8479 1493 if, in addition to interpreting the style sheet as defined by the
fantasai@8479 1494 appropriate specifications, it supports all the features defined
fantasai@8479 1495 by CSS Ruby Module by parsing them correctly
fantasai@8479 1496 and rendering the document accordingly. However, the inability of a
fantasai@8479 1497 UA to correctly render a document due to limitations of the device
fantasai@8479 1498 does not make the UA non-conformant. (For example, a UA is not
fantasai@8479 1499 required to render color on a monochrome monitor.)
fantasai@8479 1500
fantasai@8479 1501 <p>An authoring tool is conformant to CSS Ruby Module
fantasai@8479 1502 if it writes style sheets that are syntactically correct according to the
fantasai@8479 1503 generic CSS grammar and the individual grammars of each feature in
fantasai@8479 1504 this module, and meet all other conformance requirements of style sheets
fantasai@8479 1505 as described in this module.
fantasai@8479 1506
fantasai@8479 1507 <h3 id="partial">
fantasai@8479 1508 Partial implementations</h3>
fantasai@8479 1509
fantasai@8479 1510 <p>So that authors can exploit the forward-compatible parsing rules to
fantasai@8479 1511 assign fallback values, CSS renderers <strong>must</strong>
fantasai@8479 1512 treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
fantasai@8479 1513 as appropriate</a>) any at-rules, properties, property values, keywords,
fantasai@8479 1514 and other syntactic constructs for which they have no usable level of
fantasai@8479 1515 support. In particular, user agents <strong>must not</strong> selectively
fantasai@8479 1516 ignore unsupported component values and honor supported values in a single
fantasai@8479 1517 multi-value property declaration: if any value is considered invalid
fantasai@8479 1518 (as unsupported values must be), CSS requires that the entire declaration
fantasai@8479 1519 be ignored.</p>
fantasai@8479 1520
fantasai@8479 1521 <h3 id="experimental">
fantasai@8479 1522 Experimental implementations</h3>
fantasai@8479 1523
fantasai@8479 1524 <p>To avoid clashes with future CSS features, the CSS2.1 specification
fantasai@8479 1525 reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
fantasai@8479 1526 syntax</a> for proprietary and experimental extensions to CSS.
fantasai@8479 1527
fantasai@8479 1528 <p>Prior to a specification reaching the Candidate Recommendation stage
fantasai@8479 1529 in the W3C process, all implementations of a CSS feature are considered
fantasai@8479 1530 experimental. The CSS Working Group recommends that implementations
fantasai@8479 1531 use a vendor-prefixed syntax for such features, including those in
fantasai@8479 1532 W3C Working Drafts. This avoids incompatibilities with future changes
fantasai@8479 1533 in the draft.
fantasai@8479 1534 </p>
fantasai@8479 1535
fantasai@8479 1536 <h3 id="testing">
fantasai@8479 1537 Non-experimental implementations</h3>
fantasai@8479 1538
fantasai@8479 1539 <p>Once a specification reaches the Candidate Recommendation stage,
fantasai@8479 1540 non-experimental implementations are possible, and implementors should
fantasai@8479 1541 release an unprefixed implementation of any CR-level feature they
fantasai@8479 1542 can demonstrate to be correctly implemented according to spec.
fantasai@8479 1543
fantasai@8479 1544 <p>To establish and maintain the interoperability of CSS across
fantasai@8479 1545 implementations, the CSS Working Group requests that non-experimental
fantasai@8479 1546 CSS renderers submit an implementation report (and, if necessary, the
fantasai@8479 1547 testcases used for that implementation report) to the W3C before
fantasai@8479 1548 releasing an unprefixed implementation of any CSS features. Testcases
fantasai@8479 1549 submitted to W3C are subject to review and correction by the CSS
fantasai@8479 1550 Working Group.
fantasai@8479 1551
fantasai@8479 1552 <p>Further information on submitting testcases and implementation reports
fantasai@8479 1553 can be found from on the CSS Working Group's website at
fantasai@8479 1554 <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
fantasai@8479 1555 Questions should be directed to the
fantasai@8479 1556 <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
fantasai@8479 1557 mailing list.
fantasai@8479 1558
fantasai@8479 1559 <h2 class=no-num id="acknowledgments">
fantasai@8479 1560 Acknowledgments</h2>
ishida@1665 1561
ishida@1665 1562 <p>This specification would not have been possible without the help from:</p>
ishida@1665 1563
fantasai@8479 1564 <p>Stephen Deach, Martin Dürst,  Hideki Hiura(<span lang="ja">樋浦 秀樹</span>), Masayasu Ishikawa(<span lang="ja">石川
ishida@1665 1565 雅康</span>), Chris
fantasai@8479 1566 Pratley, Takao Suzuki(<span lang="ja">鈴木 孝雄</span>), Frank Yung-Fong Tang, Chris Thrasher, Masafumi Yabe<span lang="ja">家辺
ishida@1665 1567 勝文</span>), Steve Zilles.</p>
ishida@1665 1568
fantasai@8509 1569 <h2 class="no-num" id="changes">
fantasai@8509 1570 Changes</h2>
fantasai@8509 1571
fantasai@8509 1572 <p>The following major changes have been made since the previous Working Draft:
fantasai@8509 1573 <dl>
fantasai@8509 1574 <dt>Remove 'ruby-span' and mentions of <code>rbspan</code>.
fantasai@8509 1575 <dd>
fantasai@8509 1576 Explicit spanning is not used in HTML ruby in favor of implicit spanning.
fantasai@8509 1577 This can't handle some pathological double-sided spanning cases,
fantasai@8509 1578 but there seems to be no requirement for these at the moment.
fantasai@8509 1579 (For implementations that support full complex XHTML Ruby,
fantasai@8509 1580 they can imply spanning from the markup the same magic way
fantasai@8509 1581 that we handle cell spanning from tables. It doesn't seem
fantasai@8509 1582 necessary to include controls this in Level 1.)
fantasai@8509 1583
fantasai@8509 1584 <dt>Defer 'ruby-overhang' and ''ruby-align: line-end'' to Level 2.
fantasai@8509 1585 <dd>
fantasai@8509 1586 It's somewhat complicated, advanced feature.
fantasai@8509 1587 Proposal is to make this behavior UA-defined
fantasai@8509 1588 and provide some examples of acceptable options.
fantasai@8509 1589
fantasai@8509 1590 <dt>Close issue requesting 'display: rp': use ''display: none''.
fantasai@8509 1591 <dd>
fantasai@9168 1592 The Internationalization WG added an issue requesting a display value for &lt;rp> elements.
fantasai@9173 1593 They're supposed to be hidden when &lt;ruby> is displayed as ruby.
fantasai@8509 1594 But this is easily accomplished already with ''display: none''.
fantasai@8509 1595
fantasai@8509 1596 <dt>Change 'ruby-position' values to match 'text-emphasis-position'.
fantasai@8509 1597 <dd>
fantasai@8509 1598 Other than ''inter-character'', which we need to keep,
fantasai@8509 1599 it makes more sense to align ruby positions with 'text-emphasis-position',
fantasai@8509 1600 which can correctly handle various combinations of horizontal/vertical preferences.
fantasai@8509 1601
fantasai@8509 1602 <dt>Remove unused values of 'ruby-align'.
fantasai@8509 1603 <dd>
fantasai@9109 1604 ''left'', ''right'', and ''end'' are not needed.
fantasai@9109 1605
fantasai@9168 1606 <dt>Replace ''auto'', ''distribute-letter'', and ''distribute-space'' from 'ruby-align' with ''space-between'' and ''space-around''.
fantasai@9109 1607 <dd>
fantasai@9109 1608 The ''auto'' value relied on inspecting content to determine behavior;
fantasai@9109 1609 this can be avoided by just using ''space-around'' with standard justification rules
fantasai@9109 1610 (which allow spacing between CJK but not between Latin).
fantasai@9109 1611 Replaced ''distribute-letter'' and ''distribute-space'' with
fantasai@9168 1612 ''space-between'' and ''space-around'' for consistency with distribution keywords
fantasai@9168 1613 in [[CSS3-FLEXBOX]] and [[CSS3-ALIGN]]
fantasai@9168 1614 and to avoid any links to the definition of ''text-justify: distribute''.
fantasai@8509 1615
fantasai@8509 1616 <dt>Added 'ruby-merge' property to control jukugo rendering.
fantasai@8509 1617 <dd>
fantasai@8509 1618 This is a stylistic effect, not a structural one;
fantasai@8509 1619 the previous model assumed that it was structural and suggested handling it by changing markup. :(
fantasai@8509 1620
fantasai@8509 1621 <dt>Remove ''inline'' from 'ruby-position'.
fantasai@8509 1622 <dd>
fantasai@8509 1623 This is do-able via ''display: inline'' on all the ruby-related elements,
fantasai@8509 1624 see <a href="#default-inline">Appendix A</a>
fantasai@8509 1625
fantasai@8509 1626 <dt>Added <a href="#default-style">Default Style</a> rules
fantasai@8509 1627 <dd>
fantasai@9168 1628 As requested by Internationalization WG.
fantasai@8509 1629
fantasai@8509 1630 <dt>Wrote anonymous box generation rules
fantasai@8509 1631 <dd>
fantasai@8509 1632 And defined pairing of bases and annotations.
fantasai@8509 1633 Should now handle all the crazy proposed permutations of HTML ruby markup.
fantasai@9168 1634
fantasai@9168 1635 <dt>Defined layout of ruby
fantasai@9168 1636 <dd>
fantasai@9168 1637 Defined in detail space distribution, white space handling, line breaking, line stacking, etc.
fantasai@9168 1638 Open issue left for bidi.
fantasai@8509 1639 </dl>
fantasai@8509 1640
fantasai@8479 1641 <h2 class=no-num id="references">
fantasai@8479 1642 References</h2>
ishida@1665 1643
fantasai@8479 1644 <h3 class="no-num" id="normative-references">
fantasai@8479 1645 Normative references</h3>
fantasai@8479 1646 <!--normative-->
ishida@1665 1647
fantasai@8479 1648 <h3 class="no-num" id="other-references">
fantasai@8479 1649 Other references</h3>
fantasai@8479 1650 <!--informative-->
ishida@1665 1651
fantasai@8479 1652 <h2 class="no-num" id="index">
fantasai@8479 1653 Index</h2>
fantasai@8479 1654 <!--index-->
ishida@1665 1655
fantasai@8479 1656 <h2 class="no-num" id="property-index">
fantasai@8479 1657 Property index</h2>
fantasai@8479 1658 <!-- properties -->
ishida@1665 1659
ishida@1665 1660 </body>
ishida@1665 1661 </html>
ishida@1665 1662 <!-- Keep this comment at the end of the file
ishida@1665 1663 Local variables:
ishida@1665 1664 mode: sgml
fantasai@8479 1665 sgml-declaration:"~/SGML/HTML4.decl"
ishida@1665 1666 sgml-default-doctype-name:"html"
ishida@1665 1667 sgml-minimize-attributes:t
ishida@1665 1668 sgml-nofill-elements:("pre" "style" "br")
fantasai@8479 1669 sgml-live-element-indicator:t
fantasai@8479 1670 sgml-omittag:nil
fantasai@8479 1671 sgml-shorttag:nil
fantasai@8479 1672 sgml-namecase-general:t
fantasai@8479 1673 sgml-general-insert-case:lower
fantasai@8479 1674 sgml-always-quote-attributes:t
fantasai@8479 1675 sgml-indent-step:nil
fantasai@8479 1676 sgml-indent-data:t
fantasai@8479 1677 sgml-parent-document:nil
fantasai@8479 1678 sgml-exposed-tags:nil
fantasai@8479 1679 sgml-local-catalogs:nil
fantasai@8479 1680 sgml-local-ecat-files:nil
ishida@1665 1681 End:
ishida@1665 1682 -->
fantasai@8479 1683

mercurial