How to Use Character Entities in CSS, HTML and JavaScript

Sometimes, when using scripts, we must write special characters like accents by using a special set of codes called character entities. However, these don’t always look good or we get a question mark or other strange symbols. Usually, this is solved if the character encoding is done right but the logic may not always work.

In Blogger, special characters most of the time appear correctly, but when it is about other services, like external files, things can get complicated.

For example, this usually looks good and when you click on this link, you should see the letters in the right way:

alert(” á é í ó ú  ☺ ✛ ❤ “);

If we are trying to use other method and we want to use this type of characters, sometimes we need to write them in a special format called escape sequence which is nothing but a backslash followed by a letter and a number in hexadecimal format. In the case of common characters or accents, it would be x followed by two hex digits:

xe1 is the letter á
xe9 is the letter é
xed is the letter í
xf3 is the letter ó
xfa is the letter ú

Other combinations generate special characters:

n is a line break
t is the tab character
‘ is single quote
” is double quote
\ is a back slash

Or we can use u followed by the Unicode character code expressed as four hexadecimal digits:

u00e1 is the letter á
u00e9 is the letter é
u00ed is the letter í
u00f3 is the letter ó
u00fa is the letter ú

This will allow us to see correctly what we couldn’t before if we were using some other services:

alert(” u263a u2764 u271b “);

On this page you can find a comprehensive list of all the characters, both symbols and different alphabets.

Although rare characters are not often used in the CSS, there is a case when they are necessary as well, like when using the content property with the :after and :before pseudo-elements.

The same criteria applies there, but we only need to add a backslash followed by the four-digit hexadecimal code. For example:

content: “:24d124d424d524de24e124d4”;

content: “:after  263a  2724  2602”;

:after ☺ ✤ ☂

Remember that IE doesn’t understand the :before pseudoclass with content, and you would have to set the list-style-type property as none, or you would get 2 bullets in CSS compliant browsers.

Related Posts

Display Blogger Posts in Grid View with Thumbnails

Grid View with Thumbnails is a script for self-hosted Blogger blogs which will display blog posts as a thumbnail grid of images in homepage and archive pages….

How to Turn Off Auto Enhance for Blogger Photos

When you go to upload photos on Blogger, look closely for changes between the picture you uploaded on your computer and how it looks on Blogger. If…

Customizable Related Posts Widget for Blogger

We already posted a few tutorials on how to add related posts widget with thumbnails in Blogger with summaries or only titles, which can be compiled into…

Where To Find Free Blogger Backgrounds and Textures

Blogger is a fantastic tool for amateur and professional writers that have a passion for publishing online content. Unlike WordPress or hosting companies that require you to…

How To Set Up a Custom Domain in Blogger

Our web today is a wonderful place. It’s increasingly become a knowledge hub for strollers around the globe. And you know what the best part is? It…

How to Increase Thumbnail Resolution on Blogger

When we add a widget on Blogger, the thumbnails will maintain a default size of 72 x 72px which might not look good if we try to…

Leave a Reply

Your email address will not be published.