ruby-boxes.css

html { font: 18px/1 Source Han Sans; text-align: center; }
div, ::before { border-width: 1px !important; }

body > .ruby  { border: solid green;    padding: 3px }
.ruby .rtc  { border: dotted red ;    }
.ruby .rbc  { border: dotted blue;    }
.ruby .rt   { border: solid red  ;    padding: 3px; margin: 3px ;  color: gray; }
.ruby .rb   { border: solid blue ;    padding: 3px; margin: 3px ;  color: gray; font-size: 200%; }

.labels {
	font-style: italic;
	font-size: 12px;
	line-height: 1.1;
	text-align: left;
	padding-left: 2em;
	display: block;
}
.labels > * {
	margin: 0.5em 0;
}
.labels .ruby           { color: green; }
.labels :is(.rt, .rtc)  { color: red; }
.labels :is(.rb, .rbc)  { color: blue; }

.labels :is(.ruby, .rt, .rtc, .rb, .rbc)::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	margin-right: 0.25em;
}
:is(.ruby, .rt, .rb)::before {
	border-top-style: solid;
}
:is(.rtc, .rbc)::before {
	border-top-style: dotted;
}