Re: CSS character width unit missing: an oversight, methinks?

--- Nils Klarlund <klarlund@research.att.com> wrote:
> 
> I need a way of indenting a div-box an amount of
> space that is a
> multiple of the character-width (I'm using a bold,
> fixed-with font).
> 
> Unfortunately, this is not possible since there is
> no way of referring
> to the width of a character in CSS (em and ex don't
> give me the
> width). A fundamental, little, or inconsequential
> oversight in CSS?
> 
> (I fake it by using ex and a multiplier in my XSLT;
> a certain value
> gives near-optimal results in IE5, Netscape 4, and
> Mozilla.)
This really isn't a good idea.

Netscape and IE apply the ex as 1/2 an em.

This means that you will be lulled into a false sense
of security by thinking that the size of the box has
some correlation with the actual size of the font.

Although it may happen that the value you use gives
good results, if you switch to a font whose aspect
value is greatly different from .5 (as I would imagine
most of the fonts you are using are), it won't look
right.

In any case, there is no reason why x-height should
relate in any measure to the width of glyphs.

However, clearly a ch measurement is easily derived
(i.e., from bbox).

> 
> More generally, I would like a mechanism that allows
> me to use the
> width of a box X as a width parameter of box Y. 
> Setting box X with
> visibility:hidden doesn't give me a method of
> extracting its width.
> (As far as I can tell.)
Aside from percentages, which are clearly only of use
when X's containing block is Y, I don't think that
this is appropriate (perhaps XSL would be better).

This is because stuff like 
2(width(y)) just doesn't seem to be CSS.

Regarding visibility: hidden, if you give X and Y a
common ancestor, then you can relate Y to Ancestor and
thence X to Y.

E.g.,
<div class="ancestor">
<div class="x">
</div>
<div class="y">
</div>
</div>
div.ancestor {width: value}
div.x {width: x%}
div.y {width: y%},
so if you want x to be twice the width of y, x = 2y,
e.g., value = 200px, y = 42%, x =84%, etc.

A little more care is required using this method
insofar as you may need to adjust margins where
previously they had been automatically set, but it
seems to do the job [but it definitely won't work in
NS4 due to bad bugs on width: %]

=====
----------------------------------------------------------
From Matthew Brealey (http://members.tripod.co.uk/lawnet (for law)or http://members.tripod.co.uk/lawnet/WEBFRAME.HTM (for CSS))
__________________________________________________
Do You Yahoo!?
Thousands of Stores.  Millions of Products.  All in one place.
Yahoo! Shopping: http://shopping.yahoo.com

Received on Monday, 6 December 1999 06:28:34 UTC