Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="css inch ruler">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>    
  <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <h2 id="greeting">THE "CSS INCH" RULER (6.25 css inches or 15.875 css centimeters)</h2>
  <canvas id="previewRuler"></canvas>
  <div id="dummyTextContainer">
  <p id="dummyText">Friends, Romans, countrymen, lend me your ears;
I come to bury Caesar, not to praise him.
The evil that men do lives after them;
The good is oft interred with their bones;
So let it be with Caesar. The noble Brutus
Hath told you Caesar was ambitious:
If it were so, it was a grievous fault,
And grievously hath Caesar answer’d it.
Here, under leave of Brutus and the rest–
For Brutus is an honourable man;
So are they all, all honourable men–
Come I to speak in Caesar’s funeral.
He was my friend, faithful and just to me:
But Brutus says he was ambitious;
And Brutus is an honourable man.
He hath brought many captives home to Rome
Whose ransoms did the general coffers fill:
Did this in Caesar seem ambitious?
When that the poor have cried, Caesar hath wept:
Ambition should be made of sterner stuff:
Yet Brutus says he was ambitious;
And Brutus is an honourable man.
You all did see that on the Lupercal
I thrice presented him a kingly crown,
Which he did thrice refuse: was this ambition?
Yet Brutus says he was ambitious;
And, sure, he is an honourable man.
I speak not to disprove what Brutus spoke,
But here I am to speak what I do know.
You all did love him once, not without cause:
What cause withholds you then, to mourn for him?
O judgment! thou art fled to brutish beasts,
And men have lost their reason. Bear with me;
My heart is in the coffin there with Caesar,
And I must pause till it come back to me.</p>
  </div>
  <div id="controlsContainer">
    <div class="controlgroup">
      <label><input type="radio" value="useInches" name="unit" id="useInches">INCHES</label>
      <label><input type="radio" value="useCM" name="unit" id="useCM">CENTIMETERS</label>
    </div>
    <div class="controlgroup">
      <label><input type="radio" value="recommendedPrecision" name="precision" id="recommendedPrecision">Recommended Draw Fix</label>
      <label title="(on my 1.25 dpr monitor)"><input type="radio" value="drawPrecision" name="precision" id="drawPrecision">Greater Draw Precision</label>
      <label title="(on my 1.25 dpr monitor)"><input type="radio" value="unitPrecision" name="precision" id="unitPrecision">Greater Unit Precision</label>
    </div>
    <div id="tabPositionSlider"></div>
    <p>
      <label for="currentTabPosition">Current tabulation position (1/4 inch increments):</label>
      <input type="text" id="currentTabPosition" readonly style="border:0; color:#f6931f; background-color:transparent; font-weight:bold;">
    </p>
    
  </div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lwangamanpro
0viewers