CSS on-screen ruler

by akogch

HTML

<ul class="ruler">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<div>
  <ul class="ruler" data-items="10"></ul>
</div>

<div>
  <label for="spacing">Spacing</label>
  <select id="spacing">
    <option>1cm</option>
    <option>2cm</option>
    <option>1in</option>
    <option>1em</option>
    <option>20px</option>
  </select>
</div>

CSS

.ruler,
.ruler li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
}

/* IE6-7 Fix */
.ruler,
.ruler li {
  *display: inline;
}

.ruler {
  background: lightYellow;
  box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
  border-radius: 2px;
  border: 1px solid #ccc;
  color: #ccc;
  margin: 0;
  height: 3em;
  padding-right: 1cm;
  white-space: nowrap;
}

.ruler li {
  padding-left: 1cm;
  width: 2em;
  margin: .64em -1em -.64em;
  text-align: center;
  position: relative;
  text-shadow: 1px 1px hsl(60, 60%, 84%);
}

.ruler li:before {
  content: '';
  position: absolute;
  border-left: 1px solid #ccc;
  height: .64em;
  top: -.64em;
  right: 1em;
}

/* Make me pretty! */
body {
  font: 12px Ubuntu, Arial, sans-serif;
  margin: 20px;
}

div {
  margin-top: 2em;
}

JavaScript

$(function() {
  // Build "dynamic" rulers by adding items
  $(".ruler[data-items]").each(function() {
    var ruler = $(this).empty(),
      len = Number(ruler.attr("data-items")) || 0,
      item = $(document.createElement("li")),
      i;
    for (i = 0; i < len; i++) {
      ruler.append(item.clone().text(i + 1));
    }
  });
  // Change the spacing programatically
  function changeRulerSpacing(spacing) {
    $(".ruler").
    css("padding-right", spacing).
    find("li").
    css("padding-left", spacing);
  }
  $("#spacing").change(function() {
    changeRulerSpacing($(this).val());
  });
});