Anki CSS/HTML align vertically to bottom / center / top

Question

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 <br>, 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 <br> 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

<div class="front" lang="ja">


<span class="large japanese">{{kanji}}</span>

<br>
<hr>


{{hint:Memory palace}}

back

<div class="back" lang="ja">
{{strokeDiagram}}<br> <br>
 <hr> 
 <span class="medium"><a href="http://jisho.org/kanji/details/{{kanji}}">{{keyword}}</a></span>
 <br/><br/>
 
<span class="large japanese">{{kanji}}</span>

<br> 
<span class="medium">{{myStory}}</span>  <br><hr> 
<span class="tiny"> Memory palace: {{Memory palace}}</span>


<span class="tiny"> &nbsp; Frame: {{frameNoV6}} &nbsp; Strokes: {{strokeCount}} &nbsp; &mdash; &nbsp; Jouyou Grade: {{jouYou}} &nbsp; JLPT: {{jlpt}}</span><br/>

<!-- Uncomment for Heisig Story          
<hr>
 <span class="medium">{{heisigStory}}</span>
 {{#heisigComment}}<br/><br/><span class="small">{{heisigComment}}</span>{{/heisigComment}}
-->

<!-- Uncomment for koohi Story
<hr/>
 <span class="medium">{{koohiiStory1}}</span>

-->

<hr/>
 <br> <br>
<!-- Uncomment for On-Yomi and Kun-Yomi
 <span class="small">On-Yomi: <span class="medium japanese">{{onYomi}}</span> &nbsp; Kun-Yomi: <span class="medium japanese">{{kunYomi}}</span></span><br/>
-->
<span class="tiny"><a href="http://kanji.koohii.com/study/kanji/{{kanji}}">Constituents:</a> {{constituent}}</span><br/><br/>
 {{#readingExamples}}<span class="tiny">Examples: <span class="japanese">{{readingExamples}}</span></span>{{/readingExamples}}
</div>

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";}

wizzwizz4 · Accepted Answer · 2018-04-08T12:01:31.813

Front

div.front,
div.back {
  width: 100%;
  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";
}


/* Positional */

.bottom {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.center {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  /* I want a better way to do the below! */
  top: 50%;
  transform: translateY(-50%);
}

.top {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

<div class="front" lang="ja">


  <span class="large japanese center">{{kanji}}</span>

  <hr>


  <span class="bottom">{{hint:Memory palace}}</span>

Note that the <hr> is unstyled.

Back

div.front,
div.back {
  width: 100%;
  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";
}


/* Positional */

.bottom {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.center {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  /* I want a better way to do the below! */
  top: 50%;
  transform: translateY(-50%);
}

.top {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

<div class="back" lang="ja">
  <div class="top">{{strokeDiagram}}</div>
  <hr>
  <div class="center"><span class="medium"><a href="http://jisho.org/kanji/details/{{kanji}}">{{keyword}}</a></span>

    <span class="large japanese">{{kanji}}</span>
  </div>

  <div class="bottom">
    <span class="medium">{{myStory}}</span> <br>
    <hr>
    <span class="tiny"> Memory palace: {{Memory palace}}</span>


    <span class="tiny"> &nbsp; Frame: {{frameNoV6}} &nbsp; Strokes: {{strokeCount}} &nbsp; &mdash; &nbsp; Jouyou Grade: {{jouYou}} &nbsp; JLPT: {{jlpt}}</span><br/>

    <!-- Uncomment for Heisig Story          
<hr>
 <span class="medium">{{heisigStory}}</span>
 {{#heisigComment}}<br/><br/><span class="small">{{heisigComment}}</span>{{/heisigComment}}
-->

    <!-- Uncomment for koohi Story
<hr/>
 <span class="medium">{{koohiiStory1}}</span>

-->

    <hr/>
    <br> <br>
    <!-- Uncomment for On-Yomi and Kun-Yomi
 <span class="small">On-Yomi: <span class="medium japanese">{{onYomi}}</span> &nbsp; Kun-Yomi: <span class="medium japanese">{{kunYomi}}</span></span><br/>
-->
    <span class="tiny"><a href="http://kanji.koohii.com/study/kanji/{{kanji}}">Constituents:</a> {{constituent}}</span><br/><br/> {{#readingExamples}}
    <span class="tiny">Examples: <span class="japanese">{{readingExamples}}</span></span>{{/readingExamples}}
  </div>
</div>

One problem with this technique is that, if there is insufficient space, they will draw over each other.

Thanks for the answer, the hint is at the bottom which is nice, I just can't get the Japanese to appear at the top with it also centered in the middle horizontally .Also feel free to change the HTML if it helps (if I understood you correctly) — copy, Apr 07 '18 at 18:26
@AfroSamuraí Are you talking about the back? I only did the front. Currently I'm on a device that doesn't support Stack Snippets or Anki, so I can't test making a new back. — wizzwizz4, Apr 07 '18 at 18:33
oh that's my bad, I may have worded it poorly in my question. The hint being at the bottom is perfect, I just wanted the Japanese character to stay at the top or in the middle (vertically). I figured out from your answer that you could probably do `position: absolute; top: 0` as well and make another class or something — copy, Apr 07 '18 at 18:38
@AfroSamuraí I thought it did stay in the middle... Staying at the top is easy; it's the same as bottom but changed in the way you'd expect. I'll see what I can do about it in between 8 and 14 hours' time. — wizzwizz4, Apr 07 '18 at 18:42

Anki CSS/HTML align vertically to bottom / center / top

1 Answers1

Front

Back