JsBarcode icon indicating copy to clipboard operation
JsBarcode copied to clipboard

Font options should not be written as shorthand

Open markoradak opened this issue 3 years ago • 5 comments

Font options should not be written as shorthand as this is not officially supported in SVG and is invalid in any graphic editing software: https://github.com/lindell/JsBarcode/blob/19cdeea9a03c3cd863a74d074ed8f7d66825b718/src/renderers/svg.js#L93

Happy to do a pull request as it's bugging me I cannot use it as intended 😇

markoradak avatar Oct 05 '20 21:10 markoradak

Thanks for the information, I did not that SVG font options are not supported. Can you link to any documentation about it? :)

But many browsers do actually render it. Removing it will break it for everyone that is using this library with font options to render it on a website. So removing it right now is not an option, but doing it for the next major version might be.

lindell avatar Oct 24 '20 07:10 lindell

@lindell Hey Johan, I would love to see this Update. I think the change won't break anything, because you actually don't change the logic. But it would work also in graphic programs.

You have to change the shorthand in regular syntax:

currently you have in the svg file: style="font: monospace 20px"

but it would be better this way: style="font-family:monospace; font-size:20px; font-weight:bold;"

I changed all appearances in my generated SVGs and I could open them afterwards in Sketch or Illustrator.

chrisbenjamin avatar Jul 09 '21 13:07 chrisbenjamin

Thanks @chrisbenjamin for the clarification. I was under the impression that the solution was something else. This does indeed seem to be solvable without changing anything 🙂

lindell avatar Jul 09 '21 18:07 lindell

I went to check this fix and read my original response again. The key is:

Removing it will break it for everyone that is using this library with font options

Right now, using fontOptions: "italic", as well as fontOptions: "bold" works. This is indeed a design mistake, but also something that will break backward compatibility if just changed to font-weight: ${options.fontOptions}

lindell avatar Jul 09 '21 18:07 lindell

Do you have any plan to support fontOptions: "underline" ?

gaegulee avatar Nov 01 '23 19:11 gaegulee