How to make a ruler scale in HTML and CSS

Question

I would like to draw something simple like this using HTML and CSS:

|_____|_____|_____|_____|

with aligned numbers underneath each vertical bar, e.g. 0, 1, 2, 3, 4 etc.

I would also like to adjust the space between bars programmatically. Is there any example I can follow?

Answer 1

I try never to preach using tables for non-tabular data, but you could just do it using a table:

<table width=100% style='font-family: monospace;'>
    <tr style='border-bottom: 1px solid #000;'>
        <td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td width=1%>
            |
        </td>
    </tr>
    <tr>
        <td>
            0
        </td><td>
            1
        </td><td>
            2
        </td><td>
            3
        </td><td>
            4
        </td>
    </tr>
</table>

A fiddle: http://jsfiddle.net/ZH7Lx/

Answer 2

A static answer:

<pre>
|____|____|____|____|
0    1    2    3    4
</pre>

To be able to change it, use JavaScript.

Answer 3

Here are some CSS on-screen rulers in a fiddle :-p There are probably better/fancier ways to set the spacing, but I included a simple example that loops through and adjusts the salient values.

Answer 4

Check this out: http://jsfiddle.net/thirdender/kwcug/

<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>

Looks more fancy and can be easily customized.

Answer 5

Here is a good example:

<label>0</label>
<label>100</label>
<label>200</label>
       ...

https://codepen.io/cfenzo/pen/jEGQGm

or another example

https://codepen.io/pbweb/pen/grQKEK

Answer 6

Here's the solution that I used in my ruler. HTML & CSS ONLY!

Notes:

• It's a partial one, since I had no need to add numbers, just the scale markers. Maybe I'll improve it later & add numbers. You are free to build it from here;
• It works with zoom, which was super useful for me, since I use it on a time scale as minute markers between hour marks. Here, I only include 4 marks, but there can be many. Don't forget you need 1 mark LESS than there are elements (e.g. 9 marks for 10mm)
• It includes a ruler center line.
• NO Javascript and NO html elements for markers (useful if you have an endless ruler that is autogenerated when you drag or magnify it)

SOLUTION: Create a ruler cell div, add background images for markers (linear-gradient can be used), add set a percent position for every marker. This can be done only once in your css, and if you use the same image, there will be only one request for that file, plus if you use linear-gradient, that means no extra requests at all. Since you set a percent position, you can then stretch the ruler as you like, it will still look nice.

If certain cases (e.g. on a mobile device screen, or when you stretch your ruler to magnify) you may want to dynamically create more marks between the ruler points. In this case, simply use javascript to assign a new class like .big to your ruler cells, and set a different set of mark backgrounds for that class. They will switch nicely.

Also, since we use non-pseudo elements - real divs, real backgrounds, - this modular approach to ruler lets you dynamically change it with javascript.

Code:

.comment{color:darkgreen}
.container{
  resize:horizontal;
  overflow:auto;
  width:60%;
  min-width:100px;
  margin:0px auto;
  border:1px solid black;
  padding:20px;
}
.ruler{
  margin:20px 0px;
  background-color:rgb(255, 255, 223);
  height:20px;
  width:100%;
  display:flex;
  justify-content:center
}
.ruler-cell{
  position:relative;
  height:100%;
  width:calc(100% - 20px);
  border-left:1px solid black;
  border-right:1px solid black;
  background-repeat:no-repeat;
  background-size:
    100% 1px,
    1px 8px,
    1px 8px,
    1px 8px,
    1px 8px;
  background-position:
    0% center,
    20% center,
    40% center,
    60% center,
    80% center;
  background-image:
    linear-gradient(gray, gray),
    linear-gradient(gray, gray),
    linear-gradient(gray, gray),
    linear-gradient(gray, gray),
    linear-gradient(gray, gray);
}
.ruler-cell span{
  position:absolute;
  top:-15px;
  font-size:12px;
  text-align:center;
}
.zero{
  left:0;
  transform:translateX(-50%);
  display:none;
}
.number{
  right:0px;
  transform:translateX(50%);
}
.ruler-cell:first-child .zero{
  display:block;
}

<div class="container">
  <p class="comment">#this container is resizeable! Try to resize it!</p>
  <div class="ruler">
    <div class="ruler-cell">
      <span class="zero">0</span>
      <span class="number">1</span>
    </div>
  </div>
</div>

Jsfiddle: https://jsfiddle.net/w423gLuf/

Answer 7

Two rulers (vertical and horizontal) adjacent to a block (to measure it) : https://codepen.io/Raph285/pen/oNPdPWq

This uses HTML & CSS only.

Here is an overview :

HTML

<div class='ruler_top'>
<div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <!-- etc... -->

CSS

.ruler_top .cm:nth-of-type(1) {
    left: 0%;
}
.ruler_top .cm:nth-of-type(1):after {
    content: "0";
}
.ruler_top .cm:nth-of-type(2) {
    left: 10%;
}
.ruler_top .cm:nth-of-type(2):after {
    content: "1";
}
/* etc... */

The HTML code is pretty repetitive but you can easily shorten it with PHP and for loops.

Inspired by Artur Arsalanov ruler (https://codepen.io/pbweb/pen/gMQKEK)