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

Issue with text rendering in SVG #51

Closed
lvcarx opened this issue Jan 5, 2023 · 0 comments
Closed

Issue with text rendering in SVG #51

lvcarx opened this issue Jan 5, 2023 · 0 comments
Assignees
Labels
bug Something isn't working

Comments

@lvcarx
Copy link
Collaborator

lvcarx commented Jan 5, 2023

While working on the "new" text renderer i found an issue with text rendering in svg:

When setting a background color to the text, the bounds of the resulting svg text elements are not computed correctly.
This leads to the following result, where the background is shorter than the text:

What it should look like:
image

SVG:
image

This is because we can't compute the actual width of the text element, as we only create the xml structure of the svg document, but we don't actually render something (this is done individually by the browser for example).

There are solutions to this exact problem which we can use to fix this issue (see the approach in this branch), but we will face it again with the planned features for the new text renderer sadly, as we need the bounds calculation for those.

Fix

The changes in the svg-text-background-fix branch fix the text background bug:

Expected:
image

SVG:
image

Currently the rendering seems to be a bit blurry in the macOS svg preview tool (not officially supported as stated by mdn webdocs: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFlood), but Chrome and Firefox are rendering it correctly.

@lvcarx lvcarx added the bug Something isn't working label Jan 5, 2023
@lvcarx lvcarx self-assigned this Jan 5, 2023
@lvcarx lvcarx closed this as completed Apr 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant