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