css-ruby/Overview.src.html

Fri, 13 Sep 2013 13:55:31 -0700

author
fantasai <fantasai.cvs@inkedblade.net>
date
Fri, 13 Sep 2013 13:55:31 -0700
changeset 9167
e654b1e94545
parent 9163
84b4394709eb
child 9168
9aff8601c264
permissions
-rw-r--r--

[css-ruby] Clarifications to white space collapsing section

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

mercurial