Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Spaces

  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post

    Spaces

    So <br/> creates a brake but is there a way to make "tab" space?

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    To the best of my knowledge there is no pure CSS way of creating "tabs" that act like tabs in a Word-processor --> you can set them at different positions and if your text is going over one (or several) of those positions we automatically snap to the next available next time the text contains a tab...

    But it can be done quite easily with JavaScript (at least for left tabs):
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    /**
    *  hrsAsTabs
    *  settings: {
    *    parentElement: -> DOM element: the parent element which the tabs apply,
    *    positions: ->  Array of numbers: tab positions in pixels (within the parentElement),
    *  }
    */  
    var hrsAsTabs = function(settings){
      s = settings;
      var i, j, pos, el, spans = [], hrs = s.parentElement.getElementsByTagName('hr');
      // replace hrs with spans
      for(i = hrs.length-1; i >= 0; i--){
        el = document.createElement('span');
        with(el.style){margin = 0;padding = 0;border = 0;background = 'none';display = 'inline-block'};
        spans.unshift({el:el});
        s.parentElement.replaceChild(el,hrs[i]);
      };
      // fix tabs
      for(i = 0; i < spans.length; i++){
        pos = spans[i].el.offsetLeft;
        for(j = 0; j < s.positions.length; j++){
          if(s.positions[j] > pos){
            spans[i].el.style.width = (s.positions[j] - pos) + 'px';
            break;
          }
        }
      }
    };
    
    // example
    onload = function(){
      hrsAsTabs({
        parentElement: document.getElementById('example'),
        positions: [100,200,500]
      });
    };
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
    <div id="example">
    Hello<hr/>Tab 1<hr/>Tab 2<hr/>Tab3<br/>
    Something long here<hr/>New tab<hr/>Next tab
    </div>
    </body>
    </html>
    Last edited by ironboy; 10-02-2011 at 11:00 PM.

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    A simplier way is to utilize the pre tag:
    Code:
    Hello <pre style="display:inline;">	</pre> World
    Anything inside the pre tag will be interpreted, so if you wanted to add a TABbed space, just add it inside the pre tags and it should work.

    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    To expand on rangana's method:-

    Code:
    <pre style="font-family: Verdana, Arial, sans serif; font-size:12pt">
    Last      	First	Date of Birth
    -----		-----	---------------
    Doe 		Jane	February 19, 1964
    Smith	  	Peter	June 2, 1968
    Robertson	Alan	May 15, 1972
    </pre>
    Another way is to use HTML tables.
    Last edited by Philip M; 10-03-2011 at 09:20 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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