Tabs in code

[ryanhellyer]

I'm trying to add tabs within <code> tags so that when users copy and paste from the page, the tabs are copy and pasted too. However inserting regular tabs via a text editor using a tab key doesn't seem to work.

The same problem applies to carriage returns, but that is easily got round by using <br /> tags, I can't find a tab equivalent.

I need it for this page here ... http://pixopoint.com/test/. It currently uses &nbsp;'s instead of tabs, but my users want a single tab instead of a bunch of spaces.

Any ideas?

[matsko]

Since you're showing CSS code in your box, why not try just replacing the { and } characters with:

#css { ... }

becomes

#ccc {<p>...</p> }

so replace { with {<p> and } with </p>}


Then use real CSS to emulate a tab (say like padding-left:50px) or something.

[ryanhellyer]

Thanks for the input.

I mustn't have explained myself though. Adding <p> tags will just make it appear correct on screen, I need the tabs to be present when people copy and paste that code.

Users are taking the code and entering it into their own CSS files. My users have been requesting tab indentation in their code, hence the question.

[felgall]

A lot of people just use an appropriate number of &nbsp; one after the other to align the content in that situation. The browser isn't going to handle a tab character correctly for display.

[ryanhellyer]

Thanks felgall,

The browser isn't going to handle a tab character correctly for display.

In case you have misunderstood ... I don't need the tabs to display in a browser, I can easily get around that problem. My issue is that I need tabs to be copied into a CSS file FROM the screen. So if you copy and paste from the screen to a text editor, the code has tabs in it.

[AutisticCuckoo]

code {white-space:pre}

The code element type only marks up something as computer code. Browsers will generally render the content with a monospaced font, but white-space handling is unaffected.

If the white-space has semantic value (which it often has in computer code), you should consider wrapping the samples in pre elements:

<pre><code>#suckerfishnav li {
    float:left;
    padding:0;
    }</code></pre>

[ryanhellyer]

Thanks AutisticCuckoo, but that doesn't help either.

Adding white-space: pre doesn't change what is copy and pasted from the screen.

[ryanhellyer]

If the white-space has semantic value (which it often has in computer code), you should consider wrapping the samples in pre elements:

I assumed that the code tag was the semantical tag of choice for code. How does adding a pre tag make it more semantically appropriate in this instance?

[AutisticCuckoo]

I assumed that the code tag was the semantical tag of choice for code. How does adding a pre tag make it more semantically appropriate in this instance?

The <pre> tag says that the content is preformatted, i.e., that the white-space has meaning and should be preserved.

The <code> tag says that the content is computer code – something meant to be used as input to a computer program of some kind. It says nothing about the presentation.

Together, <pre><code>...</code></pre> expresses both traits.

[AutisticCuckoo]

Adding white-space: pre doesn't change what is copy and pasted from the screen.

It works in Opera and IE, but Firefox 2 seems to be buggy and doesn't copy the tabs to the clipboard.

[felgall]

If you add white-spacere to the code tag then you shouldn't need the <pre> tag.

Why not replace the tab with an appropriate number of spaces so that the text aligns properly for all situations without relying on support for tabs?

[AutisticCuckoo]

If you add white-space&#58;pre to the code tag then you shouldn't need the <pre> tag.

white-space&#58;pre is purely presentational. <pre> indicates that white-space has semantic meaning. In this case, I'd say <pre> is more correct.

[ryanhellyer]

white-spacere is purely presentational. <pre> indicates that white-space has semantic meaning. In this case, I'd say <pre> is more correct.

Sounds reasonable, so I'll go with that.

It works in Opera and IE, but Firefox 2 seems to be buggy and doesn't copy the tabs to the clipboard.

Ah, I wondered about that over lunch today. It hadn't occured to me that it could be a browser issue until then. Thanks for the info



I'm guessing there is no tab equivalent of nbsp; then That would have solved my problem quite easily and been cross browser compatible (I assume).

[AutisticCuckoo]

I'm guessing there is no tab equivalent of nbsp; then That would have solved my problem quite easily and been cross browser compatible (I assume).

There is! You can use &#38;#9; to insert a TAB character, but it won't help. A TAB is a TAB, whether it's a literal character or a numeric reference.

[ryanhellyer]

There is! You can use to insert a TAB character, but it won't help. A TAB is a TAB, whether it's a literal character or a numeric reference.

Ah, true. I was thinking of how adding <br /> worked for carriage returns, but that of course is not a numeric reference, but an HTML tag. I had tried using but of course it didn't help.