rounding errors on fonts
Hello,
i have a problem exporting a huge pdf or svg with Amiri font and a tiny size of 2 points .
i see "rounding" errors on the type especially on letter S .
i think i have a workaround, scaling everything up but i hit the 14400 canvas size .
i am working on a quite huge document.
please find attached a pdf exported from nodebox : zoom on S an 5 to see the problem.
any help apreciated .
Have a nice day
Pierre-Yves
- NODEBOX3CPR99testypo.pdf 7.25 MB
Keyboard shortcuts
Generic
| ? | Show this help |
|---|---|
| ESC | Blurs the current field |
Comment Form
| r | Focus the comment reply box |
|---|---|
| ^ + ↩ | Submit the comment |
You can use Command ⌘ instead of Control ^ on Mac
Support Staff 1 Posted by john on 13 Mar, 2021 10:58 PM
Hi Pierre-Yves,
Nodebox allows you to work with very high precision. But when it exports to SVG or PDF, it rounds all coordinates to two decimal places - to the nearest one hundredth of a pixel. It's a compromise that keeps the file sizes from getting out of hand; your 8 meg PDF would be ten times larger with full precision.
This is normally not a problem. Font paths will come out beautifully as long as the font size is bigger than about 2 (depending on the font and the rendering app).
In this case you have a perfect storm: a huge canvas, a tiny font size, and a font (Amiri) that has an unusually high number of subtle inflection points.
Your solution of scaling up to a higher font size is the normal workaround, but you say doing that would exceed the 14400 limit on canvas size. Can you break your image into multiple pieces and stitch them back together outside Nodebox?
If that's not possible, can you use a less complex font than Amiri? Doing so might buy you just enough resolution to eliminate the bumps. This can also cut the file size in half and make Nodebox less sluggish if you need to render thousands of characters.
I might be able to suggest some other solution if I understood what you are trying to do. Unless you print this file onto a billboard, no one will be able to see the words, let alone subtle ripples along the edges of a few characters.
Is this for an interactive presentation or an animation that involves zooming in until a single letter fills the screen? If so, there might be ways of substituting different font sizes as the user zooms in.
I have run into this problem before, and I wish NodeBox would provide an option of increasing precision on export in special cases like this. But it doesn't and isn't likely to anytime soon. And even if your could export full precision, many PDF or SVG renderers might not handle it properly anyway.
Please let me know if there's anything else I can do to help.
John
2 Posted by pyfave on 13 Mar, 2021 11:38 PM
in fact it will be a big print : size is a bit less than 4m *4m :-) , some layers.
the dare,you know ...
i fact the problem doesn't seem to come from the light decimal places in output.
if i change the font size to 16 and then scale down by 8 the problem seems solved.
so there is still something upstream.
i can't change the font but i agree that this font is quite demanding ..
i'll post the full image here when it's finished .
its a view on Spinoza Ethics
Thanks for your help !
Support Staff 3 Posted by john on 14 Mar, 2021 02:09 AM
Interesting!
I don't understand why scaling would fix this. I tried creating two SVGs, the first with Amiri at 2 points, the second with Amiri at 20 points scaled to 10 percent. Inspecting the inside of the SVG files I found they were identical - the same coordinates all rounded to 2 places. And both displayed the same subtle bumps when viewed in a graphics app, bumps not present if I looked at the 20 point font unscaled.
But if your problem is solved then that's great.
I once attempted a fairly large print (about 1m * 1.5m) which included about 100,000 characters printed in a 4 point font. This was about as much as Nodebox could tolerate. To keep Nodebox from crashing I had to use a san serif font. The resulting PDF (which had many other elements as well) was slow to open and caused problems at the print shop. I had to try several shops before I found one that could print it, and the small text in the final poster was too low-res to be readable. (I think it had to be printed at only 300 dpi, but this was years ago and I don't remember now for sure.)
So I am quite curious to hear how your project turns out. Please keep me posted!
John
Support Staff 4 Posted by Frederik De Ble... on 15 Mar, 2021 02:11 PM
I think there might be two causes for this:
- Either the system uses font hinting so fonts are more readable, forcing the fonts into a rigid pixel grid,
- The system uses integer metrics for fonts, rounding the fonts to the nearest integer. (See this post: https://stackoverflow.com/questions/31536952/how-to-fix-text-quality-in-java-graphics) If that's the case, we could fix this by setting fractional hinting in the graphics context.
5 Posted by pyfave on 20 Mar, 2021 10:43 PM
i made this little animated loop to demonstrate the problem.
there is a workaround,( up scaling )
so it is not a big problem,
but i see a bug here (i am on windows atm)
i just saw test prints of 3m*1m ,300dpi
and i am beginning to enjoy this program !
:-)
Support Staff 6 Posted by john on 21 Mar, 2021 12:40 AM
I'm glad you found a workaround and are enjoying NodeBox.
I ran your demo but couldn't see any problem.. I don't have most of the fonts you used, but substituted different variants of Amiri with an Arial for reference, tried varying the dimensions of your fit_to box, exported PDFs at different frames, etc, but was unable to see any aberrations whatsoever.
This is probably because I am on a Mac. Maybe Frederik can replicate it.
If you are able to share your final product, I'd love to see it!
John
7 Posted by pyfave on 21 Mar, 2021 02:21 AM
here are previews of the graphics for ethica.
http://ethica-spinoza.net/en
printed height is 3.5 on these images, jpg reduces quality
and a gif of on my screen showing what i see here.
8 Posted by pyfave on 14 Apr, 2021 11:34 PM
this discussion can now be marked as closed.