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

[Jonathan Hung]

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

<http://mattsnider.com/css/css-string-truncation-with-ellipsis/>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 <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> 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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20110603/3e1cd8a5/attachment.htm>