Online Screen Ruler
Measure distances, angles and positions on your screen in pixels, millimeters or inches.
-
1Enter data
Enter content, paste text or load a file from disk. -
2Click the button
The tool will immediately process your data in the browser. -
3Get the result
Copy the finished text or save the file to your device.
return "Result ready in 0.1s";
}
Card Calibration
Place your physical payment card on the screen and use the slider to adjust the width of the blue rectangle.
Rate this tool:
Related tools
Other tools you may find usefulOnline Screen Ruler - Measure pixels, mm and inches
Calibrate your monitor's PPI and measure everything on the screen: lines, angles, millimeter grid and element positions. A simple browser-based tool with no installation required, plus PNG/SVG export and printing option.
Start online ruler How it works
What you will do with the online ruler
This is a universal on-screen ruler and protractor in the browser. It is perfect for DIY projects, learning, working with graphics, printing and quick measurement on pages, PDFs and photos.
- Measuredistances on the screenin px, mm and inches.
- Calibrate the monitor after specifyingPPIordiagonal(e.g. 13.3", 24").
- Drawsegmentsand read the lengths and X/Y differences.
- Determineanglesright, acute and obtuse (online protractor).
- Turn onmillimeter gridor pixel grid and set the grid step.
- Addguides, enablecrosshairsfor centering.
- Export preview toPNG/SVGorprintmesh.
Works in desktop and mobile browsers. No installation or login required.
How does the on-screen ruler on Webp.pl work
The interface has five measurement modes. You select units, calibrate the monitor and measure elements on the screen with real conversion into mm or inches.
Measurement modes
- Ruler– straight beam with px/mm/in scale.
- Section- measure from point A to B, read the length and components.
- Angle– three points define an angle, the result in degrees.
- Grid– density in px or mm, alignment of elements.
- Crosshair– crosshair for centering and symmetry axis.
Units and calibration
- Units: togglepx / mm / in.
- PPI calibration: automatic or manual.
- From diagonal: enter e.g. 15.6 and set the resolution.
- Presets: Popular laptops and monitors for a quick start.
After calibration, 10 mm on the screen corresponds to 10 mm in reality.
Step-by-step instructions
- ClickLaunch the rulerand select the mode: Ruler, Line, Angle, Grid or Crosshair.
- In theUnitssection, selectpx, mmorin.
- EnterCalibrateand setPPIof the monitor,diagonalor usepreset.
- In Line mode, click point A and B. In Angle mode, pick three points.
- Enablegrid, setstepand addprowadniceguides to align objects.
- Finally, selectPNG/SVG ExportorPrintmesh.
Everything runs locally in the browser. You don't need to download the app or create an account.
Principles of accurate measurement and PPI calibration
- Calibration once: after setting the PPI, we keep the scale for all modes.
- Card Method: Set the slider so that card width = 85.6 mm on the screen.
- Diagonal method: enter the size in inches and resolution - the system will calculate PPI.
- Millimeter grid: after calibration, use it for quick real-world measurements.
- Print: Print grids at 100% scale, without fitting to the page.
| Screen Type | Example | Estimated PPI* | Calibration Tip |
|---|---|---|---|
| Laptop 13.3” 1920×1080 | FHD 13.3 | ~166 PPI | Correct with card - different frames and system scaling |
| Monitor 24” 1920×1080 | FHD 24 | ~92 PPI | Convenient for measurements in mm after one-time calibration |
| Monitor 27” 2560×1440 | QHD 27 | ~109 PPI | Check system scaling 100%/125% |
| 4K 27-32” 3840×2160 | UHD | ~137–163 PPI | Mandatory calibration, high DPI |
*PPI depends on the actual dimensions of the matrix and system scaling. Use card calibration for highest accuracy.
Usage examples per mode
Select a mode suited to the task. Below are real scenarios with phrases that users are looking for: online ruler, online protractor, millimeter grid, pixel measurement, screen guides, distance in millimeters.
Ruler
- Quick measurement of the width of the photo on the page in px and mm.
- Check margins in PDF document after PPI calibration.
- Evaluate the size of a UI element before taking a screenshot.
Tip: After calibration, an edge of 10 mm on the screen equals 10 mm in reality.
Episode
- Measures the space between two icons in pixels.
- Check the banner height in millimeters for printing.
- Determine the difference of X and Y for element alignment.
Click point A and B. The panel will show the total length and component axis.
Angle
- Check the tilt of the photo before cropping.
- Verify the cutting angle in a DIY project or mockup.
- Controls the angle between the grid lines and the object.
Pick three points. You will read the angle in degrees with an accuracy of 0.1.
Grid
- Millimeter grid for scaling the sketch on screen.
- Pixel grid for website and app prototypes.
- Equation of objects with markers and guides.
Set the grid step. Enable snapping to nodes if available.
Crosshair
- Precise centering of an object on the X and Y axes.
- Checking the symmetry of logos and icons.
- Determining the intersection of guide lines.
The crosshair acts as a crosshair. Helps catch the center and right angles.
Algorithm and unit conversions
After calibration, the tool converts pixels to millimeters and inches based on the screen's PPI. This ensures that the length on the screen matches the length in the physical world.
Conversion formulas
| Conversion | Formula | Description |
|---|---|---|
| px → mm | mm = px × 25.4 ÷ PPI | 25.4 mm in 1 inch |
| mm → px | px = mm × PPI ÷ 25.4 | reverse conversion |
| px → in | in = px ÷ PPI | inch is pixels divided by PPI |
| Angle | θ = arccos( (a·b) ÷ |a||b| ) | dot product of two vectors |
| Segment | d = √(Δx² + Δy²) | length between A and B |
PPI can be set manually, from the diagonal and resolution or match with a payment card.
Sources of error and how to reduce them
- System scaling125 or 150 percent. Set it to 100 percent or calibrate with a card.
- Matrix differencesthe same size in inches does not always mean the same PPI.
- Browser ZoomCtrl plus 0 resets the zoom to 100 percent.
- Printerprinting at 100 percent scale without fitting to the page.
Highest accuracy will combine PPI with physical calibration to a known dimension.
Export and print
Save measurement results, share screenshots and print millimeter grids. Perfect for documentation, manuals and workshops.
Export
- PNG fileswith a scale, segment or angle on top.
- SVGvector guides and grid for further editing.
- Turn off thewatermark if you need a clean print.
PNG is suitable for quick reports, SVG for editing in graphic programs.
Grid printing
- Select a millimeter grid and set the step, e.g. 5 mm.
- Print at 100 percent scale. Turn off fit to page.
- Check the 50 mm control section with a physical ruler.
If the deviation exceeds 1 mm per 50 mm, correct the PPI and reprint.
Quick Shortcuts and Accuracy Habits
Quick Shortcuts
- Ctrl plus 0reset browser zoom.
- Ctrl plus i Ctrl minuszoom. Use only before calibration.
- Arrowsminor shifts of guides and points.
- Shiftmaintain the axis when drawing a segment or angle.
Accuracy Habits
- Calibrate once on a given screen, then do not zoom.
- Verify with a known dimension, e.g. 85.6 mm card or banknote.
- Work with a light background and enable mesh anti-aliasing.
- Note the PPI in your profile to use the same settings in the future.
Applications at work and DIY
The online ruler is useful in everyday home and professional tasks. From quick measurement on the website, through verification of graphic dimensions, to mock-ups and DIY projects.
DTP, graphics, UI
- Banner and margin width control in px and mm.
- Verification of the distribution of elements in relation to the grid and guides.
- Checking the tilt angles of photos and icons before exporting.
- Quick markings for screenshots and documentation.
DIY, workshop, mock-ups
- Measuring elements in a photo before cutting or cutting.
- Setting the material cutting angle with an accuracy of 0.1 degree.
- Printing a millimeter grid as a template base.
- Determining the center of objects using crosshairs and guides.
Office, documents, PDF
- Checking spacing and margins before sending for printing.
- Compare two versions of a document against the same grid.
- Verification of dimensions of labels and stickers.
Photo, marketplace, classifieds
- Quick measurement of frames and thumbnails to meet platform requirements.
- Checking whether the dimensions of the product in the photo match.
- Marking cutting and framing lines for customer instructions.
Education and school
The tool supports teaching mathematics, technology and computer science. It allows you to work on the screen as if you were working on graph paper.
Lessons and activities
- Online protractor for geometry and technical drawing tasks.
- Millimeter grid for charts and drawing scaling.
- Ruler and line for measuring distances on maps and plans.
Homework and projects
- Verification of dimensions of 2D models before printing.
- Working on scans from textbooks and worksheets in PDF.
- Document measurements by PNG export or grid print.
Integration with other Webp tools
Online Ruler works with other Webp tools for a consistent workflow. It makes it easy to check dimensions and then quickly proceed to compression, conversion and publishing.
Typical flows
- Inline graphics measurement → WebP compression → website publication.
- PDF margin verification → annotations → export and sending for printing.
- Grid and guides → PNG dump → instructions for team or client.
Consistency of units
- Set a base in mm and stick to it from measurement to printing.
- For screen graphics, work in px and switch to mm before printing.
- When using 4K and system upscaling, calibrate the card before each important project.
Monitor Buying Guide for Accurate Measurements
Measurement accuracy depends on PPI and display stability. Below are short recommendations for the most common applications.
| Application | Resolution and size | PPI approximately | Notes |
|---|---|---|---|
| DTP, prepress graphics | 27" 2560×1440 or 27" 3840×2160 | ~109 or ~163 | 100 or 125 percent scaling, card calibration |
| UI, web, front-end | 27" 2560×1440 | ~109 | Good compromise between space and element size |
| Office and documents | 24" 1920×1080 | ~92 | Easy reading, stable calibration, low DPI |
| Mobile work on a laptop | 13.3" 1920×1080 or 14" 1920×1200 | ~160 | Requires precise calibration and constant zoom |
- Check the actual matrix size and system scaling before calibration.
- Use constant 100 percent magnification throughout the measurement process.
- Calibrate with an 85.6 mm card, then confirm with a 50 mm control section.
Common errors and how to maintain accuracy
- Failure to calibrate PPIbefore measurement. Solution: Always runCalibrateand confirm with the 85.6 mm card.
- Browser zoomother than 100 percent. Solution:Ctrl + 0before starting.
- System scaling125 or 150 percent. Solution: Calibrate with active scaling or set to 100 percent.
- Inaccurate printing ofgrid due to fit to page. Solution: 100 percent scale printing.
- Mixingunits while running. Solution: keep one base, e.g. mm for print, px for UI.
Online ruler and other tools
| Solution | Pros | Cons | When to choose |
|---|---|---|---|
| Webp on-screen ruler | No installation, PPI calibration, modes: segment, angle, grid, export | Requires correct calibration and constant zoom | Measurement on pages, PDF, photos and quick documentation |
| Browser plug-ins | Quick access, integration with dev tools | Various quality, no real mm without PPI | Measurement only in px when working on UI |
| Desktop applications | Advanced functions, macros | Installation, licenses | Constant work in DTP or CAD |
| Physical ruler | Real mm without electronics | Does not work on screenshots and PDF on screen | Print verification and calibration screen |
Webp ruler combines online convenience with conversion to mm and inches after PPI calibration.
Accessibility and mobile
Accessibility
- Contrasting unit and division labels.
- Large click areas for measurement points.
- Keyboard navigation and shortcuts for precision.
Mobile
- Responsive UI on phones and tablets.
- Calibrate to a card or known dimension.
- Zoom lock during measurement for fixed scale.
Privacy & Data
- No logging in and no measurements sent to the server.
- PPI and unit settings work locally during the session.
- You save PNG or SVG export only on the user side.
If you are working on shared hardware, delete the export files when finished and close the tab.
1:1 phone ruler - measure at real scale
Don't have a real ruler handy? Open this page on your smartphone and the screen will turn into aruler at 1:1 scale- a centimeter on the screen then corresponds to a centimeter in real life. The condition for accuracy is a one-time calibration: place a payment card (each has a standardized width of 85.6 mm) or a PLN 5 coin (24 mm) on the screen and adjust the calibration slider until the pattern matches the scale. The setting is saved for your device.
After calibration, you can measure small items with your phone without reaching for any accessories: a screw, ring diameter, cable width, print margins or envelope dimensions. A typical smartphone screen allows you to measure sections up to approx. 7–15 cm; measure longer sections in stages or print a mesh from the tool.
20 cm and 30 cm ruler - on screen or for printing
On a monitor or tablet, the on-screen ruler easily covers the range of the classic20 cm and 30 cm ruler. If you need a "physical" ruler once, use export to PDF/PNG and print the scale at 100% scale (turn off the "fit to page" option in the printer) - you will receive an exact paper ruler of the selected length.
FAQ
Is online ruler free
Yes. The tool works for free in your browser, without installation and without creating an account.
How to calibrate the monitor to millimeters
OpenCalibrate, select PPI or enter the diagonal and resolution. Confirm by matching to 85.6mm card.
Can I measure angles in a photo
Yes. InAnglemode, pick three points in the image. You will see the result in degrees.
Can I print a millimeter grid
Yes. Set the grid step, selectPrintand print at 100 percent scale.
Why does the result in mm differ from the physical ruler
Most often it is the effect of zoom or system scaling. Reset the zoom to 100 percent and repeat the calibration.
Does it work on
Yes. The UI is responsive. Remember to calibrate and constantly enlarge your browser.
Problems and Quick Solutions
Measurement is too large or too small
- Reset ZoomCtrl + 0.
- Repeat PPI calibration by card method.
- Disable automatic page adjustment when printing.
Measurement points are difficult to capture
- Enlarge the page only during the setup stage. After calibration, return to 100 percent.
- Enable grid and guides for references.
- Use arrow keys for precise shifts.
PNG export has different dimensions than preview
- Check the DPI scale in the export settings.
- Do not change the zoom between measurement and export.
- Verify the file with a 50 mm control section.
Different results on two monitors
- Calibrate each screen separately.
- Check the system scaling per monitor.
- Note the PPI and calibration date for repeatability.
Measure online in px, mm and inches
Launch the on-screen ruler, calibrate PPI and measure with millimeter accuracy. Turn on a line segment, angle or mesh and save the result to PNG or SVG.
Launch online ruler See examples