Use RuleScale, a 100% accurate, highly polished online ruler and virtual ruler app to measure on screen in real-time. This free ruler tool calibrates instantly to your screen size, allowing you to accurately measure real-world objects in inches, centimeters (cm), millimeters (mm), and pixels (px) directly inside your web browser.
- Features
- Interactive Measuring Tools
- How to Calibrate for 100% Accuracy
- Tech Stack
- Local Setup & Installation
- Contributing
- License
- 100% Accurate Scale Calibration: Calibrate dynamically with a physical object (credit card, driving license, or coin) or look up your specific device model automatically.
- Multiple Units & Modes: Toggle effortlessly between cm ruler online, inch ruler online, millimeters (mm), and screen pixels (px).
- No Installation Required: A lightweight, offline-first ruler app browser experience that launches in under a second.
- Full-Screen Edge Ruler Overlay: An immersive interactive mode lining up rulers on all four display edges with draggable measuring guides.
- Responsive Fluid Interface: Full support for both desktop monitors and mobile touch screens, styled with a modern aesthetic including an eye-safe Dark Mode.
Beyond the standard screen ruler, RuleScale provides a robust suite of virtual tools:
- 360-Degree Protractor: Measure physical or digital angles on-screen with precision.
- Ring Sizer Chart: Find your exact US/UK ring size using a physical ring placed directly on your display.
- Creative Web Grid Overlay: Essential grid layout utility for web design prototyping.
- Instant Unit Converter: Seamless conversion between metric and imperial dimensions.
- Scale-Accurate Printable Rulers: Generate precise, printable PDF templates for real-world measuring.
To make your virtual ruler measure real-world units perfectly:
- Click the Calibrate button.
- Choose your calibration helper object (e.g., standard Credit Card or Coin).
- Place the physical object against your screen and adjust the slider until the virtual boundary matches your physical object perfectly.
- Your online ruler is now fully calibrated!
This ultra-fast application was developed using cutting-edge tools:
- AI Assistance: Built with Google AI Studio (Gemini) for rapid, optimized component design.
- Frontend Framework: React 18+ (using Vite build tool)
- Styling: Tailwind CSS (Responsive utility-first design)
- Language: TypeScript (Type-safe robust architecture)
To run this project locally on your machine for development or custom builds:
Ensure you have Node.js (v16+) and npm installed.
git clone https://github.com/zeeuskhan/onlineruler.git
cd onlinerulernpm installnpm run devOpen http://localhost:3000 in your browser to see the live application.
npm run buildContributions are what make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more details.
RuleScale is a free-to-use, browser-based measuring companion built for designers, developers, students, and crafters worldwide. Turn any monitor into a digital measurement station.