Skip to content

Commit 547bcfb

Browse files
fantasaifantasai
committed
[css-ruby-1] Add diagrams for ruby-merge
1 parent 7b6ed36 commit 547bcfb

7 files changed

Lines changed: 111 additions & 0 deletions

File tree

‎css-ruby-1/Overview.bs‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1352,6 +1352,19 @@ Sharing Annotation Space: the 'ruby-merge' property</h3>
13521352
i.e. without overlapping adjacent bases on either side.
13531353
This style is called “mono ruby” in [[JLREQ]].
13541354

1355+
<figure>
1356+
<img src="images/ruby-mono.png"
1357+
alt="Extra space is added to base or annotations
1358+
when one of the pair is longer than the other
1359+
in order to keep each annotation exclusive to its own base.
1360+
For example, in the annotation for “上手”,
1361+
extra space is added around the first character
1362+
to accommodate its longer annotation “じょう”
1363+
while the shorter annotation “ず” for the second character
1364+
is simply positioned and aligned with respect to its base characters.">
1365+
<figcaption>''ruby-merge: separate'' with center alignment</figcaption>
1366+
</figure>
1367+
13551368
<div class="example">
13561369
For example, the following two lines render the same:
13571370
<pre highlight=html>
@@ -1369,6 +1382,16 @@ Sharing Annotation Space: the 'ruby-merge' property</h3>
13691382
This style renders similar to “group ruby” in [[JLREQ]],
13701383
except that [=ruby annotations=] are kept together with their respective [=ruby bases=] when breaking lines.
13711384

1385+
<figure>
1386+
<img src="images/ruby-merge.png"
1387+
alt="The combined annotation is centered with respect to the combined base,
1388+
even if this would place an annotation’s content over a different base.
1389+
In the case of “上手”, the “う” from the first base’s annotation
1390+
and the “ず” from the second base’s annotation end up
1391+
sharing space over the second base.">
1392+
<figcaption>''ruby-merge: separate'' with center alignment</figcaption>
1393+
</figure>
1394+
13721395
<div class="example">
13731396
The following two lines render the same
13741397
if both characters fit on one line:
@@ -1390,6 +1413,16 @@ Sharing Annotation Space: the 'ruby-merge' property</h3>
13901413
the space is shared in some way
13911414
to avoid imposing space between bases.
13921415

1416+
<figure>
1417+
<img src="images/ruby-jukugo.png"
1418+
alt="If there is enough space, annotations are aligned to their bases;
1419+
but if there is not, then annotations can share space with adjacent annotations.
1420+
Thus the annotations for “上手”　share space over the second base as in the 'merge' case,
1421+
but the annotations for “下手” which are one character each
1422+
end up rendering as for 'separate'.">
1423+
<figcaption>''ruby-merge: separate'' with center alignment</figcaption>
1424+
</figure>
1425+
13931426
<div class="note">
13941427
Note: This behavior is intended for compound words,
13951428
see <a href="https://www.w3.org/International/questions/qa-ruby#jukugo">“Jukugo Ruby” in “What is ruby?”</a>. [[QA-RUBY]]

‎css-ruby-1/images/ruby-jukugo.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html mobile>
2+
<meta charset=utf-8>
3+
<style>
4+
body { font: 18px/1 Source Han Sans HW; text-align: center; display: flex; }
5+
hr { margin: 0 1em; border: dashed silver 1px; }
6+
7+
body > .ruby { display: grid; grid-template-columns: auto auto; }
8+
.ruby > * { display: flex; justify-content: center; }
9+
.rb > i { flex: 1; }
10+
.rb { font-size: 200%; }
11+
.A { color: orange; }
12+
i { font: inherit; border: solid 1px silver; margin: -0.5px; }
13+
</style>
14+
15+
<div class=ruby>
16+
<div class="rb"><i class=A>上</i><i class=B>手</i></div>
17+
<div class="rt" style="grid-row: 2"><i class=A>じ</i><i class=A>ょ</i><i class=A>う</i><i class=B>ず</i></div>
18+
</div>
19+
20+
<hr>
21+
22+
<div class=ruby>
23+
<div class="rb A"><i>下</i></div>
24+
<div class="rb B"><i>手</i></div>
25+
<div class="rt A"><i>へ</i></div>
26+
<div class="rt B"><i>た</i></div>
27+
</div>

‎css-ruby-1/images/ruby-jukugo.png‎

9.12 KB
Loading

‎css-ruby-1/images/ruby-merge.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html mobile>
2+
<meta charset=utf-8>
3+
<style>
4+
body { font: 18px/1 Source Han Sans HW; text-align: center; display: flex; }
5+
hr { margin: 0 1em; border: dashed silver 1px; }
6+
7+
body > .ruby { display: grid; grid-template-columns: auto auto; }
8+
.ruby > * { display: flex; justify-content: center; }
9+
.rb { font-size: 200%; }
10+
.A { color: orange; }
11+
i { font: inherit; border: solid 1px silver; margin: -0.5px; }
12+
</style>
13+
14+
<div class=ruby>
15+
<div class="rb"><i class=A>上</i><i class=B>手</i></div>
16+
<div class="rt" style="grid-row: 2"><i class=A>じ</i><i class=A>ょ</i><i class=A>う</i><i class=B>ず</i></div>
17+
</div>
18+
19+
<hr>
20+
21+
<div class=ruby>
22+
<div class="rb"><i class=A>下</i><i class=B>手</i></div>
23+
<div class="rt" style="grid-row: 2"><i class=A>へ</i><i class=B>た</i></div>
24+
</div>

‎css-ruby-1/images/ruby-merge.png‎

8.97 KB
Loading

‎css-ruby-1/images/ruby-mono.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<style>
3+
body { font: 18px/1 Source Han Sans HW; text-align: center; display: flex; }
4+
hr { margin: 0 1em; border: dashed silver 1px; }
5+
6+
body > .ruby { display: grid; grid-template-columns: auto auto; }
7+
.ruby > * { display: flex; justify-content: center; }
8+
.rb { font-size: 200%; }
9+
.A { color: orange; }
10+
i { font: inherit; border: solid 1px silver; margin: -0.5px; }
11+
</style>
12+
13+
<div class=ruby>
14+
<div class="rb A"><i>上</i></div>
15+
<div class="rb B"><i>手</i></div>
16+
<div class="rt A"><i>じ</i><i>ょ</i><i>う</i></div>
17+
<div class="rt B"><i>ず</i></div>
18+
</div>
19+
20+
<hr>
21+
22+
<div class=ruby>
23+
<div class="rb A"><i>下</i></div>
24+
<div class="rb B"><i>手</i></div>
25+
<div class="rt A"><i>へ</i></div>
26+
<div class="rt B"><i>た</i></div>
27+
</div>

‎css-ruby-1/images/ruby-mono.png‎

8.47 KB
Loading

0 commit comments

Comments
 (0)