7 Character Sets You Didn’t Know Your Browser Could Render
August 1st, 2007 - Articles, General Design
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.
August 1st, 2007 at 7:54 pm
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.
August 1st, 2007 at 9:33 pm
Can you include double right quotes under the section Curlys? I see only left double quote.
August 2nd, 2007 at 4:20 am
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
August 2nd, 2007 at 7:01 am
By the way, these don’t seem to work in firefox. Unsure why as they seem ok in everything else.
Uh? Mine does.
August 2nd, 2007 at 11:35 am
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?
August 2nd, 2007 at 1:07 pm
Don’t forget the foreign language ones, which are sometimes useful for emoticons.
For example, “ô¿ô” gives ô¿ô.
August 2nd, 2007 at 2:17 pm
That didn’t come out too well. How do you get the code to show?
August 2nd, 2007 at 2:31 pm
@ 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?
August 2nd, 2007 at 11:33 pm
[…] 7 Character Sets You Didn’t Know Your Browser Could Render […]
August 2nd, 2007 at 11:54 pm
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!
August 3rd, 2007 at 1:21 pm
Card symbols render well in Firefox on Windows.
August 10th, 2007 at 1:53 pm
[…] 7 Character Sets You Didn’t Know Your Browser Could Render […]
August 12th, 2007 at 8:42 pm
I am just starting to use Illustrator and I didn’t know about these. Thanks.
April 11th, 2008 at 9:15 pm
[…] Ova lista interesantnih simbola koji se uz to nalaze i u HTML entity tabeli. […]