4

The following snippet renders (assuming) correctly without trailing space underlined in Firefox 59, but in Chromium 65 the bogus space in the end of the line before the explicit line break is rendered:

<div style="width:100px">
  <a href="#">This is long link, <br />with a line break</a>
</div>

Screenshot from Chromium 65:

chromium screenshot

Screenshot from Firefox 59:

enter image description here

The obvious fix for this case is to remove the space in front of the line break, but it is unnatural.

Is not one of the rendering wrong? Is either of the behavior specified by HTML or CSS specification or is this really undefined?

Edit 1: The same behavior as in Firefox can be observed also in the IE, so it looks like the Chromium is the only one.

15
  • it's logic, a white space is considered in the underline May 8, 2018 at 19:07
  • @TemaniAfif not in both browsers
    – Jakuje
    May 8, 2018 at 19:09
  • 2
    There will be a css property text-decoration-skip which will address this. Not at the moment though.
    – Mr Lister
    May 8, 2018 at 19:20
  • 1
    So in regards to decorating the trailing space, if you look at what gets rendered in firefox, it is actually This is long link, new line with a line break. So the issue isn't that Chrome is decorating the space while Firefox isn't, its that Firefox is removing the space completely, and Chrome isn't. Firefox isn't choosing not to decorate the space, it is choosing to not output the space at all, thus nothing needs to be decorated. So the question becomes "should Chrome being trimming space on forced line breaks like Firefox?"
    – Anthony
    May 8, 2018 at 20:10
  • 1
    crbug.com/40634 from 2010 (!) seems to be the report of this bug, although not so clearly apparent. Took me quite a while to dig it up. Great answer, @Anthony BTW!
    – myf
    May 16, 2018 at 18:51
5

The problem isn't that Chrome is underlining the trailing space while Firefox isn't. The problem is that Chrome isn't removing the trailing space when wrapping the line (when the wrap originates from a hard <br /> wrap). The space is underlined because it is there, which is inconsistent with how Chrome handles trailing spaces when auto-wrapping text.

The CSS specification on handling trailing spaces on wrapped text states:

4.1.3. Phase II: Trimming and Positioning

As each line is laid out,

  1. A sequence of collapsible spaces at the beginning of a line is removed.
  2. If the tab size is zero, tabs are not rendered. Otherwise, each tab is rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of the tab size from the block’s starting content edge. The tab size is given by the tab-size property.
  3. A sequence of collapsible spaces at the end of a line is removed.
  4. If spaces or tabs at the end of a line are non-collapsible but have white-space set to pre-wrap the UA must either hang the white space or visually collapse the character advance widths of any overflowing spaces such that they don’t take up space in the line. However, if overflow-wrap is set to break-spaces, collapsing their advance width is not allowed, as this would prevent the preserved spaces from wrapping.

The CSS Working Group has discussed the inconsistent handling of trailing white-space on their github repo, specifically mentioning that Firefox's handling of trailing whitespace is the most ideal:

And lastly there's the point that trailing spaces just look bad, and that having a space just inside the closing tag of an inline or before a <br> is a reasonably common unintentional markup pattern that shouldn't have a bad effect on rendering. The preserved trailing space becomes noticeable both when the inline is styled, as in the example given by @palemieux, and also when we chose text alignments other than start. This gives a real-world use case indicating a preference for Firefox's behavior.

From this discussion, the earlier mentioned CSS spec has been updated (in the github repo, but not apparently published yet) to match the Firefox (Gecko) behavior. Specifically updating points 1 and 3 from above to :

A sequence of collapsible spaces at the beginning of a line (ignoring any intervening inline box boundaries) is removed.

A sequence of collapsible spaces at the end of a line (ignoring any intervening inline box boundaries) is removed.

Emphasis on changes added by me.

1

If we check the specification we can read this:

Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped.

4
  • Thanks you for the link to the specification. We can assume that in the other occasions without explicit line break, the space translated to the line wrap and therefore is not underlined, but we can ask why this did not happened with the explicit newline and space character.
    – Jakuje
    May 8, 2018 at 19:27
  • @Jakuje actually I don't know :) am also trying to understand, but since it behave differently on browser it's not easy to know which is right in order to investigate May 8, 2018 at 19:30
  • Check out w3.org/TR/css-text-3/#white-space-phase-2 which has been updated (but not yet published, it seems) by github.com/w3c/csswg-drafts/commit/…
    – Anthony
    May 8, 2018 at 20:28
  • @Anthony fell free to update the answer ;) I made it a wiki one so we can gather all the information to understand this issue ....you can also add your comment about how firefox is removing the white space May 8, 2018 at 20:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.