aboutsummaryrefslogtreecommitdiff
path: root/anki-card-template
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2023-01-26 09:52:08 +0100
committerlonkaars <loek@pipeframe.xyz>2023-01-26 09:52:08 +0100
commitf0a3122d720f3f959e465b7b40e8338d6f62829b (patch)
treef51dbb226d254ed3113412305f15bfe907e56de6 /anki-card-template
parent0456e3813e84378f2bb8cece6ce3d0b9a9bb7d29 (diff)
inline spoilers, indicator stamps, and smaller japanese in indicators
Diffstat (limited to 'anki-card-template')
-rw-r--r--anki-card-template/card.css49
-rw-r--r--anki-card-template/card.html2
-rw-r--r--anki-card-template/card.js16
3 files changed, 61 insertions, 6 deletions
diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 5e1f87d..574b560 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -11,7 +11,7 @@
--tag-font-size: 80%; /* font size for card tags */
--subtile-font-size: 75%; /* font size for subtile style (notes, curly braces in translations) */
--subtile-opacity: 50%; /* font opacity for subtile style */
- --reading-kana-font-size: 1rem; /* font size of kana in reading field */
+ --reading-kana-font-size: var(--native-font-size); /* font size of kana in reading field */
--native-font-size: 1.0rem; /* font size for generic native (latin) text */
--foreign-font-size: 1.5rem; /* font size for generic foreign (japanese) text */
--definition-spacing: 0.75em; /* definition spacing (mobile vertical only) */
@@ -21,7 +21,7 @@
}
.mobile #card {
--text-block-padding: 0.5em;
- --native-font-size: 1.25rem;
+ --native-font-size: 1.10rem;
--foreign-font-size: 1.75rem;
}
@@ -101,8 +101,19 @@ body {
.spoiler.hidden .inner { filter: blur(0.6rem); }
.spoiler.visible .inner { filter: blur(0rem); }
.spoiler .outer::after { transition: backdrop-filter var(--spoiler-transition); }
-.spoiler.hidden .outer::after { backdrop-filter: contrast(80%); }
+.spoiler.hidden .outer::after { backdrop-filter: contrast(70%); }
.spoiler.visible .outer::after { backdrop-filter: contrast(100%); }
+/* inline spoilers */
+.spoiler.inline {
+ overflow: hidden;
+ border-radius: 4px;
+ display: inline-block;
+ vertical-align: text-bottom;
+}
+.spoiler.inline .outer {
+ padding: 0;
+ display: inline;
+}
/* fill display horizontally or vertically */
@@ -292,5 +303,37 @@ body {
margin: 0 0.25em;
border-radius: 4px;
border: 1.2pt solid currentColor;
+ vertical-align: middle;
}
#target-word-translation .indicator { opacity: 50%; }
+.indicator .script-japanese {
+ font-size: 90%;
+ vertical-align: middle;
+}
+.indicator .stamp * { line-height: 0; }
+.indicator:has(.stamp) > *:not(.stamp) { vertical-align: middle; }
+.indicator:has(.stamp) {
+ padding-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+}
+.indicator .stamp {
+ padding: 2px 4px;
+ margin: 1px;
+ margin-right: 3px;
+ border-radius: 2px;
+ font-weight: bold;
+ font-size: 90%;
+ vertical-align: top;
+ display: inline-block;
+}
+
+.indicator .stamp {
+ background-color: black;
+ color: white;
+}
+.night_mode .indicator .stamp {
+ background-color: white;
+ color: black;
+}
+
diff --git a/anki-card-template/card.html b/anki-card-template/card.html
index 61e396c..825db5d 100644
--- a/anki-card-template/card.html
+++ b/anki-card-template/card.html
@@ -27,7 +27,7 @@
<hr id="separator">
<div id="back">
<span id="target-word-reading" class="parse parse-format parse-reading parse-indicators parse-script foreign">見舞われる[0]【み・まわれる】(note)</span>
-<span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators parse-script native">[verb] To experi\ence {crisis}, to undergo, to suffer {test,テスト,test} (this is, a single item)\, and still is here, but not here</span>
+<span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators parse-script native">[verb] To experi\ence {crisis}, [な-adj] to <span class="inline spoiler hidden parse">undergo</span>, [テスト] to suffer {test,テスト,test} (this is, a single item)\, and still is here, [ば\-test] but not here</span>
<span id="sentence-translation" class="parse parse-format native spoiler parse-script 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 b538664..f723d76 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -88,6 +88,8 @@ function parseIndicators(nodes) {
var input = node.data;
var indicator = false; // indicator is open
+ var content = ""; // indicator content
+ var stamp = ""; // filled if indicator has stamp
var out = "";
for (var i = 0; i < input.length; i++) {
// escape characters preceded by \
@@ -95,12 +97,22 @@ function parseIndicators(nodes) {
var escaped = input[i+1];
if (escaped == "[") { out += "["; i++; continue; }
if (escaped == "]") { out += "]"; i++; continue; }
+ if (escaped == "-" && indicator) { content += "-"; i++; continue; }
}
if (input[i] == "[") { indicator = true; out += `<span class="indicator">`; continue; }
- if (input[i] == "]" && indicator) { indicator = false; out += `</span>`; continue; }
+ if (input[i] == "]" && indicator) {
+ indicator = false;
+ if (stamp) out += `<span class="stamp">${stamp}</span>`;
+ out += `${content}</span>`;
+ content = "";
+ stamp = "";
+ continue;
+ }
+ if (input[i] == "-" && indicator) { stamp = content; content = ""; continue; }
- out += input[i];
+ if (indicator) content += input[i];
+ else out += input[i];
}
node.data = out;
}