The CSS property tab-size allows you to control the indentation of certain HTML elements. It determinates the amount of space required for the representation of a tab-sign (Unicode U + 0009). In most cases, these indentations play no role, but whenever you use pre, textarea or an element with the CSS property white-space: pre, pre-wrap, the indent becomes visible. The default value in most browsers for a tab character is 8, which is enormous – especially on smaller screens. Like this, you’ll quickly come up to 24 or more spaces.

The property allows numeric values. By specifying 0, the indentation would be entirely ignored. Mozilla and Opera require a vendor prefix, WebKit browsers support the standard:


pre, textarea {
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
}

In case you’ll need to support older browser versions this little javascript polyfill will implement the tabsize feature:


var fixTabSize = function(size) {
	if(typeof fixTabSize.supports === 'undefined') {
		var bs = document.body.style;
			fixTabSize.supports = (
				'tab-size' in bs || 
				'-o-tab-size' in bs || 
				'-moz-tab-size' in bs
			);
	}
	if(!fixTabSize.supports) {
		var elms, s = size || 4;
		if(document.xquerySelectorAll) {
			elms = document.querySelectorAll('pre, textarea');
		} else {
			var a = Array.prototype.slice.call(
				document.getElementsByTagName("pre")
			),
			b = Array.prototype.slice.call(
				document.getElementsByTagName("textarea")
			);
			elms = a.concat(b);
		}
		for(var i = 0, l = elms.length; i < l; i++) {
			elms[i].innerHTML = elms[i].innerHTML.
			replace(/\t/g, new Array(s+1).join(' '));
		}
	}
}
fixTabSize(4);