I know how to set a background in a div like:
background: url(/images/image.gif) no-repeat top right;
Sometimes I need more fine grained control, other than say top, center or bottom.
I have seen people using 'em' in the position section, what is that doing?
See the MDN reference for background-position. Instead of general terms, you can also use percentages or other CSS units of measurement to set an x- or y-offset. em is a unit that refers to the font size for the current element, but you can also use px for pixel offset.
Keep in mind the em is a RELATIVE size - so a 1em is a relative to my container and NOT actual size. A 1, is a 1em based on my browsers default.
So a parent (say .parent) class with a 1em and a child with a 0.75em would be .75 of the parent. A grandchild of that parent with 0.5em would be 0.5em of the 0.75, or approx 0.375 of the original 1em and not 0.5 of that original.
I don't use .px - it is easier to start, but when you need to change everything, you need to change it everywhere - so if you change the 1em to a 1.25em, it also changes the child and grandchild nested within those.
for a concrete example, if I put a margin-top: 0.5em; in a CSS, I am saying to put half the height of my current font as the top margin.
.px - pixels which change depending on the monitor setting and has origins in screen resolution.
.pt - is point, which means that on a printed page, 72 point is approx 1 inch - it has origins in printed material.
% has origins in well, percentage, and I find it more difficult to manage long term.
em has origins in markup.
Most browsers have 12pt (point) font as the base (if I remember correctly), which is 1em, which is - an unknown number of pixels really. SO, off the cuff if I remember .625em is approx 10pt, so if I set the body to .625em, then my .5em below that is 5 point in size, 2em below the body would be 20 point and so forth.
EDIT: my math bites at the end of the day :) so 10/12 is .8333 - so we need .8333 not .625, but you get the idea.
Gradients can be controlled by
background:#fff url(images/vertical_sliced_image.gif) repeat-y;
or
background:#fff url(images/horizontal_sliced_image.gif) repeat-x;
You can slice 1px height or 1px width (Gradient image) and repeat it in the background horizontally or vertically...
hope this helps
Related
I am trying to get the padding pixel perfect to the baseline and top of the capital letters in a font (in this case Google Roboto). This means that if i want 100px padding, I need to subtract the amount of "built-in padding" that the font has.
I was able to open the font in glyphs trial version and get some useful numbers, however the numbers that give the best results are far from intuitive, and I'd like to know how it really works.
Here is an image of the codepen where i am exploring:
Text is 100px and desired padding is 100px (to the edges of the E)
Left block is with line-height: 1em
Middle is with line-height:1.4em
Right is an image showing the calculation method using info from glyphs
The red background shows the size of the paragraph element.
The blue background around the dash "-" is because it is selected - also indicates an interesting size, which most closely matches the apparent size of the whole "art-board" when opened in glyphs.
I found out that if I calculate the distance between the midline guide and the top and bottom of the letter, then i can calculate how much space there is above and below the letter and then divide by 2048 (the number of units the font indicates for 1 em).
.div1 {
padding-top: calc( 1em - 0.132em );
padding-left: calc( 1em - 0.081em );
padding-bottom: calc( 1em - 0.157em );
padding-right: calc( 1em - 0.081em );
}
The results seem solid, but is it really needed to dive into such detail to get the numbers??
Isn't there a way to calculate this in css or js?
I'm setting:
font-size: 13.44px
line-height: 1.4881
Multiplying those, gives us 20.000064
But the rendered/calculated height of the box is 19px
Why?
http://jsbin.com/vokesukeye/2/edit?html,output
The font-size seems to be rounded up or down for this calculation.
When I increase your CSS font-size to 13.6px (via Chrome's "Inspect" function), the text container height was increased from 19px to 20px.
You may want to try to use "Inspect" with your browser and interactively adjust these CSS settings to determine your CSS settings.
As I wrote in my comment earlier: The pixel values are being rounded, first to font-size 13px and then the result to 19px, due to the nature of pixels (which are a whole pixel or no pixel, except possibly on retina displays)
I wasn't sure how to word the question for this topic...sorry.
I'm just starting to learn CSS.
I have a <div> with a background image and there is text within the <div>. I read that choosing font sizes in em is a good choice because some people might require larger text sizes in their browsers. So setting the font-size with em would accommodate these types of users better.
But the problem with allowing the text to be resized, is that in many cases, the text within my <div> is going to go beyond the size of the background image and make the page look terrible and poorly designed.
Is there a way to use CSS and allow the background image to 'match' or 'expand' to accommodate to larger text size?
You could set the width of the div to the img width so that it never expands wider (beyond the image).
Of course, the enlarged text would force the div to grow height-wise.
You could also set the background-img to repeat (if the image allows for it), so that when the text expands, the image is repeated.
background-image:url('whatever.png');
background-repeat:repeat-x;
// x = horizontal, y = vertical
Since you are starting out, you might want to read http://na.isobar.com/standards/#_pixels_vs_ems wherein they say:
We use the px unit of measurement to
define font size, because it offers
absolute control over text. We realize
that using the em unit for font sizing
used to be popular, to accommodate for
Internet Explorer 6 not resizing pixel
based text. However, all major
browsers (including IE7 and IE8) now
support text resizing of pixel units
and/or full-page zooming. Since IE6 is
largely considered deprecated, pixels
sizing is preferred. Additionally,
unit-less line-height is preferred
because it does not inherit a
percentage value of its parent
element, but instead is based on a
multiplier of the font-size.
Correct:
#selector {
font-size: 13px;
line-height: 1.5; /* 13 * 1.5 = 19.5 ~ Rounds to 20px. */
}
Incorrect:
/* Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */
#selector {
font-size: 0.813em;
line-height: 1.25em;
}
We have a CSS file with some rules similar to the following:
.directory-result ul
{
margin-top: 20px;
width: 60em;
}
.about-text
{
margin-top: 1em;
margin-bottom: 1em;
}
Everything is working ok, but we're wondering specifically about the inconsistencies between the margin-top values. One is 20px and the other is 1em.
Which is the best one to go with? What are the points I should consider when deciding which to use? Thanks.
em units are used for better scalability of the page when the size of the elements depend on the page's scale. It's especially important for old browsers (e.g. IE6) and mobile platforms.
px units are used for absolute values, while em is relative to the font size of the particular element.
1em means one font-line, e.g. you have a box with font-size 12px that means that 1em will be equal to 12px
Also, using px seems easier because you know the exact value, but em units inherit the value of their container.
<p>Text</p>
<div class="box">
<p>Lorem</p>
</div>
p {
font-size: 1.2em;
}
.box {
font-size: 1.2em;
}
In this case, the first <p> will have font-size equal to the basic font-size * 1.2, and the second <p> will display with font-size * 1.2 * 1.2.
They're simply two different ways of measuring. Em is linked to the font size (traditionally, 1em is roughly the width of the letter M in a given typeface), while px is pixels.
If you build everything using em, everything will scale accordingly when the user adjusts their font size (e.g. using IE's Page > Text Size menu). It also makes it easier to work to a vertical rhythm.
Pixels are better when you want to build something "pixel-perfect". Be aware that a CSS pixel doesn't always equal a screen pixel - mainly because modern browsers and mobile devices allow for zooming. This isn't usually a problem though because the entire page is scaled accordingly.
Whatever you do, make sure you're consistent throughout - it makes life much easier later on.
The ems unit is relative to the current font size in the browser. So if the user increases the font size*, or if you change an element’s font size in the CSS, the margins should still look “right” in proportion to the text.
*(This ceases to matter if the user zooms the page instead of increasing the text size (as is the default in Firefox and Chrome now, and is an option in IE).
If you're using a margin to position something a set number of pixels away from something else, then you should obviously stick with pixels.
Also here is a very good in depth tutorial:
px – em – % – pt – keyword
In this example directory-result ul represents a block - some sort of list/menu where pixel dimensions are quite important. We can’t always rely on em which defines the text size, because if we need 20px space due to some background image – well, we need 20px, no compromises.
Note that you can't create and save the image i.e. 10em wide, therefore I see no reason why should I use different units on a web page. It just creates confusion and later on it is very difficult to maintain the layout.
There is a one place though, where using em is advisable – I’m talking about text blocks. I’m guessing in your code about-text is placed within other text where adding top/bottom margin of 1em (height of text) makes sense. It’s like in any text editor (i.e. line spacing in MS Word) – text looks best when spacing between lines is defined by multiplying the height of text
So in my opinion – everywhere where you deal with design and you use images by default measured in pixels – usepixels for all padding/margin.
Everywhere where you deal with text inside a text block, and you want to add even spacing between the text nodes – useem.
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,