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 / [email protected] <mailto:[email protected]>
IDRC - Interaction Designer / Researcher
Tel: (416) 977-6000 x3959
Fax: (416) 977-9844
On Fri, Jun 3, 2011 at 10:00 AM, Greg Gay <[email protected]
<mailto:[email protected]>> 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 / [email protected] <mailto:[email protected]>
<mailto:[email protected]
<mailto:[email protected]>>
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 - [email protected]
<mailto:[email protected]>
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 - [email protected]
<mailto:[email protected]>
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 - [email protected]
To unsubscribe, change settings or access archives,
see http://fluidproject.org/mailman/listinfo/fluid-work
