In Firefox, if I zoom in by hitting CTRL + everything grows proportionally as expected. However, on Chrome, only measurements specified in px grow. Measurements specified in em do not grow. How would I make Chrome's zoom behave like Firefox's?
Original Zoom Level on Either Browser:
Zoomed In on Firefox:
Zoomed In on Chrome:
Here's an example of the CSS for the text shown above. The reason why I mix em and px is because I would like to scale structural things (defined with em) without scaling aesthetic things (defined with px). For example, If I needed to use the Facebook button on another page at double the size, I just set the containing element to font-size:2.0em. This would multiply all structural sizes by 2, while leaving the aesthetic sizes untouched.
h1 {
font-size: 2em;
text-shadow: 0 -1px solid rgba(0,0,0,0.5);
}
Related
I'm using a technique for scaling text based on view width, here. It uses a simple formula to smoothly scale within a set range (min/max) of font sizes, depending on view width within a set range (min/max). It works very well.
But I'm confronting an issue with this and other techniques for fluid font size. If I set letter spacing to constant value, it may breaks down visually. 1px letter spacing for a font displayed at 20px might not be ideal for when it displays at 50px.
There are also situations where a user might change the font size. It would be the same issue.
Is there a solid way to deal with this issue that is fluid, to make letter-spacing proportional to the font size?
Try using em units to control the the spacing.
here is a possible reference: https://cssreference.io/property/letter-spacing/
I tried using calc, along with view width:
letter-spacing: calc(1px + (10 - 1) * ((100vw - 320px) / (1440 - 320)));
It works, but I think using ems is better.
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 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