[Userscript] Stroke Order Diagram

This is a fork of the original Stroke Order script which has recently started having a few issues. The original author @looki does not seem to be around anymore, so with a fix from @killergerbah I will take up maintenance of this script. Unless of course @looki comes back and is against it.


Stroke Order Diagram

Inserts stroke order diagrams from Jisho into reviews, lessons, and kanji pages.

image

Available at

WaniKani Stroke Order

61 Likes

Thanks. I’ve installed it in Safari 14 but I just get an empty element and the when I inspect the HTML it says:

<svg id="stroke_order">Error while loading diagram</svg>

Any ideas?

1 Like

Hmm. Did it as you for cross origin permission?

I noticed in the previous thread some have reported a problem that occurs in Safari specifically. Sharing this in case it fixes the problem for you. [Unsupported] [Userscript] Stroke Order Diagram - #92 by Raven_shp

2 Likes

Yeah, and I hit ‘always allow domains’.

1 Like

Thanks I’ll try that. Will update shortly.

1 Like

Yep, that worked. Thanks!

For anyone else using Safari the change I made was this for the new script:

url: new URL(JISHO + "/search/" + getKanji() + "%20%23kanji"),

2 Likes

Since this fixes the problem in Safari and doesn’t break the script in Chrome (just tried it), seems like we should get this into greasy fork @Kumirei

2 Likes

Already on it! Seems like there are two places that I need to change it in, though

edit: updated

4 Likes

Just grabbed the update and still looks good. Thanks a lot for updating this!

1 Like

Thank @killergerbah, they are the one who fixed it. I’m just accepting the responsibility for the future

3 Likes

thank you Kumi先輩!!!

5 Likes

You are trying to tempt me to use scripts. I will not give in. You can’t seduce me with your sultry DOM manipulation.

7 Likes

@Kumirei I have an improvement to prevent diagrams from overflowing horizontally. These styles were copied from Jisho. Below is the suggested change.

        var sectionHTML = '<section><h2>Stroke Order</h2><div style="width:100%;overflow-x: auto; overflow-y: hidden"><svg id="stroke_order"></svg></div></section>';
3 Likes

Updated! I also took the opportunity to wrap the script in an anonymous function to keep it out of the global scope

4 Likes

I’ve been using this script for one year now and it has become a staple in my Wanikani experience. Thank you for making this script!

2 Likes

sometimes when i start a new batch of lessons, the first item will have two stroke order diagrams overlapping like in the images below. it’s always the diagram of the current kanji, as well as another of the batch’s kanji. not sure if this was true for the previous time i saw this, but i did have the re-order script set to re-order the lesson items this time, so maybe it has something to do with that? anyone else have this problem or is it just me? :grimacing:


4 Likes

I know you posted earlier so you probably do, but just to confirm, you have the newest version?

2 Likes

i think so! :slight_smile: i’m running version 1.1.5

2 Likes

Alight, thanks. I don’t have any lessons, but I will see if I can either find the issue in the code or replicate it in reviews when I get the time

2 Likes