Skip to content

Instantly share code, notes, and snippets.

@hssm hssm/1 - Core template.md
Last active May 3, 2019

Embed
What would you like to do?
Japanese core deck template

Anki template for the popular Japanese Core (2k 6k 10k etc) decks.

I highgly recommend you use the VL PGothic font. Download it, extract it, and place the VL-PGothic-Regular.ttf file inside your collection.media directory and rename it to _VLPGothic.ttf.

Front side:


Back side. By default, the Japanese sentence furigana and the English sentence is hidden:


Hover or tap to reveal the hidden parts:


Comes with a night mode template that was designed to look good with AnkiDroid's black theme:

<div id="questionSide">
<div id="contentContainer">
<div id="questionBox">
<div id="vocabJ">
{{#Vocabulary-Furigana}}{{furigana:Vocabulary-Furigana}}{{/Vocabulary-Furigana}} {{^Vocabulary-Furigana}}{{Vocabulary-Kanji}}{{/Vocabulary-Furigana}}
</div>
</div>
<div id="answerBox">
{{^Vocabulary-Furigana}}
<div id="kana">{{Vocabulary-Kana}}</div>{{/Vocabulary-Furigana}}
<div id="vocabE">{{Vocabulary-English}}</div>
<div id="sentenceJ">{{furigana:Reading}}</div>
<div id="sentenceE">{{Sentence-English}}</div>
</div>
</div>
</div>
@font-face { src: url('_VLPGothic.ttf'); font-family: VLPGothic; }
html { height: 100%; }
.card {
height: 100%;
display: -webkit-box;
-webkit-box-align: stretch;
-webkit-box-pack: center;
-webkit-box-orient: vertical;
margin: 0;
padding: 0;
font-family: VLPGothic;
text-align: center;
background-color: #e5e5e5;
}
.card.night_mode {
background-color: #000;
}
/* Make the desktop card bigger for readability */
:not(.mobile) .card {
font-size: 1.5em;
}
/* Less fluff and more content when in portait on mobile. */
@media screen and (orientation:portrait) {
.mobile #answerBox { margin: 0; border-radius: 0; }
.mobile #content { margin: 0; }
}
#questionBox {
font-size: 4em;
padding-bottom: .3em;
}
/* Hide furigana and answer box on question side. */
:not(#answerSide) > #questionSide rt,
:not(#answerSide) > #questionSide #answerBox {
visibility: hidden;
}
#answerBox {
padding: 1em 0;
margin-left: 3%;
margin-right: 3%;
border-radius: .3em;
background-color: rgba(0, 0, 0, .08);
}
.night_mode #answerBox {
background-color: rgba(20, 20, 20, .35);
}
#vocabJ {
color: #423;
}
.night_mode #vocabJ {
color: #aff;
}
#kana {
font-size: 1.2em;
color: #423;
}
.night_mode #kana {
color: #aff;
}
#vocabE {
font-size: 1.3em;
color: #343;
}
.night_mode #vocabE {
color: #cca;
}
#sentenceJ {
font-size: 1.40em;
margin-top: 1em;
color: #423;
}
.night_mode #sentenceJ {
color: #99a;
}
/* Give a nicer highlight to the vocab in the sentence */
#sentenceJ b {
font-weight: normal;
color: #834;
}
.night_mode #sentenceJ b {
color: #bee;
}
#sentenceE {
font-size: 1em;
margin-top: .5em;
color: #343;
}
.night_mode #sentenceE {
color: #777;
}
/* Hide furigana and English sentence in answer. Show on hover.*/
#answerBox ruby rt {visibility: hidden;}
#answerBox:hover rt { visibility: visible; }
#answerBox #sentenceE { visibility: hidden;}
#answerBox:hover #sentenceE { visibility: visible;}
<div id="answerSide">
{{FrontSide}}
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.