css-ruby/Overview.src.html

Fri, 13 Sep 2013 13:34:40 -0700

author
fantasai <fantasai.cvs@inkedblade.net>
date
Fri, 13 Sep 2013 13:34:40 -0700
changeset 9163
84b4394709eb
parent 9113
d828790901e7
child 9167
e654b1e94545
permissions
-rw-r--r--

[css-ruby] Add more explanation for ruby-merge: auto, and check in missing image.

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

mercurial