update word card css, run format

templates/Japanese words/Recognition/back.html

@@ -14,4 +14,8 @@
     {{/VocabAudio}}
     <hr>
     <footer><a href="https://jisho.org/search/{{kanji:text:VocabKanji}}">Jisho</a><a href="https://duckduckgo.com/?q={{kanji:text:VocabKanji}}&iax=images&ia=images&kp=-2&kl=jp-jp">Images</a><a href="http://www.weblio.jp/content/{{kanji:text:VocabKanji}}">Weblio</a><a href="https://wadoku.de/search/?q={{kanji:text:VocabKanji}}">Wadoku</a><a href="https://chan.sankakucomplex.com/post/index?tags={{kanji:text:VocabKanji}} order:popular solo rating:safe">Sankaku</a></footer>
-</div>
+</div>
+
+<script>
+    reformatMultiFurigana();
+</script>

templates/Japanese words/Recognition/front.html

@@ -1,6 +1,6 @@
 <!--
-Simple Word Cards, version 5.0
-Thu Feb  4 01:06:07 AM UTC 2021
+Simple Word Cards, version 6.0
+Fri Feb 24 07:22:23 PM UTC 2023
 -->
 <div class="wrap">
     {{#Tags}}
@@ -50,7 +50,34 @@ Thu Feb  4 01:06:07 AM UTC 2021
         }
     }
 
-    splitTagDiv()
-    highlightNames()
-    applyQuizFont()
+    function formatNewRuby(kanji, readings) {
+        if (readings.length > 1) {
+            return `<ruby>${formatNewRuby(kanji, readings.slice(0, -1))}</ruby><rt>${readings.slice(-1)}</rt>`
+        } else {
+            return `<rb>${kanji}</rb><rt>${readings.join('')}</rt>`
+        }
+    }
+
+    function reformatMultiFurigana() {
+        const separators = /[\s;,.、・。]+/iu;
+        document.querySelectorAll("ruby").forEach(ruby => {
+            try {
+                const kanji = (ruby.querySelector("rb") || ruby.firstChild).textContent.trim()
+                const readings = ruby.querySelector("rt").textContent
+                    .split(separators)
+                    .map(str => str.trim())
+                    .filter(str => str.length)
+                if (readings.length > 1) {
+                    ruby.innerHTML = formatNewRuby(kanji, readings)
+                }
+            } catch (error) {
+                console.error(error);
+            }
+        })
+    }
+
+    splitTagDiv();
+    highlightNames();
+    applyQuizFont();
+    reformatMultiFurigana();
 </script>

templates/Japanese words/template.css

@@ -90,6 +90,7 @@ ruby rt {
         display: flex;
         justify-content: center;
     }
+
     .wrap {
         width: 800px;
         padding: 0 5px 0;
@@ -98,6 +99,7 @@ ruby rt {
         border-right: 1px solid #c9bcbc;
         min-height: 100vh;
     }
+
     .wrap .wrap {
         width: auto;
         padding: 0;
@@ -112,6 +114,7 @@ a {
     color: #532f2f;
     text-decoration: none;
 }
+
 a:hover {
     color: #722a2a;
 }
@@ -122,9 +125,11 @@ header {
     display: flex;
     clear: both;
 }
-header > div:not(:last-child) {
+
+header>div:not(:last-child) {
     margin-right: 3px;
 }
+
 header .tags {
     border-radius: 0px 0px 3px 3px;
 }
@@ -145,10 +150,12 @@ header .tags {
         Georgia,
         Serif;
 }
+
 .japanese {
     text-align: center;
     font-size: 40px;
 }
+
 .definition,
 .notes {
     text-align: left;
@@ -156,10 +163,12 @@ header .tags {
     line-height: 1.5;
     font-weight: 300;
 }
+
 .pronunciation {
     text-align: center;
     margin: 8px 0;
 }
+
 .pronunciation br {
     display: none;
 }
@@ -187,9 +196,12 @@ hr {
     grid-auto-columns: minmax(100px, 1fr);
     grid-auto-rows: minmax(100px, auto);
 }
-.images br, .images > * {
+
+.images br,
+.images>* {
     display: none;
 }
+
 .images img {
     display: block;
     border-radius: 4px;
@@ -197,14 +209,17 @@ hr {
     max-width: 100%;
     max-height: 95vh;
 }
+
 .images img:nth-child(3n+1) {
-  grid-column: 1;
+    grid-column: 1;
 }
+
 .images img:nth-child(3n+2) {
-  grid-column: 2;
+    grid-column: 2;
 }
+
 .images img:nth-child(3n+3) {
-  grid-column: 3;
+    grid-column: 3;
 }
 
 /* Footer */
@@ -213,13 +228,15 @@ footer {
     font-size: 16px;
     text-align: center;
 }
-footer > a:after {
+
+footer>a:after {
     content: "·";
     color: brown;
     display: inline-block;
     width: 6px;
 }
-footer > a:last-child:after {
+
+footer>a:last-child:after {
     content: "";
     width: 0;
 }
@@ -256,10 +273,12 @@ footer > a:last-child:after {
     margin-right: 3px;
     text-decoration: none;
 }
+
 .replaybutton span {
     padding: 0;
     font-size: 16px;
 }
+
 .replaybutton span svg {
     fill: #fffaf0;
     background: #333;
@@ -275,13 +294,16 @@ a.replay-button {
     top: -0.125em;
     position: relative;
 }
+
 a.replay-button svg {
     height: 1em;
     width: 1em;
 }
+
 a.replay-button svg path {
     fill: #fffaf0;
 }
+
 a.replay-button svg circle {
     fill: #333;
 }
@@ -295,17 +317,21 @@ ol {
     margin: 0px;
     padding: 0px;
 }
-ul li + li,
-ol li + li {
+
+ul li+li,
+ol li+li {
     margin-block-start: 0.33em;
 }
-.pronunciation ol > li {
+
+.pronunciation ol>li {
     display: inline;
 }
-.pronunciation ol > li:after {
+
+.pronunciation ol>li:after {
     content: "・";
 }
-.pronunciation ol > li:last-child:after {
+
+.pronunciation ol>li:last-child:after {
     content: "";
 }
 
@@ -343,7 +369,7 @@ ol li + li {
     color: #a33327;
 }
 
-.nightMode .images > img {
+.nightMode .images>img {
     filter: sepia(0%);
 }
 
@@ -353,6 +379,7 @@ ol li + li {
     opacity: 0.15;
     transition: opacity 0.15s;
 }
+
 .japanese.question:hover ruby rt {
     opacity: 1;
 }