Project

General

Profile

Font » History » Version 4

Philippe May, 24/08/2020 11:31

1 1 Philippe May
h1. Fonts
2 1 Philippe May
3 1 Philippe May
Gisaf uses a custom font for symbols: @GisafSymbols@.
4 1 Philippe May
5 1 Philippe May
This same font is used in 2 different ways:
6 1 Philippe May
7 1 Philippe May
1. as normal font for the web interface, using css: eg, the symbols for the layer list.
8 1 Philippe May
9 1 Philippe May
1. for mapbox: Mapbox's rendering uses a WebGL component with its own specification, so the font needs to be converted (see below).
10 1 Philippe May
11 1 Philippe May
12 1 Philippe May
h2. Creation and update of characters
13 1 Philippe May
14 1 Philippe May
The main font file is created with BirdFont, and is in the git repository: @gisaf-app/src/assets/fonts/gisafSymbols.bf@.
15 1 Philippe May
16 1 Philippe May
It is then exported as ttf in Birdfont.
17 1 Philippe May
18 4 Philippe May
19 1 Philippe May
h2. Mapping of characters
20 1 Philippe May
21 1 Philippe May
Each character for a layer has a unicode number, which needs to be mapped to the layer it represents.
22 1 Philippe May
23 1 Philippe May
24 1 Philippe May
h3. Mapbox
25 1 Philippe May
26 3 Philippe May
h4. Create the Mapbox "font"
27 1 Philippe May
28 3 Philippe May
Mapbox uses it's own symbol format, embedded in protobuf files.
29 1 Philippe May
30 3 Philippe May
To build it from the ttf file, run the following in the @gisaf-app@ directory:
31 1 Philippe May
<pre>
32 1 Philippe May
./node_modules/.bin/build-glyphs src/assets/fonts/GisafSymbols.ttf src/assets/fonts/glyphs/GisafSymbols/
33 1 Philippe May
</pre>
34 3 Philippe May
35 3 Philippe May
36 3 Philippe May
h4. Custom models
37 3 Philippe May
38 3 Philippe May
The Unicode is defined in the @symbols@ class attribute of the model.
39 3 Philippe May
40 3 Philippe May
41 3 Philippe May
h4. For category-based models
42 3 Philippe May
43 3 Philippe May
The Unicode is defined in the @symbol@ column of the category table.
44 3 Philippe May
45 3 Philippe May
The script @set_mapbox_icons_from_css.py@ changes all the categories automatically. Note: Gisaf needs to be restarted afterwards. 
46 3 Philippe May
47 3 Philippe May
It can also be set in the Gisaf admin, but's very tricky because one would need to copy/paste the exact unicode character.