Ask Ben: Rendering Javascript Line Breaks
Posted July 17, 2008 at 7:27 PM
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:
Launch code in new window » Download code as text file »
- <!--- 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:
Launch code in new window » Download code as text file »
- 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.
Download Code Snippet ZIP File
Post Comment | Ask Ben | Print Page
Newer Post
OOPhoto - Moving To OOP - Adding Service Objects
Older Post
OOPhoto - Starting Off Procedural Then Moving To Object Oriented
Reader Comments
Or this should work as well
document.write("<br/>You are running Microsoft IE")
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
@JFish,
Well put.
i´ve a problem in combination with perl. With /n there comes no linebreak
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>
@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.
@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).
