Japanese core deck template

1 - Core template.md

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:

2 - Front Template .html

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

3 - Styling .css

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

4 - Back Template .html

<div id="answerSide">
{{FrontSide}}
</div>