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.

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