font-size question

[Takehiko Abe]

I have a <pelement with <ttinside:

;;; <p>A paragraph contains <tt>tt element</tt>.</p>

I would like to set the font-size of the TT to the same
as the containing <p>.

This does not seem to work:

;;; p {
;;; font-size: medium;
;;; }
;;;
;;; p tt {
;;; font-size: 100%;
;;; }

when default sizes for propertional and monospace fonts
are set to different values in a browser.

Is there a way to achieve the goal without resorting to
'px'?

TIA
T.

[Jukka K. Korpela]

Scripsit Takehiko Abe:

I have a <pelement with <ttinside:

- -

I would like to set the font-size of the TT to the same
as the containing <p>.

That would be
p tt { font-size: 100%; }
or, equivalently by the specifications,
p tt { font-size: 1em; }

This does not seem to work:

;;; p {
;;; font-size: medium;
;;; }

The font size of the p element is irrelevant for the purposes of the stated
problem, except if you used physical units like px or mm, and you shouldn't
use them.

Besides, this particular setting, which uses medium as font-size value, is
not recommendable, since its effect depends on the browser. Even on IE 7,
you get different results depending on "standards mode" vs. "quirks mode".

;;; p tt {
;;; font-size: 100%;
;;; }

What do you mean by saying that it does not work? Note that the visual
appearance of a monospace font may give the impression of increased font
size. This may sound self-contradictory to most people, since most people do
not know what "font size" really means.

Letters are generally larger (taller) in a monospace font than in a
proportional font of the same size. This is probably the main reason why
many browsers use reduced font size for elements that are usually rendered
in a monospace font, so that the effect might correspond to something like
tt, code, samp, pre, textarea { font-size: 90% }. You can see whether this
is the case in your browser by using
tt, code, samp, pre, textarea { font-family: Times New Roman; }

Similarly, you can test test whether
p tt { font-size: 100%; }
takes effect, if you add the rule
p, p tt { font-family: Times New Roman; }
(You could use just p tt { font-family: inherit; }, but IE doesn't support
it.)

when default sizes for propertional and monospace fonts
are set to different values in a browser.

Unless there's some bad browser bug involved, those default sizes should
have no effect when font-size is set. In theory, browser settings _might_
conceptually map to CSS rules with !important specifier, but I don't think
things are that way, and if they are, there's nothing you can do about it as
an author - !important is _meant_ to be the user's last resort and give him
the final word.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Takehiko Abe]

;;; p tt {

;;; font-size: 100%;
;;; }

What do you mean by saying that it does not work?

What I meant is that TT rendered with different font-size than P.
For instance, in my FireFox (2.0) sans-serif font is set to
"Helvetica 14" and monospace to "Courier 13". With these
defaults and the above CSS style, it appears that P is
rendered with Helvetica 14 and TT with Courier 13.

Letters are generally larger (taller) in a monospace font than in a
proportional font of the same size. This is probably the main reason why
many browsers use reduced font size for elements that are usually rendered
in a monospace font, so that the effect might correspond to something like
tt, code, samp, pre, textarea { font-size: 90% }. You can see whether this
is the case in your browser by using
tt, code, samp, pre, textarea { font-family: Times New Roman; }

I tested with "tt { font-family: sans-serif}" (I assumed that this
provides the same test as your example). TT is rendered with
"Helvetica 14" (the default in my browser.)

(I am using HTML 4.01 strict.)

Thanks,
T.

[VK]

Takehiko Abe wrote:

I have a <pelement with <ttinside:

;;; <p>A paragraph contains <tt>tt element</tt>.</p>

I would like to set the font-size of the TT to the same
as the containing <p>.

This does not seem to work:

;;; p {
;;; font-size: medium;
;;; }
;;;
;;; p tt {
;;; font-size: 100%;
;;; }

Sure it does.

when default sizes for propertional and monospace fonts
are set to different values in a browser.

No they are not: but they give different _visual_ effect because their
glyphs are build on different principles.

Is there a way to achieve the goal without resorting to 'px'?

That is irrelevant what are you using: all relative units are
calculated into pixel values before being applied. In this aspect is
irrelevant what are you using: %, em, ex, pt, or anything else: the
actual style on the screen will be always in px.
What _is_ important that relative units are being recalculated for each
partucular hardware and current text size settings.

You can easily check that both fonts have the font-size in px:

<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
p {
font-size: 2em;
}
p tt {
font-size: 1em;
}
</style>
<script type="text/javascript">
function init() {
var P = document.getEle mentsByTagName( 'p')[0];
var T = document.getEle mentsByTagName( 'tt')[0];
if (document.defau ltView) {
alert(
document.defaul tView.getComput edStyle(P,'firs t-letter').fontSi ze );
alert(
document.defaul tView.getComput edStyle(T,'firs t-letter').fontSi ze );
}
}
window.onload = init;
</script>
</head>
<body>
<p>Text<tt>Text </tt></p>
</body>
</html>

It is also easy to check that they are on the same baseline. So
whatever was required is accomplished. If you want a _visual_ equality
of serif and monospace then you have to break their physical equality
by making either one smaller or bigger: naturally the adjustment effect
may differ by hardware configurations.

[Takehiko Abe]

"VK" wrote:

No they are not:

You mean the two are the same?

Unless I am missing something, they are different _px_ in my
browsers on my hardware right now.

>
You can easily check that both fonts have the font-size in px:
[...]

Since I use FireFox, I don't need Javascript to check the
computed font sizes. And they are different.

[VK]

Takehiko Abe wrote:

"VK" wrote:

No they are not:

You mean the two are the same?

Yes. I mean physical size, not the look.

Unless I am missing something, they are different _px_ in my
browsers on my hardware right now.

That is the optical illusion I mentioned in my previous post. This is
why I provided JavaScript code in my sample. Run it and you will see
that both <Pand <TTblocks have the same px size. Without knowing
the DPI value on your current hardware, I cannot tell for sure what
number will it be. For 96DPI with default Text Size setting it will be
32px. All I can say that both values will be the same no matter what.
If you think that the program is cheating on you :-) then make a
screenshot and paste into any image editing program. Mesure the height
of say "e" letter in both blocks.

Since I use FireFox, I don't need Javascript to check the
computed font sizes. And they are different.

That is an allusion: they are the same. As I explained earlier, you
have a choice as with any optical illusion: leave physical equality but
live then with visual difference - or break physical equality but get
the visual one.

[Takehiko Abe]

That is the optical illusion I mentioned in my previous post.

What I'm seeing is _certainly_ not an optical illusion.

This is
why I provided JavaScript code in my sample. Run it and you will see
that both <Pand <TTblocks have the same px size.

Just run it and it gave me 28px and 26px respectively.

[VK]

Takehiko Abe wrote:

This is
why I provided JavaScript code in my sample. Run it and you will see
that both <Pand <TTblocks have the same px size.

Just run it and it gave me 28px and 26px respectively.

OK, then I can tell two things for sure:

1) Your hardware uses 72DPI instead of 96DPI, so with 99% guarantee in
is not Windows. As you name makes me think of Japan, my first bet is on
MacOS

2) In your current browser monospace fonts are preset to be shown
smaller than variable width fonts to make them visually of the same
size. As I explained earlier it cannot be done without breaking
physical equality - and it is "pre-broken" on your browser.

The latter pretty much takes the problem out of the common CSS
techniques topics. You may ask for advise at <comp.sys.mac.s ystem>

[Johannes Koch]

VK schrieb:

Takehiko Abe wrote:

>>This is
why I provided JavaScript code in my sample. Run it and you will see
that both <Pand <TTblocks have the same px size.

Just run it and it gave me 28px and 26px respectively.

OK, then I can tell two things for sure:

1) Your hardware uses 72DPI instead of 96DPI, so with 99% guarantee in
is not Windows. As you name makes me think of Japan, my first bet is on
MacOS

I ran your test file on Firefox 1.5.0.9 (Windows, 96dpi), sans-serif:
14px, monospace: 13px.

Result: 28px, 26px.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Takehiko Abe]

2) In your current browser monospace fonts are preset to be shown

smaller than variable width fonts

No.