Leader Dots with CSS

You’re probably asking yourself, “What are leader dots?”. Whenever I design forms, I’ve always felt that the text labels should either be left justified and lined up next to the form fields they correspond to, or directly above them. It’s just one of those things. Even when presenting data that is suited to form or tabular data where the name of a field and the contents are both to be displayed, I can’t accept seeing the fields another way, particularly right justified so they but up against the data, or data entry fields.

For example, take this example of a typical form:
example 1

Nothing wrong there, except that if just one of the field labels, in this case the initial password text, is longer than the other fields, the space between the other fields and their associated labels also becomes very large and you end up with this visual dead space. Of course, you could force the text to wrap by either breaking it up with markup or by imposing a width on the table cells, like this:
example 2

Again visually this is undesirable because of the opposite reason — instead of empty dead space we’re crowding text together in too little space. My least favorite option is bumping the text over to be next to the field that it belongs to, like this:
example 3

Technically there is nothing wrong with this, but visually it’s irritating. It’s almost like reading movie credits where there are two columns, the left one right justified and the right one left justified. My eyes don’t follow the flow of word logically and odds are my visitors are the same.

My solution? Borrow a page from the print world and use leading dots. Leading dots are those dots you often see in a table of contents where the space between the text and the page number is filled in with small dots. My problem was how to come up with a simple system and make it pass validation at the same time. After some trial and error I came up with a simple CSS solution that does the trick nicely. Here’s a quick example:

example 4

How is this done? Basically field label is wrapped in a div which has a small image of a dot applied repeatedly in the x direction as a background. This alone would cause the dots to flow under the text so to nullify that effect, the text itself is then wrapped in a span where the background color is set to match the color of the background of the containing element. Here is the CSS:

.dots {
background:url('dot.gif') repeat-x bottom;
}
.field {
background-color: #FFFFFF;
}

To apply this to the example form, you would just use it as: <td><div class="dots"><span class="field">Last Name</span></div></td>

This method could even be applied to displaying the data from a form or database like so:example 5

6 thoughts on “Leader Dots with CSS”

  1. Trying to implement leading dots on a site with a text over textured background, so I can’t set background-color – any ideas how to implement this so that the text isn’t simply covering up the background dots?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>