AnkiNoteTemplate/templates/Japanese words/Recognition/front.html

<!--
Simple Word Cards, version 6.0
Fri Feb 24 07:22:23 PM UTC 2023
-->
<div class="wrap">
    {{#Tags}}
        <header>
            <div class="tags">{{Tags}}</div>
        </header>
    {{/Tags}}
    <div class="japanese question" id="question">
        {{edit:furigana:VocabKanji}}
    </div>
</div>

<script>
    function applyQuizFont() {
        const tags = `{{Tags}}`;
        const questionword = document.getElementById("question");
        // Add this tag if you notice that letters don't render properly
        if (tags.includes("DisableGyousyo")) {
            // nuke ID to remove specified font styling.
            questionword.removeAttribute("id");
        }
    }

    function highlightNames() {
        const tags_elems = document.getElementsByClassName("tags");
        for (const tag_elem of tags_elems) {
            if (tag_elem.innerHTML.includes("キャラ") || tag_elem.innerHTML.includes("有名人")) {
                tag_elem.style.backgroundColor = "brown";
            }
        }
    }

    function splitTagDiv() {
        const header = document.querySelector("header");
        if (header) {
            const tags = `{{Tags}}`.split(" ");
            header.innerHTML = "";
            for (const tag of tags) {
                if (tag.includes("DisableGyousyo")) {
                    continue;
                }
                const tag_elem = document.createElement("div");
                tag_elem.className = "tags";
                tag_elem.innerHTML = tag;
                header.appendChild(tag_elem);
            }
        }
    }

    function formatNewRuby(kanji, readings) {
        if (readings.length > 1) {
            return `<ruby>${formatNewRuby(kanji, readings.slice(0, -1))}</ruby><rt>${readings.slice(-1)}</rt>`
        } else {
            return `<rb>${kanji}</rb><rt>${readings.join('')}</rt>`
        }
    }

    function reformatMultiFurigana() {
        const separators = /[\s;,.、・。]+/iu;
        document.querySelectorAll("ruby").forEach(ruby => {
            try {
                const kanji = (ruby.querySelector("rb") || ruby.firstChild).textContent.trim()
                const readings = ruby.querySelector("rt").textContent
                    .split(separators)
                    .map(str => str.trim())
                    .filter(str => str.length)
                if (readings.length > 1) {
                    ruby.innerHTML = formatNewRuby(kanji, readings)
                }
            } catch (error) {
                console.error(error);
            }
        })
    }

    splitTagDiv();
    highlightNames();
    applyQuizFont();
    reformatMultiFurigana();
</script>