aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2023-01-20 19:17:14 +0100
committerlonkaars <loek@pipeframe.xyz>2023-01-20 19:17:14 +0100
commitb6eb3e31c635d43e469a721cd5e1641a28dd4162 (patch)
tree70efba713dc29a162a739f8b3ecb2ff8a1248652
parent6a1273bdad422b85521fcb456a35d4d6bf83846b (diff)
vertical mobile reading syllable nowrap
-rw-r--r--anki-card-template/card.css6
-rw-r--r--anki-card-template/card.js5
2 files changed, 9 insertions, 2 deletions
diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 1d18aa5..1abc779 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -90,6 +90,9 @@ body {
padding: 1em 0;
margin: auto 0.5em;
}
+/* mobile spacing */
+.mobile #card.horizontal-layout > * > span,
+.mobile #card.vertical-layout > #back > span { padding: 0 0.5em; }
/* vertical japanese text only in sentence */
#card.vertical-layout #sentence { writing-mode: vertical-rl; }
@@ -168,3 +171,6 @@ 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; }
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index eebe6d1..beffd78 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -53,8 +53,9 @@ HTMLElement.prototype.parse = function() {
if (this.classList.contains("parse-brackets")) {
if (i == 0) { out += `<span class="kanji">`; }
- if (input[i] == '\u3010') { out += `</span><span class="reading">${input[i]}`; continue; }
- if (input[i] == '\u3011') { out += `${input[i]}</span>`; continue; }
+ if (input[i] == '\u3010') { out += `</span><span class="reading"><span class="bracket">${input[i]}</span><span class="syllable">`; continue; }
+ if (input[i] == '\u30fb') { out += `</span><span class="syllable-separator">${input[i]}</span><span class="syllable">`; continue; }
+ if (input[i] == '\u3011') { out += `</span><span class="bracket">${input[i]}</span></span>`; continue; }
}
if (this.classList.contains("parse-tags")) {