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