Sample Mandelbrot

by knoxg

HTML

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

<body>
<div class="paper">

<h1>Sample Mandelbrot</h1>

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

<p>The tabstops in these paragraphs are set via CSS to
<br/><code>2cm decimal, 5cm decimal, 8cm decimal, 12cm center, 14cm left;</code>
</p>

<p class="alignExample2a" style="font-weight: bold;">	m	x	y	rating	description

<p class="alignExample2">	3354.786	0.2613577	-0.002018128	★★★★☆	now that's what I call art</p>
<p class="alignExample2">	unknown	-0.1027705	-0.9475189	★★	electric alien
<p class="alignExample2">	329.244	-0.7487092	-0.05922491	★★★★	helter skelter
<p class="alignExample2">	167466.7	-0.103865	-0.9584393	★★★	branching tendrils
<p class="alignExample2">	6290.223	-1.186592	-0.1901211	★	starfish
<p class="alignExample2">	416710.7	-0.04556239	-0.6824076	★★	beatles album cover

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

CSS

.alignExample2a {
  --tabstops: 2cm left, 5cm left, 8cm left, 12cm center, 14cm left;
}

.alignExample2 {
  --tabstops: 2cm decimal, 5cm decimal, 8cm decimal, 12cm center, 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'));
  });


});