Implement kyujitai

This commit is contained in:
Elnu 2023-06-11 11:17:55 -07:00
parent ccba51e277
commit 3b7e03874f
4 changed files with 431 additions and 13 deletions

View file

@ -9,6 +9,18 @@
<a href="/{{ challenge - 1 }}">Previous</a>
<a href="/{{ challenge + 1 }}">Next</a>
<div lang="ja">
<script>
let kyujitai = false;
function kyujitaiToggle() {
document.querySelectorAll("[data-kyujitai]").forEach(segment => {
let newText = segment.getAttribute("data-kyujitai");
segment.setAttribute("data-kyujitai", segment.firstChild.data);
segment.firstChild.data = newText;
})
kyujitai = !kyujitai;
}
</script>
<button onclick="kyujitaiToggle(); this.innerHTML = kyujitai ? '新字体' : '旧字体'"">旧字体</button>
{% for line in content.japanese %}
{% for subline in line %}
<p>
@ -17,7 +29,8 @@
<a href="{{ word.dictionary }}" target="_blank"{% if word.pos %} class="{{ word.pos }}" title="{{ word.pos }}"{% endif %}>
{% endif %}
{% for segment in word.text %}
<ruby>{{ segment.kanji }}<rp>(</rp><rt>{{ segment.furigana | safe }}</rt><rp>)</rp></ruby>
<!-- TODO: Don't use ruby for all segments -->
<ruby{% if segment.kyujitai %} data-kyujitai="{{ segment.kyujitai }}"{% endif %}>{{ segment.kanji }}<rp>(</rp><rt>{{ segment.furigana | safe }}</rt><rp>)</rp></ruby>
{% endfor %}
{% if word.dictionary %}
</a>