Online Ruler

Accurate 1:1 screen ruler with physical calibration, supporting CM and Inch measurements.

📏 Online Ruler: Precise 1:1 Screen Measurement & Physical Calibration Tool —— A lightweight, high-precision professional browser extension that transforms your screen into a real-world physical ruler and protractor. ----------------------------------- Do you often struggle to obtain accurate measurements when sizing objects on your screen due to varying resolutions and zoom levels? "Online Ruler" is designed specifically to solve this common frustration. Utilizing unique physical calibration technology, it dynamically renders precise 1:1 scales based on your monitor's actual PPI (Pixels Per Inch), providing you with real-world-accurate measurement references. Whether you are a designer, an engineer, or a student learning about geometry, this extension offers you the most intuitive and reliable digital measurement solution. 🎉 v2.2.0 Update: Keyboard Controls and Pixel-Perfect Fine-Tuning for Web Rulers ----------------------------------- This update enhances the precision and ease of use for web rulers. We’ve introduced a full suite of keyboard controls, enabling pixel-perfect alignment and efficient navigation between multiple rulers: ✨ Pixel-Perfect Keyboard Adjustments: Once a web ruler is in focus, use the arrow keys (↑ / ↓ / ← / →) to nudge it by 1 pixel. Hold the Shift key while using the arrow keys to move it in 10-pixel increments—perfect for both precise measurements and rapid positioning. ✨ Quick-Focus via Click: Simply click any ruler on the webpage to bring it into focus. You’ll see intuitive on-screen guidance, making it easy to start moving the ruler with your keyboard immediately. ✨ Seamless Switching with the Tab Key: If you have multiple rulers on the page, you can easily cycle the focus between them by pressing the Tab or Shift + Tab keys—streamlining the process of comparing measurements across different rulers. ✨ Intuitive Keyboard Guidance: Built-in prompts (e.g., "Arrow keys to move 1px," "Shift + Arrow keys to move 10px") and helpful tooltips ensure you can get started right away without needing to memorize complex shortcuts. 🎒 STUDENT'S CORNER: FUN WITH GEOMETRY (Great for 4th Graders!) ----------------------------------- Hey there, young explorers! Are you learning about shapes and angles in school? This tool is like having a magic math kit right inside your computer. Here is how you can use it for your homework and fun projects: 📐 Measuring Lengths: Use the **Ruler** to measure how long things are on your screen. You can use Centimeters (cm) or Millimeters (mm), just like the ruler in your pencil case! 📐 Measuring Angles: Have you learned about "Right Angles" or "Acute Angles"? Use the **Protractors** to find out exactly how many degrees an angle has. You can use the standard round protractor or the new **Three-point Protractor** to pin down any corner! 📐 Mix and Match: You can put many rulers and protractors on the page at the same time to see how different shapes fit together. 🎨 Fun Colors: You can change your tools to look like wood, shiny metal, or colorful plastic. Pick your favorite color to make math time more fun! 🌟 Core Features ----------------------------------- ✨ Physical-Level Calibration: Align the tool with standard physical objects—like a credit card or A4 paper—to automatically calculate your screen's exact PPI. Supports +/- buttons for 1-pixel micro-adjustments. 📏 Three Main Tools: Screen Ruler: Supports Metric and Imperial scales for measuring length, spacing, and element sizes. Standard Protractor: A semi-transparent 360° rotatable protractor based on PPI calibration for true physical size. Three-point Dynamic Protractor: Measures arbitrary angles via a vertex and two endpoints with real-time display, adjustable arms, and sector visualization. ⌨️ Keyboard Controls for Pixel-Perfect Adjustment and Focus Switching: Precise Positioning: Once a web ruler is selected, you can use the arrow keys to nudge its position in 1-pixel increments. Hold down the Shift key while using the arrow keys to move it in 10-pixel increments—eliminating the instability often caused by mouse dragging. Switching Between Multiple Rulers: When multiple rulers are present, you can cycle through them by pressing the Tab key (or Shift + Tab) once a ruler has gained focus. 📏 Dual Measurement Modes: Standalone Window Mode: Opens a clean, "always-on-top" ruler window. Page Overlay Mode: Displays floating rulers or protractors directly over any webpage with adjustable transparency. 🔄 Rotation, Snapping & Alignment: Use the rotation handle to adjust the angle in real-time. Rulers and Standard Protractors support snapping to key angles (45°/90°). Three-point Protractor arms also snap to 45° increments for easy alignment with webpage edges. 🔄 Zero Offset & Reset (Ruler): Mimics the protective "zero-point" edge and allows setting a custom starting offset. Includes a one-click "Reset" function. 🎨 Realistic Aesthetics & Materials: Rulers support Wood, Plastic, or Metal textures with dynamic SVG filters. Protractors offer several semi-transparent color schemes (e.g., Classic Blue, Tech Green, Vital Orange) for clarity on any background. 📏 Comprehensive Scale Support: Metric: Centimeter (CM) and Millimeter (MM). Imperial: Inch scales, high-precision down to 1/16 of an inch. 🔄 Flexible Interaction Logic: Full-Edge Resizing: Drag any point along the end of the ruler to adjust its length. Precise Collaboration: Seamless integration of mouse dragging and keyboard arrow keys for pixel-level fine-tuning. Real-time Synchronization: Changes to materials, colors, or settings are applied instantly. 💾 Privacy & Local Storage: All calibration data is stored exclusively within your local browser. 📖 Instructions ----------------------------------- 1. First-time Use: Click the extension icon to enter "Calibration Mode." 2. Alignment: Select a reference object, place it against your screen, and adjust the slider until the mark aligns perfectly. 3. Start Measuring: Click "Add Ruler to Current Page," "Add Protractor," or "Add Three-point Protractor." 4. Change Style: Use the toolbar icons to adjust materials, colors, or transparency. 5. Adjusting Position and Angle: - Drag the main body to reposition it. Once a ruler is selected (in focus), you can perform precise, pixel-level adjustments using the arrow keys (1 pixel) or by holding Shift while using the arrow keys (10 pixels). - Drag the rotation handle to adjust the angle of a ruler or standard protractor; for a three-point protractor, drag its vertex or endpoints to align with the angle. 6. Keyboard Shortcuts and Switching Between Multiple Rulers: When multiple rulers are added to the page, you can cycle through them by pressing the Tab or Shift + Tab keys once a ruler is in focus. 🎨 Design Philosophy ----------------------------------- Precision Above All: Built upon the formula `pixelsPerMm = ppi / 25.4`. Toolkit Thinking: Combining rulers and protractors for UI debugging, blueprint checking, and education. Instant Usability: Wide drag handles and clear zero marks to make it effortless. 🗺️ Roadmap ----------------------------------- Auxiliary Reference Lines: Optional crosshairs or snap-to-edge for comparisons. Expanded Calibration References: Support for A5 paper and mobile screen dimensions. Annotation Feature: Allow adding simple text or line notes at measurement points. 💬 Feedback & Suggestions ----------------------------------- Crafted for users who demand precision! If you have ideas or issues, contact us. Your feedback drives our improvement. Precise measurement—right at your fingertips! 🚀