Monkey Raptor

Friday, July 25, 2014

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
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


The CSS of that


Demo #3
Example of multiple characters (injecting from CSS :before):
The HTML element


The CSS of that


Demo #4
Example result (injecting from JavaScript):
First, declare the HTML element's ID Then, the JavaScript

Demo #5
Multiple characters (injecting from JavaScript):
Declare the HTML element's ID The JavaScript
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.
Using UNICODE in HTML/XML/XHTML, CSS, and JavaScript (with Demo)
https://monkeyraptor.johanpaul.net/2014/07/using-unicode-in-htmlxmlxhtml-css-and.html?m=0

No comments

Post a Comment

Tell me what you think...