Px2Em

Px2Em is a convenience application for web developers who have to meet accessibility guidelines by translating pages with absolute units (like px, in, etc in CSS) to relative units (percentages and 'em'). This application may prove useful for showing your project coordinator why pages heavy in images don't benefit from relative positioning and sizing.


Example Accessibility Report:
The page refers to CSS properties that are specified using absolute length units (like 'in', 'px', 'mm') rather than relative ones (like '%', 'em'). These units are used in external CSS files linked to via the LINK element or within the STYLE element.
You should use relative units.
(end report)

Okay, fair enough. Let's do it.

Note: This application only converts px to em, and does that in a *very* mechanical fashion.

Warning: This "trick" works best when a user is utilizing the same fonts and font sizes as their platform's default. If fixed-sized images are include in your pages, resizing fonts (usually with Ctrl-+ and Ctrl--) may GREATLY skew the page's presentation once it is converted to em rather than px.


Directions:

1. Determine your page's conversion factor. You will need to provide a best guess of how many pixels are in an "em" in your page. You can do this by trial and error with one <div> or insert a test div of a known pixel size that's easier to work with.
2. Open Px2Em.
3. Enter the conversion factor in the "Conversion" text box.
4. Select "File, Open" from the menubars.
5. Select your css file with absolute units.
6. Cut and paste the results into a text editor or choose "File, Save" from the Px2Em menubars.


Sample of transgressive code:

   1:h4 {
   2:        font-family: Georgia, "Times New Roman", Times, serif;
   3:        font-size: 12pt;
   4:        color: #FFFFFF;
   5:        text-align: center;
   6:        border-top-color: #000000;
   7:        border-top-style: solid;
   8:        border-top-width: 2px;
   9:        padding-top: 12px;
  10:        text-transform: uppercase;
  11:        letter-spacing: 0.5em;
  12:        margin-bottom: -14px;
  13:        background-color: #990000;
  14:        padding-bottom: 12px;
  15:}


Sample of transgressive code "fixed":
(Note: Uses a conversion factor of 11.2)
  21:h4 {
  22:        font-family: Georgia, "Times New Roman", Times, serif;
  23:        font-size: 12pt;
  24:        color: #FFFFFF;
  25:        text-align: center;
  26:        border-top-color: #000000;
  27:        border-top-style: solid;
  28:        border-top-width: 0.17857142857142858em;
  29:        padding-top: 1.0714285714285714em;
  30:        text-transform: uppercase;
  31:        letter-spacing: 0.5em;
  32:        margin-bottom: -1.25em;
  33:        background-color: #990000;
  34:        padding-bottom: 1.0714285714285714em;
  35:}

(Hey, I didn't say it'd be pretty.)



Image of Px2Em