Genki Anki Decks – Swapping Hidden Furigana and Kanji

I’ve been using the Anki decks included in the [Genki study resources](https://sethclydesdale.github.io/genki-study-resources/help/anki-decks/) and I found myself memorizing the Kanji word/sentence meaning and completely forgetting pronunciation. The decks originally show the kanji at the start and you have to mouse over it in order to see the furigana. I wanted to get the opposite effect so I added some code to the styling section of the card template.

In case anybody wants it, here is the complete styling code:

.question-side { font-size:48px; }

.card {
color:#333;
background-color:#EEE;
font-size:25px;
font-family:’メイリオ’, ‘Meiryo’, ‘Osaka’, ‘ＭＳ Ｐゴシック’, ‘MS PGothic’, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, Arial, sans-serif;
text-align:center;
}
.nightMode hr { border-color:#555; }
.nightMode ruby rt {
color:#CCC; /* pre-hover text color; default 333 */
background:#222; /* pre-hover color; default 333 */
border-color:#222; /* Default 444 */
}
.nightMode ruby:hover rt {
color:#CCC; /* on-hover text color; */
background:none;
border-color:transparent;
}
.nightMode.card {
color:#CCC; /* Kanji/Answer color; */
background-color:#222;
}

/* Hides the kanji until mouseover */
.nightMode ruby {
color:#333; /* pre-hover text color. Needs to = background color */
background:#333; /* pre-hover bkg color */
border-color:#444;
}
.nightMode ruby:hover {
color:#CCC; /* on-hover text color */
background:none;
border-color:transparent;
}

/* swaps furi/kanji order vertically */
ruby{
display: flex;
flex-direction: column-reverse;
}
rt{
order: -1;
text-align: center; /* so furigana text doesn’t use full width */
}

Note: This will only work for cards where the question section are of the format: <ruby> kanji here <rt> furigana here </rt> </ruby>

like –

<ruby>～時間<rt>～じかん</rt></ruby>