The virtual ruler for web developers

Virtual ruler for measuring distances

Every distance counts

With HTML and CSS, web developers have access to a solid set of layout tools when it comes to the realization of web designs. However elements can't be aligned automatically in every case. When it comes to manual positioning there may occur minimal shifts which then disturb the visual appearance of a website. That's why a visual check on the pixel level is almost vital.

Grids and sizes

Visual harmony on the screen underlies laws of design. Modern websites and web apps are based on grid systems for a reason. The optimal case would be characterized by specific numerical orders or sizes that are divisible by a certain number. Also recurring distances ensure a balanced appearance on screen. It's the small things that ensure a professional and well-designed visual presentation.

The measuring tool of PixelZoomer allows you to create rectangle selections whose pixel sizes are displayed in the toolbar. Thereby you can easily measure different distances in a short amount of time. So you can control quickly if there are aberrations or distances that need to be adjusted.

Dynamic measuring tool

Virtual ruler for pixel perfect selections

The virtual ruler of PixelZoomer is activated by creating a selection: in the center of the upper toolbar you can read the width and height of the rectangle selection in pixels. A selection is also possible when the screenshot is enlarged and therefore it's easy to do pixel perfect measurements. A once created selection can also be moved across the window border – the visible image area is moved by the program automatically. You can also create square regions by holding down the SHIFT key on your keyboard.

Finally, you can move around the selection in real-time: by pressing the SPACE key and moving the mouse simultaneously, you can change the position of the current selection. So you don't have to recreate a selection if you missed a pixel edge.

Together with the integrated screen magnifier, the selection tool represents the core feature of PixelZoomer. With these features you can quickly measure distances or even control visual effects. Especially centered elements can be realized differently with CSS. That's why a final check is more important so that you can ensure an element is really centered.

Undo and redo

When working with programs, mistakes can happen from time to time. That's why applications have an undo/redo functionality which should have a place in every software. Also PixelZoomer comes with that feature: you can undo the last action that was performed with the measuring tool by simply pressing a button in the toolbar. Of course you can also use the commonly used CTRL+Z shortcut on the keyboard.

Measure, move, read out

Height and width

A pixel perfect selection rectangle is created quickly in PixelZoomer. You can read out the widht and height of the selection in the toolbar but also as a mouse tooltip. In that way you can easily determine distances.

Move selections

A created selection isn't final: you can move it around afterwards to check recurring distances anywhere on the screenshot. You can create a new selection simply with a click if you want to check another distance.