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

[Justin Obara]

In regards to the css approach, we used that for Fluid Engage. 

You can check it out in a webkit based browser:
http://fluidengage.org/engage/home/home.html#app/home.html

If I remember correctly, voiceover would read out the entire untruncated text, since the ellipses were purely stylistic. Although, as you mention, they can only be placed at the end and have some requirements on the type of container they are in.

Thanks
Justin

On 2011-06-03, at 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
> 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> 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.utoronto at gmail.com>
> 
> IDRC - Interaction Designer / Researcher
> Tel: (416) 977-6000 x3959
> Fax: (416) 977-9844
> 
> 
> _______________________________________________________
> fluid-work mailing list - 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
> 
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work
> 
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20110606/423162cf/attachment.htm>