Vscode: feature request: configure OpenType font features

[siegebell]

From #6918: Please support configuration of font features, and possibly also support "user friendly" alternate configuration via font variants.

Font features allow the user to control the use of alternate glyphs and ligatures. For example:

• normal vs slashed zero
• lining vs old-style numbers
• small-caps
• fractions (and horizontal vs diagonal)
• ordinals

Issue #6918 demonstrates that fonts may include useful nonstandard feature tags, so it is important that the user is not restricted to just the "font variant" options.

Example:

"editor.fontFeatures": {"zero": 1, "salt": 3, "COOL": 1},

[voronoipotato]

This is a blocking feature for making use of a font I purchased for programming.

I don't think we should need extensions to use OpenType standards compliant font configuration.

If we can already do this and I'm just confused could someone help?

"[markdown]":{
"editor.fontFeatureSettings": "SS12"
}

see

tonsky/FiraCode#192
fabrizioschiavi/pragmatapro#84

[voronoipotato]

What work needs to be done to support this? As far as I can tell people have done this via extensions through the custom css extension.

{
   font-feature-settings: "ss12"
}

[voronoipotato]

https://github.com/Microsoft/vscode/commit/bcd90ace2111805cd91c0043dd118050457d6276

this commit is probably pretty close to the work that needs to be done

[voronoipotato]

https://github.com/Microsoft/vscode/commit/8d86204d05340bf79ea8b891e7951e4beb563fa2

It might also involve something like this.

https://github.com/Microsoft/vscode/blob/master/src/vs/editor/browser/config/configuration.ts

[voronoipotato]

https://sparanoid.com/lab/opentype-features/

[voronoipotato]

I think we should be able to use these with our themes. Some people like cursive parts.

[Njke]

Thanks, @voronoipotato !

One can add following to /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css:

.monaco-editor {
    font-feature-settings: "ss02" !important;
}

More about CSS for OpenType features: https://helpx.adobe.com/fonts/using/open-type-syntax.html

[voronoipotato]

@Njke hmmm that would only work if I wanted this stylistic set for all languages, however I only want ss02 on Markdown.

[swthate]

@Njke

One can add following to /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css:

.monaco-editor {
    font-feature-settings: "ss02" !important;
}

More about CSS for OpenType features: https://helpx.adobe.com/fonts/using/open-type-syntax.html

Sorry, but how do I get to /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css

Visual Studio Code.app is an... app right? I feel dumb, how do I navigate into it?? 😆

[swthate]

Right-click -> "show package contents"

Carry on!

[thundernixon]

(It seems worth noting that diving into the app Package Contents CSS is pretty hacky ... this would be much nicer and less fragile if made into an actual setting).

I like the initial proposal a lot – this would be great to basically follow the CSS syntax for OpenType features. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide

[gkeramidas]

With fonts like “Fira Code V2”, where several glyph alternatives can be enabled with font-feature-settings attributes, this is a super useful feature to have!

In addition to that, newer macOS versions (e.g. Catalina) will make it much harder to make changes under /Applications folders, so poking around under the app directory is going to be too cumbersome for most people.

[alexdima]

Implemented via https://github.com/microsoft/vscode/commit/ab0eb6de2d5fb4563385d98f302f78caa1767efd (https://github.com/microsoft/vscode/issues/82153) and it already shipped in Insiders.

e.g.

"editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'"

or

    "editor.fontFamily": "Fira Code"    
    "editor.fontLigatures": true,
    "[cpp]": {
        "editor.fontLigatures": "'ss06', 'ss19'",
    },
    "[javascript]": {
        "editor.fontLigatures": "'ss06'",
    },