You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css-ruby-1/Overview.bs
+34-8Lines changed: 34 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -45,11 +45,18 @@ What is ruby?</h3>
45
45
that appears alongside another run of text (referred to as the “base”)
46
46
and serves as an annotation or a pronunciation guide associated with that run of text.
47
47
48
+
<figure>
49
+
<img src="images/ruby-context.png"
50
+
alt="Hiragana ruby annotations above each kanji in Japanese text">
51
+
<figcaption>A run of Japanese text with phonetic ruby annotations indicating the pronunciation of each ideograph.</figcaption>
52
+
</figure>
53
+
48
54
The following figures show two examples of Ruby,
49
55
a simple case and one with more complicated structure.
50
56
51
57
<div class="example">
52
-
In this first example, a single annotation is used to annotate the base text.
58
+
In this example, a single annotation is used to annotate a base text
59
+
consisting of multiple characters.
53
60
<div class="figure">
54
61
<img src="images/licence.png"
55
62
alt="Example of ruby applied on top of a Japanese expression">
@@ -64,20 +71,21 @@ What is ruby?</h3>
64
71
65
72
<div class="example">
66
73
In this second example,
67
-
two levels of annotations are attached to a base sequence:
74
+
two levels of annotations are attached to the base text:
68
75
the hiragana characters on top refer to the pronunciation of each of the base kanji characters,
69
-
while the words “Keio” and “University” on the bottom are annotations describing the English translation.
76
+
while the words “Keio” and “University” on the bottom are give the English translation.
70
77
<div class="figure">
71
78
<img src="images/ruby-univ.gif"
72
79
alt="Example showing complex ruby with annotation text over and under the base characters">
73
80
<p class="caption">Complex ruby with annotation text over and under the base characters
74
81
</div>
75
82
76
-
Notice that to allow correct association between the hiragana characters and
77
-
their corresponding Kanji base characters,
78
-
the spacing between these Kanji characters is adjusted.
79
-
(This happens around the fourth Kanji character in the figure above.)
80
-
To avoid variable spacing between the Kanji characters in the example above
83
+
Notice that to reflect the correct association
84
+
of hiragana characters and their corresponding Kanji base characters,
85
+
the spacing within the base-level text is adjusted.
86
+
(This happens around the fourth Kanji character in the figure above,
87
+
which has a three-character phonetic gloss.)
88
+
To avoid variable spacing of the base text in the example above,
81
89
the hiragana annotations can be styled as a [=merged annotation=],
82
90
which will look more like the group-ruby example earlier.
83
91
However because the base-annotation [=pairings=] are recorded in the ruby structure,
@@ -168,9 +176,27 @@ Ruby Box Model</h2>
168
176
there are “rows” (the [=base text level=], each [=annotation level=])
169
177
and “[=columns=]” (each [=ruby base=] and its corresponding [=ruby annotations=]).
170
178
179
+
<figure>
180
+
<img src="images/ruby-boxes-simple.png"
181
+
alt="Ruby structure arranged as a table,
182
+
the first “column” containing 上 in a base box with じょう centered below in an annotation box
183
+
and the second “column” containing 手 in a separate base box with ず centered below in another annotation box.">
184
+
<figcaption>The Japanese compound word “上手” annotated with its pronunciation “じょうず”. Each syllable is associated individually with its base character.</figcaption>
185
+
</figure>
186
+
171
187
Consecutive bases and annotations are grouped together into [=ruby segments=].
172
188
Within a [=ruby segment=], a [=ruby annotation=] may span multiple [=ruby bases=].
173
189
190
+
<figure>
191
+
<img src="images/ruby-boxes-complex.png"
192
+
alt="Ruby structure arranged as a table,
193
+
the first “column” containing 旧 in a base box with jiù centered above in an annotation box,
194
+
the second “column” containing 金 in a base box with jīn centered above in an annotation box,
195
+
the third “column” containing 山 in a base box with .shān centerered above it in an annotation box,
196
+
and the name San Francisco centered below the entire phrase in an annotation box that spans all three “columns”.">
197
+
<figcaption>The Chinese city name “旧金山” annotated with its pronunciation in Pinyin “jiùjīnshān” and its English name “San Francisco”. Each Pinyin syllable is associated individually with its base character, however the English name is associated with the name as a whole.</figcaption>
198
+
</figure>
199
+
174
200
Note: In HTML, a single <code><ruby></code> element may contain multiple [=ruby segments=].
175
201
(In the XHTML Ruby model, a single <code><ruby></code> element can only contain one [=ruby segment=].)
0 commit comments