Text width is calculated incorrectly with custom external CSS

[jpalnick]

Check for duplicates

• I have searched for similar issues before opening a new one.

Description

Custom external CSS letter-spacing or word-spacing breaks the text width calculations used in Blockly 13. If the styles are applied after the blocks are created, the text is updated and the blocks are too short, and text can end up overlapping. If the custom CSS is added to the page before a block is created, the block will be far wider than required.

I found the issue with the Zelos renderer, but also saw the issue on Blockly Developer Tools (seems this site is still using Blockly 12, but it also has the the issue)

A very quick investigation leads me to believe that the issue is with the text width calculation in package/blockly/core/utils/dom.ts for getting the wrong width. It seems like it could be due to some of the function not taking in the spacing CSS values, but I'm not sure about that since it seems to be wider than needed when the block is created after the CSS is applied.

I suspect the core will also need to be updated in some way to monitor for CSS changes like this and trigger the blocks to recalculate the widths, but I could not figure out where that would need to happen.

Reproduction steps

Tested using WCAG 2.1 Accessibility 1.4 Text and Contrast Testing and Checking Tool to help with adding the custom CSS.

1. Load Blockly Developer Tools
2. Add an input block with a label block
3. Enable the 1.4.12 test in the extension or manually add global style for adjusting letter-spacing/word-spacing values
4. The text is now overlapping with other text or the edges of the block/field
5. Duplicate the input block
6. The duplicated block is wider without overlapping text, but there is extra padding now.

Priority

This issue prevents Blockly from supporting WCAG 2.1 AA 1.4.12

Stack trace

Screenshots

No custom CSS:

Blocks added before the custom CSS is applied while the CSS is active:

Blocks added after the custom CSS is applied while the CSS is active:

Browsers

Chrome desktop