66

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)

2

3 Answers 3

102

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>

6
  • 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. Commented May 12, 2012 at 5:14
  • 6
    New version of Chrome supports "tab-size" now :)
    – jhasse
    Commented Sep 7, 2012 at 9:17
  • All browsers are supported right now apart from IE/Edge. MS has it under consideration. You can vote for the feature here. Commented Jun 6, 2016 at 13:46
  • @StijndeWitt All browsers is a pretty bold statement, given the insane amount of mobile browsers nowadays. :)
    – fuxia
    Commented Jun 6, 2016 at 13:51
  • Most of the mobile browsers use the same engine(s). But sure, not all browsers :) Anyway, should have qualified it. Commented Jun 6, 2016 at 14:58
6

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.

4
  • 4
    "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
    Commented Jul 19, 2011 at 22:19
  • 4
    "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.) Commented Jan 8, 2012 at 23:49
  • 1
    @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? Commented Jan 9, 2012 at 0:05
  • @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). Commented Jan 9, 2012 at 0:17
4

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

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.