csswg-drafts/css-ruby-1/images/ruby-jukugo.html at fix/the-these · j9t/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html mobile>
<meta charset=utf-8>
<style>
	body { font: 18px/1 Source Han Sans HW; text-align: center; display: flex; }
	hr { margin: 0 1em; border: dashed silver 1px; }

	body > .ruby { display: grid; grid-template-columns: auto auto; }
	.ruby > * { display: flex; justify-content: center; }
	.rb > i { flex: 1; }
	.rb { font-size: 200%; }
	.A { color: orange; }
	i { font: inherit; border: solid 1px silver; margin: -0.5px; }
</style>

<div class=ruby>
	<div class="rb"><i class=A>上</i><i class=B>手</i></div>
	<div class="rt" style="grid-row: 2"><i class=A>じ</i><i class=A>ょ</i><i class=A>う</i><i class=B>ず</i></div>
</div>

<hr>

<div class=ruby>
	<div class="rb A"><i>下</i></div>
	<div class="rb B"><i>手</i></div>
	<div class="rt A"><i>へ</i></div>
	<div class="rt B"><i>た</i></div>
</div>