<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - text-align: justify and word-spacing combine to overflow with non-ascii content in paragraph"
href="https://bugs.webkit.org/show_bug.cgi?id=165873">165873</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>text-align: justify and word-spacing combine to overflow with non-ascii content in paragraph
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>macOS 10.12
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Layout and Rendering
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>bswest@gmail.com
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=297129" name="attach_297129" title="HTML and CSS demonstrating the issue">attachment 297129</a> <a href="attachment.cgi?id=297129&action=edit" title="HTML and CSS demonstrating the issue">[details]</a></span>
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 <a class="bz_bug_link
bz_status_ASSIGNED "
title="ASSIGNED - text-align: justify and word-spacing combine to overflow column"
href="show_bug.cgi?id=165796">bug 165796</a> 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.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>