make latin numerals and some punctuation horizontal in vertical japanese

4 files changed, 51 insertions, 7 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 857fb8b..eda0f6c 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -562,3 +562,9 @@ rt { user-select: none; }
 #card { color-scheme: light; }
 .night_mode #card { color-scheme: dark; }
 
+/* horizontal numbers and punctuation in single kana space in vertical japanese */
+#card.vertical-layout #sentence .horizontal-in-vertical { writing-mode: horizontal-tb; }
+.squeeze {
+	transform: translateX(calc(var(--self-height) / 2 * -1px)) scaleX(calc(var(--self-height) / var(--self-width)));
+	width: 0;
+}
diff --git a/anki-card-template/card.html b/anki-card-template/card.html
index 4829c2b..5e17eb9 100644
--- a/anki-card-template/card.html
+++ b/anki-card-template/card.html
@@ -22,7 +22,7 @@
 
 <div id="card" class="back vertical-layout">
 <div id="front">
-<span id="sentence" class="parse parse-furigana parse-format foreign">[実](じつ)は[今](いま)、この[里](さと)は[水](みず)の{神}(しん){獣}(じゅう)ヴァ・ルッタのせいで[存亡](そんぼう)の[危機](きき)に*[見舞](みま)われておる*ゾヨ\n\*escape\* (<i>test</i>)</span>
+<span id="sentence" class="parse parse-furigana parse-format parse-script foreign">[実](じつ)は[今](いま)、この[里](さと)は[水](みず)の{神}(しん){獣}(じゅう)ヴァ・ルッタのせいで[存亡](そんぼう)の[危機](きき)に*[見舞](みま)われておる*ゾヨ\n\*escape\* (<i>test</i>)</span>
 </div>
 <hr id="separator">
 <div id="back">
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index 2f1dbfb..81471a7 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -14,6 +14,21 @@ function charNotJapanese(input) {
 	return true;
 }
 
+function charNotNumeric(input) {
+	var code = input.charCodeAt(0);
+	if (0x30 <= code && code <= 0x39) return false; // ascii numbers
+	return true;
+}
+
+function charNotPunctuation(input) {
+	var code = input.charCodeAt(0);
+	if (0x20 == code) return false; // space
+	if (0x21 == code) return false; // exclamation mark
+	if (0x2e == code) return false; // full stop
+	if (0x3f == code) return false; // question mark
+	return true;
+}
+
 function calculateTagHue(input) {
 	var out = 0;
 	for (var i = 0; i < input.length; i++)
@@ -282,22 +297,38 @@ function parseScript(nodes) {
 	return parseOnTextOnly(nodes, input => {
 		if (input.length == 0) return input;
 
+		var numberOnly = true;
+		var punctuationOnly = true;
+		var script = "unknown";
 		var lastScript = "unknown";
 		var out = "";
+		var buffer = "";
+		function flush() {
+			var classes = [`script-${lastScript}`];
+			if (numberOnly) classes.push("number-only");
+			if (punctuationOnly) classes.push("punctuation-only");
+			if (numberOnly || punctuationOnly) classes.push("horizontal-in-vertical");
+			out += `<span class="${classes.join(" ")}">${buffer}</span>`;
+			buffer = "";
+			numberOnly = true;
+			punctuationOnly = true;
+		}
 		for (var i = 0; i < input.length; i++) {
-			var script = "unknown";
 			if (input[i] != " ") {
 				if (!charNotJapanese(input[i])) script = "japanese";
 				if (!charNotLatin(input[i])) script = "latin";
 			}
 
-			if (i == 0) out += `<span class="script-${script}">`;
-			else if (script != lastScript) out += `</span><span class="script-${script}">`;
+			if (i != 0 && script != lastScript) flush();
 
-			out += input[i];
+			if (charNotNumeric(input[i])) numberOnly = false;
+			if (charNotPunctuation(input[i])) punctuationOnly = false;
+
+			buffer += input[i];
 			lastScript = script;
 		}
-		return out + "</span>";
+		flush();
+		return out;
 	});
 }
 
@@ -343,6 +374,13 @@ HTMLElement.prototype.parse = function() {
 	this.innerHTML = nodes.map(n => n.data).join("");
 	if (this.id == "sentence" && this.has(n => n.tagName == "B")) this.classList.add("has-b");
 	if (this.id == "target-word-translation" && this.has(n => n.classList.contains("script-latin"))) this.classList.add("has-script-latin");
+
+	for (var el of this.getElementsByClassName("horizontal-in-vertical")) {
+		var size = el.getBoundingClientRect();
+		el.style.setProperty("--self-width", size.width);
+		el.style.setProperty("--self-height", size.height);
+		if (size.width > size.height) el.classList.add("squeeze");
+	}
 };
 
 function layout() {
diff --git a/anki-card-template/template.html.m4 b/anki-card-template/template.html.m4
index d3aba5d..88e1f68 100644
--- a/anki-card-template/template.html.m4
+++ b/anki-card-template/template.html.m4
@@ -5,7 +5,7 @@ include(`common.m4')dnl
 
 <div id="card" class="CARD_SIDE() vertical-layout">
 <div id="front">
-<span id="sentence" class="parse parse-furigana parse-format foreign">{{Complete sentence}}</span>
+<span id="sentence" class="parse parse-furigana parse-format parse-script foreign">{{Complete sentence}}</span>
 </div>
 <hr id="separator">
 <div id="back">