Canvas line labels are too big, scale them equally with text inside boxes

Use case or problem

Canvas labels are too big. I am using Obsidian to create concept diagrams mindmaps of sorts. Nice to have ideas laid out and connected to each other.

Text inside the boxes scale with zooming but text on labels do not. This is very incoherent. If I have lots of boxes and lines have longer labels, the labels take over everything. They hide boxes, they hide other labels even.

I don’t understand the reasoning that why labels are decided to be visible all the time and therefore don’t scale equally like text inside boxes. Also, labels don’t support markdown afaik.

Proposed solution

Please make the line labels scale the same way as text inside boxes.

Current workaround (optional)

Zoom in very close which is actually a bad workaround in case of lots of boxes, lines and labels because not all the nodes will be visible at same time.

Related feature requests (optional)

Markdown support in line labels. Not really needed though.

1 Like

Some screenshots to show the problem. It’s only few nodes here. I had to play tricks like increasing the distance of nodes a lot so that line labels don’t overlap and hide everything beneath them at higher zoom levels.
image
You can see the line labels overlapping other line labels.

only way to see the text clearly is by zooming in a lot


but now you can not see the full image.

P.S. It was suggested here Canvas: Link labels do not scale with note labels when zooming out - #4 by Silver that since it is intended design (which I disagree with, see screenshots) it should be posted as a feature request.

This suggestion here is a very nice workaround.
https://forum.obsidian.md/t/canvas-disable-scaling-of-labels-when-zooming/53880/2?u=lifeh2o

Use case or problem

I’ve been told it is by design that labels are scaled automatically when zooming, to be legible. The problem with this is that there is no safe distance between nodes such that the label in between does not overlap with the nodes. Given that there is no 100% zoom reference (depends on window size and content) I can’t rely on the canvas looking the same at a specific zoom level.

The extreme case is this one:

Proposed solution

Allow me to disable rescaling of labels and keep them at the same font size as the node content.

Current workaround (optional)

Related feature requests (optional)

2 Likes

The default label scaling didn’t make sense to me as well. So, I have been using the following CSS snippet to solve it. At first, I considered disabling scaling entirely, but decided instead to make the font size consistent between the connection label and the card. In my snippet, I am using a scaling factor (--my-zoom-multiplier) that is 85% of the default scaling factor (--zoom-multiplier). If you don’t want the scaling, you can set the font size to a specific value.

/* Create and use a scaled down version of --zoom-multiplier called --my-zoom-multiplier */
.canvas-path-label {
    --my-zoom-multiplier: calc( var(--zoom-multiplier) * 0.85);
    font-size: calc(var(--font-ui-large) * var(--my-zoom-multiplier));
    padding: calc(var(--size-2-3) * var(--my-zoom-multiplier));
    max-width: calc(17em * var(--my-zoom-multiplier));
}
4 Likes

Thanks very much. This just. works