Things HTML is not designed to do.

Here is yet another day in the IT biz where I have lost 4 hours trying to accomplish something that would seem very simple but turns out not do be, due to a shortcoming in how HTML works. I am working on a project where I had text in two different sizes and I needed to vertically align the top of the text in the two different font sizes.

Easy you say? You have seen it all the time. Odds are, when you see text in different font sizes aligned like that, What you are looking at is a graphic, not actual text. Or if it is actual text, as you scale the text larger or smaller the alignment breaks.

Here is the text as it normally shows up. That is aligned to the baseline, or the bottom of most letters in a font. This is the same as specifying align-text: baseline in css. I selected the text with the mouse and the highlight around the text shows us several things. Each letter has several attributes to it. The baseline, the standard height of the letter, which is where the top of the letter L goes to. There is also the descenders, where the bottom of the letter g goes to. In addition to that there is leading (or blank space) above the the top of the letters and descending bellow the bottom of the letters. That leading is a different size depending on the size of the font.

Here we are using the css vertial-align: bottom. The bottom of both fonts, where the leading ends below the font are lined up. Because the text in the smaller size has less leading, it shows up vertically aligned lower then the text in the larger font face which has more leading.

Here we are using the css vertial-align: top. The top of both fonts, where the leading ends above the font are lined up. Because the text in the smaller size has less leading, it shows up vertically aligned higher then the text in the larger font face which has more leading.

Here is a page at w3org which shows a graphic and text in two different sizes. Notice that it very easy to align text so the baselines are the same. What you will not find here is an example where the top of the letters in the fonts in different sizes are aligned.

I tried dozens of different ways to fix this. A table with each word in a different cell is no good. You still align to the top of the leading, not the tops of the letters. I found out I needed to wrap the word I want to change the location of with a <span></span> tag. I kept going back to the reference material on vertial-align. You can raise or lower the vertical alignment by percent. Positive numbers moves the text up, negative numbers move the text down. You can specify the number in pixels, percents and EMs.

If use pixels so that we can bump the text up 5 or 6 points lets say. When we zoom the page in the browser it may or may not look right. Different browsers handle that different ways. Usually in situations like this using the em is a good measurement. Since it is based on the size of the font. For the text I am working with here. .3em moves the text up from the baseline enough to make it look right.

The paragraph had the font size set to the larger text at 56 points. Here we are with the text properly aligned. the HTML for this looks like:

<span style="vertical-align: .3em;font-size: 36px;">GO</span>DEEP