example.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!doctype html>
  2. <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
  3. <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
  4. <!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
  5. <!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
  6. <!--[if gt IE 8]><!-->
  7. <html class="no-js" lang="en"> <!--<![endif]-->
  8. <head>
  9. <meta charset="utf-8">
  10. <title>Typogr.js example</title>
  11. <meta name="description" content="Typogr.js example">
  12. <meta name="author" content="Eugene Kalinin">
  13. <link rel="stylesheet" href="style.css">
  14. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Alice|Volkhov">
  15. <style>
  16. .amp {
  17. color: #666;
  18. font-family: "Alice";
  19. font-size: 150%;
  20. font-style: italic;
  21. }
  22. .dquo {
  23. font-family: "Volkhov";
  24. margin-left: -.5em;
  25. font-size: 1.5em;
  26. }
  27. footer {
  28. font-family: "Alice";
  29. }
  30. header {
  31. font-family: "Alice";
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="container">
  37. <header>
  38. <h1>
  39. This is an example of using
  40. <a href="https://github.com/ekalinin/typogr.js">Typogrify utils for JavaScript &raquo;</a>
  41. </h1>
  42. </header>
  43. <div class="post">
  44. <h2>Untypogrified</h2>
  45. <div id="src">
  46. <h3>"Jayhawks" & KU fans act extremely obnoxiously</h3>
  47. <p> By J.D. Salinger, Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  48. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Excepteur
  49. sint occaecat 'cupidatat' non proident" sunt RFID22 in....
  50. </p>
  51. <p>
  52. The tea--with cardamom and other spices--was delicious and fragrant.
  53. </p>
  54. </div>
  55. </div>
  56. <div class="post">
  57. <h2>Typogrified</h2>
  58. <div id="res" />
  59. </div>
  60. <footer> <a href="https://github.com/ekalinin">Eugene Kalinin </a> &#169; 2011 </footer>
  61. </div>
  62. <!-- JavaScript here ... -->
  63. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  64. <script src="../typogr.js"></script>
  65. <script>
  66. $(document).ready(function() {
  67. $('#res').html(
  68. typogr.typogrify( $('#src') )
  69. );
  70. })
  71. </script>
  72. </body>
  73. </html>