Web Tools: Filler Text

A few days back, Alessandro Fulciniti, over at Web Graphics, had a great idea: wouldn't it be nifty to auto-fill HTML documents with filler text?

Here's the scenario:

You're designing a web application or site, and you need to flow-in some text to test your design. Do you manually flow-in text and then manually back it out? Or do you have a script to do the flowing for you?

Alessandro (and I agree) voted for the later.

Alessandro's script is lean, clean, and useful, but it required that you add/change ID tags for each element into which you wish to flow text. Which is a serious draw-back, in my opinion, as many designers use IDs extensively, and having to change each of these just to test something seemed unwieldy.

I got to thinking... what we really need is something that is easy to use and _doesn't_ impact the bones of the template in question. So I chatted with a couple of friends of mine: Aaron Shafavoloff and Paul Huff, and we came up with what we think is a better implementation of Alessandro's excellent idea.

It still uses javascript, which is faithful to the idea of separating form, function, and content... you insert a link to the javascript file (I wish Blogger hosted small files) in the header, as usual. And then you insert a short tag whereever you want filler text. I'll discuss the tag itself in a moment... but first I should answer a question that struck me early-on: what value does a javascript and a small tag have over just cutting-and-pasting?

I guess it depends on your workflow... but I already insert small holder text in all of my templates... "[PAGE TITLE]", "[BODY TEXT]", and so on... so swapping those (which have limited use) for another short tag which will give me a lot more functionality seems like a no-brainer.

So what does the tag look like?

[FILLER TEXT (recipe)]

It's two square brackets filled with the prefix "FILLER TEXT" (it's case-sensitive, but you can change the string in the javascript file), followed by a recipe for generating the text itself. The recipe follows a basic syntax:

(#(TAG(.class)))x(#w)

Here are some examples:

• [FILLER TEXT]


• [FILLER TEXT 25w]


• [FILLER TEXT 3 x 25w]


• [FILLER TEXT 3P x 25w]


• [FILLER TEXT 3P.body x 25w]


• [FILLER TEXT 3P.body]

[FILLER TEXT] gives you a random amount of text. That's it. Reload the page, and the text changes.

[FILLER TEXT 25w] gives you a 25 word phrase pulled randomly from passage in the javascript.

[FILLER TEXT 3 x 25w] looks for the parent element and repeats that element three times in a row, filling each with a 25 word phrase pulled randomly from passage in the javascript. If the parent element is BODY, then it assumes that you meant to place it in a PARAGRAPH, and will flow three PARAGRAPHs with a random 25-word phrase.

[FILLER TEXT 3P x 25w] creates three PARAGRAPH elements, filling each with a 25 word phrase pulled randomly from passage in the javascript.

[FILLER TEXT 3P.body x 25w] creates three PARAGRAPH elements with the class of "body", filling each with a 25 word phrase pulled randomly from passage in the javascript.

[FILLER TEXT 3P.body] fills three body PARAGRAPHs filled with a random amount of text.

Of course, you could insert any ELEMENT, or any ELEMENT.class, or any quantities... all that is required is that the items be in-order — (element declaration) followed by (word count); that the word count be followed by a "w"; that the two declarations are separated by an "x"; and that the whole shebang is prefaced by FILLER TEXT (case sensitive).

And the great thing is that these can be easily grepped and ripped-out when testing is done.

Here's a (very) basic test HTML document: BEFORE and AFTER

This is the first public beta... so test away, and let us know if you have any problems.

UPDATE: The previous links have been updated to reflect a new home for the files. Should these ever fail, you can always find the Filler Text project at SourceForge.