relative font sizes and css

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

relative font sizes and css

Post by m3rajk »

i use <font size="-2">some text</font> in my pages.

i'm trying to move this to a css class that i use in a <span></span>

my problem is that the test i did for display looked like it was absolute with + and ignoring -
i tried:

Code: Select all

<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2">this is css+2</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2mm">this is css+2mm</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2cm">this is css+2cm</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2in">this is css+2in</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2pc">this is css+2pc</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2pt">this is css+2pt</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2em">this is css+2em</span></p>

<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2">this is css-2</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2mm">this is css-2mm</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2cm">this is css-2cm</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2in">this is css-2in</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2pc">this is css-2pc</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2pt">this is css-2pt</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2em">this is css-2em</span></p>
i tried it in ie and mozilla. both looked to me like it was absolute when using + and ignored when using -
i want the same size as <font size="+2">

can anyone help me out here?
evilMind
Forum Contributor
Posts: 145
Joined: Fri Sep 19, 2003 10:09 am
Location: Earth

Post by evilMind »

Negative length font-size values are not permitted. However, if you use a base font size you can make your font smaller....

Code: Select all

body &#123;
   font-size: 1.2em; /* default font-size */
&#125;
Now later you can use % to make the font samller/larger as needed.
ie,

Code: Select all

<body> <!-- our css sheet says font-size = 1.2em; -->
 <span style="font-size: 80%"> font </span> <!-- 80% of the parent's font-size -->
</body>
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

ems are automatically relative.

body {
font-size: .8em;
}

p {
font-size: .5em;
}


would give you paragraph text .4 ems in size.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

and how does that work out if i want to allow the user to use the size that's "browser friendly" ie: if the user adjusts the size in the browser, then the browser will change sizes
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

You don't mean the browser window, do you? I wouldn't do that if I were you.

I think what you mean is: "the user has set their default type size preference in the browser's settings, so how do I use that to set the type size throughout my site?"

Basically, work everything from 1em. 1.2em would be 120% of the default size. .6em would be 60%. And as I mentioned already, these sizes are relative and nestable. Be careful with that, a simple nesting mistake might drive you insane trying to find.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

.2 em in css font-size is roughly 1 in html <font size>
Post Reply