Tuesday, November 22, 2005

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:


Here are some examples:


  • [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.


Anonymous said...

Great idea! I didn't really understand until I viewed the source on the example page... then I was like "wow!" This is a very straightforward way to test a web template (good ideas always seem simple in hindsight).


Silus Grok said...

Thanks, Winfield... I've updated the post with a "BEFORE" and "AFTER" link to make seeing the source more straight-forward.

Anonymous said...

The code does some DOM magic and a whole lot of regexp-ing. It's pretty ugly, since I added a new regexp for each different syntax. I'm certain there's a better way of writing the parsing function.

Basically, I walk the whole dom recursively, and check to see if the innerHTML of each node contains only the [FILLER TEXT blah] syntax. If it does, I pass the node on to the parser which then generates the content appropriately. That's where most of the real work and ugliness happens :)

I don't believe the script is capable of giving more than 9999 words of random text in a row, because of the way that javascript's Math.random works (i.e. generates a float between 0 and 1) I had to multiply by something. 100 seemed to small. 1000 seemed to big, but... oh well. :)

Silus Grok said...

Nate Steiner over at Web-Graphics asked me to post about FILLER TEXT over at Web-Graphics... so now there's a short post over there.

Anonymous said...

Sweet, absolutely sweet, but...
what about a clickable "add more text" button and taking a step further:
As #1 reply (Anders Rasmussen ) said over at "web-graphics.com":
a RemoveFillerLink() function as the cherry on top :-) <-- that would just be the cats meow, a combo of both your non id simplicity and "Alessandro's" add/remove button. that'd'be a double w00t!

Silus Grok said...

A remove text idea... hm...

: )