Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-text] Tabs and the end of the line with pre-wrap and break-word #6062

Closed
javifernandez opened this issue Mar 2, 2021 · 2 comments
Closed

[css-text] Tabs and the end of the line with pre-wrap and break-word #6062

javifernandez opened this issue Mar 2, 2021 · 2 comments
Assignees
@frivoal @fantasai
Labels
Closed Accepted as Obvious Bugfix Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-text-3 Current Work Tested Memory aid - issue has WPT tests

Comments

@javifernandez
Copy link
Contributor

javifernandez commented Mar 2, 2021 •
edited
Loading

I'm not sure the spec covers this scenario, where a sequence of tab preserved spaces overflow, with a combination of CSS properties that allow wrapping (allowing them to hang) and break-word (introducing additional breaking opportunities).

Lets consider the following example:

<!DOCTYPE html>
<style>
    #t {
        font: 30px/1 Ahem;
        white-space: pre-wrap;
        overflow-wrap: break-word;

        width: 15px;
        border: 2px solid red;
    }
    span { background: blue; }
</style>

<p>Examples with Tab</p>
<div id=t><span>&#9;&#9;</span><span>X</span></div>
<br>
<div id=t><span>X</span><span>&#9;&#9;</span></div>

<p>Examples with Spaces</p>
<div id=t><span>&#x20;&#x20;</span><span>X</span></div>
<br>
<div id=t><span>X</span><span>&#x20;&#x20;</span></div>

The box has a width that causes every character to overflow (the case would be similar with a width that is at least 1ch width, since tabs wouldn't fit either, but I wanted to show the behavior when using regular white spaces as well).

The spec states clearly that a sequence at the end of the line could hang, honoring the 'white-space: pre-wrap' property.

  1. If there remains any sequence of white space, and/or other space separators, at the end of a line (after bidi reordering [CSS-WRITING-MODES-3]):
    [ ...]
    • If white-space is set to pre-wrap, the UA must (unconditionally) hang this sequence, unless the sequence is followed by a forced line break, in which case it must conditionally hang the sequence is instead. It may also visually collapse the character advance widths of any that would otherwise overflow.

As far as I understand the spec, 'white space' implies 0020 and tabs characters, as it's stated in the link used in the above statement.

However, when using the 'overflow-wrap: break-word' property, we are introducing additional breaking opportunities, so that some of the previously defined as 'preserved spaces' could be broken indeed.

An otherwise unbreakable sequence of characters may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line.

Additionally, going back to the test case I defined at the beginning, I assume that both, leading and trailing sequences of space should be handled in the same way in this case, because I believe both can be treated as 'trailing spaces' (please, correct me if I'm wrong).

This is how Firefox and Chrome render the mentioned test case, showing clearly an interoperability issue:

Chrome 90Firefox 85
@javifernandez javifernandez added the css-text-3 Current Work label Mar 2, 2021
frivoal added a commit that referenced this issue Mar 16, 2021
@frivoal
[css-text-3] Restore accidentally deleted line
0b106a9 
This was introduced in c1e4f53 and
accidentally dropped in 97cc7a6

See #6062
@frivoal
Copy link
Collaborator

frivoal commented Mar 16, 2021

From #3869 (comment)

RESOLVED: For white-space:pre-wrap tabs hang like spaces do

This was edited in in commit c1e4f53, but unfortunately, this got lost accidentally in an unrelated edit. I've now restored it.

I hope everything's clear now.

@mozilla-apprentice mozilla-apprentice mentioned this issue Mar 16, 2021
Closed
@javifernandez
Copy link
Contributor Author

From #3869 (comment)

RESOLVED: For white-space:pre-wrap tabs hang like spaces do

This was edited in in commit c1e4f53, but unfortunately, this got lost accidentally in an unrelated edit. I've now restored it.

I hope everything's clear now.

So if I interpreted the edits correctly, Chrome's behavior is the correct one, ignoring overflow-wrap and letting the trailing spaces hanging (like both Chrome and Firefox do for spaces).

I'll close the issue as Commenter satisfied, but please, reopen if anybody disagree with my interpretation.
Thanks.

@javifernandez javifernandez added Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. and removed Commenter Response Pending labels Mar 30, 2021
@mozilla-apprentice mozilla-apprentice mentioned this issue Mar 30, 2021
Closed
@frivoal frivoal added the Tested Memory aid - issue has WPT tests label Apr 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@frivoal frivoal

@fantasai fantasai

Labels
Closed Accepted as Obvious Bugfix Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-text-3 Current Work Tested Memory aid - issue has WPT tests
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@frivoal @fantasai @javifernandez