Untitled

requires the following fonts: KouzanBrushFontGyousyo/Sousyo, IPAPMincho, KanjiStrokeOrders
used fields (map to your own deck): Expression Reading Meaning Examples Audio

------------------Front----------------

<head>
<script>
y = new Array();
y1 = new Array();
x = "{{Expression}}".split("");
x1 = "{{Reading}}".split("")
while (x.length != 0) y.push("<span class=\"rotator\">" + x.pop() + "</span>");
while (x1.length != 0) y1.push("<span class=\"rotator\">" + x1.pop() + "</span>");
z = y.reverse().join("");
z1 = y1.reverse().join("")
document.getElementById("1").innerHTML = z;
document.getElementById("2").innerHTML = z;
document.getElementById("3").innerHTML = z;
document.getElementById("reading").innerHTML = z1;
document.getElementById("expression").innerHTML = z;
</script></head><body>
<div style='
 color: #123456;font-family: KouzanBrushFontGyousyoOTF; font-size: 90px;' id="1">{{Expression}}</div>
<div style='
 color: #123456;font-family: KouzanBrushFontSousyoOTF; font-size: 90px;' id="2">{{Expression}}</div>

------------------Back----------------

{{FrontSide}}
<hr id=answer>
[sound:{{Audio}}]
<div style='font-family: IPAPMincho; font-size: 22px;' lang="jp"><span id="reading">{{Reading}}</span> 【<span id="expression">{{Expression}}</span>】</div>
<div style='
 color: #123456;font-family: KanjiStrokeOrders; font-size: 90px;' id="3">{{Expression}}</div><span style="-webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb;-ms-writing-mode: horizontal-tb;writing-mode: horizontal-tb;width: 220px">
<div style='font-family: IPAPMincho; font-size: 15px;'>{{Meaning}}</div><br>
<div style='font-family: IPAPMincho; font-size: 10px;'>{{Examples}}</div>
</span></body>

------------------CSS----------------

.card {
 font-size: 10px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-text-orientation: upright;
-ms-text-orientation: upright;
-moz-text-orientation: upright;
text-orientation: upright;
padding-top: 10px;
}
.mobile .card{text-align: center;}
.mobile .rotator {
 -webkit-transform: rotate(0deg);
padding-top: 0px;
padding-bottom: 0px;
}
.rotator{
 -webkit-transform: rotate(-90deg);
display:inline-block;
padding-bottom: 1px;
}