Managing tab space in <pre class = "prettyprint-override"> using CSS?
Is it possible to indicate how many pixels, etc. takes up tab space in <pre> using CSS?
for example, let's say I have a piece of code appearing in a <pre> on a web page:
function Image() { this.Write = function() { document.write(this.ToString()); return this; }; ... } Image.prototype = new Properties(); ... Is it possible to specify another space that the tab lacks lines with CSS?
If not, are there any workarounds?
From CSS 2.1, Β§ 16.6.1. White Space Processing Model :
All tabs (U + 0009) are displayed as a horizontal shift that aligns the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of the 8-fold gap width (U + 0020) displayed in block font from the edge of the original frame.
CSS3 text says basically the same thing.
From HTML 4.01 Β§ 9.3.4 Preformatted text: PRE element
The horizontal tab character (decimal number 9 in [ISO10646] and [ISO88591]) is usually interpreted by the user's visual agents as the smallest nonzero number of spaces needed for linear characters up the tabs, which are every 8 characters. We strongly discourage the use of horizontal tabs in pre-formatted text, as tab editing for other values ββis often used when editing, which leads to shifting documents.
If you are interested in leading tabs, just replace them with spaces.
/* repeat implemented using Russian Peasant multiplication */ String.prototype.repeat = function (n) { if (n<1) return ''; var accum = '', c=this; for (; n; n >>=1) { if (1&n) accum += c; c += c; } return accum; } String.prototype.untabify = function(tabWidth) { tabWidth = tabWidth || 4; return this.replace(/^\t+/gm, function(tabs) { return ' '.repeat(tabWidth * tabs.length)} ); } Despite the fact that the above discussion provides some historical background, times have changed, and more meaningful information and possible solutions can be found here: Indication of tab width?
attn admin: possible duplicate of ref question.