<div dir="ltr">Hi Tony,<div><br></div><div>We have considered ligatures, but opted for the icon-font approach instead because it was more flexible and provided good accessibility with minimal markup.</div><div><br></div><div>The biggest downside of ligatures is that it can only substitute a single word with a glyph (or icon) - so any string consisting of multiple words or has punctuation could not be substituted using a single ligature. We often run into this situation, so it is less attractive to use ligatures. There are work-arounds by using roles / aria-label / aria-labelledby, but ATs may interpret these implementations in less-than-desirable ways.</div><div><br></div><div>Right now, icon fonts satisfies our requirements of being easily resizable, themable (for contrast), accessible, and reasonably easy to implement. Ligatures, has its uses if you're working with only single words.</div><div><br></div><div>I can get more detailed with examples of markup if you like to see that.</div><div><br></div><div>Thanks for asking this question! This was something we had internally talked about early on, but never articulated properly. Hopefully this helps.</div><div><br></div><div>- Jon. </div></div><div class="gmail_extra"><br><div class="gmail_quote">On Mon, Nov 17, 2014 at 2:08 PM, Tony Atkins <span dir="ltr"><<a href="mailto:tony@raisingthefloor.org" target="_blank">tony@raisingthefloor.org</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Hi, Jonathan:<div><br></div><div>Love the idea.  I have been using the C4A icon font plus a few extras in the Preference Terms Dictionary.  Have you given any thought to ligature support?</div><div><br></div><div>Cheers,</div><div><br></div><div><br></div><div>Tony</div></div><div class="gmail_extra"><br><div class="gmail_quote"><div><div class="h5">On Thu, Nov 13, 2014 at 4:10 PM, Jonathan Hung <span dir="ltr"><<a href="mailto:jhung@ocadu.ca" target="_blank">jhung@ocadu.ca</a>></span> wrote:<br></div></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div><div class="h5"><div dir="ltr">Hi everyone,<div><br></div><div>In the Fluid project, we have been using font icons widely in our UI's over the past year. Currently, when a project needs icons we:</div><div><ul><li>duplicate a font from another project; </li><li>create a new font from scratch;</li><li>or mix-and-match existing glyphs with new glyphs by either importing multiple fonts in the markup, or by creating another font set that contains all the glyphs.</li></ul></div><div>The unintended consequence is that this creates a maintenance issue when designing, deploying, and using icon fonts.</div><div><br></div><div>Dana, Justin and I discussed this and would like to put forth the following proposal for discussion:</div><div><ol><li>Create a new repository on github which stores SVG files used to generate fonts.</li><li>Use a grunt plugin (like <a href="https://www.npmjs.org/package/grunt-webfont" target="_blank">grunt-webfont</a>) that generates fonts from SVGs</li></ol></div><div>Using github helps solve the maintenance issue, and the grunt plugin helps with the deployment of fonts.</div><div><div><br></div><div>This system should also be able to handle generation of multiple icon sets from a configuration file, and allow users to specify their own Unicode PUAs (the unique IDs used in CSS to reference a specific glyph) so that icons have predictable and stable implementation in deployment. We will need to investigate these requirements more closely.</div><div><br></div><div>I have filed this issue / proposal under <a href="http://issues.fluidproject.org/browse/FLUID-5555" target="_blank">http://issues.fluidproject.org/browse/FLUID-5555</a></div><div><br></div><div>If a reasonable solution can be found, a similar approach could be implemented in other projects.</div><div><br></div><div>We welcome your comments.</div><div><br></div><div>- Jon.</div><div><br></div>-- <br><div><p style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><b style="font-size:12.4999990463257px"><span style="font-size:10pt;font-family:Tahoma,sans-serif">JONATHAN HUNG</span></b></p><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">INCLUSIVE DESIGNER, IDRC<u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u> <u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif">T:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a value="+14169776000" style="color:rgb(17,85,204)">416 977 6000 x3951</a><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif">F:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a value="+14169779844" style="color:rgb(17,85,204)">416 977 9844</a><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif">E:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a href="mailto:jhung@ocadu.ca" style="color:blue" target="_blank">jhung@ocadu.ca</a><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u> <u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif">OCAD UNIVERSITY</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">Inclusive Design Research Centre<u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">205 Richmond Street W, Toronto, ON, M5V 1V3<u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u> <u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><a href="http://www.ocadu.ca/" style="color:blue" target="_blank">www.ocadu.ca</a><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.4999990463257px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><a href="http://www.idrc.ocad.ca/" style="color:blue" target="_blank">www.idrc.ocad.ca</a></span></p></div></div>
</div></div>
<br></div></div>_______________________________________________________<br>
fluid-work mailing list - <a href="mailto:fluid-work@fluidproject.org" target="_blank">fluid-work@fluidproject.org</a><br>
To unsubscribe, change settings or access archives,<br>
see <a href="http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work" target="_blank">http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work</a><br></blockquote></div><br></div>
</blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="gmail_signature"><p style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><b style="font-size:12.499999046325684px"><span style="font-size:10pt;font-family:Tahoma,sans-serif">JONATHAN HUNG</span></b></p><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">INCLUSIVE DESIGNER, IDRC<u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u> <u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif">T:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a value="+14169776000" style="color:rgb(17,85,204)">416 977 6000 x3951</a><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif">F:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a value="+14169779844" style="color:rgb(17,85,204)">416 977 9844</a><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif">E:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a href="mailto:jhung@ocadu.ca" style="color:blue" target="_blank">jhung@ocadu.ca</a><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u> <u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif">OCAD UNIVERSITY</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">Inclusive Design Research Centre<u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">205 Richmond Street W, Toronto, ON, M5V 1V3<u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u> <u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><a href="http://www.ocadu.ca/" style="color:blue" target="_blank">www.ocadu.ca</a><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><a href="http://www.idrc.ocad.ca/" style="color:blue" target="_blank">www.idrc.ocad.ca</a></span></p></div></div>
</div>