HTML: Superscript and subscript in same character position 1

traceyr · Nov 6, 2008

Hi, I'm trying to create a numbered list of publications for a scientific website. Unfortunately, some entries refer to isotopes using notation in which a superscripted Atomic Number and a subscripted Neutron Number immediately precede the element symbol, i.e. one above the other in the same character position. I have come across a method using tables to implement this notation successfully, but not in the context of a numbered list; combining the two techniques has so far proved impossible. The line number appears above or below the text, possibly aligned with the lowest/highest cell in the table(s) - nothing I have tried works!
In IE7 the following code shows what it should look like, with the numbers hard-coded in (see below for the required result, give or take a few spaces between the numbers and the text!):

<body marginheight=2 marginwidth=2 topmargin=2 leftmargin=0>
1)    First item in numbered list

<table border=0 cellspacing=0 cellpadding=0 valign=top>
<tr>
<td align=left>

<table cellpadding=0 border=0 cellspacing=0 align=left>
<tr>
<td>2)   Second item in numbered list showing Isotope &nbsp</td>
<td>

<table cellpadding=0 border=0 cellspacing=0>
<tr>
<td class=chart align=left><font size="2">96<br>40</font></td>
<td class=chart>Zr</td>
</tr>
</table>

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>        Unnumbered second line of second entry</td>
</tr>
</table>
3)&nbsp&nbsp&nbsp&nbspNext item in numbered list
</body>

In this layout, imagine the 96 above the 40, without the slash, both in sub/superscript fontsize:

1) First item in numbered list
2) Second item in numbered list showing Isotope 96/40Zr
Unnumbered second line of second entry
3) Next item in numbered list

I have seen references to an add-on called MathML, which offers this functionality, but I'd prefer not to have to go down that route. Am I overlooking something simple?
Any ideas and/or different approaches much appreciated! Thanks.

Borvik · Nov 6, 2008

Here is something that works using CSS, but there is a caveat however.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <TITLE>TestSpanClassIons</TITLE>
  <style type="text/css">
    .ions { line-height: 1.8; }
    .ions sub { margin-left: -1.8ex; }
    .ions sup { vertical-align: 1ex; }
  </style>
</head>
<body>
<P>Okay, here is some text containing <span class="ions"><sup>96</sup><sub>40</sub>Zr</span>. At the end of this is more text.</p>
</body>
</html>

Taken from:

http://www.cs.tut.fi/~jkorpela/math/#subsup

You can adjust the margin-left by varied amounts to align the subscript. The caveat mentioned above is - this particular code works for double digit subscripts, the left margin needs to be adjusted for anytime the number of digits is different.

Hope it helps.

traceyr · Nov 6, 2008

Many thanks; that has worked perfectly. The link is also very useful. I'm glad that it now seems possible to avoid the use of images, which bring their own problems. Great stuff!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

HTML: Superscript and subscript in same character position 1

traceyr

Technical User

Borvik

Programmer

traceyr

Technical User

Similar threads

Part and Inventory Search

Sponsor