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
AFTERThis 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.