Web Plugins Featured

Measure Anything on the Web with MM Ruler



Whether you’re a web designer, developer, or digital artist, MM Ruler helps you measure pixels or millimeters directly on any web page, effortlessly.

  • Why You’ll Love MM Ruler Precise On-Screen Measurements: Measure any element or distance right in your browser window.
  • Easy to Use: Just install, click the icon, and start measuring — no extra setup or tools required.
  • Perfect for Designers & Developers: Ensure perfect alignment, spacing, and sizing without switching apps.
  • Lightweight & Fast: Runs smoothly without slowing your browser down.

Already Trusted by 85+ UsersMM Ruler is growing fast — over 85 people are already using it to make their work sharper and faster.

Join them and take control of your visual precision.

Get It NowYou can install MM Ruler directly from the Chrome Web Store — it’s quick, secure, and completely free to try.

Install MM Ruler on Chrome Web Store


Did you find this tutorial helpful? Let us know!

About the Author
martinmattias

Passionate about helping people create amazing websites for free. Sharing knowledge and tutorials to make web development accessible to everyone.

Discussion

Join the Discussion

Sign in to leave comments and connect with other website builders.

No comments yet

Be the first to share your thoughts about this tutorial!

Found This Tutorial Helpful?

Explore more free tutorials and guides to build amazing websites without spending a penny.

// Copy to clipboard function function copyToClipboard(text) { if (navigator.clipboard) { navigator.clipboard.writeText(text).then(() => { showAlert('Link copied to clipboard!', 'success', 2000); }); } else { // Fallback for older browsers const textArea = document.createElement('textarea'); textArea.value = text; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); showAlert('Link copied to clipboard!', 'success', 2000); } } // Reading progress indicator document.addEventListener('DOMContentLoaded', function() { const progressBar = document.createElement('div'); progressBar.style.cssText = ` position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: #f59e0b; z-index: 9999; transition: width 0.1s ease; `; document.body.appendChild(progressBar); window.addEventListener('scroll', function() { const article = document.querySelector('.article-content'); if (article) { const articleTop = article.offsetTop; const articleHeight = article.offsetHeight; const scrollPosition = window.scrollY; const windowHeight = window.innerHeight; const start = articleTop - windowHeight; const end = articleTop + articleHeight; if (scrollPosition >= start && scrollPosition <= end) { const progress = ((scrollPosition - start) / (end - start)) * 100; progressBar.style.width = Math.min(100, Math.max(0, progress)) + '%'; } } }); });