Skip to content

Commit acfba52

Browse files
fantasaifantasai
committed
[css-ruby-1] Adjust labeling for box diagrams.
1 parent 547bcfb commit acfba52

File tree

5 files changed

+45
-10
lines changed

5 files changed

+45
-10
lines changed

‎css-ruby-1/images/ruby-boxes-complex.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22
<style>
3-
@import "dia.css";
3+
@import "ruby-boxes.css";
44
body { display: flex; align-items: center; }
55
body > .ruby { display: grid; grid-template-columns: auto auto auto; }
66
.ruby > div { display: grid; grid-template-columns: subgrid; }
@@ -20,13 +20,13 @@
2020
</div>
2121

2222
<div class="labels">
23+
<div class="ruby">ruby container</div>
2324
<div>
24-
<div class="rb">ruby bases</div>
2525
<div class="rbc">ruby base container</div>
26+
<div class="rb">ruby bases</div>
2627
</div>
27-
<div class="ruby">ruby container</div>
2828
<div>
29-
<div class="rt">ruby annotations</div>
3029
<div class="rtc">ruby annotation container</div>
30+
<div class="rt">ruby annotations</div>
3131
</div>
3232
</div>

‎css-ruby-1/images/ruby-boxes-complex.png

10 Bytes
Loading

‎css-ruby-1/images/ruby-boxes-simple.html

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22
<style>
3-
@import "dia.css";
3+
@import "ruby-boxes.css";
44
body { display: flex; align-items: center; }
55
body > .ruby { display: grid; grid-template-columns: auto auto auto; }
66
.ruby div { display: grid; grid-template-columns: subgrid; }
@@ -17,15 +17,13 @@
1717
</div>
1818

1919
<div class="labels">
20+
<div class="ruby">ruby container</div>
2021
<div>
21-
<div class="rb">ruby bases</div>
2222
<div class="rbc">ruby base container</div>
23+
<div class="rb">ruby bases</div>
2324
</div>
24-
25-
<div class="ruby">ruby container</div>
26-
2725
<div>
28-
<div class="rt">ruby annotations</div>
2926
<div class="rtc">ruby annotation container</div>
27+
<div class="rt">ruby annotations</div>
3028
</div>
3129
</div>

‎css-ruby-1/images/ruby-boxes-simple.png

-1.08 KB
Loading

‎css-ruby-1/images/ruby-boxes.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
html { font: 18px/1 Source Han Sans; text-align: center; }
2+
div, ::before { border-width: 1px !important; }
3+
4+
body > .ruby { border: solid green; padding: 3px }
5+
.ruby .rtc { border: dotted red ; }
6+
.ruby .rbc { border: dotted blue; }
7+
.ruby .rt { border: solid red ; padding: 3px; margin: 3px ; color: gray; }
8+
.ruby .rb { border: solid blue ; padding: 3px; margin: 3px ; color: gray; font-size: 200%; }
9+
10+
.labels {
11+
font-style: italic;
12+
font-size: 12px;
13+
line-height: 1.1;
14+
text-align: left;
15+
padding-left: 2em;
16+
display: block;
17+
}
18+
.labels > * {
19+
margin: 0.5em 0;
20+
}
21+
.labels .ruby { color: green; }
22+
.labels :is(.rt, .rtc) { color: red; }
23+
.labels :is(.rb, .rbc) { color: blue; }
24+
25+
.labels :is(.ruby, .rt, .rtc, .rb, .rbc)::before {
26+
content: '';
27+
display: inline-block;
28+
vertical-align: middle;
29+
width: 1em;
30+
margin-right: 0.25em;
31+
}
32+
:is(.ruby, .rt, .rb)::before {
33+
border-top-style: solid;
34+
}
35+
:is(.rtc, .rbc)::before {
36+
border-top-style: dotted;
37+
}

0 commit comments

Comments
 (0)