jQuery: vertical writing

I was wondering if it was possible to have a post title written vertically, but without adding manually a line break in the markup after each letter. I decided to use jQuery together with the JavaScript's methods split() and join() used on the text node of each title. First, we start with a basic blog-like structure like this:

<div id="main">

  <div class="post">
  
    <div class="post-header">
      <h2>...</h2>
    </div>
    
    <div class="entry">
    
      <p>...</p>
      
      <div class="post-metadata">...</div>
    
    </div>
  
  </div>
  
  <!--more posts-->

</div>

Now we need a couple of CSS styles to align the heading on the left and the rest of the content on the right:

#main .post {
 height: 100%;
 margin-bottom: 1em;
 overflow: hidden;
}

#main .post-header {
 background: #000;
 color: #fff;
 height: 100%;
 padding: 1em;
 width: 5%;
 float: left;
}

#main .post-header h2 {
 margin: 0;
 font: normal 4em Impact, "Arial Black", sans-serif;
 color: orange;
 text-align: center;
 text-transform: uppercase;
}


#main .entry {
 font-size: 1.2em;
 line-height: 1.4;
 width: 90%;
 float: right;
 padding-left: 1em;
}

#main .entry p {
 margin: 0 0 1em 0;
}

#main .entry .post-metadata {
 font-size: small;
 text-align: center;
 padding: 4px;
 border-top: 1px dashed;
 border-bottom: 1px dashed;
}

Now, jQuery. We need to know if the text node of the heading is made up of several words or of just one single word. Thus, we assume that a word is separated by a space from another, so we check whether the text node contains spaces or not:

$('#main div.post-header').each(function() {
  
    var header = $(this);
    var h2 = header.find('h2');
    var h2Text = h2.text();
    
    if(/\s+/.test(h2Text)) {
    
      // several words
    
    } else {
    
      // one word 
    
    }
    
});

Then we need to split the text node first into words and then into letters and create a final string glued by a br element. This string will be used to replace the content of the heading using the jQuery's html() method. We need this method because our string contains an HTML element:

if(/\s+/.test(h2Text)) {
    
      var words = h2Text.split(/\s/);
      var resultingWords = [], i, len = words.length;
      
      
      for(i = 0; i < len; i += 1) {
      
      
        var word = words[i];
        
        resultingWords.push(word);
      
      
      }
      
      
      
      var letters = [], j, len2 = resultingWords.length;
      
      
      for(j = 0; j < len2; j += 1) {
      
      
        var temp = resultingWords[j];
        
        var letter = temp.split('');
        
        var letterJoin = letter.join('<br />');
        
        
        
        letters.push(letterJoin);
      
      
      }
      
      
      
     h2.html(letters.join('<br />'));
    
    } else {
    
    
      var h2Letters = h2Text.split('');
      var h2LetterJoin = h2Letters.join('<br />');
      
      h2.html(h2LetterJoin);
      
      
    
    
}

You can see a demo below.

Demo

Live demo