aboutsummaryrefslogtreecommitdiff
path: root/anki-card-template
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2023-01-19 22:16:30 +0100
committerlonkaars <loek@pipeframe.xyz>2023-01-19 22:16:30 +0100
commit8b895683e2f2eb567c16d77c3c97a3d0a6b2c111 (patch)
tree2f28827920252bcc375ad0c93dab3a25d8a83f45 /anki-card-template
parent63db70b0d0d48fa28f1028ba08193c31e752fdf0 (diff)
css and parser updates
Diffstat (limited to 'anki-card-template')
-rw-r--r--anki-card-template/card.css33
-rw-r--r--anki-card-template/card.html16
-rw-r--r--anki-card-template/card.js67
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;
+ }
</style>
</head>
<body>
<div id="card" class="back vertical-layout">
<div id="front">
-<span id="sentence" class="parse foreign">[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (<i>test</i>)</span>
+<span id="sentence" class="parse parse-furigana parse-format foreign">[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (<i>test</i>)</span>
</div>
<hr id="separator">
<div id="back">
-<span id="target-word-reading" class="foreign">立つ【た・つ】</span>
-<span id="target-word-translation" class="native">To stand</span>
-<span id="sentence-translation" class="native spoiler hidden">Before my eyes stood Alice, butt-naked.</span>
+<span id="target-word-reading" class="parse parse-format parse-brackets foreign">立つ【た・つ】</span>
+<span id="target-word-translation" class="parse parse-format native">To stand</span>
+<span id="sentence-translation" class="parse parse-format native spoiler hidden">Before my eyes stood Alice, _butt-naked_.</span>
</div>
</div>
+<div id="dev-buttons">
<button onclick="document.getElementById('card').classList.toggle('back'); document.getElementById('card').classList.toggle('front')">toggle view</button>
<button onclick="document.getElementById('card').classList.toggle('horizontal-layout'); document.getElementById('card').classList.toggle('vertical-layout')">toggle layout</button>
<button onclick="document.body.classList.toggle('nightMode')">toggle dark</button>
+</div>
</span>
</html>
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 = "<br>"; // 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 = "<br>"; // newline
+ if (escaped == "t") escaped = "\t"; // tab
+ out += escaped; i++; continue;
+ }
+ // parse *test* into <b>test</b>
+ if (input[i] == "*") { bold = !bold; out += `<${bold ? "" : "/"}b>`; continue; }
+ // parse _test_ into <i>test</i>
+ if (input[i] == "_") { italic = !italic; out += `<${italic ? "" : "/"}i>`; continue; }
}
- // parse *test* into <b>test</b>
- 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 += `<ruby>${kanji}<rt class="${alwaysvisisble ? 'visible' : 'hidden'}">${reading}</rt></ruby>`;
- continue;
+ if (mode == "reading" && input[i] == ")") { // reading close
+ mode = "normal";
+ out += `<ruby>${kanji}<rt class="${alwaysvisisble ? 'visible' : 'hidden'}">${reading}</rt></ruby>`;
+ continue;
+ }
+ }
+
+ 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; }
}
// 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")) {