Click here to get back home

Image/Font sizing UI design question re directories

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Image/Font sizing UI design question re directories Csaba Gabor 03-29-2006
Get Chitika Premium
Posted by Csaba Gabor on March 29, 2006, 7:04 am
Please log in for more thread options


If I take a look at a site that has a heirarchical directory structure
(e.g. http://www.treemenu.org/), then on the left there are always(?)
some small images on the left, corresponding to '+', '-', '|-', and
'|_'. By abutting these, you get a "pretty" "tree" representation.
However, if the user alters their font size (especially to a larger
size) from what the site designer figured, then these images will no
longer lie flush/close to each other.

Is there a UI standard on this? How should a site designer take this
into account (ie. abutting images when the corresponding text size is
changed)?
(1) Just have the images. Let the viewer deal with it.
(2) Use characters in place of the images. In that case what are the
appropriate character codes? I've searched at
http://www.macchiato.com/unicode/chart/ but not seen anything really
appealing.
(3) Some other approach.

Thanks,
Csaba Gabor from Vienna

PS. I mentioned the site above only to give an idea (visually)


Posted by axlq on March 29, 2006, 7:46 pm
Please log in for more thread options


>If I take a look at a site that has a heirarchical directory structure
>(e.g. http://www.treemenu.org/), then on the left there are always(?)
>some small images on the left, corresponding to '+', '-', '|-', and
>'|_'. By abutting these, you get a "pretty" "tree" representation.
>However, if the user alters their font size (especially to a larger
>size) from what the site designer figured, then these images will no
>longer lie flush/close to each other.

When I make the text large as possible in IE, that site is stil
quite readable. So the images have little gaps. It's still clear
what the images are for.

It's not something I would ever implement though. It's awfully SLOW
to update when you click on something.

Interstingly, the author's "tree" isn't done by modifying the <ul> tag
attributes. It appears to be a simple re-styling of the <a> tag.

>Is there a UI standard on this? How should a site designer take this
>into account (ie. abutting images when the corresponding text size is
>changed)?
>(1) Just have the images. Let the viewer deal with it.
>(2) Use characters in place of the images. In that case what are the
>appropriate character codes? I've searched at
>http://www.macchiato.com/unicode/chart/ but not seen anything really
>appealing.

I vote for that. I suppose you could use characters in a
fixed-width font to do the same thing, say by restyling the <tt>
tag to the font of your choice. It would be a lot faster, and the
characters will scale with the rest of the page.

See the UTF-8 character set, starting at code 2500 (hexadecimal) to
257f. You'll see a whole bunch of characters designed for drawing
lines, corners, intersections, boxes, etc. I'd use those if I would
implement that kind of tree approach.
UTF-8 table: http://s01060050bfb53867.cg.shawcable.net/utf-8.php

-A

Posted by kchayka on March 30, 2006, 10:40 am
Please log in for more thread options


Csaba Gabor wrote:
> If I take a look at a site that has a heirarchical directory structure
> (e.g. http://www.treemenu.org/), then on the left there are always(?)
> some small images on the left, corresponding to '+', '-', '|-', and
> '|_'. By abutting these, you get a "pretty" "tree" representation.
> However, if the user alters their font size (especially to a larger
> size) from what the site designer figured, then these images will no
> longer lie flush/close to each other.

Try extending the vertical line in the image, both top and bottom. If
it's only a background image, centering it vertically
(background-position: left center;) will clip the top and bottom ends
off as needed. If it's not a background image, the clip property might
do the job.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Similar ThreadsPosted
Article Directories: How to Submit June 5, 2007, 12:51 am
REQ: HTML editor to reorganize directories suitable for a CHM eBook compiler input. January 21, 2005, 1:24 pm
REQ: HTML editor to reorganize directories suitable for a CHM eBook compiler input. January 28, 2005, 5:51 am
Images & relative sizing & IE December 20, 2004, 1:09 pm
dynamic sizing text September 6, 2007, 3:14 pm
Elements not sizing consistently October 18, 2007, 10:31 pm
Any way to make an auto-sizing window? January 16, 2007, 1:55 am
How to let the layout laterals auto sizing? March 26, 2008, 11:03 am
What is the most versatile sizing value for fonts? Percents?EM's? January 7, 2008, 7:13 pm
Why are we experiencing a table sizing issue with set pixel widths? May 21, 2008, 3:48 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap