Anki CSS/HTML выравнивают по вертикали снизу / центру / верху

Question

Anki CSS/HTML выравнивают по вертикали снизу / центру / верху

Я редактирую шаблон колоды 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"> &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.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";}

0

html css anki

Источник

user3376909 07 апр '18 в 15:31

1 ответ

Другие вопросы по тегам html css anki

user5223757 07 апр '18 в 15:52 2018-04-07 15:52 · Answer 1 · 2018-04-07 15:52

Фронт

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>

Обратите внимание, что <hr> не в стиле.

назад

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>

Одна из проблем этого метода заключается в том, что при недостатке места они будут рисовать друг над другом.