add parse-indicator class

3 files changed, 48 insertions, 10 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index f9cdb5f..fdf2bae 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -132,9 +132,9 @@ body {
 #card.vertical-layout #sentence { writing-mode: vertical-rl; }
 
 /* max text column width (~30 characters in japanese, ~50 in latin) */
-#card.vertical-layout #sentence { max-height: var(--max-column-width); }
-#card.horizontal-layout span,
-#card.vertical-layout #back span {
+#card.vertical-layout > #front > #sentence { max-height: var(--max-column-width); }
+#card.horizontal-layout > * > span,
+#card.vertical-layout > #back > span {
 	max-width: var(--max-column-width);
 	margin-left: auto;
 	margin-right: auto;
@@ -192,6 +192,7 @@ body {
 	min-width: 0;
 	user-select: none;
 	cursor: default;
+	margin: 0 auto;
 }
 
 /* tag hover/hold expand */
@@ -270,3 +271,13 @@ body {
 	background-color: currentColor;
 	transform: translateX(-100%);
 }
+
+/* indicator (pitch accent or word type) */
+.indicator {
+	display: inline-block;
+	padding: 1px 4px;
+	margin: 0 0.25em;
+	border-radius: 3px;
+	border: 1px solid currentColor;
+}
+#target-word-translation .indicator { opacity: 50%; }
diff --git a/anki-card-template/card.html b/anki-card-template/card.html
index 2b8f6ce..103b47e 100644
--- a/anki-card-template/card.html
+++ b/anki-card-template/card.html
@@ -26,8 +26,8 @@
 </div>
 <hr id="separator">
 <div id="back">
-<span id="target-word-reading" class="parse parse-format parse-brackets foreign">見舞われる[0]【み・まわれる】(note)</span>
-<span id="target-word-translation" class="parse parse-format parse-definitions native">[verb] To experience {crisis}, to undergo, to suffer</span>
+<span id="target-word-reading" class="parse parse-format parse-reading parse-indicators foreign">見舞われる[0]【み・まわれる】(note)</span>
+<span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators native">[verb] To experi\ence {crisis}, to undergo, to suffer</span>
 <span id="sentence-translation" class="parse parse-format native spoiler hidden">This village is now in danger of *extinction* because of _Vah Ruta_, the water divine beast.</span>
 <span id="tags" class="parse parse-tags">ゼルダの伝説 ブレス・オブ・ザ・ワイルド</span>
 </div>
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index 6c2d703..422c28f 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -68,9 +68,10 @@ function parseFormat(nodes) {
 			// escape characters preceded by \
 			if (input[i] == "\\") {
 				var escaped = input[i+1];
-				if (escaped == "n") escaped = "<br>"; // newline
-				if (escaped == "t") escaped = "\t"; // tab
-				out += escaped; i++; continue;
+				if (escaped == "n") { out += "<br>"; i++; continue; } // newline
+				if (escaped == "t") { out += "\t"; i++; continue; } // tab
+				if (escaped == "*") { out += "*"; i++; continue; } // tab
+				if (escaped == "_") { out += "_"; i++; continue; } // tab
 			}
 			// parse *test* into <b>test</b>
 			if (input[i] == "*") { bold = !bold; out += `<${bold ? "" : "/"}b>`; continue; }
@@ -84,6 +85,31 @@ function parseFormat(nodes) {
 	return HTMLtoParseArr(nodes.map(n => n.data).join("")); // re-parse for newly created html
 }
 
+function parseIndicators(nodes) {
+	for (var node of nodes) {
+		if (node.type == "html") continue;
+
+		var input = node.data;
+		var indicator = false; // indicator is open
+		var out = "";
+		for (var i = 0; i < input.length; i++) {
+			// escape characters preceded by \
+			if (input[i] == "\\") {
+				var escaped = input[i+1];
+				if (escaped == "[") { out += "["; i++; continue; }
+				if (escaped == "]") { out += "]"; i++; continue; }
+			}
+
+			if (input[i] == "[") { indicator = true; out += `<span class="indicator">`; continue; }
+			if (input[i] == "]" && indicator) { indicator = false; out += `</span>`; continue; }
+
+			out += input[i];
+		}
+		node.data = out;
+	}
+	return HTMLtoParseArr(nodes.map(n => n.data).join("")); // re-parse for newly created html
+}
+
 function parseFurigana(nodes) {
 	for (var node of nodes) {
 		if (node.type == "html") continue;
@@ -123,7 +149,7 @@ function parseFurigana(nodes) {
 	return HTMLtoParseArr(nodes.map(n => n.data).join("")); // re-parse for newly created html
 }
 
-function parseBrackets(nodes) {
+function parseReading(nodes) {
 	for (var node of nodes) {
 		if (node.type == "html") continue;
 
@@ -187,7 +213,8 @@ HTMLElement.prototype.parse = function() {
 	// parsers
 	if (this.classList.contains("parse-format")) nodes = parseFormat(nodes);
 	if (this.classList.contains("parse-furigana")) nodes = parseFurigana(nodes);
-	if (this.classList.contains("parse-brackets")) nodes = parseBrackets(nodes);
+	if (this.classList.contains("parse-reading")) nodes = parseReading(nodes);
+	if (this.classList.contains("parse-indicators")) nodes = parseIndicators(nodes);
 	if (this.classList.contains("parse-tags")) nodes = parseTags(nodes);
 	if (this.classList.contains("parse-definitions")) nodes = parseDefinitions(nodes);