Back

Kanji Koohii Built-in Stroke Order Diagram (Greasemonkey script)

#1
I'm aware of the various fonts that can be installed that show stroke order diagrams, but (as far as I know) that option is not available for iOS devices (that have not been jailbroken) and is bothersome to implement whenever I use another machine. A scroll-over/1-click SoD that's native to this website would save the annoyance of having to switch between tabs or apps to lookup stroke orders.
Reply
#2
Stroke order font is something I was thinking about lately, I'm sure I'll get it in the Study page eventually.

However... what you are talking about is displaying characters as images. That's quite expensive in terms of bandwidth and also to set it up. Thousands of images have to be generated, one per character, AND they have to be animated gifs as well. And because they don't scale nicely, they need to be enough definition probably 64x64 px or higher. If you're talking about the diagrams with tiny little numbers indicating stroke order, rather than movement.. the images would have to be larger for it to be readable (128x128 minimum).

It is unlikely that I implement image-based kanji fonts on the Study page, unless there is an API somewhere and someone else is hosting all the images and they are freely available.

That said, if someone knows resources that have all pre-generated images and/or some open source scripts that already tackle this issue I will definitely have a look at it.
Reply
#3
Some alternatives to gif images would be for example:

- static image diagrams with as many frames as there are strokes (Kim of jisho.org made this image-generating script freeware on github here, but you'll still have to convert them into jpg or png afterwards)

- generating one frame per kanji with stroke numbers using the script above (one 200x200 image would be 2-4 kB in size, which is still smaller than multiple frames)

- convert the Kanji stroke order ttf font into a WOFF (Web Open Font Format) with this, so that instead of images, you're rendering the actual font (though, I'm not sure how this would effect the bandwidth; is the WOFF font downloaded every single time? Also, I just found out that <iOS 5 devices don't support WOFF) - I just tried this and the result is a 8+ MB font, lol. Definitely a bad idea.

- use the canvas feature of HTML5 and SVG data of KanjiVG like here (I think this one is probably the hardest to implement, but it says this is done using the same script above, so maybe you just need Ruby support and you're good to go. And it's probably the method using the least bandwidth)
Edited: 2014-01-17, 7:23 am
Reply
August Sale (14th - 25th): 30% OFF Premium PLUS - 25% OFF Premium
JapanesePod101
#4
So it seems like an image-based approach would be impractical. However, only implementing a stroke order font in the study page is still not ideal.

How about if there were an option to toggle stroke order font after hitting the "Show Answer" button?

When you are looking at the "question" side of the card, a regular font is used (so you can't "cheat" while trying to remember the correct stroke order), but then you have the option to use a stroke order font on the "answer" side of the card, which would make it unnecessary to go to the study page or use a separate resource to look up the correct stroke order.

For people who don't want a stroke order font on the "answer" side of their cards, they can simply toggle the option off.
Reply
#5
toshiromiballza Wrote:Some alternatives to gif images would be for example:
Thanks those are some really awesome links.
Reply
#6
There's already a grease-monkey script to include the stroke-order diagrams that are used in tangorin into the study-pages: http://userscripts.org/scripts/reviews/169652

(you only have to change
// @include http://www.kanji.koohii.com/study/kanji/*
// @include https://www.kanji.koohii.com/study/kanji/*
to
// @include http://kanji.koohii.com/study/kanji/*
// @include https://kanji.koohii.com/study/kanji/*)
Reply
#7
Thanks for the script. I'll try it out when I switch to Chrome and install Tampermonkey in the upcoming weeks (I've been using Safari, but I'm planning on importing everything over to Chrome soon).
Reply
#8
If you do integrate the diagrams into the site I'd like to vote against animated images. They're frustrating because if you miss something you have to wait for the animation to loop. I think the style like the one on jisho.org is best (as many frames as strokes) because your eyes can immediately see everything you need. And yes, they're SVG, so no big deal for bandwidth.
Reply
#9
fuchur Wrote:There's already a grease-monkey script to include the stroke-order diagrams that are used in tangorin into the study-pages: http://userscripts.org/scripts/reviews/169652
Thanks! I checked it out and it's awesome. It only works in the Study section though. So I made a version of the script for the Review section:

[Image: 5SpyNi3l.png]

Script code: https://gist.github.com/shussekaido/9170498
Reply
#10
shinsen Wrote:
fuchur Wrote:There's already a grease-monkey script to include the stroke-order diagrams that are used in tangorin into the study-pages: http://userscripts.org/scripts/reviews/169652
Thanks! I checked it out and it's awesome. It only works in the Study section though. So I made a version of the script for the Review section:

Script code: https://gist.github.com/shussekaido/9170498
With this, I have exactly the setup I was looking for. Studying kanji is going to be more enjoyable and efficient thanks to you and fuchur.
Reply
#11
Thank you Shinsen! Works perfectly with firefox and greasemonkey. This is really awesome! Up until now I had to open the study-page during review when I was unsure about the stroke order - this is way more efficient!

[ @vileru just to make that clear: I didn't write the initial script, credit for this goes to Faleij from userscripts.org, so you should rather thank him/her ;-) ]
Reply
#12
fuchur Wrote:There's already a grease-monkey script to include the stroke-order diagrams that are used in tangorin into the study-pages: http://userscripts.org/scripts/reviews/169652
The Userscripts website is currently unresponsive (at port 80 and 8080) so I reverse-engineered the resources everyone's provided here and recreated this functionality for the study page: https://gist.github.com/fasiha/3c22598ae3c457ada00a

Thank you everyone!

I am a big fan of the Kanji Stroke Order font, and have used it as a webfont (for my mini-Heisig-quiz-webapp http://fasiha.github.io/randh/ where it weighs in at 17 megs Tongue) but I find Tangorin's sparkline-style diagrams quite beautiful and am trying them out.

(I have a hackish CSS-only script for the Stylish Chrome extension that renders the kanji in Kanji Stroke Order font when it's locally-installed: https://gist.github.com/fasiha/a32ee8e4c3349443293e)

shinsen Wrote:they're SVG, so no big deal for bandwidth
Are the SVGs really much smaller than 4-color PNGs? I see that the HTML to generate the stroke order diagram at http://tangorin.com/kanji/葬 clocks in at 17kb, gzipped down to 1.7 kb, while a color-reduced PNG is 1.9 kb. Maybe you could get a smaller gzipped SVG by combining into a single SVG element instead of several separate ones (though this would sacrifice reflow-capability in browser), but as it is now, the two seem comparable in terms of bandwidth.

(Of course with this Tampermonkey approach we're stealing Tangorin's bandwidth, via Google, not Koohii's...)
Edited: 2014-07-20, 11:15 pm
Reply
#13
You might also be interested in this stroke order format:

http://kanjivg.tagaini.net/viewer.html

I like them as they take a fixed amount of area, they're scalable and small.
Edited: 2014-07-21, 12:43 am
Reply
#14
Here is an updated script that works with both the Review and the Study sections. This way you only need 1 script:
https://gist.github.com/shussekaido/3541...7983f0360d
Reply
#15
I know this is an old post, but in case anyone was wondering, the updated script that shinsen posted on 1 Nov 2014 works beautifully in Tampermonkey for Chrome if you are not a firefox user.
Reply
#16
Just noticing this old thread. I went for the HTML5/SVG + KanjiVG approach to display stroke order in the Kanji Ryokucha app, using a web view. I found a neat SVG trick somewhere to display it as an animation. I can provide more details if anyone's interested.
Reply