Re: Units, font sizing, and zoom suggestion for CSS 3

On Tue, 25 Jan 2000, Erik van der Poel wrote:

>> #  * em: the 'font-size' of the relevant font
>> The only minor vagueness is whether one should use the specified,
>> computed, or actual value of font-size. I tend to believe we should
>> use the actual value of font-size for the first available font in
>> the font-family list, but this is not (AFAIK) specified in the
>> spec.
> The actual value of font-size can be quite different from the
> computed value. For example, some font families on Unix only support
> bitmap fonts. Some X servers can be asked to scale the bitmaps, but
> that is generally ugly. CSS allows the implementation to select a
> different font size, which may even be as high as 20% off (or
> higher). So, one wonders whether "em" was supposed to refer to the
> computed or actual value.

Right. Actual makes a lot of sense. Imagine a <span> with an inline
background, and an image in it. 

   span { font: 100px "Some Bitmapped Font"; }
   img { height: 1em; }

The result the author is looking for is:

 -------------------------------------------- <- top of background
 TTT EEE \ / TTT  TTT EEE \ / TTT  image
  T  E-   X   T    T  E-   X   T   image
  T  EEE / \  T    T  EEE / \  T   image
 -------------------------------------------- <- bottom of background

The image could be a vector, maybe a vector of some fancy glyph that
is not in UNICODE.

Now, if the span's text is _actually_ 10px high, but we use the
computed value, the net result would be:
                               
 ____________image__________
 _TEXT_TEXT__image__________<- background
             image
              
...whereas if we use the _actual_ value for 1em, then it looks like:

 ___________________________
 _TEXT_TEXT_#_______________<- background
  
...which is much closer to the author's expectations.

 
>> I think 'em' is implemented pretty well and consistently. Maybe
>> font-size, and certainly line-height and vertical-align, but the
>> 'em' unit is generally well supported. (I have a test case
>> somewhere...)
> But if the style sheet author expects the UA to use the actual value
> of font-size for "em", and if the UAs don't currently do this, then
> we still have a problem.

Yes, but not a big one. There are not many CSS-enabled browsers for X,
are there? (Or are there?)

If not, then we can decide the actual/computed thing without causing
too many problems, since on Windows and Mac, TrueType fonts mean that
this issue rarely becomes noticeable.

 
> Kent claims that some European fonts fit more of the glyphs into the
> em square (i.e. the accents above capital letters go inside), while
> many American fonts appear to place the accents outside the em
> square.

I have a way around this problem. :-D

I agree that setting the font's _ex_ height rather than _em_ height
(in CSS terms) is a good idea. We can't invent a new property, due to
that messing up inheritance. (See previous posts this month.)

So why not make CSS3's font-size take on an additional "flag", namely
"ex-size" or something, which indicates that the font-size value is
setting the height of the font-size and not the height of the
em-square? Then finding the _computed_ value of font-size, for the
font in question, would involve (a) finding the ratio of em-height to
ex-height for the font, (b) multiply the given height by the ratio.

(I assume font-size-adjust becomes involved at some point here, but
I'm not sure where!)

What would be inherited? The _computed_ value of the font-size length
given, and the presence of the "ex-size" flag.

Examples are probably in order (!). Assume that the root element has

   :root { font-size: 100px; }

...in the following examples. This means that the font-size of the
root element will be 100px, 1em will equal 100px if the first
available font doesn't need scaling.

The value that is inherited is "100px".

Next, imagine a child of the root element, <a>.

   a { font-size: 200%; }

No surprises here, the font size (em height) of <a> will be 200px.
Children of <a> will inherit font-size as 200px (not 200%!). 1em will
equal 200px if a scalable font is available.

Now. A sibling of <a> is the element <b>, and element <b> will contain
many subelements <b1>, <b2>, ... <bn> all with different fonts. But
the author wants them to all have the same ex-height.

So.

   b { font-size: ex-size 100px; }

Assuming that the first font in font-family of element <b> is
available and has an ex height of half the em square height (for a
simple life -- I doubt it is actually realistic!) and is fully
scalable, this means that the em height font size of element <b> is
200px.

So 1em = 200px for element <b>.

However, the font-size that is inherited is not 200px. It is 100px,
with the ex-size flag.

Now assume element <b1> (a child of element <b>) has a first
font-family which is available, has an ex height of a quarter the em
square height and is fully scalable.

   b1 { font-size: inherit; /* initial value */ }

Its font-size will be inherited from <b>. Thus it will have a
font-size of "ex-size 100px". Which means that the height of its em
square is 400px! (1:1/4 * 100px = 400px).

So 1em = 400px inside the <b1> element.

Another child of the <b> element, <b2>, has this style:

   b2 { font-size: 1em; }

This 1em is relative to the parent (<b>)'s font-size, and we said
above that this was 200px. So regardless of the font-family, the
font-size of element <b2> (and thus assuming ideal fonts the value of
1em for b2 as well) will be 200px. If the font of <b2> has an em:ex
ratio different from <b>'s, then it will look wrong.

Another child of <b>, <b3>:

   b3 { font-size: ex-size 1ex; }

This is more logical, it means that the ex-height of element <b3> must
equal the ex-height of element <b>. The ex-height of <b> is 100px,
since the font in <b> is ideal. (Note that if the first font in <b>
had not been scalable, then the ex height in <b> would not have been
100px!) Thus 1ex in <b3> equals 100px. 1em in <b3> equals the em:ex
ratio for <b3>'s font times the ex height. If we say that the ex
height is a third of <b3>'s font's em height, then 1em = 300px.


A great advantage of this is that it is fully backwards compatible --
you can specify:

  { font-size: 100px; font-size: ex-size 80px; }

...and CSS1 and 2 browsers will set 1em to 100px, and work out 1ex,
and CSS3 browsers will set 1ex to 80px, and work out 1em.


I haven't worked out how this interacts with font-size-adjust.

Nor have I worked out how this interacts with the absolute font sizes,
xx-small to xx-large. 

Finally: I'm not sure I like this. It seems incredibly complicated if
all we are trying to do is make sure that ex-heights are aligned...
especially if that then makes something else look silly (like the
width). Maybe it's just a lost cause?

It is rather simpler than most other proposals I've seen, though,
certainly from a using-it point of view. (Not necessarily from an
understanding point of view, though...)

-- 
Ian Hickson                            ("`-''-/").___..--''"`-._   
http://www.bath.ac.uk/%7Epy8ieh/        `6_ 6  )   `-.  (     ).`-.__.`)
                                        (_Y_.)'  ._   )  `._ `. ``-..-' fL
Member, Mozilla Quality Assurance     _..`--'_..-_/  /--'_.' ,'
Browser Standards Compliance Team    (il).-''  (li).'  ((!.-'

Received on Tuesday, 25 January 2000 19:02:31 UTC