mappingTool.html

<style>
  #groups {
    border: 1px solid black;
    max-height: 300px;
    overflow: scroll;
  }
  #form {
    display: flex;
    flex-direction: row;
  }
  .form-part {
    margin-right: 20px;
  }
  #example span {
    border-radius: 20px;
    cursor: default;
  }
  #example-input {
    width: 500px;
    margin-bottom: 20px;
  }
  #result {
    width: 100%;
    height: 300px;
  }
</style>

<script>
  var base64chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

  var base64codes = {};
  for (var index = 0; index < base64chars.length; index++) {
    base64codes[base64chars[index]] = index;
  }

  function floatToBase64(number) {
    if (number >= 64) {
      console.log('width is greater than 64 pixels, this is limitation');
    }
    var integer = Math.floor(number);
    var fractional = number - integer;
    var fract64 = Math.floor(64 * fractional);
    return base64chars[integer] + base64chars[fract64];
  }

  function base64ToFloat(str) {
    var integer = base64codes[str[0]];
    var fract64 = base64codes[str[1]];
    var fractional = fract64 / 64;
    return integer + fractional;
  }

  var unicodeGroups = [
    { id: 'basic-latin', label: 'Basic Latin', start: 0x0, end: 0x7f },
    { id: 'latin-1-supplement', label: 'Latin-1 Supplement', start: 0x80, end: 0xff },
    { id: 'latin-extended-a', label: 'Latin Extended-A', start: 0x100, end: 0x17f },
    { id: 'latin-extended-b', label: 'Latin Extended-B', start: 0x180, end: 0x24f },
    { id: 'ipa-extensions', label: 'IPA Extensions', start: 0x250, end: 0x2af },
    { id: 'spacing-modifier-letters', label: 'Spacing Modifier Letters', start: 0x2b0, end: 0x2ff },
    {
      id: 'combining-diacritical-marks',
      label: 'Combining Diacritical Marks',
      start: 0x300,
      end: 0x36f,
    },
    { id: 'greek-and-coptic', label: 'Greek and Coptic', start: 0x370, end: 0x3ff },
    { id: 'cyrillic', label: 'Cyrillic', start: 0x400, end: 0x4ff },
    { id: 'cyrillic-supplement', label: 'Cyrillic Supplement', start: 0x500, end: 0x527 },
    { id: 'armenian', label: 'Armenian', start: 0x531, end: 0x58a },
    { id: 'hebrew', label: 'Hebrew', start: 0x591, end: 0x5f4 },
    { id: 'arabic', label: 'Arabic', start: 0x600, end: 0x6ff },
    { id: 'syriac', label: 'Syriac', start: 0x700, end: 0x74f },
    { id: 'arabic-supplement', label: 'Arabic Supplement', start: 0x750, end: 0x77f },
    { id: 'thaana', label: 'Thaana', start: 0x780, end: 0x7b1 },
    { id: 'nko', label: 'NKo', start: 0x7c0, end: 0x7fa },
    { id: 'samaritan', label: 'Samaritan', start: 0x800, end: 0x83e },
    { id: 'mandaic', label: 'Mandaic', start: 0x840, end: 0x85e },
    { id: 'devanagari', label: 'Devanagari', start: 0x900, end: 0x97f },
    { id: 'bengali', label: 'Bengali', start: 0x981, end: 0x9fb },
    { id: 'gurmukhi', label: 'Gurmukhi', start: 0xa01, end: 0xa75 },
    { id: 'gujarati', label: 'Gujarati', start: 0xa81, end: 0xaf1 },
    { id: 'oriya', label: 'Oriya', start: 0xb01, end: 0xb77 },
    { id: 'tamil', label: 'Tamil', start: 0xb82, end: 0xbfa },
    { id: 'telugu', label: 'Telugu', start: 0xc01, end: 0xc7f },
    { id: 'kannada', label: 'Kannada', start: 0xc82, end: 0xcf2 },
    { id: 'malayalam', label: 'Malayalam', start: 0xd02, end: 0xd7f },
    { id: 'sinhala', label: 'Sinhala', start: 0xd82, end: 0xdf4 },
    { id: 'thai', label: 'Thai', start: 0xe01, end: 0xe5b },
    { id: 'lao', label: 'Lao', start: 0xe81, end: 0xedd },
    { id: 'tibetan', label: 'Tibetan', start: 0xf00, end: 0xfda },
    { id: 'myanmar', label: 'Myanmar', start: 0x1000, end: 0x109f },
    { id: 'georgian', label: 'Georgian', start: 0x10a0, end: 0x10fc },
    { id: 'hangul-jamo', label: 'Hangul Jamo', start: 0x1100, end: 0x11ff },
    { id: 'ethiopic', label: 'Ethiopic', start: 0x1200, end: 0x137c },
    { id: 'ethiopic-supplement', label: 'Ethiopic Supplement', start: 0x1380, end: 0x1399 },
    { id: 'cherokee', label: 'Cherokee', start: 0x13a0, end: 0x13f4 },
    {
      id: 'unified-canadian-aboriginal-syllabics',
      label: 'Unified Canadian Aboriginal Syllabics',
      start: 0x1400,
      end: 0x167f,
    },
    { id: 'ogham', label: 'Ogham', start: 0x1680, end: 0x169c },
    { id: 'runic', label: 'Runic', start: 0x16a0, end: 0x16f0 },
    { id: 'tagalog', label: 'Tagalog', start: 0x1700, end: 0x1714 },
    { id: 'hanunoo', label: 'Hanunoo', start: 0x1720, end: 0x1736 },
    { id: 'buhid', label: 'Buhid', start: 0x1740, end: 0x1753 },
    { id: 'tagbanwa', label: 'Tagbanwa', start: 0x1760, end: 0x1773 },
    { id: 'khmer', label: 'Khmer', start: 0x1780, end: 0x17f9 },
    { id: 'mongolian', label: 'Mongolian', start: 0x1800, end: 0x18aa },
    {
      id: 'unified-canadian-aboriginal-syllabics-extended',
      label: 'Unified Canadian Aboriginal Syllabics Extended',
      start: 0x18b0,
      end: 0x18f5,
    },
    { id: 'limbu', label: 'Limbu', start: 0x1900, end: 0x194f },
    { id: 'tai-le', label: 'Tai Le', start: 0x1950, end: 0x1974 },
    { id: 'new-tai-lue', label: 'New Tai Lue', start: 0x1980, end: 0x19df },
    { id: 'khmer-symbols', label: 'Khmer Symbols', start: 0x19e0, end: 0x19ff },
    { id: 'buginese', label: 'Buginese', start: 0x1a00, end: 0x1a1f },
    { id: 'tai-tham', label: 'Tai Tham', start: 0x1a20, end: 0x1aad },
    { id: 'balinese', label: 'Balinese', start: 0x1b00, end: 0x1b7c },
    { id: 'sundanese', label: 'Sundanese', start: 0x1b80, end: 0x1bb9 },
    { id: 'batak', label: 'Batak', start: 0x1bc0, end: 0x1bff },
    { id: 'lepcha', label: 'Lepcha', start: 0x1c00, end: 0x1c4f },
    { id: 'ol-chiki', label: 'Ol Chiki', start: 0x1c50, end: 0x1c7f },
    { id: 'vedic-extensions', label: 'Vedic Extensions', start: 0x1cd0, end: 0x1cf2 },
    { id: 'phonetic-extensions', label: 'Phonetic Extensions', start: 0x1d00, end: 0x1d7f },
    {
      id: 'phonetic-extensions-supplement',
      label: 'Phonetic Extensions Supplement',
      start: 0x1d80,
      end: 0x1dbf,
    },
    {
      id: 'combining-diacritical-marks-supplement',
      label: 'Combining Diacritical Marks Supplement',
      start: 0x1dc0,
      end: 0x1dff,
    },
    {
      id: 'latin-extended-additional',
      label: 'Latin Extended Additional',
      start: 0x1e00,
      end: 0x1eff,
    },
    { id: 'greek-extended', label: 'Greek Extended', start: 0x1f00, end: 0x1ffe },
    { id: 'general-punctuation', label: 'General Punctuation', start: 0x2000, end: 0x206f },
    {
      id: 'superscripts-and-subscripts',
      label: 'Superscripts and Subscripts',
      start: 0x2070,
      end: 0x209c,
    },
    { id: 'currency-symbols', label: 'Currency Symbols', start: 0x20a0, end: 0x20b9 },
    {
      id: 'combining-diacritical-marks-for-symbols',
      label: 'Combining Diacritical Marks for Symbols',
      start: 0x20d0,
      end: 0x20f0,
    },
    { id: 'letterlike-symbols', label: 'Letterlike Symbols', start: 0x2100, end: 0x214f },
    { id: 'number-forms', label: 'Number Forms', start: 0x2150, end: 0x2189 },
    { id: 'arrows', label: 'Arrows', start: 0x2190, end: 0x21ff },
    { id: 'mathematical-operators', label: 'Mathematical Operators', start: 0x2200, end: 0x22ff },
    { id: 'miscellaneous-technical', label: 'Miscellaneous Technical', start: 0x2300, end: 0x23f3 },
    { id: 'control-pictures', label: 'Control Pictures', start: 0x2400, end: 0x2426 },
    {
      id: 'optical-character-recognition',
      label: 'Optical Character Recognition',
      start: 0x2440,
      end: 0x244a,
    },
    { id: 'enclosed-alphanumerics', label: 'Enclosed Alphanumerics', start: 0x2460, end: 0x24ff },
    { id: 'box-drawing', label: 'Box Drawing', start: 0x2500, end: 0x257f },
    { id: 'block-elements', label: 'Block Elements', start: 0x2580, end: 0x259f },
    { id: 'geometric-shapes', label: 'Geometric Shapes', start: 0x25a0, end: 0x25ff },
    { id: 'miscellaneous-symbols', label: 'Miscellaneous Symbols', start: 0x2600, end: 0x26ff },
    { id: 'dingbats', label: 'Dingbats', start: 0x2701, end: 0x27bf },
    {
      id: 'miscellaneous-mathematical-symbols-a',
      label: 'Miscellaneous Mathematical Symbols-A',
      start: 0x27c0,
      end: 0x27ef,
    },
    { id: 'supplemental-arrows-a', label: 'Supplemental Arrows-A', start: 0x27f0, end: 0x27ff },
    { id: 'braille-patterns', label: 'Braille Patterns', start: 0x2800, end: 0x28ff },
    { id: 'supplemental-arrows-b', label: 'Supplemental Arrows-B', start: 0x2900, end: 0x297f },
    {
      id: 'miscellaneous-mathematical-symbols-b',
      label: 'Miscellaneous Mathematical Symbols-B',
      start: 0x2980,
      end: 0x29ff,
    },
    {
      id: 'supplemental-mathematical-operators',
      label: 'Supplemental Mathematical Operators',
      start: 0x2a00,
      end: 0x2aff,
    },
    {
      id: 'miscellaneous-symbols-and-arrows',
      label: 'Miscellaneous Symbols and Arrows',
      start: 0x2b00,
      end: 0x2b59,
    },
    { id: 'glagolitic', label: 'Glagolitic', start: 0x2c00, end: 0x2c5e },
    { id: 'latin-extended-c', label: 'Latin Extended-C', start: 0x2c60, end: 0x2c7f },
    { id: 'coptic', label: 'Coptic', start: 0x2c80, end: 0x2cff },
    { id: 'georgian-supplement', label: 'Georgian Supplement', start: 0x2d00, end: 0x2d25 },
    { id: 'tifinagh', label: 'Tifinagh', start: 0x2d30, end: 0x2d7f },
    { id: 'ethiopic-extended', label: 'Ethiopic Extended', start: 0x2d80, end: 0x2dde },
    { id: 'cyrillic-extended-a', label: 'Cyrillic Extended-A', start: 0x2de0, end: 0x2dff },
    {
      id: 'supplemental-punctuation',
      label: 'Supplemental Punctuation',
      start: 0x2e00,
      end: 0x2e31,
    },
    { id: 'cjk-radicals-supplement', label: 'CJK Radicals Supplement', start: 0x2e80, end: 0x2ef3 },
    { id: 'kangxi-radicals', label: 'Kangxi Radicals', start: 0x2f00, end: 0x2fd5 },
    {
      id: 'ideographic-description-characters',
      label: 'Ideographic Description Characters',
      start: 0x2ff0,
      end: 0x2ffb,
    },
    {
      id: 'cjk-symbols-and-punctuation',
      label: 'CJK Symbols and Punctuation',
      start: 0x3000,
      end: 0x303f,
    },
    { id: 'hiragana', label: 'Hiragana', start: 0x3041, end: 0x309f },
    { id: 'katakana', label: 'Katakana', start: 0x30a0, end: 0x30ff },
    { id: 'bopomofo', label: 'Bopomofo', start: 0x3105, end: 0x312d },
    {
      id: 'hangul-compatibility-jamo',
      label: 'Hangul Compatibility Jamo',
      start: 0x3131,
      end: 0x318e,
    },
    { id: 'kanbun', label: 'Kanbun', start: 0x3190, end: 0x319f },
    { id: 'bopomofo-extended', label: 'Bopomofo Extended', start: 0x31a0, end: 0x31ba },
    { id: 'cjk-strokes', label: 'CJK Strokes', start: 0x31c0, end: 0x31e3 },
    {
      id: 'katakana-phonetic-extensions',
      label: 'Katakana Phonetic Extensions',
      start: 0x31f0,
      end: 0x31ff,
    },
    {
      id: 'enclosed-cjk-letters-and-months',
      label: 'Enclosed CJK Letters and Months',
      start: 0x3200,
      end: 0x32fe,
    },
    { id: 'cjk-compatibility', label: 'CJK Compatibility', start: 0x3300, end: 0x33ff },
    {
      id: 'cjk-unified-ideographs-extension-a',
      label: 'CJK Unified Ideographs Extension A',
      start: 0x3400,
      end: 0x4db5,
    },
    { id: 'yijing-hexagram-symbols', label: 'Yijing Hexagram Symbols', start: 0x4dc0, end: 0x4dff },
    { id: 'cjk-unified-ideographs', label: 'CJK Unified Ideographs', start: 0x4e00, end: 0x9fcb },
    { id: 'yi-syllables', label: 'Yi Syllables', start: 0xa000, end: 0xa48c },
    { id: 'yi-radicals', label: 'Yi Radicals', start: 0xa490, end: 0xa4c6 },
    { id: 'lisu', label: 'Lisu', start: 0xa4d0, end: 0xa4ff },
    { id: 'vai', label: 'Vai', start: 0xa500, end: 0xa62b },
    { id: 'cyrillic-extended-b', label: 'Cyrillic Extended-B', start: 0xa640, end: 0xa697 },
    { id: 'bamum', label: 'Bamum', start: 0xa6a0, end: 0xa6f7 },
    { id: 'modifier-tone-letters', label: 'Modifier Tone Letters', start: 0xa700, end: 0xa71f },
    { id: 'latin-extended-d', label: 'Latin Extended-D', start: 0xa720, end: 0xa7ff },
    { id: 'syloti-nagri', label: 'Syloti Nagri', start: 0xa800, end: 0xa82b },
    {
      id: 'common-indic-number-forms',
      label: 'Common Indic Number Forms',
      start: 0xa830,
      end: 0xa839,
    },
    { id: 'phags-pa', label: 'Phags-pa', start: 0xa840, end: 0xa877 },
    { id: 'saurashtra', label: 'Saurashtra', start: 0xa880, end: 0xa8d9 },
    { id: 'devanagari-extended', label: 'Devanagari Extended', start: 0xa8e0, end: 0xa8fb },
    { id: 'kayah-li', label: 'Kayah Li', start: 0xa900, end: 0xa92f },
    { id: 'rejang', label: 'Rejang', start: 0xa930, end: 0xa95f },
    { id: 'hangul-jamo-extended-a', label: 'Hangul Jamo Extended-A', start: 0xa960, end: 0xa97c },
    { id: 'javanese', label: 'Javanese', start: 0xa980, end: 0xa9df },
    { id: 'cham', label: 'Cham', start: 0xaa00, end: 0xaa5f },
    { id: 'myanmar-extended-a', label: 'Myanmar Extended-A', start: 0xaa60, end: 0xaa7b },
    { id: 'tai-viet', label: 'Tai Viet', start: 0xaa80, end: 0xaadf },
    { id: 'ethiopic-extended-a', label: 'Ethiopic Extended-A', start: 0xab01, end: 0xab2e },
    { id: 'meetei-mayek', label: 'Meetei Mayek', start: 0xabc0, end: 0xabf9 },
    { id: 'hangul-syllables', label: 'Hangul Syllables', start: 0xac00, end: 0xd7a3 },
    { id: 'hangul-jamo-extended-b', label: 'Hangul Jamo Extended-B', start: 0xd7b0, end: 0xd7fb },
    { id: 'high-surrogates', label: 'High Surrogates', start: 0xd800, end: 0xdb7f },
    {
      id: 'high-private-use-surrogates',
      label: 'High Private Use Surrogates',
      start: 0xdb80,
      end: 0xdbff,
    },
    { id: 'low-surrogates', label: 'Low Surrogates', start: 0xdc00, end: 0xdfff },
    { id: 'private-use-area', label: 'Private Use Area', start: 0xe000, end: 0xf8ff },
    {
      id: 'cjk-compatibility-ideographs',
      label: 'CJK Compatibility Ideographs',
      start: 0xf900,
      end: 0xfad9,
    },
    {
      id: 'alphabetic-presentation-forms',
      label: 'Alphabetic Presentation Forms',
      start: 0xfb00,
      end: 0xfb4f,
    },
    {
      id: 'arabic-presentation-forms-a',
      label: 'Arabic Presentation Forms-A',
      start: 0xfb50,
      end: 0xfdfd,
    },
    { id: 'variation-selectors', label: 'Variation Selectors', start: 0xfe00, end: 0xfe0f },
    { id: 'vertical-forms', label: 'Vertical Forms', start: 0xfe10, end: 0xfe19 },
    { id: 'combining-half-marks', label: 'Combining Half Marks', start: 0xfe20, end: 0xfe26 },
    { id: 'cjk-compatibility-forms', label: 'CJK Compatibility Forms', start: 0xfe30, end: 0xfe4f },
    { id: 'small-form-variants', label: 'Small Form Variants', start: 0xfe50, end: 0xfe6b },
    {
      id: 'arabic-presentation-forms-b',
      label: 'Arabic Presentation Forms-B',
      start: 0xfe70,
      end: 0xfeff,
    },
    {
      id: 'halfwidth-and-fullwidth-forms',
      label: 'Halfwidth and Fullwidth Forms',
      start: 0xff01,
      end: 0xffee,
    },
    { id: 'specials', label: 'Specials', start: 0xfff9, end: 0xfffd },
    { id: 'linear-b-syllabary', label: 'Linear B Syllabary', start: 0x10000, end: 0x1005d },
    { id: 'linear-b-ideograms', label: 'Linear B Ideograms', start: 0x10080, end: 0x100fa },
    { id: 'aegean-numbers', label: 'Aegean Numbers', start: 0x10100, end: 0x1013f },
    { id: 'ancient-greek-numbers', label: 'Ancient Greek Numbers', start: 0x10140, end: 0x1018a },
    { id: 'ancient-symbols', label: 'Ancient Symbols', start: 0x10190, end: 0x1019b },
    { id: 'phaistos-disc', label: 'Phaistos Disc', start: 0x101d0, end: 0x101fd },
    { id: 'lycian', label: 'Lycian', start: 0x10280, end: 0x1029c },
    { id: 'carian', label: 'Carian', start: 0x102a0, end: 0x102d0 },
    { id: 'old-italic', label: 'Old Italic', start: 0x10300, end: 0x10323 },
    { id: 'gothic', label: 'Gothic', start: 0x10330, end: 0x1034a },
    { id: 'ugaritic', label: 'Ugaritic', start: 0x10380, end: 0x1039f },
    { id: 'old-persian', label: 'Old Persian', start: 0x103a0, end: 0x103d5 },
    { id: 'deseret', label: 'Deseret', start: 0x10400, end: 0x1044f },
    { id: 'shavian', label: 'Shavian', start: 0x10450, end: 0x1047f },
    { id: 'osmanya', label: 'Osmanya', start: 0x10480, end: 0x104a9 },
    { id: 'cypriot-syllabary', label: 'Cypriot Syllabary', start: 0x10800, end: 0x1083f },
    { id: 'imperial-aramaic', label: 'Imperial Aramaic', start: 0x10840, end: 0x1085f },
    { id: 'phoenician', label: 'Phoenician', start: 0x10900, end: 0x1091f },
    { id: 'lydian', label: 'Lydian', start: 0x10920, end: 0x1093f },
    { id: 'kharoshthi', label: 'Kharoshthi', start: 0x10a00, end: 0x10a58 },
    { id: 'old-south-arabian', label: 'Old South Arabian', start: 0x10a60, end: 0x10a7f },
    { id: 'avestan', label: 'Avestan', start: 0x10b00, end: 0x10b3f },
    { id: 'inscriptional-parthian', label: 'Inscriptional Parthian', start: 0x10b40, end: 0x10b5f },
    { id: 'inscriptional-pahlavi', label: 'Inscriptional Pahlavi', start: 0x10b60, end: 0x10b7f },
    { id: 'old-turkic', label: 'Old Turkic', start: 0x10c00, end: 0x10c48 },
    { id: 'rumi-numeral-symbols', label: 'Rumi Numeral Symbols', start: 0x10e60, end: 0x10e7e },
    { id: 'brahmi', label: 'Brahmi', start: 0x11000, end: 0x1106f },
    { id: 'kaithi', label: 'Kaithi', start: 0x11080, end: 0x110c1 },
    { id: 'cuneiform', label: 'Cuneiform', start: 0x12000, end: 0x1236e },
    {
      id: 'cuneiform-numbers-and-punctuation',
      label: 'Cuneiform Numbers and Punctuation',
      start: 0x12400,
      end: 0x12473,
    },
    { id: 'egyptian-hieroglyphs', label: 'Egyptian Hieroglyphs', start: 0x13000, end: 0x1342e },
    { id: 'bamum-supplement', label: 'Bamum Supplement', start: 0x16800, end: 0x16a38 },
    { id: 'kana-supplement', label: 'Kana Supplement', start: 0x1b000, end: 0x1b001 },
    {
      id: 'byzantine-musical-symbols',
      label: 'Byzantine Musical Symbols',
      start: 0x1d000,
      end: 0x1d0f5,
    },
    { id: 'musical-symbols', label: 'Musical Symbols', start: 0x1d100, end: 0x1d1dd },
    {
      id: 'ancient-greek-musical-notation',
      label: 'Ancient Greek Musical Notation',
      start: 0x1d200,
      end: 0x1d245,
    },
    { id: 'tai-xuan-jing-symbols', label: 'Tai Xuan Jing Symbols', start: 0x1d300, end: 0x1d356 },
    { id: 'counting-rod-numerals', label: 'Counting Rod Numerals', start: 0x1d360, end: 0x1d371 },
    {
      id: 'mathematical-alphanumeric-symbols',
      label: 'Mathematical Alphanumeric Symbols',
      start: 0x1d400,
      end: 0x1d7ff,
    },
    { id: 'mahjong-tiles', label: 'Mahjong Tiles', start: 0x1f000, end: 0x1f02b },
    { id: 'domino-tiles', label: 'Domino Tiles', start: 0x1f030, end: 0x1f093 },
    { id: 'playing-cards', label: 'Playing Cards', start: 0x1f0a0, end: 0x1f0df },
    {
      id: 'enclosed-alphanumeric-supplement',
      label: 'Enclosed Alphanumeric Supplement',
      start: 0x1f100,
      end: 0x1f1ff,
    },
    {
      id: 'enclosed-ideographic-supplement',
      label: 'Enclosed Ideographic Supplement',
      start: 0x1f200,
      end: 0x1f251,
    },
    {
      id: 'miscellaneous-symbols-and-pictographs',
      label: 'Miscellaneous Symbols And Pictographs',
      start: 0x1f300,
      end: 0x1f5ff,
    },
    { id: 'emoticons', label: 'Emoticons', start: 0x1f601, end: 0x1f64f },
    {
      id: 'transport-and-map-symbols',
      label: 'Transport And Map Symbols',
      start: 0x1f680,
      end: 0x1f6c5,
    },
    { id: 'alchemical-symbols', label: 'Alchemical Symbols', start: 0x1f700, end: 0x1f773 },
    {
      id: 'cjk-unified-ideographs-extension-b',
      label: 'CJK Unified Ideographs Extension B',
      start: 0x20000,
      end: 0x2a6d6,
    },
    {
      id: 'cjk-unified-ideographs-extension-c',
      label: 'CJK Unified Ideographs Extension C',
      start: 0x2a700,
      end: 0x2b734,
    },
    {
      id: 'cjk-unified-ideographs-extension-d',
      label: 'CJK Unified Ideographs Extension D',
      start: 0x2b740,
      end: 0x2b81d,
    },
    {
      id: 'cjk-compatibility-ideographs-supplement',
      label: 'CJK Compatibility Ideographs Supplement',
      start: 0x2f800,
      end: 0x2fa1d,
    },
    { id: 'tags', label: 'Tags', start: 0xe0001, end: 0xe007f },
    {
      id: 'variation-selectors-supplement',
      label: 'Variation Selectors Supplement',
      start: 0xe0100,
      end: 0xe01ef,
    },
    {
      id: 'supplementary-private-use-area-a',
      label: 'Supplementary Private Use Area-A',
      start: 0xf0000,
      end: 0xffffd,
    },
    {
      id: 'supplementary-private-use-area-b',
      label: 'Supplementary Private Use Area-B',
      start: 0x100000,
      end: 0x10fffd,
    },
  ];

  function findGroupById(id) {
    for (var group of unicodeGroups) {
      if (group.id == id) {
        return group;
      }
    }
  }

  window.onload = function () {
    var fontFamily = 'Arial';
    var fontSize = '14px';
    var fontWeight = '600';
    var exampleText = 'Font Appearance Example 1234567890 +-*/!@#$%^&()';
    var selectedGroups = new Set();
    var charactersTable = {};

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    function getTextWidth(text) {
      context.font = [fontWeight, fontSize, fontFamily].join(' ');
      return context.measureText(text).width;
    }

    function lookupTable(char, fontName, fontSize, fontWeight) {
      var code = char.charCodeAt(0);
      for (var row in charactersTable) {
        var [font, size, weight, start16] = row.split('|');
        if (fontName && fontName != font) {
          continue;
        }
        if (fontSize && fontSize != size) {
          continue;
        }
        if (fontWeight && fontWeight != weight) {
          continue;
        }
        var data = charactersTable[row];
        var start = parseInt(start16, 16);
        var end = start + data.length / 2;
        if (start <= code && code <= end) {
          var pos = (code - start) * 2;
          return base64ToFloat(data.slice(pos, pos + 2));
        }
      }
    }

    function gettextWidthWithLookup(text, fontName, fontSize, fontWeight) {
      return Array.from(text).reduce(function (sum, item) {
        return sum + lookupTable(item, fontName, fontSize, fontWeight);
      }, 0);
    }

    var example = document.getElementById('example');
    var result = document.getElementById('result');
    function update() {
      var totalCharacters = 0;
      charactersTable = {};
      var groups = Array.from(selectedGroups, findGroupById).sort(function (a, b) {
        return a.start - b.start;
      });
      var prevGroup = null;
      var charactersRow = [];
      var startPosition = 0;
      function addRow() {
        if (charactersRow.length == 0) {
          return;
        }
        var key = [fontFamily, fontSize, fontWeight, startPosition.toString(16)].join('|');
        charactersTable[key] = charactersRow.join('');
        charactersRow = [];
      }
      for (var group of groups) {
        var mergeGroups = prevGroup != null && prevGroup.end + 1 == group.start;
        if (!mergeGroups) {
          addRow();
          startPosition = group.start;
        }
        for (var code = group.start; code <= group.end; code++) {
          var char = String.fromCharCode(code);
          var b64str = floatToBase64(getTextWidth(char));
          charactersRow.push(b64str);
          totalCharacters++;
        }
        prevGroup = group;
      }
      addRow();

      example.style.fontFamily = fontFamily + ', monospace';
      example.style.fontSize = fontSize;
      example.style.fontWeight = fontWeight;
      example.innerHTML = '';
      for (var char of exampleText) {
        var charElement = document.createElement('span');
        charElement.innerText = char;
        var width = lookupTable(char);
        charElement.title = width + ' : ' + getTextWidth(char);
        if (width !== undefined) {
          charElement.style.borderBottom = '1px solid green';
        } else {
          charElement.style.borderBottom = '1px solid red';
        }
        example.append(charElement);
      }
      result.value = JSON.stringify(charactersTable, null, 4);
      console.log(
        'computed',
        getTextWidth(exampleText),
        'looked up',
        gettextWidthWithLookup(exampleText, fontFamily, fontSize, fontWeight),
      );
    }

    var groupsContainer = document.getElementById('groups');
    for (var group of unicodeGroups) {
      var groupWrapper = document.createElement('div');
      var checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.id = group.id;
      checkbox.name = 'groups';
      checkbox.value = group.id;
      var label = document.createElement('label');
      label.for = group.id;
      label.innerText = group.label;
      groupWrapper.append(checkbox);
      groupWrapper.append(label);
      groupsContainer.append(groupWrapper);
      checkbox.addEventListener('input', function (e) {
        if (e.target.checked) {
          selectedGroups.add(e.target.value);
        } else {
          selectedGroups.delete(e.target.value);
        }
        update();
      });
    }

    var fontSelector = document.getElementById('example-input');
    fontSelector.value = exampleText;
    fontSelector.addEventListener('input', function (e) {
      exampleText = e.target.value;
      update();
    });

    var fontSelector = document.getElementById('font-selector');
    fontSelector.value = fontFamily;
    fontSelector.addEventListener('input', function (e) {
      fontFamily = e.target.value;
      update();
    });

    var sizeSelector = document.getElementById('size-selector');
    sizeSelector.value = fontSize;
    sizeSelector.addEventListener('input', function (e) {
      fontSize = e.target.value;
      update();
    });

    var weightSelector = document.getElementById('weight-selector');
    weightSelector.value = fontWeight;
    weightSelector.addEventListener('input', function (e) {
      fontWeight = e.target.value;
      update();
    });

    update();
  };
</script>
<body>
  <input id="example-input" />
  <div id="example"></div>

  <form id="form">
    <div class="form-part">
      <h3>Select font</h3>
      <input id="font-selector" />
      <h3>Select size</h3>
      <input id="size-selector" />
      <h3>Select weight</h3>
      <input id="weight-selector" />
    </div>
    <div class="form-part">
      <h3>Select unicode pages</h3>
      <div id="groups"></div>
    </div>
  </form>
  <textarea id="result"></textarea>
</body>