DOCSEARCHbyAlgolia
Submit Docs

Make Me a Hanzi

repository·master·Indexed 25 days ago

https://github.com/skishore/makemeahanzi

A data provider for Chinese character dictionary information and stroke-order graphical data for over 9000 simplified and traditional characters. Includes linguistic data in dictionary.txt and SVG path data and medians in graphics.txt, along with experimental animated SVGs.

Tokens
769
Snippets
2
Records
5
Agent score
33%

What's inside Make Me a Hanzi

  1. Render stroke paths correctly in SVG

    master

    Because the y-axis in the graphics.txt coordinate system decreases as you move downwards, you must apply a specific transformation to render the SVG paths correctly. Use the following pattern:

    <svg viewBox="0 0 1024 1024">
  <g transform="scale(1, -1) translate(0, -900)">
    <path d="STROKE_DATA_HERE"></path>
  </g>
</svg>
    <svg viewBox="0 0 1024 1024">
  <g transform="scale(1, -1) translate(0, -900)">
    <path d="STROKE[0] DATA GOES HERE"></path>
    <path d="STROKE[1] DATA GOES HERE"></path>
    ...
  </g>
</svg>

  2. Download Make Me a Hanzi data files

    master

    Make Me a Hanzi provides dictionary and graphical data for over 9000 common simplified and traditional Chinese characters. The data is split into two primary files which can be joined using the character key:

    1. dictionary.txt: Contains linguistic data (definitions, pinyin, decomposition, etc.).
    2. graphics.txt: Contains stroke-order vector graphics and medians.

    An experimental tarball of animated SVGs, svgs.tar.gz, is also available.

  3. Use experimental animated SVGs

    master

    The project provides an experimental set of animated SVGs in svgs.tar.gz. Each SVG is named by the Unicode codepoint of the character.

    To find the filename for a character x in JavaScript, use x.charCodeAt(0).

    Example of embedding an SVG:

    <body><embed src="31119.svg" width="200px" height="200px"/></body>
    <body><embed src="31119.svg" width="200px" height="200px"/></body>

  4. Understand the graphics.txt data format

    master

    The graphics.txt file is a newline-separated list of JSON objects. Each object represents a character with the following keys:

    • character (Required): The Unicode character for the glyph.
    • strokes (Required): A list of SVG path data for each stroke, ordered by proper stroke order. Coordinates are on a 1024x1024 system where the upper-left is (0, 900) and lower-right is (1024, -124). Note that the y-axis decreases as you move downwards.
    • medians (Required): A list of stroke medians (list of integer pairs) used for stroke-order animations.

  5. Understand the dictionary.txt data format

    master

    The dictionary.txt file is a newline-separated list of JSON objects. Each object represents a character with the following keys:

    • character (Required): The Unicode character for the glyph.
    • definition (Optional): A string definition for second-language learners.
    • pinyin (Required): A comma-separated list of string pronunciations.
    • decomposition (Required): An Ideograph Description Sequence (IDS) decomposition. Note: invalid if it starts with a full-width question mark ？.
    • etymology (Optional): An object containing etymology info. If present, it includes a type (ideographic, pictographic, or pictophonetic).
      • For pictophonetic types, it includes hint, phonetic, and semantic fields.
    • radical (Required): The Unicode primary radical.
    • matches (Optional): A list of mappings from strokes to their component indices in the decomposition tree (e.g., [1, 0]).