Question

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)

Answer 1

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.