Font » History » Version 6
Version 5 (Philippe May, 24/08/2020 11:33) → Version 6/7 (Philippe May, 24/08/2020 11:33)
h1. Fonts
Gisaf uses a custom font for symbols: @GisafSymbols@.
This same font is used in 2 different ways:
1. as normal font for the web interface, using css: eg, the symbols for the layer list.
1. for mapbox: Mapbox's rendering uses a WebGL component with its own specification, so the font needs to be converted (see below).
h2. Creation and update of characters
The main font file is created with BirdFont, and is in the git repository: @gisaf-app/src/assets/fonts/gisafSymbols.bf@.
It is then exported as ttf in Birdfont.
h2. Mapping of characters
Each character for a layer has a unicode number, which needs to be mapped to the layer it represents.
h3. Mapbox
h4. Create the Mapbox "font"
Mapbox uses it's own symbol format, embedded in protobuf files.
To build it from the ttf file, run the following in the @gisaf-app@ directory:
<pre>
./node_modules/.bin/build-glyphs src/assets/fonts/GisafSymbols.ttf src/assets/fonts/glyphs/GisafSymbols/
</pre>
Note: @build-glyphs@ is from Mapbox's @fontnik@, which is in an NPM dev dependency. Ref: https://github.com/mapbox/node-fontnik
h4. Custom models
The Unicode is defined in the @symbols@ class attribute of the model.
h4. For category-based models
The Unicode is defined in the @symbol@ column of the category table.
The script @set_mapbox_icons_from_css.py@ changes all the categories automatically. Note: Gisaf needs to be restarted afterwards.
It can also be set in the Gisaf admin, but's very tricky because one would need to copy/paste the exact unicode character.
Gisaf uses a custom font for symbols: @GisafSymbols@.
This same font is used in 2 different ways:
1. as normal font for the web interface, using css: eg, the symbols for the layer list.
1. for mapbox: Mapbox's rendering uses a WebGL component with its own specification, so the font needs to be converted (see below).
h2. Creation and update of characters
The main font file is created with BirdFont, and is in the git repository: @gisaf-app/src/assets/fonts/gisafSymbols.bf@.
It is then exported as ttf in Birdfont.
h2. Mapping of characters
Each character for a layer has a unicode number, which needs to be mapped to the layer it represents.
h3. Mapbox
h4. Create the Mapbox "font"
Mapbox uses it's own symbol format, embedded in protobuf files.
To build it from the ttf file, run the following in the @gisaf-app@ directory:
<pre>
./node_modules/.bin/build-glyphs src/assets/fonts/GisafSymbols.ttf src/assets/fonts/glyphs/GisafSymbols/
</pre>
Note: @build-glyphs@ is from Mapbox's @fontnik@, which is in an NPM dev dependency. Ref: https://github.com/mapbox/node-fontnik
h4. Custom models
The Unicode is defined in the @symbols@ class attribute of the model.
h4. For category-based models
The Unicode is defined in the @symbol@ column of the category table.
The script @set_mapbox_icons_from_css.py@ changes all the categories automatically. Note: Gisaf needs to be restarted afterwards.
It can also be set in the Gisaf admin, but's very tricky because one would need to copy/paste the exact unicode character.