Specifying Tab-Width?

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)

Solution 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.

Solution 2

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>

Solution 3

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.)

Comments

[BoltClock]

"tab stops made it into the CSS specification" No, they didn't. At least, they didn't make it to levels 1 or 2 at the time of this answer. There is a proposed tab-size property in the CSS3 drafts though.

[BoltClock]

You were spot on, -moz-tab-size was implemented in Gecko 2, the engine used by Firefox 4. developer.mozilla.org/en/CSS/-moz-tab-size

[T.J. Crowder]

"I believe this blog post should help you out." Then quote the relevant part of the post. External links can be modified, deleted, moved, etc. Stack Overflow is meant to be a resource not just when you ask/answer a question, but in the future when others find it and need to reference the information. Details: meta.stackexchange.com/questions/8231/… The good news is that it seems (on brief glance) that, more than two years later, that blog is still alive and the post still there. (I don't know if the content has changed.)

[George Stocker]

@T.J.Crowder You're right to downvote my post because I didn't include a summarization, and I'll work on including it. But while you downvote today, note that the answer was written almost 3 years ago, when the policy wasn't as clearcut as it is now. Perhaps you should have left the comment, given me a chance to fix the issue, and then downvote if I didn't?

[T.J. Crowder]

@GeorgeStocker: Completely agreed. (And yes, it was me who downvoted it recently, although note that you had no way of knowing that for sure until I told you -- your post was recently linked and will have recently come to the attention of a lot of people; it could easily have been commented upon and, separately, downvoted.) Will at least reverse that when I can (I can't until the answer changes).

[Wesley Murch]

By the way, I was that random upvoter last night. I finally got around to documenting some code and was dreading the idea of switching to spaces for the huge tab widths in the <pre> blocks - this did the trick in Firefox, but doesn't seem to work (yet) on webkit surprisingly - actually it looks like only opera and firefox are supporting it... back to the spaces I guess.

[jhasse]

New version of Chrome supports "tab-size" now :)

[Stijn de Witt]

All browsers are supported right now apart from IE/Edge. MS has it under consideration. You can vote for the feature here.

[fuxia]

@StijndeWitt All browsers is a pretty bold statement, given the insane amount of mobile browsers nowadays. :)

[Stijn de Witt]

Most of the mobile browsers use the same engine(s). But sure, not all browsers :) Anyway, should have qualified it.

[Sv443]

Tested with Firefox 70.0.1 - you need the -moz-tab-size property, else it will not work