Spaces

sherlockturtle · 10-02-2011, 07:20 PM

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

ironboy · 10-02-2011, 09:56 PM

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>

rangana · 10-03-2011, 12:14 AM

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.

Philip M · 10-03-2011, 07:59 AM

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.