text(...) does not correctly position auto-wrapped text based on alignment
- Dominant language
- JavaScript
- Stars
- 776
- Forks
- 180
- PR merge metrics
- No merged PRs in 30d
Description
The optional width and height to the `text()` command, 'xAlign' and 'vAlign' are ignored or misused with regards to positioning of text, when auto-wrapped.
Most uses of `text(...)` place the text-box relative to the coordinates based on current `textAlign()` properties. Auto-wrapped text will not though, always positioning the top-right of the text-box on the text-point... except when vertically centered, when it is forced further down.
Sample: https://www.khanacademy.org/computer-programming/spin-off-of-texttext-x-y-width-height-textalignleftcenter-error/5844860716777472
Chrome: 55.0.2883.87, Win7Pro-64

Firefox: 50.1.0, Win7Pro-64

IE: 11.0.9600.18537, Win7Pro-64

*Expected:*
Text drawn with `text(msg, x, y)` should always position itself relative to x, and y coords, based on the `textAlign(xAlign, yAlign)` properties. In the example, a grid is drawn to show the positioning of the text points, and the text should align within the grid cells.
*Actual:*
The first two examples do not use auto-wrapping, and work as expected. The text appears within the grids relative to the text control points.
The second two examples are auto-wrapped, and we see that while the control points are properly placed in the grid, the text-box is always oriented with TOP-LEFT behavior, although once the text-box is positioned, the text within seems to follow the xAlign correctly within the text-box.
An additional issue arises when the auto-wrap height grows, which, if text is vertically CENTERED, the text-box is positioned further and further below the control point. Text vertically aligned TOP and BOTTOM does not show this behavior.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the alignment behavior in the linked Khan Academy sample, focusing on the text(...) command and textAlign() settings for auto-wrapped text. Trace the text rendering entry point and compare non-wrapped and wrapped cases; done means xAlign and vAlign position the text box consistently with the control point, including vertical centering.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100