Skip to content

Commit 96aaa9d

Browse files
frivoalfrivoal
committed
[css-ruby] Reorganize Intro
1 parent 23baa2a commit 96aaa9d

1 file changed

Lines changed: 56 additions & 54 deletions

File tree

‎css-ruby-1/Overview.bs‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,62 @@ Redo all examples with consistent font. (M+ 2p?)
3535
<h2 id="intro">
3636
Introduction</h2>
3737

38+
<h3 id="ruby-def">
39+
What is ruby?</h3>
40+
3841
<em>This section is not normative.</em>
3942

43+
<dfn export>Ruby</dfn> is the commonly-used name for a run of text
44+
that appears alongside another run of text (referred to as the “base”)
45+
and serves as an annotation or a pronunciation guide associated with that run of text.
46+
47+
The following figures show two examples of Ruby,
48+
a simple case and one with more complicated structure.
49+
50+
<div class="example">
51+
In this first example, a single annotation is used to annotate the base text.
52+
<div class="figure">
53+
<img src="images/licence.png"
54+
alt="Example of ruby applied on top of a Japanese expression">
55+
<p class="caption">Example of ruby used in Japanese (simple case)
56+
</div>
57+
58+
In Japanese typography, this case is sometimes called
59+
taigo ruby (Japanese: <span lang="ja">対語ルビ</span>, i.e. per-word ruby) or group-ruby,
60+
because the annotation as a whole is associated
61+
with multi-character word (as a whole).
62+
</div>
63+
64+
<div class="example">
65+
In this second example,
66+
two levels of annotations are attached to a base sequence:
67+
the hiragana characters on top refer to the pronunciation of each of the base kanji characters,
68+
while the words “Keio” and “University” on the bottom are annotations describing the English translation.
69+
<div class="figure">
70+
<img src="images/ruby-univ.gif"
71+
alt="Example showing complex ruby with annotation text over and under the base characters">
72+
<p class="caption">Complex ruby with annotation text over and under the base characters
73+
</div>
74+
75+
Notice that to allow correct association between the hiragana characters and
76+
their corresponding Kanji base characters,
77+
the spacing between these Kanji characters is adjusted.
78+
(This happens around the fourth Kanji character in the figure above.)
79+
To avoid variable spacing between the Kanji characters in the example above
80+
the hiragana annotations can be styled as a [=merged annotation=],
81+
which will look more like the group-ruby example earlier.
82+
However because the base-annotation [=pairings=] are recorded in the ruby structure,
83+
if the text breaks across lines, the annotation characters will stay
84+
correctly paired with their respective base characters.
85+
</div>
86+
87+
[=Ruby=] formatting as used in Japanese is described in JIS X-4051 [[JIS4051]] (in Japanese)
88+
and in Requirements for Japanese Text Layout [[JLREQ]] (in English and Japanese)].
89+
In HTML, ruby structure and markup to represent it is described
90+
in the Ruby Markup Extension specification.
91+
This module describes the CSS rendering model
92+
and formatting controls relevant to ruby layout of such markup.
93+
4094
<h3 id="placement">
4195
Module interactions</h3>
4296

@@ -70,6 +124,8 @@ Value Definitions</h3>
70124
<h3 id="diagram-conventions">
71125
Diagram conventions</h3>
72126

127+
<em>This section is not normative.</em>
128+
73129
Many typographical conventions in East Asian typography depend
74130
on whether the character rendered is wide (CJK) or narrow (non-CJK).
75131
There are a number of illustrations in this document
@@ -90,60 +146,6 @@ Diagram conventions</h3>
90146
Spacing between these characters in the diagrams is incidental,
91147
unless intentionally changed to make a point.
92148

93-
<h3 id="ruby-def">
94-
What is ruby?</h3>
95-
96-
<dfn export>Ruby</dfn> is the commonly-used name for a run of text
97-
that appears alongside another run of text (referred to as the “base”)
98-
and serves as an annotation or a pronunciation guide associated with that run of text.
99-
100-
The following figures show two examples of Ruby,
101-
a simple case and one with more complicated structure.
102-
103-
<div class="example">
104-
In this first example, a single annotation is used to annotate the base text.
105-
<div class="figure">
106-
<img src="images/licence.png"
107-
alt="Example of ruby applied on top of a Japanese expression">
108-
<p class="caption">Example of ruby used in Japanese (simple case)
109-
</div>
110-
111-
In Japanese typography, this case is sometimes called
112-
taigo ruby (Japanese: <span lang="ja">対語ルビ</span>, i.e. per-word ruby) or group-ruby,
113-
because the annotation as a whole is associated
114-
with multi-character word (as a whole).
115-
</div>
116-
117-
<div class="example">
118-
In this second example,
119-
two levels of annotations are attached to a base sequence:
120-
the hiragana characters on top refer to the pronunciation of each of the base kanji characters,
121-
while the words “Keio” and “University” on the bottom are annotations describing the English translation.
122-
<div class="figure">
123-
<img src="images/ruby-univ.gif"
124-
alt="Example showing complex ruby with annotation text over and under the base characters">
125-
<p class="caption">Complex ruby with annotation text over and under the base characters
126-
</div>
127-
128-
Notice that to allow correct association between the hiragana characters and
129-
their corresponding Kanji base characters,
130-
the spacing between these Kanji characters is adjusted.
131-
(This happens around the fourth Kanji character in the figure above.)
132-
To avoid variable spacing between the Kanji characters in the example above
133-
the hiragana annotations can be styled as a [=merged annotation=],
134-
which will look more like the group-ruby example earlier.
135-
However because the base-annotation [=pairings=] are recorded in the ruby structure,
136-
if the text breaks across lines, the annotation characters will stay
137-
correctly paired with their respective base characters.
138-
</div>
139-
140-
[=Ruby=] formatting as used in Japanese is described in JIS X-4051 [[JIS4051]] (in Japanese)
141-
and in Requirements for Japanese Text Layout [[JLREQ]] (in English and Japanese)].
142-
In HTML, ruby structure and markup to represent it is described
143-
in the Ruby Markup Extension specification.
144-
This module describes the CSS rendering model
145-
and formatting controls relevant to ruby layout of such markup.
146-
147149
<h2 id="ruby-model">
148150
Ruby Box Model</h2>
149151

0 commit comments

Comments
 (0)