CHAPTER 12 ■ ALIGNING CONTENTSubscript and Superscript
Problems You want to use subscripts and superscripts.
Since each browser uses different vertical offsets and font sizes for subscripts and
superscripts, you may also want to standardize their styles to fit your tastes. For example,
Firefox 2 lowers subscripts just a little, and Opera 9 uses a larger font size for subscripts and
superscripts. The first three screenshots in the example show how subscripts and
superscripts look in Firefox 2, Internet Explorer 7, and Opera 9. The fourth screenshot
shows subscripts and superscripts styled to look the same in all browsers.
Solutions You can mark up inline content with for subscripts and for superscripts.
Subscripts and superscripts are semantic elements. In foreign languages, such as French,
certain characters must be superscripts to be correct, such as the “lle” in the abbreviation
for “mademoiselle.” In math, subscripts and superscripts change the meaning of a number.
If you want to ensure all browsers render subscripts and superscripts the same, you can
assign vertical-align and font-size to and . You can use em values so the
location and size of the subscript always remain proportional to the font size.
You can assign a negative em to vertical-align to lower a subscript. For example, -0.5em
lowers the text by half its font-size.
You can assign a positive em to vertical-align to raise a superscript. For example, 0.5em
raises the text by half its font-size.
You can assign a positive em to font-size to size the subscript or superscript to be
proportional to the font size of its parent. For example, 0.75em shrinks the subscript or
superscript to 75% of its parent’s size.
Since Internet Explorer 7 and earlier versions have a “feature” that sizes subscripts and
superscripts 75% smaller than the value you specify with font-size, you can compensate
by assigning a positive value to font-size that is 120% larger than the em value you assign to
other browsers. You can use the Conditional Style Sheet design pattern to load a style sheet
specific to Internet Explorer to assign these values. For example, if you assign 0.75em to all
browsers, you can assign 0.9em to Internet Explorer.
Patterns^
HTML text^
text
CSS
sub { vertical-align:-em; font-size:+em; }
sup { vertical-align:+em; font-size:+em; }
Location This pattern works only on inline text elements.
Related to Vertical-Offset Content; Inline Elements, Conditional Style Sheet (Chapter 2)