Are there methods in WebKit and Microsoft browsers to specify tab width as in Firefox and Opera with -moz-tab-size and -o-tab-size properties?
For instance, I would like the tabs in my <textarea> to be 4 spaces wide:
textarea {
-moz-tab-size: 4;
-o-tab-size: 4;
/* How can this be achieved in Chrome, Safari, and IE? */
}
[Update:]
A tab-size polyfill has been created (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 will not work on <textarea>s, but only on elements that can contain other elements. If the browser supports tab-size, it will use that instead.