Get editor line height (px) and character space-width (px) by VSCode API

[Levan Katsadze]

Hi, I wrote VSCode extension, took me 6 months to build. It's a visual helper, it highlights nested code blocks. You can change block colors, depth, turn on/off focus, curly/square/round brackets, tags, python indentation and more.....

Supports: Python, PHP, JavaScript, JSX, TypeScript, TSX, C, C#, C++, Java, HTML, CSS and more...

It has already more than 1000 installs.
https://i.ibb.co/ZTkQKgR/blockman-view-extension333d.png

https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman

The main problem is calculating or finding editor line height (px) and character space-width (px) of monospace font, I cannot find such function in the VSCode API. I need these two values to render blocks properly.

So currently the only solution is to manually adjust line height and character space-width.
For simplicity, font must be monospace, so block width will be just multiplication of char count and char space-width (px).

So, in order to avoid manual adjustment of these two values, please provide a function to get these two values programmatically with VSCode API.

Thanks...

[VSCode Bot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• Please provide a function in API to get pixel location of any character in any line. (#118994)

[Levan Katsadze]

Maybe it looks like a duplication of this issue:

#118994

But, I believe it needed a separate issue.

[LeoKac]

Would love to see this feature in action!

[Alexandru Dima]

Very nice! Have you tried using ch instead of px for the decorations?

[Levan Katsadze]

Very nice! Have you tried using ch instead of px for the decorations?

Wow, thanks @alexdima, I think ch is working, even when zooming with mouse-wheel. You are a life saver. I will update Blockman soon. And, what about line height? I think it must be even easier.

[Alexandru Dima]

The line height can be straight forward computed by you. You can read the setting editor.lineHeight and then mimmic what the editor is doing internally:

/**
 * Determined from empirical observations.
 */
const GOLDEN_LINE_HEIGHT_RATIO = platform.isMacintosh ? 1.5 : 1.35;
const MINIMUM_LINE_HEIGHT = 8;

if (lineHeight === 0) { // 0 is the default
	lineHeight = Math.round(GOLDEN_LINE_HEIGHT_RATIO * fontSize); // fontSize is editor.fontSize
} else if (lineHeight < MINIMUM_LINE_HEIGHT) {
	lineHeight = MINIMUM_LINE_HEIGHT;
}

[Levan Katsadze]

Wow, seems promising. There is one problem, how can I import platform?

I add this line: import * as platform from 'vs/base/common/platform';
but it says: Cannot find module 'vs/base/common/platform' or its corresponding type declarations.ts(2307)

[Alexandru Dima]

platform.isMacintosh is only available in our core. It is true if the OS is macOS. You can use node's process to find out the OS.

[Levan Katsadze]

Ok, and one more question. It is not crucial for now, but it would be nice to find solution. I'm getting line height correct until I zoom with mouse.

I can see editor.mouseWheelZoom config value which is true/false, but I could not find the current zoom level value, so maybe if zoom level is 2x, then I can just multiply lineHeight with 2.

There is zoom level of editor and also zoom level of window which also effects the editor zooming. So, can I always get the correct pixel value somehow? Yeah, now things are getting complicated a bit maybe.

[Alexandru Dima]

I'm sorry, unfortunately the editor font zoom is not exposed in any way to the API.

[Levan Katsadze]

Thanks for everything. I updated Blockman already, the latest version is 1.1.1 (2021-06-05).

Also, maybe this is outside of the topic of this issue, but please check it out:

VSCode Color Decorators of styles causes wider text line, some situations are handled, some situations are not handled yet, because I managed to find some decorators with custom regex but not all.

Is there any way to get all the locations (line index & char index or global position) of all the color decorators? So Blockman will make certain blocks wider if necessary.

[Levan Katsadze]

Now I know the solution to get the locations (line index & char index) of all the color decorators.

const dataArr: any[] | undefined = await vscode.commands.executeCommand(
    "vscode.executeDocumentColorProvider",
    document.uri,
);

Thanks rioV8 from stackoverflow:
https://stackoverflow.com/questions/68020444/how-to-get-positions-of-all-css-color-decorators-with-vscode-api

[Levan Katsadze]

@alexdima, any ideas why Blockman not available in VS Code Web?

I think it's because Blockman is using node to detect OS:

So, maybe it is not working in web version of vscode, because web version does not have such Node support, am I right?

[Martin Aeschlimann]

Documentation on how to write extensions for VS Code Web is in the works. Tracked in #130628.