SEO

October 9, 2011

Giantess Arabic Book Noir Typo

http://www.arabictypography.com/media/.nivo/50/192.jpg
via arabictypography.com

via arabictypography.com ...»See Ya
at

Arabic Wedding Stripper Typo

Media_httpwwwarabicty_yjzis
via arabictypography.com

via arabictypography.com ...»See Ya
at

Arabic Lingerie Typography

http://www.arabictypography.com/media/.nivo/60/261.jpg
via arabictypography.com

via arabictypography.com ...»See Ya
at

Arabic Punk Typography

http://www.arabictypography.com/media/.nivo/69/314.jpg
via arabictypography.com

via arabictypography.com ...»See Ya
at

Facebook Today *1st ALL H1* EDITION

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

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;}

Demo: Glossary format definition list

Cheese

Velit esse cillum dolore in reprehenderit in voluptate duis aute irure dolor. Consectetur adipisicing elit, excepteur sint occaecat sunt in culpa. Velit esse cillum dolore eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat.

Mollit anim id est laborum. Ut enim ad minim veniam, consectetur adipisicing elit, ullamco laboris nisi. Lorem ipsum dolor sit amet, sunt in culpa quis nostrud exercitation.

yummy!
Building flexibility through spreading knowledge and self-organization, exploiting the productive lifecycle to experience a profound paradigm shift. Through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard.
balderdash
poppycock
Aardvark
never hurt anyone

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.

Text Message · RSS Sent Today   Jeff Petersen , 주아란 , and Shea-Lynn Brody Gyllenhaal commented on 주아란 's photo of you. 4:08am   주아란 likes your comment : "i'm sick of antinelli's can you take me..." 3:31am   주아란 likes your comment : "look anything to keep me away from..." 3:31am   주아란 likes your comm ...»See Ya
at

Subscribe to: Posts (Atom)