smart fontsize adjustment for length of composite

deck.json

@@ -49,9 +49,11 @@
     ],
     "desc": "",
     "dyn": 0,
-    "extendNew": 0,
+    "extendNew": 4,
     "extendRev": 0,
     "media_files": [
+        "_KanjiStrokeOrders.ttf",
+        "_ipag.ttf",
         "googletts-000259de-bd9120f3-f9fb2b99-5b594d71-afba08b4.mp3",
         "googletts-000b38c0-07604f42-7fcf7122-f2abcd2b-9bfaa229.mp3",
         "googletts-00235dde-a829c4b6-46aef336-ddad46e1-39d8e969.mp3",
@@ -3364,7 +3366,7 @@
         {
             "__type__": "NoteModel",
             "crowdanki_uuid": "7438e0a2-a6d2-11eb-a150-9cb6d013a4a3",
-            "css": ".card {\n font-family: arial;\n font-size: 60px;\n text-align: center;\n color: black;\n background-color: white;\n}\n.jp { font-size: 70px }\n.win .jp { font-family: \"MS Mincho\", \"ＭＳ 明朝\"; }\n.mac .jp { font-family: \"Hiragino Mincho Pro\", \"ヒラギノ明朝 Pro\"; }\n.linux .jp { font-family: \"Kochi Mincho\", \"東風明朝\"; }\n.mobile .jp { font-family: \"Hiragino Mincho ProN\"; }\n\n",
+            "css": "@font-face {\n   font-family: 'kanji_strokeorder';\n   font-style: normal;\n   font-weight: 400;\n   src: url(_KanjiStrokeOrders.ttf) format('truetype');\n }\n@font-face {\n   font-family: 'IPAGothic';\n   font-style: normal;\n   font-weight: 400;\n   src: url(_ipag.ttf) format('truetype');\n }\n:root{\n\t--highlight: #5E81AC;\n\t--least-important:#4C566A;\n\t--highlight2: #BF616A;\n\t--slight_highlight: #434C5E;\n\t--default: #2E3440;\n\t--hint: #5E81AC;\n\t--dark_hint:#B48EAD;\n\t--dark_default:#E5E9F0;\n\t--dark_highlight:#5E81AC;\n\t--dark_slight_highlight: #88C0D0;\n}\nbody {\nmargin: 0;\n}\n.container {\ndisplay: flex;\nflex-direction: column;\nheight: 100vh;\n}\n.card-content {\nflex: 1;\npadding: 20px;\npadding-top:0;\n}\n.footer {\n\tpadding: 20px;\n\tpadding-bottom: 5px;\n\tpadding-top:0px;\n}\n.card {\n\tmargin-top: 0px;\n\theight: 100%;\n\tfont-family:  Helvetica, \"IPAGothic\", Arial,Verdana,sans-serif;\n}\n.parent {\n  white-space: nowrap;\n  margin-top: 30vh;\n}\n.card .Komposita{\n  margin-left:300px\n\tmargin-top:30vh;\n\tfont-size: 120px;\n   \tfont-family: IPAGothic;\n\tcolor: var(--highlight);\n}\n.card #Komposita{\n\tmargin-top:30vh;\n\tfont-size: 120px;\n   \tfont-family: IPAGothic;\n\tcolor: var(--highlight);\n\t//height:120px;\n}\n.card .KanjiHint{\n\tfont-family: Helvetica, IPAGothic;\n\tcolor: var(--dark_slight_highlight);\n\tfont-size: 40px;\n\tpadding-left: 30px;\n\tfont-style: normal;\n}\n#no {\n\tcolor:var(--least-important);\n\tfont-family: Helvetica,Arial,Verdana,sans-serif;\n\tfont-size: 20px;\n\ttext-align:right;\n\tfloat:right;\n}\n.card .KompositaBack{\n\tfont-family: Helvetica, IPAGothic;\n\tcolor: var(--dark_slight_highlight);\n\tfont-size: 40px;\n\tpadding-top: 5vh;\n\tpadding-left: 10px;\n\tfont-style: normal;\n}\n.card .KompositaBack i{\n\tfont-family: Helvetica, IPAGothic;\n\tcolor: var(--least-important);\n\tfont-size: 30px;\n\tmargin-left:40px;\n\tfont-style: normal;\n}\n.card .ReadingBack{\n\tmargin-top:5vh;\n\ttext-align:center;\n\tfont-size: 70px;\n   \tfont-family: IPAGothic;\n\tcolor: var(--highlight);\n}\n.card .KanaBack{\n\tfont-family: Helvetica, IPAGothic;\n\tcolor: var(--least-important);\n\tfont-size: 40px;\n\tpadding-left: 10px;\n\tfont-style: normal;\n}\n.card .MeaningBack{\n\tpadding-left: 10px;\n\t//margin-top:5vh;\t\n    min-height:15vh;\n\ttext-align: center;\n\tfont-size: 25px;\n\ttext-align:left;\n\tcolor:var(--default);\n}\n.card .KompositaKanaFront{\n\tmargin-top:30vh;\n\tfont-size: 100px;\n   \tfont-family: IPAGothic;\n\tcolor: var(--highlight);\n\theight:120px;\n}\n.card .MeaningFront{\n\tmargin-top:30vh;\n\tfont-size: 70px;\n   \tfont-family: Helvetica;\n\tcolor: var(--highlight);\n\t//height:120px;\n}\n.card .TonBack{\n\tdisplay:float;\n\talign:center;\n\ttext-align:center;\n\tpadding-top: 5px;\n\tpadding-bottom: 5px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.card.night_mode .kanji{\n\tcolor: var(--dark_highlight);\n}\n.card.night_mode .kanji i {\n\tcolor:var(--least-important);\n}\n.card.night_mode .kanji b {\n\tcolor:var(--least-important);\n}\n.card.night_mode .kanji_card2{\n\tcolor: var(--dark_highlight);\n}\n.card.night_mode .kanji_card2 i {\n\tcolor:var(--least-important);\n}\n.card.night_mode p.kanji_back{\n\tcolor: var(--dark_slight_highlight);\n}\n.card.night_mode p.kanji_back i {\n\tcolor:var(--least-important);\n}\n.card.night_mode .primitive_correction before {\n\tcolor:var(--least-important);\n}\n.card.night_mode #compounds {\n\tcolor: var(--dark_slight_highlight);\n}\n.card.night_mode .meaning_back_card1 {\n\tcolor:var(--dark_highlight);\n}\n.card.night_mode #compounds i{\n\tcolor: var(--highlight);\n}\n.card.night_mode .MeaningBack{\n\tcolor:var(--dark_default);\n}\n.card.night_mode #explanation i{\n\tcolor:var(--dark_hint);\n}\n.card.night_mode #explanation b{\n\tcolor: var(--dark_highlight);\n}\n.card.night_mode #notes {\n\tcolor:var(--least-important);\n}\n.card.night_mode .meaning {\n\tcolor: var(--dark_highlight);\n}\n.card.night_mode .meaning i {\n\tcolor:var(--dark_slight_highlight);\n}\n.card.night_mode .meaning_back{\n\tcolor: var(--dark_slight_highlight);\n}\n.card.night_mode .meaning_back i {\n\tcolor:var(--least-important);\n}\n.card.night_mode #no {\n\tcolor:var(--least-important);\n}\n.card.night_mode #lesson {\n\tcolor:var(--least-important);\n}\n/* ANDROID SETTINGS */\n.android .container {\n\theight: 97vh; /*AnkiDroid seems to calculate vh with area below buttons*/\n}\n.android .card p.kanji{\n\tfont-size:120px;\n}\n.android.card.night_mode {\n\tbackground-color:#000000;\n}\n.android .card p.kanji_card2{\n\tfont-size:120px;\n}",
             "flds": [
                 {
                     "font": "Liberation Sans",
@@ -3438,6 +3440,7 @@
                     0,
                     "any",
                     [
+                        0,
                         2,
                         3
                     ]
@@ -3446,7 +3449,9 @@
                     1,
                     "any",
                     [
-                        4,
+                        0,
+                        2,
+                        5,
                         6
                     ]
                 ]
@@ -3455,7 +3460,7 @@
             "tags": [],
             "tmpls": [
                 {
-                    "afmt": "{{FrontSide}}\n\n<hr id=answer>\n\n<div class=jp> {{furigana:Lesung}} </div><br>\n\n<div style='font-family: Arial; font-size: 40px;'>{{furigana:Kanji}}</div>\n<div style='font-family: Arial; font-size: 20px;'>{{Komposita_Bedeutung}}</div><br>\n\n{{Komposita_Kana}}\n<div style='font-family: Arial; font-size: 20px;'>{{Index}}</div>\n\n<div style='font-family: Liberation Sans; font-size: 20px;'>{{Ton}}</div>\n",
+                    "afmt": "<div class=\"container\">\n<div class=\"card-content\">\n\n<div class=KompositaBack>{{Komposita}}<i>{{Kanji}}</i></div>\n<div class=KanaBack>{{Komposita_Kana}}</div>\n<div class=MeaningBack>{{Komposita_Bedeutung}}</div>\n\n\n<div class=TonBack>{{Ton}}</div>\n<div class=ReadingBack> {{Lesung}} </div>\n\n\n\n\n\n\n</div>\n<div class=\"footer\">\n<div id=\"no\">\n{{Index}}\n</div><!-- index-->\n</div><!-- footer -->\n</div><!-- container -->\n",
                     "bafmt": "",
                     "bfont": "",
                     "bqfmt": "",
@@ -3463,10 +3468,10 @@
                     "did": null,
                     "name": "Recognition",
                     "ord": 0,
-                    "qfmt": "<div class=jp> {{Komposita}} </div>\n\n<div style='font-family: Liberation Sans; font-size: 20px;'>{{Kanji}}</div>\n"
+                    "qfmt": "<div class=\"container\">\n<div class=\"card-content\">\n<div class=\"parent\" style=\"white-space:nowrap;\">\n <span href=\"#\" class=resize id=Komposita>{{Komposita}}</span>\n<div id=\"Kanji\" class=KanjiHint>{{Kanji}}</div>\n</div>\n\n</div>\n\n<div class=\"footer\">\n<div id=\"no\">\n{{Index}}\n</div><!-- index-->\n\n</div><!-- footer -->\n</div><!-- container -->\n<script>\nresize();\n\nfunction resize() {  \n\t$('.resize').each(function(i, obj) {\n\t\t$(this).css('font-size', '8em');\n\n\t\twhile ($(this).width() > $(this).parent().width()) {\n\t\t\t$(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + \"px\");\n\t\t}\n\t});\n}\n</script>"
                 },
                 {
-                    "afmt": "<div style='font-family: Arial; font-size: 20px;'>{{Komposita_Kana}}</div>\n<div style='font-family: Arial; font-size: 40px;'>{{Komposita}}</div>\n{{Ton}}\n<hr id=answer>\n\n\n<div class=jp> {{furigana:Lesung}} </div><br>\n\n\n<div style='font-family: Arial; font-size: 40px;'>{{furigana:Kanji}}</div>\n<div style='font-family: Arial; font-size: 20px;'>{{Komposita_Bedeutung}}</div>\n<div style='font-family: Liberation Sans; font-size: 20px;'>{{Komposita}}</div>\n<div style='font-family: Arial; font-size: 20px;'>{{Index}}</div><br>\n\n\n",
+                    "afmt": "\n<div class=\"container\">\n<div class=\"card-content\">\n\n<div class=KompositaBack>{{Komposita}}<i>{{Kanji}}</i></div>\n<div class=KanaBack>{{Komposita_Kana}}</div>\n<div class=MeaningBack>{{Komposita_Bedeutung}}</div>\n<div class=TonBack>{{Ton}}</div>\n<div class=ReadingBack> {{Lesung}} </div>\n\n\n\n</div>\n<div class=\"footer\">\n<div id=\"no\">\n{{Index}}\n</div><!-- index-->\n</div><!-- footer -->\n</div><!-- container -->\n\n\n\n",
                     "bafmt": "",
                     "bfont": "",
                     "bqfmt": "",
@@ -3474,7 +3479,7 @@
                     "did": null,
                     "name": "Recall",
                     "ord": 1,
-                    "qfmt": "{{Komposita_Kana}}\n\n<div style='font-family: Liberation Sans; font-size: 20px;'>{{Ton}}</div>\n"
+                    "qfmt": "<div class=\"container\">\n<div class=\"card-content\">\n<div class=MeaningFront> {{Komposita_Bedeutung}}</div>\n<div id=\"Kanji\" class=KanjiHint>{{Kanji}}</div>\n\n<div class=TonBack>{{Ton}}</div>\n\n</div>\n\n<div class=\"footer\">\n<div id=\"no\">\n{{Index}}\n</div><!-- index-->\n\n</div><!-- footer -->\n</div><!-- container -->\n\n\n"
                 }
             ],
             "type": 0,