Tape – Measuring HTML Elements on the Screen
In programming and web design, as in any other field, there is a lot of copying. A designer sees an element on a web page that he likes and wants to copy it into his project. Honestly, we see nothing wrong with this and believe that ideas should be shared freely, especially good ones. However, the problem can arise when you want to measure the exact sizes and positions of the elements.
Tape is a free plugin for Google Chrome that will help developers and web designers measure HTML elements on the web page they are currently editing.
How Does Tape Work?
When you install the Tape plugin, its icon will appear in the upper right corner of the Internet browser, in the area reserved for plugin icons. There is no need to create an account or log in to use the plugin. The plugin is used for quick and easy recognition of elements on a web page, as well as measuring the size of elements and their distance from the edges of the screen.
At first glance, Tape is a simple plugin, but when you look beneath the surface, you’ll discover some very interesting options. Using it is more than simple. Open the web page you want to examine, click on the plugin icon, and two red lines, one horizontal and one vertical, will appear across the length and width of the screen, following the mouse as you move it. These lines are used to measure sizes on the screen and provide additional information about HTML elements.
On the edges of these lines, the distance of the line from the edge of the screen will be displayed, so in this way, you can easily measure the distance of the element from the edge of the screen, and here it will also be displayed what type of element the cursor is currently on, div, p, span, img and so forth. If you need to measure the exact size of an element, you can use keyboard shortcuts to place lines on the screen that will serve as delimiters and will not follow the mouse, and will always display their distance from the next line you placed.
For precise positioning of these lines, you can also use the arrows on the keyboard and they will move the line by 1, 4, or 16 pixels. We especially liked that the plugin includes a magnifying glass option with which you can enlarge a part of the screen. It’s also possible to turn on the option to not register clicks, which is handy when testing CSS.
Tape, We Are Sure, Will Make the Work of Developers and Web Designers Easier
Tape is an excellent plugin that will, without a doubt, make the work of both developers and web designers easier. It’s easy to use, and the options it offers will be enough for most users. During use, we did not encounter any problems or bugs, so Tape gets our recommendation.