Re: Aging Eye Reader's Gripe of the Day

Some comments below to take or leave  :)

Ideal line length for reading can fall roughly between 50-75  
characters per line. If lines are wider than this "optimal length, it  
is harder for the average human to read comfortably.
<http://baymard.com/blog/line-length-readability>

In your example, the content is allowed to flow completely freely -  
there is no limitation placed on the content at all. This means that  
the line length will vary depending on the users viewport (the  
viewable area within the browser of device).

The problem with this method is that if the viewport is wider than the  
optimal line length, users either have to accept this or adjust their  
browser window manually.

There are some "let the user have complete control" advocates who  
believe this is a good thing. However, when watching real users  
interact with websites, this method can cause two problems.

a. some users may grumble about having to resize their browser window  
(which means that have a less than ideal experience of the site)
b. some users have no idea how to adjust their browser window and have  
to read the content at the line-length provided.

There are some possible solutions (see below), but first a note on word-wrap.

You mention word-wrap being a potential solution. This is a CSS Text  
Level 3 property. It is not designed to control ideal line length for  
reading. It's purpose:

This property specifies whether the UA may break within a word to  
prevent overflow when an otherwise-unbreakable string is too long to  
fit within the line box. It only has an effect when ?text-wrap? is  
either ?normal? or ?avoid?.

<http://www.w3.org/TR/2011/WD-css3-text-20110215/#word-wrap>

So, if this is not the solution, what is?

One way to limit the line length is to use a combination of  
"max-width" and "EM" units.

EXAMPLE 1

Below is a link to an example layout (the "control" layout) showing  
content flowing freely - with no max-width applied. Depending on your  
browser window, the lines could contain anywhere from 30 characters  
(for mobile devices) to upwards of 200 characters (for wide screen  
devices). The example has a small red square for every 10 characters,  
so you can see how many characters appear on each line. If you resize  
the window inwards, the line boxes will shorten and the number of  
characters on each line will be less.

<http://maxdesign.com.au/jobs/example-line-length/sample1.htm>

EXAMPLE 2

Below is a link to an example where the overall container has been  
given a max-width value. This will allow the content to go as narrow  
as needed, but the content will spread out only as far as the optimal  
line length.

<http://maxdesign.com.au/jobs/example-line-length/sample2.htm>

The line-length is controlled using a simple rule:

.container { max-width: 32em; }

The max-width property is not supported by earlier versions of IE, but  
there are work-arounds:

<http://www.svendtofte.com/code/max_width_in_ie/>

The great thing about using EM units is that this optimal line length  
will work if the user has their default font-size set to a large size.

EXAMPLE 3

Below is a link to an example that shows the same layout as example 2,  
but with the default font-size set to 150%.

<http://maxdesign.com.au/jobs/example-line-length/sample3.htm>

An even better approach may be to use max-width as a base level  
solution and then provide ways that allow users to adjust the layout  
to suit their own needs (such as wide, narrow, reversed colours etc).

HTH
Russ


Quoting "GF Mueden@" <gfmueden@verizon.net>:

> Here is an example of a page that uses word wrap well.
>
> http://blindness.growingstrong.org/eyes/lvres.htm
>
> It allows me to pull in the margins (for a narrow field) and enlarge  
> (for poor acuity) and it keeps the copy on the screen as the  
> adjustments are changed.

Received on Sunday, 15 July 2012 01:51:58 UTC