Jeg har laget noen typografi tester, hvor fontene er styrt av css.

Testene er inspirert av en artikkel i smashingmagazine.com :

http://www.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/

There has been an increasing and sincere interest in typography on the web over the last few years. Most websites rely on text to convey their messages, so it’s not a surprise that text is treated with utmost care. In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.

Wordbreak

etlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrom

enlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomrom

CSS for testen:

.typo {word-wrap: break-word;text-wrap:normal;}

Text overflow

Original tekst:

etlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometetlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometetlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometetlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometetlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometetlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrom

CSS for testen:

.typobox {
white-space: nowrap;
width: 100%;
height:40px;
overflow: hidden
;-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

Relaterte eksterne lenker:

• CSS3 Text (Editor’s Draft), W3C
• Hyphenation, W3C
• CSS3 Fonts, W3C
• The Elements of Typographic Style Applied to the Web
• Five Simple Steps to Better Typography
• Type Experiments with HTML
• Styling a Poem With Advanced CSS Selectors
• CSS3: Examples and Best Practices

Leave a Reply