Component idea: The string collapser (does this exist?)

[Greg Gay]

Hi Jon
Currently we manually set the character width of text to 23 characters 
for example, to fit the content navigation menu, and increment the value 
for sub menu items so they get truncated to 21 characters, 19 
characters, etc. But, we do set the width of the menu to an absolute 
value, which works fine with this strategy, but is not ideal from an 
accessibility perspective.

What we would like to do is have the truncation resize automatically 
when the width of the menu changes, so on wider windows more of the text 
is visible, or less when the window size decreases. Ideally we'd like to 
set the menu size to a relative measure, so its width expands and 
contracts at the same rate as the rest of the content on the screen when 
a window is resized.

In terms of screen reader behaviour, my guess is that if the title text 
remains the untruncated text, by default JAWS for instance, will pick up 
the longer of the two, text or title. At least that's how it works with 
the current strategy we use. Not sure if that would be the same with 
dynamic truncating, so yes it would probably be worth testing with at 
least JAWS, and probably NVDA and Window Eyes to see how they behave.

greg


On 11-06-03 12:03 PM, Jonathan Hung wrote:
> Hi Greg,
>
> I did some searching (thanks to a tip from our friend Joel), and 
> discovered this which summarizes the issue pretty well:
> http://mattsnider.com/css/css-string-truncation-with-ellipsis/
>
> Basically there's a CSS3 attribute called text-overflow, but it's not 
> implemented in Firefox. To see an example of this in action, see:
> http://www.w3schools.com/css3/tryit.asp?filename=trycss3_text-overflow_hover
>
> Also, there's a jQuery plugin that does this but supported in Firefox 
> only:
> http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/
>
> However, the CSS solution lacks the ability to specify where the 
> ellipsis appears in the string, and possibly less flexibility of 
> handling the revealing of overflowed text. Also I don't know what the 
> behaviour is like in a screen reader, so maybe this is worth 
> investigating?
>
> - Jonathan.
>
> ---
> Jonathan Hung / jhung at ocad.ca <mailto:jhung.utoronto at gmail.com>
> IDRC - Interaction Designer / Researcher
> Tel: (416) 977-6000 x3959
> Fax: (416) 977-9844
>
>
>
> On Fri, Jun 3, 2011 at 10:00 AM, Greg Gay <greggay at rogers.com 
> <mailto:greggay at rogers.com>> wrote:
>
>     Hi Jon
>     I second that idea.
>
>     This is exactly what we've been looking for for ATutor, for doing
>     things like truncating page titles in our content navigation menu,
>     expanding and contracting page descriptions, and a few other spots
>     where text doesn't quite fit in the space available.
>
>     greg
>
>
>
>     On 11-06-02 04:27 PM, Jonathan Hung wrote:
>
>         Hi everyone,
>
>         In designing the new Image Uploader demo, I realized that
>         adding a filename as a caption to the uploaded images would
>         not be possible because the string may be too long. This issue
>         is similar to FLUID 962
>         (http://issues.fluidproject.org/browse/FLUID-962) where long
>         filenames in the file queue create unwanted disappearance of text.
>
>         It would be nice to have a component that handles the
>         expanding and collapsing of text.
>
>         Features:
>         - Specify the splitting of long strings of text after X chracters.
>         - Specify the appearance of an ellipsis at the middle or end
>         of the string.
>         - Expand or contract the string to fit within a container.
>         - Resize the string as the container is resized
>         - Hovering / focusing truncated text could reveal complete
>         text (maybe as an accessible tooltip?)
>
>         Does a similar component already exist? If not, perhaps this
>         can be a component worth considering for development.
>
>         - Jonathan.
>
>         ---
>         Jonathan Hung / jhung at ocad.ca <mailto:jhung at ocad.ca>
>         <mailto:jhung.utoronto at gmail.com
>         <mailto:jhung.utoronto at gmail.com>>
>
>         IDRC - Interaction Designer / Researcher
>         Tel: (416) 977-6000 x3959 <tel:%28416%29%20977-6000%20x3959>
>         Fax: (416) 977-9844 <tel:%28416%29%20977-9844>
>
>
>         _______________________________________________________
>         fluid-work mailing list - fluid-work at fluidproject.org
>         <mailto:fluid-work at fluidproject.org>
>         To unsubscribe, change settings or access archives,
>         see http://fluidproject.org/mailman/listinfo/fluid-work
>
>
>
>     -- 
>     Greg Gay
>     Project Manager
>     Inclusive Design Research Centre
>     OCAD University
>     416 977-6000 #3956 <tel:416%20977-6000%20%233956>
>
>     _______________________________________________________
>     fluid-work mailing list - fluid-work at fluidproject.org
>     <mailto:fluid-work at fluidproject.org>
>     To unsubscribe, change settings or access archives,
>     see http://fluidproject.org/mailman/listinfo/fluid-work
>
>


-- 
Greg Gay
Project Manager
Inclusive Design Research Centre
OCAD University
416 977-6000 #3956