Implement text wrapping #11
Conversation
| } else { | ||
| const lines = getLines(context, string, maxWidth); | ||
| lines.forEach(function(line, i) { | ||
| context.fillText( line, x, y + parseFloat( style.fontSize ) * 0.1 + i * parseFloat( style.fontSize ) * 1.3 ); |
There was a problem hiding this comment.
I actually have no idea why I need 1.3 here. I also don't understand why we have the 0.1 here. Is this related to line-height maybe? 0.1 above, 0.1 below + 0.1 between lines?
There was a problem hiding this comment.
It's to vertically centre the text
| @@ -259,8 +286,11 @@ function html2canvas( element ) { | |||
| y = rect.top - offset.top - 0.5; | |||
| width = rect.width; | |||
| height = rect.height; | |||
| // On Quest the font used to draw on canvas is bigger than on | |||
| // the desktop, compensate for this. | |||
| const maxWidth = width * 1.01; // 1.005 is good, but use 1.01 to be sure | |||
There was a problem hiding this comment.
This one is hacky. I didn't have the same result on Meta browser and Chrome desktop.
Also without this, the label for radio weren't in one line but on two lines.
There was a problem hiding this comment.
I don't love it but whatever works tbh
|
https://github.com/niklasvh/html2canvas project is using Intl.Segmenter (works on Chrome, not Firefox) to split the text into words, see |
|
I had a closer look and can't reproduce the error I mentioned in mrdoob/three.js#24781 so as far as I'm concerned this is the way to go. |
|
Great, thanks for testing. |
…st from Vincent Fretin AdaRoseCannon/aframe-htmlmesh#11 implementing text wrapping
I create the PR in draft with just the changes related to text wrapping to gather feedback if you have any.
I based my
getLinesfunction from https://stackoverflow.com/a/16599668