Re: [css-d] Media Queries: How many pixels make an em ?
Thanks to all those who have replied. Changing the media query limits to ems at the rate of 1em = 16 pixels worked well. Likewise for div widths and anywhere with default text size. But widths, margins (in fact any dimension you care to name) went haywire in headings h? with a different font-size. All my font-sizes are percentages. Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. I'm tempted to leave margins, padding etc. in headings as pixels and just change them in the media query if they become unworkable. Particularly when it comes to small spaces (1-10 pixels, say) it seems very fiddly to deal with several decimal places of ems (which probably convert to sub-pixel dimensions). What do others do ? Regards, Tim Dawson -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
On Saturday, April 19, 2014 01:27:12 PM Tim Dawson wrote: I'm tempted to leave margins, padding etc. in headings as pixels and just change them in the media query if they become unworkable. Particularly when it comes to small spaces (1-10 pixels, say) it seems very fiddly to deal with several decimal places of ems (which probably convert to sub-pixel dimensions). What do others do ? This is a terrific use for rem. ems are always the font size, so as the font size increases, so does the size of an em. However, a rem is the font-size on the root element (html), which means that it doesn't change size throughout the page. ---Tim __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
On Apr 19, 2014, at 8:27 AM, Tim Dawson t...@ramasaig.com wrote: Changing the media query limits to ems at the rate of 1em = 16 pixels worked well. Likewise for div widths and anywhere with default text size. But widths, margins (in fact any dimension you care to name) went haywire in headings h? with a different font-size. All my font-sizes are percentages. Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. I'm tempted to leave margins, padding etc. in headings as pixels and just change them in the media query if they become unworkable. Particularly when it comes to small spaces (1-10 pixels, say) it seems very fiddly to deal with several decimal places of ems (which probably convert to sub-pixel dimensions). What do others do ? I use ems for everything. I find: 1. Browsers handle several significant decimal places without any noticeable problem. 2. Headings h? using ems present extremely well without any noticeable problem. I don't understand your statement Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. 3. ALL measurements, including margins and paddings, work well without any noticeable problems. The *only* problems I have ever encountered has been mixing measurement types. My advise, pick something and stay with it. 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. Here's my write-up on it: http://sperling.com/examples/zoom/ HTH's tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Is the em dash really one em?
The recent discussion of ems vs pixels got me thinking about the site
tweak I was exploring recently, when I inquired about the validity of
display: table-cell. I still haven't implemented the changes I was
looking at; I'm still in exploratory mode, and - as usual - have too
much hands on my time. (The person who figures out how to apply
Microsoft's DriveSpace to real life will make a fortune!)
I'd like to confirm my understanding of how sizes in ems are applied to
various elements:
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? 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? And
then, the text inside that div will default to the same 12pt=16px=1em
unless I reset it - 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:
(In the below, I'm using curly brackets instead of angle brackets to
keep HTML-based mail programs from accidentally trying to render it.)
{!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}
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?
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?
--
Jeff Zeitlin, Editor
Freelance Traveller
The Electronic Fan-Supported
Traveller® Fanzine and Resource
edi...@freelancetraveller.com
http://www.freelancetraveller.com
http://freelancetraveller.downport.com/
®Traveller is a registered trademark of
Far Future Enterprises, 1977-2014. Use of
the trademark in this notice and in the
referenced materials is not intended to
infringe or devalue the trademark.
Freelance Traveller extends its thanks to the following
enterprises for hosting services:
CyberNET Web Hosting (http://www.cyberwebhosting.net)
The Traveller Downport (http://www.downport.com)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
apr 19 2014 16:00 Tedd Sperling t...@sperling.com: 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. Here's my write-up on it: The downside is unacceptable to me, as ems for image width doesn’t respect zoom only text”. I’d use percentages for width instead. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is the em dash really one em?
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
Re: [css-d] Media Queries: How many pixels make an em ?
On 19/04/2014 15:00, Tedd Sperling wrote: I don't understand your statement Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. Given that my original margin/padding around an h1 with font-size 250% was in pixels, when I converted at 1 em = 16 px the new margin/padding sizes were 2.5 times too high. So conversion for h1 has to be 1 em = 40px to get the same on screen appearance. If that's wrong I haven't understood ems at all. 3. ALL measurements, including margins and paddings, work well without any noticeable problems. The *only* problems I have ever encountered has been mixing measurement types. My advice, pick something and stay with it. I'll give it a go 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. That's a new idea to me, I've used % for some time. I'll try it. Here's my write-up on it: http://sperling.com/examples/zoom/ HTH's I'm sure it will. Thank you. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
On Apr 19, 2014, at 4:19 PM, Tim Dawson t...@ramasaig.com wrote: On 19/04/2014 15:00, Tedd Sperling wrote: I don't understand your statement Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. Given that my original margin/padding around an h1 with font-size 250% was in pixels, when I converted at 1 em = 16 px the new margin/padding sizes were 2.5 times too high. So conversion for h1 has to be 1 em = 40px to get the same on screen appearance. If that's wrong I haven't understood ems at all. That sounds confusing. I just set my h? to whatever size I want knowing that 1em is equal (in most cases) to 16 pixels. No need for percentages in setting font sizes. Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
Hi gang: Is anyone else receiving inappropriate pics with this subject line? Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
Den 19.04.2014 16:00, Tedd Sperling wrote: 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. I find there is something wrong/missing in that statement, as images scale with browser-zoom no matter how we define sizes. Of course no harm done in setting image dimensions in 'em', but not setting dimensions works equally well. And, in images 'width' and 'height' attributes it is pixels anyway ... if those are used to speed up page-stabilization. Having images scale with text-size is not what I would call good practice, as that makes text-only zooming pretty useless for end-user. I only define 'max-width' for images, to make sure they stay within available space regardless of screen/window/page width, and for this I use '%' of container width. The rest I leave to end-users. regards Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
On 19/04/2014 22:56, Tedd Sperling wrote: On Apr 19, 2014, at 4:19 PM, Tim Dawson t...@ramasaig.com wrote: On 19/04/2014 15:00, Tedd Sperling wrote: I don't understand your statement Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. Given that my original margin/padding around an h1 with font-size 250% was in pixels, when I converted at 1 em = 16 px the new margin/padding sizes were 2.5 times too high. So conversion for h1 has to be 1 em = 40px to get the same on screen appearance. If that's wrong I haven't understood ems at all. That sounds confusing. I don't see why. My understanding is that an 'em' originated as the width of the letter 'M' at whatever font size is under consideration. It's a relative measure. So in a larger font size an em must be larger, and therefore equivalent to more pixels than in a smaller font size. I just set my h? to whatever size I want knowing that 1em is equal (in most cases) to 16 pixels. No need for percentages in setting font sizes. If you set your font-sizes in ems then I think you are treating the em as a constant (normally 16px). Though I notice you actually use descriptive names such as 'xx-large' in at least some instances. I also spotted some margins and padding in px. I've been reading http://webtypography.net/2.1.1 where there's a nice example (near the bottom of the page) of font-size set in pixels, where the em undoubtedly scales with font-size. Possibly the same thing happens when font-sizes are expressed in %, so I'll have to try ems for font sizes instead. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
On Apr 19, 2014, at 8:11 PM, Tim Dawson t...@ramasaig.com wrote: On 19/04/2014 15:00, Tedd Sperling wrote: I just set my h? to whatever size I want knowing that 1em is equal (in most cases) to 16 pixels. No need for percentages in setting font sizes. If you set your font-sizes in ems then I think you are treating the em as a constant (normally 16px). Though I notice you actually use descriptive names such as 'xx-large' in at least some instances. I also spotted some margins and padding in px. Yeah, that's because I haven't redone my site in years. It's a case of do what I say, not what I have done. Eventually I'll make my site only ems measurement. Thanks for reminding me. Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
On Apr 19, 2014, at 7:00 PM, Georg ge...@gunlaug.com wrote: Den 19.04.2014 16:00, Tedd Sperling wrote: 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. I find there is something wrong/missing in that statement, as images scale with browser-zoom no matter how we define sizes. Of course no harm done in setting image dimensions in 'em', but not setting dimensions works equally well. And, in images 'width' and 'height' attributes it is pixels anyway ... if those are used to speed up page-stabilization. The thing that was missing is I should have added that *all* measurements are done in ems and thus no scaling difference between text and images thereby holding the layout static. Having images scale with text-size is not what I would call good practice, as that makes text-only zooming pretty useless for end-user. While respecting your opinion (I've read your post for many years and you provide great advice). I wouldn't call it Good or Bad practice. For example, if you have poor eyesight (i.e., older) and just want to see the page larger by using zoom, then it's good practice -- don't you think? I only define 'max-width' for images, to make sure they stay within available space regardless of screen/window/page width, and for this I use '%' of container width. The rest I leave to end-users. That's one way to do it. But I still think that practice can confuse older users. I know if I were to zoom something so I could see it better (as I often do), it would confuse me if suddenly the *layout* became broken and text/graphics didn't hold their respective positions. But what do I know? I'm just an old guy. Cheers, tedd PS: However, please note that Browsers' zooms scale different. IOW, zoom levels (i.e., magnification) for one Browser doesn't always match the zoom level for another -- there are scaling differences. Or least that's what my old test have shown -- however, those test were taken many years ago. ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
Den 20.04.2014 04:14, Tedd Sperling wrote: The thing that was missing is I should have added that *all* measurements are done in ems and thus no scaling difference between text and images thereby holding the layout static. Which is what I object to. Text-only zoom should not be made to behave as Full-Page zoom. Besides, static can be understood as the opposite of responsive, which, if I understand you correctly, makes your practice both counterproductive and hopelessly out of date when we look at the wide range of screens/devices most layouts have to work reasonable well across. Having images scale with text-size is not what I would call good practice, as that makes text-only zooming pretty useless for end-user. While respecting your opinion (I've read your post for many years and you provide great advice). I wouldn't call it Good or Bad practice. For example, if you have poor eyesight (i.e., older) and just want to see the page larger by using zoom, then it's good practice -- don't you think? Nope. Browsers' Full-page zoom works that way regardless, and that built-in functionality doesn't need any help from us. All you have achieved by sizing images in 'em', is to literally disable text-only zoom in those browsers that have that option. Knowingly disabling /any/ well-working browser option is bad practice in my book, and it is way more confusing to people of all ages and (dis)abilities than what you further down call broken layout. I only define 'max-width' for images, to make sure they stay within available space regardless of screen/window/page width, and for this I use '%' of container width. The rest I leave to end-users. That's one way to do it. But I still think that practice can confuse older users. I know if I were to zoom something so I could see it better (as I often do), it would confuse me if suddenly the *layout* became broken and text/graphics didn't hold their respective positions. Anything one isn't used to, can be confusing at first. Age isn't a good excuse here, although one can expect that most younger people do get past the state of being confused a few seconds quicker than older people ... at least that is my experience in working with and discussing these things with end-users of all ages and (dis)abilities - only seconds... The only time I size images in 'em', is when a really small image of text shall line up with the text that surrounds it. Like for instance my own signature at bottom of articles I write. That, and similar minor adjustments of images using 'em', is something I also sometimes find necessary in order to make everything /appear/ correct in context - even if it actually isn't. But what do I know? I'm just an old guy. Well, I am not sure which one of us should say welcome to the club :-) PS: However, please note that Browsers' zooms scale different. IOW, zoom levels (i.e., magnification) for one Browser doesn't always match the zoom level for another -- there are scaling differences. Or least that's what my old test have shown -- however, those test were taken many years ago. Same full-page zoom function, but different step-height, yes. Does not really matter, as most end-users use only one browser on each device they use, so it is always the same behavior on each screen to each of them - unless someone breaks it. Only we designers/developers/coders compare between browsers on a somewhat regular basis, and I can't see any real problems going from Full-Page zooming in one browser to Full-Page zooming in another, in browsers on my test-lists that have such a functionality... http://www.gunlaug.com/contents/basics/compatible.html regards Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
