Wrap Long Lines of Text

If you have pasted some text into a web page and it doesn’t wrap, here’s one way to fix that.

[cc lang=”css”]
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}[/cc]

Search, Capture, & Replace in Dreamweaver

Recently, I needed to search all URLs in a document in Dreamweaver and wrap them with <a> tags to turn them into links. The URLs themselves would be the text to click on. In Dreamweaver, you can use regular expressions and capture matches for use in replacements as follows:

[cc lang=”html”]SEARCH: ((https?|ftp|file)://S+)
REPLACE:  $1[/cc]

Notice I wrapped the SEARCH regex with parentheses ( ) to capture that match and use it in the REPLACE using $1. If I had more parentheses to capture other matches, I could use them in the REPLACE using $2, $3, and so on.

Make sure you have “Regular Expressions” checked when you do this.

Javascript Not Working in IE

I’ve begun to start using console.log() to display variable values in Firebug’s console window to help with debugging. After everything was working in Firefox and Chrome, I noticed my javascript wasnt’ working at all in IE. Turns out IE doesn’t support console.log().

Reminder to self: Comment out all “console.log()” references before deploying.

This is the 2nd time I’ve come across this. Hopefully I won’t have to five more times before it sticks.

Custom CSS List Bullets Using :before and content

If you’d like to specify your own list bullets using images or special characters, here’s one way to do it. In your CSS, add the following code which removes the default list style, adds a small black right-pointing triangle and a space before your list content, and colors lists items.
[cc lang=”css”]ol,ul{
list-style:none;
}

ul li:before {
content:”25B8 020″;
}

ul li {
color:#0066cc;
}[/cc] Continue reading Custom CSS List Bullets Using :before and content

Importing / Using Non-Standard Fonts in a Website

If you’d like to use a font in your website that isn’t already included on most computers, you can import them using @font-face in your CSS. In the following example, I’m importing the Lucida Grande font. The first block is for the normal font weight and the second is for bold. If a visitor already has the Lucida Grande font on their computer, the website will automatically use it instead of download the fonts from ../fonts into their browser’s cache. This is done by specifying the “local” commands. Continue reading Importing / Using Non-Standard Fonts in a Website

Convert Text to HTML Character Entities

Sometimes, when you’re adding text to a web page, especially in a foreign language line French, you may encounter a bunch of accented characters that will show up as garbage in your browser unless you convert them to HTML character entities.

For example, the word Iñtërnâtiônàlizætiøn would be converted to Iñtërnâtiônàlizætiøn for safe display in all browsers.

Here are some web based tools that can automate this process for you.

The 2nd one is better because it can exclude HTML tags (brackets, etc).