-1

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
verdesmarald
  • 11,646
  • 2
  • 44
  • 60

2 Answers2

1

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?

Bazzz
  • 26,427
  • 12
  • 52
  • 69
  • But surely the height and width of the characters stay in the same proportion as the size changes? Can it really be the case that at 1em a 't' is 12pt high and 6pt wide, but then at 2em it is 24pt high and NOT 12pt wide? If this is indeed the case, why should it be different for a monospaced font? *EDIT: I see the same effect using courier.* – verdesmarald Jun 03 '11 at 08:41
  • Just thinking about it, it is probably true that the font remains in proportion and therefore a mono-spaced font will have the same issue. A few thoughts that crossed my mind: perhaps the width of the container is rounded to whole pixels? Perhaps the space between characters doesn't stay in proportion with the font-szie change? I'm not sure, and don't have a concluding answer. – Bazzz Jun 03 '11 at 11:00
0

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.

user207421
  • 305,947
  • 44
  • 307
  • 483