31 May 2007 • 312 views, 1 today

Alphabet soup

One of my readers recently asked me about my inclination to use accented vowels in my posts. Stuff like ‘vis-à-vis’, ‘über’, ‘résumé’. It’s not really necessary, but to me it looks pretty. So there. She did ask me to teach her how to get these accented vowels (and consonants) to display on web pages. I think I’ll share it with everyone who’ll care to read through.

It’s not complex, trust me. They’re what you call HTML Special Characters — “special” because they’re not normally accessible via an English keyboard. So, to display them, you need to know their names and the proper coding. Here are a bunch of them:

à à   â â   ä ä
ç ç   è è   é é
ê ê   ë ë   í í
ì ì   î î   ï ï
ó ó   ò ò   ô ô
œ œ   ú ú   ù ù
û û   ü ü   ý ý
ÿ ÿ   ñ ñ   ß ß

If you notice, the character names are enclosed by an ampersand (&) and a semi-colon. These marks tell your browser to display the whole code as a special character. Obviously, there are more than what’s presented above, but I’ve tried to give the most commonly-used in English as well as in other European languages. To capitalize, simply replace the first letter after the ampersand with the capital letter.

There you go! If you’re one of those people with the Spanish ñ in your name, now you can have it displayed the right way on your blog. 8-)

Aside from spitting out fancy letters, this &code; construct has a little more oomph to it. There are also a few symbols that it can generate. To wit:

€   £ £
« «   » »
•   †
© ©   ® ®
° °   µ µ

For careful coding, it’s always a good idea to use & to display the ampersand — just to make sure it’s not going to turn into another character you didn’t intend.
Blog on!

 
  • Digg
  • Facebook
  • del.icio.us
  • Google
  • Technorati
  • Live
  • StumbleUpon
  • Pownce
  • Mixx
  • Ratimarks

Posts at Random


6 Responses to “Alphabet soup”

  1. tina
    12:32 pm on 1 Jun 2007

    thanks for this! this might prove useful if I decide to use this one day :P

  2. Beejing
    2:37 pm on 1 Jun 2007

    Thanks. Useful. :)

  3. Misterhubs
    5:49 pm on 1 Jun 2007

    Hey I learned something new today. Thanks Bloggie! Btw, I’m still working on that “Proud to Be Pinoy” entry. For the life of me, I’m blanking out on that one.

  4. Blogie
    9:40 pm on 1 Jun 2007

    Thanks guys! Glad you found this useful. More to come!

    @Misterhubs — You can do it, buddy! Keep the meme game going… ;)

  5. Jap
    1:11 am on 4 Jun 2007

    blogie, thanks for posting this! I’m going to change “degrees” on my post now hahaha =)

  6. Blogie
    11:46 am on 4 Jun 2007

    Hmmm… yeah, Jap, you would need to be able to display the degree symbol, what with your extreme weather over there! ;)

Post a Comment