1 Reply Latest reply on Sep 25, 2010 11:27 AM by Nancy OShea

    Better method to convert pixels to ems

    HealthcareHelper Level 1

      Don't know if my Dreamweaver CS5 can help me do this:

       

      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 I have 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?

       

      - Keith Purtell

        • 1. Re: Better method to convert pixels to ems
          Nancy OShea Adobe Community Professional & MVP

          First you must establish the base font-size in your CSS like so:  This assumes 1em = 100% = 16px (standard browser default).

           

          html {font-size: 100%}

           

          body {font-size: 1em}

           

          Then define your page layout and division widths in ems using the following formula:

           

          1 divided by 16 = 0.0625

          multiplied by the number of pixels required

          = value in ems.

           

          0.0625 X 900px = 56.25em

          0.0625 X 300px = 18.75em

          0.0625 X 150px = 9.375em

           

          #wrapper { width: 56.25em}

          #divName {width: 18.75em}

          #divName img {width: 9.375em; height: 9.375em}

           

          IMPORTANT!  If you don't wrap elastic images inside elastic containers, your page will fall apart when people increase text size in browser.

           

          You can see a working DEMO of this method here:

          http://alt-web.com/TEST/Resizable-ems-test.html

           

          Good luck,

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb