On 2010/09/25 13:05 (GMT-0500) Keith Purtell composed: > I'm experimenting with making my site more accessible for > vision-impaired people by using ems in my CSS style sheet for image > sizes as described at http://sperling.com/examples/zoom/
> The problem is calculating the ems. I have to open the image in > Photoshop, use Image Size to figure what the height and width pixels > would be at a slightly smaller size, then go to an online site that lets > me convert pixels to ems. What a hassle. Shorter path? Most browsers default to 16px. If you're using the user's default as your base text size (body: 100% or equivalent), and the appropriate image size for that context is 320px wide by 160px high, the em size is 320/16 by 160/16, or 20em X 10em. If you want your image to start 25% oversize, or 25em X 12.5em, the px size would be 25X16 by 12.5X16, or 400px X 200px. You really don't need to convert back and forth like that though. Just apply the enlargement % to the image's px size to start with, if you know what it is, which as designer you should. Or in reverse, multiply em size by your base px font size. Remember if the image you size in em is contained in a child subject to sizing cascade you've applied that it will change the meaning (size) of an em within that container. So, if say in a menu LI with font size set on a parent floated div to 90%, then an image sized in em within that LI will be 10% smaller than it would be in the float's parent. This means font sizing is better applied directly to the element that needs a different size (of course, this is the general rule in em sizing anyway), e.g. '#menu li a', which leaves the em meaning flowing down to #menu li undisturbed. Maybe I wrote enough to confuse, so to summarize: multiply or divide, depending on your conversion direction, by the contextual px font-size -- "The wise are known for their understanding, and pleasant words are persuasive." Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ ______________________________________________________________________ css-discuss [[email protected]] 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/
