Leaders

by knoxg

HTML

<html>
<head>
<title>Leaders</title>
<script src="https://cdn.jsdelivr.net/gh/randomnoun/[email protected]/js/jquery.tabstops.js"></script>
</head>

<body>
<div class="paper">

<h1>Leaders</h1>

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

<p>The tabstops in these paragraphs are set via data attributes to
<code>2cm left, 4.5cm center, 7cm right, 9.5cm decimal, 10cm bar</code>
with different leaders
</p>

<p class="myTabs">
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>
</p>

<p class="myTabs">
<span class="tab"></span>
left<span class="tab"></span>
center<span class="tab"></span>
right<span class="tab"></span>
decimal<span class="tab"></span>
default<span class="tab"></span>
default<span class="tab"></span>
default<span class="tab"></span>
default<span class="tab"></span>
default (left)<span class="tab"></span>
</p>

<p class="myTabs">
1<span class="tab"></span>
1<span class="tab"></span>
1<span class="tab"></span>
1<span class="tab"></span>
1<span class="tab"></span>
1<span class="tab"></span>
1<span class="tab"></span>
1<span class="tab"></span>
1<span class="tab"></span>
1.<span class="tab"></span>
</p>

<p class="myTabs">
10<span class="tab"></span>
10<span class="tab"></span>
10<span class="tab"></span>
10<span class="tab"></span>
10<span class="tab"></span>
10<span class="tab"></span>
10<span class="tab"></span>
10<span class="tab"></span>
10<span class="tab"></span>
10.<span class="tab"></span>
</p>

<p class="myTabs">
100<span class="tab"></span>
100<span class="tab"></span>
100<span class="tab"></span>
100<span class="tab"></span>
100<span class="tab"></span>
100<span class="tab"></span>
100<span...

CSS

body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
  font-size: 12pt;
  padding: 5px 50px;
}
p { margin-top: 0px; margin-bottom: 0px;  }
p.myTabs {
  --tabstops: 2cm left, 4.5cm center, 7cm right, 9.5cm decimal, 10cm bar;
}
p.solid-leaders {
  --tabstops: 2cm left solid, 4.5cm center solid, 7cm right solid, 9.5cm decimal solid, 10cm bar;
}
p.dashed-leaders {
  --tabstops: 2cm left dashed, 4.5cm center dashed, 7cm right dashed, 9.5cm decimal dashed, 10cm bar;
}
p.dotted-leaders {
  --tabstops: 2cm left dotted, 4.5cm center dotted, 7cm right dotted, 9.5cm decimal dotted, 10cm bar;
}

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

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'));
  });


});