Re: [css-fonts][css-text] letter-spacing vs. font-variant-ligatures

Zack Weinberg wrote:

> fantasai wrote:
> 
> > the element with tracking, depending on whether it ends up having
> > text that triggers a ligature, will produce some very unevenly-spaced
> > text. E.g.
> >
> >   fi n d  vs.  f i n d
> 
> As a point in favor of fantasai's suggestion being the Right Thing,
> see https://bugzilla.mozilla.org/show_bug.cgi?id=443853 and
> https://bugzilla.mozilla.org/show_bug.cgi?id=464168 , in which we
> (Gecko) were specifically asked to have 'letter-spacing' override UA
> default use of ligatures.

Those bugs, which are fixed, are about *default* behavior.  Elika was
making the point about the combination of explicitly defined use of
'font-variant' and 'letter-spacing', which is different.  Common
ligatures are on by default so there are actually *three* possible
states: default, explicitly enabled ('common-ligatures'), explicity
disabled ('no-common-ligatures').  The 'letter-spacing' property is
explicitly disabling these but either the 'font-variant' or
'font-feature-settings' properties have higher precedence.

For the examples below, assume all fonts contain an 'fi' common ligature.

Example 1:
==========

Common ligatures are on by default but the 'letter-spacing' property
disables them:

  em { letter-spacing: 1em; }

  <p> ... <em>fiddlesticks!</em> ... </p>

Result: f i d d l e s t i c k s

Example 2:
==========

Using the 'font-feature-settings' property will explicitly force
common ligatures (OpenType feature "liga") on:

  em { letter-spacing: 1em; }
  p { font-feature-settings: "liga" on; }

  <p> ... <em>fiddlesticks!</em> ... </p>

Result: fi d d l e s t i c k s

Example 3:
==========

The 'letter-spacing' property will disable font defaults:

  @font-face {
    font-family: test;
    font-variant: common-ligatures;
  }

  em { letter-spacing: 1em; }
  p { font-family: test; }

  <p> ... <em>fiddlesticks!</em> ... </p>

Result: f i d d l e s t i c k s

Example 4:
==========

Using all possible variations:

  @font-face {
    font-family: test;
    font-variant: no-common-ligatures;
    font-feature-settings: "liga" on;
  }

  em { letter-spacing: 1em; }

  p {
    font-family: test;
    font-variant: common-ligatures;
    font-feature-settings: "liga" off;
  }

  <p> ... <em>fiddlesticks!</em> ... </p>

Result: f i d d l e s t i c k s

Example 5:
==========

The last example is effectively equivalent to:

  em { letter-spacing: 1em; }

  p {
    font-feature-settings: "liga" off, "liga" on, "liga" off, "liga" on, "liga" off;
  }

  <p> ... <em>fiddlesticks!</em> ... </p>

Result: f i d d l e s t i c k s

The bottom line here is that you can set up confusing combinations
of these descriptors/properties but I don't think authors will run
into these in normal practice.

Cheers,

John Daggett

Received on Wednesday, 31 July 2013 03:26:51 UTC