Font rendering precision

pedrovgs commented 1 year ago

Hi! First of all, thanks for the awesome library. It's really helpful!!

I'm trying to build an editor that renders content as part of the canvas once you are done editing content and noticed space between fonts when rendering using the library is bigger than the space when rendering outside of the library. As we are using word wrapping, some text with long sentences or sentences with words repeated accumulate an error that makes the rasterized HTML show 2 lines when the original HTML shows only 1.

As an example. Content like "aaaaaaaaaaaaaaaaaaaaaa b" will render in 1 line when the editor is showing HTML to the user and will render with 2 lines because of word wrapping when rasterizing HTML because of the width is fixed.

Do you know if there is something we can do to ensure rasterized text and HTML content have the same size if we know the container will have a fixed width?

I'm trying to reproduce it with an example with code from outside of my project here but I can't get it done so it is all likely the issue is with the HTML I'm trying to render but I have no clue what's going on or what can be missing.

Thank you for your hard work and help 😃 !

cburgmer commented 1 year ago

Hey, my best guess would be either the margin/padding on the HTML/BODY elements, or the resolution on retina displays (https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html).

pedrovgs commented 1 year ago

Hi @cburgmer thanks for the quick response. I'm checking and I don't think the issue is related to the device pixel ratio, because that would affect all the image and not the space between letters or rendering. Let me share with you 2 images so we can better understand what's going on.

This image shows HTML text as is:

This one shows HTML rasterized with the library:

Using the lines under the text, you can see how content is not placed in the very same position. There is a small error accumulated in every letter and finally moves the last word in the red example to the next line (that's why you can't see it).

pedrovgs commented 1 year ago

@cburgmer I think it can be related to the font. I think when rendering it's not able to load the font configured and instead, it loads a different one and this generates the difference. Is there any log or debug mode we can use to check if fonts are loaded properly? Or maybe any random idea we can use to validate if the issue is related to fonts? Thank you so much!

pedrovgs commented 1 year ago

Or maybe font kerning as mentioned here? I'm trying with font-kerning: normal workaround but seems not to be working.

cburgmer commented 1 year ago

Hmm. You should get error reporting from the promise, in case the font couldn't be sourced.

To rule out a browser bug, did you reproduce in some of the other browsers?

To be honest, I personally was never interest in exact renderings, more in assuring that renderings where stable across re-renderings.

pedrovgs commented 1 year ago

We can only reproduce it using Android Chrome in our own project but we can't in the scenarios where we are testing trying to get a reproducible version we can all check.

In our project, we do something like this: https://jsfiddle.net/pedro_g_s/mgvjpbqh/160/

We have a text editor and we render text under the hood using the canvas once you are done editing. It has to be something wrong in our project, but we can't find it 😢

pedrovgs commented 1 year ago

Actually, the main issue I see right now is the font doesn't render. No mater what I do, when I rasterize the HTML the is able to render but using a default font and not the one configured. I'm checking if the promise returns any error, but it's not the case. It only returns the image and this svg string:

<svg xmlns="http://www.w3.org/2000/svg" width="437" height="28" font-size="16px"><style scoped="">html::-webkit-scrollbar { display: none; }</style><foreignObject x="0" y="0" width="437" height="28" style="float: left;" externalResourcesRequired="true"><html xmlns="http://www.w3.org/1999/xhtml"><head>
                <meta charset="UTF-8"/>
                <title>Doc to render</title>
                <style>
                    * { 
                        margin: 0; 
                        padding: 0; 
                        box-sizing: border-box;
                        border-width: 0px;
                        -webkit-font-smoothing: auto;
                        word-break: break-word;
                    }
                    #container {
                        width: 437px;
                        height: 28px;
                    }

                </style>
            </head>
            <body>
                <div id="container">
                <span style="font-family: Comic Sans MS; color: rgb(0, 0, 255); font-size: 24px;">11111111111111111111111111111111</span>
                </div>

            </body></html></foreignObject></svg>

As you can see, this SVG uses for the only span in the document Comic Sans MS as font family. The font is not loaded and shows a default one when rendering but only when opening from Android. If I open this SVG and render from any other device it works as expected. You can try it by yourself. If you open the previous link from Android, the font is not loaded and is not shown in comic sans.

abdh-dev commented 1 month ago

This is also an issue i am facing right now, the sizing is different when i try to preview the svg, one thing i noticed is that the font size is not the same, on desktop is shows 26px which is what wanted, but on my phone when i go to the computed tab in the dev tool the computed font size is different (23.4px)

cburgmer / rasterizeHTML.js

Font rendering precision #223