10

There's a way to set PRE tab width in Firefox and Opera, but there isn't a well-known way to do this in IE or Chrome, and hard-tabbed code in PRE tags suffers as a result.

pre {
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
    -moz-tab-size: 1.5em;
    -o-tab-size: 1.5em;

    margin: 1em 0 0 0;
    padding: 1em 1em 1em 1em;
    width: 65%;
}
mcandre
  • 22,868
  • 20
  • 88
  • 147
  • 3
    Why isn't this and block vertical centering trivial in CSS3? Basic layouts are far more useful than rounded corners. – mcandre Jul 13 '11 at 23:11

2 Answers2

7

According to MDN's tab-size page, the proper format is :

tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;

JavaScript fallback : 

var fix_tab_size = function(pre, size) {
    if(typeof fix_tab_size.supports === 'undefined') {
        var bs = document.body.style;
        fix_tab_size.supports = ('tab-size' in bs || '-o-tab-size' in bs || '-ms-tab-size' in bs || '-moz-tab-size'  in bs);
    }
    if(!fix_tab_size.supports) {
        if(typeof pre.each === 'function') { //jquery 
            $('pre').each(function() {
                var t = $(this);
                t.html(t.html().replace(/\t/g, new Array(size+1).join(' ')));
            });
        } else if(typeof pre.innerHTML === 'string') {
            pre.innerHTML = pre.innerHTML.replace(/\t/g, new Array(size+1).join(' '));
        }
    }
}
$(function() {
    fix_tab_size($('pre'),4);
    //or
    $.getJSON(src, function(data) {
        fix_tab_size($data_pre.html(data.code)); //etc
    });
});
OneOfOne
  • 95,033
  • 20
  • 184
  • 185
  • Bummer that Opera will never see a standard tab-width style. rip. – ThorSummoner Mar 05 '14 at 17:48
  • I don't use Opera, however the newest Opera uses Blink, Google's webkit fork, so it might support it. – OneOfOne Mar 05 '14 at 18:06
  • 1
    Of to clarify, I mean Pesto based opera, 12.x has been discontinued supporting only the -o-tab-width declaration. essentially meaning that us Opera users (predominately on linux) will almost never see tab-size styles properly, unless developers copy this example and decide to include the opera-specific spec. – ThorSummoner Mar 05 '14 at 19:00
  • Your JavaScript checks if `-ms-tab-size` is supported, but your CSS doesn't try to set it. Presumably one these should be changed. – Mark Amery Dec 21 '14 at 15:02
-2

The CSS 3 Text feature tab-size is too new (and not nearly standardised enough) to have seen wide deployment so far (plus tabs aren't very popular in general).

For the case of hard-tabbed code, just run it through a tabs-to-spaces conversion before putting it on the page.

Basic layouts are far more useful than rounded corners

Tabs were never intended to do general-purpose layout tasks (and would be completely unsuitable for that). There are more powerful layout features being touted for CSS3—see for example Grid and Flexbox in IE10.

bobince
  • 528,062
  • 107
  • 651
  • 834