last dogmeat edit and first

{block:NotSearchOrTag}

{block:SearchBox searchbox_button="searchbox_button" searchbox="searchbox"/} {/block:NotSearchOrTag} {block:HasPages}

{block:Pages}
• {Label}
{/block:Pages}

{/block:HasPages} {block:HeaderImage}

{Else}

{Title}

{block:Description}

{Description}

{/block:Description} {/block:HeaderImage}

{block:ShowOrList} {block:Show} ← Back to Dogmeat {/block:Show} {/block:ShowOrList} {block:Tag}

Dogmeatag: {Tag}

See all posts on Posterous with this tag »

{block:ShowOnHover action_id="extra_links" hidden_div="global_tags"/} {/block:Tag} {block:SearchPage}

{block:SearchResultOne}One result found searching for{/block:SearchResultOne} {block:SearchResultMany}{SearchResultCount} results found searching for{/block:SearchResultMany} {block:SearchResultNone}No results found searching for{/block:SearchResultNone}

• Sort by:
• {block:SearchSortBestmatch}Best match{Else}Best match{/block:SearchSortBestmatch}
• {block:SearchSortRecent}Most recent{Else}Most recent{/block:SearchSortRecent}
• {block:SearchSortInteresting}Most interesting{Else}Most interesting{/block:SearchSortInteresting}

Search all of Posterous for {SearchQuery} » {/block:SearchPage} {block:List}

{block:Posts}
• {block:PostImage size='180' dimension='width'} {Else} {block:BodyExcerpt strip_tags="true"} {BodyExcerpt} {/block:BodyExcerpt} {/block:PostImage} {Title}
{/block:Posts}

{/block:List} {block:Show} {block:Posts} {block:Private}

Private Post

{/block:Private} {block:Title}

{Title}

{/block:Title}

{block:EditBox} {EditBoxContents} {/block:EditBox}

New CSS2.1 and CSS3 bugs in modern browsers

By Nicolas Gallagher

Browser bug demo page for CSS typography experiment.

Examples of some differences in the handling of :first-letter, :first-line, transform:rotate(), and absolutely positioned generated content by Firefox 3.6, Chrome 4.0, Safari 4.0, Opera 10.5, and Internet Explorer 8.

:first-letter test 1

typography

Styles

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.

You can find me on twitter.

{block:ShowOrList} {block:NewDayDate} Posted {TimeAgo} {/block:NewDayDate} {block:Author} {block:AuthorUser}

by {AuthorName} {/block:AuthorUser} {/block:Author} Marc Campbell has viwed this post| {PostViews}0 times

{block:TagList} Filed under: {block:TagListing} {TagName}  {/block:TagListing} {/block:TagList} {/block:ShowOrList} {block:Sharing} {block:Tweet /}

{block:FbLike /}

{/block:Sharing} {block:Responses /} {/block:Posts} {/block:Show} {block:Pagination} {block:PreviousPage} ← Previous {/block:PreviousPage} {CurrentPage} of {TotalPages} {block:NextPage} Next → {/block:NextPage} {/block:Pagination}

{OwnerName}

{Profile}

Dogmeat RSS

{block:Subscription}{/block:Subscription}

Subscribe via RSS {block:HasLinks} {block:LinkCategories}

{Label}

{block:Links}
• {Label}
{/block:Links}

{/block:LinkCategories} {/block:HasLinks}

{block:TagList}

Tags

{block:TagListing collapsible="true" count="10" action_id="see_more_tags"} {block:TagListingMore}
• View all {NumTags} tags ↓
{/block:TagListingMore} {block:TagItem}
• {TagName} ({TagCount})
{/block:TagItem} {block:TagItemSelected}
• {TagName} ({TagCount})
{/block:TagItemSelected} {/block:TagListing}

{/block:TagList} {block:HasArchives}

Arc

{ArchiveDateYear} ({ArchiveYearCount})

{block:Archive}

{ArchiveMonth}({ArchiveCount})

{/block:Archive}

{/block:ArchiveYear}

{/block:HasArchives}

{block:Contributors}

Cunts

{block:Contributor collapsible="true" count="10" action_id="see_more_contributors"} {block:ContributorMore}
• More {NumContributors} Cunts
{/block:ContributorMore}
• {ContributorName}Meat
{/block:Contributor}

{/block:Contributors}

Weirdopedia says: "Weird" http://weirdopedia.posterous.com/last-dogmeat-edit-and-first {block:NotSearchOrTag} {block:SearchBox searchbox_button="searchbox_button" searchbox="searchbox"/} {/block:NotSearchOrTag} {block:HasPages} {block:Pages} {Label} {/block:Pages} {/block:HasPages} {block:HeaderImage} {Else} {Title} {block:Description} {Description} {/block:Description} {/block:Header ...