Using UNICODE in HTML/XML/XHTML, CSS, and JavaScript (with Demo)

Hi there!

Sometimes, we wanna slip some funky characters into our sweet typing time. For fun, or for really serious documentation.

This is a reference on how to do that.

---

First method: simply copy-paste

Just copy-paste the character you see from an extended ASCII/UNICODE list onto the HTML, or the CSS, or the JavaScript.
That will work for HTML. For XHTML, like the Blogger template (not the post template) for instance, the character won't be escaped.

---

Second method: the &#(something); form

Using the decimal or hexadecimal numeral of the character.
You need to add the prefix &# (HTML) or &#x (XML) and ended by a semicolon ;
Like so:

• &#(the_decimal); — example: ☛
• &#x(the_hexadecimal); — example: ☛

Demo #1

Example result:

☃

The HTML code for that <div style="font-size:160px;text-align:center"> &#9731; <!-- the XML/hexadecimal version is: &#x2603; --> </div>
This method will only work for straight forward writing the character in the HTML/XML/XHTML.

To escape the character in CSS or JavaScript you need to substitute the &# with the backslash (\) as the prefix, and without the semicolon (;) as the closing wrap.

---

Third method: UNICODE character in CSS/JavaScript

This can be done by just copy-pasting the character (for HTML). But sometimes, the character won't be escaped.
Therefore, to be "safer", we can use the hexadecimal numeral of the character.
This method works when we inject the character from CSS/JavaScript on HTML/XML/XHTML.

• The prefix for CSS would be \ and without any suffix, like so: \(the_hexadecimal)
  Example: \261b
• The prefix for escaping UNICODE in JavaScript would be \u
  Like so: \u(the_hexadecimal)
  Example: \u261b

Demo #2

Example result (injecting from CSS :before):

The HTML element
<div class="example"></div>

The CSS of that
.example { text-align:center; font-size:160px; } .example:before { content:"\2624"; }

Demo #3

Example of multiple characters (injecting from CSS :before):

The HTML element
<div class="example2"></div>

The CSS of that
.example2 { text-align:center; font-size:160px; } .example2:before { content:"\2747 \274b \273d \2741 \273e"; }

Demo #4

Example result (injecting from JavaScript):

First, declare the HTML element's ID <div id="example"></div> Then, the JavaScript var d = document, //HTML document variable elm = d.getElementById("example"); //the particular element we wanna tinker /* methods */ elm.style.textAlign = "center"; //inject the CSS text-align property elm.style.fontSize = "200px"; //inject the CSS font-size property elm.innerHTML = "\u270d"; //inject the content of the element

Demo #5

Multiple characters (injecting from JavaScript):

Declare the HTML element's ID <div id="example2"></div> The JavaScript var d = document, //HTML document variable elm2 = d.getElementById("example2"); //the particular element we wanna tinker /* methods */ elm2.style.textAlign = "center"; //inject the CSS text-align property elm2.style.fontSize = "72px"; //inject the CSS font-size property elm2.innerHTML = "\u265a \u265b \u265c \u265d \u265e \u265f"; //inject the content of the element
With JavaScript, you can convert the decimal numeral to character with String.fromCharCode(decimal) method, or, get the decimal of a particular character using element.charCodeAt(index_of_character) method.
Then, you can start playing around with the for or while loop method to recursively generate something.

---

That's about it.
There are some doodles on Port Raptor you can use to see some of UNICODE characters and converting the numeral system.

---

Related Links

• HTML character entity list with readable (non numeric) code:
  www.textfixer.com/resources/HTML_character_entity_list.php
• Tool on THOR to
  convert UNICODE into entities and vice president.