Icon font building

[Justin Obara]

Recently we’ve been working on a couple of tasks to add new preferences to
the prefs framework: letter-spacing (FLUID-6204
<https://issues.fluidproject.org/browse/FLUID-6204>) and syllabification (
FLUID-6240 <https://issues.fluidproject.org/browse/FLUID-6240>). For both
of these new preferences we’ll need to provide a new icon for the adjuster.

Icons for the preferences framework are added using an icon font. The
current icon font was pre-generated with the required icons included.
However, we found that it was hard to maintain when new icons are needed.
To that end, work was done to implement a repository of icons (
Infusion-Icons <https://github.com/fluid-project/infusion-icons>) from
which we could run a build step to generate the icon font. (see: FLUID-5555
<https://issues.fluidproject.org/browse/FLUID-5555>).

As part of my recent work, I’ve been looking at incorporating a build step
in Infusion to generate the icon fonts using icons from the Infusion-Icons
repo. We’re taking this opportunity to update and unify the icons as well,
and along the way have learned a lot about how icons should be constructed.
(see: Standard workflow in maintaining and creating icon fonts
<https://wiki.fluidproject.org/display/fluid/Standard+workflow+in+maintaining+and+creating+icon+fonts>
 and Infusion Icons Visual Style Guide
<https://wiki.fluidproject.org/display/fluid/Infusion+Icons+Visual+Style+Guide>).
However, it seems that the build system we were hoping for lacks the
robustness required for it to be a build step in Infusion.

The original hope and expectation was to use grunt-webfont
<https://github.com/sapegin/grunt-webfont> and it’s node engine based off
of svgicons2svgfont <https://github.com/nfroidure/svgicons2svgfont> to
generate the icon font. With much research and trial and error we have yet
to be able to produce an acceptable icon font, in particular when complex
glyphs are required some of the glyphs become distorted and jumbled. See
“icon output.png” attached for an example of a distorted icon. To
experiment with this directly you can run the attached “size.svg” through
http://nfroidure.github.io/svgiconfont/ with “Font height” set to 512.

Fortunately grunt-webfont provides the option to use an alternative engine,
fontforge <https://fontforge.github.io/en-US/>  In experimenting with our
new icon set, I’ve found that fontforge actually produces a proper icon
font. However, there is a trade off. Although fontforge is available for
macOS, Linux, and Windows, it is a manual process to install it because it
isn’t an NPM module. Unless there is a straightforward way to install the
platform specific versions of fontforge as part of the "npm install" for
Infusion, I don’t think it is safe to add font generation as a build step.
It would be very unfortunate if the icons were broken in a release because
the fontforge dependency was missing. (NOTE: It seems that if fontforge is
missing it will fall back to using the node engine).

Barring any suggestions for ensuring that fontforge is installed, I think
we should continue to manually updated the icon font(s) used in Infusion.
However, we should start generating the font using the Infusion-Icons repo
and grunt-webfont with the fontforge engine. We may also want to
commit a codepoints
file <https://github.com/sapegin/grunt-webfont#codepointsfile> to the
Infusion repo alongside the generated font to help keep track of which
icons are included and what codepoint refers to them. I believe this will
help make the icon fonts easier to generate, consistent and stable. It’s
not quite as convenient as having it part of the Infusion build, but it
should mean that the icons are always valid.

Let us know what you think.

Thanks
Justin
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20180125/9ba37337/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: size.svg
Type: application/octet-stream
Size: 713 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20180125/9ba37337/attachment.obj>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: icon output.png
Type: image/png
Size: 6726 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20180125/9ba37337/attachment.png>