Implement ruby controls!

assets/styles/root.css

@@ -180,6 +180,24 @@ details {
   width: 100%;
 }
 
+fieldset {
+    box-sizing: border-box;
+    border: 1px solid var(--separator-color);
+    padding: var(--body-item-spacing);
+    padding-top: calc(var(--body-item-spacing) / 10);
+}
+
+fieldset#ruby-controls {
+}
+
+fieldset#ruby-controls input[type=radio] {
+    margin-inline-end: calc(var(--body-item-spacing) / 6);
+}
+
+fieldset#ruby-controls label {
+    margin-inline-end: calc(var(--body-item-spacing));
+}
+
 figure {
     border-radius: 6px;
     line-height: 1;
@@ -608,6 +626,29 @@ ruby:hover rt {
     }
 }
 
+body:has(fieldset#ruby-controls > input[value=NONE]:checked) rt {
+    display: none;
+}
+body:has(fieldset#ruby-controls > input[value=BOTH]:checked) rt {
+}
+body:has(fieldset#ruby-controls > input[value=ENGLISH]:checked) rt {
+}
+
+/* When ruby-controls is set to hidden, hide the ruby base and only show the <rt> */
+body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) ruby > span {
+    display: none;
+}
+body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) rt {
+    color: inherit;
+    display: inline;
+    font-size: inherit;
+    white-space: inherit;
+}
+body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) :is(h1, h2, h3, h4, h5, h6) rt {
+    font-family: var(--font-family-heading);
+    font-weight: bold;
+}
+
 table {
     border: 1px solid var(--separator-color);
     border-collapse: collapse;

layouts/_default/term.html

@@ -8,6 +8,7 @@
 </header>
 
 {{ partial "table_of_contents.html" . }}
+{{ partial "ruby_controls.html" . }}
 
 {{- $hasContent := false -}}
 {{ with .Content }}

layouts/partials/ruby_controls.html

@@ -0,0 +1,15 @@
+{{ if .HasShortcode "ruby" -}}
+<aside>
+  <fieldset id="ruby-controls">
+    <legend>Ruby</legend>
+    <input id="none" type="radio" name="ruby-controls" value="NONE" checked>
+    <label for="none">None</label>
+    <input id="both" type="radio" name="ruby-controls" value="BOTH" checked>
+    <label for="both">Both</label>
+    <input id="english-only" type="radio" name="ruby-controls" value="ENGLISH">
+    <label for="english-only">English</label>
+    <input id=hidden type=radio name=ruby-controls value=HIDDEN>
+    <label for=hidden>Hidden</label>
+  </fieldset>
+</aside>
+{{- end }}

layouts/shortcodes/ruby.html

@@ -1 +1 @@
-<ruby {{ with .Get 1 }}lang="{{ . }}"{{ end }}>{{- .Inner }} <rp>(</rp><rt {{ with .Get 2 }}lang="{{ . }}"{{ end }}>{{- .Get 0 -}}</rt><rp>)</rp></ruby>{{- "" -}}
+<ruby {{ with .Get 1 }}lang="{{ . }}"{{ end }}><span>{{- .Inner }}</span> <rp>(</rp><rt {{ with .Get 2 }}lang="{{ . }}"{{ end }}>{{- .Get 0 -}}</rt><rp>)</rp></ruby>{{- "" -}}