From b6eb3e31c635d43e469a721cd5e1641a28dd4162 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Fri, 20 Jan 2023 19:17:14 +0100
Subject: vertical mobile reading syllable nowrap

---
 anki-card-template/card.css | 6 ++++++
 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")) {
-- 
cgit v1.2.3