Sample Legal

by knoxg

HTML

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

<body>
<div class="paper">

<h1>Sample Legal</h1>

<label>Visible tabs:</label><input type="checkbox">

<p>The tabstops in these paragraphs are set via CSS to
<br/><code>1cm right, 1.3cm bar, 1.5cm bar, 11cm center;</code>
<br/><code>1cm right, 1.3cm bar, 1.5cm bar, 3cm left, 13.2cm right ". ", 14cm left;</code>
<br/><code>1cm right, 1.3cm bar, 1.5cm bar, 3cm left, 13.2cm right solid, 14cm left;</code>

</p>

<p class="ae4">	1	UNITED STATES DISTRICT COURT
<p class="ae4">	2	NORTHERN DISTRICT OF CALIFORNIA
<p class="ae4">	3	SAN JOSE DIVISION
<p class="ae4">	4
<p class="ae5">	5	TREVOR TECHNOLOGIES, INC., a	)	Case No. 11-CV-02481-LRK
<p class="ae5">	6	Delaware corporation d/b/a eGravel,	)	
<p class="ae5">	7		)	ORDER GRANTING IN PART AND
<p class="ae5">	8	Plaintiff,	)	DENYING IN PART MOTION FOR
<p class="ae5">	9	v	)	TRO; GRANTING MOTION FOR
<p class="ae5">	10	ZANZIBAR BUSINESS SOLUTIONS, an	)	SUBSTITUTED SERVICE; DENYING
<p class="ae5">	11	unincorporated association; ZANZIBAR I-	)	MOTION TO DISMISS
<p class="ae5">	12	SOLUTIONS PVT. LTD an Ecuadorian	)	
<p class="ae5">	13	corporation. DAMIEN "JAMJARS" STEPHENSON,	)	
<p class="ae5">	14	LOUISE STEPHENSON, OBLONG PREAMBLE and	)	
<p class="ae5">	15	IRA BLART	)	
<p class="ae5">	16		)	
<p class="ae5">	17	Defendants	)	
<p class="ae6">	18		)	


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

CSS

.ae4,
.ae5,
.ae6 {
  font-family: Courier;
  font-size: 14px;
}

.ae4 {
  --tabstops: 1cm right, 1.3cm bar, 1.5cm bar, 11cm center;
}

.ae5 {
  --tabstops: 1cm right, 1.3cm bar, 1.5cm bar, 3cm left, 13.2cm right ". ", 14cm left;
}

.ae6 {
  --tabstops: 1cm right, 1.3cm bar, 1.5cm bar, 3cm left, 13.2cm right solid, 14cm left;
}



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: 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();

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


});