More useful tools from Creative Media

How to do HTML “Special Characters”, from Creative Media

Have you ever wondered why the text on some people?s (sic) sites has strange or missing characters where you’d expect quotes or apostrophes. Or how to get the nice typographers’ “curly quotes” like you see in Microsoft Word? Or copyright, trademark, fractions (188 for halves and quarters, 8531 for the others), etc etc?

Word processors encode the characters in a different way than web browsers, so simply pasting text from there into a web page may lead to all kinds of “unexpected results” like this!

This is where you need htmlentities - special codes you can type into your html code to display a huge array of special characters - did you know there are at least three different hyphens (- – —), fractions, the stylish “ellipses” character (spot the subtle difference between … and the uncultured three dots: ... !)… There’s even a skull-and-crossbones and a snowman character:

☃

Having failed to find what he needed online, Paddy at Creative Media has put together a very-nearly complete list below of all the characters you can display as text. NOTE: this will work with the more standard web fonts like Arial and Times, but not with some of the custom @font-face ones. And the characters may look different in different browsers.. If this is useful, visit the page sponsors to earn Paddy a few pennies of advertising revenue.

The characters and how to use them:

To use these special characters in html, copy the code with the & and paste into the right place. So to get “this” you type “this”

Useful tip for fast conversion: in Word, copy the ” character, go to Find/Replace, paste it in to the Find field and put “ into Replace. That’ll replace all those open quotes with the proper html character. Carry on with the other curly quotes to make your text into html-friendly text. Better still, write a Macro to do it all. “But hasn’t Word got an HTML save already?” Yes but… it puts in tons of extra code, font statements etc which you really don’t need! Jump straight to symbols for smileys, frownies and the rest.