How do I add symbols and special character to my lenses?

Which are you more likely to remember? € or € ? I bet € because it is so much more obvious. The other advantage is that if you are amending or correcting your text it is so much easier to read back if you have used short names. So in this lens you will find lists of the most useful shortcut names (formally W3C calls them character entity references) of characters you can include in your lenses. When you type the names remember that they all start with an ampersand & and finish with a semi-colon ; like this &charcode; If you forget to type either the & or the ; then your symbol will not be displayed. The same is true of number codes for characters. The format of these is &#numcode; so you need to remember the &# at the start and the ; at the end.

And to make it even easier, I have grouped them by topic such as maths, copyright, currency, etc and built an easy to use table of contents so you can jump straight to the symbols you want.

Sometimes though, there are really useful sympbols for which there is no shortname, so I have shown some of the best of those as well. There are lenses that tell you that many these characters cannot be used on Squidoo. Not so - these characters can be used so long as you use this method, and to prove it, I've shown them in this lens. The ALT key is a good method for adding characters in programs like Microsoft Word; it's not the right method for Squidoo.

And finally, this lens isn't definitive: there are other characters available. Over time, I'll be adding some child lenses as indicated below, and also adding more quotation marks and something about non-breaking spaces including one of my favourite characters, the zero width space. And yes - it does have a use!

Text Modules and Text List Modules are strange. Some codes which work in other modules (eg in the description section of most modules) don't work in Text Modules! As Text Modules are a favourite, I've added shown compatibility details for some very common symbols - although there is always the chance that in some future release Text Modules may start working. The biggest irritation I have come across is in module headings. Short names appear to work in the editor (after a Save Draft) but then do not work after the lens is published. Aggghhh!

An alternative to using Text Modules is to use a Table of Contents Module and turn everything off. In fact for a number of reasons, personally I prefer the Table of Contents Module to the Text Module. It's even possible to get special characters into the sub-heading of the Table of Contents module which seems to be an especial problem with some other modules.

"Good" Modules
Guestbook
Polaroid Module
Table of Contents

"Bad" Modules
Intro Module
Text Module
Video Module

(Amazon Spotlight modules are a special case altogether!)

I have tested this lens on a Windows Vista PC using Microsoft IE7, Mozilla Firefox3 & Google Chrome and found no problems. I haven't tested it on a Mac or with Safari. Characters which have short code names should be universally supported; however, there may be less widespread support for some of the less common characters for which there are only number codes. If universal support is vital to you then you either need to do your own testing (please let me know how you get on) or avoid using fancy characters. Unless otherwise noted, testing has been done only in the default Squidoo font and 'times. Other font choices cannot be guaranteed to work.

There are also characters for other languages like Arabic, Bengali, Mongolian etc. To be perfectly honest I have no need for such charaters. I can transliterate Greek and some Cyrillics but anything else is way beyond me. So if you want codes for other languages, then please don't wait for a lens from me to give you the codes because it is very unlikely I will write it!

The "Why do you wish to spotlight this" box on the Amzon Spotlight module is particularly irritating and has borrowed a nasty habbit from Squidu. If you enter a character using a character code the first time you save the module, the character will display correctly. However, if you wish to edit it, when you go back in the text will now have converted the character code to the character itself and when you save the module again you'll get an error code rather than the character you want. It's exceptionally irritating as there is no way to get back to your character codes without manual retyping them - and that probably means looking them up again.

The good news is that most short code names seem to work so try using the short names first as they are stable.

Accented characters are about the easiest to remember and take the form &letteraccent: for example:

é is é
Ü is Ü

As usual, the case of the letter in the name affects the case of the output.

These seems to be useable in all modules. I'll be developing a lens which lists them all when I get time and will feature it here. For an alternative, see the Combining Accents section.

Although they work in all modules, they don't work in module titles. If you use one in a module title, it will initially appear as the code and not an accented character. When you Save Draft, the code should get converted to the proper character. The problem comes when you Publish. At that point, the characters convert back to short codes. It's every lensmasters nightmare - something which works in the editor but is broken in a published lens. The only solution for titles is to use the number code.

Suprisingly most of codes work - although I don't think they are of much benefit.

Symbol

Code

Description

´

´

Acute accent

¸

¸

Cedilla

¯

¯

Macro or spacing overline

·

·

(Greek) middle dot, or Georgian comma

¨

¨

Umlaut or upper spacing diaresis

 

So far as I am aware, there is no separate grave accent. The only way I know to type an isolated grave is to use the Combining Accents feature (see the separate section) with a non-breaking space ie  ̀

Incompatible with Text Modules

The following accent short names work in modules with description boxes (eg Guestbooks) but not in Text Modules. To use them in a Text Module you need to use the number code shown!

Symbol

Code

In Text Modules

Description

ˆ

ˆ

ˆ

Circumflex character modifier

˜

˜

˜

Small, over-character tilde

 

Note: altough ˜ doesn't work, it is possible just to type a ~ on your keyboard if you are happy with a midline tilde instead of an over-character one rather than using ˜

See the Accented Characters section just above this one.

I may have an MA in mathematics so sympbols for calculus, logic, real and imaginary numbers, and sets etc may seem important to me, but for most lensmasters they are probably irrelevant, although some may be useful as shapes. I'll create a separate lens when I get time.

The following short names for arrows work in most modules with description boxes (eg Guestbooks) but none of them work in Text Modules. To use them in a Text Module you need to use the number code shown!

Symbol

Code

In Text Modules

Description

⇓

⇓

⇓

Double down arrow

⇐

⇐

⇐

Double left arrow

⇔

⇔

⇔

Double left-right horizontal arrow

⇒

⇒

⇒

Double right arrow

⇑

⇑

⇑

Single up arrow

↓

↓

↓

Downwards arrow

↵

↵

↵

Carriage return arrow

Symbol

Code

Description

+

+

Plus (addition) symbol

-

-

Minus (subtraction) symbol

÷

÷

Division symbol

×

×

Multiplication (times) symbol

±

±

Plus / minus symbol

The symbols + and - for addition (plus) and subtraction (minus) both work just by typing them straight in from the keyboard as normal

Rather than using a pre-composed accented character like é, it is possible to use composing accents. In this case type the normal letter is followed by the code for fhe composing accent, for example e&969; for é These do work in Text Modules.

Symbol

Code

Description

´

́

Combining acute accent eg é

^
 

̂
*nbsp;

Combining circumflex accent eg â
(Combining circumflex needs Arial or Times font)

¨
 

̈
 

Combining diaeresis eg ü
(Combining circumflex needs Arial or Times font)

 ̀

̀

Combining grave accent eg à

There are several others. I'll sweep them up when I write up accented characters. In the meantime, you may wish to refer to the Overlining section which uses the same technique.

Symbol

Code

Description

<

&lt;

Less than

>

&gt;

Greater than

Incompatible with Text Modules

The following short names work in modules with description boxes (eg Guestbooks) but not in Text Modules. To use them in a Text Module you need to use the number code shown!

Symbol

Code

In Text Modules

Description

≤

&le;

&#8804;

Less than or equal to

≥

&ge;

&#8805;

Less than or equal to

≠

&ne;

&#8800;

Not equal to

≈

&asymp;

&#8776;

Almost equal to (asymptopic to)

≡

&equiv;

&#8801;

Identical to

≅

&cong;

&#8773;

Approximately equal to

Symbol

Code

Description

©

&copy;

Copyright symbol

®

&reg;

Registered symbol

Incompatible with Text Modules

The following short name works in modules with description boxes (eg Guestbooks) but not in Text Modules. To use them in a Text Module you need to use the number code shown!

Symbol

Code

In Text Modules

Description

™

&trade;

&#8482;

Trademark symbol

Symbol

Code

Description

¢

&cent;

Cent symbol

¤

&curren;

Currency symbol

$

$

Dollar symbol (just type it)

£

&pound;

Pound (Sterling) symbol

¥

&yen;

Yen symbol

Be particularly careful with £. Typing it in may seem to work (in Text Modules but not other modules - the reverse of the normal problem with character codes) but not all browsers may recognise it. For something as important as money, always use &pound;

Incompatible with Text Modules

The short name for the Euro symbol works in modules with description boxes (eg Guestbooks) but not in Text Modules. To use it in a Text Module you need to use the number code shown!

Symbol

Code

In Text Modules

Description

€

&euro;

&#8364;

Euro symbol

Symbol

Code

In Text Modules

Description

—

N/A

&#8212;

Emdash

–

N/A

&#8211;

Endash

…

&hellip;

&#8230;

Horizontal ellipsis

‾

&oline;

&#8254;

Horizontal overline

Emdash and endash available only by using code numbers.

Symbol

Code

Description

¶

&para;

Paragraph (pilcrow) mark

§

&sect;

Section mark

These fancy number characters are only available as number codes, but once you spot the pattern they are easy to use, and so very useful for numbered lists or for displaying telephone numbers.

❶

❷

❸

❹

❺

❻

❼

❽

❾

❿

&#10102;

&#10103;

&#10104;

&#10105;

&#10106;

&#10107;

&#10108;

&#10109;

&#10110;

&#10111;

➀

➁

➂

➃

➄

➅

➆

➇

➈

➉

&#10112;

&#10113;

&#10114;

&#10115;

&#10116;

&#10117;

&#10118;

&#10119;

&#10120;

&#10121;

You may have noticed that there are no zeroes (although a ➓ is available). A different part of the character maps offers matching zeroes but don't work in IE or Google Chrome.

Tip to get a blue ❶ type:

<b style="color:blue">&#10102;</b>

Change the code for other numbers.

The solid enclosed numbers then continue to 20 in a different part of the character map like this:

⓫

⓬

⓭

⓮

⓯

⓰

⓱

⓲

⓳

⓴

&#9451;

&#9452;

&#9453;

&#9454;

&#9455;

&#9456;

&#9457;

&#9458;

&#9459;

&#9460;

As can be seen they don't look great in bold with a normal size font (and are bigger than the earlier characters so sizing can be an issue) , but with a bigger font they can look good when laying out instructions, for instance a nice bold number 11 like this:

⓫ - Step Eleven

Symbol

Code

Description

¼

&frac14;

One-quarter

½

&frac12;

One-half

¾

&frac34;

Three-quarters

The following fractions are only available using number codes, but can be useful as laying fractions out by combing digits above and below a / can be painful!

Symbol

Code

Description

⅓

&#8531;

One-third

⅔

&#8532;

Two-thirds

⅕

&#8533;

One-fifth

⅖

&#8534;

Two-fifths

⅗

&#8535;

Three-fifths

⅘

&#8536;

Four-fifths

⅙

&#8537;

One-sixth

⅚

&#8538;

Five-sixths

⅚

&#8538;

Five-sixths

⅛

&#8539

One-eigth

⅜

&#8540;

Three-eigths

⅝

&#8541;

Five-eigths

⅞

&#8542;

Seven-eigths

Providing fractions are reduced down (eg two-quarters to be one-half) all symbols necessary for fractions upto sixths, plus eigths are available, There are no symbols for sevenths.

All of the Greeek letters are available in Guestbooks, Tables of Contents etc in the format &letter; for lowercase (eg &psi for ψ) or &Letter; for lowercase (eg &Xi for Ξ):

&alpha;&beta; ... &omega; (lowercase Greek alphabet)
&Alpha;&Beta; ... &Omega; (uppercase Greek alphabet)

There are a small number of additional special characters. (I'll be developing a lens to list all the Greek characters and will show it here.) None of the Greek letter codes work in Text Modules so there you need to use number codes instead.

NB This section is only needed by those wanting to write lenses on how to use HTML.

Symbol

Code

Description

&

&amp;

Ampersand

<

&lt;

Open tag

>

&gt;

Close tag

You need to use the open and close tag alternatives if you wish to show HTML markup in your lens without it being interprepted as HTML. (There are alternatives, but this is the easiest way.)

Example if you write HTML of &lt;b&gt; in your lens it will displayed as <b>

Be careful with &. You can just type it in a text module but if you want it in something like a Guestbook you should use the &amp; character reference instead. The safest is always to type &amp; - Squidoo will turn it into a naked & if that's the best option in that module.

For anybody writing lenses about music, these musical note symbols may come in handy.

♪

♫

♬

♭

♮

♯

&#9834;

&#9835;

&#9836;

&#9837;

&#9838;

&#9839;

Anybody who knows basic HTML will know that underlining is easy using the <u> … </u> tag pair. Usually to get a line above text, people resort to CSS. In fact, just using HTML we can get an effect like this: S̅q̅u̅i̅d̅o̅o

This relies on the overline character, &‌#773; Just put it between the characters you wish to overline. It has an advantage in that it naturally sits much closer to the characters than a paragraph border, so it can be useful; however, at the time of writing, only Firefox displays overlining perfectly. Chrome and Chrome are improving and the latest versions can display overlining on letters of an even height so F̅I̅R̅E is displayed reasonably.

Remember there is a CSS equivalent FIRE which is probably easier to use in most circumstances. (For this effect enter <u style="text-decoration:underline overline;color:red;">FIRE</u>) However, this seems to place the top horizontal bar somewhat higher.

The set of four suits for playing cards works in Guestbooks and most other modules with Description boxes but not in Text Modules.

Symbol

Code

 In Text   Modules 

Description

♣

&clubs;

&#9827;

Clubs suit

♦

&diams;

&#9830;

Diamonds suit

♥

&hearts;

&#9829;

Hearts suit

♠

&spades;

&#9824;

Spades suit

Although these may look somewhat dull when shown normal size in a table, they can be highly effective if increased in size and the correct colours are added:

 

♣   ♦   ♥   ♠

Tip to get a red heart type:

<b style="color:red">&#9829;</b>

The following short names only work in modules with description boxes (eg Guestbooks); not in Text Modules. To use them in a Text Module you need to use the number code shown!

Symbol

Code

 In Text   Modules 

Description

‹

&lsaquo;

&#8249;

Single left quotation arrow

›

&rsaquo;

&#8250;

Single right quotation arrow

There is a range of quote marks available. I'll add them in due course.

The following short names for shapes work in most modules with description boxes (eg Guestbooks) but none of them work in Text Modules. To use them in a Text Module you need to use the number code shown!

Symbol

Code

 In Text   Modules 

Description

†

&dagger;

&#8224;

Dagger with single crossbar

‡

&Dagger;

&#8225;

Dagger with double crossbar

◊

&loz;

&#9674;

Diamond lozenge

♦

&diams;

&#9830;

Diamonds suit

♥

&hearts;

&#9829;

Hearts suit

☻

N/A

&#9787;

Smiley face

See also all four Playing card suits (♣ ♦ ♥ ♠). Unfortunately there isn't a shortcode for the smiley face so you have to use &#9787; It look's particularly good in green I think:

☻

You may be surprised what's possible. I don't want this lens to become too big so I have started a new lens covering some of the many other shapes and symbols you can add to your lenses. It's under regular development (and takes time) so check back regularly.

Some quick tasters for you of what is possible:

✂ ➼ ⟲ ✘ ✈ ☁ ☂ ☎ ☛ ♻ ♀ ♂ ↷ ⊠◔

I have started a series of lenses on HTML because for beginners using CSS (where you write style="...") can be hard to start with, and lots of CSS in a lens can get very hard to read. It is possible to do quite a bit though, just by using HMTL as this series of lenses explains. As I develop lenses, I'll add them here.

You might also apppreciate some of my other tutorial lenses.