csswg-drafts/css-ruby-1/images/ruby-boxes-simple.html at continue-collapse@7 · mon2000x111-sketch/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
<!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 2; }
</style>

<div class=ruby>
	<div class="rbc">
		<div class="rb">上</div><div class="rb">手</div>
	</div>
	<div class="rtc">
		<div class="rt">じょう</div><div class="rt">ず</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>