:first-letter test 1
typography
Styles
p {text-transform:capitalize;}
p:first-letter {float:left;}Results
- Chrome 4.0 and Safari 4.0: the first letter is capitalized; the top of the float is aligned with the top of the line box; the height of the float's line box is equal to that of the rest of the first word.
- Firefox 3.6: the first letter is capitalized; the top of the float is aligned with the top of the line box; the float's line box is collapsed.
- Opera 10.5 and Internet Explorer 8: the first and second letters are capitalized; the top of the float is aligned with the top of the line box.
:first-letter test 2
typography
Styles
p:first-letter {float:left; font-size:20px;}Results
- Firefox 3.6, Chrome 4.0, Safari 4.0, Opera 10.5: the top of the float is aligned with the top of the line box.
- Internet Explorer 8: the top of the float is not aligned with the top of the line box. It appears that the baselines of the float and adjacent line box are aligned.
:first-letter test 3
typography
Styles
p:first-letter {float:left; font-size:20px; line-height:120px;}Results
- Chrome 4.0, Safari 4.0, Opera 10.5: modifying the line-height affects the vertical positioning of the floated first letter.
- Firefox 3.6: modifying the line-height has no affect on the vertical positioning of the floated first letter.
- Internet Explorer 8: modifying the line-height only affects the vertical positioning of the floated first letter if the line-height is greater than that of the adjacent line box.
:first-line test
I am partial to some typography
Styles
p {text-transform:capitalize;}
p:first-line {font-weight:bold; text-transform:lowercase;}Results
- Firefox 3.6, Opera 10.5 and Internet Explorer 8: the first line is bold and lowercase.
- Chrome 4.0 and Safari 4.0: the first line is bold but not lowercase.
:first-letter and :first-line test
I am partial to some typography
Styles
p {text-transform:capitalize;}
p:first-letter {float:left;}
p:first-line {font-weight:bold; text-transform:lowercase;}Results
- Chrome 4.0 and Safari 4.0: the entire first line is bold (including the first letter); only the first letter is made lowercase.
- Firefox 3.6, Opera 10.5 and Internet Explorer 8: the first letter is neither bold nor lowercase; the rest of the first line is bold and lowercase. (On rare occasions Firefox 3.6 was applying the first line styles to the first letter or varying the vertical alignment of the first letter.)
Firefox 3.6 rotational transformation test
I love typography
Styles
p {-moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -o-transform:rotate(-20deg);}Results
- Chrome 4.0, Safari 4.0, Opera 10.5: no issues when selecting text that has undergone a rotational transformation.
- Firefox 3.6: rendering changes (redraw) on selection of text that has undergone a rotational transformation.
- Internet Explorer 8: n/a.
Chrome 4.0 border-radius following rotational transformation test
Styles
div {
width:50px; height:50px; margin:40px; background:#000;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
transform:rotate(-20deg);
}
Results
- Chrome 4.0: bizarre artifact apparent at the top most corner. Not present at ±90, ±180, or ±270 degree rotations. Thickest at ±45, ±135, and ±315.
- Firefox 3.6, Safari 4.0, Opera 10.5: essentially rendered correctly.
- Internet Explorer 8: n/a.
Internet Explorer 8 positioned generated content test
i
Styles
p {position:relative; z-index:1; font-size:200px; font-weight:bold; line-height:1;}
p:after {content:""; position:absolute; z-index:10; top:50%; left:27px; width:10px; height:10px; background:#fff;}
Results
- Firefox 3.6, Chrome 4.0, Safari 4.0, Opera 10.5: the generated content is positioned above the text content of the paragraph
- Internet Explorer 8: the generated content is hidden behind the text content of the paragraph.