Project

General

Profile

Font » History » Version 7

Giulio Di Anastasio, 11/04/2023 15:20

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 7 Giulio Di Anastasio
Some symbols (e.g. service tree) do not completely show the linework in Birdfont: it is just a problem of visualization according to the zoom level in Birdfont, not in Gisaf. To resolve, it just needs a small re-scalingo f the symbol in Birdfont, and it will show entirely.
19 7 Giulio Di Anastasio
20 4 Philippe May
21 1 Philippe May
h2. Mapping of characters
22 1 Philippe May
23 1 Philippe May
Each character for a layer has a unicode number, which needs to be mapped to the layer it represents.
24 1 Philippe May
25 1 Philippe May
26 1 Philippe May
h3. Mapbox
27 1 Philippe May
28 3 Philippe May
h4. Create the Mapbox "font"
29 1 Philippe May
30 3 Philippe May
Mapbox uses it's own symbol format, embedded in protobuf files.
31 1 Philippe May
32 3 Philippe May
To build it from the ttf file, run the following in the @gisaf-app@ directory:
33 1 Philippe May
<pre>
34 1 Philippe May
./node_modules/.bin/build-glyphs src/assets/fonts/GisafSymbols.ttf src/assets/fonts/glyphs/GisafSymbols/
35 1 Philippe May
</pre>
36 3 Philippe May
37 6 Philippe May
Note: @build-glyphs@ is from Mapbox's @fontnik@, which is in NPM dev dependency. Ref: https://github.com/mapbox/node-fontnik
38 3 Philippe May
39 3 Philippe May
h4. Custom models
40 3 Philippe May
41 3 Philippe May
The Unicode is defined in the @symbols@ class attribute of the model.
42 3 Philippe May
43 3 Philippe May
44 3 Philippe May
h4. For category-based models
45 3 Philippe May
46 3 Philippe May
The Unicode is defined in the @symbol@ column of the category table.
47 3 Philippe May
48 3 Philippe May
The script @set_mapbox_icons_from_css.py@ changes all the categories automatically. Note: Gisaf needs to be restarted afterwards. 
49 3 Philippe May
50 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.