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:

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:

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.

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

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.

Also it does the same thing if "fi" appears 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.

Inflate

Answer 1

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

Damiondamita

I had tried the rending: optimizeSpeed; option and that didn't seem to work. But the no-common-ligatures declaration works perfectly. Thank you. – Inflate

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. – Hormuz

@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? – Inflate

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. – Hormuz

@Mike'Pomax'Kamermans Then why was there no space between "fi" and "s"? – Inflate

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). – Hormuz

Fair enough. This was the first I had even heard of a ligature so it's all new to me. Thanks Mike. – Inflate