Tab width CSS property

Question

Do the WebKit and Microsoft browsers support any method of specifying tab width like Firefox and Opera do using their -moz-tab-size and -o-tab-size properties?

For example, I want the tabs in my <textarea> to have a width of 4 spaces:

textarea {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    /* How would I do this in Chrome, Safari, and IE? */
}

[Update:]

I created a tab-size polyfill (Demo):

<script> // tab-size polyfill
var codeElements = document.getElementsByTagName('code'), // Applies to all code elements. Adjust to your needs.
codeElementCount = codeElements.length,
e = d.createElement('i');

if(e.style.tabSize !== '' && e.style.mozTabSize !== '' && e.style.oTabSize !== '') {
    for(var i = 0; i < codeElementCount; i++) {
        codeElements[i].innerHTML = codeElements[i].innerHTML.replace(/\t/g,'<span class="tab">&#9;</span>');
    }
}
</script>

<style>
.tab {
    width: 2.5em; /* adjust to your needs */
    display: inline-block;
    overflow: hidden;
}
</style>

Note: This wont work on <textarea>s, but only on element's that can contain other elements. If the browser does support tab-size it'll use that instead.

Sciatica

Relevant specification for the tab-size property: w3.org/TR/css3-text/#tab-size – Graduated

Thanks @BoltClock! What support does that property have in Chrome, Safari, and IE? – Sciatica

None, so far. I've posted an answer. – Graduated

bugs.webkit.org/show_bug.cgi?id=52994 - seems this has now been fixed in WebKit – Municipal

I recently created this jQuery plugin to solve this problem on one of my sites. github.com/davestewart/jquery-plugins/tree/master/tabSize It uses the CSS3 property tab-size if available, but if not, it correctly converts tabs to spaces, including those tabs which do not take up a whole tab width, aka columns. – Milano

Answer 1

tab-size is currently only implemented by Firefox and Opera using your given vendor prefixes.

For WebKit, there's a bug report requesting that the property be implemented. I believe work has already started on it, as can be seen in the comments on that report.

For IE, well, I can't find anything about an -ms-tab-size or tab-size implementation in IE9 or IE10. I suppose the IE team has been none the wiser.

Graduated

The tab-size property seems to be supported by Chrome now. – Satiate

@Graduated So how twitter bootstrap did that in their code examples? They didn't use any things that i have seen, they didn't use tab-size css property, they didn't replace it with spaces, or any spans with properly width. – Worldbeater

Answer 2

Seems like there's a similar question on this subject, but it doesn't really quite answer that quite right. It does, however reference that apparently tab stops do exist in CSS, though I can't imagine the browser support is all that great on it.

Searching on google for it brings up little to no information on the subject, further leading me to believe that it isn't very well-implemented, or used. Hope that helps.

EDIT

The W3C link does mention tab-stops, but it was only a working draft - a proposal, and was not implemented.

Despiteful

Tab stops didn't exist in CSS. That was just a working draft from more than 14 years ago. – Graduated

My bad, I just found that they resurfaced in the CSS3 working drafts as tab-size (and, as the OP shows, Firefox and Opera have their own implementations). They didn't make it to CSS1 or CSS2, but they may have a chance in CSS3. – Graduated

Found, then forgotten... Sigh. One day we will have tabs! – Mimir