I received this question from Bryden:
I have a mix of upper and lower case letters but I want them to run on a center line rather than “sit” on a ruled line.
This is an interesting question as Bryden is attempting to treat each glyph in the text block as a separate tiny image—rather than as a part of the text block. On first review, it seems like the CSS property vertical-align would be the correct answer to this question. Perhaps this would work:
h1 { vertical-align: middle; }
Unfortunately, no matter which option you use in the vertical-align style property, none of them will change the location of the baseline of the text. This is because text in a web page is set within a text box that all the glyphs in that font will fit. There is a baseline, where the bottom of the fonts will touch, a descender height, where hanging letters (such as p or g) will drop to, a caps height that marks the top of capital letters, and an ascender height above the tallest letters like l and h. Even if you wrote a line of text using only small lowercase letters (like e, o, c, u, v, r, etc.), the text will take up the space required for the tall letters and hanging letters.
What Does Vertical-Align Do?
The vertical-align style property looks at everything on the current line, including both text and images. It then looks at the height of the text boxes or images, and aligns the object with the tallest item on the line. For example, the text in this HTML would be aligned at the top of the line formed by the initial image:
<p>
<img src="" style="height:50px; width:10px; border:solid black 1px;" /> <span style="vertical-align: top; font-size: 12pt;">The quick brown fox...</span>
</p>
You can see how the different values of the vertical-align style property work online.
But the answer to Bryden’s question is more complicated. While it isn’t possible to use the vertical-align style property to create vertical text using CSS, CSS3 provides a solution.
Use CSS3 to Transform Horizontally Oriented Text to Vertically Oriented
CSS3 provides two new style properties: transform and transform-origin that you can use to rotate text so that it is positioned vertically on the page, rather than horizontally.
For example, to change an H1 headline to vertical text, you could write:
h1 {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
white-space: nowrap;
}
Note that there is also the white-space CSS property. This keeps the headline all on one line.
