homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library, Charter, Moderators: coopster & jatar k

PHP Server Side Scripting Forum

Convert any instance of px to em
Need to parse CSS file to convert from pixels to ems

5+ Year Member

Msg#: 3768869 posted 10:58 pm on Oct 18, 2008 (gmt 0)

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



5+ Year Member

Msg#: 3768869 posted 11:30 pm on Oct 18, 2008 (gmt 0)

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.


5+ Year Member

Msg#: 3768869 posted 11:47 pm on Oct 18, 2008 (gmt 0)

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

Msg#: 3768869 posted 1:07 am on Oct 19, 2008 (gmt 0)

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

function px2em($css) {


$replace = "($1/12).'em'";

return preg_replace($pattern,$replace,$css);

# test
$css="width: 120px;";

echo px2em($css);


5+ Year Member

Msg#: 3768869 posted 2:49 am on Oct 19, 2008 (gmt 0)

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.


5+ Year Member

Msg#: 3768869 posted 3:56 am on Oct 19, 2008 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved