Diagram Font Scaling

[jonas-haeusler]

Description

LikeC4 diagram fonts are rendering at 125% of their intended size when embedded in MkDocs.

Root Cause

• MkDocs Material sets the root font size to 20px (instead of the standard 16px) and resets body inline elements back to 10px (issue #911)
• LikeC4 uses rem units for font scaling, which inherit from the root font size, even through the shadow dom of the web component
• LikeC4's rem calculations assume a 16px root font size (source)

References

• LikeC4 Web Components are used by mkdocs-likec4: https://likec4.dev/tooling/code-generation/webcomponent/
• mkdocs-material issue: Chrome breaks layout if system language is Chinese squidfunk/mkdocs-material#911 (comment)
• LikeC4 pixel2rem function: https://github.com/likec4/likec4/blob/main/styled-system/preset/generate.ts#L81-L83

Reproducing the error

• Clone this repo
• Run the sample project: ./local-preview
• Run the likec4 preview alongside: npx likec4 start docs
• Compare the resulting diagrams:
  

[davydkov]

Hey @jonas-haeusler
In 1.48 I did first attempt to use fixed font
Can you try with your plugin?

[jonas-haeusler]

thank you @davydkov! this did fix the font sizing:

however, the icons still look a little bit off. any idea?