drawsvg icon indicating copy to clipboard operation
drawsvg copied to clipboard

Mismatch between view in notebook and Inkscape

Open olek-osikowicz opened this issue 2 years ago • 3 comments

Hi,

This simple code, produces image in notebook as expected: image

But when I open that in Inkscape there is a big mismatch nad text is not hanging any more.

image

Drawsvg: v2.1.1 Python: 3.11

Any idea how to fix that?

olek-osikowicz avatar Jul 12 '23 14:07 olek-osikowicz

Thanks for reporting this issue with how text is displayed. Unfortunately, the dominant-baseline attribute might be poorly supported by Inkscape (related bug, discussion). Drawsvg is generating the requested SVG but Inkscape is rendering it incorrectly. Interestingly, I see also this when I view it in Firefox (with the Mac Firefox default font_family='Helvetica'): Screenshot 2023-07-12 at 22 14 28

More evidence that the dominant-baseline is not well supported while selecting the text in Inkscape: Screenshot 2023-07-12 at 22 41 37


I've found the most reliable and portable way to align text in an SVG is by specifying the font with font-family (so different viewers don't pick different default fonts) and manually offsetting the y-position. Avoid using dominant-baseline or other advanced attributes. For example:

dw.Text('HELLO', 25, 100, 100+(25*0.8), font_family='Arial', ...)

where 0.8 depends on your font. Either measure this or use some font inspection tool to determine the appropriate value.

cduck avatar Jul 13 '23 02:07 cduck

Thank you for your reply,

If that's the case maybe it should be mentioned in the 'Quick Reference' that use of dominant-baseline is not well supported and discouraged.

I'll create PR to change the docs.

olek-osikowicz avatar Jul 13 '23 06:07 olek-osikowicz

Please do. Your issue really exemplified this.

cduck avatar Jul 14 '23 00:07 cduck