I am editing the template of an Anki deck, which uses HTML and CSS. What I would like to do here is on the front side, vertically aligning the Japanese character to the middle and the hint to the bottom. I tried manually spacing everything with
, but then it doesn't work in different resolution windows (and is just a dirty solution) Front example.
On the back side I would like to make the stroke diagram always snap to the top, the Japanese character with keyword and mnemonic in the middle, and the rest on the bottom. If I tried spacing this with
I would get the same problem as on the front page, plus the mnemonic is sometimes 1 line, but can also be 5+ lines so it would have to be aligned dynamically to work even if the window size was always the same Back example with arrows.
I already found this question which seems to somewhat answer my question, but as I know practically nothing about CSS/HTML I don't know how to apply it in my case. If you could help me I would greatly appreciate it as I spend a lot of time with this deck and it keeps annoying me, I would also share the improved version for other people to use.
Here is the code for the front
{{kanji}}
{{hint:Memory palace}}
back
{{strokeDiagram}}
{{kanji}}
{{myStory}}
Memory palace: {{Memory palace}}
Frame: {{frameNoV6}} Strokes: {{strokeCount}} — Jouyou Grade: {{jouYou}} JLPT: {{jlpt}}
Constituents: {{constituent}}
{{#readingExamples}}Examples: {{readingExamples}}{{/readingExamples}}
and the styling,
div.front, div.back {
text-align: center;
font-family: sans-serif;
font-size: 16px; /* line height is based on this size in Anki for some reason, so start with the smallest size used */
}
span.tiny {font-size: 16px;}
span.small {font-size: 24px;}
span.medium {font-size: 32px;}
span.large {font-size: 96px;}
span.italic {font-style: italic;}
.win .japanese {font-family: "Meiryo", "MS Mincho";}
.mac .japanese {font-family: "Hiragino Mincho Pro";}
.linux .japanese {font-family: "Kochi Mincho";}
.mobile .japanese {font-family: "Motoya L Cedar", "Motoya L Maru", "DroidSansJapanese", "Hiragino Mincho ProN";}