How to category Design category Development category News category

Converting Rems to Px when Rems are not required

Ill conceived concepts, useless abstraction and daft ideas that make code more difficult to maintain or understand drive me mad. Whats equally frustrating is the number of great client frameworks which adopt obscure techniques for the sake of it and don’t make it that easy to switch out.

One of my pet hates is the rems. Short for relative em, provided to give a way of controlling type size from one point in the stylesheet hierarchy. Kind of less relative than a regular em, but there we go. As em’s and rems give you a good way to size content relative to the type size. A frequent point of argument for not using em’s is the fact that em’s compound size; however with careful targeting of elements this is rarely a problem and if you’re sizing on nested elements then you’ve probably not got a well organised style sheet.

Essentially I have project which has to support IE8 and as such the client framework in use categorically did not support IE8 and this could have been a problem. Weather IE8 is used or not is not something I as a web builder have any control over, whilst I’d like to say “upgrade” to my target users, this just isn’t going to happen. Sure IE8 isn’t great, however with some conditional server side includes to provide the essential polyfills we can get a half reasonable support for this ageing browser where our users are unfortunate enough to have to use it.

Oddly this framework also used jQuery 2, but did not need jQuery2 at all, stepping down to the previous version of jQuery sorted that. There were some minor gremlins in the Javascript, event handling didn’t consider IE8’s requirements in one are but this was simple to patch.

The one area that did cause a larger problem than most was the “rems” issue. Even with polyfills this was still problematic. I then took the framework and tried to modify the SCSS, however this had problems too. Ultimately any modification I was going to make needed to be easy to reapply when the framework is updated.

Rems make it easy to use different sized copy at different break points – well be that as it may, I’ve yet to see a practical example of when I’d want to do this and even if this was the case it’s not actually that difficult to add a few extra rules when you need them. A quick check of the framework uncovers that this trait of the Rem is simply not used, in fact it looks as if the only reason Rems were used is because they couldn’t get Ems to work!

I do often try wonder what’s wrong with the pixel anyway and to be honest if it ain’t broken – why fix it! Time for a reset of another sort. I quickly worked out the base font size was 16px, using this as a base I quickly knocked up a node.js script to search and replace all the rem references with equivalent px values and saved a copy of the script. This could be stored with the project to make it easy to re-apply.

Another side affect of doing this was that unlike rems px values in theory require less processing, making for a more responsive style sheet.

Anyway – for those interested just amend the settings at the top run this script using node.

<javascript/>
 
/*!
 * http://wp.me/p3dAro-D9
 * @license copyright 2014 web-engineer, MIT/GPLv2 License
 */
//base px size of the fonts in your sheet
var base = 16;
//your css file to convert
var source = 'in.css';
//output filename
var output = 'out.css';
//requries node.js
var fs = require('fs');
 
var parser = {
	lastMatch: null,
	getMatch: function (data) {
		parser.lastMatch = data.match(/[0-9\.]+rem/i);
		return parser.lastMatch;
	}
};
 
 
fs.readFile(source, 'utf8', function (err, data) {
	if (err) {
		return console.log(err);
	}
	while (parser.getMatch(data)) {
		var newval = Math.round(String(parser.lastMatch).replace('rem', '') * base);
		if (newval != 0) {
			newval += "px";
		}
		data = data.replace(parser.lastMatch, newval);
	}
	fs.writeFile(output, data, function (err) {
		if (err) {
			return console.log(err);
		}
		console.log('success!');
	});
 
});
 
 
Tags:

Craig

Craig enjoys producing usable and friendly sites that look great and function well. He often also experiments with workflow automation and owns and runs web-engineer.
qr code

Comments are closed.