Building a Chinese stroke-order practice tool with hanzi-writer

Chinese characters are written using a consistent stroke order. Learners who ignore this order develop slow, untidy handwriting and characters that may not be recognized by handwriting keyboards. To address this, the hanzi-writer JavaScript library offers an animated stroke order practice tool. This post explores the aspects that required additional consideration.

Hanzi-writer generates characters as SVG from stroke data, consisting of outline paths and a median line for each stroke. It provides three learning modes: Animate, displaying each stroke in order, Outline + Trace, showing a faint outline for learners to draw over, and Quiz, hiding the character and comparing the learner's strokes against the expected median with adjustable leniency.

To create a HanziWriter instance, import it from the library and configure the target element, character, dimensions, padding, outline display, and a function to load character data. For a learning website, fetching character data from a CDN can lead to numerous third-party requests and issues when the CDN experiences delays. To mitigate this, serve the data files from a dedicated static path and provide a custom charDataLoader function to fetch the data via fetch and handle the loading or error scenarios.

Creating printable practice sheets is essential for learners who still prefer physical materials. The 米字格 (rice grain grid), featuring a square with diagonal and central guide lines, is a standard practice grid. Due to hanzi-writer's output of SVG, this stroke data can be integrated into a printable grid, with rows for each character, solid cells for initial tracing, faint outlines for tracing, and empty cells for independent practice.

By generating the sheet as SVG within an HTML page and utilizing @media print with a defined A4 size and margins, clean output can be achieved without relying on a PDF library.

Adjusting the leniency of the Quiz mode is crucial. The default setting of 1 may be too stringent for beginners, leading to frustration during the early stages of learning. Increasing the leniency allows for a more forgiving assessment, reducing frustration early on. Additionally, pairing characters with their components, such as the radicals 女 and 子 in 好, aids memorization and comprehension by relating characters to their constituent parts.

The resulting tool, including printable 米字格 sheets, is available on the Chinese handwriting practice page of Tu Vung 123, with the interface in Vietnamese but the writing area being self-explanatory.