Ads Top

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.

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.