Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at Scotch On The Rocks (SOTR) 2011 (Edinburgh) with:

Ask Ben: Rendering Javascript Line Breaks

By Ben Nadel on

Hi, I am learning Javascript and going through a self paced book. I am trying to use \n for new line in an example program, but it does not work. Here is the snippet:

//Display the current date and time on the web page
document.writeln(todays_date);

if (navigator.appName == "Microsoft Internet Explorer") {
document.write("\nYou are running Microsoft IE")
}else {
if (navigator.appName == "Netscape") {
document.writeln("You are running Netscape")
}
else {
document.writeln("You're not running Microsoft IE or Firefox")
}
}

As you can see I put "\n" before "You are running Microsoft IE", but it does not show the line in an new line. Why is that? Is it because I am using the write method? How do I make this line to show on a new line then? Thanks for your help.

The line break is actually working. The problem you are having is that it is not working in any useful way. If you could look at the "rendered" source of the page, you would notice that there is a line break. However, because a web browser does not inherently render line breaks, the displayed web page does not show you that the line is breaking. You can however, ask the browser to render the code exactly as-is by using something like the PRE tag. Take a look at this example:

  • <!--- Render in standard way. --->
  • <script type="text/javascript">
  • document.write( "-Line one \n-Line two" );
  • </script>
  •  
  • <!--- Renader inside of PRE tags (renders as-is). --->
  • <pre>
  • <script type="text/javascript">
  • document.write( "-Line one \n-Line two" );
  • </script>
  • </pre>

Notice that we have the exact same code in the Javascript, but the second snippet executes within an HTML PRE tag. Running the above code, we get the following output:

-Line one -Line two
-Line one
-Line two

As you can see, the line break in the second output gets rendered while the first one does not.

Now, generally, you don't want to use PRE tags unless you are outputting something like code or CSV files. To get a line break in HTML, you would output the break tag "<br />" instead.

This doesn't mean that the \n character is useless - far from it. The \n does render line breaks in Textareas and any kind of Javascript alert:

  • alert( "-Line one \n-Line two" );

It is also a valid character and can be used inside of Javascript variables. For example, you could take the text of a paragraph and split() it based on the "\n" character to get an array of the individual lines. But in general, you never render the \n character outside of form fields and Javascript alerts.

Tweet This Groovy post by @BenNadel - Ask Ben: Rendering Javascript Line Breaks Thanks my man — you rock the party that rocks the body!


Reader Comments

To expand on Don's point a bit, think of it this way:

1. '\n' is the newline character for JavaScript output, so if you do alert("Error:\nThis is an alert");, then that message will popup on two lines.

2. '<br/>' is the newline character for HTML output, and HTML thinks '\n' is simply two characters to be displayed 'as is'.

HTH

Reply to this Comment

So does CSS white-space:pre-wrap help Javascript \n to render in naked html:

<div style="white-space:pre-wrap;">
<script type="application/javascript">
if (navigator.appName == "Microsoft Internet Explorer") {
document.write("You are running\nMicrosoft IE")
}else {
if (navigator.appName == "Netscape") {
document.writeln("You are running\nNetscape")
} else {
document.writeln("You're not running\nMicrosoft IE or Firefox")
}
}
</script>
</div>

Reply to this Comment

@Peter,

To be honest, I have never tried that. I would stick with the use of the BR tag to create breaks. I think it is the more "intentful" way to create line breaks in HTML.

Reply to this Comment

@Peter

Yes, that should work if the browser is capable of using CSS. That said, it's not the ideal solution.

@no one in particular

\n is a literal return, like pressing the enter key while writing code, it will render a single space in the browser. Paragraph (p) and break (br) tags are preferred to messing with CSS properties. Also note that the return char for Windows is actually 2 chars (think it's line feed and return to home) and in Linux/Unix/BSD/Mac OS it is only one char (just the return, if I remember correctly).

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.