Tag cloud of random sizes in pure CSS

Published on 11/2/2015

Last week I faced a need to make a fake tag cloud, where the words need to be of different size. This was needed for a presentation slide, and as my slides are always in HTML/CSS, must be implemented with these technologies. It is always possible to inject some JavaScript and code anything. But what about pure CSS, do we get random sizes there?

  • performance testing
  • stress testing
  • conformance testing
  • acceptane testing
  • smoke testing
  • regression testing
  • white box testing
  • functional testing
  • system testing
  • black box testing
  • load testing
  • compatibility testing
  • unit testing

The tag cloud you see above is what I get. You may notice it's not real random; after refreshing you will always get the same result. But still looks like a tag cloud of different sizes and works perfectly as an example.

This is a list, it's easy to generate from markdown:

<ul class="cloud">
    <li>performance testing</li>
    <li>stress testing</li>
    <li>conformance testing</li>
    <li>acceptane testing</li>
    <li>smoke testing</li>
    ...
</ul>

Then, flattened as usual:

.cloud {
    display: inline;
    list-style-type: none;
    width: 400px;
}
.cloud li {
    list-style: none;
    display: inline;
}

And then different sizes are made with a few nth-of-type combined in different variants:

.cloud li:nth-of-type(3n + 1) {
    font-size: 1.25em;
}
.cloud li:nth-of-type(4n+3) {
    font-size: 1.5em;
}
.cloud li:nth-of-type(5n - 3) {
    font-size: 1em;
}

I tuned the nth-of-type values so that it would look nicely. Depending on the length of the words used, you may need to play arownd with the values and maybe use more than 3 sizes.