#How To: Extend Glyph-Groups

The Glyphs selection UI-widget has some entries that are curated via a YAML formated text file lib/assets/glyph-groups.yaml. The data is however loaded by the application from a JSON formatted file lib/assets/glyph-groups.json. The main reason for YAML as human input is that YAML can contain comments, which help to describe the expected data and to explain the actual data. The reason for JSON for reading by the application is that it’s a format that can be read natively in a Browser without an extra dependency.

#The YAML format

The data expected in the YAML formatted is also described as a comment directly in the file lib/assets/glyph-groups.yaml

Character groupings can be one or two levels deep (see Latin > Symbols)

Two ways of handling “extended” character sets:

1. For simple one-to-many character extensions (e.g. accented Latin letters), add them to the global “_extended” list at the bottom. These will be expanded “in place” automatically whenever that character is encountered in a character set.
2. For custom extensions (e.g. currency symbols) include “_default” and “_extended” strings under each label

Here’s an excerpt from the file, .

Latin:
    Uppercase: ABCDEFGHIJKLMNOPQRSTUVWXYZ&
    Lowercase: abcdefghijklmnopqrstuvwxyz
    Mixed: DžLjNjlj
    ASCII: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789<([{@#$%&?!/|\\\"~`*^':;.,)]}>"
    Latin-1: " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~\u00A0¡¢£¤¥¦§¨©ª«¬\u00AD®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ"
    Symbols:
        Punctuation: ',-.:;…∙·!¡?¿–—―‐'
        Reference: '*§¶†‡•'
        Quotation: "\"'“”‚„‹›«»′″"
        Parenthetical: '()[]{}'
        Math: '+÷×−±<>≤≥≈≠=^~¬∕­/'
        Commercial: '®©™#@⁒ʹʺ/\¦|_№⟨⟩µ⁄'
Greek:
    Uppercase: ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ
    Lowercase: αβγδεζηθικλμνξοπρστυφχψως
Cyrillic:
    Uppercase: АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
    Lowercase: абвгдежзийклмнопрстуфхцчшщъыьэюя
# [...]
_extended:
    # YAML evaluates Y/N/y/n as true and false, so we have to put quotes around those
    A: ÀÁÂÃÄÅĀĂǺȀȂĄẠẢẤẦẨẪẬẮẰẲẴẶÆǼ
    C: ÇĆĈĊČ
    D: ĎÐĐDŽDž
    E: ÈÉÊËĒĔĖĘĚȄȆẸẺẼẾỀỂỄỆÆǼŒƏ
    G: ĜĞĠĢǦ
    H: ĤĦ
# [...]

#YAML Format Tips

• Indentation is important! Four spaces.
• Most strings can be unquoted, unless they contain quotes or some other punctuation. If in doubt, you can quote (single or double)
• Unquoted single characters Y/N/y/n are synonyms for True and False in YAML, so they should be quoted if used

#Example: Adding “Latin-1”

Latin-1 is also known as ISO/IEC 8859-1 and an explanation can be found on Wikipedia, where we can also find a table with all the contents:

• SP is the (Space character)[https://en.wikipedia.org/wiki/Space_character], we enter it as the literal space character: .
• NBSP is the (Non-breaking space)[https://en.wikipedia.org/wiki/NBSP], it is entered by its Unicode escape sequence \u00A0.
• SHY is the (Soft hyphen)[https://en.wikipedia.org/wiki/Soft_hyphen], it is entered by its Unicode escape sequence \u00AD.
• To be able to include the double quote " it must be escaped as \"
• The escape character \ must be escaped as well \\

All together, we arrive at the data string, which is put into quotes:

" !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~\u00A0¡¢£¤¥¦§¨©ª«¬\u00AD®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ"

Within the YAML, the category “Latin” is the right superior category to “Latin-1” and as a computer encoding it makes sense to put it next to “ASCII”:

Latin:
    # [...]
    ASCII: # [...]
    Latin-1: # Add data here

#Generate the JSON Format

If you don’t have the yq command on your system we can help with generating the yaml in your pull request.

$ yq glyph-groups.yaml -o json > glyph-groups.json