Prevent Ligatures in Safari (Mavericks/iOS7) via CSS

Prevent ligatures in Safari (Mavericks/iOS7) via CSS

We solved this by adding

 -webkit-font-variant-ligatures: no-common-ligatures;

to the css styles. It prevents the ligatures from appearing and thus the broken symbols in the font.

CSS: Disable font ligatures in all browsers

Despite no-common-ligatures you can try values like none, unset or no-contextual . See MDN for all possible values.

For example:

:root {
  font-variant-ligatures: none;
}

Also it should be supported in all modern browsers.

Characters like `tt` , `ti`, `ff` in my html page disappears while viewing with chrome and safari

The above issue occurs only in - webkit web browsers like chrome and safari - which provides support for ligatures - whereas browser like firefox does not.

A ligature is a combination of two or more letters joined as a single
glyph

Root cause

This issue with missing characters is due to ligature support provided by these modern browsers - let me explain how

1.The tool while converting - it converts characters to glyphs using poppler for rendering - now these browser when they come across characters like tt tf ti ff fi consider them to be ligature and searches for glyphs corresponding to tt and not t t

2.Since they do not have their corresponding glyphs - they just skip the characters and renders the rest - so, we fount the characters missing

Could be solved by

Disabling/ Turning-off the ligature in these browsers - embedding the css in the generating content

For more details please refer:

Prevent ligatures in Safari (Mavericks/iOS7) via CSS

Please correct me if I am wrong.

Font misalignment during pdf to html conversion using pdf2htmlEx tool