Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Font rendering precision #223

Open
pedrovgs opened this issue Jul 25, 2023 · 8 comments
Open

Font rendering precision #223

pedrovgs opened this issue Jul 25, 2023 · 8 comments

Comments

@pedrovgs
Copy link

pedrovgs commented Jul 25, 2023

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
Copy link
Owner

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
Copy link
Author

pedrovgs commented Jul 26, 2023

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:

Screenshot 2023-07-26 at 08 38 43

This one shows HTML rasterized with the library:

Screenshot 2023-07-26 at 08 38 52

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
Copy link
Author

@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
Copy link
Author

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

@cburgmer
Copy link
Owner

cburgmer commented Jul 26, 2023 via email

@pedrovgs
Copy link
Author

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
Copy link
Author

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
Copy link

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants