Word breaked and overlap. The 2canvas result not match the html render result.

niklasvh / html2canvas

Screenshots with JavaScript

https://html2canvas.hertzen.com/

MIT License

30.52k stars 4.8k forks source link

Word breaked and overlap. The 2canvas result not match the html render result. #2231

Open wufeng87 opened 4 years ago

wufeng87 commented 4 years ago

canvas and html result are consistently except two positions that I marked in the image below: I wonder why the url get word-breaked in the canvas? Thanks.

Specifications:

html2canvas version tested with: "html2canvas": "^1.0.0-rc.5",
Browser & version: chrome 81.0.4044.122
Operating system: macOS High Sierra 10.13.6

thomascube commented 4 years ago

I have a similar problem with text wrapping (no special chars, only us-ascii words) but limited to latest Safari and WebKit browsers (AppleWebKit/605.1.15).

After some debugging, I tracked it down to the FEATURES.SUPPORT_RANGE_BOUNDS feature which is used in text.js:parseTextBounds(). With manually set FEATURES.SUPPORT_RANGE_BOUNDS = false, word wrapping again works as expected.

wufeng87 commented 4 years ago

I have a similar problem with text wrapping (no special chars, only us-ascii words) but limited to latest Safari and WebKit browsers (AppleWebKit/605.1.15).

After some debugging, I tracked it down to the FEATURES.SUPPORT_RANGE_BOUNDS feature which is used in text.js:parseTextBounds(). With manually set FEATURES.SUPPORT_RANGE_BOUNDS = false, word wrapping again works as expected.

@mdbollman Could I add a option for this SUPPORT_RANGE_BOUNDS property? What are the bad effects when we set the SUPPORT_RANGE_BOUNDS to false?

wufeng87 commented 4 years ago

@thomascube Thanks for your suggestion. It seems not work for me. :(

And in the html2canvas.min.js I only saw the parseText method

wufeng87 commented 4 years ago

I thought it is something wrong with the LineBreaker method.

wufeng87 commented 4 years ago

I got it. It works only when I add the style word-break: break-all to the child dom and word-break: break-word not worked

daidtech commented 3 years ago

I have a similar problem with text wrapping (no special chars, only us-ascii words) but limited to latest Safari and WebKit browsers (AppleWebKit/605.1.15).

After some debugging, I tracked it down to the FEATURES.SUPPORT_RANGE_BOUNDS feature which is used in text.js:parseTextBounds(). With manually set FEATURES.SUPPORT_RANGE_BOUNDS = false, word wrapping again works as expected.

I have the same issue on IpadOS version 14.7, is there any update?