I am trying to build a layout using css where all dimensions are specified in em. I was under the impression that this would allow the page to display the same way at different font sizes/zoom levels. However, I am noticing that text wraps differently as the size/zoom changes.
For example in this jsfiddle, the text displays all on one line at my native zoom and a font size of 1em, but wraps at a font size of 2em. I would expect it to either wrap/not wrap consistently since the width of the container is in em, and should therefore increase proportionally to the font size.
Am I doing something wrong, or am I just misunderstanding what em measurements are useful for?
You understood it correctly, but font-size defines the HEIGHT of the font, not the WIDTH, therefore container widths defined in em contain a different number of characters in one line in different zoom levels and font-sizes.
I think that if you change your font to a mono-spaced family, it might produce the effect that you are after. Worth a shot?
font size of 2em
There is no such thing as a 'font size of 2em'. An em is a unit in the current font size, so the statement is circular. It is margins and indents and widths that should be defined in ems, not font sizes themselves.
Related
I heard that relative units are better then absolute, but sometimes browsers round it wrong and it's hard to calculate. Do you know any tool that can help?
I used SASS/Compass. It's good and very easy, but not perfect…
As per the comment, “vertical text rhythm” seems to refer to line grid. Line grid has generally been ignored in CSS, largely because it is mostly relevant in print media and in multi-column text layout. Basically, the way to make things snap into a line grid is to use consistent sizing in vertical direction, using the same units. For example, if you set line height in em units, set heights and vertical margins in those units, too. To make an image fit into a line grid, wrap it in a container with a height in em units. Alternatively, do all vertical sizing in px units.
It is true that rounding may cause problems, since em dimensioned things ultimate get converted to pixels. So if you set line height to 1.3em and in image container height to 3.9em, the latter might not yield exactly 3 times as many pixels as the former but one pixel less or more. If this is crucial and you consider using pixels, remember that a CSS pixel need not correspond to a physical pixel in a device.
In CSS Line Grid Module, currently existing as an Editor’s Draft only, there are properties for using a real line grid. They have been partly implemented in Chrome, with the -webkit- prefix. If a line grid is desired, it can hardly hurt to add code that tries to snap content into the grid and may do so in Chrome:
body {
line-grid: yourNameForLineGrid;
line-snap: baseline;
-webkit-line-grid: yourNameForLineGrid;
-webkit-line-snap: baseline;
}
When you have two inline elements that share the same line, and the bigger one is vertical-align: baseline and the smaller one is vertical-align: middle why does the middle aligned element appear below the baseline element?
I've put together a demo illustrating what I'm talking about:
http://jsfiddle.net/mLSG2/
It appears that the smaller element's mid-line is aligned to the larger elements baseline, but that doesn't seems to make much sense to me. If this is true, what is the rational behind it?
More generally, can someone explain how alignment is calculated when elements of varying line-heights and varying vertical alignment declarations share the same line? Is there a place in the spec that defines this?
By the specification, vertical-align: middle should “align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent”. In this case, the vertical middle of the line box for the italic text should be aligned to the baseline of the div element plus half the x-height of that element. This makes it rather close to that baseline, really.
Since fonts are not set here, browsers will typically use a default font size like 16px. The x-height depends on font, but let’s assume the rough average: half of the font size, 8px. Half of that makes 4px, making the difference rather small. (The font size of the div element is not changed by the presence of inner elements with larger font size.)
The situation may be obscured by browser bugs. The vertical-align property has a buggy history. Often it’s better to use relative positioning.
When working with multiple resolutions, the "em" based approach seems a good way to code your css file. However, if you have say two resolutions 480x800 & 540x960, then the width ratio ( 540/480 = 112.5% ) is NOT same as height ratio ( 960/800 = 120% ).
So, if I have an em font size = 112.5% for moving from lower resolution to higher, the width seems perfectly aligned to new resolution but height ( which expects font-size of 120% ) seems to fall short and therefore there is a white blank space created at the bottom after rendering all elements for the page.
Any solution to this problem would be great help.
em is a unit of choice for fonts, not so much for element dimensions. With it evaluating to element's font-size, it's simply not reasonable to be setting widths using this unit.
You may be trying to refer to a vertical rhythm, which is a concept of maintaining text readability and should not be confused with the rest of the page layout.
For aesthetically pleasing rendering under different resolutions, you should look into fluid layouts - try playing with the browser width on that page. As you can see, the content flow is altered to make best use of space available, however the font size/line-height are not adjusted since the two techniques are independently implemented.
I was using em but facing problem in nested items so I decided to use % as yui suggesting.
To change the size of a font, always use percentages as the units
because they render more consistently than ems, and because they allow
user-initiated resizing (unlike pixels).
How to convert px into %? like this is for Px to em http://pxtoem.com/
Edit
I found this example is very good but it's only till 24px.
http://yuilibrary.com/yui/docs/cssfonts/cssfonts-size.html
How to calculate size in % for each size in px. As a example case, according to this table what will be size in % for 45px
There are already 2 answers posted, however, they're not correct. Every CSS property that accepts percentage length, defines how these values are being computed. In the terms of font-size, this is what CSS 2.1 says:
Percentages: refer to inherited font size
It will never depend on window size or so.
How to convert pixels into percents: in most cases, 16px is the default value for font-size - this is 100%. 45px will thus be 100% * 45px / 16px = 281.25%.
Percentage is for fluid layouts, it will always be dependent on the browser actual size and it will change upon resize, while fixed layout will never change no matter what the browser size is.
In others words, what you are trying to do, you will need to assume something that is never right.
For example, you could assume that 100% would be 1024px, but on my screen, that will be 1920px...
How to convert px into %?
You can't. A percentage is a proportion of the font size of the parent element and ultimately (when you get to the <html> element) falls back to the user's preference (which is an unknown value). A pixel size is a size in pixels (which can vary depending on the DPI).
like this is for Px to em http://pxtoem.com/
That makes assumptions about what the user's default font size is. This assumption will often be wrong.
If you want to make the same assumption, then 1em is the same as 100% (and 0.75em is the same as 75% and so on).
You don't even need to convert it yourself … the table you linked to includes percentage values!
All major browsers work with pixels internally so it will do the calculation for you. You can easily get the pixel size of the font by getting the font-size with JavaScript (in my case I use jQuery).
See test case on jsFiddle
Edit: I need more coffee, just read the question again and realized you needed the opposite.
To get the oppsite you could do like in this test case
However, you will have to know the base pixel to compare against. In the above test case I get both the percentages from the parent font-size and from the body element.
I used Firebug for this once. I used to put percent in font-size and checked in "Computed" tab. If it is same as it was in actual document then I came to know I need this percent value. After few converts, you know what percent will fit with what px in your document. Not very simple but not tough either.
Put the html and body tags at 100%. Then set every size using percentage. This will be relative to these tags, and then you get a perfect fluid layout.
Simple formular for converting PX to % is TCR
i.e Target % Context = Result * 100
this formula applicable for both font pixel to % and Fixed content box to percentage box
if your font size is 45px(target) and content value is lets put default value of font 16(Content) and your result is 2.81 and multiply with 100 you will get 281.25
and you round the value 281 %.
Ex: Finding the width in percentage of a 200px div inside a 1000px container:
200 / 1000 = .2 => Move decimal place over two to the right and this leaves you with 20% width.
Ex2: Convert left and right padding of a div to percentage where padding is 10px and element width is 350px and everything is inside a 1000px container. Here we disregard the overall container since we are dealing with padding leaving us with context being 350px and the target of 10px. Our left and right padding would then be:
10 / 350 = 0.02857142857142857 (Keep entire decimal to make sure everything is mathematically perfect) => Move decimal point over two to the right leaving you with 2.857142857142857% left and right padding.
Should I define width, height, margin, padding, line-height in em also if I'm using em for text sizing? Is it good for accessibility?
There's nothing wrong with using pixels for font sizes now. Modern browsers can distinguish text from layout when zooming, so your boxes will retain their correct style while text will be resized.
If they are to style the container of text content, I would say yes for line-height and maybe height.
For width/padding/margin of a text container where it's constrained by other layout elements, you might choose to have them sized independently of the font-size for aesthetic reason.
There's a related doctype.com question: does it really matter nowadays: px VS .em type scale units