Setting tab width?

Question

Is it possible to determine the tab width when a space is displayed (for example, inside the <pre> tag or something else)? I can't find anything to do this with CSS, but it seems like this would be quite common.

In my case, the tab width is so wide that some pieces of code on the page are too wide. If I could somehow shorten the tab width so that it matches without scrollbars, this would greatly ease the situation. (I suppose I could just replace the tabs with spaces, but ideally I would like to find a way to do this without doing this)

Answer 1

I believe this blog post should help you:

Here's the solution, it’s not neat, since it needs to be done for each instance of the tab, but it makes the tabs take up less space and retains formatting for copying from the browser (obviously, replace “A SINGLE TAB HERE” with the real tab, this software is for blog posts automatically removes tabs from entries that seem):

<span style="display:none">A SINGLE TAB HERE</span><span style="margin-left:YOUR NEW TAB WIDTH"></span> 

Basically, replace each instance of your code tab with this piece of code (after choosing the appropriate width, you can easily do this in the stylesheet). The code artificially inserts the margin, keeping the original tab in the code ready for copy / paste.

By the way, it looks like tab stops made it into the CSS spec .

There is also a stack overflow question on this .

Answer 2

Use the tab size property. You currently need vendor prefixes. Example:

 pre { -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } 

See also an article on developer.mozilla.org: tab-size .

 .tabstop { -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } 

 Unstyled tabs (browser default) <pre> one tab two tabs three tabs </pre> Styled tabs (4em) <pre class="tabstop"> one tab two tabs three tabs </pre> 

Answer 3

As George Stocker noted, tabs should appear in future CSS (FF4 should have this), but on average ...

The problem with the related blog post is that the tabs are not copied when copying / pasting from the browser. Alternatively, try the following:

 <style> .tabspan{ display:inline:block; width:4ex; } </style> <pre> int main() { <span class=tabspan>\t</span>return 0; } </pre> 

Where "\ t" in the above example is the actual tab character. Now it should copy and paste correctly. Not as nice as clicking a css property on a <pre> tag, but that's life.

(PS replied to this old post as high on google for 'css tab width', and I came up with this solution shortly afterwards.)