Controlling line length in Flare

By | March 11, 2016

One of my pet peeves with online help systems is how often they violate basic rules about line length in text blocks.

The rule, simply put, is this: short and long lines are hard to read. Very long lines are impossible to read.

The traditional rule in print typography says body text should be two to two and a half “alphabets” long. That’s 52 to 78 characters, including spaces.

Let’s look at some examples.

Here’s the difference between 50 characters and 70 characters:

linelength-01

These lengths work for the screen. My preference is usually the 70 to 75 range, based on online help systems I’ve created. In the 75-character sample above, created with default leading, I would likely increase the leading, to let the text “breathe” a bit.

But look at what I found in online documentation for Robohelp and Madcap Flare:

linelength-02

The 100-character is hard to read. The 134-character sample is very hard. We can increase the leading in the 134-character sample, but it doesn’t do much for legibility:

linelength-03

Now that we’ve agreed line length is important, how do we control it for online help?

There are at least two ways: using a fixed-width, single-cell invisible table (600 to 700 pixels wide, depending on the font size you’ve set) on the master topic page to constrain line length on all topic pages. I’ve used this method many times. It bulks up each page a bit with HTML, but it certainly works.

If you use this method in Flare, the page responds (up to a point) when you resize the window:

linelength-10

However you are messing with the HTML5 “responsiveness” of Flare. If it’s crucial for the help to display on mobile devices and smartphones, you do not want to use this method.

Another approach in Flare is to edit the <p> tag using the Styles Editor to short the line from the left, i.e., set a new right margin. It works, but also messes with the responsiveness of the pages.

Here is a test topic in preview mode with default Flare margins:

linelength-06

Let’s edit the style sheet so the p tag has a new right margin of 350 pixels:

linelength-07

This produces a line length of about 70 characters, which is much more readable:

One caution with this method is that resizing the window shrinks the text block dramatically:

linelength-09

So there is something of a trade-off here, between legibility and page responsiveness. I would argue that in most office environments, where staff are viewing help on medium or large monitors, the benefits of controlling line length far outweigh the disadvantages.

Leave a Reply

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