Blogger Tips
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: ":\24d1\24d4\24d5\24de\24e1\24d4";
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.
-
How To Upload And Use Custom Fonts In Blogger
Just about anyone can write and publish his or her own blog. In fact, there are about 152 million blogs out there on the internet. But, if you want your blog to stand out you need to impress visitors with the little things. You need to be able to catch...
-
How To Add Google Analytics To Blogger
Google Analytics is a platform created with the purpose of helping us to track the number of visits and page views on our blog, which also uses several filters to check exactly from where the visitors are coming via standard or custom reports. Google...
-
How To Create Drop Caps (big First Letters) In Blogger/blogspot
Here's another way to customize your Blog. In this case, your Posts and Comment's first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font...
-
How To Remove Blogger Picture/image Shadow And Border
If you want to get rid of those annoying shadows and borders around blogger images, then follow the next steps (see the difference in the screenshot below): If you are using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced...
-
Add Meta Tags To Blogger For Better Seo
In this Blogger tutorial I will show you the best way to add meta tags to your Blogger blog (Blogspot blog) to improve the SEO of your blog and work around the limitations of the Blogger platform. I have observed that there are many Blogger help blogs...
Blogger Tips