DummyText – an easy way to fill your webpages with content

For designers, a big hassle is filling your webpages with content. Pages are normally designed for at least some content, and a page with no headers and no text looks odd if not disastrous. As a result, designers often find themselves entering random text that looks bad, “ajdf;aewu el; lja d;e lj ew a ;ldejl j.” It doesn’t look much like real text, does it? Clearly, it could be cleaned up. But who wants to waste time on this when you have more pressing (and edifying) things to do. In addition, entering this kind of text clutters up your code and makes it difficult to change.

This is where DummyText.com comes in.

It is a simple and free service that allows you to add small bits of markup that automatically add lorem ipsum to your webpages. But more than that, it provides you with complete control. You can set the number of sentences in a paragraph and how long the sentences should be. But it isn’t regimented. You can also set the level of variation between sentences. And you can code so that you don’t need multiple tags. Want 6 paragraphs? One tag will do!

All that is required to use DummyText.com is to include a JavaScript link at the end of your page. And the rest is done for you.

DummyText example

An example will go a long way to explaining how it works. Here is a webpage that includes a header, two paragraphs, an ordered list, and one final paragraph. See how easy it is:

<h3 data-dummytext="-w1-s5"></h3>
<div data-dummytext="p-x2-w20-s10-v100"></div>
<ol data-dummytext="li-x3-w4-v30"></ol>
<p data-dummytext="-x1-w20-s10-v100"></p>

<script src="http://dummytext.com/dt-1.0.min.js" type="text/javascript"></script><noscript>Powered by <a href="http://dummytext.com">DummyText.com"></a></noscript>

DummyText syntax

There are few things worth noting about this before displaying the output. First, all the tags use the data-dummytext attribute. And it is given a little program that looks something like an AWK or sed program. Commands are separated by hyphens. If the command string doesn’t start with a hyphen, then the first command tells the code what kind of tag to use. In our example, there are p tags placed inside of a div tag and li tags places inside of an ol tag.

The commands are easy to understand too:

• -x*
  • How many items to display.
• -w*
  • The total number of words to use.
• -s*
  • The length of sentences.
• -v*
  • The percentage of variation applied to the total number of words, number of sentences, and sentence lengths.

DummyText in action

Because we have included very large variation values, this example will change quite a lot each time you refresh it. But you can easily change that to something smaller (or even zero) if you want a more stable look.

And that’s all there is to it! It provides an amazing amount of power with very little work and without cluttering up your code.