CSS - A good way to make stepped text?

Question

Is there a good way to achieve the following, without any extra charge? It would be nice to use JavaScript.

Any idea?

Thank!

Edit:

My markup would look something like this:

<div style="width: 400px;"> <p>Text text text Text text text Text text text</p> </div> 

Answer 1

For a given text element, use a text range to find the end of the first line, and then wrap the remaining text in a child div. Repeat recursively using the child div for the next iteration.

This works cross browser: http://jsfiddle.net/gilly3/CmguZ/4/

This is easiest in IE thanks to textRange.moveToPoint(x, y) :

 function indent(div) { var rng = document.body.createTextRange(); rng.moveToElementText(div); var x = rng.getBoundingClientRect().right; rng.collapse(); var rect = rng.getBoundingClientRect(); var y = rect.bottom; rng.moveToPoint(x - 1, y - 1); rng.moveEnd("textedit"); var html = "<div class=\"indent\">" + rng.text + "</div>"; rng.pasteHTML(html); div = $(".indent", div)[0]; rng.moveToElementText(div); var pos = rng.getBoundingClientRect(); if (pos.bottom > rect.bottom) { indent(div); } } 

In other browsers, you need to iterate over the text to find where the line wraps around:

 function indent(div) { var rng = document.createRange(); rng.selectNodeContents(div); var len = rng.toString().length; var start = rng.toString().search(/.\s/); if (start < 0) return; var txt = div.childNodes[0]; rng.setEnd(txt, start); var startRect = rng.getBoundingClientRect(); var rect; for (var i = start + 1; i < len; i++) { rng.setEnd(txt, i); rect = rng.getBoundingClientRect(); if (rect.bottom > startRect.bottom) { rng.setStart(txt, i-1); rng.setEnd(txt, len); div = document.createElement("div"); div.className = "indent"; rng.surroundContents(div); indent(div); break; } } } 

Answer 2

In jQuery, you would do something like this:

 var text = $('p').hide().html().split(' T'); text[1] = 'T' + text[1]; text[2] = 'T' + text[2]; $(text).each(function(index) { var elem = $('<span>' + this + '</span>'); elem.css({ position: relative; left: (index * 10) + 'px' }); $('p').after(elem); }); 

This should insert every range (which contains the text of the text text) after the paragraph element, while the second and third elements are shifted by 10 and 20 pixels respectively (change the math according to your needs). It's dirty, but anything.

You will be much better at MUCH by simply changing your layout and style.