2014-04-19 18:03, Freelance Traveller wrote:
If I set a width on an element - or a max-width or min-width - in ems,
is it correct to assume that the actual size will be based on the font
size OF THE PARENT ELEMENT?
No, by definition, the em unit equals the font size of the element
itself, except in the special case of a font-size value (where it would
make no sense to use the em unit in that meaning and where it is instead
defined to equalt to the font size of the parent).
In other words, if the font size in the BODY
is 12-point, and I set the width of a DIV to 10em, it will be 120 points
- or, at 16px=1em (same as 12 point, at 96ppi), 160px - correct?
Only if the DIV element’s font size equals the BODY element’s font size
(which is what happens via inheritance if no style sheet sets font size
on the DIV element).
And
then, the text inside that div will default to the same 12pt=16px=1em
unless I reset it
Unless *something* sets font size on an inner element.
- and if I reset it to e.g., 0.75em, and then there is
a SPAN inside a P in that DIV, the 'default' em size for the SPAN will
be 9pt=12px=1em”, unless I reset THAT:
Yes, unless *something* changes that.
(In the below, I'm using curly brackets instead of angle brackets to
keep HTML-based mail programs from accidentally trying to render it.)
That’s rather pointless. If someone’s newsreader interprets HTML tags in
plain text format e-mail, he needs to fix that. Others should not munge
code for such reasons.
{!DOCTYPE HTML}
{HTML style=font-size: 12pt;}
{BODY} {!-- 1 em is (still) 12 points --}
{DIV style=width: 10em;} {!-- width will be 120 points --}
{P}This text's em size is 12 points.{/P}
{P style=font-size: 0.75em;}This P's em size is effectively 9
points, and {SPAN style=font-size: 0.67em}this SPAN's em size
is effectively 6 points,{/SPAN} and this is back to 9 points.{/P}
{P}And this is back to 12 points.{/P}
{/DIV}
{/BODY}
{/HTML}
Given that document, and assuming no user style sheet interferes, what
you describe in the comments is correct, except that the inner SPAN has
a computed font size of 6.03pt, but this usually causes no visible
distinction from 6pt. However, browsers often impose a minimum font
size, for good reasons, so what you get might actually be larger than 6pt.
HOWEVER, if I use *rem* instead of *em* in the sample above, the BODY
will still have an em size of 12 points, the DIV will still be 120
points wide, the first and third P will still be 12 points, the second P
will still be 9 points, but the SPAN inside the second P will be EIGHT
(8) points instead of SIX (6), correct?
If you declare font-size: 0.67rem on an element and if the root
element’s (the HTML element’s) font size is 12pt, then the computed font
size will be 8.04pt, independently of nesting. It is a key feature of
the rem unit that its value only depends on the root element’s font
size, not on any element nesting. The usefulness of rem is often
exaggerated, however; part of this is incomplete browser support.
Now, assuming that my understanding is correct... Are the character
entities emsp (em space) and mdash (em dash) truly and reliably one em
in width? Or does the lousiness of many (free) fonts out there extend
even to this?
That’s really a completely different issue, and independent of CSS; it
is a character and glyph level issue. However, CSS can be used to check
such things. Just put a character in a block element with width: 1em and
e.g. a visible outline, and you will see the width of the glyph.
In many fonts, EM DASH has a visible width of 1em, but there is no
requirement on this, and in fact the width is smaller e.g. in Georgia
and Verdana. The advance width (i.e. the width of the visible glyph plus
any inherent spacing on the left and on the right of it) may be larger,
but again, it need not equal 1em. The name EM DASH is partly misleading.
EM DASH is just a punctuation mark, used mainly in US English, to
separate (like parentheses) remarks—like this—in the middle of a
sentence, and in a few other uses. Typographically, it should be
noticeably wider than EN DASH, but there is no fixed rule on its width.
The EM SPACE, on the other hand, has been defined to have the width of
1em. The code chart in the Unicode Standard says: “nominally, a space
equal to the type size in points”, which is a bit messy way of saying
that its width is 1em. But the standard adds: “may scale by the
condensation factor of a font”. In practice, in HTML documents, if you
justify text (text-align: justify), EM DASH and other fixed-width spaces
are not stretched. However, this is just what happens in practice, not a
requirement. There is a precedent: browsers used to treat NO-BREAK SPACE
as non-stretchable in justification, but this has now been changed.
Yucca
