Refs: #237346

• anyOS @meganrogge
• anyOS @sandy081
• anyOS @deepak1556

Complexity: 5

Create Issue

Create Issue

This iteration it has been made possible to define variable fonts in the editor through editor decorations which override the default font. There are new properties in the monaco.d.ts file in the IModelDecorationOptions called fontSize, fontFamily, fontWeight, fontStyle which can be used to specify the font for a specific range. The goal of this TPI is to verify that user interactions with editor lines having non-default font remain correct and to file issues otherwise. Some points to note are as follows:

• We have not yet surfaced the decoration fontStyle, fontFamily, fontWeight, fontStyle properties in the vscode.d.ts for extensions to use. Please see below for how to define these properties in an extension.
• When the word wrap is toggled on, the line does not break correctly if variable fonts are set. This is a known issue and I will be working on that this iteration.
• There are two settings which control whether variable fonts are allowed in editors. Make sure they are true:

  "editor.allowVariableFontsInAccessibilityMode": true
  "editor.allowVariableFonts": true

• This TPI is the counterpart to Test: variable line heights #246822 which aims to test variable line heights.
• The fonts are set per-editor, not per model

Preparing the test

To test, the easiest to do is to start from the following PR: #253000. This PR surfaces the font properties as a configurable properties in the vscode.d.ts file and set up the relevant code to convert the extension host decoration font properties to the monaco editor font properties. The PR also adds code to the inbuilt TypeScript extension so that:

• lines that have class names have line height 100, font-size 80, font-family Aria
• lines that have interface names have line height 100, font-size 90, font-family Georgia
• lines that have function signatures have line height 70, font-size 60, font-family Courier New
• lines that have method signatures have line height 30, font-size 20, font-family Verdana

If you run the code from the PR you should see something similar to the following:

Alternatively to test, you can add the change from the vscode.d.ts and the extHostTypeConverter.ts files from the PR above into the clean VS Code repo, run this new code and in OSS run a new extension which defines variable font info.

I also invite you to find existing inbuilt monaco editors in VS Code (like for example the panel chat code blocks), set variable font sizes on them, and test these cases!

Testing

The goal of this TPI is to break the user interaction with the editor when variable fonts are set on the editor. Think of settings and user actions that involve the editor lines and which could break the editor rendering. Some gestures could be clicking around, selecting, scrolling. I invite you to search for edge cases that could break the interaction.

Known issues

• The line breaks are not correctly computed when the word wrap is toggled

Thanks for testing!