2 files changed, 27 insertions, 26 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 2d86e39..2f6edaa 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -501,45 +501,41 @@ body {
 	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 {
+	position: relative;
+	display: inline-flex;
 	border-radius: 8px;
 	padding: 0 20px;
 }
 
+/* multiple writings hover/hold expand */
 #back #target-word-reading:hover .kanji .extra-writings .writing,
 #back #target-word-reading:hover .kanji .extra-writings .writing-separator { grid-template-columns: 1fr; }
 #back #target-word-reading:hover .kanji .extra-writings .extra-count { opacity: 0; }
 #back #target-word-reading:hover .kanji .extra-writings .writing .inner,
 #back #target-word-reading:hover .kanji .extra-writings .writing-separator .inner { opacity: 1; }
 #back #target-word-reading:hover .kanji .extra-writings { padding: 0; }
-#back #target-word-reading:hover .kanji .extra-writings { gap: var(--writing-margin); }
 #back #target-word-reading:hover .kanji .extra-writings::after {
 	width: 100%;
 	height: 100%;
 	opacity: 0;
 }
 
+/* multiple writings as tags (vertical mobile layout only) */
 .mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings .writing::after { opacity: 20%; }
 .mobile #card.vertical-layout #back .kanji,
-.mobile #card.vertical-layout #back .kanji .extra-writings {
-	flex-direction: column;
-	padding: 0.5em 0;
-}
+.mobile #card.vertical-layout #back .kanji .extra-writings { flex-direction: column; }
+.mobile #card.vertical-layout #back .kanji { padding-top: 0.5em; }
+.mobile #card.vertical-layout #back .kanji .extra-writings { padding: 0.5em 0; }
 .mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings { padding: 0; }
 .mobile #card.vertical-layout #back .kanji .extra-writings .writing { grid-template-rows: 0fr; }
 .mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings .writing { grid-template-rows: 1fr; }
-
 .mobile #card.vertical-layout #back .kanji .writing-separator { display: none; }
 .mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings .writing { padding: 0 var(--writing-padding); }
+.mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings { gap: var(--writing-margin); }
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index 42a982e..3b94d2d 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -291,28 +291,33 @@ function setSpoiler(nodes) {
 	return HTMLtoParseArr(`<span class="outer"><span class="inner">` + nodes.map(n => n.data).join("") + "</span></span>");
 }
 
-HTMLElement.prototype.parse = function() {
-	if (this.classList.contains("parsed")) return; // ignore already parsed elements
-	var input = this.innerHTML; // get raw data from anki field
+function parse(input, classes) {
 	var nodes = HTMLtoParseArr(input); // seperate user text from html formatting (keep html intact)
 
 	// parsers
-	if (this.classList.contains("parse-format")) nodes = parseFormat(nodes);
-	if (this.classList.contains("parse-furigana")) nodes = parseFurigana(nodes);
-	if (this.classList.contains("parse-reading")) nodes = parseReading(nodes);
-	if (this.classList.contains("parse-indicators")) nodes = parseIndicators(nodes);
-	if (this.classList.contains("parse-tags")) nodes = parseTags(nodes);
-	if (this.classList.contains("parse-definitions")) nodes = parseDefinitions(nodes);
-	if (this.classList.contains("parse-script")) nodes = parseScript(nodes);
-	if (this.classList.contains("spoiler")) nodes = setSpoiler(nodes);
-
-	// join parsed text with unmodified html
+	if (classes.includes("parse-format")) nodes = parseFormat(nodes);
+	if (classes.includes("parse-furigana")) nodes = parseFurigana(nodes);
+	if (classes.includes("parse-reading")) nodes = parseReading(nodes);
+	if (classes.includes("parse-indicators")) nodes = parseIndicators(nodes);
+	if (classes.includes("parse-tags")) nodes = parseTags(nodes);
+	if (classes.includes("parse-definitions")) nodes = parseDefinitions(nodes);
+	if (classes.includes("parse-script")) nodes = parseScript(nodes);
+	if (classes.includes("spoiler")) nodes = setSpoiler(nodes);
+
+	return nodes;
+};
+
+HTMLElement.prototype.parse = function() {
+	if (this.classList.contains("parsed")) return; // ignore already parsed elements
+
+	var nodes = parse(this.innerHTML, Array.from(this.classList));
+
 	var out = nodes.map(n => n.data).join("");
 	this.innerHTML = out;
 	this.classList.add("parsed");
 	if (nodes.reduce((current, n) => current + (n.type == "text" ? n.data.length : 0), 0) == 0)
 		this.classList.add("empty"); // if innerHTML only contains empty html (no 'user' text)
-};
+}
 
 function layout() {
 	// set vertical layout on vertical displays (primarily mobile screens)