Diagram Font Scaling #2
Description
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:
