Text is sometimes cut off when rendered in Mermaid

[hiroaki0923]

Issue:

Text is sometimes cut off when rendered in Mermaid.

The issue can be observed on the official website. The letter e in Anyone is cut off.

Environment:

• macOS Monterey 12.4
• Chrome 103.0.5060.114 / Safari 15.5
• kroki c4162d2

Workaround:

Install font-noto by apk add font-noto into the kroki-mermaid image, and it now displays like this.

The text is no longer cut off, but the paddings seem to be a little bit strange.

When I put font-noto-all instead of font-noto, it looked different. The trailing of kroki has been cut off.

Closer to mermaid.live might be when to add font-liberation-nerd instead of font-noto. Since the browser tries to render the font in trebuchet ms defined in mermaid.min.js, it makes sense that liberation would be closer. The baseline seems to be a little off though.

I don't think it necessarily needs to be close in appearance to the mermaid.live, but I would like the text to appear uncut. I would appreciate some kind of fix. Thank you!

[ggrossetie]

According to https://github.com/mermaid-js/mermaid-live-editor/blob/master/Dockerfile, https://mermaid.live/ is based on nginx:alpine. It would be interesting to list which fonts is installed.

[ggrossetie]

# apk info
alpine-baselayout-data
musl
busybox
alpine-baselayout
alpine-keys
ca-certificates-bundle
libcrypto1.1
libssl1.1
ssl_client
zlib
apk-tools
scanelf
musl-utils
libc-utils
pcre2
nginx
geoip
nginx-module-geoip
brotli-libs
libbz2
libpng
freetype
libjpeg-turbo
libwebp
libgd
nginx-module-image-filter
ncurses-terminfo-base
ncurses-libs
libedit
nginx-module-njs
libgpg-error
libgcrypt
xz-libs
libxml2
libxslt
nginx-module-xslt
libintl
tzdata
ca-certificates
nghttp2-libs
libcurl
curl

[ggrossetie]

# apk info
musl
busybox
alpine-baselayout
alpine-keys
libcrypto1.1
libssl1.1
ca-certificates-cacert
libtls-standalone
ssl_client
zlib
apk-tools
scanelf
musl-utils
libc-utils
eudev-libs
expat
libbz2
libpng
freetype
libuuid
fontconfig
libfontenc
mkfontscale
mkfontdir
ttf-opensans
libgcc
libogg
libstdc++
flac
libxau
libbsd
libxdmcp
libxcb
libx11
libxcomposite
libxfixes
libxrender
libxcursor
libxdamage
libxext
libxi
libxrandr
libxscrnsaver
libxtst
alsa-lib
libffi
libintl
libblkid
libmount
pcre
glib
atk
dbus-libs
at-spi2-core
at-spi2-atk
sdl2
fribidi
libass
gmp
nettle
p11-kit
libtasn1
libunistring
gnutls
ncurses-terminfo-base
ncurses-terminfo
ncurses-libs
lame
opus
libtheora
libjpeg-turbo
v4l-utils-libs
libpciaccess
libdrm
libva
libvdpau
libvorbis
libvpx
x264-libs
x265-libs
xvidcore
ffmpeg-libs
pixman
cairo
avahi-libs
cups-libs
libevent
libxml2
shared-mime-info
hicolor-icon-theme
tiff
gdk-pixbuf
gtk-update-icon-cache
libxinerama
cairo-gobject
libepoxy
graphite2
harfbuzz
libxft
pango
wayland-libs-client
wayland-libs-cursor
wayland-libs-egl
libxkbcommon
gtk+3.0
nspr
sqlite-libs
nss
re2
snappy
libwebp
libgpg-error
libgcrypt
libxslt
chromium

[ggrossetie]

My guess is that it's working because Mermaid is using fonts installed client-side (i.e., on your machine).

"Fira Sans" and "Source Sans Pro" might be good alternative to "trebuchet ms".

[ggrossetie]

Here's the result when "Fira Sans" is installed:

Without "Fira Sans" current	With "Fira Sans" modified

[hiroaki0923]

@Mogztter Thank you for your investigation and for your suggestion for a better solution! It looks perfect, including the padding 👍