BUG: Embed markdown as image rendered differently on desktop and mobile

[gky99]

Have you searched for existing issues (including closed ones)?

• Yes, I have searched the existing issues.

Does this bug persist in a new vault with only Excalidraw installed?

• Yes, I have verified the issue persists.

Your environment

SYSTEM INFO:
Obsidian version: v1.7.7
Installer version: v1.5.8
Operating system: Windows 10 Pro 10.0.26100
Login status: not logged in
Language: en
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 36
Plugins enabled: 2
1: Self-hosted LiveSync v0.24.8
2: Excalidraw v2.8.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.

And iPad is also on v1.7.7

Your NotebookLM query

Q: Embed markdown size
A: https://excalidraw-obsidian.online/wiki/troubleshooting/compatibility

Describe the bug

Markdown inserted to a drawing as image on desktop will be rendered to a different size on iPad.
This causes further issues that when that markdown image is cropped:

1. The cut line will be different. A correct crop on desktop will actually crop out content on iPad.
2. When a crop is created without shrink both vertical and horizontal directions, it won't render correctly on another platform

Steps to reproduce

1. insert a markdown file as image
2. draw some arrow to the edge of that image to help you visualize the change
3. sync the drawing to iPad
4. You can find:
5. The image is much larger than what's rendered on desktop
6. The max crop won't fit in all the contents

Expected behavior

• The image should be rendered to the same size
• Each line of the markdown content should be rendered to the same position

Additional context

I've tried several things to mitigate the issue:

1. Extract the CSS used on desktop from dev console. Save it to a CSS file and apply it on mobile.
2. Define a fixed font size on the root (excalidraw-md-host class)
3. Use the same local font on both platforms

This will give the image very similar size on both platforms and make it usable, but the crop is still broken and the text still won't perfectly align to the same position. I can see the image box rendered on mobile is a little bit taller and narrower than on desktop

[zsviczian]

This is likely a bug, however equally likely I won't have time to look at this any time in the near future. Sorry.

[gky99]

Can we prioritize the fix to the crop if it's not too hard to fix? A broken crop is quite annoying and based on my observation the cause is likely just some out of boundary issue which should be pretty easy to fix.

The styling issue can be backlogged as it can be very complicated and time-consuming to fix. Also since with all the adjustments above, it's 90% usable, it's not urgently needed.

[zsviczian]

Translating the crop area from PDF++ to excalidraw is far more complex than meets the eye. the current solution took me several days to test and fine tune to work, using multiple test PDF documents. But if you want to look at the code I am happy to take a PR.

what will help the process is if you share a sample PDF with this issue.
To fix it, you might want to print these mispositioned PDFs to PDF and use those corrected files in your vault.

[gky99]

Would you mind giving me a starting point for me to check the code?

[gky99]

Translating the crop area from PDF++ to excalidraw is far more complex than meets the eye. the current solution took me several days to test and fine tune to work, using multiple test PDF documents. But if you want to look at the code I am happy to take a PR.

what will help the process is if you share a sample PDF with this issue. To fix it, you might want to print these mispositioned PDFs to PDF and use those corrected files in your vault.

Is this for the other PDF-related issue? I think I've found the part of the code and it's nothing to do with PDF