Is it possible to define the tab-width when whitespace is displayed (say within a <pre> tag or something)? I can't find anything to do this with CSS, but this seems like it would be a pretty common thing to want to do.
In my case, the tab width is so wide that it causes some of my code snippets on a page to be too wide. If I could somehow shorten the tab-width to make it fit without scrollbars it would make things much easier. (I suppose I could just replace the tabs with spaces, but ideally I would love to find a way to do this without doing that)
I believe this blog post should help you out:
Here's a solution, it's not neat since it has to be done for every instance of a tab, but it makes the tabs take up less space and preserves the formatting for copying out of the browser (obviously replace "A SINGLE TAB HERE" with a real tab, this blog software automatically removes tabs from entries it seems):
<span style="display:none">A SINGLE TAB HERE</span><span style="margin-left:YOUR NEW TAB WIDTH"></span>
Basically, replace every instance of a tab in your code with that code snippet (after choosing a suitable width, you could do it in a stylesheet pretty easily). The code artificially inserts the margin whilst keeping the original tab in the code ready for copy/pasting.
Incidentally, it looks like tab stops made it into the CSS specification.
There's also another Stack Overflow question on this subject.
Use the tab-size property. You’ll need vendor prefixes currently. Example:
pre
{
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
See also the 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>
As George Stocker pointed out tab stops should be coming along in a future CSS (FF4 should have it), but in the mean time...
The problem with the linked blog post is that the tabs aren't copied when copying/pasting from the browser. As an alternative 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 is the actual tab character. Now it should copy and paste properly. Not as nice as slapping a css property on the <pre> tag, but such is life.
(P.S. answered this old post as its high on google for 'css tab width' and I came up with this solution shortly after coming here.)
