Default tab stops

by knoxg

HTML

<html>
<head>
<title>Default tab stops</title>
<script src="https://cdn.jsdelivr.net/gh/randomnoun/jquery-tabstops/js/jquery.tabstops.js"></script>
</head>

<body>
<div class="paper">

<h1>Default tab stops</h1>

<label>Adjust width (%):</label><input type="range" value="100" min="20" max="100">
<label>Visible tabs:</label><input type="checkbox">

<p>
<!-- fiddle.js doesn't allow literal tabs so I'm using a <span class="tab"></span>
     to represent tabs. Usually jquery-tabstops.js will automaticaly convert tabs
     into this form, but this is one of the reasons you can provide pre-converted HTML 
-->     
Each<span class="tab"></span>
word<span class="tab"></span>
of<span class="tab"></span>
this<span class="tab"></span>
sentence<span class="tab"></span>
has<span class="tab"></span>
a<span class="tab"></span>
tab<span class="tab"></span>
between<span class="tab"></span>
them.<span class="tab"></span>
The default tabstop is 96px ( i.e. 1inch at 96DPI, which is what Office does )
</p>


<p data-default-tabstop="2.5in">
Each<span class="tab"></span>
word<span class="tab"></span>
of<span class="tab"></span>
this<span class="tab"></span>
sentence<span class="tab"></span>
has<span class="tab"></span>
a<span class="tab"></span>
tab<span class="tab"></span>
between<span class="tab"></span>
them.<span class="tab"></span>
This paragraph has a <code>data-default-tabstop</code> attribute of <code>2.5in</code>
</p>

<p data-default-tabstop="5cm">
Each<span class="tab"></span>
word<span class="tab"></span>
of<span class="tab"></span>
this<span class="tab"></span>
sentence<span class="tab"></span>
has<span class="tab"></span>
a<span class="tab"></span>
tab<span class="tab"></span>
between<span class="tab"></span>
them.<span class="tab"></span>
This paragraph has a <code>data-default-tabstop</code> attribute of <code>5cm</code>
</p>


</div>
</body>
</html>

CSS

body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
  font-size: 12pt;
  padding: 5px 50px;
}

.paper {
  background-color: #fff;
  border: solid 1px #ccc;
  padding: 10px;
  min-width: 250px;
}

span.tab.visible::before {
  content: 'TAB';
  position: absolute;
  font-family: Arial, sans-serif;
  background-color: #eee;
  border: solid 1px #aaa;
  border-radius: 3px;
  font-size: 8pt;
  color: #aaa;
  padding: 2px;
}

JavaScript

$(document).ready(function() {
  // initialise tabstops
  $('p').tabstops();

  // width slider
  $('input[type="range"]').on('input', function(e) {
    $('.paper').css('width', e.target.value + '%');
  });

  // visible tabs
  $('input[type="checkbox"]').on('input', function(e) {
    $('span.tab').toggleClass('visible', $(e.target).prop('checked'));
  });


});