Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tab width CSS property

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.

like image 345
Web_Designer Avatar asked Jul 19 '11 22:07

Web_Designer


People also ask

What is tab width?

Definition and Usage. The tab-size property specifies the width of a tab character. In HTML, the tab character is usually displayed as a single space-character, except for some elements, like <textarea> and <pre>, and the result of the tab-size property will only be visible for those elements.

How do you make a tab space in CSS?

The tab character can be inserted by holding the Alt and pressing 0 and 9 together.

What is minimum size of tab?

By default, tabs start at 225 pixels and shrink down to 76 pixels as more are added.


1 Answers

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.

like image 123
BoltClock Avatar answered Sep 21 '22 12:09

BoltClock