473,325 Members | 2,442 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

Behind-the-scenes font size changes

Here is an example HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test!</title>
</head>
<body>
<p>fluffier <tt>firefly</ttfisticuffs</p>
</body>
</html>

The text looks a bit strange, as the middle word is not only rendered
in a fixed-pitch font, but the type size is also changed. Using the
DOM inspector in Firefox I could confirm that the <ptext is rendered
in 16 px, but the <tttext is reduced to 13 px. (The size difference
seems to be the same in Safari as well.) Admittedly many fixed-pitch
fonts look better if they are slightly reduced in size in relation to
proportional fonts, but this is just too much. In fact, if I use
<styleclauses to force the font size of both <pand <ttto the same
size, they look perfectly OK together. Even if not, I think the
browser should not take it upon itself to decide size changes. Is
there any way I can tell the browser not to mess about with the sizes,
short of adding a font-size: 100% to every tag I can imagine?

Oct 11 '06 #1
7 1876

Kai-Mikael Jää-Aro wrote:
Using the DOM inspector in Firefox I could confirm that the <ptext is rendered
in 16 px, but the <tttext is reduced to 13 px.
This is commonplace and deliberate. Monospaced fonts are typically
wider than proportional fonts, so the default stylesheet attempts to
compromise between matching their heights and their widths -- it can't
do both together.

IMHO, as a general rule it's better to match width like this when using
monospaced fonts in large blocks of text, but small inline sections
look better if you match heights. It's a trivial piece of CSS to do so.

This is also a presentation / CSS issue and definitely not HTML's
responsibility, so it could be seen as OT and better placed in
c.i.w.a.s Not worth moving the thread once it has started though,
IMHO.

Oct 11 '06 #2
On 11 Oct 2006, Kai-Mikael Jää-Aro wrote:
Is there any way I can tell the browser not to mess about with the sizes,
short of adding a font-size: 100% to every tag I can imagine?
You only need
code, tt { font-size: 100% }

Oct 11 '06 #3
Scripsit Kai-Mikael Jää-Aro:
Here is an example HTML file:
I don't think it's a real web page of yours.
<p>fluffier <tt>firefly</ttfisticuffs</p>
And why would you do that?
The text looks a bit strange, as the middle word is not only rendered
in a fixed-pitch font, but the type size is also changed.
Andy gave a good theoretical answer (and I mean "theoretical" in a positive
sense), which might be what you are after. If you have a practical problem,
I'm afraid you need to reveal it to us before we can solve it.

There _are_ real problems with monospace font size reduction when
representing program code, for example, but they are really a CSS matter.
The HTML side of the matter is that you should use <tt_only_ when you want
to say "I'm not saying anything about the meaning of this element except
that I'd like it to appear in a monospace font, though indirectly I'm saying
that it it's _not_ computer code or sample output".
In fact, if I use
<styleclauses to force the font size of both <pand <ttto the
same size, they look perfectly OK together.
If you could really force them to the same size, you would guarantee that
they are not OK to the _majority_ of users. One size does not fit all;
whatever fixed size to pick up, the odds are that _most_ people would really
rather read something smaller or something larger. But this is commonplace
CSS knowledge wherever CSS experts hang around.

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

Oct 11 '06 #4


On Oct 12, 12:47 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit Kai-Mikael Jää-Aro:
Here is an example HTML file:
I don't think it's a real web page of yours.
Of course it isn't, what gave you that idea? As I wrote, it is an
example, concisely demonstrating the problem.
<p>fluffier <tt>firefly</ttfisticuffs</p>
And why would you do that?
Do what? Use mono-spaced text in the middle of a paragraph? I do that
all the time for filenames, code snippets and such. Is there any
reason I shouldn't?
The text looks a bit strange, as the middle word is not only rendered
in a fixed-pitch font, but the type size is also changed.
Andy gave a good theoretical answer (and I mean "theoretical" in a positive
sense), which might be what you are after. If you have a practical problem,
I'm afraid you need to reveal it to us before we can solve it.
I *thought* I explained my problem quite clearly: browsers introduce
(to me) unexpected size changes in displayed text depending on the tags
used. That causes the practical problem that the text looks bad and I
wanted to know if there was any global method of disabling the
size-changes. Andy's and Andreas' responses (for which I give thanks)
have been sufficient to inform me that this is intentional behaviour on
the part of the browser and that (as far as I have been able to infer)
this is limited to mono-spaced text and it therefore is sufficient to
ensure that tt and code tags are set with a font-size of 100% (which
magically affects all mono-spaced text).
There _are_ real problems with monospace font size reduction when
representing program code, for example, but they are really a CSS matter.
The HTML side of the matter is that you should use <tt_only_ when you want
to say "I'm not saying anything about the meaning of this element except
that I'd like it to appear in a monospace font, though indirectly I'm saying
that it it's _not_ computer code or sample output".
Well, the tt tag was for the purpose of the simplified example, the
real code looks rather messier as it is software-generated and uses
span and style sheets, but I checked that it would give the same
effect.
In fact, if I use
<styleclauses to force the font size of both <pand <ttto the
same size, they look perfectly OK together.
If you could really force them to the same size, you would guarantee that
they are not OK to the _majority_ of users. One size does not fit all;
whatever fixed size to pick up, the odds are that _most_ people would really
rather read something smaller or something larger.
My point was not that I wanted to enforce an *absolute* font size,
quite the opposite, but that I checked that the font-size changing done
by the browser in fact was quite unnecessary as the text looked better
when both pieces were set at the same font size, *regardless of what
that size was*.
But this is commonplace
CSS knowledge wherever CSS experts hang around.
I asked for help precisely because I am not a CSS expert. I thought I
made a reasonably good explanation of my problem and since I received
advice that solved my problem my explanation seems to have been good
enough.

Oct 12 '06 #5
Scripsit Kai-Mikael Jää-Aro:
>>Here is an example HTML file:
I don't think it's a real web page of yours.

Of course it isn't, what gave you that idea?
"Fluffier firefly fisticuffs", to begin with.
As I wrote, it is an
example, concisely demonstrating the problem.
So it's not a real web page of yours.
>> <p>fluffier <tt>firefly</ttfisticuffs</p>
And why would you do that?

Do what? Use mono-spaced text in the middle of a paragraph? I do
that all the time for filenames, code snippets and such. Is there any
reason I shouldn't?
For code snippets, <codeis the appropriate markup, not <tt>. For
filenames, it's debatable, but you could regard them as computer code of a
kind. Using <ttfor no apparent reason was the strange part.
I *thought* I explained my problem quite clearly: browsers introduce
(to me) unexpected size changes in displayed text depending on the
tags used.
So what did you fail to understand in the answer?
it therefore is
sufficient to ensure that tt and code tags are set with a font-size
of 100% (which magically affects all mono-spaced text).
That's rather questionable, since browsers do the size reduction for a
reason. Until you understand the reason, it's better to avoid playing with
the font size.

Besides, setting font size for tt and code "tags" surely does not affect all
monospace text. Think about <preelements, for example.
My point was not that I wanted to enforce an *absolute* font size,
quite the opposite, but that I checked that the font-size changing
done by the browser in fact was quite unnecessary as the text looked
better when both pieces were set at the same font size, *regardless
of what that size was*.
I'm afraid you still haven't grasped the issue. Surely you can set the font
size of <tt>, <code>, etc. elements to 100%, but if you think that it
guarantees that everything looks OK, you're mistaken. The browser may fonts
that differ from what you expect. Then the relationship between normal text
font and monospace text is different, and in general, the monospace text
will look too big. It's not catastrophic, but neither is the situation that
you originally saw as a problem.
>But this is commonplace
CSS knowledge wherever CSS experts hang around.

I asked for help precisely because I am not a CSS expert.
If you realized that this was basically an CSS issue, why did you ask in an
HTML group?

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

Oct 14 '06 #6
"Jukka K. Korpela" <jk******@cs.tut.fiwrites:
Scripsit Kai-Mikael Jää-Aro:
>it therefore is
sufficient to ensure that tt and code tags are set with a font-size
of 100% (which magically affects all mono-spaced text).

That's rather questionable, since browsers do the size reduction for a
reason. Until you understand the reason, it's better to avoid playing
with the font size.
I'd like to be enlightened. The whole IT business throws typography
back at least more than 1000 years BC for sure, but I generally still
don't understand the reasoning behind that.
>I asked for help precisely because I am not a CSS expert.

If you realized that this was basically an CSS issue, why did you ask
in an HTML group?
If you realised that Kai-Mikael posted in the wrong group, why didn't
you set a proper follow-up?
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011
Oct 16 '06 #7


On Oct 15, 12:59 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit Kai-Mikael Jää-Aro:
>Here is an example HTML file:
I don't think it's a real web page of yours.
Of course it isn't, what gave you that idea?
"Fluffier firefly fisticuffs", to begin with.
As I wrote, it is an
example, concisely demonstrating the problem.
So it's not a real web page of yours.
I never made the claim it was, indeed I clearly stated the opposite, so
what's the problem?
I *thought* I explained my problem quite clearly: browsers introduce
(to me) unexpected size changes in displayed text depending on the
tags used.
So what did you fail to understand in the answer?
Why you are picking on these rather irrelevant details.
it therefore is
sufficient to ensure that tt and code tags are set with a font-size
of 100% (which magically affects all mono-spaced text).
That's rather questionable, since browsers do the size reduction for a
reason. Until you understand the reason, it's better to avoid playing with
the font size.
I think my understanding of the situation was corroborated, but for my
particular purposes I have chosen another solution than what you would
prefer. It is probably not perfect, but it satisfies the constraints
*I* am working under.
Besides, setting font size for tt and code "tags" surely does not affect all
monospace text. Think about <preelements, for example.
Yes, I was quite surprised that setting a style for tt would change the
behaviour of span with monospaced text. It may or may not be an
intended side-effect, it may or may not only work for Mozilla-based
browsers, but it solves my immediate problem.
My point was not that I wanted to enforce an *absolute* font size,
quite the opposite, but that I checked that the font-size changing
done by the browser in fact was quite unnecessary as the text looked
better when both pieces were set at the same font size, *regardless
of what that size was*.
I'm afraid you still haven't grasped the issue. Surely you can set the font
size of <tt>, <code>, etc. elements to 100%, but if you think that it
guarantees that everything looks OK, you're mistaken. The browser may fonts
that differ from what you expect. Then the relationship between normal text
font and monospace text is different, and in general, the monospace text
will look too big. It's not catastrophic, but neither is the situation that
you originally saw as a problem.
Well, I'd be happy to leave it be, but unfortunately you are not the
customer in this case and thus not the arbiter of what is an acceptable
result.
But this is commonplace
CSS knowledge wherever CSS experts hang around.
I asked for help precisely because I am not a CSS expert.
If you realized that this was basically an CSS issue, why did you ask in an
HTML group?
"not a CSS expert" ="did not realise this was basically a CSS issue",
but in order to spare your sensitivity I will not post further on this
issue.

Oct 16 '06 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Yassar | last post by:
I want my P2P application to works well even when users are behind proxy or LAN. i.e Two instance of my application should be able to communicate even if they are on different LANs but...
0
by: Shane O. Pinnell | last post by:
Does anyone know of a resource for information on how to create a working databound DDL in a datagrid using code behind? I have found a plethora of resources for doing this without code-behind,...
3
by: CW | last post by:
I find it necessary to mix code-behind and non-code behind techniques sometimes. I have utility functions defined in a VB module. Is there anyway for me to call functions defined in VB module...
3
by: Thubaiti | last post by:
Hi, I have this code in my ASP.NET and I want to convert it to C# (code behind) <asp:Repeater id="subCategoryRepeater" runat="server"> <ItemTemplate> <ul> <li> <asp:HyperLink...
1
by: Julius Fenata | last post by:
Hi all, How to synchronize Label1.text between: document.getElementById("Label1").innerText (at Client Script) & Label1.text (Code Behind). I mean, I have assign new value to Label1 in Client...
2
by: Mahesh P | last post by:
Hi all; I am using code behind class with each aspx page; can i use multiple code behind class with a single aspx page. dont consider user controls.
1
by: Kamal Ahmed | last post by:
Hi All, I have an aspx file written using vb.net that contains code both in code behind and inline. I want to access variable, object/classes declared in code behind into inline .aspx file....
3
by: vivekian | last post by:
Hi , I have a table which needs to be populated at runtime. Is there a way to do this without using a server side control like repeater or datagrid ? How can an HTML control be accessed in code...
2
by: John | last post by:
Hi I have a non code behind web form done previously. How can I turn it into a web form with an associated code behind file? Thanks Regards
1
by: archana | last post by:
Hi all, I am new to asp.net. I have one question regarding code- behind model. I have written page_load event in code behind as well as in aspx page. Means i am doing mixing of code-behind...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.