Javascript and CSS Entity Conversion Calculator
Enter your HTML Entity Character number (such as ट or just 2335 – ट) to get the CSS and JS values for that entity. Explanations on how to use the results are below.
(open in new window). named entities | numeric entities | 2,636 entities
If you can’t find the entity you want, try drawing it
Example of JavaScript Charater Entities and the DOM
Example Code (This is the code for the dynamically generated content in the button above).
var calc = document.getElementById("calculator");
var theButton = calc.getElementsByTagName('button')[0];
var buttonOptions = ['\u03a0\u03a1\u0395\u03a3\u03a3', '\u2660\u2663\u2665\u2666', '\u221a'];
var rand = Math.floor(Math.random()*buttonOptions.length);
var buttonText = document.createTextNode(buttonOptions[rand]);
var z = theButton.appendChild(buttonText);
The Explanation:
Line 1: gets the div containing the button.
Line 2: gets the button as an elementNode
Line 3: creates an array of strings that are made up of encoded entities. The could also read var buttonOptions = ['� ΡΕΣΣ', '� ♣♥♦', '√'];
Line 4: Creates a random number; in this case either 0, 1 or 2, since there are 3 elements in our array.
Line 5: creates a text node containing the string of javascript character entities.
Line 6: Appends the textNode created in line 5 to the elementNode targeted by line 2. We also create the variable z as a reference to the button’s textNode. I can then use that reference replaceChild() method.
Including Character Entities in JavaScript and CSS
The processes for including special characters in JavaScript and CSS are very similar:
- hex encode the numeric HTML entity value.
- Preced the hex-value with a slash "\" in CSS and a slash+U "\u" for JavaScript.
- Include your entity in your code/markup.
Javascript Character Entities
alert('M\u00E9nage \u00E0 trois.')
Try it
CSS Character Entities
#heart {list-style-type:none;} #heart li:before {content:'\2665 '; color:#FF33FF; padding-right:1em;}
- In all but IE, this will be preceded by a heart
Notes:
- Don’t know the numeric value of the entity you want to include? named entities in alphabetical order which may be a good place to start. Find the entity you are looking for there by appearance, then do a search for the numeric entity on the Named Entities in Numeric Order page. Or, you can simply search the first 5800 character Entities. At some point I’ll add the rest of ’em.
- Remember that IE doesn’t understand the :before pseudoclass with content, and you would have to set the list-style-type as none, or you would get 2 bullets in CSS compliant browsers.
- In javascript you can also use octal values instead of hexadecimal values for the first 255 or so characters. Yup, that’s trivia!
Including Entities without Encoding them
The reason I always use encoded entities is because I have no clue how to use my keyboard to get the right letters. It’s faster for me to look up the letter from Named Entities in Numeric Order then it is for me to look up the keyboard sequence to display the same character. For the following sample, I pulled up the "character map" that came with my OS.
You can include odd characters if you correctly set your content-Type to UTF-8.
That is the setting for this page, which allows for the following code without HTML or JS encoding.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
alert('Ế ế ∑ ở Ẅ ۹');
Try it
The question is, short of editing your .htaccess character set, how do you tell your external scripts to be served up in UTF-8? This is external and doesn’t work. I tried <script type="text/javascript" src="/articles/entitycalculator.js" charset="utf-8"></script>
, but it doesn’t work.
Excellent information and tool. Solved my problem for providing affordance to the user about which column a multi-column table is sorted by , and whether the sort mode is ascending or descending. I was swapping images out for each table header, but now I can use text and ↑ or ↓
I was struggling to displaying special symbols using javascript, then I found this post. Very informative, thank you.
This awesome, you are brilliant! Thank you so much for this calculator. I send you a virtual glass of the beverage of your choice. Cheers!
“alert(‘M\u00E9nage \u00E0 trois.’) Try it”
funny!
Pingback: 35 Fresh JavaScript/jQuery Tools and Resources - Noupe
Pingback: 35 Fresh JavaScript/jQuery Tools and Resources » Shai Perednik.com
Pingback: Code Optimization and Minimization Tools for Javascript | denbagus blog
Pingback: 35 Fresh JavaScript/jQuery Tools and Resources - Nagpur City
Pingback: 35 Fresh JavaScript/jQuery Tools and Resources | DX Articles
Here you can find the complete script that allows convert entitites to the corresponding characters and back again.
http://code.google.com/p/jsxt/source/browse/trunk/js/web/Entity.js
i found the easyest way to convert symbols from ‘▾’ to ‘\25BE’
use microsoft calculator =)
yes, enable programmers mode, turn on decimal system, enter ‘9662’, then switch to hex and you’ll get ’25BE’. just add slash ‘\’.