The other side of the moon

I often have to look up reference sites to find out how to write a particular character in HTML, JavaScript or CSS when that character isn't on my keyboard. This post should save me some searching time in future.

To type a character that's not on your keyboard, you need its unicode codepoint in decimal or hexadecimal. In the examples below, HH means two hexadecimal digits, DD means two decimal digits, HHHH is four hexadecimal digits, and so on. DD+ means two or more decimal digits, HH+ means two or more hexadecimal digits.

HTML

To type out unicode characters in HTML, use one of the following:

• &#DDD+;
• &#xHHH+;

eg:

Ɖ == Ɖ
Ɖ == Ɖ
‡ == ‡

JavaScript

To type out unicode characters in JavaScript, use the following:

• \uHHHH

eg:

 == \u2021

CSS

To print out a unicode character using CSS content, use the following:

• \HH+

eg:

 == \2021

(Note: the CSS example that I've used here only works in browsers that support the :before pseudo class and the content rule, but in general you can use unicode characters anywhere in CSS.)

URL

URL context is different from HTML context, so I'm including it here.

To print a unicode character into a URL, you need to represent it in UTF-8, using the %HH notation for each byte.
eg:

‡ ==  %E2%80%A1
л ==  %D0%BB
' ==  %39

This is not something that you want to do by hand, so use a library to do the conversion. In JavaScript, you can use the encodeURI or encodeURIComponent functions to do this for you.

End notes

Use escape sequences only in two cases.

1. Your editor or keyboard doesn't allow you to type the characters in directly.
2. The characters could be misinterpreted as syntax, eg < or > in HTML.

References and Further Reading

1. List of Unicode Characters on WikiPedia
2. UTF-8 on WikiPedia
3. Unicode and HTML on WikiPedia
4. JavaScript Unicode Escape Sequences on Mozilla Developer Network
5. Richard Ishida. 2005. Using Character Escapes in Markup and CSS in W3C Internationalisation.

While working on boomerang, I needed to get at the current document's URL. The way I generally do that is via the location.href property. This worked perfectly until I hit upon a URL with a # in it. The # was correctly URL encoded to %23, and most browsers returned the correct string in location.href.

Safari 4.x was the only exception. It returned the URL after decoding. This wouldn't be a problem on its own, except that only the URL portion was decoded. location.search (everything after the ?) and location.hash (everything after the #) were untouched.

This meant that a URL like this:

http://tech.bluesmoon.info/foobar%231.html#123

Would show up in location.href as this:

http://tech.bluesmoon.info/foobar#1.html#123

This was a problem, because I now had two # signs in the URL, and would have to twist through hoops to correctly encode the URL. The bug is actually in Webkit, and affects Android too. Thanks to Ryan Grove for pointing me to it.

Then I discovered the document.URL property. This is exactly the same as location.href, except that it isn't affected by the bug in Safari 4.x.

I've tested in other browsers, and it seems to work as expected, so that's what I'm using for now.

Oh, and if you don't know what boomerang is yet, wait until June 24.