How would a write a superscript number inside a bubble using HTML. It
would be like the registered trademark sign with a number instead of a
"r".

Hi,

There are four ways of accomplishing this, none of them ideal.

First way: You can use HTML Unicode, as in the following chart:

①     1 with a circle around it
②     2 with a circle around it
⏾     3 with a circle around it
   ... up to
⑳     20 with a circle around it

The problem with this -- and it's an extremely serious problem -- is
that most browsers don't recognize these codes and/or the fonts on
most computers don't have these characters.  So the characters ending
up looking like rectangles or blank spaces or whatever your system
uses for displaying unrecognized characters.

You can see what your own browser displays, as well as what the
numerical codes are, on the following page:

Test for Unicode support in Web browsers: Enclosed Alphanumerics
http://www.alanwood.net/unicode/enclosed_alphanumerics.html

You can see what they're supposed to look like on this page:

Enclosed Alphanumerics
http://www.unicode.org/charts/PDF/U2460.pdf

Second way: You can have the characters displayed in a font that has
such characters.  For example, the OpenSymbol font has the numbers 0
through 10 available within circles.  Here is the HTML code for
displaying the numbers 0 through 10 in the OpenSymbol font:

<FONT FACE="OpenSymbol">&#10112; &#10113; &#10114; &#10115; &#10116;
&#10117; &#10118; &#10119; &#10120; &#10121;</FONT>

The main problem with this approach is that few computers have the
OpenSymbol font installed and so the characters would not display
correctly.

Third way: You can use dynamic fonts, which means that the user's
browser would download the fonts and display them automatically. The
process would be same as the second way displayed above, except you'd
also have to include a line in the page's header that lists where the
font is located. If you do this, make sure you have the right to
distribute the font on the Web.

The line you'd have to include in the document would depend on where
the font can be found. It would be in this format:

<LINK REL="fontdef" SRC="http://www.YOURSERVERNAME.com/fonts/specialfont.fon">

As you might have guessed, the problem with this method is that not
all browsers support this feature. Also, people with slower
connections would have to wait for the font to download.

Fourth way:  You can make tiny graphics that show the symbol you want.
There are no real problems with this approach on the user end (except
for the very few users who are using text-only browsers).  It could be
a pain for you, however, depending on how you want them to display in
the page.

I hope this helps,

Mvguy-ga





Google search terms used:

html unicode
://www.google.com/search?q=html+unicode&sourceid=opera&num=0&ie=utf-8&oe=utf-8

"dynamic fonts" html
://www.google.com/search?q=%22dynamic+fonts%22+html&sourceid=opera&num=0&ie=utf-8&oe=utf-8

good job!

One more way to do this:

The way I have always done this is with a .gif format image using an
HTML <IMG> tag. This solution will display correctly in all browsers
regardless of the fonts available because it uses an image.

How to do it: 

1. Create the (r) superscript character in an image editor (like
Photoshop, PaintShop Pro, Fireworks, or GIMP) and save it as a .gif
format image that is as tall in pixels as the text displayed in your
HTML page by the browser.

2. In your HTML document, when you wish to display the superscript
character, place an image tag in-line with your text. This might look
like:

... This is text in my page. A superscript character follows now <img
src="superscript.gif" align="abs-middle"> just like that. The
superscript character image will follow the word 'now'.

Also note in the <img> tag the align parameter is set to 'abs-middle'.
This is important for the text to flow correctly on the page.

Hope that helps.  Peace, Dan

To clarify, my comment is really an expansion on mvguy-ga's 4th way to do it...