Convert any instance of px to em

Need to parse CSS file to convert from pixels to ems

[cosmoyoda]

Hello guys.

In my web application I parse CSS files as PHP files. I do this so I can have variables and all sorts of functions to make my CSS more flexible. So anyway, one of the things I would really like to do is <b>convert every instance of px to em and convert the number before it</b>.

For instance:

If there is "width: 150px;" in my CSS file, I want the PHP function to convert that instance to "width: 12.5em;".

Where did I get the 12.5 from? In my case, 1em = 12px.

Why do I need to do this? Because if my site starts using em's instead of px's, when users change the size of the font the rest of the layout will expand along. It gives a nice zooming effect. This is good for people with disabilities, especially those that have poor vision. So this is definitely a good factor to increase accessibility in my site.

How can I accomplish this? (IF this is even possible). I'm guessing it has something to do with RegEx.. hopefully not, because my knowledge of RegEx is quite limited =(. Thanks for reading

[tumr]

How many different CSS files do you have? This sounds like something that could plausibly be done with a standard search-replace utility. More complicated options involve doing this from within PHP, and/or using regex.

[cosmoyoda]

tumr, it's just one CSS file (called main.css) that uses PHP functions to include over 10 CSS files onto itself.

It's okay, really. All I would have to do is do this in main.css:

$content = ob_get_contents();
$content = convertAllPxToEm($content);
echo $content;

It's pretty simple. The only problem is coming up with a neat function convertAllPxToEm(), which will scan the output of my CSS file for instances of "px" and convert that to em and change the numerical values before it to match em. eg: Convert "width: 120px" to "width: 10em".

I don't think a simple str_replace() will do this. Because it's not simply replacing "px" with "em": but also changing the numerical value before it (ie. dividing it by 12, because 1em = 12px in my case).

[Receptional Andy]

You should be able to do this via preg_replace [php.net] and the 'e' modifier:

function px2em($css) {
$pattern="/([0-9]+)px/e";
$replace = "($1/12).'em'";
return preg_replace($pattern,$replace,$css);
}
# test
$css="width: 120px;";
echo px2em($css);

[tumr]

Unless those 10 other CSS files are not under your control, I don't know why you'd want to burn processor power every time you run the CSS with a preg_replace when you could just go through with a simple text search-replace util one time. However, if that's how you'd like to proceed, that will certainly work.

[cosmoyoda]

Receptional Andy, thank you so much! Your function did the trick beautifully. Now everytime I increase the font-size my page enlarges smoothly, as if the browser were simply zooming the page.

tumr, hehehe I know exactly what you mean. It is a very dumb idea to reprocess that CSS file and run the preg_replace function on each request. That would be a huge waste of server resources. Fortunately I am using cache throughout my application, so that CSS file will always be cached and no server-consuming PHP code will have to be run over and over again for similar requests. Thanks for pointing that out though, it's an important point and PHP developers should always consider caching their pages if they seek faster server performance.