Render tab characters in HTML

Question

I have to render some text to a web page. The text is coming from sources outside my control and it is formatted using newlines and tab characters.

New lines (\n) can be replaced by br tags, but what about preserving tabs? A brief search reveals there is no way to directly render tab characters in HTML.

I don't think it's a duplicate, because the other question is about making the tab stay a tab inside the HTML file, while this question is about making the tab appear as intended. — legoscia, May 16 '14 at 16:16
This should have been closed as a duplicate of http://stackoverflow.com/questions/1571648/html-tab-space-instead-of-multiple-nbsp — Cole Tobin, Jun 06 '14 at 16:30
@bummi , Undo , Crisp , TGMCians and Digigizmo all incorrectly marked this a duplicate. For the benefit of all other that need a solution to the valid asked question, try: `key:

value` — Marius, Feb 19 '15 at 17:15

score 16 · Answer 1 · answered Apr 19 '10 at 06:39

16

Why not just wrap the content in a <pre> tag? This will handle the \n as well as the \t characters.

answered Apr 19 '10 at 06:39

Matt

43,482
6
101
102

4

this breaks the rest of my layout pretty bad – Midhat Apr 19 '10 at 07:15
Although I realize the original question is not about rendering source code, one downside to `
```
` is that you wouldn't be able to render the code with syntax highlighting.
```
– rob Dec 11 '14 at 21:05
a valid observation @rob, and a point in the right direction for me, thanks. Thus I propose only wrapping the tab character, and changing to inline mode : `key:
```
	
```
value
`
– Marius Feb 19 '15 at 17:25

score 8 · Answer 2 · answered Apr 19 '10 at 14:01

8

An alternative to the non-breaking space would be the em space (&emsp; or  ). It is usually rendered as a longer space, if that is an advantage.

answered Apr 19 '10 at 14:01

user320398

81
1

Carl Smith · Answer 3 · 2019-08-14T20:33:51.733

3

A Quick & Dirty Way

For a quick fix, you can use the xmp tag to stop the browser from collapsing whitespace. The xmp tag contains text that should be rendered uninterpreted (and in a monospaced font).

The problem is that xmp tags have been deprecated since HTML3.2, and have been dropped from the HTML5 spec altogether. In practice, browsers still support xmp tags, so they can still be useful, but not in production.

The Proper Way

Tabs are for tabulating data. The proper way to tabulate data in HTML is to use the table tag. Every line in your original string translates to a row in the table, while each tab in the original string starts a new (left-aligned) cell in the table.

Imagine you had this (tab-aligned) string to begin with:

Spam    1.99
Cheese  2.99

Translated to HTML, that string would look like this:

<table>
    <tr> <td> Spam   </td> <td> 1.99 </td> </tr>
    <tr> <td> Cheese </td> <td> 2.99 </td> </tr>
</table>

Note: If you wrapped the tab-aligned string in xmp tags and styled the HTML table to look like plain text, the rendered results would be the same.

edited Aug 14 '19 at 20:33

answered Oct 12 '13 at 18:55

Carl Smith

3,025
24
36

1

-1 This is is a way to display tabular data but may or may not be the proper way to display a `tab`, it all depends on context. So you answer is only correct if the OP asked for best guidelines for displaying tabular data. However the question isn't clear on this aspect. – Rippo Oct 14 '13 at 14:24
1

A tab is used for creating tables. That's its purpose in life. The HTML table is a precise translation of tabs. If you're using tabs for anything else, you're doing something wrong, or indenting code, which is kind of like overloading the character anyway. If you use tabs for indentation, you can just convert to spaces, but that doesn't work for the proper use of tabs. Tables do, because that's what they're designed for. You seem to be voting out of resentment over your downvote, even though your answer is utterly wrong, irrespective of any ambiguity in the question. – Carl Smith Oct 14 '13 at 21:44
The correct answer is the pre answer. Sorry but that is my opinion. Move on – Rippo Oct 15 '13 at 05:11
@CarlSmith Nice out-of-the-box thinking, but your assertion that "Tabs in strings just create tables" is not always correct. For example, using a table would unnecessarily waste a lot of space if you're using tabs to render a tree structure. And using a table to render tabs is a terrible solution if you're trying to render stylized code. Even xmp and pre will fail if you want to render the code with syntax highlighting. – rob Dec 11 '14 at 21:00
1

We're inverting the each other's perspective. Tabs are *designed* for creating tables. The fact that they're used for indenting code is incidental. It's not the fault of tables that they're not the most efficient way to do it. If you're indenting code, you don't need a table; you can use groups of spaces. – Carl Smith Dec 19 '14 at 23:19
The purpose of tabs and tables is not to indent things; it's to ensure that columns of data align. – Carl Smith Dec 19 '14 at 23:24
FWIW `xmp` tag is deprecated so support cannot be depended upon. Use [`pre`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) or [`code`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) instead – xlm Oct 06 '22 at 04:58

shyammakwana.me · Answer 4 · 2014-05-15T22:06:36.673

1

&emsp;, &ensp;,   or   can be used.

W3 says little about this...

The character entities &ensp; and &emsp; denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font.

Read More at W3.org for HTML4

Even more at Wikipedia (about spaces)

edited May 15 '14 at 22:06

answered May 15 '14 at 21:53

shyammakwana.me

5,562
2
29
50

.. nowhere on that Wikipedia page it is claimed these are valid encodings for a *tab*. See all other answers and comments. – Jongware May 15 '14 at 21:58
`this can be used`, these are `thinspace`,`emspace`. – shyammakwana.me May 15 '14 at 22:04
1

No. The reason you cannot use them is they all are *fixed width* spaces. A tab character in itself "has" no width; every instance in a text may have a different width. It's also heavily related to the font you are using: even if you figured out the "correct" width for a certain tab and replace it with en, em, and thin spaces, then it's only valid for a certain *font*. – Jongware May 15 '14 at 22:08

score 1 · Answer 5 · answered Apr 19 '10 at 06:40

1

If you're already replacing line breaks, why not do the same for tabs...?

str_replace("\t", '&nbsp;&nbsp;&nbsp;&nbsp;', $text);

answered Apr 19 '10 at 06:40

deceze

510,633
85
743
889

4

-1 Because tabs are not four spaces?? – Carl Smith Oct 12 '13 at 17:51
Can't disagree with that, but what's the alternative, given that HTML doesn't do tabs? – deceze Oct 12 '13 at 18:14
Wrap the output in `xmp` tags. Or just parse the string and calculate the number of spaces the tab would equal in a monospace font. – Carl Smith Oct 12 '13 at 18:42
Add that as an answer perhaps? – deceze Oct 12 '13 at 18:45

score 0 · Accepted Answer · edited Feb 28 '21 at 14:55

0

replace \t with      .

Each space you want will be a  

As pointed out this isn't completely correct as it only pretends to be a tab as HTML doesn't actually output format a tab as you would expect.

edited Feb 28 '21 at 14:55

0xLogN

3,289
1
14
35

answered Apr 19 '10 at 06:39

Rippo

22,117
14
78
117

3

This is a quick way, but it's not close to the actual tabs, as tabs would aligned. – faulty Mar 13 '11 at 08:09
So how would you show "tabs" in HTML `` ... ?? – Rippo Mar 13 '11 at 15:26
8

-1 This is not an answer to the question. It just says pretend a tab is really five spaces, which it isn't. – Carl Smith Oct 12 '13 at 17:50
1

@CarlSmith there isn't a tab in HTML so you are being harsh for the sake of being harsh. Did you read my comment above? Thanks for the downvote – Rippo Oct 14 '13 at 05:45
1

There is a tab in HTML. It's called . Did you read my answer? You're welcome to downvote it if you think it's wrong. – Carl Smith Oct 14 '13 at 14:01
3

I did and I did, sorry but your answer is not 100% precise based on the question asked. – Rippo Oct 14 '13 at 14:26
1

Too be honest the best answer here it the `PRE` tag answer. – Rippo Oct 14 '13 at 14:27
Tab equals specific number of spaces, this is simply wrong and overlooking whole purpose of tab – Shahzad May 19 '20 at 10:41

Render tab characters in HTML

6 Answers6

A Quick & Dirty Way

The Proper Way

Linked