Digital Tape Measure?

As I am fumbling through responsive design, the following occurred to me…

It would be nice if there was a digital tape measure where you could click on two end points and get a measurement just like in real life.

Why the need?

Well, sometimes it is not easy to look at source code and figure out how wide something is. Or more likely, maybe you want to know how for it is between the center of two items or how far it is from a word to a gutter - all things that code alone wouldn’t easily answer.

So, has anyone created what I am describing?

I think there are several extensions that provide a ruler… which in essence is what you are seeking.

Chrome:
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=en

Firefox
https://addons.mozilla.org/en-us/firefox/addon/measureit/

1 Like

You mean like this?

Try searching for “screen ruler”.

@ronpat knows of a “caliper” tool.

Devtools will tell you the width of an element when you hover over it.


(not my screenshot)

It has a ruler if you switch to mobile view. You can use any size you want there.


(also not my screenshot)

Good point. Firefox as well

That screenshot hurts my brain. :smiley:

1 Like

Those are okay, although I was hoping for something when I could draw a line and get the length of the line (e.g. shortest distance between two points)

That thread is 638 posts?!

Have a link for the caliper tool?

xScope is a nice tool for this sort of thing, though the whole point of responsive design is that you shouldn’t have to worry about the sizes of things, because they are flexible and fit nicely no matter what the environment. :wink:

Better if it were free.

I want to measure things so I can determine proportions so I know the numbers behind what looks good. That is independent of responsive design.

For example, I am thinking 25% for my right column is too big, but measurements would help. Or I have a gutter that looks too big, and a quick measurement would help me decide how to handle it.

1 Like

Hi there mikey_w,

here is a rough and ready example…

<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<style media="screen">

#box {
    width:50%;
    padding-top:31%;
    border:1px solid #000;
    box-sizing:border-box;
    margin:50px auto;
    background-color:#999;
 }
h1 {
    text-align:center;
 }
.changeCursor {
   cursor:crosshair;
 }
.hide {
    display:none;
 }
.show {
   display:inline-block;
 }
#holder {
    position:fixed;
    bottom:10px;
    left:10px;
 }
#measure {
    display:inline-block;
 }
#info,#info1,#info2 {
    min-width:52px;
    padding:8px;
    border:1px solid #000;
    background-color:#ffc;
    font-family:'courier new',monospace;
    font-size:75%;
 }
</style>

</head>
<body>

<div id="box"></div>

<h2>Lorem Ipsum</h12>


<div id="holder">
 <input id="measure" type="button" value="start measure">
 <span id="info" class="hide">x1=0, y1=0</span>
 <span id="info1" class="hide">x2=0, y2=0</span>
 <span id="info2" class="hide">length=0</span>
</div>

<script>
(function() {
   'use strict';
   var d=document,m=d.getElementById('measure'),
       test=true,l=0,t=0,x=[],y=[],w,h,q,
       obj=d.getElementById('info'),
       obj1=d.getElementById('info1'),
       obj2=d.getElementById('info2');

   x.push(l);
   y.push(t);

m.onclick=function() {
if(test===true) {
   d.body.className+=' changeCursor'; 
   m.value='stop measure';
   d.body.addEventListener('mousemove',curPos,false);
   obj.className='show';
   obj1.className='show';
   obj2.className='show';
   test=false;
 }
else {
   d.body.className=document.body.className.replace(' changeCursor','');
   m.value='start measure'; 
   d.body.removeEventListener('mousemove',curPos,false);
   d.body.removeEventListener('click',curxy,false);
   obj.className='hide';
   obj1.className='hide';
   obj2.className='hide';
   test=true;
   x=[0,0];
   y=[0,0];
   obj.firstChild.nodeValue='x1=0, y1=0';
   obj1.firstChild.nodeValue='x2=0, y1=0';
   obj2.firstChild.nodeValue='length=0';
  }
 }
function curPos(e) {
   d.body.addEventListener('click',curxy,false);
   l=e.clientX
   t=e.clientY; 
 }
function curxy() {
   x.push(l);
   y.push(t);
   obj.firstChild.nodeValue='x1='+x[x.length-2]+'px, y1='+y[y.length-2]+'px';
   obj1.firstChild.nodeValue='x2='+x[x.length-1]+'px, y1='+y[y.length-1]+'px';
   q=Math.sqrt(Math.pow((x[x.length-1]-x[x.length-2]),2)+
               Math.pow((y[y.length-1]-y[y.length-2]),2)
              ).toFixed(0);
   obj2.firstChild.nodeValue='length='+q+'px';
 }
})();
</script>

</body>
</html>

coothead

@coothead,

Some Javascript fun, I see!

Interesting demo. Not sure how it would help on an existing page, unless you added your code to every webpage you programmed.

It would also help if you could see a line between the start and end points so you know what the code does…

Nice attempt, though!

When I posted the code, I was strapped for time, hence…

This amended example does let “you know what the code does”. :sunglasses:

<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<style media="screen">
html,body {
    height:100%;
    margin:0;
 }
#box {
    position:relative;
    width:50%;
    top:50px; 
    padding-top:31%;
    border:1px solid #000;
    box-sizing:border-box;
    margin:0 auto 60px;
    background-color:#ccc;
 }
h1 {
    text-align:center;
 }
.changeCursor {
    cursor:crosshair;
 }
.hide {
    display:none;
 }
.show {
    display:inline-block;
 }
#holder {
    position:fixed;
    z-index:2;
    bottom:10px;
    left:10px;
 }
#measure {
    display:inline-block;
 }
#info,#info1,#info2 {
    min-width:52px;
    padding:8px;
    border:1px solid #000;
    background-color:#ffc;
    font-family:'courier new',monospace;
    font-size:75%;
 }
#svg {
    position:absolute; 
    z-index:1;
    top:0;
    left:0;
    width:100%;
    height:100%;
 }
#line {
    stroke:rgb(0,0,0);
    stroke-width:1;
 }
</style>

</head>
<body>

<div id="box"></div>

<h1>Lorem Ipsum</h1>

<div id="holder">
 <input id="measure" type="button" value="start measure">
 <span id="info" class="hide">x1=0, y1=0</span>
 <span id="info1" class="hide">x2=0, y2=0</span>
 <span id="info2" class="hide">length=0</span>
</div>

<svg id="svg"><line id="line"></line></svg> 

<script>
(function() {
   'use strict';
   var d=document,m=d.getElementById('measure'),
       test=true,l=0,t=0,x=[],y=[],w,h,q,count=0,
       obj=d.getElementById('info'),
       obj1=d.getElementById('info1'),
       obj2=d.getElementById('info2'),
       line=d.getElementById('line');

   x.push(l);
   y.push(t);

m.onclick=function() {
if(test===true) {
   d.body.className+=' changeCursor'; 
   m.value='stop measure';
   d.body.addEventListener('mousemove',curPos,false);
   obj.className='show';
   obj1.className='show';
   obj2.className='show';
   test=false;
 }
else {
   d.body.className=document.body.className.replace(' changeCursor','');
   m.value='start measure'; 
   d.body.removeEventListener('mousemove',curPos,false);
   d.body.removeEventListener('click',curxy,false);
   obj.className='hide';
   obj1.className='hide';
   obj2.className='hide';
   test=true;
   x=[0,0];
   y=[0,0];
   obj.firstChild.nodeValue='x1=0, y1=0';
   obj1.firstChild.nodeValue='x2=0, y1=0';
   obj2.firstChild.nodeValue='length=0';
   line.setAttribute('x1',0);
   line.setAttribute('x2',0);
   line.setAttribute('y1',0);
   line.setAttribute('y2',0);
   count=0;
  }
 }
function curPos(e) {
   d.body.addEventListener('click',curxy,false);
   l=e.clientX
   t=e.clientY; 
 }
function curxy() {
   x.push(l);
   y.push(t);
   obj.firstChild.nodeValue='x1='+x[x.length-2]+'px, y1='+y[y.length-2]+'px';
   obj1.firstChild.nodeValue='x2='+x[x.length-1]+'px, y1='+y[y.length-1]+'px';
   q=Math.sqrt(Math.pow((x[x.length-1]-x[x.length-2]),2)+
               Math.pow((y[y.length-1]-y[y.length-2]),2)
              ).toFixed(0);
   obj2.firstChild.nodeValue='length='+q+'px';
if(count<1){
   count++;
   return;
 }
   line.setAttribute('x1',x[x.length-2]);
   line.setAttribute('x2',x[x.length-1]);
   line.setAttribute('y1',y[y.length-2]);
   line.setAttribute('y2',y[y.length-1]);
 }
})();
</script>

</body>
</html>

coothead

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.