Tutorial :Specifying Tab-Width?


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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »