the CSS command to increase the current font size by one

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

the CSS command to increase the current font size by one

Post by raghavan20 »

Can anyone tell me how to increase/decrease the font size using CSS by x points/pixels/em. How I wanted it to work is, if current size is 10px, if I put something like +1 , it should make it as 11px, if I put as -2, it should make it as 8 px...something similar to what I have told.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Something like this:

Code: Select all

body {
    font: 11px/1.5em  "Lucida Grande","lucida sans unicode",verdana,sans-serif;
}
p {
    font-size:1.1em; // can be font-size:110%; as well 
}
#sidebar p {
    font-size:.9em;
}
h2 {
    font-size:2em;
}
Default font-size for many browers is around 16px. So if you set the body size on 62.5%, that will set the font-size to around 10px. Then if you work with % after that the mathematics are easy (120% = 12px etc)
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

I want something like what browser does, if you increase the text size in IE or Mozilla, it increases current font size of every section in the HTML page by one. Similarly I want a CSS code that finds the current font size and increases by one when I put something like +1.

anyway, thanks for your reply
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Ok, then I probably misunderstood your question.

Do you want something javascript based then? A button which people can click to increase the font-size?
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

matthijs, thanks for your continued interest in the subject.

let me give some good example..
1.

let's say we have a css setting for body
body{
font-size:0.8em;
}

we keep on writing paragraphs on divs and at some point you can want to make font bolder, you do not really want to know what the size we are using, you just want to increase based on the context, like +1 for a heading.

and you have another situation where you want to make it bolder, like +2 for it and in some case, may be at the top of the page, you want to make a piece of text to be boldest like +3 points above normal font size.


2. the second problem would be where i want to simulate the browser enlarge/reduce the font-size of the entire page...like
a paragraph with .8em
a heading with 1.0em
a subheading with 0.9em

so when you click enlarge, then it should be
a paragraph with 0.9em
a heading with 1.1 em
a subheading with 1.0em
Post Reply