Aligning a character to the top of adjacent letters
-
21-09-2019 - |
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.
Solution
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>
OTHER TIPS
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 McPhe
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.
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.
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.