Read reviews, compare customer ratings, see screenshots, and learn more about xScope 4. Download xScope 4 for macOS 10.9 or later and enjoy it on your Mac.
HTML5 offers several useful new elements, to add further meaning to the markup of a page. These new elements include time, mark and here is another one, meter. It is an inline element so it can be used inside most elements, including a header or a paragraph.
What does it say in the spec?
The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.
When I first read about the meter tag, I immediately thought it would be useful for profile pages, such as height and weight, and maybe age, marked up in a nice definition list. However, the third line of the spec says
- Xscope 3 5 1 – Onscreen Graphic Measurement Tools Free xScope 4.4.1 Created specifically for designers & developers, xScope is a powerful set of tools that are ideal for measuring, inspecting & testing on-screen graphics and layouts. XScope's tools float above your desktop windows and can be accessed via a toolbar, menubar and/or hot keys.
- An area of text or graphics that extends beyond the edge of the page. Images that are supposed to run all the way to the paper edge has to be printed with bleed. Image must extend a bit outside of the page format, around 5mm or 1/8'. Bleed is the portion of art at the edge of the page that extends beyond the trim size.
The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value
So there goes my idea. The emphasis of the spec definition is 'a scalar measurement within a known range'
. We'll go through some sample usage now but I still think it would add useful meaning to a sportsman's profile page for example.
Free download image measurement tool mac Files at Software Informer. The program lets you measure and analyze digital images. Mac game cities: skylines 1 0 5. It has support for DICOM, JPEG, TIFF, and popular image formats. Download xScope 4 for macOS 10.9 or later and enjoy it on your Mac. Created specifically for designers & developers, xScope is a powerful set of tools that are ideal for measuring, inspecting & testing on-screen graphics and layouts. XScope's tools float above your desktop windows and can be accessed via a toolbar, menubar and/or hot keys.
Attributes
There are six attributes allowed with the meter tag: value, min, max, high, low and optimum. As we'll mention later, the emphasis is on the author to use these correctly.
- Value
- This is what will be parsed out – the actual value. If you do not use the value attribute, then the first number inside the tag is the value:
2 out of 10. If a real number is not used, then the value is zero. - Min
- The minimum allowed value. If there is no min attribute, then it assumes the minimum is zero. If it is not specified then the value is 0.
- Max
- The maximum allowed value. If the maximum value is less than the minimum value, then the minimum value is used as the max. If it is not specified then the value is 1. However, if it is possible to specify the value of this in the content – such as a percentage sign, as the maximum then will be 100%
- Low
- This is considered to be the low part of the value range. It must be less than or equal to the value of the high attribute. Also, if the low value is less than the min value, then the low value is the same as the min value.
- High
- This is considered to be the high part of the value range. If the high value is less than the low boundary, then the high value is the same as the low value. Also, if the high value is greater than the max value, then the high value is the same as the max value.
- Optimum
- This is considered to be the optimum value and needs to be somewhere between min and max. It can be greater than the high attribute
Let's have a look at some examples
A voting or rating tool
We can give this further meaning by adding min and max attributes
Without the attributes
You do not always need to use an attribute with the meter tag. You could use
Because the max value is going to be 100% (unless you always give that extra 10 :P ). You can also use fractions as the range is within itself, such as
Some real world examples
Christmas Calendar/Countdown
Notice that the title attribute can be used to specify the unit (so we can use 'centimeters' or 'lbs', and so on).
Just Giving
We could also use meter on the fundraising website Justgiving.
This page, for example, would use
Incorrect use
Empty tag
If you used
Nothing will display on your page – it is noted in the spec
The recommended way of giving the value is to include it as contents of the element
So you need to put something in the content of the tag and it doesn't necessarily have to be a number. The spec has a good example of this
Which could be used to produce on-screen information as shown
As I noted earlier, it is incorrect to use as a weight or height, unless there is a maximum value. The spec gives this example:
Instead, one would either not include the meter element, or use the meter element with a defined range to give the dimensions in context compared to other pies:
Whilst the above is now a correct usage of the meter tag, how do I know the max height or radius of a grapefruit? I would prefer to use a meter tag there but instead I'd probably just use a definition list to display the information.
Browser support
The meter tag works in at least the following browsers Safari 4, Firefox 3.5, Chrome 2, Opera 9.64 naturally. The following javascript is needed for IE 6, 7 and 8 (see Remy's article about Getting HTML5 to play nicely in older browsers.
As it is an inline element, you don't need to do anything special with the CSS.
Conclusion
If I were to use
Obviously there are inconsistencies. Now, I am just being silly there but what the user will see on the screen is '100%' when the value is actually 1000. The meter tag puts the emphasis on the author to make sure that they are using this nice, new semantic tag,well, semantically and correctly.
Xscope 3 5 1 – Onscreen Graphic Measurement Tools Pdf
The attributes can appear to be quite confusing but the spec is very detailed for this element. I do think they may have missed a trick by not allowing it to be used to give a stand-alone height or weight but overall I see the meter tag being used a lot in apps and on webpages, perhaps if used with javascript, it could generate live graphs and charts (though we can also use canvas for this).
Xscope 3 5 1 – Onscreen Graphic Measurement Tools Chart
Finally, I also wonder if meter allows for negative values? For example if the temperature was going to be between -10 and 5 degrees could I use meter to mark that up? I'd love to know your thoughts.
Xscope 3 5 1 – Onscreen Graphic Measurement Tools Pdf
Useful Links
