kanbun.css

.kanbun {
  writing-mode: vertical-rl;
  font-size: 1.75rem;
  line-height: 100%;
  font-weight: 375;
  height: 14em;
  padding: 1.2em 0.2em;
}

.kanbun,
.kanbun:lang(ja),
.kanbun :lang(ja) {
  font-family: "A-OTF Shuei Mincho Pr6N", YuMincho, "Yu Mincho",
    "Hiragino Mincho ProN", "MS Mincho", serif;
}

.kanbun .dash,
.kanbun .ellipsis {
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
}

.kanbun .kaeriten ~ .ellipsis {
  margin-top: 0.5em;
}

.kanbun p {
  margin: 0;
}

.kanbun p > * {
  letter-spacing: 0;
  line-height: 100%;
}

.kanbun rt,
.kanbun sup,
.kanbun sub {
  font-size: 50%;
  font-weight: 545;
  line-height: 100%;
}

.kanbun .unit {
  display: inline-grid;
  vertical-align: middle;
  grid-template-rows: 0.5em 1em 0.5em;
  grid-template-columns: 0.5em 0.5em 0 1em;
  margin: 0 0.0625em;
}

.kanbun .has-multiple-kanji {
  grid-template-columns: auto 0 0 1em;
}

.kanbun .has-2-kanji {
  grid-template-columns: 3em 0 0 1em;
}

.kanbun .has-3-kanji {
  grid-template-columns: 5em 0 0 1em;
}

.kanbun.betagumi .unit {
  grid-template-columns: 0.5em 0.5em auto 1fr;
  margin: 0;
}

.kanbun.betagumi .has-multiple-kanji {
  grid-template-columns: auto 0 auto 1fr;
}

.kanbun.betagumi .has-less-than-3-furigana.has-okurigana {
  grid-template-columns: auto auto auto 1fr;
}

.kanbun.betagumi.split-touching-kana
  .next-unit-has-furigana:not(.has-okurigana):not(.has-multiple-kanji.has-less-than-3-furigana):not(.has-only-1-furigana)
  .furigana {
  margin-bottom: 0.5em;
}

.kanbun .kanji {
  grid-row: 2;
  grid-column: 1 / 3;
}

.kanbun .has-multiple-kanji .unit {
  grid-template-rows: 0 1em 0;
  margin: 0;
}

.kanbun:not(.betagumi) .has-multiple-kanji .unit {
  height: 2em;
}

.kanbun:not(.betagumi) .has-multiple-kanji .unit:last-of-type {
  margin-bottom: -1em;
}

.kanbun .furigana {
  grid-row: 1;
  grid-column: 1 / 4;
  white-space: nowrap;
  height: max-content;
  justify-self: center;
  display: block;
}

.kanbun.betagumi .has-okurigana.has-less-than-3-furigana .furigana {
  grid-column: 1;
}

.kanbun .has-multiple-kanji .furigana {
  grid-column: 1 / 3;
  height: auto;
  justify-self: stretch;
  text-justify: distribute;
  text-align: justify;
  text-align-last: justify;
}

.kanbun.betagumi:not(.furigana-center-align)
  .unit:not(.has-multiple-kanji)
  .furigana {
  justify-self: start;
}

.kanbun .has-okurigana .furigana {
  justify-self: end;
}

.kanbun .okurigana,
.kanbun.betagumi .has-less-than-3-furigana .okurigana {
  grid-row: 1;
  grid-column: 2 / 5;
  white-space: nowrap;
  height: max-content;
}

.kanbun .has-furigana .okurigana {
  grid-column: 4;
}

.kanbun .has-multiple-kanji .okurigana {
  grid-column: 3 / 5;
}

.kanbun.okurigana-sinking .unit:not(.has-furigana) .okurigana,
.kanbun.okurigana-sinking .saidoku:not(.has-furigana) {
  margin-top: 0.25em;
  margin-bottom: -0.25em;
}

.kanbun.betagumi.okurigana-sinking
  .next-unit-has-furigana:not(.has-furigana)
  .okurigana {
  margin-bottom: 0;
}

.kanbun.betagumi.split-touching-kana .next-unit-has-furigana .okurigana,
.kanbun.betagumi.okurigana-sinking.split-touching-kana
  .next-unit-has-furigana:not(.has-furigana)
  .okurigana {
  margin-bottom: 0.25em;
}

.kanbun .kaeriten,
.kanbun .punctuation {
  grid-row: 2;
  grid-column: 3 / 5;
}

.kanbun .kaeriten {
  align-self: end;
  white-space: nowrap;
  height: max-content;
  z-index: 50;
}

.kanbun .kaeriten sub:not(:first-of-type),
.kanbun.betagumi .kaeriten .ichiten:first-of-type:not(:last-of-type) {
  margin-top: -0.3em;
}

.kanbun .kaeriten .ichiten + sub {
  margin-top: -0.7em;
}

.kanbun .saidoku {
  grid-row: 3;
  grid-column: 1 / 5;
  white-space: nowrap;
  height: max-content;
}

.kanbun .saidoku:not(.has-furigana) {
  padding-top: 0.5em;
}

.kanbun:not(.betagumi) .saidoku:not(.has-okurigana) .saidoku-furigana,
.kanbun.betagumi.furigana-center-align
  .saidoku:not(.has-okurigana)
  .saidoku-furigana {
  display: inline-block;
  min-height: 2em;
  text-align: center;
}

.kanbun .punctuation ~ .punctuation {
  margin-top: 0.5em;
}

.kanbun:not(.betagumi) .punctuation ~ .right-corner-bracket {
  margin-top: 0.375em;
}

.kanbun .dash {
  position: relative;
  color: transparent;
}

.kanbun .dash:after {
  content: "";
  background: black;
  width: 0.04em;
  position: absolute;
  left: 0.5em;
  top: 0.05em;
  height: 0.9em;
}

.kanbun.betagumi .dash {
  font-size: 50%;
}

.kanbun.betagumi .dash:after {
  left: 1em;
}

.kanbun.show-borders .unit > * {
  outline: 1px solid #2196f3;
}

.kanbun.show-borders .unit.has-multiple-kanji > .kanji {
  outline: 0;
}

.kanbun .kunten:not(.punctuation) {
  line-height: 0;
}