Pitch accent with hidden/shown button for reading

[Humanisto]

Hello,
Your add-on is very fantastic. Thank you for this, it is a real help to learn pitch accent of japanese words. I just have two questions about it. Indeed, I learn flashcards with a front (kanji), a back (translation) and a hint (reading). In this way, I can learn not only words but also readings of the kanji. So I use this code (in front card) :
{{Front}}

{{#Pronunciation}}

読み方

{{Pronunciation}}

<script>
var hint = document.getElementById('pronunciation');
pronunciation.addEventListener('click', function() { this.setAttribute('class', 'shown'); });
</script>
{{/Pronunciation}}

With this code, first, reading is hidden. And, if I click on a button, reading is shown. I have chosen to put your pitch accent picture with the field Hint (pronunciation). The problem is : pitch accent picture is always shown, even if I don't click on the button yet.
Moreover, my card, with kanji + reading + pitch accent + translation is a bit too long. I've tried to code according to your explanation for night mode. But, I didn't manage...

In spite of much research, I haven't found how to make this two things : reduce the height of margin of pitch accent and hide/show pitch accent always with the field reading.

If you can help, it will be very nice.

Thank you very much

[IllDepence]

Hi Humanisto,
glad you like the plugin and thank you for the detailed description of your problem.

I haven't had the time to create cards like yours on my end and acutally test things, but here are some ideas:

• Try if you can generally hide the pronunciation illustrations by adding styling code like svg { visibility: hidden !important; } (similar to the night mode explanation on the plugin page). Or, if this doesn't work, maybe with svg > text, svg > path, and svg > circle
• If hiding works with above code, extend your viewing function to change the visibility value(s) to visible
• To change margins/size of the illustrations modify the height and viewBox attributes of the svg element. I presume this can be done through the styling directly by using !important or by using JS within the cards and retrospectively changing the values.

Hope this helps. :‌‌)

[varrentnw]

If hiding works with above code, extend your viewing function to change the visibility value(s) to visible

Hi there, could give an example of what it would look like?
Thanks!

[TheRealXerox]

I'm also interested in this. Like, maybe a hover over reveals it feature. Like genki anki deck has furigana hidden.

I'm going to make another query and link this thread as related, but I also was to couple this with an added feature to put the accent field in a different field depending on card.

For example, if I bulk add right now, I have 1 note type with two cards. J-E and E-J, problem is for the E-J this works as intended, but with J-E it gives me the pitch accent without flipping, but I'd like to double down and put the accent on the English side. But the bulk add was only able to do it one way for the entire note type. Instead of cards in a note type.

I'd like to have the accent on english for just 1 of 2 cards in a note type or use the method mentioned in this thread. But I think bulk add should be able to do this too.