Randomizing the font, size, and color of your Japanese flashcards in Anki

Back Template.html

<a style="text-decoration: none" href="https://jisho.org/search?utf8=%E2%9C%93&amp;keyword={{Front}}">{{FrontSide}}</a>

<hr id="answer">

<div lang="ja">
{{Back}}
</div>

Front template.html

<center lang="ja"><span id="front">{{Front}}</span></center>
<script>
var isiOS = screen.availHeight > screen.availWidth;
// Modify the list of fonts and size range here
var fonts = ['Hiragino Mincho Pro', 'meiryo', 'dejima', 'takaomincho', 'UD Digi Kyokasho NK-R'];
if(!isiOS) {
	// We couldn't get this font installed on iOS (fontforge generates an empty ttf),
	// but it works fine elsewhere.
	fonts.push('noto sans cjk jp');
}
var minimumSize = 24;
var maximumSize = 68;

var font = fonts[Math.floor(Math.random() * fonts.length)];
var size = minimumSize + Math.floor(Math.random() * (maximumSize - minimumSize));
document.getElementById('front').style.fontSize = size + 'px';
document.getElementById('front').style.fontFamily = font;
document.getElementById('front').style.borderRadius = '8px';
document.getElementById('front').style.padding = '4px 7px 4px 7px';
var colorScheme = Math.floor(Math.random() * 2);
if (colorScheme == 1) {
	document.getElementById('front').style.backgroundColor = '#000';
	document.getElementById('front').style.color = '#fff';
}

// hidpi hack for Qt4 Anki 2.0.x on Linux: if 4K monitor, assume hidpi and zoom; adjust for your system or remove
var hidpiMult = (screen.availWidth == 3840) ? 1.5 : 1;
document.body.style.zoom = hidpiMult;
</script>

Styling.css

.card {
	font-family: 'noto sans cjk jp', arial;
	font-size: 16px;
	text-align: center;
	color: black;
	background-color: white;
}

hr {
	border: none;
	height: 2px;
	background-color: #ddd;
}