font-style for variable fonts with either Slant or Italic axes.

[thlinard]

Description
Implementation of CSS Spec for font-style for variable fonts with either Slant or Italic axes.

Specification
CSS Spec for font-style

Tests
Links to web-platform-tests (on https://wpt.fyi) for the feature (this can be all tests, not a curated list): none, but https://arrowtype.github.io/vf-slnt-test/ (three test fonts are provided)

Rationale

The only style that works with a variable font with slnt or ital axis is the low-level control font-variation-settings.

The following styles and elements are only correctly supported (minus one detail, see https://arrowtype.github.io/vf-slnt-test/) by Firefox:

• <i> element
• font-style: italic;
• font-style: oblique;
• font-style: oblique XXdeg;
• font-style: oblique -XXdeg;

Due to poor support, Google Fonts chose to stop releasing fonts with ital or slnt axis:

• Support for Italic axis on API?
• [spec] How to handle slant axis in STAT table
• Axis Registry: slant axis
• Inter fonts lacks italics.

Example of advice given by a site aimed at web developers:

Due to some inconsistencies with how browsers handle variable font files that contain both italic and upright variants (and also files that contain both italic and slant axes), in these scenarios it’s best to omit the font-style line completely.
https://variablefonts.io/implementing-variable-fonts/

Relevant browser issues:

• Chromium Issue 1064756: "font-style: italic doesn't activate the ital axis of variable fonts"
• WebKit Bugs #209565: "Variable fonts with 'slnt' or 'ital' axes are not rendered correctly with font-style:italic, etc"

Relevant specification issues:

• [css-fonts-4] Behavior for variable fonts with 'ital' axis ambiguous / underspec'ed (regarding a lack of clarification in the CSS specs on what to do with font-style: oblique XXdeg; and a font that has only an ital axis)

Glossary:

• Italic axis (ital)
• Slant axis (slnt)

Specifications:

• OpenType® Specification
• CSS Fonts Module Level 3:

italic
selects a font that is labeled as an italic face, or an oblique face if one is not
oblique
selects a font that is labeled as an oblique face, or an italic face if one is not

[foolip]

Hi @thlinard, thanks for filing a proposal! We just opened up for Interop 2023 proposals yesterday, see https://github.com/web-platform-tests/interop/blob/main/2023/README.md for the process and what to expect.

You have used the same sections as our Focus Area proposal template, so if you like I can change the label to make it such a proposal. Alternatively you could recreate it using https://github.com/web-platform-tests/interop/issues/new?assignees=&labels=focus-area-proposal&template=focus-area-proposal.yml. Which would you prefer?

If you could expand on the rationale that would be helpful, and we'll also need a list of tests in wpt.fyi.

[thlinard]

Hi @foolip

Thanks, you can change the label, you sure know your processes better than me.

https://arrowtype.github.io/vf-slnt-test/ has recently been updated, with WOFF2 files for testing and CSS code (I'm not the author of this site, @thundernixon is). Is it enough for you?

Also, for the rationale, the same page compares the (very different) renderings of three browsers.

[gsnedders]

Also, for the rationale, the same page compares the (very different) renderings of three browsers.

While this is true, why do web developers care about this feature? Do we have any evidence that they care about this feature?

That's what the rationale section is trying to answer, not whether there's any incompatibility between browsers.

[thlinard]

While this is true, why do web developers care about this feature? Do we have any evidence that they care about this feature?

That's what the rationale section is trying to answer, not whether there's any incompatibility between browsers.

Well, we've got a chicken and egg problem, then. Web developers aren't interested in a feature that doesn't work (or that only works on Firefox), and browser developers don't fix a feature that isn't used. Wasn't the present initiative precisely intended to go beyond that?

[jensimmons]

@thlinard I think you are misunderstanding what's going on.

Interop 2023 is accepting new proposals from Sept 15 - October 15. After that, the team involved with the project will take all the proposals under consideration and choose which to include.

You've started such a proposal. But you need to make your case why this should be included. You need to show, with evidence, that this is something that fits the criteria.

Sam and Philip aren't arguing against this technology. They are attempting to let you know what's missing from your proposal. They are trying to help you. Every proposal needs to include certain information. Just like any proposal — applying for a job, admission to college, or for a grant — you have to pitch your case. And your's simply isn't complete yet. And because of that, it's likely to not make it.

So make your case!

Don't assume everyone reading this already knows all about font-style for variable fonts with either Slant or Italic axes. Read the README for details about what's expected. Explain: what is the current state? Is the web standard done? Who's implemented so far? What's missing for interoperability? How will including this in Interop 2023 help the web?

There won't be time for everyone involved to go individually do this research. We need you to gather all the information and present it for us, so we can take this under consideration.

[thlinard]

@thlinard I think you are misunderstanding what's going on.

Interop 2023 is accepting new proposals from Sept 15 - October 15. After that, the team involved with the project will take all the proposals under consideration and choose which to include.

You've started such a proposal. But you need to make your case why this should be included. You need to show, with evidence, that this is something that fits the criteria.

Sam and Philip aren't arguing against this technology. They are attempting to let you know what's missing from your proposal. They are trying to help you. Every proposal needs to include certain information. Just like any proposal — applying for a job, admission to college, or for a grant — you have to pitch your case. And your's simply isn't complete yet. And because of that, it's likely to not make it.

So make your case!

Don't assume everyone reading this already knows all font-style for variable fonts with either Slant or Italic axes. Read the README for details about what's expected. Explain: what is the current state? Is the web standard done? Who's implemented so far? What's missing for interoperability? How will including this in Interop 2023 help the web?

There won't be time for everyone involved to go individually do this research. We need you to gather all the information and present it for us, so we can take this under consideration.

I understand that you're trying to help me and I thank you for that, but please also consider that I'm trying to put forward an idea which is not without merit: when a feature is not already supported by Chrome or Safari, there is little chance that this will interest any developer. So if the criterion is "prove that it interests lots of developers", it's lost in advance.

I think I can show how the lack of support beyond Firefox creates a crippling "chicken and egg" situation: how it prevents Google, or anyone, from releasing variable fonts with an italic axis (which would not work for the vast majority of users) and therefore why interest cannot emerge because there are no fonts available. But if I have to prove an interest in something that only works with Firefox, and therefore isn't used by anyone, I don't know how to do that.

But certainly I can better explain the current situation, and I'll do that.

[jgraham]

when a feature is not already supported by Chrome or Safari, there is little chance that this will interest any developer

That's not really the case; developers expressing an interest in using features that aren't yet widely implemented is common where those features are addressing unmet needs. For example container queries and subgrid both showed up as prominent requests in developer feedback surveys before they were implemented across browsers (or at all).

[foolip]

@thlinard in addition to making the rationale as strong as you can, it would be great to ensure the spec is in order and the tests match it.

Does w3c/csswg-drafts#3125 need to be resolved before the spec is clear on what should be implemented?

And can the tests in https://arrowtype.github.io/vf-slnt-test/ be turned into tests in web-platform-tests? In particular, is a special test font needed for this? The tests as now structured require a human to look for pink, and that's not easily done in WPT. The easiest is if it's possible to write reftests, which compare two pages pixel-by-pixel, optionally with some fuzziness allowed.

[thlinard]

Does w3c/csswg-drafts#3125 need to be resolved before the spec is clear on what should be implemented?

In my opinion this is a minor point. The main thing that things as old as <i> and font-style: italic; work (by the way, maybe that's a source of the problem: nobody asks because everyone expects it works, and if not, they blame the font, not the browser). Resolve a lack of clarification in the CSS specs on what to do with font-style: oblique XXdeg; and a font that has only an ital axis would be a plus, for sure: in https://arrowtype.github.io/vf-slnt-test/, the expected result for Firefox is 🤷).

And can the tests in https://arrowtype.github.io/vf-slnt-test/ be turned into tests in web-platform-tests? In particular, is a special test font needed for this? The tests as now structured require a human to look for pink, and that's not easily done in WPT. The easiest is if it's possible to write reftests, which compare two pages pixel-by-pixel, optionally with some fuzziness allowed.

I just tried to draw attention to an issue, unfortunately I'm not the author of https://arrowtype.github.io/vf-slnt-test, @thundernixon is. @arrowtype or Stephen Nixon is much better qualified than me for such tests.

[drott]

FWIW I filed crbug.com/1371880 for what looks like redundant synthesis in the slnt cases of the test page.

Regarding this proposal:

• I am tentatively in favor of fixing the slnt cases and having this be part of this proposal.

@foolip wrote:

And can the tests in https://arrowtype.github.io/vf-slnt-test/ be turned into tests in web-platform-tests?

• Yes, it looks like https://arrowtype.github.io/vf-slnt-test/ is based on the open source Recursive font. Modifying the font and subsetting and building it into some static reference fonts makes it possible to build reftests. (There might be some clarification in the CSS spec needed of what a standard italic and oblique should map to in terms of slnt angle values applied to the font (can't tell off-hand)).

• For the ital axis, I would like to see a stronger rationale. IMO (open to be convinced otherwise) the ital axis is more of a backwards compatibility concept in variable fonts and its mostly binary 0,1 representation is a bit add odds with variations, even if it's possible to map something like oblique 20deg to somewhere between that 0,1. For the latter case, ital usage is underspec'ed, hence [css-fonts-4] Behavior for variable fonts with 'ital' axis ambiguous / underspec'ed w3c/csswg-drafts#3125 is relevant.

Questions:

• Can we agree on Interop targets without a set of tests? Where would the tests come from? @jfkthame, does Firefox use a set of tests to test italic & oblique with slnt fonts, which are non WPT tests?

[foolip]

Can we agree on Interop targets without a set of tests? Where would the tests come from? @jfkthame, does Firefox use a set of tests to test italic & oblique with slnt fonts, which are non WPT tests?

We'll need to have some tests to complete the proposal, since reviewing the tests is part of everyone deciding if they'd like to include this in Interop 2023 or not.

[jfkthame]

Where would the tests come from? @jfkthame, does Firefox use a set of tests to test italic & oblique with slnt fonts, which are non WPT tests?

No, I don't recall that we have tests covering that.

As suggested above, creating a set of static reference fonts is probably the way forward for more extensive slnt tests.

(And as for the ital axis, I think it was a mistaken idea and just shouldn't exist....)

[thlinard]

(And as for the ital axis, I think it was a mistaken idea and just shouldn't exist....)

Support for the slant axis would already be great, if you want I can limit the issue (in its title and its description) to that.

[drott]

FWIW I filed crbug.com/1371880 for what looks like redundant synthesis in the slnt cases of the test page.

This is now fixed in Canary.

[nairnandu]

Thank you for proposing font-style for Variable Fonts with either slant or italic axes for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop†int this year. For the ital axis there is an unresolved spec issue preventing interoperable implementations. For the slnt axis tests were added to WPT thanks to your report and this proposal. Nevertheless, we had many strong proposals, and could not accept them all.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.