markdown kerning on Linux/Ubuntu

[bonesmoses]

When using a non-sketch render mode, markdown text blocks may fail to render some contents. The following example illustrates:

direction: right

explanation: |md
  # Notes:
  * This will show up fine.  
  * This will be clipped.
| {
  near: top-center
}

node_design: Box o Stuff {
  style.border-radius: 10

  a <-> b <-> c
}

First, how it looks in sketch mode:

Then when using standard rendering:

Perhaps an additional note is that the rendered text area also appears to be smaller in general, as the first line wraps in standard render mode, but not in sketch.

The playground also does not exhibit either of these effects.

[alixander]

@bonesmoses Strange, looks like some kerning issue going on here.

What OS? Is it both SVG and PNG exports? you installed with source right? (i remember from another issue)

[bonesmoses]

My source install does it, as does the amd64 version of 0.2.6 I downloaded and ran separately. And this is with PNG, because the SVG doesn't render text blocks at all. I assumed that was some kind of SVG quirk, but maybe not. This is what I see when viewing an SVG with any text block:

Oh, and the OS is Linux Mint. Specifically:

Distributor ID: Linuxmint
Description:    Linux Mint 21.1
Release:    21.1
Codename:   vera

This is the equivalent of Ubuntu 22.04 / Jammy Jellyfish.

[alixander]

can you attach the SVG instead of screenshot of it? @bonesmoses . helps me determine if the issue is at generate side or rendering side. (i suspect not rendering side since you said playground works fine and that should be the same SVG)

[bonesmoses]

Sure. I wasn't sure if it would attach correctly. Here you are.

[alixander]

you're not seeing this?

[alixander]

what's the browser?

[bonesmoses]

After seeing that it shows up fine in Github (I noticed upon upload), I opened it directly in a browser and indeed it shows up fine there too. It must just be something going on with whatever render libraries they chose for this distribution's desktop tools.

Not an issue for the PNGs of course, but an odd quirk nonetheless.

[bonesmoses]

Browser is just bog standard Firefox, v111 as of this comment.

[alixander]

what's the tool you were using to render the SVG? Could be this issue? https://d2lang.com/tour/troubleshoot/#markdown-svgs-wont-render-in-certain-svg-viewers

[bonesmoses]

Could be. I've just been using the file browser and its built-in image viewer, which probably didn't account for fancy HTML SVGs. Though I'll note that even rsvg-convert from librsvg 2.52.5 produced an SVG with the text removed. So I'll ignore that for now, since the Linux tools for conversion appear to be lacking. Maybe I'll check Inkscape later to see if it does any better.

Anyway, this ticket was for the PNG render bug, not the SVG. It appears the SVG is correct if the browser output is anything to go by.

[alixander]

Right. The PNG works by opening a headless browser and putting the SVG onto a canvas element and grabbing the image data from that. I remember facing some kerning issues on ubuntu before back when I was using it. I'll try to think if there's anything we can do here

[bonesmoses]

That would definitely explain it. It actually looks fine in my browser, and sketch mode works fine, so I wonder what the difference is.

[alixander]

i think it uses chromium by default for the headless browser. does it look fine in chrome too, if you have that installed?

[bonesmoses]

Yep. Looks pretty much exactly the same in Chromium. So I ran it and saw that "node" showed up in ps. Specifically it ran these commands:

/home/bones/.cache/ms-playwright-go/1.20.0-beta-1647057403000/node /home/bones/.cache/ms-playwright-go/1.20.0-beta-1647057403000/package/lib/cli/cli.js install chromium
/home/bones/.cache/ms-playwright-go/1.20.0-beta-1647057403000 node /home/bones/.cache/ms-playwright-go/1.20.0-beta-1647057403000/package/lib/cli/cli.js run-driver

At least now I know why producing PNGs is so slow compared to SVGs.

[bonesmoses]

I cleared that portion of the npm cache to force it to re-download it, if any of these version numbers or build data help.

2023-03-30 13:54:07.443 [INFO]  (default.stdlib)    <./../../github.com/playwright-community/playwright-go/run.go:107>  (*PlaywrightDriver).DownloadDriver  Downloading driver to /home/bones/.cache/ms-playwright-go/1.20.0-beta-1647057403000
2023-03-30 13:54:13.751 [INFO]  (default.stdlib)    <./../../github.com/playwright-community/playwright-go/run.go:160>  (*PlaywrightDriver).DownloadDriver  Downloaded driver successfully
Downloading Playwright build of chromium v978106 - 130.7 Mb [====================] 100% 0.0s 
Playwright build of chromium v978106 downloaded to /home/bones/.cache/ms-playwright/chromium-978106
Downloading Playwright build of ffmpeg v1007 - 2.6 Mb [====================] 100% 0.0s 
Playwright build of ffmpeg v1007 downloaded to /home/bones/.cache/ms-playwright/ffmpeg-1007

[alixander]

oh i have a theory. some browser contexts need font-weight to be explicit, or else the default is botched. like font-weight: normal or font-weight: 400

[pvdvreede]

I have the same problem of having the text cut off for PNGs (and PDF), but not SVG. The way I am using d2 is in a VS Code dev container, so the theory this is an issue with ubuntu seems plausible.

The docker image I am using for it is:

FROM node:20
RUN apt-get update
RUN apt-get install -y graphviz curl bash
RUN curl -fsSL https://d2lang.com/install.sh | sh -s --
RUN npx playwright install-deps

Is there a work around for this @alixander . the style attributes you mention above are not ones here https://d2lang.com/tour/style#style-keywords so Im assuming those font-* attributes need to be added as part of the png generation code?

[pvdvreede]

I just ran d2 on my mac and the PNG/PDF looked fine - so confirmed this is definitely limited to linux.

[alixander]

@nhooyr do you remember the context of where you left off with playwright on CI? i think if we get playwright dep working in CI, we'll see this issue in the PNG tests and can fix.

maybe you can look into it after ur done with imports feature

[trogers-medasync]

I'm running into this issue as well. I'm running v0.5.1 on Pop!OS which is ubuntu based. Svg renders fine, but not png or pdf. Issue doesn't seem to come up if I use sketch mode so there is somewhat of a workaround, but not for cases where the aesthetic of sketch mode isn't suitable.

[alixander]

ah, thanks for that extra detail that it works on different font. for sure must be weights. will look into it again