PageRenderTime 89ms CodeModel.GetById 23ms RepoModel.GetById 0ms app.codeStats 0ms

/hatchshow-a-jquery-typesetting-plugin/index.html

https://github.com/charliepark/charliepark.github.com
HTML | 77 lines | 66 code | 10 blank | 1 comment | 0 complexity | 9b11155d2a2b80a749c2eaa3efdc9b70 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. 	<meta charset="utf-8">
    5. 

  5. 	<meta name="description" content="A jQuery typesetting plugin I wrote. It balances measures. Named for the poster shop. (from Charlie Park)">
    6. 

  6. 	<link rel="alternate" href="http://charliepark.org/feed/" type="application/rss+xml">
    7. 

  7.   <meta name="viewport" content="width=device-width">
    8. 

  8.   <meta name="apple-mobile-web-app-capable" content="yes">
    9. 

  9.   <link rel="openid2.provider" href="https://www.google.com/accounts/o8/ud" /> 
    10. 

  10.   <!--  old OpenID credentials; keep around for a bit longer <link rel="openid.server" href="http://charliepark.mp/server" /> <link rel="openid.delegate" href="http://charliepark.mp/"> -->
    11. 

  11. 	<title>HATCHSHOW.js</title>
    12. 

  12. 	<link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css">
    13. 

  13. </head>
    14. 

  14. <body>
    15. 

  15. 	<header>
    16. 

  16. 		<h2 class="site_title"><a href="/">Charlie Park</a> <span style="color:#ccc;font-size:19px;"></span></h2>
    17. 

  17. 		<ul id="nav"><li class="nav_list_item" style="text-align:left"><a class="nav_list_link" href="/about">about me</a></li><li class="nav_list_item" style="left:2px;"><a class="nav_list_link" href="/projects">projects</a></li><li class="nav_list_item" style="text-align:right"><a class="nav_list_link" href="/archives">archives</a></li></ul>
    18. 

  18. 	</header>
    19. 

  19. 	<section id="main_content">
    20. 

  20. 		<h1 class="post_title">HATCHSHOW.js</h1>
    21. 

  21. 	<div class="meta_wrapper"><time datetime="2012-10-02">October  2, 2012</time><ul class="tag_list_in_post"><li class="inline tag_list_item"><a class="tag_list_link" href="/tag/a thing I made">a thing I made</a></li><li class="inline tag_list_item"><a class="tag_list_link" href="/tag/jQuery">jQuery</a></li><li class="inline tag_list_item"><a class="tag_list_link" href="/tag/front-end stuff">front-end stuff</a></li></ul></div>
    22. 

  22. 	<p><img src="http://charliepark.org/images/hatchshow-a-jquery-typesetting-plugin/hatchshowprint_jc.jpg" style="margin:0 auto" /></p>
    23. 

  23. 

  24. <p>I’ve always loved the posters from <a href="http://countrymusichalloffame.org/historical-posters/">HATCH SHOW PRINT</a>. You can see one above. See how they expand the type size until it fills the line? (“Johnny” is a smaller size than “Cash”, and “the fabulous” is even smaller.) I love that.</p>
    25. 

  25. 

  26. <p>About a year ago, I was working on Monotask and wanted to make a way to dynamically create text that resized, based on the width of its container and the amount of text on the line. Typesetting and JavaScript are two of my favorite things … why not combine them? So I made a jQuery plugin: <a href="http://charliepark.org/hatchshow/">HATCHSHOW.js</a> I put a page up for it, and shared it on Twitter, but I realized I never posted it here on the blog. So this is a post to rectify that.</p>
    27. 

  27. 

  28. <p>Click on the image here to go check out <a href="http://charliepark.org/hatchshow/">HATCHSHOW.js</a>.</p>
    29. 

  29. 

  30. <p><a href="http://charliepark.org/hatchshow/"><img src="http://charliepark.org/images/hatchshow.png" alt="A Johnny Cash concert poster." /></a></p>
    31. 

  31. 

  32. <p>The plugin is really simple. All you do is wrap the “lines” you want the effect applied to with a &lt;span class=”hsjs”&gt;, and it does the rest. You’ll probably want to make a few adjustments for the line height and for individual kerning adjustments. But the plugin does most of the work.</p>
    33. 

  33. 

  34. <p>As you’ll see if you check out the <a href="http://charliepark.org/hatchshow/">HATCHSHOW</a> page, the font-size for every letter on that page was generated dynamically. Cue theremin: By an <em>algorithm</em>. (Ooooo!)</p>
    35. 

  35. 

  36. <p>The more astute among you are probably saying “Yeah, but this is the same thing <a href="http://fittextjs.com/">Fittext.js</a> does, isn’t it?” Good question, but no. Fittext is for a single line — a headline or the name of the page / service / whatever. HATCHSHOW is intended for multi-line displays, kind of like what you see in that concert poster up top.</p>
    37. 

  37. 

  38. <p>If you build anything cool with it, be sure to let me know! And if you want the code, it’s right on <a href="http://charliepark.org/hatchshow/">the HATCHSHOW page</a> (click on the “check out the code” link at the bottom, then scroll down).</p>
    39. 

  39. 

  40. <p>Have fun!</p>
    41. 

  41. 

  42. 	<footer>
    43. 

  43. 	<p class="next_actions">I would really enjoy connecting with you <a href="http://twitter.com/charliepark/">on Twitter</a><br>(but I&rsquo;m taking a little break from it at the moment).</p>
    44. 

  44. 	</footer>
    45. 

  45. 	</section>
    46. 

  46. 	<aside id="sidebar">
    47. 

  47. 	 <h3>My Most Popular Posts</h3>
    48. 

  48. 	 <p>You&rsquo;ll like these.</p>
    49. 

  49. 	 <ul>
    50. 

  50. 	   <li><a href="/slopegraphs">Slopegraphs</a></li>
    51. 

  51. 	   <li><a href="/a-slopegraph-update">A Slopegraph Update</a></li>
    52. 

  52. 	   <li><a href="/beautiful-buttons-for-twitter-bootstrappers">Beautiful Buttons for Twitter Bootstrappers</a></li>
    53. 

  53. 	   <li><a href="/tags-in-jekyll">Tags in Jekyll</a></li>
    54. 

  54. 	 </ul>
    55. 

  55. 	</aside>
    56. 

  56.   <script type="text/javascript">
    57. 

  57.     var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    58. 

  58.     document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    59. 

  59.   </script>
    60. 

  60. 	<div id="search"><div id="cse" style="width: 100%;">Loading</div></div>
    61. 

  61. 	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    62. 

  62. 	<script type="text/javascript"> 
    63. 

  63. 	  google.load('search', '1', {language : 'en'});
    64. 

  64. 	  google.setOnLoadCallback(function() {
    65. 

  65. 	    var customSearchControl = new google.search.CustomSearchControl('003013616125562838920:lezwpvqsqgo');
    66. 

  66. 	    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    67. 

  67. 	    customSearchControl.draw('cse');
    68. 

  68. 	  }, true);
    69. 

  69. 	</script>
    70. 

  70.   <script type="text/javascript">
    71. 

  71.     try {
    72. 

  72.       var pageTracker = _gat._getTracker("UA-15921981-1");
    73. 

  73.       pageTracker._trackPageview();
    74. 

  74.     } catch(err) {}
    75. 

  75.   </script>
    76. 

  76. </body>
    77. 

  77. </html>
    78.