An HTML text area works fine with new lines ("\n") when they're after any other content in the text area, whether it be whitespace characters like spaces or tabs ("\t") or not.
However, when text area content begins with a new line (for example, "\ntest"), that new line gets cut off on display.
Any ideas on what causes this/how to remedy it?
This seems to be by the spec.
A single newline may be placed immediately after the start tag of pre and textarea elements. If the element's contents are intended to start with a newline, two consecutive newlines thus need to be included by the author.
Note that in the past there were some bugs in the various browsers regarding leading new lines in elements:
https://bugzilla.mozilla.org/show_bug.cgi?id=591988
https://bugs.chromium.org/p/chromium/issues/detail?id=62901
Related
See the description before Example 6 in the CommonMark spec at: http://spec.commonmark.org/0.27/#example-5
I am trying to understand how the following code leads to a code-block starting with two spaces.
>→→foo
Example 6 shows that this would translate to the following.
<blockquote>
<pre><code> foo
</code></pre>
</blockquote>
But Section 2.2 clearly states:
However, in contexts where whitespace helps to define block structure, tabs behave as if they were replaced by spaces with a tab stop of 4 characters.
So as per my understanding, the above Markdown behaves like the following (I denote a space with a dot).
>........foo
Since, one optional space is allowed after >, and 4 spaces are used to indent code block, we are left with,
>...foo
That's a code-block starting with three spaces. How does CommonMark claim then that it should lead to a code-block starting with two spaces? What am I missing?
The key is in the very first paragraph of the Tabs section (emphasis added):
Tabs in lines are not expanded to spaces. However, in contexts where whitespace helps to define block structure, tabs behave as if they were replaced by spaces with a tab stop of 4 characters.
Notice that is says "4 characters" not 4 spaces.
If you configure your text editor to use a tab stop of length four and to replace tabs with spaces (any good text editor should offer this setting), the text editor will use columns that are four characters wide. When you press the tab key, it will forward the cursor to the next column, which will only every be four characters wide. If the column already contains any characters, then only as many spaces are added to total four characters, which, in this case would be less than four spaces.
For example, if you type an angle bracket (>) character in your editor and then press tab, you will get the following (when configured to replace tabs with spaces):
>···
Therefore the angle bracket plus the tab moves forward to the end of the column (four characters) for a total of three spaces. As we are now at the beginning of the next column, pressing tab a second time would move us to the next column (4 more spaces) for a total of 7 spaces:
>·······
We can confirm this is the correct interpretation with a more recent change to the spec committed in 3bc01c5dc (which apparently hasn't made it it to a release yet). As the commit comment suggests, the clarification helps the math make more sense (emphasis added):
Normally the > that begins a block quote may be followed
optionally by a space, which is not considered part of the
content. In the following case > is followed by a tab,
which is treated as if it were expanded into three spaces.
Since one of these spaces is considered part of the
delimiter, foo is considered to be indented six spaces
inside the block quote context, so we get an indented
code block starting with two spaces.
Notice the added sentence (in bold) which confirms that the first tab only adds "three spaces".
Therefore, as we have now established, we start with an angle bracket plus seven spaces. So first we break off the blockquote deliminator, which consists of the angle bracket and the first space (in the following examples the | is used to indicate where the parser breaks the string and should not be counted as characters):
>·|······
The text contained in the blockquote is now indented six spaces. Four of them are the code block deliminator:
>·|····|··
Which leaves two spaces at the start of the code block.
Of course, as stated back at the beginning (of the section in the spec), the tabs aren't actually replaced with spaces, it just behaves as if they were. And that can be confusing at times. It may help to configure your text editor to always replace tabs with spaces and then you can avoid this confusion.
If there are a number of links on a webpage, is it possible to break onto a new line while the link is either fully on either side?
For example: This blog http://northskie.blogspot.com/ shows a series of links using the standard A HREF="http://www... " etc .
But, you'll notice that on the first line, Chapin's Inferno appears on BOTH sentence line A, AND line B. This could easily be corrected by adding a BR, of course. BUT, what if I'm working on a huge number of links, such as http://asmrluv.blogspot.com/ ? Now, I'd prefer NOT to to simply add BR or P between each Breaking line. Also note, many sites could be added to the list later. This is why BR lines should be avoided here.
Can any code be implemented which automatically prevents a link from appearing on both lines? (of course, adding a CLASS or ID would along with code would be acceptable). I'm trying to avoid the problem of a link appearing halfway on one sentence, then on the next line as well.
Is there any way to define a CSS class which would substitute the component's text's carriage returns (as coming from the DB, for example) with <br/> so that they are displayed as new line?
Currently, I have a table whose one field is a user entered note they enter in a popup form. They can make paragraphs in the textarea and the data loaded in the form text area for editing shows proper new lines but when it is updated and the popup closed, the main page's data table naturally does not convert the new line carriage return into new HTML line. My question is is there a way to do it via CSS?
I am using CSS word-wrap: break-word to display the note content in my table cell so that it wraps text into the new line within the cell, however, it does not do it for user entered new lines using , which are BTW stored and retrieved fine in the DB.
Might be a little late, but following up on Marc B's comment at the end, if you use white-space: pre-line or white-space: pre-wrap that seems to preserve line breaks and line wrapping at the same time.
pre-line: Collapses multiple sequences of white space
pre-wrap: Preserves multiple sequences of white space
MDN link: https://developer.mozilla.org/en/docs/Web/CSS/white-space
I am trying to better understand the HTML whitespace processing model. Right now I'm comparing two HTML snippets:
<div>a <br>z</div>
and
<div>a<br> z</div>
The first snippet, when renered, yields two lines: "a " and "z" (So the first line has a trailing space.)
The second snippet yields two lines: "a" and "z". There is no leading space on the second line.
My question is: why? I'm currently using this http://www.w3.org/TR/CSS2/text.html#white-space-model as a reference. It states
If a space (U+0020) at the beginning of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is removed.
All tabs (U+0009) are 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 8 times the width of a space (U+0020) rendered in the block's font from the block's starting content edge.
If a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is also removed.
If spaces (U+0020) or tabs (U+0009) at the end of a line have 'white-space' set to 'pre-wrap', UAs may visually collapse them.
A naive reading of this would indicate that, since a space that the beginning or end of a line is to be removed (when 'white-space' is 'normal'), the first of my snippets ought to result in no trailing space. But that isn't the case.
So what's going on?
My current theory is that the <br> is secretly counted as a "character" which, in the first snippet, prevents the trailing space from being at the "end" of its line. But I really have no idea.
EDIT: To be clear, I know how to use to create spaces at will. My question is about what rule (with regard to some spec) induces the above behavior.
Good question! I've confirmed the behavior in both Chrome and Firefox, and confirmed that it has nothing to do with <br>, as it's also triggered by an ordinary linebreak in white-space: pre-line conditions:
<div style="white-space:pre-line">a
z</div>
I've sent an email to the list asking for clarification on this issue, and inquiring whether we should change the spec to match implementations, or file bugs on browsers to match the spec.
I have a multi-line text box. When users simply type away, the text box wraps the text, and it's saved as a single line. It's also possible that users may enter line breaks, for example when entering a "bulleted" lists like:
Here are some suggestions:
- fix this
- remove that
- and another thing
Now, the problem occurs when I try to display the value of this field. In order to preserve the formatting, I currently wrap the presentation in <pre> - this works to preserve user-supplied breaks, but when there's a lot of text saved as a single line, it displays the whole text block as single line, resulting in horizontal scrolling being needed to see everything.
Is there a graceful way to handle both of these cases?
The easiest way of dealing with this is turning all line breaks \n into <br> line breaks. In PHP for example, this is done using the nl2br() function.
If you want something a bit more fancy - like the list you quote getting converted into an actual HTML <ul> for example - you could consider a simple "language" like Markdown that SO uses. It comes with natural, simple rules like
# Heading 1
## Heading 2
### Heading 3
* Unordered List item
* Unordered List item
1. Numbered List item
2. Numbered List item
etc....
You can use the php function nl2br() It transforms line breaks into elements
Convert newline characters to <br /> tags explicitly, and let the browser word-wrap the text normally. That preserves the breaks the visitor entered, without harming other paragraphs.
You could replace line breaks with HTML line breaks.
Replace "\r\n" or "\n" (depending on the browser and platform, check first for longer one) with <br/>.
I would normally replace all CR/LF with LF, and then replace all LF with <br />. You can then render this text inside any HTML container you want and let it flow naturally.