TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

Removing whitespace using Dreamweaver's "Find and Replace" function.

ImportantDisclaimer: I take no responsibility for any trouble arising from the use of this technique. Make sure you know what you're doing before removing white space (including line feed) from a document because it may be necessary for things to work properly. For example, VBScript does not use a special line termination character, but a carriage return to end a statement (related issues with textarea and <pre> tag). Use this solution at your own risk.


This is a simple and yet very powerful "trick".
Here's how it works:

  1. Open a document,
  2. Click inside Code View,
  3. Create an empty line,
  4. Left-click in the margin on the left hand-side of that empty line (it should turn black on Windows, blue on Mac),
  5. Select Menu > Edit > Find and Replace (keyboard shortcut: Ctrl + F),
  6. Select an option in the "Find in:" dropdown box,
  7. Select "Replace All" and you're done.

Be aware that "trimming" can do serious damage and break things apart. To play it safe, one needs to know what's involved and to change some of his/her coding practices (see below).

How not to break your JavaScript scripts:

A SGML comment, as well as, a JS single-line comment ("//") can cause your scripts to fail.
Because once you've removed line breaks, this:

<script type="text/javascript">
<!-- comment to end of line
document.write("<p>Hello World!</p>")
// comment to end of line -->
</script>

Becomes this:

<script type="text/javascript"><!-- comment to end of linedocument.write("<p>Hello World!</p>")// comment to end of line --></script>

So before stripping line breaks, make sure your JS files include ";" (as a line termination) when needed, and that they do not contain any comments.

ImportantIf you're using inline scripts, removing SGML comments may cause your documents to not validate. An easy work around is to use a particular string for your opening SGML comment so it can be used later to re-create the line break after it.

How to not break your ASP VBscripts:

Make sure each line appears as a code block, for example, write this:

<% foo = hour(time) %>
<% If foo < 11 Then %>
<% Response.Write("Good Morning!") %>
<% Else %>
<% Response.Write("Good Day!") %>
<% End If %>

Instead of this:

<%
foo = hour(time)
If foo < 11 Then
Response.Write("Good Morning!")
Else
Response.Write("Good Day!")
End If
%>

How to make sure to not lose line breaks inside your pre tag pairs:

This is not a great solution, but I can't come up with another one: insert a <br /> tag at the end of each line.

Warning about CSS-P layouts:

The position of some tags (usually closing DIV or UL) in the markup is, in some cases, very important for MSIE5 Mac. Removing line breaks can seriously disturb this browser.

Bonus: removing CSS comments

ImportantDisclaimer: I take no responsibility for any trouble arising from the use of this RegExp. Make sure you know what you're doing before removing a comment from a CSS file because it may be necessary for things to work properly.

For example, if you're using a Regular Expression as demonstrared in the "Stripper" (\/\*[^*]*\*+([^/][^*]*\*+)*\/) to remove your CSS comments, you may already know that such RegExp may match only part of CSS hacks as the Caio's Hack and Band Pass Filter, and therefore lead to unpredictable results (see higlighted text below).

This is an example of the Caio's hack:

.notForNN4 {
/*/*/ padding-right:15px;
background:url(/img/link.gif) 50% 50% no-repeat; /**/

}

This is an example of the IE5.0/Windows Band Pass Filter:

i{content:"\"/*"}
#popups a span {
visibility:hidden;
position:absolute
}
/**/

This is the RegExp I'm using: /\*([^\*]|[^/].*?)\*/

It seems to leave the Caio's Hack and the Band Pass Filter alone, but it won't match multi-line comments as:

/*
This is a multi-line
comment.
*/

or:

/* This is a multi-line
comment. */

only Comments where "/*" and "*/" are on the same line, as:

/* This is a multi-line  */
/* comment too (kinf of) */

Simply include an extra asterisk inside comments you don't want the RegExp to match. For example:

/** Copyright notice */

Important When using comments as "/**/", make sure not to include any extra characters or whitespace between the 2 asterisks).

Warning about HTML comments:

If you use a RegExp to "clean up" your HTML comments from your files, make sure to do so before removing line breaks, because you could end up stripping styles nested within SGML comments. Consider the following:
Before removing line breaks:

<style type="text/css">
<!--
body {color:red}
-->
</style>

After removing line breaks:

<style type="text/css"><!--body {color:red}--></style>