<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><span class="HOEnZb"><font color="#888888"><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">Justin</div><br><div class="m_-624083584799209086bloop_sign" id="m_-624083584799209086bloop_sign_1516905137718417152"></div></font></span></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>