From 8b895683e2f2eb567c16d77c3c97a3d0a6b2c111 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Thu, 19 Jan 2023 22:16:30 +0100 Subject: css and parser updates --- anki-card-template/card.css | 33 +++++++++++++--------- anki-card-template/card.html | 16 ++++++++--- anki-card-template/card.js | 67 ++++++++++++++++++++++++++------------------ 3 files changed, 71 insertions(+), 45 deletions(-) diff --git a/anki-card-template/card.css b/anki-card-template/card.css index 6522a83..ed68b6f 100644 --- a/anki-card-template/card.css +++ b/anki-card-template/card.css @@ -1,4 +1,14 @@ -body { margin: 0; } +body { + margin: 0; + width: 100vw; + height: 100vh; +} + +body { + display: flex; + flex-direction: column; + justify-content: center; +} .mobile #card .foreign { font-size: 1.75rem; } .mobile #card .native { font-size: 1.25rem; } @@ -7,7 +17,7 @@ body { margin: 0; } #card .native { font-size: 1.0rem; } #card { text-align: center; } -#card span { display: block; } +#card > * > span { display: block; } #separator { border: none; @@ -28,7 +38,7 @@ body { margin: 0; } display: none; } -#sentence-translation { margin-top: 1em; } +#card #back #sentence-translation { margin-top: 2em; } .spoiler { transition: filter 300ms; @@ -37,12 +47,12 @@ body { margin: 0; } .spoiler.hidden { filter: blur(0.3rem); } .spoiler.visible { filter: blur(0rem); } +#card.horizontal-layout { width: 100vw; } +#card.vertical-layout { height: 100vh; } #card.vertical-layout > * { grid-row: 1; } #card.vertical-layout { display: grid; grid-auto-columns: 1fr auto auto; - height: 100vh; - overflow: hidden; } #card.vertical-layout #back { flex-direction: column; } #card.vertical-layout #back, @@ -55,8 +65,8 @@ body { margin: 0; } #card.vertical-layout #separator { grid-column: 2; } #card.vertical-layout #front { grid-column: 3; } -#card.horizontal-layout span, -#card.vertical-layout #back span { +#card.horizontal-layout > * > span, +#card.vertical-layout > #back > span { padding: 0 1em; margin: 0.5em auto; } @@ -66,10 +76,9 @@ body { margin: 0; } margin: auto 0.5em; } -#card.vertical-layout #sentence { - writing-mode: vertical-rl; -} +#card.vertical-layout #sentence { writing-mode: vertical-rl; } +#card.vertical-layout #sentence { max-height: 30em; } #card.horizontal-layout span, #card.vertical-layout #back span { max-width: 30em; @@ -77,7 +86,5 @@ body { margin: 0; } margin-right: auto; } -#card.vertical-layout #sentence { - max-height: 30em; -} +#card.vertical-layout #target-word-reading .reading { display: block; } diff --git a/anki-card-template/card.html b/anki-card-template/card.html index 69edc1d..07f02c9 100644 --- a/anki-card-template/card.html +++ b/anki-card-template/card.html @@ -10,25 +10,33 @@ background-color: black; color: white; } + #dev-buttons { + position: fixed; + left: 0; + bottom: 0; + margin: 1em; + }

-[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (test) +[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (test)

-立つ【た・つ】 -To stand - +立つ【た・つ】 +To stand +

diff --git a/anki-card-template/card.js b/anki-card-template/card.js index d86ac87..03cd1ae 100644 --- a/anki-card-template/card.js +++ b/anki-card-template/card.js @@ -1,5 +1,8 @@ -function parseSentence(input) { +HTMLElement.prototype.parse = function() { + if (this.classList.contains("parsed")) return; // ignore already parsed elements + var input = this.innerHTML; var bold = false; // currently bold + var italic = false; // currently italic var mode = "normal"; // normal, kanji, reading var out = ""; // output html @@ -8,30 +11,43 @@ function parseSentence(input) { var reading = ""; // current kanji reading for (var i = 0; i < input.length; i++) { - // escape characters preceded by \ - if (input[i] == "\\") { - var escaped = input[i+1]; - if (escaped == "n") escaped = "
"; // newline - out += escaped; i++; continue; + if (this.classList.contains("parse-format")) { + // escape characters preceded by \ + if (input[i] == "\\") { + var escaped = input[i+1]; + if (escaped == "n") escaped = "
"; // newline + if (escaped == "t") escaped = "\t"; // tab + out += escaped; i++; continue; + } + // parse *test* into test + if (input[i] == "*") { bold = !bold; out += `<${bold ? "" : "/"}b>`; continue; } + // parse _test_ into test + if (input[i] == "_") { italic = !italic; out += `<${italic ? "" : "/"}i>`; continue; } } - // parse *test* into test - if (input[i] == "*") { bold = !bold; out += `<${bold ? "" : "/"}b>`; continue; } - // parse [kanji](reading) into ruby text - // [kanji](reading) is only visible on card back - // {kanji}(reading) is always visible - if (mode == "normal" && input[i] == "[") // hidden reading kanji open + if (this.classList.contains("parse-furigana")) { + // parse [kanji](reading) into ruby text + // [kanji](reading) is only visible on card back + // {kanji}(reading) is always visible + if (mode == "normal" && input[i] == "[") // hidden reading kanji open { kanji = ""; mode = "kanji"; alwaysvisisble = false; continue; } - if (mode == "normal" && input[i] == "{") // always visible reading kanji open + if (mode == "normal" && input[i] == "{") // always visible reading kanji open { kanji = ""; mode = "kanji"; alwaysvisisble = true; continue; } - if (mode == "kanji" && input[i] == "]") continue; // hidden reading kanji close - if (mode == "kanji" && input[i] == "}") continue; // always visible reading kanji close - if (mode == "kanji" && kanji.length > 0 && input[i] == "(") // reading open + if (mode == "kanji" && input[i] == "]") continue; // hidden reading kanji close + if (mode == "kanji" && input[i] == "}") continue; // always visible reading kanji close + if (mode == "kanji" && kanji.length > 0 && input[i] == "(") // reading open { reading = ""; mode = "reading"; continue; } - if (mode == "reading" && input[i] == ")") { // reading close - mode = "normal"; - out += `${kanji}${reading}`; - continue; + if (mode == "reading" && input[i] == ")") { // reading close + mode = "normal"; + out += `${kanji}${reading}`; + continue; + } + } + + if (this.classList.contains("parse-brackets")) { + if (i == 0) { out += `` } + if (input[i] == '\u3010') { out += `${input[i]}`; continue; } + if (input[i] == '\u3011') { out += `${input[i]}`; continue; } } // add current character to selected mode buffer @@ -40,7 +56,8 @@ function parseSentence(input) { if (mode == "reading") reading += input[i]; } - return out; + this.innerHTML = out; + this.classList.add("parsed"); } function layout() { @@ -56,13 +73,7 @@ function layout() { } function run() { - // parse all elements with class parse - for (var el of document.getElementsByClassName("parse")) { - if (el.classList.contains("parsed")) continue; // ignore already parsed elements - el.innerHTML = parseSentence(el.innerHTML); // parse - el.classList.remove("parse"); // mark as parsed - el.classList.add("parsed"); - } + for (var el of document.getElementsByClassName("parse")) el.parse(); // toggle spoiler by clicking for (var el of document.getElementsByClassName("spoiler")) { -- cgit v1.2.3