I find it useful to hide furigana by default while still allowing it to be revealed on demand:
PC: Hover over Japanese text to show the furigana.Mobile: Tap Japanese text to show or hide the furigana.
pc_demo.mp4
Proposed solution
Add the following CSS to the styling :
/* Prevents the furigana from being selected */
ruby > rt {
user-select: none;
}
/* Hide furigana by default */
ruby rt {
visibility: hidden;
opacity: 0;
transition: opacity 0.15s ease;
}
/* Show furigana when hovering on PC */
@media (hover: hover) {
ruby:hover rt {
visibility: visible;
opacity: 1;
}
}
/* Show furigana after tapping on mobile */
ruby.show-furigana rt {
visibility: visible;
opacity: 1;
}
Then add the following JavaScript to the back template to support tapping on mobile:
document.addEventListener("click", function(e) {
const ruby = e.target.closest("ruby");
if (ruby) {
ruby.classList.toggle("show-furigana");
}
});
[Optional] We can then also add furigana to the front template :
<div lang="ja">
{{furigana:Word Furigana}}
<div style='font-size: 20px;'>{{furigana:Sentence Furigana}}</div>
</div>
I find it useful to hide furigana by default while still allowing it to be revealed on demand:
pc_demo.mp4
Proposed solution
Add the following CSS to the styling:
Then add the following JavaScript to the back template to support tapping on mobile:
[Optional] We can then also add furigana to the front template: