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">
This is long link, <br />with a line break
</div>
Screenshot from Chromium 65:
Screenshot from Firefox 59:
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.
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,
A sequence of collapsible spaces at the beginning of a line is removed.
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.
A sequence of collapsible spaces at the end of a line is removed.
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.
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.
Related
A colleague had a text alignment issue on a screen I completed. I was shown the issue on a Win10 PC using Chrome, and some lines of text appeared like this:
Text line 1.
Text line 2 is much longer and wraps to two lines, but the second line
does not have the whitespace added.
Text line 3 does not wrap, and has the same alignment issue.
When I viewed it on my Mac using Chrome, I did not see the issue, so I ingeniously deduced it was most likely a Win-Chrome bug with some bootstrap class, etc.
But, after digging in, the problem ended up being the format of the <p> tag content:
<p>Text line 1.</p>
<p>
Text line 2 is much longer and wraps to two lines, but the second line does not have the whitespace added.
</p>
<p>
Text line 3 does not wrap, and has the whitespace.
</p>
I'm aware that a newline in the middle of a string will infer a space in most browsers (thank god), so that you don't have to add a trailing / leading space when writing multi-line content. However, I've never seen the initial return cause leading whitespace.
The point is that there may be a lot of code formatted this way, and the client will spot the alignment issues, as they test in Win10. Why does this happen, and is it most likely a Win/Chrome bug? Is it a conscious choice by some browser developers?
References would be greatly appreciated, but I personally could not find anything relevant on SO, CSS-Tricks, or Chrome browser documentation.
EDIT:
Another colleague has confirmed that adding a <br /> within the <p> tag (no trailing / leading spaces) also generates a single leading whitespace directly afterwards.
white-space: pre-wrap preserves whitespace, so on word wrap it will not add the extra space since its located at the start of the paragraph.
either try white-space: none; or add some padding/margin if you want the whole paragraph to have that extra space even after word wrapping.
Please refer to this image from the fiddle at https://jsfiddle.net/dn9tt26e/
How do I prevent wrapping just after the
<i>(03/10/2016) Author Name</i>
element so that each line (except perhaps the last) always takes the full width of the container?.
The following image from the https://jsfiddle.net/hzsb8wr3/2/ was proposed as a solution; it works in Chrome, but it shows a break (in Firefox) before the last slash in the date (03/10/2016)
But I don't want the text to break at all in the middle of a line; in order words, all lines of content (except perhaps the last) should fill the horizontal width of the container.
The word is breaking at the space because it is considered an "acceptable break". The only way I can think of to get around this is to add in a non breaking space instead. e.g.
<i>(03/10/2016) Author Name</i> yoursuperlongtextstring
This will mean there is no acceptable break so it will use the css you have implemented with overflow-wrap and word-wrap to break at the end of the line.
Update: Here is a demo forked from your original fiddle https://jsfiddle.net/hzsb8wr3/2/
Update: added screenshot.
I have used google chrome (webkit) in determining behavior:
<p>Test <span style="margin-left:20px"> </span>test</p>
doesn't add margin-left, but:
<p>Test<span style="margin-left:20px"> </span>test</p>
does.
Why? Is margin-left not applied to empty elements? Why is it considered empty in one case and not the other?
(This is important for a program stripping extra whitespace)
That's because browsers by default merge two and more consecutive white characters (and space is one of them). So in the first example the space within <span> is not visible at all and that's why margin is not applied.
You can proof that using <pre> tag, which stops white character merging. Check the DEMO.
Place the <p>....</p> in between <pre></pre>.
This will shows you exactly what you needed.
I have a mysterious space coming up between an img and href tag. My link, forwarding to a word document is preceded by a space after a small icon, that should actually not be there. Curiously the space only appears if the extension of the link is .doc but disappears when I change it to .docx, or to an .html extension.
This code...
<img src="../images/icon/wordicon_small.gif" />
template</p>
<br/>
<img src="../images/icon/wordicon_small.gif" />
template
transalates into:
I am really confused. Don’t even know where to begin. My CSS specifications seem ok and did not arouse suspicion on my side. Anybody has any idea what the problem could be?
You have a few spaces before your first <a href>
By removing the spaces the problem should be fixed.
If the spaces are generated from a script to html then you need to check the differences of handling doc and docx links between a few statements in your script.
You have white space characters (spaces, line breaks, etc.) between the images and links, so there should be a space between them, but that should only be a single space, just like between the second set of elements. Multiple white space characters in a row collapse into a single space.
Try to retype the spaces between the first image and link. My guess is that you have a non-breaking space (ASCII 160) in there somewhere. That doesn't count as a white space character, so it doesn't collapse into a single space with the spaces and line breaks.
Sometimes non-breaking spaces are used to cause extra spacing between text or elements, as they don't collapse, for example:
Price: $0.99
displays as:
Price: $0.99
The is the HTML entity for the non-breaking space, but you can also type it as a regular character. How you do that depends on the editor, but ctrl+space is used in some.
I noticed in my index.php file if I do:
Versus
There's more of a space between the two when I use a line-break. Where can I read more on this?
In the HTML specifications, any number of white space becomes a single white space when displayed.
Doing:
is identical to
Or any number of carriage returns or spaces inbetween.
If you don't have white space, then the two just run into each other. This allows things such as bolding in the middle of a word.
EDIT
Thanks to insertusernamehere, the exact location in the HTML 4.01 specification is at:
http://www.w3.org/TR/html401/struct/text.html#h-9.1
In particular, the part that says:
Note that a sequence of white spaces between words in the source document may result in an entirely different rendered inter-word spacing (except in the case of the PRE element). In particular, user agents should collapse input white space sequences when producing output inter-word space.
This doesn't technically have anything to do with HTML, which itself is just a way of marking up the page. It's actually the CSS styling that collapses white-space via the white-space property. That property gives you the following options:
normal - This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.
pre - This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.
nowrap - This value collapses white space as for 'normal', but suppresses line breaks within text.
pre-wrap - This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.
pre-line - This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.
By default, it is set to normal. This will cause a browser to collapse any sequence of white-space into a single visible space when rendering the HTML structure. Since line breaks are a form of white-space, they also get collapsed.
See 16.6 White space: the 'white-space' property
In PHP, much like HTML, a line-break/carriage return is generally just used to make your text more legible. This is so that future code edits are simple an easy to make.
Not sure if this is completely relevant but I've found another post which relates to PHP formatting: PHP Coding style - Best practices