开发者

Controlling tab space in a <pre> using CSS?

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.开发者_如何学Pythonwrite(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?


While the above discussion provides some historical background, times have changed, and more relevant information and possible solutions can be found here: Specifying Tab-Width?

attn admin: possible duplicate of ref'ed question.


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)} );
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜