font-family: inherit -- does not work with shorthand?
Fabian Neumann
I got a problem with font-family inheritance. Let's say I have CSS
definitions like:
p {
font:normal 10pt Verdana;
}
strong {
font:normal 14pt inherit;
}
And HTML like this:
<p>Bla bla <strong>important thing</strong> and so on.</p>
Why are the CSS definitions for strong not applied at all?? At least in
MozillaFirebird it doesn't work unless you specify the font-family for
strong directly.
Is this a bug, or do I get something wrong with the inherit-CSS-Spec?
Fabian
Jukka K. Korpela
> I got a problem with font-family inheritance.
Or with inheritance of font properties in general?
Browsers often get them wrong; e.g., the principle that the _computed_ value
is what gets inherited is violated, in different ways, by IE 6 and Opera 7.
> p {
> font:normal 10pt Verdana;
> }
> strong {
> font:normal 14pt inherit;
> }
I hope Verdana is just a dummy example here. (If it isn't, you should check
what has been written about Verdana in this group.) Ditto for the use of the
pt unit.
W3C's "CSS Validator"
( http://jigsaw.w3.org/css-validator/validator-text.html )
gives odd results. When the Warnings option is set to "No warnings" it says:
Errors
URI : file://localhost/TextArea
Line: 0 Context : strong
Invalid number : fonttoo few values for the property normal 14pt : normal
14pt
Valid CSS information
p {
font : normal 10pt Verdana;
}
But when I set Warnings to "Normal report", I get:
Warnings
URI : file://localhost/TextArea
Line : 0 font-family: You are encouraged to offer a generic family as a last
alternative
Valid CSS information
p {
font : normal 10pt Verdana;
}
strong {
font : normal 14pt;
}
which seems to say that the style sheet is "valid" in its opinion (no error
message issued) but it echoes it back without the 'inherit' keyword (thereby
changing the meaning, in general)!
Confused? Well, so is the "validator", and so is the specification. See
http://www.w3.org/TR/REC-CSS2/fonts.html#font-shorthand
and consider the declaration
font: inherit 100% Arial;
Does 'inherit' set font-style, or font-variant, or font-weight? They are
allowed in any order, and they are all optional, so which one is it?
You case is different, since the 'inherit' value appears in a position where
it must mean a value for font-family. But the above notes show how confused
even the W3C is with 'inherit'.
> And HTML like this:
> <p>Bla bla <strong>important thing</strong> and so on.</p>
But why would you set the font-family at all? In theory, the initial value
of this property "depends on user agent", but to be reasonable we must
expect that browsers have a default style sheet that sets properties like
font-family to 'inherit' to most elements, or act as if they did. Anyway, to
stay on the safe side, you could dispense with the font shorthand and
set directly
p, strong { font-family: Verdana; }
p { font-size: 10pt;
strong { font-size: 14pt;
font-weight: normal; }
(if you have some odd reason for using Verdana and pt sizes).
It's safer _and_ clearer.
> Why are the CSS definitions for strong not applied at all?? At least in
> MozillaFirebird it doesn't work unless you specify the font-family for
> strong directly.
Do you mean that it uses, for the <strong> element in your example, some
font other than Verdana? That would be odd, unless there's some other style
sheet intervening.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Fabian Neumann
Am 25.11.2003 00:51 schrieb Jukka K. Korpela:
> Fabian Neumann <news.fo...@spamgourmet.org> wrote:
>>I got a problem with font-family inheritance.
>
> Or with inheritance of font properties in general?
Just needed family inheritance, since this is mostly constant in
paragraphs where size an weight change. But I can imagine this issue
covers all of them.
> Browsers often get them wrong; e.g., the principle that the _computed_ value
> is what gets inherited is violated, in different ways, by IE 6 and Opera 7.
>
>>p {
>> font:normal 10pt Verdana;
>>}
>>strong {
>> font:normal 14pt inherit;
>>}
>
> I hope Verdana is just a dummy example here. (If it isn't, you should check
> what has been written about Verdana in this group.) Ditto for the use of the
> pt unit.
Yes, Verdana is dummy. Actually I'd use "Verdana, sans-serif" at least.
I wanted to make it short. Maybe too short. But what's wrong about
Verdana in general (except that it was introduced as a Microsoft Web
Standard Font)?
I must admit that units are some kind confusing to me. Used to take pt,
since some weeks I prefer % or em, to please users with bigger monitors.
Yes :)
> http://www.w3.org/TR/REC-CSS2/fonts.html#font-shorthand
> and consider the declaration
> font: inherit 100% Arial;
> Does 'inherit' set font-style, or font-variant, or font-weight? They are
> allowed in any order, and they are all optional, so which one is it?
>
> You case is different, since the 'inherit' value appears in a position where
> it must mean a value for font-family. But the above notes show how confused
> even the W3C is with 'inherit'.
The W3C example is somehow nondeterministic, yes, but as you say my
example is different. And I think it should be clear, that's why I'm
surprised about the browsers behaviour.
>>And HTML like this:
>><p>Bla bla <strong>important thing</strong> and so on.</p>
>
> But why would you set the font-family at all? In theory, the initial value
> of this property "depends on user agent", but to be reasonable we must
> expect that browsers have a default style sheet that sets properties like
> font-family to 'inherit' to most elements, or act as if they did. Anyway, to
Yes, but the font-shorthand *must* contain a font-family-value if you
use it. And when I want to change two values out of three I think it's
economic to use the shorthand with two changed values and one "inherit".
I prefer that over writing font-size:... and font-weight:... .
> stay on the safe side, you could dispense with the font shorthand and
> set directly
I'll probably have to while browsers (and W3C) remain unsure about it :/
> p, strong { font-family: Verdana; }
> p { font-size: 10pt;
> strong { font-size: 14pt;
> font-weight: normal; }
>
> (if you have some odd reason for using Verdana and pt sizes).
No :)
But I think you missed one brace:
> p { font-size: 10pt; }
-----------------------^
>>Why are the CSS definitions for strong not applied at all?? At least in
>
> Do you mean that it uses, for the <strong> element in your example, some
> font other than Verdana? That would be odd, unless there's some other style
> sheet intervening.
No, it uses the default for <strong> of the user-agent: bold and same
font-size. Not bigger and unbold as I wanted it to be. It just seems
not to be applied.
Thank you for your quick reply, although it's not really satisfying
concerning the browser-misunderstanding issue.
Fabian
Eric Bohlman
news:bq0dqv$o7i$1...@online.de:
> I wanted to make it short. Maybe too short. But what's wrong about
> Verdana in general (except that it was introduced as a Microsoft Web
> Standard Font)?
What's wrong about it is that characters in it are larger (both objectively
and subjectively) than characters in most other fonts, for a particular
designated font size. In particular, if you've got text that looks just
right in, say, Arial at a particular point or pixel size, it will likely
look too big when rendered in Verdana. The problem with this is that many
Web designers who are using Verdana as their personal default font feel
compelled to suggest a smaller-than-default font size to make the Verdana
look right, and the result is that people who don't have Verdana available
or who prefer to read with some other font family wind up with text that's
too small.
Jukka K. Korpela
> Yes, but the font-shorthand *must* contain a font-family-value if you
> use it.
That's correct. Now I see the reason for formulating the problem as on the
Subject line.
> And when I want to change two values out of three I think it's
> economic to use the shorthand with two changed values and one "inherit".
I see, but it really isn't economic - you run into problems with browsers,
and it's less clear (to you two years later when you need to edit the
document after forgetting most of CSS, or to someone else editing your
document one day).
And I think it's even more logical to set just those properties that you
want to set, without e.g. in this case setting font-family at all, not even
to the value inherit. Using the font shorthand you cannot avoid setting all
the subproperties. I've started thinking whether the shorthands were a good
idea at all, especially as defined now. I've seen much confusion around
them, and little actual usefulness.
> But I think you missed one brace:
Quite right. Never use anyone's CSS without checking it, and then double-
checking with a checker (even though the checkers are less than perfect).:-)
>> Do you mean that it uses, for the <strong> element in your example,
>> some font other than Verdana? That would be odd, unless there's some
>> other style sheet intervening.
>
> No, it uses the default for <strong> of the user-agent: bold and same
> font-size. Not bigger and unbold as I wanted it to be.
The same happens on Mozilla 1.4.1. Not on IE 6 or Opera 7, which seem to get
it right.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jukka K. Korpela
>> font: inherit 100% Arial;
>> Does 'inherit' set font-style, or font-variant, or font-weight? They
>> are allowed in any order, and they are all optional, so which one is
>> it?
>>
>> You case is different, since the 'inherit' value appears in a position
>> where it must mean a value for font-family. But the above notes show
>> how confused even the W3C is with 'inherit'.
>
> The W3C example is somehow nondeterministic, yes, but as you say my
> example is different.
Or maybe not so different...
I asked about the problem (as regards to CSS specs) in the www-style list,
and there was a mention of the rule at
http://www.w3.org/TR/CSS21/about.html#q7 (item 4 there)
which says, in a somewhat difficult way, that 'inherit' is _not_ allowed
even in cases like yours,
font:normal 14pt inherit;
You could use plain
font: inherit;
but that's it - you can't use 'inherit' otherwise in the 'font' shorthand.
This is of course restrictive, and limits the usefulness of the shorthand.
That's technically just the CSS 2.1 _draft_, but here it pretty much
reflects what was _meant_ in CSS 2.0, I guess.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Stephen Poley
<news.fo...@spamgourmet.org> wrote:
>Yes, Verdana is dummy. Actually I'd use "Verdana, sans-serif" at least.
> I wanted to make it short. Maybe too short. But what's wrong about
>Verdana in general (except that it was introduced as a Microsoft Web
>Standard Font)?
This may help: http://www.xs4all.nl/~sbpoley/webmatters/verdana.html
--
Stephen Poley
Fabian Neumann
> Fabian Neumann <news.fo...@spamgourmet.org> wrote:
>
>
>>>font: inherit 100% Arial;
>>>Does 'inherit' set font-style, or font-variant, or font-weight? They
>>>are allowed in any order, and they are all optional, so which one is
>>>it?
>>>
>>>You case is different, since the 'inherit' value appears in a position
>>>where it must mean a value for font-family. But the above notes show
>>>how confused even the W3C is with 'inherit'.
>>
>>The W3C example is somehow nondeterministic, yes, but as you say my
>>example is different.
>
>
> Or maybe not so different...
>
> I asked about the problem (as regards to CSS specs) in the www-style list,
> and there was a mention of the rule at
> http://www.w3.org/TR/CSS21/about.html#q7 (item 4 there)
> which says, in a somewhat difficult way, that 'inherit' is _not_ allowed
> even in cases like yours,
Thank you very much, that makes it clear now. (Shows again how complex
this CSS stuff is. Too bad that many people still only use them to
hover their links...)
Fabian