Create a config file to allow changing default styling.

[zecuse]

I see this add-on doesn't use a config file. I've applied my own edits directly to draw_pitch.py to slightly increase the font size and weight and the width of the graph so everything fits this new size better. Seeing how you're already handling the x position of each mora in the text function, could a config file be created that exposes these styling options to the user without needing to manually edit the script? If the add-on is updated in the future, won't my current edits be lost because they aren't part of a config? Default config values can come from the current hard coded values.

[IllDepence]

Hi @zecuse

thank you for the input.

You’re right that with an update of the add-on you’re changes are most likely to be overwritten.

As for the changes you made. Can you not make those by adjusting your card style CSS? Here are some examples from the add-on page on Ankiweb:

svg.pitch { height: 150px; width: auto; }
svg.pitch text { font-weight: bold !important; }
svg.pitch > path { stroke: #fa7 !important; }
svg.pitch > circle[r="5"] { fill: #fa7 !important; }
svg.pitch > circle[r="3.25"] { fill: #cf9 !important; }

If any of the changes you want to make can not be done with CSS, please let me know what they are. I that case adding a config would be a viable option and something I could implement.

[zecuse]

Using CSS is one way to make some changes, but because the small hiragana are still just a <text> tag in the Anki field, I'm not sure if they can be separated from the standard hiragana size. These 2 types of <text> tags don't have a class to identify them from each other for individual CSS.

Also, as I mentioned, I had to very slightly adjust the horizontal spacing of the circles to get the hiragana back under the center of each of them. I saw you did that with just a bit of math based on the index of each hiragana. That (I'm fairly certain) definitely can't be adjusted with CSS given they're calculated indirectly in relation to how big the hiragana are. Clearly you meant for the hiragana and circles to line up. Here's the edits I made in particular:

From the return in line 41 of draw_pitch.py:

return ('<text x="{}" y="67.5" style="font-size:28px;font-family:sans-'
        'serif;fill:#000;">{}</text><text x="{}" y="67.5" style="font-'
        'size:19px;font-family:sans-serif;font-weight:bold;fill:#000;">{}</text>'
        ).format(x-5, mora[0], x+20, mora[1])

Font sizes were increased and the small hiragana were made bold to appear as thick as the normal hiragana. Same size update in line 38 btw. I realize I could move these tag edits into the CSS of the card if I instead just gave each <text> tag its own class which might actually satisfy other users. Either way, right now, one has to edit these return statements to get the individual changes. I only thought of allowing these to be in a config because I don't think getting the config's value and adding it to the string format would be that hard. If you instead add a class for both hiragana types, I don't think these edits I did would need to be in a config.

From line 73 in the same file: step_width = 45

This obviously increased the horizontal distance between the circles due to the font being larger. Unless there's some advanced wizardry one can do with CSS that I'm not familiar with (I've seen videos of people making animations with just CSS!), I don't think you can do this type of math operation with CSS alone. Along with margin_lr and the values for y_center in lines 91 & 93, these could be more intuitively adjustable in a config without needing to worry about modifying the entire svg itself with CSS.