css-ruby/Overview.src.html

Fri, 13 Sep 2013 14:02:29 -0700

author
fantasai <fantasai.cvs@inkedblade.net>
date
Fri, 13 Sep 2013 14:02:29 -0700
changeset 9168
9aff8601c264
parent 9167
e654b1e94545
child 9169
614ea183fabe
permissions
-rw-r--r--

[css-ruby] Clarifications to changes log and bidi issue.

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

mercurial