msdf-gpu

About

Render MSDF bitmaps with vector like quality

Getting started

Create font set

const { buildFont } = require('msdf-gpu')

buildFont({
  name: 'RobotoRegular',
  outPath: './buildTestOut/Roboto',
  fontPaths: ['./openFonts/Roboto/Roboto-Regular.ttf'], // First font takes priority for glyphs. Every added font will be used for glyphs that the previous fonts don't have.
  extent: 8_192, // must be power of 2, 8192 is a good default, but 4096 is a good compromise
  size: 22, // standard vertical size of font in pixels
  range: 6 // SDF range in pixels, larger = more detailed but more blurry
})

Create icon set

const { buildIcons } = require('msdf-gpu')

buildIcons({
  inputFolder: './icons/streets', // folder with icons made up of SVGs (ONLY 'fill' paths, no strokes or shapes)
  outPath: './buildTestOut/Streets',
  outName: 'streets',
  extent: 8_192, // must be power of 2, 8192 is a good default, but 4096 is a good compromise
  size: 42, // standard vertical size of font in pixels. Larger size is better for icons.
  range: 6 // SDF range in pixels, larger = more detailed but more blurry
})

Install The appropriate tools

Submodules

# Add missing submodules
git submodule update --init --recursive

FreeType

cd src/freetype2
./configure
# make build directory
mkdir build
cd build
# generate build files
cmake ..
# build
make

# install
sudo make install
# make sure it was stored in /usr/local/include/freetype2

Skia

# help guide: https://skia.org/docs/user/build/
cd src/skia
python3 tools/git-sync-deps
# If you are building for Apple Silicon (M1 and newer) instead, add a gn arg to set target_cpu="arm64"
# Options:
# MacOS: target_os="mac" target_cpu="arm64"
# Ubuntu/Linux: target_os="linux" target_cpu="x64" (also remove clang args)
# example script:
./bin/gn gen out/Release --args='
    cc="clang" cxx="clang++"
    is_official_build=true
    is_debug=false
    target_os="mac"
    target_cpu="arm64"
    extra_cflags=[ "-fPIC", "-I/usr/local/include/freetype2" ]
    extra_cflags_cc=["-frtti"]
    skia_enable_tools=true skia_enable_skshaper=true
    skia_use_icu=false skia_use_sfntly=false skia_use_piex=true
    skia_enable_skottie=true skia_use_freetype=true skia_use_system_freetype2=true skia_use_harfbuzz=false
    skia_use_system_expat=false skia_use_system_libjpeg_turbo=false skia_use_system_libpng=false skia_use_system_libwebp=false skia_use_system_zlib=false skia_enable_skparagraph=true
    skia_enable_gpu=true'
# If some header files are missing, install the corresponding dependencies:
tools/install_dependencies.sh
# Once you have generated your build files, run Ninja to compile and link Skia:
ninja -C out/Release skia

Where to get all Noto fonts

https://github.com/notofonts/notofonts.github.io/tree/main https://github.com/notofonts/noto-cjk

Special Language Support

This module is not designed to handle RTL bidirectional or glyph shaping. To add support for these features, you will need to use a library like TODO ADD RTL MODULE

[x] Standard (Latin, Cyrillic, Greek, etc.) [x] Arabic [ ] Buginese [ ] Hangul [x] Hebrew [ ] Indic: Bengali [ ] Indic: Devanagari [ ] Indic: Gujarati [ ] Indic: Gurmukhi [ ] Indic: Kannada [ ] Indic: Malayalam [ ] Indic: Odia [ ] Indic: Tamil [ ] Indic: Telugu [ ] Javanese [ ] Khmer [ ] Lao [x] Myanmar [ ] Sinhala [ ] Syric [ ] Thaana [ ] Thai [x] Tibetan

Conceptual Fixes

[ ] Switch CJK to vertical substitutions