Skip to content

underline missing bug #1624

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

Open
dongguoqiang1994 opened this issue Aug 14, 2018 · 5 comments
Open

underline missing bug #1624

dongguoqiang1994 opened this issue Aug 14, 2018 · 5 comments

Comments

@dongguoqiang1994
Copy link

dongguoqiang1994 commented Aug 14, 2018

https://jsfiddle.net/w90erdL6/1/

<div id="capture" style="padding: 10px;">
    hehe:<span style="text-decoration-line: underline">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    hehe:<span style="text-decoration-line: underline">1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</div>
<script src="https://unpkg.com/[email protected]/dist/html2canvas.min.js"></script>
<script>
    html2canvas(document.querySelector("#capture")).then(canvas => {
        document.body.appendChild(canvas)
    });
</script>

If the span tag only includes &nbsp;, the style of text-decoration-line: underline is misplaced.
But if it contains any content, such as &#8203;, the style will be okay.

html2canvas version tested with: 1.0.0-alpha.12
Browser & version: latest Chrome and latest Firefox
Operating system: Window 10

@dongguoqiang1994 dongguoqiang1994 changed the title underline &nbsp bug underline missing bug Aug 14, 2018
@sugusgeekery
Copy link

Did anyone solve this problem in the end, find a way, and ask the great god to answer! ! !

@otizis
Copy link

otizis commented Mar 6, 2023

最新版本问题还是存在,但是在空格中间打一个字比如 <span style="text-decoration-line: underline">&nbsp;&nbsp;&nbsp; 1 &nbsp;&nbsp;&nbsp;</span> 空白的下划线就可以出现。

@threetail
Copy link

threetail commented May 26, 2023

最新版本问题还是存在,但是在空格中间打一个字比如 <span style="text-decoration-line: underline">&nbsp;&nbsp;&nbsp; 1 &nbsp;&nbsp;&nbsp;</span> 空白的下划线就可以出现。

谢谢你给了我解决这个问题的灵感 在&nbsp;&nbsp;&nbsp;中 插入一个 &ZeroWidthSpace; 就可以了!

@xweiba
Copy link

xweiba commented Jul 2, 2024

最新版本问题还是存在,但是在空格中间打一个字比如 <span style="text-decoration-line: underline">&nbsp;&nbsp;&nbsp; 1 &nbsp;&nbsp;&nbsp;</span> 空白的下划线就可以出现。

谢谢你给了我解决这个问题的灵感 在&nbsp;&nbsp;&nbsp;中 插入一个 &ZeroWidthSpace; 就可以了!

You're a genius.

@xweiba
Copy link

xweiba commented Jul 2, 2024

Changing the source code from if (isTextNode(childNode) && childNode.data.trim().length > 0) to if (isTextNode(childNode) && childNode.data.length > 0) will fix the issue.

Please note that I have not done further scenario testing.

xweiba added a commit to xweiba/html2canvas that referenced this issue Jul 2, 2024
… being overlooked in rendering due to being perceived as blank by trim().
xweiba added a commit to xweiba/html2canvas that referenced this issue Jul 17, 2024
… being overlooked in rendering due to being perceived as blank by trim().
Zefling added a commit to html2canvas/html2canvas that referenced this issue Jul 17, 2024
Fixes niklasvh#2238 niklasvh#1624 - Fix the issue of TextNode content being overlooke…
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

5 participants