7 Character Sets You Didn’t Know Your Browser Could Render

01/08/2007

Html Entities

HTML Entities are non-standard characters that normally your browser will not render but with a bit of code they do. Below, we’ve pulled out some of the most interesting and useful entity sets to inspire, inform and excite (yes some people do get excited by these things!!!). Basically all you do is add the code (displayed to the right of each symbol) to the html mark-up and the symbol will display.
For example the code “&” will display “&”. So take a glance over the below – you never know when you might need them!

Arrows

These sets are superb to add that extra detail to a link. If you are bored with the standard html underline why not add one of these in your anchor tags?
← ←
↑ ↑
→ →
↓ ↓
↔ ↔
↵ ↵

⇐ ⇐
⇑ ⇑
⇒ ⇒
⇓ ⇓
⇔ ⇔

« «
» »
‹ ‹
› ›
∧ ∧
∨ ∨

Card Symbols

Hmmm, A little unsure why our browser’s can render these but here they are! By far the most creative set of this bunch, and superb for online casinos! I would love to see anyone who is actually using these on their site – add a comment below if you are…
By the way, these don’t seem to work in firefox. Unsure why as they seem ok in everything else.
♠ ♠
♣ ♣
♥ ♥
♦ ♦

Legal Marks

Copyright or trademarks. Always useful for the legally aware…
© ©
® ®
™ ™

Graphic Marks

Ticks are useful to use in tables. There are also corners which could be used to add interest to certain words.
√ √
× ×

¶ ¶
⊗ ⊗
⊕ ⊕

⌈ ⌈
⌉ ⌉
⌊ ⌊
⌋ ⌋

Curley’s

Who said browsers can’t render curly quotes?! Try these and see for yourself that, yes indeed, they can….
" "
´ ´
“ “

‘ ‘
’ ’

Lines

Yep. Bog standard lines. Use to separate design elements…
— —
– –
‾ ‾
¦ ¦

Typographic

Remember the last time you wanted to use an abbreviated “and” but couldn’t? Well now you can. Also in this set are fraction symbols, bullet points, and currency signs. Not exactly revolutionary but most definitely useful.
& &
£ £
¢ ¢
€ €

½ ½
¼ ¼
¾ ¾

÷ ÷

◊ ◊
∴ ∴
∗ ∗
Ø Ø
• •

Conclusion

So use the above and have some fun! See how many you can use in one design and post the outcome below. Also if there are useful html entities we have missed off that you know of, share them below.
For a whole list of entities go to W3C schools.

Author

Attitude Design

View Attitude's Profile

Attitude Design

15 Responses to “7 Character Sets You Didn’t Know Your Browser Could Render”

  1. BIll W.

    1st August 2007

    Just because the entities exist doesn’t mean everyones’ browsers will render them. It depends on what font is being used. And not every font supports every entity.

  2. hcabarcas

    1st August 2007

    Can you include double right quotes under the section Curlys? I see only left double quote.

  3. Adam

    2nd August 2007

    Nice list mate, definately bookmarked! I always forget some of the lesser used codes when I need them…

    By the way, the card symbols work fine for me in Firefox 2

  4. ephi

    2nd August 2007

    By the way, these don’t seem to work in firefox. Unsure why as they seem ok in everything else.

    Uh? Mine does.

  5. Chris Williams

    2nd August 2007

    Quite a few of these don’t work in IE6. Such as:











    Not sure why if these are working for other people, but points as some inconsistency perhaps?

  6. Steve Rose

    2nd August 2007

    Don’t forget the foreign language ones, which are sometimes useful for emoticons.
    For example, “ô¿ô” gives ô¿ô.

  7. Steve Rose

    2nd August 2007

    That didn’t come out too well. How do you get the code to show?

  8. Matt Davies Matt Davies

    2nd August 2007

    @ Steve, go over to Elliot Swans Postable and pop the text you want to display as code in.

    @ Bill, great point. I would recommend a vast amount of testing before you make these a main aspect of a design.

    @ hcabarcas, sure will pop it in when I get a sec – real busy right now!

    @ Adam and ephi, I’m still getting probs in my firefox. I’ve upgraded it to Firefox 2 but still the Card Symbols are not appearing – I just get lines. Weird. I am on a mac though – do you think that might have anything to do with it?

    Does anybody have any examples of site which use any of these unusual characters?

  9. Bob

    2nd August 2007

    Symphony ( http://www.symphony21.com/ ) uses the arrows in their app and support website ( http://www.overture21.com/ )

    I’ve used » and « quite a bit myself…

    http://www.digitalmediaminute.com/reference/entity/index.php – handy for seeing all the entities in different fonts and the code to use… Using the #123; is usually more cross browser compatible too!

  10. Daniil

    3rd August 2007

    Card symbols render well in Firefox on Windows.

  11. kitap

    12th August 2007

    I am just starting to use Illustrator and I didn’t know about these. Thanks.

Tell us what you're thinking...

Your Contact Details

Your Comment

Recieve Attitude Mail?

Are You Finished?

Let's Filter Through!

Choose one of our blog categories below

Questions?

Call us on 0845 0700 820
or get in touch using the buttons below

contact details

project planner