tab-size

The tab-size property in CSS is used to adjust the amount of spaces that display for the tab character.

The tab character (unicode U+0009) is typically converted to spaces (unicode U+0020) by the white space processing rules and then collapsed so that only one space in a row is displayed in the browser. Therefore the tab-size property is only useful when the white space processing rules do not apply, namely inside a <pre> tag and when the white-space property of an element is set to pre-wrap.

The default value for the tab-size property is 8 space characters, and it can accept any positive integer value.

He are some examples of the various ways tab-size can be used:

<h3>Example 1</h3>
<h4>&lt;pre&gt; with default tab-size of 8 space characters</h4>
<pre>
without tab
	with 1 tab
		with 2 tabs
</pre>

<h3>Example 2</h3>

<h4>&lt;p&gt; with tab-size customized to 4 space characters and 'white-space: pre-wrap'</h4>
<p class="fourtabs">without tab
	with 1 tab
		with 2 tabs		
</p>
<h4>&lt;p&gt; with tab-size customized to 4 space characters, but without 'white-space: prewrap'</h4>
<p>without tab
	with 1 tab
		with 2 tabs		
</p>

<h3>Example 3</h3>
<h4>&lt;pre&gt; with tab-size set to 12 space characters</h4>
<pre class="twelvetabs">without tab
	with 1 tab
		with 2 tabs	
</pre>

p.fourtabs {
	tab-size:4;
	-moz-tab-size: 4;
	-o-tab-size:  4;
  white-space: pre-wrap;
}


pre.twelvetabs {
	tab-size: 12;
	-moz-tab-size: 12;
	-o-tab-size:  12;
}


h4 {
 color:#e08628;
 margin-bottom: 0px;
}

body {
 background-color:#efefef;
 color:#3c3c3c;
}

As you can see in the examples above, the tab-size property adjusts the amount of space allotted for the tab character. In the second example, the <p> tag has to have its white-spaceproperty adjusted to pre-wrap in order for the tab characters to not be converted to regular spaces and collapsed.

You will also notice in the CSS that the -moz- and -o- prefixes are required for Firefox and Opera, but Chrome accepts the non-prefixed version.

Polyfill

The eight-space default is awfully large. If you need to support an unsupported browser, you could use this polyfill:

<h1>A Tab-Size Polyfill</h1>

<p>About as simple as it gets. This script checks if your browser supports <code>tab-size</code>, and if not converts all tabs to a certain number of spaces.</p>

<p>This polyfill is purely a vanity thing, for those of us who can%u2019t stand uber-wide tab characters.</p>

<pre><code>
	My tab is only 4 spaces wide!
</code></pre>

<textarea>
	Mine too!
</textarea>

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

//Set your tab size here, and in the CSS.
var tabSize = 4;
var codeElements = document.getElementsByTagName('code'),
    textareas = document.getElementsByTagName('textarea'),
    e = document.createElement('i');

if(e.style.tabSize !== '' && e.style.MozTabSize !== '' && e.style.oTabSize !== '')
{
  console.log(e.style);
  replaceTabs(codeElements);
  replaceTabs(textareas);
}

function replaceTabs(ele)
{
  for(var i = 0; i < ele.length; i  )
  {
    ele[i].innerHTML = ele[i].innerHTML.replace(/\t/g, repeat(" ", tabSize));
  }
}

function repeat(st, n) {
   var s = "";
   while (--n >= 0) {
     s  = st
   }
   return s;
}

Browser Support

This property degrades very gracefully. Every browser supports tab characters. Lack of support for this property doesn’t break anything, the browser merely displays eight-character wide tabs instead.