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? */
}
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">	</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.
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.
The tab character can be inserted by holding the Alt and pressing 0 and 9 together.
By default, tabs start at 225 pixels and shrink down to 76 pixels as more are added.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With