Aligning a character to the top of adjacent letters

Question

I wish to align a character in HTML to the tops of the characters next to it. The css vertical-align attribute seems to be what I want, but I'm having some trouble.

Using vertical-align: text-top doesn't seem to do what I want, but I thought it should from reading the spec.

Currently, I'm using vertical-align: 10% which is a reasonable solution, except that I have to calculate the proper number on each platform to get it to look right. Browser detecting to set the value to one that I think is probably right seems like the wrong solution.

To see an example of this, see an example of it in use, in the c in McPherrin.

Answer 1

Try the <sup> tag. It's meant for exacly what you're trying to do. After you implement it, you can control it even more with css.

Example: M<sup>c</sup>Phe yeilds M^cPhe

http://www.w3schools.com/TAGS/tag_sup.asp

If the "c" is too small, just do <style> sup { font-size: 9pt } </style> or something like that.

Answer 2

Ugly, but you could use table cells.

First define some styles:

.bigletter
{
  font-size:20px;
  line-height:20px;
}
.upletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:top;
}
.downletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:bottom;
}

Then the html:

<tr>
  <td class='bigletter'>M</td>
  <td class='upletter'>C</td>
  <td class='bigletter'>P</td>
  <td class='downletter'>hexxx</td>
</tr>

Answer 3

Anthony's comment to the question gave me an idea to wrap the "c" with a semantically correct <sup> tag (or I guess you could continue to use a <span>) and then use the CSS text-transform: uppercase; on it.

Answer 4

Some of these ideas are on the right track, but none quite work. I ended up combining Josh Stodola's suggestion to use text-transform: uppercase; with Keltex's suggestion to use a capital letter in a smaller font to have pseudo-small-caps, even if using tables is unnessicary.

It still relies on futzing around with font sizes and line heights, but I can get a more consistent effect this way at least.

The suggestion to use <sup> isn't really helpful, as I'd have to override all its styles anyways, so it doesn't differ from a <span>. Semantically there may be a difference, but small enough that it doesn't matter.