final multiple reading support + note position aligned

3 files changed, 21 insertions, 23 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index b3a6e78..2d86e39 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -313,16 +313,15 @@ body {
 
 /* word note style */
 #card #target-word-reading .kanji { position: relative; }
-#card #target-word-reading .note { position: absolute; }
 #card #target-word-reading .note {
-	left: -0.25em;
-	top: 50%;
-	transform: translate(-100%, -50%);
+	line-height: 0;
+	margin: 0;
+	margin-top: 1em;
+	margin-right: 0.25em;
 }
 .mobile #card.vertical-layout #target-word-reading .note {
-	top: -0.25em;
-	left: 50%;
-	transform: translate(-50%, -100%);
+	margin: 0;
+	margin-bottom: 0.5em;
 }
 
 /* definitions */
@@ -440,9 +439,6 @@ body {
 	--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);
@@ -473,6 +469,7 @@ body {
 	transform: translate(-50%, -50%);
 	z-index: -1;
 }
+#back .kanji .extra-writings .writing-separator,
 #back .kanji .extra-writings .writing {
 	margin: 0;
 	position: relative;
@@ -482,12 +479,11 @@ body {
 	width: max-content;
 	display: grid;
 	align-items: center;
-	align-content: center;
 	justify-content: center;
-	/* justify-items: center;*/
 	grid-template-rows: 1fr;
 	grid-template-columns: 0fr;
 }
+#back .kanji .extra-writings .writing-separator .inner,
 #back .kanji .extra-writings .writing .inner {
 	min-height: 0;
 	min-width: 0;
@@ -522,14 +518,12 @@ body {
 	padding: 0 20px;
 }
 
-#back #target-word-reading:hover .kanji .extra-writings .writing {
-	grid-template-columns: 1fr;
-	padding: 0 var(--writing-padding);
-}
+#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 { opacity: 1; }
+#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 .writing::after { opacity: 20%; }
 #back #target-word-reading:hover .kanji .extra-writings { gap: var(--writing-margin); }
 #back #target-word-reading:hover .kanji .extra-writings::after {
 	width: 100%;
@@ -537,6 +531,7 @@ body {
 	opacity: 0;
 }
 
+.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;
@@ -545,3 +540,6 @@ body {
 .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); }
diff --git a/anki-card-template/card.html b/anki-card-template/card.html
index a3bb81a..4829c2b 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"></span>
+<span id="sentence" class="parse parse-furigana parse-format foreign">[実](じつ)は[今](いま)、この[里](さと)は[水](みず)の{神}(しん){獣}(じゅう)ヴァ・ルッタのせいで[存亡](そんぼう)の[危機](きき)に*[見舞](みま)われておる*ゾヨ\n\*escape\* (<i>test</i>)</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"></span>
-<span id="sentence-translation" class="parse parse-format native spoiler parse-script hidden"></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">[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="tags" class="parse parse-tags">ゼルダの伝説 ブレス・オブ・ザ・ワイルド</span>
 </div>
 
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index 5e10a6c..42a982e 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -189,7 +189,7 @@ function parseReading(nodes) {
 				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>`;
+					if (i > 0) out += `<span class="writing-separator"><span class="inner">\u3001</span></span>`;
 					var classes = ["writing"];
 					if (i == 0) classes.push("first")
 					out += `<span class="${classes.join(' ')}"><span class="inner">${writings[i].trim()}</span></span>`;