Image/Font sizing UI design question re directories

[Csaba Gabor]

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)

[axlq]

In article <11**********************@e56g2000cwe.googlegroups .com>,
Csaba Gabor <da*****@gmail.com> 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.
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

[kchayka]

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.