Align the character at the top of adjacent letters

Question

I want to align a character in HTML with the top of the characters next to it. The css attribute vertical alignment seems to be what I want, but I am having some problems.

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

I am currently using vertical-align: 10% which is a reasonable solution, except that I need to calculate the correct number for each platform so that it looks right. Finding the browser setting the value that I consider correct seems like the wrong solution.

Answer 1

Awful, but you can 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 html:

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

Answer 2

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

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

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

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

Answer 3

The Antonian comment on the question gave me the idea to wrap the "c" with the semantically correct <sup> (or, I think, you could continue to use <span> ), and then use CSS text-transform: uppercase; On him.

Answer 4

Some of these ideas are on the right track, but none of them work. I eventually combined Josh Stodola's suggestion to use text-transform: uppercase; with Keltex's suggestion to use a lowercase capital letter to have pseudo-small caps, even if using tables is illogical.

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> not very useful, since I still have to redefine all its styles, so it is no different from <span> . There might be a difference semantically, but small enough so that it doesn't matter.