Image/Font sizing UI design question re directories

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

If I take a look at a site that has a heirarchical directory structure
(e.g. /), 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
(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 but not seen anything really
(3)  Some other approach.

Csaba Gabor from Vienna

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

Re: Image/Font sizing UI design question re directories

Quoted text here. Click to load it

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.

Quoted text here. Click to load it

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:


Re: Image/Font sizing UI design question re directories

Csaba Gabor wrote:
Quoted text here. Click to load it

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.

Site Timeline