[csswg-drafts] [css-text-3] When is allowed to break before the first preserved white-space after a word ? (#3701)

javifernandez has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-text-3] When is allowed to break before the first preserved white-space after a word ? ==
It may be other cases, but I'd like some clarification regarding how to deal with preserved white-spaces character generated by the [white-space: break-spaces](https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces) feature. 

According to the spec,it must break AFTER any white-space: 

> A line breaking opportunity exists after every preserved white space character, including between white space characters.

However, depending on the case and in combination with other CSS properties, there may be soft-breaking opportunities BEFORE the first space after a word. The following table describes what I think is the expected behavior when using **white-space: break-spaces** in combination with other properties: 

<table>
<tr>
   <td><b>property</b></td><td><b>value</b></td><td><b>break before</b></td><td><b>Conditional</b></td>
</tr>
<tr>
   <td rowspan=3"><i>overflow-wrap</i></td><td>normal</td><td>No</td><td>Never</td>
</tr>
<tr>
   <td>break-word</td><td>Yes</td><td>If no previous opportunity</td>
</tr>
<tr>
   <td>anywhere</td><td>Yes</td><td>If no previous opportunity</td>
</tr>
<tr>
   <td rowspan=3"><i>word-break</i></td>
   <td>normal</td><td>No</td><td>Never</td>
</tr>
<tr>
   <td>break-all</td><td>No</td><td>Never</td>
</tr>
<tr>
   <td>keep-all</td><td>No</td><td>Never</td>
</tr>
<tr>
   <td><i>line-break</i></td><td>anywhere</td><td>yes</td><td>Always</td>
</tr>
</table>

Is the content of this table correct, according to the last draft of the spec ?

Assuming it's correct, lets consider the following example:

```
<style>
div {
  width: 4ch;
  line-height: 1;
  border: 1px solid;
}
</style>

<div>X XX X</div>
```

The table bellow shows Chrome's current behavior when loading the example above with the different combination of the line-breaking properties:

<table style='font-family: monospace'>
<tr><td>case</td><td>word-break</td><td>overflow-wrap</td><td>line-break</td><td>result</td></tr>
<tr>
   <td>1</td><td>normal</td><td>normal</td><td>auto</td>
   <td><img src="https://user-images.githubusercontent.com/2230241/53671835-6802b880-3c80-11e9-8e81-a819d84684e0.png"/></td>
</tr>
<tr>
   <td>1</td><td>normal</td><td>break-word</td><td>auto</td>
   <td><img src="https://user-images.githubusercontent.com/2230241/53671835-6802b880-3c80-11e9-8e81-a819d84684e0.png"/></td>
</tr>
<tr>
   <td>2</td><td>normal</td><td>anywhere</td><td>auto</td>
   <td><img src="https://user-images.githubusercontent.com/2230241/53671835-6802b880-3c80-11e9-8e81-a819d84684e0.png"/></td>
</tr>
<tr>
   <td>3</td><td>break-all</td><td>normal</td><td>auto</td>
   <td><img src="https://user-images.githubusercontent.com/2230241/53671834-6802b880-3c80-11e9-891c-7f6c74f4b6af.png"/></td>
</tr>
<tr>
   <td>4</td><td>break-all</td><td>break-word</td><td>auto</td>
   <td><img src="https://user-images.githubusercontent.com/2230241/53671834-6802b880-3c80-11e9-891c-7f6c74f4b6af.png"/></td>
</tr>
<tr>
   <td>5</td><td>normal</td><td>normal</td><td>anywhere</td>
   <td><img src="https://user-images.githubusercontent.com/2230241/53671834-6802b880-3c80-11e9-891c-7f6c74f4b6af.png"/></td>
</tr>
<tr>
   <td>6</td><td>break-all</td><td>normal</td><td>anywhere</td>
   <td><img src="https://user-images.githubusercontent.com/2230241/53671834-6802b880-3c80-11e9-891c-7f6c74f4b6af.png"/></td>
</tr>
<tr>
   <td>7</td><td>normal</td><td>break-word</td><td>anywhere</td>
   <td><img src="https://user-images.githubusercontent.com/2230241/53671834-6802b880-3c80-11e9-891c-7f6c74f4b6af.png"/></td>
</tr>
<tr>
   <td>8</td><td>break-all</td><td>break-word</td><td>anywhere</td>
   <td><img src="https://user-images.githubusercontent.com/2230241/53671834-6802b880-3c80-11e9-891c-7f6c74f4b6af.png"/></td>
</tr>
</table>

Are all these cases correctly rendered ?


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3701 using your GitHub account

Received on Friday, 1 March 2019 23:33:38 UTC