SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: Tabs in code

  1. #1
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tabs in code

    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?
    Last edited by ryanhellyer; May 21, 2008 at 01:06. Reason: Changed test page, so needed to change post accordingly.

  2. #2
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since you're showing CSS code in your box, why not try just replacing the { and } characters with:

    Code:
    #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.
    I can't believe I ate the whole thing

  3. #3
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,785
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks felgall,

    Quote Originally Posted by felgall View Post
    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.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    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:
    Code HTML4Strict:
    <pre><code>#suckerfishnav li {
        float:left;
        padding:0;
        }</code></pre>
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks AutisticCuckoo, but that doesn't help either.

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

  8. #8
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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?

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ryanhellyer View Post
    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.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ryanhellyer View Post
    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.
    Birnam wood is come to Dunsinane

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,785
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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.
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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.

    Quote Originally Posted by AutisticCuckoo View Post
    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).

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ryanhellyer View Post
    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.
    Birnam wood is come to Dunsinane

  15. #15
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •