Front Template #
Displays the target word, also displays a hint if you have that field set. If it is a kana word, insert the sentence as a hint if there is no existing hint.
{{Word}}
<div id=hint>{{Hint}}</div>
<script>
if ("{{Word}}" === "{{Reading}}") {
if (document.getElementById('hint').childNodes.length === 0) {
document.getElementById('hint').innerHTML = "{{Sentence}}"
}
}
</script>
Back Template #
Displays the word’s reading and the context sentences. On PC image will be displayed on the left and definitions on the right, with audio replay buttons at the bottom. On mobile it will all be stacked vertically. If the card doesn’t have an image then it uses the mobile layout.
<div id=container>
<div id=front>{{FrontSide}}</div>
<hr id=answer>
<div id=reading>{{Reading}}</div>
<div id=sentence>{{Sentence}}</div>
{{#Picture}}
<div id='picture'>{{Picture}}</div>
<div id='glossary'>{{Glossary}}</div>
{{/Picture}}
{{^Picture}}
<div id=glossary>{{Glossary}}</div>
{{/Picture}}
<div>{{Audio}} {{Sentence-Audio}}</div>
<hr />
</div>
<style>
{{#Picture}}
@media (orientation: portrait) {
{{/Picture}}
#picture {
flex: 0 0 100% !important;
text-align: center !important;
}
#glossary {
flex: 0 0 100% !important;
text-align: center !important;
}
#glossary > div {
display: inline-block !important;
}
{{#Picture}}
}
{{/Picture}}
</style>
Styling CSS #
Flexbox layout, conditional mobile formatting, slimming down definition list that Yomichan sends over, and tidying up.
#container {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
justify-content: center;
}
#sentence, #hint {
font-size: 3.5vh;
}
body {
margin: 0px;
font-family: Hiragino Mincho Pro, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 8vh;
color: white;
background-color: black;
text-align: center;
}
#glossary {
font-size: 3.5vh;
flex: 0 0 50%;
text-align: left;
}
#picture {
flex: 0 0 50%;
max-width: 50vw;
height: auto;
text-align: right;
}
#glossary li {
list-style-type: none;
display: inline;
}
ol > li {
display: block !important;
}
ul > li:not(:last-of-type):not(:empty)::after{
content: ", ";
}
* {
padding: 0px;
margin: 0px;
flex-basis: 100%;
}
Before (No styling at all) #
After #
