65

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)

Wilco
  • 32,754
  • 49
  • 128
  • 160
  • 1
    I recently created this jQuery plugin to solve this problem on one of my sites. https://github.com/davestewart/jquery-plugins/tree/master/tabSize It uses the CSS3 property tab-size if available, but if not, it *correctly* converts tabs to spaces, including those tabs which do not take up a whole tab width, aka columns. – Dave Stewart Jun 26 '12 at 12:22
  • [Duplicate](http://stackoverflow.com/q/12700001/12892) with possibly other answers. – Cristian Ciupitu Dec 09 '14 at 16:06

3 Answers3

101

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>
fuxia
  • 62,923
  • 6
  • 54
  • 62
  • 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 `
    ` 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.
     – Wesley Murch May 12 '12 at 05:14
  • 6
    New version of Chrome supports "tab-size" now :) – jhasse Sep 07 '12 at 09:17
  • All browsers are supported right now apart from IE/Edge. MS has it [under consideration](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csstabsizeproperty). You can [vote for the feature here](https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6524689-tab-size-property). – Stijn de Witt Jun 06 '16 at 13:46
  • @StijndeWitt _All browsers_ is a pretty bold statement, given the insane amount of mobile browsers nowadays. :) – fuxia Jun 06 '16 at 13:51
  • Most of the mobile browsers use the same engine(s). But sure, not *all* browsers :) Anyway, should have [qualified](http://caniuse.com/#feat=css3-tabsize) it. – Stijn de Witt Jun 06 '16 at 14:58
  • Tested with Firefox 70.0.1 - you need the `-moz-tab-size` property, else it **will not** work – Sv443 Nov 12 '19 at 10:14
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.

Community
  • 1
  • 1
George Stocker
  • 57,289
  • 29
  • 176
  • 237
  • 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](http://www.w3.org/TR/css3-text/#tab-size) though. – BoltClock Jul 19 '11 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: http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers 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.) – T.J. Crowder Jan 08 '12 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? – George Stocker Jan 09 '12 at 00: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). – T.J. Crowder Jan 09 '12 at 00: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.)

DaedalusFall
  • 8,335
  • 6
  • 30
  • 43
  • 1
    You were spot on, `-moz-tab-size` was implemented in Gecko 2, the engine used by Firefox 4. https://developer.mozilla.org/en/CSS/-moz-tab-size – BoltClock Jul 22 '11 at 17:03