Semantic ligatures

Glyphs
1

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?

2

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

3

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

4

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.

5

  1. You make a glyph in the Private Use Area, starting at E000, i.e. with a glyph name ‘uniE000’ etc., export an OTF and turn it into the webfont formats you want with Fontsquirrel etc.

  2. Look at page 32 of @mrmontezuma’s great Webfontday presentation: http://de.slideshare.net/markusgreve/wbfntdy-2012 (the text is in German, but the HTML and CSS samples say it all).

6

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.

7

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.

8

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.

9

mekkablue
I am interested in learning more about the better ways to implement ligature symbols on the web. Perhaps, an article or video tutorial?

10

You should not use ligatures for that, but rather a PUA character. Take a look at the link I posted above.

11

mekkablue
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.

12

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.

13

Georg Seifert
You bring up some good and important points.

  1. Ligatures are supported in the latest versions of Chrome, Firefox and Safari on the Mac. On Windows, they are supported in Chrome, Firefox, IE10+ and Safari. Older browsers (like very old browsers) can have ligatures supported via a javascript. In browsers that don’t support ligatures, the icon defaults back to text.

  2. 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”.