diff options
| author | lonkaars <loek@pipeframe.xyz> | 2023-01-20 19:17:14 +0100 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2023-01-20 19:17:14 +0100 |
| commit | b6eb3e31c635d43e469a721cd5e1641a28dd4162 (patch) | |
| tree | 70efba713dc29a162a739f8b3ecb2ff8a1248652 | |
| parent | 6a1273bdad422b85521fcb456a35d4d6bf83846b (diff) | |
vertical mobile reading syllable nowrap
| -rw-r--r-- | anki-card-template/card.css | 6 | ||||
| -rw-r--r-- | anki-card-template/card.js | 5 |
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")) { |