csswg-drafts/css-ruby-1/images/ruby-boxes-complex.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
28
29
30
31
32
<!DOCTYPE html>
<style>
	@import "ruby-boxes.css";
	body { display: flex; align-items: center; }
	body > .ruby { display: grid; grid-template-columns: auto auto auto; }
	.ruby > div  { display: grid; grid-template-columns: subgrid; }
	.rtc, .rbc   {                grid-column: span 3; }
</style>

<div class=ruby>
	<div class="rtc">
		<div class="rt">jiù</div><div class="rt">jīn</div><div class="rt">shān</div>
	</div>
	<div class="rbc">
		<div class="rb">旧</div><div class="rb">金</div><div class="rb">山</div>
	</div>
	<div class="rtc">
		<div class="rt" style="grid-column: span 3">San Francisco</div>
	</div>
</div>

<div class="labels">
	<div class="ruby">ruby container</div>
	<div>
		<div class="rbc">ruby base container</div>
		<div class="rb">ruby bases</div>
	</div>
	<div>
		<div class="rtc">ruby annotation container</div>
		<div class="rt">ruby annotations</div>
	</div>
</div>