Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 Bug Report: Removed dominant-baseline on svg text for inline SVG causing text misalignment #28006

Open
2 tasks done
jonesbusy opened this issue Dec 6, 2024 · 0 comments
Labels
area:techdocs Related to the TechDocs Project Area bug Something isn't working

Comments

@jonesbusy
Copy link

📜 Description

Hi,

We have issue when rendering inline svg with techdocs. It doesn't hapen when using mkdocs material and is specific how backstage is rendering techdocs.

This happen both on backstage and techdocs-cli serve --no-docker --verbose

I've created a minimal reproduction repo with screenshots/example here: https://github.com/jonesbusy/mkdocs-backstage-tests/blob/main/docs/index.md but I will also post there

For some reason I cannot explain, inline svg on techdocs have their text attribute dominant-baseline="text-before-edge" dropped causing text misalignement

An example svg

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="141.253 134.456 199.764 63.239" width="199.764px" height="63.239px">
  <rect x="141.253" y="134.456" width="199.764" height="63.239" fill="grey" transform="matrix(1, 0, 0, 1, 7.105427357601002e-15, 3.552713678800501e-15)"/>
  <text dominant-baseline="text-before-edge" style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 28px;" x="223.404" y="148.64" transform="matrix(1, 0, 0, 1, 7.105427357601002e-15, 3.552713678800501e-15)">Hej</text>
</svg>

That look like this

png

Is rendered correctly on mkdocs

mkdocs

But techdoc, the text is not alligned

techdocs

When trying to investigate, we check at the HTML and realize that the svg is removed attributes like dominant-baseline="text-before-edge

This example is with a very simple svg, but it also happen when SVG are generated by kroki and put inline on the HTML page

See here

The result is missing the attribute

techdocs2

When we edit the HTML and "restore" manually this attribute it works fine

techdocs3

Why on techdocs such attributes are removed ? Is there any optimization done at rendering ?

Note: This only happen at rendering. When techdocs-cli generate --no-docker --verbose the attributes are kepts

genarete

Thanks

👍 Expected behavior

Same as mkdocs. See before

👎 Actual Behavior with Screenshots

See before

👟 Reproduction steps

Repo here https://github.com/jonesbusy/mkdocs-backstage-tests

With instruction/example also on the docs folder

📃 Provide the context for the Bug.

No response

🖥️ Your Environment

No response

👀 Have you spent some time to check if this bug has been raised before?

  • I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

Are you willing to submit PR?

None

@jonesbusy jonesbusy added the bug Something isn't working label Dec 6, 2024
@camilaibs camilaibs added the area:techdocs Related to the TechDocs Project Area label Dec 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:techdocs Related to the TechDocs Project Area bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants