skishore / makemeahanzi Goto Github PK

Apologies if I missed this somewhere, but how does one run the 'Make Me a Hanzi Demo' ?

I assume the code is on the 'tool' or 'demo' branches, but a quick step-by-step would be much appreciated...

Can you explain what this means? I find around 173 cases in the dictionary where at least one value in the 'matches' field is null.

I'm sorry I can't fix it myself. I don't know how to do a pull request.

The correct pronuncation for "耶" is "yē", not "yé".

For these two characters: 樂 and 灣, I believe the central component (i.e. 白 and 言) should come before the components either side. See here.

is there any easy way to get rid of the background lines?

Present in inkstone version 0.1.3

I made a derived project from makemeahanzi called animCJK (https://github.com/parsimonhi/animCJK). It contains svg files for the 2136 "jōyō kanji" in use in Japan and the 3500 "frequently used simplified hanzi".

Svg files of animCJK are completely different from svg files of makemeahanzi. However i made two files (graphicsJa.txt and graphicsZhHans.txt) that have the same format as your graphics.txt. So you can import what was changed very easily if you wish it.

Note that many characters (about one third) are not the same in Japanese and in Chinese even when they share the same unicode (different stroke order, different stroke direction, different glyph, ...). So don't merge the two files without care.

Note also that i recomputed all medians in order to be sure that a stroke-width of 128 is sufficient to cover all stroke shapes.

Hope it helps.

is there any way to associate the character data with their corresponding svg? are the svgs named in the same order as they appear in the data files?

Hi thanks for the fantastic library!!

Just wondering why the svg y axes are inverted. It would be nice to render them without applying a transform each time.

Thanks

Hello,

It seems that some errors are in characters below.

題: wrong stroke order (7th stroke)
衆: wrong stroke order (7th stroke)
擊: wrong stroke order (8th stroke)
搖: wrong stroke order (6th stroke)
湧: wrong stroke order (10th stroke)
薦: wrong stroke direction of the last stroke
混: last stroke is damaged (a tiny line can be seen). One can suppress L 934 105 L 896 112 and modify medians accordingly to clear the problem.
轍: the starting point of 19th stroke median is misplaced.
韆: a very small stroke is drawn at the end of the animation.

Hope it helps!

最近遇到要做含有数字 和英文字母的需求，和写汉字笔画一样，想知道怎么解决

Stroke orders for characters such as 問 are different for simplified and traditional Chinese.
See: https://en.wikipedia.org/wiki/Stroke_order

Probably need to adjust the format of graphics.txt to take this into account or create seperate graphics.txt. It might be pretty easy to fix this if the traditional Chinese font do have a different order than the simplified Chinese font for the same character.

In the commit Update SVGs to use capped strokes, it looks like path data was removed from the svgs. Now, the svg are blank.

Also, it might be helpful to include your script that generates the svg files.

Thanks!

Hey,

The program has an issue when writing 候 (traditional character). It writes the leftmost two strokes, then goes to the righttopmost 2 strokes, then the vertical line, then continues normally. I know you have a place where you can correct individiual character but I'm not sure how to do that. Could you correct it or guide me perhaps?

Thanks!

The right part of 翰 is messy.

Onboarding Wikimedia Commons members.

Hello there,
I come from the Stroke Order project and Ancient Chinese Characters project on Wikimedia Commons, I just discovered and really love your project and data, which has a much larger reach that our Stroke Order project.

The SO project was created by graphic designers and so has strong UX / design expertise, we discussed a lot about how to display stroke order efficiently for teaching purposes. We came up with few elegant styles, naming conventions and file formats (300px) :

I would like to work on your open data via nodejs to output png and gif images satisfying Wikimedia projects and our graphic guidelines.

Also, could I ask you for guidance while I explore your work ?

Personal notes:

• Software to submit stroke order : https://www.skishore.me/makemeahanzi/
• Dictionary : https://raw.githubusercontent.com/skishore/makemeahanzi/master/dictionary.txt
• XML database: https://raw.githubusercontent.com/skishore/makemeahanzi/master/graphics.txt 👍
• XML guideline : https://github.com/skishore/makemeahanzi#graphicstxt-keys 💯 ok, I have to play with that.

I'm currently accessing it in my mobile (Android) though the Hanping Chinese app, but it would be great if there was an official app from you guys! Nothing to far from what you have already have, except maybe an extra option to search a character either by typing or drawing them.
Keep up with the good work!

This git repository is enormously huge due to the fact that all svg files are stored in it. Thus a simple git clone takes a very very long time.
It is generally considered bad practice to commit binaries and such.
My suggestion:
Remove the svg files from git and upload them to the release section instead.

Thank you for making this incredible library and open-sourcing it! One possible point of improvement:

Make Me a Hanzi currently clips the end of strokes if it's obscured by another overlapping stroke. It makes sense because this data was extracted from a real font, but this isn't ideal for a few reasons:

• Since the SVG path points are all rounded to the nearest integer this can result in a really thin gap between strokes, especially visible when the character is drawn at a larger size. For example:
• When showing stroke animations, it looks more natural if the full stroke can be drawn first and then a subsequent stroke can be animated on top of the end of a stroke since this is how strokes would be drawn in reality.
• If stroke ends can be added, it makes it possible for some interesting interactive effects like breaking apart a character in 3d (http://wenlincdl.com/) or moving parts of the stroke on click/mouseover (http://wenlincdl.com/demos/explorer). These effects would look strange on strokes with clipped ends.

I think it should be possible to add a realistic stroke end to clipped strokes that won't change the way the character looks after all strokes are drawn, but should look natural when the stroke is viewed in isolation and fix the issues brought up above. Maybe it could work by trying to fit a stroke end from other similar-looking strokes such that the fitted end is fully obscured by the stroke drawn on top.

Stroke order for "嗡" should be "竖、横折、横、撇、捺、撇折、点、横折钩、点、提、横折钩、点、提", but when you write like “竖、横折、横、撇、捺、撇折、点、横折钩、横折钩、点、提、点、提”， you can still get "嗡" at first place. There are other characters like "嗡" with complex orders have same issue.

From email:

Typo:

Added clarity for paired characters:

Distinguish similar characters/readings:

Sorry to open again a closed issue (see issue #51).

In a simplified Chinese context, in 再 (as many others such as 冉鞲遘 etc.) the vertical stroke should be drawn 4th and horizontal stroke 5th. See for instance:

bihua.51240.com
archchinese.com

In a traditional Chinese context, the horizontal stroke is drawn before the vertical one. See for instance:

http://stroke-order.learningweb.moe.edu.tw/character.do

Note that archchinese.com (which is displaying both simplified and traditional Chinese) is not always consistent for characters that contain this component. Some of them have the horizontal stroke drawn before the vertical one (especially those that are not simplified characters such as 購).

As a result, in makemeahanzi, i think that the vertical stroke should be written before the horizontal one since it assumes using a simplified Chinese context.

What is a simplified Chinese context or a traditional Chinese is a difficult subject. Roughly, when the html lang attribute is "zh-hans" or "zh-cn" or "zh-sg", this is a simplified Chinese context. Otherwise, this is a traditional Chinese context, excepting when the lang attribute is just "zh": in such a case, the question is open :-) (otherwise, it should be too simple).

What happens when one want to draw a traditional character in a simplified context (or a simplified character in a traditional context) is another burden. It seems that in such a case, most of the time (i am still researching what is really done most of the time), the traditional character may be "modified" and get a simplified-like stroke order (i.e. vertical stroke before horizontal one for 4th and 5th strokes of 再 when it appears as a component of a traditional character). See for instance https://bihua.51240.com/e8b3bc__bihuachaxun/ for 購 character.

Also, the traditional character may have two different glyphs: one in a simplified Chinese context and another one in a traditional Chinese context (such as characters that contain the 艹 (艸) component). For instance, 莧 (decimal unicode 33703) is a traditional character. It ha a simplified form: 苋 (decimal unicode 33483). When 莧 is drawn in a traditional context, the 艹 has (most of the time?) 4 strokes. But when it is drawn in a simplified context, it has (most of the time?) only 3 strokes, even when one uses the traditional character. You can test it using for instance the noto font, and displaying a html page containing <div lang="zh-hans">莧</div> and <div lang="zh-hant">莧</div>.

Finally, note that even people from mainland China, in a simplified Chinese context, draw the horizontal stroke before the vertical one as the 4th stroke of 再. I just tested "again" :-) that point with some Chinese relatives at home 10mn ago.

Hope it helps!

Hey, I'm trying to correct the stroke order for 爾 (swap fifth and sixth strokes) and I'm running in to a small issue.

I'm able to correct the stroke order, which marks a few downstream characters as incomplete. I'm able to complete all but one, 瀰, which gets stuck on Incomplete components: 㳽.

㳽 is not in either font, and I don't think it's part of another character, so I'm not sure how to proceed. Any suggestions?

Wrong stroke order in the 𠂊⺀part of 瑤謠遙 and possibly in other characters that contain the same component.

搖 and 鷂 have already the correct stroke order.

It's not clear to me whether the 6th stroke should be the horizontal or vertical one. Need a reference to determine the correct order here which we can then use consistently.

It may sounds silly...

But your technology could be used on simplier alphabets such as latin, greek, arabic, thai, etc. These alphabets may themselves have variants: lower case, upper cases, cursive.

Down stream usages such as Hanzi-writer could be helpful for these languages as well. (cc @chanind )

As for doing it, most of them would require modest workload, to define further (find a font, vectorise, break in stroke, define the path), but I wanted raise the idea.

As the question in the title, what is the meaning of the number in SVG file names? I have no idea on how to map this number to the character code, or the character index in the word-list files.

Thanks!

Please check it

Hey skishore!

I can't figure out how to use the tool branch. I'm able to run the local server, but all I see is this page:

Are there any instructions? Please forgive me if I'm missing something obvious. I want to add data for some characters that are missing from graphics.txt, but I'm stuck at this screen! :)

Hi! The demo website has the best browser based pen input I've ever seen. Could you explain what library this is?

Horizontal first, then vertical.

这个字体是什么字体呢？

The stroke order for 覽 seems very strange, please check.

Related project : https://chanind.github.io/hanzi-writer/
Quite impressive as it provide a skritter-like quizz technology.
PS: Your project is awesome !

I'm using Window 10. I checkout the tool branch, had installed mongodb and Meteor, but I can not run it normal. Can you help me?

http://localhost:3000/

F:\HSK\makemeahanzi-b-tool.meteor\local\build\programs\server\app\app.js:4808
if (error) throw error; // 68
^

Error: ENOENT: no such file or directory, open 'F:\HSK\makemeahanzi-b-tool.meteor\cjklib\characterdecomposition.csv'
at Error (native)
Exited with code: 1
Your application is crashing. Waiting for file change.

Makemeahanzi-tool是一个非常有用的工具。
十分感谢。
但因为没有文档，使用起来感觉很困惑。
能提供一份较为详细的文档吗？Thanks

Please don't stone me 😆

But it is considered like a CJK sign for 0 by Wikipedia (right side, bottom of table).

So does the MOOC course I code for.

Do we have a source for this sign's stroke order ?
Do we accept the Korean way ?

Pls check it.

Hello,

The stroke order of the 刀 component in 賴瀨懶籟癩 seems incorrect.

Hope it helps!

The character 鍊 is often used as the traditional form of 炼 (锻炼 is HSK3)

I want to add new characters like Hirigana to my project and I have SVG path data for them.

Can I generate the medians from SVG data? If so, how?

Say if I have the character 一

With Path Data "M 518 382 Q 572 385 623 389 Q 758 399 900 383 Q 928 379 935 390 Q 944 405 930 419 Q 896 452 845 475 Q 829 482 798 473 Q 723 460 480 434 Q 180 409 137 408 Q 130 408 124 408 Q 108 408 106 395 Q 105 380 127 363 Q 146 348 183 334 Q 195 330 216 338 Q 232 344 306 354 Q 400 373 518 382 Z"

How do you get

"medians":[
[
[121,393],
[193,372],
[417,402],
[827,434],
[920,401]
]
]

Many Thanks, and Thanks for this project!

Hello,

First at all, congratulations for the great job you did.

It seems that animation doesn't start when using Firefox and svg files (i tested it using a simple page containing <body><embed src="31119.svg" width="200px" height="200px"/></body>).

To solve the issue, i just removed the "scoped" attribute from the "style" tag from the svg files. May be Firefox has this strange behavior because it does something with this attribute et is buggy while other browsers just ignore it.

In graphics.txt, the strokes for 為 actually produce the archaic 爲. So the character for this entry should be updated to 爲, and a new entry should be created for 為. (the decimal for 為 is 28858, take a look at 28858.svg)

I love this project btw, thanks for all of your hard work! 😄

In 摟, part of the 14th stroke is wrongly drawn with the 13th stroke.

Hey,

I was wondering how did you generate the SVGs (from the "svgs" folder), from the graphics.txt ? Do you have some kind of script somewhere you could share ?

I tried to match all lines of graphics.txt to files in the svgs folder, but it seems that, when you order the svg files by "number" ASC, some files doesn't match the line in graphics.txt.

Regards,
Quentin

衢 has to be drawn from left to right (4th, 5th and 6th must be moved to the end).

Other characters that have the same kind of decomposition (i.e. ⿲彳*彳) seem ok.

I find it much easier to work with non-animated stroke order diagrams because I can just take my time and don't have to watch an animation over and over again.
Would it be possible to generate diagrams like this with makemeahanzi?