How to Use Character Entities inCSS, HTML and JavaScript alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... How to Use Character Entities in CSS, HTML and JavaScript 2 comments 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\xfollowed 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 slashOr we can use\ufollowed 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 correctlywhat we couldn't before if we were using some other services: alert(" \u263a \u2764 \u271b "); On this pageyou 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:afterand:beforepseudo-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. Like 1 Random Posts How to optimize Images and Increase Blog Traffic25/03/2012 - 7 Comments CSS Basics. How to Apply Rounded Corners On Images #118/03/2013 - 2 Comments Tips To Avoid Your Google Adsense Account From Getting Banned13/04/2012 - 38 Comments Related Posts: How to add custom Variable definiti... CSS3 Transition Property Basics How to Increase Thumbnail Resoluti... How to Use Cookies in Javascript Understanding the Page Elements of ... 2 comments: SiG 12/24/2013 i would to ask a question, how did you make your post in thumbnails in your home page? Reply Replies Admin 12/29/2013 I will make a tutorial about this soon. Thanks for visiting! Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,777 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments Usman Kurniawan not work in my template :( ahmad why i cant use that ? or because my blog its nofollow ?? Anonymous hi admin g i want ask some query about blogging please tell or... JazzyJ Thanks so much! But how do you change the font type of the... Saumya SC Done.........Awesome.........Thanks a lot :) Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 1 Like