CODEWITHSUNDEEP
htmlcssfontsinternet-explorer-10
Crispen Smith
Crispen Smith

Reputation: 533

Ligatures (and fonts) in IE10

I'm having a problem with the following code displaying correctly in IE10. I'm comfortable with the fact that it won't be able to work in IE9< but according to caniuse.com ligatures (and true type) should be functioning as expected in IE10. Is there a special rule that's required to make this work?

Here's the Relevant HTML:

<body>
<nav role = "navigation" class = "nav"> 
  <ul>
  <li>
    <a href="#branches"  class="selected">home</a>
  </li>
  <li >
    <a href="#trees">mobile</a>
  </li>
  <li>
    <a href="#path">portfolio</a>
 </li></li>
 <li><
   a href="#power">power</a>
 </li>
</ul> 
</nav>

And here's the CSS: 

@font-face {
  font-family: "ui";
  src: url("../fonts/Live-Share-UI.eot");
  src: url("../fonts/Live-Share-UI.svg") format("svg");
  src: url("../fonts/Live-Share-UI.ttf");
  font-feature-settings: "dlig" 1; }


.nav, .header {
  font-family: ui;
  position: fixed;
  text-align: center;
  z-index: 50;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto auto 1em auto;
  right: 0;
  height: 1.5em; }

This is an excerpt from a larger project which can be seen at live_share_test.aws.af.cm

This is currently working with Chrome Version 27.0.1453.94 m, Opera v 12, Firefox 19.0.2 on Windows as well as a current install of Safari on iPhone 4.

Upvotes: 4

Views: 1300

Answers (2)

user2422970
user2422970

Reputation: 387

Ligatures are joint letters or other shapes that replace sets of regular letters. e.g. f+f+l = ffl as one piece. Unicode advises to store the glyphs (drawings) of ligatures in the Private Use Area (PUA) of Unicode character database. They start from U+E000 and has about 6400 codepoints. You then define Glyph Substitution (GSUB) tables to define rules to replace typed letters with ligatures. You can use Microsoft's Volt program to do this.

What is a script in fonts? An OpenType compliant font (now ISO OpenFont) can have one or more scripts. Such a script is Latin used by English and Western European languages. Russian and Eastern European languages use Cyrillic. There are two kinds of ligatures: Standard and Discretionary. Any script can have STANDARD Ligatures. Most importantly, the OpenType standard says that applications should show STANDARD LIGATURES by default. All browsers except Internet Explorer complies with this specification.

Internet Explorer 10, it seems, requires the special CSS directive to turn on ligature display: font-feature-settings: 'liga' 1; <-- note the '1'. That means 'on'. Same syntax applies to 'dlig' etc. Microsoft does not seem to understand the standard they wrote. 'liga' 1 should be the default and unnecessary to specify. You use 'liga' 0 to force the program skip ligature display.

Early days (2006), the SVG-CSS3 property, 'text-rendering: geometricPrecision (or OptimizeLegibility' was used to make the browser display ligatures. Now this is not necessary to show Standard ligatures, in agreement with the font standard.

Standard ligatures help revive crippled Indic. See a web page written with a font that is practically all ligatures (This is actually Romanized Singhala. Copy text to Notepad to verify): A Singhala blog
All modern browsers on computers and smart phones show this page correctly except IE previous to version 10. The other browsers show the standard ligatures without any CSS. IE 10 requires the font-feature-setting rule.

Upvotes: 3

Crispen Smith
Crispen Smith

Reputation: 533

I actually found some of the documentation on this out there a little unclear and that's what lead to the gap.

The important idea here is to have the Element using the font-face configured properly. Here's the revised declaration for .nav that works correctly (using prefix-free to add appropriate prefixing)...

(Note that I moved the fonts directory under the stylesheets directory for easier paths)

@font-face {
 font-family: 'Live-Share-UI';
 src: url("fonts/Live-Share-UI.eot");
 src: url("fonts/Live-Share-UI.eot?#iefix") format("embedded-opentype"), url("fonts/Live-Share-UI.woff") format("woff"), url("fonts/Live-Share-UI.ttf") format("truetype"), url("fonts/Live-Share-UI.svg#Live-Share-UI") format("svg");
 font-weight: normal;
 font-style: normal; }

There's also a little more descriptive work added to the font face to make it more compact, this taken directly from icomoon.

.nav, .header {
  font-family: Live-Share-UI;
  font-feature-settings: "liga","dlig";
  text-rendering: optimizeLegibility;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-smoothing: antialiased;
  position: fixed;
  text-align: center;
  z-index: 50;
  margin: auto auto 1em auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5em; }

As a final note, I'm actually doing this in SASS and using these original code:

@mixin ui () { 
  font-family: Live-Share-UI;
  font-feature-settings:"liga","dlig";
  text-rendering:optimizeLegibility;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased; 
}

.nav, .header{ 
  @include ui();
  position: fixed;
  text-align: center;
  z-index: 50;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto auto 1em auto; 
  right: 0;
  height: 1.5em; }

So, in short: Apply dlig 1 to the element, not the font face.

Upvotes: 1

Related Questions