Question

Is it possible to specify how many pixels, etc. the tab space occupies in a <pre> using CSS?

for example, say i have a piece of code appearing in a <pre> on a web page:

function Image()
{
    this.Write = function()
    {
        document.write(this.ToString());
        return this;
    };
    ...
}
Image.prototype = new Properties();
...

is it possible to specify a different amount of space the tab indents the line using CSS?

If not, is there any workarounds?

Answer 1

From CSS 2.1, § 16.6.1 The ‘white-space’ processing model:

All tabs (U+0009) are rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of 8 times the width of a space (U+0020) rendered in the block’s font from the block’s starting content edge.

CSS3 Text says basically the same thing.

From HTML 4.01 § 9.3.4 Preformatted text: The PRE element

The horizontal tab character (decimal 9 in [ISO10646] and [ISO88591] ) is usually interpreted by visual user agents as the smallest non-zero number of spaces necessary to line characters up along tab stops that are every 8 characters. We strongly discourage using horizontal tabs in preformatted text since it is common practice, when editing, to set the tab-spacing to other values, leading to misaligned documents.

If you’re concerned with leading tabs, it’s a simple matter to replace them with spaces.

/* repeat implemented using Russian Peasant multiplication */
String.prototype.repeat = function (n) {
    if (n<1) return '';
    var accum = '', c=this;
    for (; n; n >>=1) {
        if (1&n) accum += c;
        c += c;
    }
    return accum;
}
String.prototype.untabify = function(tabWidth) {
    tabWidth = tabWidth || 4;
    return this.replace(/^\t+/gm, function(tabs) { return ' '.repeat(tabWidth * tabs.length)} );
}