andyf.me · MeasureMeasure

A bookmarklet to measure the average line length of a given element. Try it by moving your mouse over the elements on this page.

Drag this link to your bookmarks bar: MeasureMeasure.

How it works

When you move the mouse over an element, a ‘mirror’ of that element is created, one with all the same size, font and layout properties. The text of the source element is copied to the mirror one character at a time, and when the mirror’s height changes, a record is made of the number of characters added since the last height change. Once all characters have been copied, the average of the line lengths is calculated and displayed. The last line is not included in the calculations, since it's generally shorter than the others.

Limitations

For simplicity and speed reasons, only <p> (paragraph) elements are measured, since there is no reliable way to detect when other elements such as <div> are being used only for body text, versus when they’re used as other things, such as a container element for the entire page.

Due to the rather hacky way the text is measured, it can be quite slow and laggy, although it works acceptably fast for me in Chrome 30 on my pretty old MacBook Pro.

Another limitation of the measuring method is formatting: because only the plain text content of the element is copied, if you have inline elements within it whose formatting that affects the text size significantly (e.g. links are larger and in bold weight, or have icons inserted before them), the measurements will be thrown off a little.

The code also uses the W3C standard event binding methods, so it won't work in Internet Explorer versions below 9.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet neque id dui mattis euismod ut ac magna. Praesent at tellus ac dolor ullamcorper sodales at tincidunt ante. Nam consequat turpis eu enim ullamcorper, vel volutpat nibh sodales. Mauris imperdiet purus dui, ultricies ultrices tellus bibendum sed. Vestibulum faucibus, elit vitae pellentesque bibendum, tellus est dapibus tellus, eget interdum elit nulla at velit. Pellentesque nibh nulla, imperdiet at nunc vulputate, tincidunt sollicitudin tellus. In id risus quis neque consectetur mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet neque id dui mattis euismod ut ac magna. Praesent at tellus ac dolor ullamcorper sodales at tincidunt ante. Nam consequat turpis eu enim ullamcorper, vel volutpat nibh sodales. Mauris imperdiet purus dui, ultricies ultrices tellus bibendum sed. Vestibulum faucibus, elit vitae pellentesque bibendum, tellus est dapibus tellus, eget interdum elit nulla at velit. Pellentesque nibh nulla, imperdiet at nunc vulputate, tincidunt sollicitudin tellus. In id risus quis neque consectetur mollis.