Linux: Inconsistent/blurry font scaling when zooming on markdown transculsion

[micimize]

SYSTEM INFO (Obsidian v1.5.3 AppImage, Plugin v2.0.20 on kubuntu linux desktop)

SYSTEM INFO:
	Obsidian version: v1.5.3
	Installer version: v1.5.3
	Operating system: #14-Ubuntu SMP PREEMPT_DYNAMIC Tue Nov 14 14:59:49 UTC 2023 6.5.0-14-generic
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 0
	Restricted mode: off
	Plugins installed: 2
	Plugins enabled: 2
		1: Excalidraw v2.0.20
		2: Vimrc Support v0.9.0

RECOMMENDATIONS:
	Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.

Describe the bug On my desktop, either because I'm using linux or have a high dpi screen, most zoom levels appear to have inconsistently blurry font scaling, which varies from embed to embed. Normal editor views do not have the issue. Tested disabling HW acceleration but didn't help.

To Reproduce: Not sure without linux. Expected behavior: Comparable text crispness to editor view when zoomed out as is the case on mac.

Screenshots

Additional context I've seen some suggestions around that this has to do with DPI scaling but am not sure how to test this (https://stackoverflow.com/questions/15661339/how-do-i-fix-blurry-text-in-my-html5-canvas/15666143#15666143)

[zsviczian]

that depends on the scaling of the embeddable. Activate the embeddable and try command palette

[micimize]

This doesn't appear to be the issue – here I've just selected multiple embeds and applied the same relative scaling, but they have different text crispness:

[micimize]

I have narrowed the cause and found a workaround! Toggling off rounded edges solves the blurriness issue. So it is some esoteric interaction between an embed with rounded corners and rendering on linux (probably not a dpi issue I'm guessing).

@zsviczian I'm fine without rounded corners, but am happy to help troubleshoot if you want to look into this further. Am also fine to close it for now.

I can't seem to reproduce in chrome on excalidraw.com. so without looking more into the embed code my prime suspect is that the html canvas's aspect ratio in styles doesn't match the width/height the way it does in chrome:

element.style {
    width: 1112.63px; /* also chrome never has fractional units here */
    height: 1297.76px;
}
canvas[Attributes Style] {
    aspect-ratio: auto 1218 / 1421; /* in chrome this alwyas updates on resize */
}

https://github.com/zsviczian/obsidian-excalidraw-plugin/assets/8343799/212db25a-5ba5-4819-ae59-b40668e12b41

[zsviczian]

This is good to know.

I am not surprised about the difference between excalidraw.com / Obsidian.

Markdown documents are embedded not via an iframe (Obsidian mobile) /webview (Desktop, Electron), but via the Obsidian canvas node object which is essentially the document structure embedded in a DIV on top of the Excalidraw canvas. There are a few container DIVs that take care of positioning, scaling, and the rounded edges.

Would be good to get to the bottom of this issue as it also impacts embedded PDFs when they are embedded in a frame.

On 2024. Feb 23., Fri at 23:47, Michael Joseph Rosenthal < @.***> wrote:

I have narrowed the cause and found a workaround! Toggling off rounded edges solves the blurriness issue. So it is some esoteric interaction between an embed with rounded corners and rendering on linux (probably not a dpi issue I'm guessing).

@zsviczian https://github.com/zsviczian I'm fine without rounded corners, but am happy to help troubleshoot if you want to look into this further. Am also fine to close it for now.

I can't seem to reproduce in chrome on excalidraw.com. so without looking more into the embed code my prime suspect is that the html canvas's aspect ratio in styles doesn't match the width/height the way it does in chrome:

element.style { width: 1112.63px; /* also chrome never has fractional units here / height: 1297.76px; }canvas[Attributes Style] { aspect-ratio: auto 1218 / 1421; / in chrome this alwyas updates on resize */ }

https://github.com/zsviczian/obsidian-excalidraw-plugin/assets/8343799/212db25a-5ba5-4819-ae59-b40668e12b41

— Reply to this email directly, view it on GitHub https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1586#issuecomment-1962099591, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADNRO6SXPIBML3GT5SN3MKTYVEMA7AVCNFSM6AAAAABDDBI3VGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNRSGA4TSNJZGE . You are receiving this because you were mentioned.Message ID: @.***>