Is it possible to create semantic ligatures with Glyphs and if so, how would I go about doing this? Let’s say I want to create a web font that would convert “next slide” to a right facing arrow and “previous slide” would turn into a left facing arrow.
I did try creating a glyph named “next” and one named “slide” then placed a box in each so it had something to see if the ligature was actually being generated. I then created a new glyph named “next_slide.liga” but the new glyph was empty. I went to font info and generated the ligature feature and it definitely found and generate the ligature code. I then tried creating a new empty tab and typing “next slide” but still no ligature.
I;m going to assume this is possible but I’m at a loss as to how to do it. Any suggestions?
Have you tried naming your arrow glyph “arrowright” and then creating a feature dlig (or clig) putting inside
sub n e x t space s l i d e by arrowright;
Keep in mind to go safer you should create a similar line for the most common combinations like All caps, Sentence case, other spaces then the standard one, etc
Just in case you’re planning to create a webfont, keep in mind OT features don’t work in all browsers
The string “next slide” does not consist of two characters (“next” and “slide”), but of n, e, x, t, space, s, l, i, d and e. So the ligature name you’d be looking for is “n_e_x_t_space_s_l_i_d_e.liga”.
But, as jan already mentioned, this is not how you would do it on the web. You’ll need a more sophisticated HTML/CSS solution like this one: http://symbolset.com
arrowright is an actual glyph for the right facing arrow so there wouldn’t really be any need to put it in a ligature at that point.
What I’m looking to do is basically what symbolset does except I’d like to be able to generate my own pictograms and much smaller font files.
Thanks mekkablue. I actually ran across the ebook Creating Symbol Fonts from Five Simple Steps which outlines this VERY topic. The ebook is written using FontForge to demonstrate the process but I can easily adapt to Glyphs.
This is basically how SymbolSet does things. They also include a .js file to support keyword matching in older browsers which is exactly what I’m looking to do, I just want to be abel to make my own symbol fonts.
I read the Creating Symbol Fonts book you mentioned, but am not familiar enough with Glyphs to pull of the translation. I’m stuck at how to create ligatures (without spaces) that render an icon. The fact that Glyphs doesn’t create unicode values for these is irritating too.
You can set your own Unicode values if you disable nice names in File > Font Info > Other.
I still disagree with the ligature approach on websites though. There are better ways to do this.
I am interested in learning more about the better ways to implement ligature symbols on the web. Perhaps, an article or video tutorial?
You should not use ligatures for that, but rather a PUA character. Take a look at the link I posted above.
On the web, using the data-icon attribute is not the best approach either, as it does not render any text, nor is it accessible for screen readers to read aloud.
I read many of your posts on this forum, and I understand your perspective. I agree that many of these techniques may not be the best approach when using fonts on the desktop or print.
However, there is a steady and growing shift towards fonts being used on the web & mobile devices. Web fonts are the future and where the industry is heading. If Glyphs can integrate more features into its application to enable typographers to create web fonts, they will be ahead of the curve.
There are two issues involved.
First reliability. How well does it work. What do you see if the browser does not support ligatures? What happens if your font is not available?
Second what are screen readers supposed to do with the icons. As I understand, screen reader should not bother with icons at all. They are considered accessory visual elements.
Both counts point to PUA.
You bring up some good and important points.
With semantic ligatures, screen readers will read the text in place of the icon. For example, if I create a semantic ligature of a home icon, the screen reader will read the word “home”.