css-ruby/Overview.src.html

Tue, 25 Jun 2013 18:53:52 -0700

author
fantasai <fantasai.cvs@inkedblade.net>
date
Tue, 25 Jun 2013 18:53:52 -0700
changeset 8561
a79e0e6e4456
parent 8548
0532b1e2bf07
child 8661
bf6f0366baf4
permissions
-rw-r--r--

[css-cascade] minor editorial tweaks from f2f commentary

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

mercurial