16

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Web_Designer
  • 72,308
  • 93
  • 206
  • 262
  • 4
    Relevant specification for the `tab-size` property: http://www.w3.org/TR/css3-text/#tab-size – BoltClock Jul 19 '11 at 22:23
  • 1
    Thanks @BoltClock! What support does that property have in Chrome, Safari, and IE? – Web_Designer Jul 19 '11 at 22:28
  • 1
    None, so far. I've posted an answer. – BoltClock Jul 19 '11 at 22:28
  • 3
    https://bugs.webkit.org/show_bug.cgi?id=52994 - seems this has now been fixed in WebKit – mawtex May 11 '12 at 10:51
  • 1
    I recently created this jQuery plugin to solve this problem on one of my sites. https://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. – Dave Stewart Jun 26 '12 at 12:23

2 Answers2

11

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 4
    The `tab-size` property seems to be supported by Chrome now. – Andy Fleming Nov 15 '12 at 20:12
  • @BoltClock 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. – Rantiev Mar 02 '14 at 21:34
0

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.

Community
  • 1
  • 1
Nightfirecat
  • 11,432
  • 6
  • 35
  • 51
  • Tab stops didn't exist in CSS. That was just a working draft from more than 14 years ago. – BoltClock Jul 19 '11 at 22:18
  • 2
    **My** bad, I just found that they resurfaced in the [CSS3 working drafts](http://www.w3.org/TR/css3-text/#tab-size) 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. – BoltClock Jul 19 '11 at 22:22
  • Found, then forgotten... Sigh. One day we will have tabs! – jimmetry Mar 21 '14 at 10:07