Disabling Font Ligatures CSS (Letter Combining)

Disabling font ligatures CSS (letter combining)

As it turns out, it's definitely possible, it just required some digging. As mentioned on MDN, you can turn off common ligatures:

font-feature-settings: "liga" 0;

This, however, is done by using an obscure css property. Instead, you should use font-variant-ligatures, like so:

font-variant-ligatures: none;

These two properties does the exact same thing, however, the latter one is recommended one.

MDN:

Note: Whenever possible, Web authors should use the font-variant shorthand property or an associated longhand property, font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.

This property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists.

In particular, this CSS property shouldn't be used to enable small caps.

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.

React Native Disable Ligatures

U+200B character can be used to remove this.

By adding U+200B character in between the characters that would from the ligature, you can prevent ligature from forming.

So: Prof​ile (has invisible char)

instead of: Profile

https://unicode-table.com/en/200B/

Print from Browser produces ft and ti as single characters in PDF

Turns out they're called "Ligatures"

CSS: Disable font ligatures in all browsers

font-variant-ligatures: none;

How to disable Ligatures/Diacritics functionality in mpdf?

The mPDF documentation gives this CSS style to disable ligatures:

/* disable common ligatures, usually on by default */
.noligs { font-feature-settings: "liga" 0; }

Alternatively you can use 'useOTL' => 0 to disable all OTL features on a font.

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.

---

Related Topics