Question

Recently I’ve went through half a dozen jQuery plugins which do “typewriter” effects on text but none of them seem to support line breaks. If you’re not sure what this is, I mean something like this:

http://haydndemos.awardspace.co.uk/typewriter1.html

Basically I have text in a paragraph element and there’s line breaks. However whenever I get one of the typewriter plugins working on my paragraph element, the typewriter plugin doesn’t type out line breaks and so everything is in one big line which wraps to the next line. For example, suppose this was the text I wanted the typewriter to type out:

test1
test2
test3

It ends up typing out:

test1 test2 test3

Also, some other typewriter plugins were unreliable as they only did typewriter text on li/ul elements, not paragraph elements.

The closest I got was this, which does support line breaks, but it isn’t free:

http://codecanyon.net/item/fancy-typewriter-jquery-plugin/full_screen_preview/158664

(I know for a fact this supports line breaks because I saved the webpage and modified the paragraph, however the Fancy Typewriter script only works locally and not when on a server, so it’s probably copyright protected… plus I don’t want to violate any copyrights.)

Thanks!

Answer 1

I bet most of these will be adding the white-space correctly but it’s not treated as <br> tags.

Which can be solved in two ways:

1. If you can easily access the text, and do something like myText.replace('\n', '<br />');
2. Or using CSS to make line breaks show as expected breaks without requiring <br>.
   which is something like (in CSS) #my-result { white-space: pre; }` for example.

Actually, writing your own typewriter is easy and doesn’t require plugins, I have written a small proof of concept for you here: http://jsfiddle.net/Meligy/jDQnB/