Safari kerning issue when using "f" and "i"

Question

I am running Safari 8.0.5 on OS X 10.10.3.

I've ran into a letter-spacing issue whenever using the characters "f" and "i" right next to each other. My guess is that this is a Safari bug, and I've submitted it to Apple as such, but also wanted to see if I can find a workaround in the mean time.

The HTML outputs the phrase "The fish is large" in two separate fonts. To accentuate the issue, I've adding 10px of letter spacing between each character.

HTML:

<div class="p1">
    The fish is large
</div>
<div class="p2">
    The fish is large
</div>

CSS:

div { letter-spacing: 10px; margin-bottom: 10px; }

div.p1 { 
    color: #009900;
    font-family: Helvetica;
}
div.p2 {
    color: #000099;
    font-family: Arial;
}

This is what my output for the above looks like in Safari:

Safari Letter Spacing Issue

For testing purposes I added an HTML comment between the "f" and "i" characters and that seems to have worked:

<div class="p1">
    The f<!----->ish is large
</div>

Gets outputted like this:

HTML Comment Version

While that technically works, it's not really an ideal solution for me as the content here is actually being generated by a WYSIWYG editor.

It seems the issue is only when "f" and "i" being right next to each other. I'm not sure if those letters have special meaning in Safari, but it's a pretty common letter sequence in the English language, so they really shouldn't have any keywords so small.

I also tried adding this:

 -webkit-font-feature-settings: "kern";

That did push the "s" over to the right, but the "f" and "i" were still bunched up together.

webkit font features

A capitalized "F" doesn't have the same problem:

Capitalized F

And the character that follows the "fi", doesn't seem to matter. I can change it to anything else and it still has the same issue.

Other letters after fi

Also it does the same thing if "fi" appears mid-word:

fi mid-word

I've confirmed that this issue also seems to exist on my iPhone 6 Plus running the latest version of Safari as well, so I doubt it's just something on my end.

To illustrate the issue I've created a jsfiddle with the necessary HTML and CSS that will hopefully reproduce the issue on your end. https://jsfiddle.net/38keruv7/4/

Does anybody have any ideas for a workaround that doesn't involve asking my clients to insert HTML comments in the middle of their words in a WYSIWYG editor?

I suppose I could scan and replace that particular combination prior to outputting the data, but that seems like a rather inefficient use of server resources, when dealing with much larger chunks of data.

score 11 · Accepted Answer · edited May 23 '17 at 12:17

11

It looks like you found a Safari bug. The joined "fi" is a typographic ligature. CSS3 has a font-variant-ligatures property that can be used to control them; Safari supports it with the -webkit prefix. It looks like -webkit-font-variant-ligatures: no-common-ligatures; solves the problem, at least in Safari 8.0.3:

div {
    -webkit-font-variant-ligatures: no-common-ligatures;
    letter-spacing: 10px;
    margin-bottom: 10px;
}

Here's an updated fiddle: https://jsfiddle.net/38keruv7/5/

If you're still having trouble, here's a related question that says rendering: optimizeSpeed; also solves the problem: Letters Connected in Safari

edited May 23 '17 at 12:17

Community

1
1

answered Apr 16 '15 at 17:59

Jordan Running

102,619
17
182
182

I had tried the rending: optimizeSpeed; option and that didn't seem to work. But the no-common-ligatures declaration works perfectly. Thank you. – David Stinemetze Apr 16 '15 at 18:03
1

to wit: this is not actually a bug. If the font was produces in a way that, by default, uses common ligatures, then the text shaper will simply automatically apply ligatures (turning the sequence of two letters "f" and "i" into the *single* letter "fi"). This is not a thing Safari controls unless you explicitly tell it to, so if you want to bypass that, you can use CSS3 feature instructions as shown in this answer. – Mike 'Pomax' Kamermans Apr 16 '15 at 19:31
@Mike'Pomax'Kamermans Couldn't it be a bug when used in combination with something like letter-spacing which has the sole purpose of spacing individual letters out? – David Stinemetze Apr 16 '15 at 19:48
1

No, this is correct behaviour. The browser asks the font to render a sequence of code points, without any overrides on how it should do that, and the text render engine returns a list of distinct glyphs, spaced and kerned *only* as per the instructions contained by font. Then the CSS kicks in, and letter-spacing gets applied, adding spacing between the *single* glyphs "fi", "s" and "h". So if you don't want that ligature to kick in, you either have to force `no-common-ligatures` so that the text engine knows to bypass them, or even turn off *all* ligatures using a `liga=0` or the like. – Mike 'Pomax' Kamermans Apr 16 '15 at 20:01
1

@Mike'Pomax'Kamermans Then why was there no space between "fi" and "s"? – David Stinemetze Apr 16 '15 at 20:06
1

that might be a bug, but seems a separate issue, e.g. "ligature + next letter" aren't getting CSS letter-spacing applied properly, as opposed to "f + i" not getting letter spacing between them because they're getting substituted (by default). – Mike 'Pomax' Kamermans Apr 16 '15 at 20:36
Fair enough. This was the first I had even heard of a ligature so it's all new to me. Thanks Mike. – David Stinemetze Apr 18 '15 at 08:05

Safari kerning issue when using "f" and "i"

1 Answers1

Linked