title: JavaScript to avoid widows
body: <p>A common problem when working with typography in HTML/CSS is something we call "horunge" in Swedish ("<a href="http://en.wikipedia.org/wiki/Widows_and_orphans">widow</a>" in english).</p>
  
  <p><strong>What it is:</strong></p>
  
  <p>Let's say you have a box with a width of 200px and with the text "I love typograpy very much". Now the text breaks and becomes:</p>
  
  <blockquote>
    <p>I love typography very<br>
    much</p>
  </blockquote>
  
  <p>As a designer I don't want a word bastard (single word / row). If this was a document/PDF etc. I would break the word before very and look like this:</p>
  
  <blockquote>
    <p>I love typography<br>
    very much</p>
  </blockquote>
  
  <p>which looks much better.</p>
  
  <p>Can I solve this with a CSS rule or with a javascript? The rule should be to never let a word stand empty on a row.</p>
  
  <p>I know it can be solved by adding a <code>&lt;br /&gt;</code> but that's not a solution that works with dynamic widths, feed content, different translations, browser font rendering issues etc.</p>
  
  <p><strong>Update (solution)</strong>
  I solved my problem with this jquery plugin: <a href="http://matthewlein.com/widowfix/">http://matthewlein.com/widowfix/</a></p>