My card settings for yomigana

Japanese Language Kanji
1

for ankidroid

type: basic

Front:

<div id="jp" class="furigana-text" style="font-size: 44px; text-align: center; margin: 60px 0; line-height: 2.0;">

    {{Front}}

</div>



<script>

function processFurigana(el) {

    if (!el || el.dataset.done) return;



    let html = el.innerHTML;



    // Превращаем кандзи[фуригана] → <ruby>кандзи<rt>фуригана</rt></ruby>

    html = html.replace(/([一-龯々〆〇ヶ]+)\[([^\]]+)\]/g, '<ruby>$1<rt>$2</rt></ruby>');



    el.innerHTML = html;

    el.dataset.done = "1";

}



(function() {

    processFurigana(document.getElementById("jp"));

})();

</script>

Back:

{{FrontSide}}



<hr id="answer">



<div id="back" class="furigana-text" style="font-size: 24px; color: #00dd00; text-align: left; margin: 50px 0; white-space: pre-line;">

    {{Back}}

</div>



<script>

(function() {

    processFurigana(document.getElementById("back"));

})();

</script>

CSS:

.card {

    font-family: system-ui, -apple-system, "Hiragino Mincho ProN", "YuMincho", serif;

    background-color: #000;

    color: white;

    text-align: center;

}



ruby {

    ruby-position: over;

}



rt {

    font-size: 0.45em !important;

    color: #ff80ff;

    opacity: 0.95;

}



#jp:empty, div:empty { display: none !important; }

writing format:

Front:

疑[うたが]う

Back:

1) doubt;

 私[わたし]はその事実[じじつ]を疑[うたが]わない I have no doubt about it;

In other words, no additional separators are required. Only square brackets after the kanji are needed.

2 Likes