Is it possible to reduce the size of all element of DOM by a specific value?
I am using bootstrap style now.
Like for h5 it is 14px and I need 12px, for h1 it is 36px and I need 34px so on.
I have 2 options to do it
To rewrite a custom css for all element. It needs a huge change.
Using jQuery. I need to traverse all element of DOM. Find out there
font-size and reduce it by 2px. It will slow down page load time.
Is there any better way to do it?
What you can do is, you can set a base font-size for your body in rems.
Meaning, you have to set a font-size property for your body like so:
body {
font-size: 10px;
}
After this, a rem unit becomes equal to your base font-size:
1rem = 10px
Therefore, you need to set the font-size of all your elements to rem's.
When you want to scale everything down or up, simply change the body font-size property and it will scale everyting else accordingly.
Thus, the units become relative.*
If you want to go down the JS ways, you can use a plugin like FitText or some other alternative.
Related
A certain element in my HTML has a parent element with font-size: 0, but then it has its own CSS rules with font-size: 1.9em. I can verify this in Chrome’s computed properties panel. I can also see that the style with font-size: 0 is crossed out, so it's overridden. And yet, to my great surprise, the resultant calculated font-size is still 0. How can this be possible?
(The element does not have any inline styles, if anyone is wondering)
If you create parent element with a font size 0px every tags inside which has font-size specified in emphasis like 1.9em it will calculate 0*1.9 = 0px.
You may want to use root element font size (specified in the html tag)
font-size:1.9rem;
When the html tag has font size set for 10px it will produce 1.9*10=19px.
Im using em font sizes, which is working fine for everywhere apart from the sidebar.
In the main content the em size is great. If I copy this em size to the sidebar the text becomes larger.
Im using a html/body size of 17px. Then 1.412em to get the size I would like. To see a live link of the sidebar font bigger go to this link. If you look at the twitter feed on the right sidebar you will see its using the same em but you view it a lot larger.
Using em as measurement value would just not inhert but increases accordingly.
Here's an example:
<div>
<p>
<span>foo bar</span>
</p>
</div>
body{
font-size: 1em;
}
div{
font-size: 1.5em;/*1.5em of 1em == 1.5em*/
}
div > p{
font-size: 1.5em;/*1.5em of 1.5em inherited from div == 2.25em*/
}
div > p > span{
font-size: 1.5em; /*1.5em of 2.25em inherited from p == 3.375em*/
}
So, I would recommend you to use px as measurement value.
Use ems to make scalable style sheets only.
If you want to know more about px, em, and % please follow this link and this link
Don't use em for font-size, that's just about the only place where you should never use it.
1em is the size of an m in the current standard font. You can use this to set paddings/margins, for example between paragraphs or around text blocks, that need to scale according to font size, to cater for people using custom settings at OS/browser level, or just as an easy way to keep a 'good' distance without having to worry about precise pixels.
Scaling a font to a relative size to the m of the current standard font makes no sense at all, unless you want to achieve this effect. If you would want to, it would be more logical to specify font-size:110%, for a single element or block. As a rule, use pt or px to specify font sizes.
I want to set my font-size to 100% (that is, 16px as default in my browser). Having embedded Bootstrap and its' Normalize.css, when I set font-size to 100% or 1em my text gets even smaller than 16px!
PS. Once I explicitly set font-size to 16px it does work, though it is not what I'm looking for.
I came across this question while dealing with exactly the same issue today. Here's what happens:
bootstrap.css sets html {font-size: 62.5%;} - this is 62.5% of whatever the browser's default font size is - probably 16px., i.e. you end up with a starting font-size of 10px in your <html> element.
Then bootstrap.css sets an explicit body {font-size: 14px;} which overrides the 62.5%/10px font set on <html>.
Now your css comes along and sets a body {font-size:100%} and since the 100% refers to the parent element's font-size, i.e. the <html> element, you get 100% of 62/.5% and presto - tiny font.
I guess the main thing here is that font-size:<percentage value> is relative to the parent element's font-size, not the current font-size. The above holds for em units too, since they also uses the parent's font-size.
To get around it, either set html{font-size:100%} in your css (not sure how bootstrap gets affected by that though), or set an explicit pixel font-size in your css for the body, or inherit whatever bootstrap sets up.
Malte
did you edit this in the bootstrap CSS itself? so yes, make note of changes, and add a 2nd CSS line in your webpage UNDER the CSS of bootstrap, in the new CSS< you only make new rules of changes, those wil " overwrite" the bootstrap CSS when the browser reads them
Try loading your css file after the bootstrap css file.This way you can overwrite almost any property specifed by the bootstrap.Your css will take precedence of the bootstrap file.You can also set !imporatant to properties that you specifically want to overwrite although loading your css after bootstrap will do the trick
http://jsfiddle.net/mJxn4/
This is very odd: I have a few lines of text wrapped in an <em> tag. No matter what I do, lowering the value for line-height below 17px has no effect. I can bump the line-height up to greater than 17px and it'll apply, but I can't get it lower than 17px.
The CSS in question is:
#others .item em {
font-size: 13px;
line-height: 17px;
}
Try adjusting the line height both higher and lower and run the updated fiddle after each change, and you'll see what I mean.
Why would this be? No line-height is specified anywhere else in the CSS, so nothing is overriding it. That couldn't be the case anyway because I'm adjusting the line-height up and down within the same selector, so it doesn't make sense that a higher value would apply, but a lower value would get overridden.
Because the em tag is inline and its line-height cannot be lower than its parent div.
For example, if you set the line-height of the parent to 10px, then you would be able to decrease the line-height of em tag to 10px as well.
In order for line-height property to work, div should has display property equal to block
.app-button-label{
line-height: 20px;
display: block;
}
I was facing this problem with divs in mobile view - the line height was way too big and line-height wasn't working! I managed to make it work by adding "display:block", per advice here: Why isn't the CSS property 'line-height' letting me make tight line-spaces in Chrome?
Hope this helps anyone else facing the same problem in future
You seem to be using normalized css option in jsfiddle - which equates to the CSS rules being reset - ala http://meyerweb.com/eric/tools/css/reset/
You can either reset the reset, or use a different reset if you really need it.
See here for more details:
http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/
The best way to do it is using css reset.
Write your own or use popular one like
http://meyerweb.com/eric/tools/css/reset/
Yes, the block level elements(h1, h2, h3...h6,div) sets the minimum line-height for its inline children elements(span, em etc.). Which means if there is a element inside (with line-height 1.5), then the can set minimum line-height of 1.5 and no less than it.
The simplest way is to specify the line height with a higher priority, for example you could write: line-height: 14px !important;
If it is still not working set high priority in both where you u would like to decrease the line height (inline css) and also put in the body css .. remember the high priority (!important;) because it overrides any other unknown css rules.
Hope this helps
Ahmed
I'd like to try and convert my designs from pixels to ems. I've read so many tutorials that... and I'll leave it right there.
Starting with this as my base:
body {
font-size: 62.5%;
line-height: 1.4;
}
... now this is where I get lost...
Should I be defining my font-size like this:
div#wrapper { font-size: 1.5em; }
... or like this:
blockquote, li, p, dt, dd, etc { font-size: 1.5em }
And then the next thing I don't really understand is where ELSE should I be using ems in addition to font-size and line-height? I will be using a fixed-width layout using 960.gs.
line-height: 1.4em;
Probably isn't what you want. The line-height will stay at the same computed height for the size of an ‘em’ on that element, even when you change the font-size on a descendant element.
line-height has a special case where it allows a unitless number:
line-height: 1.4;
Which makes each descendant line-height depend on its own font-size rather than the ancestor's.
Should I be defining my font-size [on a wrapper or on many element types]?
Well that rather depends on what you're trying to do. With relative font-sizes it is generally best to keep the number of declarations down to a minimum, because they nest: that is, with your blockquote { font-size: 1.5em; }, if you put a blockquote inside a blockquote you'd get a font-size of 1.5*1.5=2.25em compared to the body font size. Is that what you want? Maybe, maybe not.
where ELSE should I be using ems
Anywhere you want the size of an element to respond to the user's preferred font-size. One common example would be something like:
#maintext {
width: 60%;
min-width: 8em;
max-width: 40em;
}
to try to restrict text lines to a reasonable column width when doing liquid layout.
But if you are limiting yourself to a fixed-width layout it may not make sense to make element widths font-size-dependent.
You may find How to size text using ems an interesting and helpful read. The thing that I try to remember is my conversion from ems to pixels.
In your example:
body {
font-size: 62.5%;
line-height: 1.4em;
}
1 em is equal to 10 pixels if the browser default text-size is 16px. The line height would then be equal to 14 pixels. Like bobince beings out, I would use a unitless line-height value.
To help you with your calculations, you can use an Em Calculator. It allows you to easily convert between ems and pixels.
The problem with em is that it is a relative unit. Inheritance and relativity don't mix well in HTML documents. What I do is use px for font size and box dimensions / positioning, but try to use em for line-height, margin / padding, etc...
I'm sure it's not the "proper" way to do it, but the system was pretty poorly designed from the start, if you ask me.
ems are relative, so if you set:
body {
font-size: .6em;
}
Everything will be relative to that.
Which means (and this is where my head starts to hurt too) that if an h1 has a default font size of 250% larger than most other text (p, li), the header will now be 60% of that default size. So it will still be 2.5 times bigger than the other stuff, but it will be 60% smaller than if you hadn't set the rule at all.
Now, if you then say that :
h1 {
font-size: 1.2em;
}
The h1 will now be 20% larger than what it would be if you hadn't set the rule, so it's 20% larger than the already shrunken down 60% smaller from the first rule. This means that it will no longer be in direct proportion to the browser's default for h1 and other elements.
So basically, you should set your font-size up front for the whole document (like in the first rule I showed), and this is your baseline. After that, you set how you want any individual elements to be sized in relationship to each other (basically in relationship to what they already are)...
So if you know you want all of the fonts in the #wrapper div to be 1.5em from their default, setting it there is perfect. But if you want to change the size of blockquote so that it's a tad smaller, you'd still set the rule for #wrapper, but then make a second rule for blockquote.
If you want to set up page width by using em's, follow this pattern provided by YUI development team
Divide your desired pixel width by 13; the result is your width in ems for all non-IE browsers. For IE, divide your desired pixel with by 13.3333 to find the width in ems for IE.
Here's an example of a custom page width of 600px, and here's what the CSS looks like:
600 px / 13 = 46.15 (non-IE browsers)
600 px / 13.33 = 45.00 (IE browsers)
#custom-doc {
margin:auto;text-align:left; /* leave unchanged */
width:46.15em;/* non-IE */
*width:45.00em;/* IE */
min-width:600px;/* optional but recommended */
}
regards,