support font-size in DecorationRenderOptions

[siegebell]

Feature request: support specifying the font size in DecorationRenderOptions and ThemableDecorationAttachmentRenderOptions.

[siegebell]

I wouldn't mind submitting a PR for this because it seems trivial to throw in a bunch more CSS properties. But I expect this would have been done already if there weren't also bugs associated with them.

Sure enough:

• setting font-size: 0pt causes the cursor to disappear when next to or within the decorated range
• when clicking on a ::before decoration attached to a 0pt-sized range, the editor also loses focus.

[siegebell]

Another "bug" if font-size is set to 0.001em: when applied to a range at the end of a sentence, highlighting the line breaks. (Applies to both the selection highlight and other decorations.)

export function activate(context: ExtensionContext) {
  const dec = vscode.window.createTextEditorDecorationType({
    textDecoration: 'none; font-size: 0.001em',
  });
  function lineRange(line, start, end) { return new vscode.Range(line,start,line,end) }
  const editor = vscode.window.activeTextEditor;
  if (editor) {
    const lines = [
      "line1",
      "small word: word",
      "try selecting the previous line",
      "END OF EXAMPLE", "", "", ]
    editor.edit((edit) => {
      edit.insert(new vscode.Position(0,0), lines.join('\n'));
    }).then(() => {
      editor.setDecorations(dec, [lineRange(1,12,16)]);
    });
  }  
}

Observed:

[yzhang-gh]

Really useful

I find a extension Jumpy using SVG as a workaround

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} 13" height="13" width="${width}">
<rect width="${width}" height="13" rx="2" ry="2" style="fill: ${backgroundColor};"></rect>
<text font-family="Consolas" **font-size="11px"** fill="${fontColor}" x="1" y="10">${code}</text>
</svg>

It would be better to support font-size rather than using SVG

[mortenjust]

Would love font-size support for e.g. making Markdown headings larger

[fabiospampinato]

I'm surprised this hasn't been implemented already.

Anyway it's already possible to set the font-size property via some "CSS injection", if that's even a thing:

"textDecoration": ";font-size:5px"