Cross-browser compatible carriage return in textarea

Question

I've started it all using a combination of \\r and \\n as below, with no success:

<textarea rows="10" readonly><?php echo 'First line.\r\nSecond line.'; ?></textarea>

Using a successive combination of 
 and 
 , I was able to achieve my aim across browsers, but get this HTML5 validation error when validating with the w3 Validator :

Error : A numeric character reference expanded to carriage return.

On the other hand, using a regular return in the <textarea> and applying the CSS rule below, I get no validation error; the challenge with this approach is that it is not cross-browser compatible (not supported particularly by Internet Explorer nor Edge).

textarea {
    white-space: pre-line;
}

Below is the content of my <textarea> element:

<!-- First approach, as described above. -->
<textarea rows="10" readonly><?php echo 'First line.&#13;&#10;Second line.'; ?></textarea>

<!-- Here, the second one, in combination with the white-space: pre-line; CSS rule. -->
<textarea rows="10" readonly><?php echo 'First line.
Second line.'; ?></textarea>

How can I successfully effect a valid and cross-browser compatible carriage return within the HTML <textarea> element?

Answer 1

By specification , HTML5 text areas uses the LF character for new lines ( \\n ), but they also "understand" and internally transform \\r and \\r\\n .

When a textarea is mutable, its raw value should be editable by the user: the user agent should allow the user to edit, insert, and remove text, and to insert and remove line breaks in the form of "LF" (U+000A) characters.

(...)

For historical reasons, the element's value is normalised in three different ways for three different purposes. The raw value is the value as it was originally set. It is not normalized. The API value is the value used in the value IDL attribute. It is normalized so that line breaks use "LF" (U+000A) characters. Finally, there is the form submission value. It is normalized so that line breaks use U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs, and in addition, if necessary given the element's wrap attribute, additional line breaks are inserted to wrap the text at the given width.

If a browser doesn't support it, then it's not HTML5 compliant.

---

From PHP, this should do the trick:

<textarea rows="10" readonly><?php echo 'First line.'.PHP_EOL.'Second line.'; ?></textarea>

Try it!

---

About quotes

The example above will always work because it uses concatenation. If you don't, mind the type of quotes you use. Keep in mind that double quotes resolve variables and special characters, while single quotes don't.

Consider this example:

<textarea id="text-area-A" rows="10" readonly><?php echo 'First line. \n Second line.'; ?></textarea>

<textarea id="text-area-B" rows="10" readonly><?php echo "First line. \n Second line."; ?></textarea>

#text-area-A will print the characters \\ and n , while #text-area-B will "translate it" to a line break.

More about quotes in: What is the difference between single-quoted and double-quoted strings in PHP?

Answer 2

Using double quotes ( " ) instead of single ones ( ' ) as suggested in comments by @CD001 made it work.

Below is the solution, resulting in a valid HTML and cross-browser compatible output:

<textarea rows="10" readonly><?php echo "First line.\r\nSecond line."; ?></textarea>

It equally good to note that concatenating the PHP in-built predefined constant, PHP_EOL between the two projected lines when using single quotes works effectively as the earlier approach above.

Below is the snippet for the same purpose, using PHP_EOL :

<textarea rows="10" readonly><?php echo 'First line.' . PHP_EOL .'Second line.'; ?></textarea>