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">
    <div class="entry">
      <div class="post-metadata">...</div>
  <!--more posts-->


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];
      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 />');
     h2.html(letters.join('<br />'));
    } else {
      var h2Letters = h2Text.split('');
      var h2LetterJoin = h2Letters.join('<br />');

You can see a demo below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.