question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Read ligature from a font

See original GitHub issue

Is it possible to read the “ligatures” from a font?

What I mean is, get a dictionary (an array) where the key is the substituion and the value is the Glyph object (or just the unicode integer value), something like:

var font = ... ; // a Font object
var ligatures = font.getLigatures();  // an array where key is the ligature, value is the Glyph(or just the unicode integer will do it too)
foreach(var l in ligatures) {
    console.log(l, ligatures[l]); // 
}

For example, Google’s Material Icons font has the “face” ligature, see: https://google.github.io/material-design-icons/#using-the-icons-in-html

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:23 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
vinuelcommented, May 9, 2019

To get a list of ligatures would really be helpful!

Recently a FontDrop! user sent me a script that he used to get ligatures. He wrote:

Below is the JavaScript I used to grab the ligatures. It’s missing the first character for each ligature, but that was good enough for me.

Here is the code


(function(){
  var glyphIndexMap = {"0":1,"1":3,"32":4,"95":5,"97":6,"98":7,"99":8,"100":9,"101":10,"102":11,"103":12,"104":13,"105":14,"107":15,"108":16,"109":17,"110":18,"111":19,"112":20,"114":21,"115":22,"116":23,"117":24,"118":25,"119":26,"121":27,"9724":28,"57549":29,"57569":30,"57573":31,"58131":32,"58133":33,"58134":34,"58821":35,"58829":36,"58834":37,"58840":38,"59389":39,"59448":40,"59449":41,"59450":42,"59517":43,"59518":44,"59530":45,"59572":46,"59574":47,"59595":48,"59596":49,"59611":50,"59612":51,"59648":52,"59649":53,"59650":54,"59651":55,"59652":56,"59653":57,"59654":58,"59655":59,"59656":60,"59657":61,"59658":62,"59659":63};
  var reverseGlyphIndexMap = {};
  Object.keys(glyphIndexMap).forEach(function(key){
    var value = glyphIndexMap[key];
    reverseGlyphIndexMap[value] = key;
    });
  var lookups = {"lookupType":4,"lookupFlag":0,"subtables":[{"substFormat":1,"coverage":{"format":2,"ranges":[{"start":6,"end":8,"index":0},{"start":10,"end":14,"index":3},{"start":17,"end":18,"index":8},{"start":20,"end":24,"index":10},{"start":26,"end":27,"index":15}]},"ligatureSets":[[{"ligGlyph":38,"components":[21,21,19,26,5,24,20,26,6,21,9]},{"ligGlyph":35,"components":[18,12,16,10,5,9,19,26,18]}],[{"ligGlyph":48,"components":[6,22,15,10,23]},{"ligGlyph":57,"components":[16,19,12]}],[{"ligGlyph":33,"components":[13,10,25,21,19,18,5,21,14,12,13,23]},{"ligGlyph":32,"components":[13,10,25,21,19,18,5,9,19,26,18]},{"ligGlyph":34,"components":[13,10,25,21,19,18,5,24,20]},{"ligGlyph":36,"components":[16,19,22,10]},{"ligGlyph":49,"components":[6,21,23]}],[{"ligGlyph":30,"components":[18,25,10,16,19,20,10]}],[{"ligGlyph":61,"components":[6,8,10,7,19,19,15]},{"ligGlyph":54,"components":[16,14,8,15,21]}],[{"ligGlyph":53,"components":[19,19,12,16,10]}],[{"ligGlyph":44,"components":[10,6,21,23,5,7,19,21,9,10,21]},{"ligGlyph":43,"components":[10,6,21,23]},{"ligGlyph":45,"components":[19,17,10]}],[{"ligGlyph":59,"components":[18,22,23,6,12,21,6,17]}],[{"ligGlyph":46,"components":[6,21,15,10,21]},{"ligGlyph":37,"components":[10,18,24]}],[{"ligGlyph":52,"components":[10,26,22]}],[{"ligGlyph":58,"components":[14,18,23,10,21,10,22,23]},{"ligGlyph":29,"components":[13,19,18,10]}],[{"ligGlyph":31,"components":[22,22]}],[{"ligGlyph":42,"components":[23,6,21,5,7,19,21,9,10,21]},{"ligGlyph":41,"components":[23,6,21,5,13,6,16,11]},{"ligGlyph":47,"components":[10,6,21,8,13]},{"ligGlyph":40,"components":[23,6,21]}],[{"ligGlyph":50,"components":[13,24,17,7,5,9,19,26,18]},{"ligGlyph":51,"components":[13,24,17,7,5,24,20]},{"ligGlyph":63,"components":[13,10,15,18,19,26]},{"ligGlyph":60,"components":[26,14,23,23,10,21]}],[{"ligGlyph":39,"components":[22,10,21]}],[{"ligGlyph":62,"components":[10,9,9,14,18,12,26,14,21,10]}],[{"ligGlyph":55,"components":[19,24,23,24,7,10]},{"ligGlyph":56,"components":[10,16,20]}]]}]};
  var ligatureSets = lookups.subtables[0].ligatureSets;
  ligatureSets.forEach(function(set){
    set.forEach(function(ligature){
     ligature.components = ligature.components.map(function(component){
       component = reverseGlyphIndexMap[component];
       component = parseInt(component);
       return String.fromCharCode(component);
      });
      console.log(ligature.components.join(''));
   });
  });
})();

I’m not a javascript developer, but maybe it is a starting point …

1reaction
petermikitshcommented, Aug 30, 2020

I made an NPM module for getting an array of ligature names from a font. It’s published to npm as ligatures. https://github.com/petermikitsh/ligatures

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ligatures in programming fonts
First, what are ligatures? Ligatures are special characters in a font that combine two (or more) troublesome characters into one. For instance, in...
Read more >
Ligature – Fonts Knowledge
A glyph that combines the shapes of two (or more) characters into a new form, making for a more harmonious reading experience.
Read more >
Ligatures Part 1 - Standard - Fonts.com
Although the “fi” and “fl” ligatures are standard in Type 1 and TrueType® fonts, a broader range of standard ligatures are found in...
Read more >
How to Use Font Ligatures in InDesign, Photoshop & Illustrator
Font ligatures are one of the most purposeful elements in graphic design, especially in long forms of text. Learn what font ligatures are ......
Read more >
How to Use Ligatures in Open Type Font with Windows ...
Select the ligature you would like to use by clicking on it and pressing the "Select" button. Now highlight the character and press...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found