r4 { border-left: 1px solid #aff; }
  .ruler5 { border-left: 1px solid #ccf; }
  .ruler6 { border-left: 1px solid #fcf; }
</style>
<div id=nav>
  <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

  <ul>
    <li><a href="../index.html">Home</a>
    <li><a href="../doc/manual.html">Manual</a>
    <li><a href="https://github.com/marijnh/codemirror">Code</a>
  </ul>
  <ul>
    <li><a class=active href="#">Ruler demo</a>
  </ul>
</div>

<article>
<h2>Ruler Demo</h2>

<script type="text/jav