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.

Sign up for GitHub

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

Jump to bottom

SVG text with text-anchor="middle" is clipped from version 60.2 #2136

Closed
paramaciej opened this issue Apr 26, 2024 · 2 comments
Closed

SVG text with text-anchor="middle" is clipped from version 60.2 #2136

paramaciej opened this issue Apr 26, 2024 · 2 comments
Labels
bug Existing features not working as expected
Milestone
62.0

Comments

@paramaciej
Copy link

Hi!

I've found out that there is a regression of SVG text rendering in version 60.2. When I set text-anchor="middle", the bottom part of the text gets clipped. In the release notes for 60.2 there is a text-anchor related commit mentioned (1460522) , so maybe it's linked.

In the current version (61.2) it's not working properly.

Below HTML fragment and screenshots from versions 60.1 and 60.2.

<!DOCTYPE html>
<html lang="en">
<body>

<h1>text-anchor="start"</h1>
<svg width="18cm" height="10cm">
  <text x="50%" y="50%" text-anchor="start" font-size="48pt" fill="black">
    abcdefg
  </text>
</svg>
<hr>
<h1>text-anchor="middle"</h1>

<svg width="18cm" height="10cm">
  <text x="50%" y="50%" text-anchor="middle" font-size="48pt" fill="black">
    abcdefg
  </text>
</svg>

</body>
</html>

Version 60.1

image

Version 60.2

image
@liZe liZe added the bug Existing features not working as expected label Apr 26, 2024
@liZe
Copy link
Member

liZe commented Apr 26, 2024

Thanks for the bug report.

The problem comes from the fact that the text-anchor code now has to clip the text, because of a translation. For that, it uses the text bounding box. But this bounding box is the logical bounding box, not the ink bounding box (see Pango documentation to learn more about this).

The code to change is here:

WeasyPrint/weasyprint/svg/__init__.py

Lines 492 to 496 in 5a74e3b

if is_valid_bounding_box(node.text_bounding_box):
x, y, width, height = node.text_bounding_box
group.extra['BBox'][:] = (x, y, x + width, y + height)
x_align = width / 2 if text_anchor == 'middle' else width
self.stream.transform(e=-x_align)

A dirty workaround would be to add some extra width/height.

@liZe liZe closed this as completed in 172e194 Apr 26, 2024
@liZe
Copy link
Member

liZe commented Apr 26, 2024

A dirty workaround would be to add some extra width/height.

I added this dirty workaround that should work in most common cases. Text support is in quite a bad shape for SVG, a real fix would require a lot of work…

@liZe liZe added this to the 62.0 milestone Apr 26, 2024
@liZe liZe mentioned this issue Apr 26, 2024
Closed
okkays pushed a commit to okkays/WeasyPrint that referenced this issue May 1, 2024
@liZe @okkays
Add extra space to include ink extents for aligned text in SVG
71afe7a 
Fix Kozea#2136.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
62.0
Development

No branches or pull requests
2 participants
@liZe @paramaciej