W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > July to September 2012

Re: Aging Eye Reader's Gripe of the Day

From: Wayne Dick <wayneedick@gmail.com>
Date: Wed, 18 Jul 2012 21:43:04 -0400
Message-ID: <CAJeQ8SCDf6aqtcw3Et+pHkuwrp8q638keSeLeYcwT4iXEct=Fw@mail.gmail.com>
To: Ramón Corominas <listas@ramoncorominas.com>
Cc: Russ Weakley <russ@maxdesign.com.au>, w3c-wai-ig@w3.org
It is sad that in 2012 word wrapping is any problem at all.  The
debate should be about how to implement responsive design that takes
minimum readable font size into account.  Not only should words wrap,
elements should wrap gracefully.  Three columns should decompose into
one column as font size increases.



There are so many other serious issues associated with large print, it
makes me sad to think that anyone has a problem with the necessity of
word wrapping. The problem has has been solved for so long. Along with
responsive design, data tables are a serious problem: data table and
large print are incompatible.  A readable page for an average person
with low vision page may have from 25 to 60 characters per line. If
you break that into a 10 column table there isn't much horizontal room
for meaningful text in a table cell. A new paradigm is needed.

The need for word wrapping is essential, but it is a very primitive first step.

Wayne

On 7/17/12, Ramón Corominas <listas@ramoncorominas.com> wrote:
> Another solution is to use Responsive Web Design (RWD) to adapt the
> layout to different screen sizes/text sizes. When you increase the text
> size in browsers, media queries interpret that the real width of the
> browsers has decreased, so you can offer different layouts in the same
> way that you can do for mobile devices.
>
> This way you can hide/show menus and other parts of the interface,
> change font family or size, image sizes, layout, etc. Indeed, I think
> that RWD can be great when used to improve user experience for low
> vision users.
>
> Regards,
> Ramón.
>
> Russ wrote:
>
>> 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).
>
>
>
>
Received on Thursday, 19 July 2012 01:43:33 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 5 February 2014 07:13:30 UTC