A stupid question about ems & containers

Forum Moderators: not2easy

Message Too Old, No Replies

A stupid question about ems & containers

Please can someone break it down for me?

FranticFish

6:11 pm on Jan 10, 2024 (gmt 0)

I know this is a daft question and likely I'm not searching on it correctly, because I cannot find an explanation that I can understand about the way ems cascade down through a layout.

My question is this: does setting a container width and/or height in ems (but NOT a font-size) have any effect on font sizes which are then declared on child elements?

I have a <div> and set a width and/or a height in ems; inside that I have a <p> which has a font-size in ems. There is no font-size attached to the <div>, only to the <p>.
Will the font-size declaration attached to the <p> be affected in any way by the width and/or height of the parent <div>? Is width OK but height is not? Or the other way round? Or both? Or neither?

And does this also depend on any GLOBAL font size? And/or any other settings?
For instance, I use a CSS reset but I never declare a font size - I let the browser determine this (I gather it's usually 1em/16px equivalent).

Fotiman

1:27 am on Jan 11, 2024 (gmt 0)

No, setting the container width or height (in ems, or in any unit) will not have any effect on font sizes on child elements. Even if the container doesn't have an explicit font-size declared, it still has an implicit font-size, and setting the width in em units will set it relative to the implicit font-size.

FranticFish

8:04 am on Jan 11, 2024 (gmt 0)

@Fotiman - thanks.

Even if the container doesn't have an explicit font-size declared, it still has an implicit font-size, and setting the width in em units will set it relative to the implicit font-size.

So I had it completely the wrong way round. It is the font-size - whether implicit or declared - which can affect the width.

Further question: I take it that any implicit font size would either cascade down from the reset or be set by the browser? It seems to me therefore that it is good practice to set 1em in the CSS reset so that all containers are 'neutral' (by that I mean that declared width in ems will have the best chance of being actual width in ems).

londrum

8:13 am on Jan 11, 2024 (gmt 0)

Its easier to use rem's because they are always relative to the font-size of the root container (<html>) . Then it wont matter what font sizes you set for anything else

[edited by: not2easy at 12:39 pm (utc) on Jan 11, 2024]
[edit reason] disabled smilies [/edit]

lucy24

6:00 pm on Jan 11, 2024 (gmt 0)

Every browser has a default font size, which is used unless and until the individual page sets something different, either for the page as a whole or for specific elements. Users of a certain age are likely to go into their browser prefs and set a different (i.e. bigger) preferred size. For this reason, please don't ever set an explicit font size in points or pixels. Stick with percentages, which always refer to what the size was before you said anything: a 67% item nested inside a 75% item ends up at 50% of the original size.

Trivia: The em is technically a measure of height, not width. But unless you are using a font with very non-standard proportions, ems are the most useful means of setting element width. For example, max-width: 40em for the main text; text-indent: 1em for text paragraphs, and so on. In a fixed-pitch font, each character is exactly one-half em wide.

If you have doubts about current font size, you can say {font-size: medium;} to revert to whatever the user's overall default is.

tangor

2:34 am on Jan 12, 2024 (gmt 0)

Em's your best friend! Switched over long ago.

FranticFish

7:24 am on Jan 12, 2024 (gmt 0)

Thanks for all replies guys. Just to be clear, I currently use ems for everything (including media queries) except very thin lines (required by some designs people want) where I use 1px because I want 1px no matter the screen size.

@londrum - I'll read up on rems before starting my next project, this one is close to completion. If it's a simple 'rems for containers', 'ems for text' split that sounds great. However I do remember that I decided against using rems when first trying to teach myself responsive. That might well have been a mistake, or perhaps the information that led me to stick exclusively to ems back then is now out of date because there were browser quirks re: rems no longer exist.

@lucy24 - I use 150% text in my own browser even with my reading glasses and a 40 inch screen, so I'm not going to declare any font sizes in px. It goes against everything that responsive is supposed to be.

Please can I get a confirmation on this course of action on my current project?

I have just gone into my CSS reset and declared a font-size of 1em. This does not affect my 150% font size preference in the browser so it should not cause issues for others with less than perfect eyesight. However, if I am understanding what I've read above, this should then stop any browsers with less (or more) than 1em equivalent font-size from rendering my containers at widths other than those I set in ems. Is this correct?

lucy24

5:44 pm on Jan 12, 2024 (gmt 0)

declared a font-size of 1em

This should have no effect whatsoever on anything, since it simply means �set the font size to whatever the font size already is�.

any browsers with less (or more) than 1em equivalent font-size

I'm not sure what this is intended to mean. The browser's default font size is 1em, whatever that em may happen to be.

FranticFish

3:23 pm on Jan 14, 2024 (gmt 0)

@lucy24 - thanks for the reply. I was not aware that 1em was default. I guess I'm still too used to thinking in pixels.

I was advised as follows above:

Even if the container doesn't have an explicit font-size declared, it still has an implicit* font-size, and setting the width in em units will set it relative to the implicit font-size.

( * emphasis mine )
Given that I had said in my opening post that...

I use a CSS reset but I never declare a font size

... I took this to mean that it was possible for a font-size OTHER than 1em to be the "implicit" font size referred to.

I never declare font sizes on a <div>. I always put text inside a <p>, <ul>/<li> or <span> and declare font size on that. This will always be via a CSS class called on the direct container for the text (e.g. p.mystyle) or at least as text element inside a div (e.g. div.mydiv p). And I never declare any font-size (in ems or anything else) in my reset.

So, if the default font-size is always 1em no matter the browser, then there will never be an "implicit" font size in my layouts. Am I correct?

lucy24

7:50 pm on Jan 14, 2024 (gmt 0)

1em = 100%. One hundred percent of what? Of whatever the currently declared size is.

There's always a default font size, set by the user's browser. Than, any time the CSS specifies a size, like

h3 {font-size: 150%;}
.footnote {font-size: 90%;}

then that newly calculated size becomes the new em for as long as you are in the element. And if you have elements with different font sizes nested inside each other, it�s calculated relative to the most recent container.

Try this:

.newsize {font-size:80%;}
...
<p>blahblah
<span class = "newsize">blahblah
<span class = "newsize">blahblah
<span class = "newsize">blahblah
</span></span></span></p>

See how that works?

Citation (in code markup to preserve the fragment):

https://drafts.csswg.org/css-fonts-4/#propdef-font-size

But something tells me this is as likely to send you screaming in terror as it is to be useful :)

If you declare a global line-height like �1.2em� (which I recommend, because the default 1em is too crowded, especially in longer blocks of text), it means 1.2 of whatever the current em is. If you declare a global �text-indent: 1em�, it means whatever the current em size is.

Would you like to hear about absolute sizes? Let me do a concrete example.

span.pagenum {position: absolute; right: 2%; font-size: small;
font-weight: normal; font-style: normal; font-variant: normal;
text-align: right; text-indent: 0;}

The item �font-size: small�--on no account to be confused with �smaller�--means �the next size smaller than the overall default size�, where the overal default is called �medium�. (Exactly how much smaller depends on the browser.) I use this for an element that might happen to occur inside something with a non-standard font size (a table, header, footnote, whatever it may be) to ensure that <span class = "pagenum"> always displays at the same size.