Bug 165873 – text-align: justify and word-spacing combine to overflow with non-ascii content in paragraph

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Layout and Rendering

[Brad West]

Created attachment 297129 [details]
HTML and CSS demonstrating the issue

When text-align: justify is used in combination with word-spacing, the text of paragraphs that include non-ascii punctuation -- such as a curly quote, curly apostrophe, or em-dash -- will extend outside the bounds of the paragraph. Including emoji in the paragraph also triggers the issue.

Attached is a simple bit of HTML+CSS to demonstrate the issue. In the screenshot, the pink is the background of the paragraph element, and therefore the expected bounds of the text. The first example paragraph contains only ascii characters, and the text lies within the bounds as of the paragraph, as expected. Subsequent paragraphs contain various characters that cause the text to extend past the bounds of the paragraph. 

Note that, even in the subsequent paragraphs, some lines are contained within the bounds as expected. Most, however, are not.

This is similar to bug 165796 in that it involves the combination of text-align: justify and word-spacing. As in that bug, the error seems to match the word-spacing value, but is consistent within a problematic paragraph.

Unlike that bug, however, this issue appears without the use of columns. Also unlike that bug, paragraphs that only contain ascii content appear to be bounded as expected.

[Brad West]

Created attachment 297131 [details]
Screenshot of issue. Pink background is applied to <p> and represents expected bounds of text.

[zalan]

Thanks for the report. I've got a patch on bug 165796 and it fixes this issue too. -> dupe.

*** This bug has been marked as a duplicate of bug 165796 ***

[Brad West]

Great! Not surprised these are related, but causes were just different enough that it seemed worth it to file this as well. Awesome that you were able to find a fix so quickly!