Я редактирую шаблон колоды Anki, в котором используются HTML и CSS. То, что я хотел бы сделать здесь, находится на лицевой стороне, вертикально выровняв японский иероглиф посередине, а подсказку по низу. Я попытался вручную расставить интервалы с помощью <br>, но тогда он не работает в окнах с другим разрешением (и это просто грязное решение) Наглядный пример.
На обратной стороне я хотел бы, чтобы диаграмма штрихов всегда привязывалась к верху, японский иероглиф с ключевым словом и мнемоникой посередине, а остальные — к низу. Если бы я попытался расставить это с помощью <br>, я бы получил ту же проблему, что и на главной странице, плюс мнемоника иногда составляет 1 строку, но также может быть 5+ строк, поэтому ее нужно будет динамически выравнивать, чтобы работать, даже если размер окна был всегда один и тот же Назад пример со стрелками.
Я уже нашел этот вопрос, который кажется чтобы несколько ответить на мой вопрос, но, поскольку я практически ничего не знаю о CSS/HTML, я не знаю, как применить его в моем случае. Если бы вы могли мне помочь, я был бы вам очень признателен, так как я провожу много времени с этой колодой, и она продолжает меня раздражать, я также поделюсь улучшенной версией для других людей.
Вот код для фронта
<div class="front" lang="ja">
<span class="large japanese">{{kanji}}</span>
<br>
<hr>
{{hint:Memory palace}}<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"> Frame: {{frameNoV6}} Strokes: {{strokeCount}} — Jouyou Grade: {{jouYou}} 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> 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.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";}