Render a Tab character (in PRE element) as 4 spaces in HTML?

Question

Possible Duplicate:
Specifying Tab-Width?

I need to print a tab character in a pre tag. The HTML character for tab is 	 but on all browsers I tried it renders to look like 8 spaces.

Is there a way to adjust this to render to be the width of 4 spaces or is there another HTML character I can use that is 4 spaces?

I still wonder why browser render them sooo wide. – Benjam May 21 '20 at 20:15 — Benjam, May 21 '20 at 20:15

deizel. · Accepted Answer · 2015-04-29T13:29:49.150

34

While I agree with the first answer that you might as well just put 4 spaces, there does seem to be some support for a tab-size property within CSS (though IE support is lacking):

pre {
    -moz-tab-size:    4; /* Firefox 4+ */
    -o-tab-size:      4; /* Opera 11.5 & 12.1 only */
    tab-size:         4; /* Chrome 21+, Safari 6.1+, Opera 15+ */
}

Only effective using white-space: pre or white-space: pre-wrap (or within <pre> tags).

edited Apr 29 '15 at 13:29

answered Oct 02 '12 at 23:54

deizel.

11,042
1
39
50

1

+1 although browser support for `tab-size` is currently very limited (according to [MDN](https://developer.mozilla.org/en-US/docs/CSS/tab-size)) - they claim the `-moz` prefixed version has been support in FF for a long time, but Chome did not support it until 21, Opera not until 10.6 and IE may not support it at all. It the demo you provide certainly doesn't work in IE8. – DaveRandom Oct 03 '12 at 08:46

score 5 · Answer 2 · answered Oct 02 '12 at 23:40

5

There is a series of four characters you can use which always expands to four spaces. It's four spaces (within pre at least and other elements styled appropriately).

Since there is no universally agreed-upon method of how wide a tab should be and how exactly it should behave it's best not to use it in places where you need precise control over how the output looks. Neither HTML nor browsers provide any means of setting the tab width.

answered Oct 02 '12 at 23:40

Joey

344,408
85
689
683

5

Pfft. *Everyone* knows tabs are 3 spaces. – Oct 02 '12 at 23:52
They want four spaces, though. Can't do much about that. – Joey Oct 02 '12 at 23:55

score 3 · Answer 3 · answered Oct 03 '12 at 06:11

3

By HTML specifications and in browser practice, tab stops are at every 8 character. This does not mean that a tab is 8 spaces. For example, if you have ABC DEF, then the tab causes an advance of 5 characters.

In CSS, by a CSS3 draft, you can set the “tab size”, i.e. the distance between tab stops, e.g. tab-size: 4. Browser support is fairly good, when vendor prefixes are used too, except on IE.

answered Oct 03 '12 at 06:11

Jukka K. Korpela

195,524
37
270
390

So simple. Exactly what I was looking for. (Works fine in Safari v12 on Mac) So, the opening pre tag looks like this:
– Han May 20 '21 at 16:46

score 0 · Answer 4 · answered Oct 03 '12 at 00:08

CSS is the best way to handle this for viewing purposes. But if you want people to be able to copy/paste the text and get four spaces for a tab, then you're going to end up using Javascript to modify your pre tags.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
    <pre class="downtab">All    Tabs    Changed a   little.</pre>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".downtab").each(function() {
                var text = $(this).html().replace(/\t/g, '    ');
                $(this).html(text);
            });
        });
    </script>
</body>
</html>

The real magic here is the replace() function, using a globally-matched regex.

Render a Tab character (in PRE element) as 4 spaces in HTML?

4 Answers4

Linked