search

yWorks / svg2pdf.js

A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
MIT License
646 stars 96 forks source link

When font-size declared in rem, text is missing in the exported file. #232

Closed karolkolodziej closed 1 year ago

karolkolodziej commented 1 year ago

Describe the bug When adding the font-size expressed in rem to a text, it is not visible in the exported file.

To Reproduce See this playground.

Expected behavior The font-size in rem should be applied similarly to the on in px- which works well.

Desktop (please complete the following information):

yGuy commented 1 year ago

Not sure whether "rem" is officially supported in SVGs, not even SVG2 seems to be clear on this: https://svgwg.org/svg2-draft/types.html#InterfaceSVGLength

And I don't think browsers, agree with the implementation, either: https://bugzilla.mozilla.org/show_bug.cgi?id=1231147

How should the size be determined for an SVG embedded into a PDF? Font sizes relative to what?

karolkolodziej commented 1 year ago

How should the size be determined for an SVG embedded into a PDF? Font sizes relative to what?

I guess it should work similarly to the em only being relative to the top element - demo.

Indeed the SVG2 documention doesn't mention the rem. However percentages are there and they also don't work correctly- demo.

yGuy commented 1 year ago

OK - the latter should have been fixed in #100 but might not work for the CSS attributes, but only for the "real" SVG attributes. I don't think that "rem" is something we should support until it's clear how it should behave, i.e. until there is actually a spec other than prior art in existing implementations that use the HTML document root, which really doesn't make sense in the context of svg2pdf, IMHO.

yGuy commented 1 year ago

Let's create another issue for the em case. I am closing this for the "rem" case until there is a spec for this available. I don't see that this can be an important use-case as long as it only works inside the HTML DOM in a browser.