search

bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.4k stars 505 forks source link

CSS text-underline-offset is broken #416

Open hoshi411 opened 11 months ago

hoshi411 commented 11 months ago

I have an app which depends on text-underline-offset to render middle lines and underlines to text for English educational purposes. For English learners it is very important to have lines behind the fonts (overlines , center lines and baselines) . The center lines cannot be strike through since it is not an accurate center line. Regardless of the details, it is CRUCIAL that I use text-underline-offset since all other approaches have destructive issues (using borderlines or css box shadows or gradients as a line, etc)

html-to-image is currently incapable of rendering styles which have the text-underline-offset property. If you set the text-underline-offset: 1rem; for example, instead of the underline being 1rem below the base position, the text will render as if text-underline-offset is unset (text-underline-offset : unset) .

This issue falls into a kind of grey area between being a feature request and a bug. I understand the time and energy and stress of creating and sustaining these libraries. I am amazed at the work that has been done so far with html-to-image .

I will be disappointed to not be able to use html-to-image if there is no intention of addressing this issue, as I really like the project.

Thank you.

the attached files Screenshot from 2023-07-13 14-31-18 bingo (3) show the expected image and the text rendered by html-to-image

vivcat[bot] commented 11 months ago

👋 @hoshi411

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.