3 files changed, 122 insertions, 10 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 0fc84ad..c7feb72 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -23,6 +23,7 @@
 	--global-transition-scale: 1.0; /* transition duration multiplier */
 	--indicator-opacity: 50%; /* opacity of indicators in translations (word type) */
 	--pitch-accent-opacity: 70%; /* opacity of pitch accent indicator in reading field */
+	--reading-expand-transition: calc(300ms * var(--global-transition-scale)); /* hover expand transition duration for multiple readings */
 }
 .mobile #card {
 	--text-block-padding: 0.5em;
@@ -299,8 +300,9 @@ body {
 /* make sure to hide empty fields */
 .parse.empty { display: none !important; }
 
-/* don't break syllables in the reading field on vertical mobile */
-.mobile #card.vertical-layout #back #target-word-reading .reading .syllable { white-space: nowrap; }
+/* don't break syllables in the reading field */
+#card #back #target-word-reading .kanji .writing,
+#card #back #target-word-reading .reading .syllable { white-space: nowrap; }
 
 /* subtile style */
 .subtile {
@@ -431,3 +433,94 @@ body {
 #target-word-translation .indicator .stamp::before,
 #target-word-translation .indicator > *:not(.stamp),
 #target-word-translation .indicator::after { opacity: var(--indicator-opacity); }
+
+/* collapse kanji with multiple writings */
+#back .kanji {
+	display: inline-flex;
+	--writing-padding: 4px;
+	--writing-margin: 4px;
+}
+#back .kanji .writing-separator {
+	display: none;
+}
+#back .kanji .extra-writings .extra-count {
+	transition-property: opacity;
+	transition-duration: var(--reading-expand-transition);
+	opacity: 1;
+	color: white;
+	font-size: 75%;
+	font-weight: bold;
+}
+#back .kanji .extra-writings {
+	transition-property: padding;
+	transition-duration: var(--reading-expand-transition);
+	position: relative;
+	padding: 0 20px;
+}
+#back .kanji .extra-writings::after {
+	content: "";
+	position: absolute;
+	border-radius: 8px;
+	background-color: currentColor;
+	transition-property: inset, opacity;
+	transition-duration: var(--reading-expand-transition);
+	opacity: 80%;
+	inset: 4px 4px;
+	z-index: -1;
+}
+#back .kanji .extra-writings .writing {
+	margin: 0;
+	position: relative;
+	overflow: hidden;
+	transition-property: padding, margin, grid-template-rows, grid-template-columns;
+	transition-duration: var(--reading-expand-transition);
+	display: grid;
+	grid-template-rows: 1fr;
+	grid-template-columns: 0fr;
+}
+#back .kanji .extra-writings .writing .inner {
+	min-height: 0;
+	min-width: 0;
+	position: relative;
+	transition: opacity var(--reading-expand-transition);
+	opacity: 0;
+	left: 50%;
+	transform: translate(-50%, 0%);
+}
+#back .kanji .extra-writings .writing::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background-color: currentColor;
+	transition: opacity var(--reading-expand-transition);
+	opacity: 0;
+	border-radius: 8px;
+}
+
+.extra-writings {
+	position: relative;
+	display: inline-flex;
+}
+.extra-count {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
+#back .kanji .extra-writings {
+	border-radius: 8px;
+	padding: 0 20px;
+}
+
+#back #target-word-reading:hover .kanji .extra-writings .writing {
+	grid-template-columns: 1fr;
+	margin: 0 var(--writing-margin);
+	padding: 0 var(--writing-padding);
+}
+#back #target-word-reading:hover .kanji .extra-writings .writing .inner { opacity: 1; }
+#back #target-word-reading:hover .kanji .extra-writings .extra-count { opacity: 0; }
+#back #target-word-reading:hover .kanji .extra-writings { padding: 0; }
+#back #target-word-reading:hover .kanji .extra-writings::after { inset: 0px 4px; }
+#back #target-word-reading:hover .kanji .extra-writings::after { opacity: 0; }
+#back #target-word-reading:hover .kanji .extra-writings .writing::after { opacity: 20%; }
diff --git a/anki-card-template/card.html b/anki-card-template/card.html
index dbc6028..a3bb81a 100644
--- a/anki-card-template/card.html
+++ b/anki-card-template/card.html
@@ -22,13 +22,13 @@
 
 <div id="card" class="back vertical-layout">
 <div id="front">
-<span id="sentence" class="parse parse-furigana parse-format foreign">[実](じつ)は[今](いま)、この[里](さと)は[水](みず)の{神}(しん){獣}(じゅう)ヴァ・ルッタのせいで[存亡](そんぼう)の[危機](きき)に*[見舞](みま)われておる*ゾヨ\n\*escape\* (<i>test</i>)</span>
+<span id="sentence" class="parse parse-furigana parse-format foreign"></span>
 </div>
 <hr id="separator">
 <div id="back">
-<span id="target-word-reading" class="parse parse-format parse-reading parse-indicators parse-script foreign">見舞われる【み・まわれる】[0] (note)</span>
-<span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators parse-script native">[verb] To experi\ence {crisis}, [な-adj] to <span class="inline spoiler hidden parse">undergo</span>, [テスト] to suffer {test,テスト,test} (this is, a single item)\, and still is here, [ば\-test] but not here</span>
-<span id="sentence-translation" class="parse parse-format native spoiler parse-script hidden">This village is now in danger of *extinction* because of _Vah Ruta_, the water divine beast.</span>
+<span id="target-word-reading" class="parse parse-format parse-reading parse-indicators parse-script foreign">書き方１、書き方２,書き方３【よみ・かた】[0] (note)</span>
+<span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators parse-script native"></span>
+<span id="sentence-translation" class="parse parse-format native spoiler parse-script hidden"></span>
 <span id="tags" class="parse parse-tags">ゼルダの伝説 ブレス・オブ・ザ・ワイルド</span>
 </div>
 
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index 3cc7bee..5e10a6c 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -165,6 +165,9 @@ function parseReading(nodes) {
 		var note_head = 0;
 		var note_tail = 0;
 		var out = ""; // output html
+		var writings = [""];
+		var writingIndex = 0;
+		var mode = "writing"; // parsing mode ("writing" or "reading")
 
 		for (var i = 0; i < input.length; i++) {
 			if (i == 0) {
@@ -182,13 +185,29 @@ function parseReading(nodes) {
 			// ignore note if parsed
 			else if (i == note_head) { i = note_tail - 1; continue; }
 			// reading open bracket
-			if (input[i] == '\u3010') { out += `</span><span class="reading"><span class="bracket">${input[i]}</span><span class="syllable">`; continue; }
+			if (mode == "writing" && input[i] == '\u3010') {
+				mode = "reading";
+				for(let i = 0; i < writings.length; i++) {
+					if (i == 1) out += `<span class="extra-writings">`;
+					if (i > 0) out += `<span class="writing-separator">\u3001</span>`;
+					var classes = ["writing"];
+					if (i == 0) classes.push("first")
+					out += `<span class="${classes.join(' ')}"><span class="inner">${writings[i].trim()}</span></span>`;
+					if (writings.length > 1 && i == writings.length - 1) out += `<span class="extra-count">+${writings.length - 1}</span></span>`;
+				}
+				writings = []; writingIndex = 0;
+				out += `</span><span class="reading"><span class="bracket">${input[i]}</span><span class="syllable">`;
+				continue;
+			}
 			// reading closing bracket
-			if (input[i] == '\u3011') { out += `</span><span class="bracket">${input[i]}</span></span>`; continue; }
+			if (mode == "reading" && input[i] == '\u3011') { out += `</span><span class="bracket">${input[i]}</span></span>`; continue; }
 			// interpunct (syllable separator)
-			if (input[i] == '\u30fb') { out += `</span><span class="syllable-separator">${input[i]}</span><span class="syllable">`; continue; }
+			if (mode == "reading" && input[i] == '\u30fb') { out += `</span><span class="syllable-separator">${input[i]}</span><span class="syllable">`; continue; }
+			// comma (writing separator)
+			if (mode == "writing" && (input[i] == ',' || input[i] == "\u3001")) { writings[++writingIndex] = ""; continue; }
 
-			out += input[i];
+			if (mode == "writing") writings[writingIndex] += input[i];
+			else out += input[i];
 		}
 		return out;
 	});