steven-kraft / obsidian-markdown-furigana

Simple Markdown to Furigana Rendering Plugin for Obsidian

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Request] Support for toggling display of furigana on and off

towai opened this issue · comments

commented

When going over notes I took yesterday to try and reinforce what I learned, I think it would be helpful to have the option to hide the furigana so I can try to remember the readings of what I put down without having the kana right there, since personally I can't help but read them even if I'm trying to ignore them. (It's helpful enough already just to have the context in which I wrote them, so I generally at least know what the word means if not how to say it)

Of course, disabling the plugin doesn't serve this purpose, since that will just cause the kana to be rendered in full size next to the kanji.

I had the same desire to hide the furigana by default, and what I did to solve this problem was to introduce a css snippet that made the font size of the furigana 0%, unless you hover over the word. This did the trick:

ruby > rt {
    font-size:0%;
}

ruby:hover > rt {
        font-size:50%;
}
commented

that makes way too much sense. i thought a tiny bit about what i could do on the user end of things, but somehow having it show on hover didn't even cross my mind. it'd be nice to have something to toggle this functionality, (though i think you can always put custom css snippets at the top of individual notes if you want to add something you can just comment out? (EDIT: the way to do this is to add a cssclass and then name it something short like hf for "hide-furigana" or maybe "hover-furigana", given that simply toggling CSS classes is not a thing in Obsidian - and then make those rules affect .hf ruby instead))

however, that's probably plenty good enough for 99% of cases, though personally i think i prefer to instead change the color to transparent and then back to var(--text-normal) to keep stuff from moving around. probably there's some cases where that approach doesn't work out, like if the ruby is also in a link or something else that changes the color -- though in that particular case clicking on the rubytext doesn't follow the link so it shouldn't be link-colored anyway

Glad this made sense, @towai! I found this link while searching for the answer and realized I could figure it out myself, so I figured I'd drop a note after I got a working solution in place.

And yep, cssclasses are the way to go. I have my own cssclasses enabled for the notes I use to study the Kanji, because I like the font size to be much larger--I struggle to read the kanji when they're at 12pt font.

I will say that if you use iOS or Android a lot, the hover option may not work as well for you because you have to tap, which can be a little awkward, depending on your setup!