<html><head><style>body{font-family:Helvetica,Arial;font-size:13px}</style></head><body style="word-wrap:break-word;line-break:after-white-space"><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">Hi Tony,</div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto"><br></div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">Thanks for this suggestion. The VM approach seems like a good option. I don’t think it will be something that we run that frequently, so the overhead of the VM shouldn’t be too much to worry about. </div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto"><br></div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">Regarding location, I think I’d prefer having it in the main repo. I feel like it will be easier to update the icons if the build process is colocated, and it should be fine to version the icons alongside Infusion. I suppose if we break Infusion out into a monorepo we could explore separating the icons into their own package(s) (there will likely be separate fonts for each component that uses icons in order to keep file sizes to a minimum). I’m open to other ideas though.</div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto"><br></div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">Thanks</div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">Justin</div> <br> <div id="bloop_sign_1516971250842798080" class="bloop_sign"></div> <br><p class="airmail_on">On January 26, 2018 at 3:38:36 AM, Tony Atkins (<a href="mailto:tony@raisingthefloor.org">tony@raisingthefloor.org</a>) wrote:</p> <blockquote type="cite" class="clean_bq"><span><div><div></div><div>


<title></title>


<div dir="ltr">Thanks for the writeup, Justin.
<div><br></div>
<div>I think the obvious solution here is to use our existing VM
infrastructure to make it easy to build the font regardless of the
host platform.  There are fontforge packages for Linux, we
just need to have a Vagrant VM that installs fontforge as part of
its setup steps.  I'd suggest using the Linux VM because it's
more amenable to using vagrant ssh commands as part of npm script
definitions.  We could add a vagrant:buildFont script or the
like that runs the build within the VM.   Just like
coverage reports and other artefacts created from within the VM,
the final icon font would be available from the host machine at the
end of the build process.</div>
<div><br></div>
<div>I can't imagine us writing a tool to verify whether an icon
looks reasonable or not, so manual intervention is still required
whatever we do.  To assist in the review, we could create a
page that displays all icons, ideally with something like the
UIOptions component so we can test high contrast.  I would
imagine that whomever is running the build would review this, and
then we have a decision about how to publish it.</div>
<div><br></div>
<div>To me, it makes sense to move the icon font to a small repo
(or small part of a monorepo) and then manually publish a versioned
release of the icon font.  As we don't want to get in the
business of managing constant releases, I'd imagine us making use
of fluid-publish, and creating dev releases to test with work in
progress.</div>
<div><br></div>
<div>I understand this might be a bit of a reach, I could also see
us setting up additional commands that run against the linux VM we
use to test infusion itself and leaving it in the main repo. 
In that scenario, the font can be updated by any commit, and the
version is simply pinned to whichever dev or standard release other
packages pull in.</div>
<div><br></div>
<div>Happy to discuss here or in a future meeting, if we agreed
that the VM approach is worth doing somewhere, and then define
"somewhere", I'd imagine this being a pretty easy thing to set
up.</div>
<div><br></div>
<div>Cheers,</div>
<div><br></div>
<div><br></div>
<div>Tony</div>
<div><br></div>
<div><br></div>
</div>
<div class="gmail_extra"><br>
<div class="gmail_quote">On 25 January 2018 at 20:35, Justin Obara
<span dir="ltr"><<a href="mailto:obara.justin@gmail.com" target="_blank">obara.justin@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div style="word-wrap:break-word;line-break:after-white-space">
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
Recently we’ve been working on a couple of tasks to add new
preferences to the prefs framework: letter-spacing (<a href="https://issues.fluidproject.org/browse/FLUID-6204" target="_blank">FLUID-6204</a>) and syllabification (<a href="https://issues.fluidproject.org/browse/FLUID-6240" target="_blank">FLUID-6240</a>). For both of these new preferences we’ll
need to provide a new icon for the adjuster. </div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
<br></div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
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 (<a href="https://github.com/fluid-project/infusion-icons" target="_blank">Infusion-Icons</a>) from which we could run a build step
to generate the icon font. (see: <a href="https://issues.fluidproject.org/browse/FLUID-5555" target="_blank">FLUID-5555</a>).</div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
<br></div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
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: <a href="https://wiki.fluidproject.org/display/fluid/Standard+workflow+in+maintaining+and+creating+icon+fonts" target="_blank">Standard workflow in maintaining and creating icon
fonts</a> and <a href="https://wiki.fluidproject.org/display/fluid/Infusion+Icons+Visual+Style+Guide" target="_blank">Infusion Icons Visual Style Guide</a>). However, it
seems that the build system we were hoping for lacks the robustness
required for it to be a build step in Infusion.</div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
<br></div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
The original hope and expectation was to use <a href="https://github.com/sapegin/grunt-webfont" target="_blank">grunt-webfont</a> and it’s node engine based off
of <a href="https://github.com/nfroidure/svgicons2svgfont" target="_blank">svgicons2svgfont</a> 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 <a href="http://nfroidure.github.io/svgiconfont/" target="_blank">http://nfroidure.<wbr>github.io/svgiconfont/</a> with
“Font height” set to 512.</div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
<br></div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
Fortunately grunt-webfont provides the option to use an alternative
engine, <a href="https://fontforge.github.io/en-US/" target="_blank">fontforge</a>  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).</div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
<br></div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
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 <a href="https://github.com/sapegin/grunt-webfont#codepointsfile" target="_blank">codepoints file</a> 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.</div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
<br></div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
Let us know what you think.</div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
<br></div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
Thanks</div>
<div id="m_-624083584799209086bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px;color:rgba(0,0,0,1.0);margin:0px;line-height:auto">
<span class="HOEnZb"><font color="#888888">Justin</font></span></div>
<span class="HOEnZb"><font color="#888888"><br></font></span>
<div class="m_-624083584799209086bloop_sign" id="m_-624083584799209086bloop_sign_1516905137718417152"></div>
</div>
<br>
______________________________<wbr>_________________________<br>

fluid-work mailing list - <a href="mailto:fluid-work@lists.idrc.ocad.ca">fluid-work@lists.idrc.ocad.ca</a><br>

To unsubscribe, change settings or access archives,<br>
see <a href="https://lists.idrc.ocad.ca/mailman/listinfo/fluid-work" rel="noreferrer" target="_blank">https://lists.idrc.ocad.ca/<wbr>mailman/listinfo/fluid-work</a><br>
</blockquote>
</div>
<br></div>


</div></div></span></blockquote></body></html>