HTML5 Doctor » meter http://html5doctor.com helping you implement HTML5 today Wed, 01 Feb 2012 09:28:11 +0000 en hourly 1 http://wordpress.org/?v= Your Questions Answered #11 http://html5doctor.com/your-questions-answered-11/ http://html5doctor.com/your-questions-answered-11/#comments Fri, 30 Jul 2010 14:00:13 +0000 Richard Clark http://html5doctor.com/?p=2328 The clinic is busy as ever with more HTML5 ailments. This week, we'll show you how (and whether) to store a <canvas> on the server, whether to use <progress> or <meter>, more on <header>, the placeholder attribute, and HTML5 minification.

]]> Doctor treating a patient illustration The clinic is busy as ever with more HTML5 ailments. This week, we’ll show you how (and whether) to store a <canvas> on the server, whether to use <progress> or <meter>, more on <header>, the placeholder attribute, and HTML5 minification.

Getting info from a canvas to the server

Stephen asked:

I want to use a canvas element as a layout plan and allow people to move things about and the like but I then want to be able to submit the changed layout to the server so it can be kept not just as a bitmap but as the various current layout of the plan. Is this possible?

You could call canvas.toDataURL() and store this output on the server. (Note that canvas is the DOM node and not the 2D context.) This will store the current state of your canvas, but it’s effectively a bitmap at this point. If you want to store the element for later editing, I’d suggest you use SVG instead. You can achieve the same graphical effect, but you’ll have access to the actual vector data since it’s XML.

Hope that helps,

Remy

Progress or meter?

Pierre asked:

Hello doctor,

I’m beginning with HTML5. I just wonder if I’m using the progress and meter elements correctly. Just imagine a player. Is it correct to use: the progress element to specify a load bar; the meter element to specify the volume set.

Thank you Doctor, have a good day. :-)

<progress> is spot on for a loading bar, yes.

<meter> is read only, however, so it’s not appropriate for a volume control. There are some examples in Tom’s article on <meter>. To create a volume control, you could use one of the new input types specified in HTML5, perhaps <input type="range">.

Cheers,

Rich

Headers

Brad asked:

Having read you can use the header tag within almost any other element, is it fair to say you no longer “design” the header but simply design the elements in each header? How does that work? Would you use header classes?

In the past you define your header with an image or text etc. You can no longer do that if you use multiple headers?

The <header> element should be used if you have any related information within the “header” of that section that needs to be grouped. This means, for example, it isn’t necessary to wrap a lone <h1> in a <header> element. Also remember that the header doesn’t have to appear at the top of a section of page.

Our articles on the <header> element and <hgroup> element explain this some more.

Whether you need to use classes depends on your site.

Ta,

Rich

The placeholder attribute

José asked:

I recall once having seen text inputs that had tips inside them. They didn’t need Javascript in order to manage those tips. Would you consider discussing that a little better? That’d be great! Thanks!

We’re publishing an article on forms shortly, so be sure to look out for it.

Meanwhile, you’re looking for the placeholder attribute. Currently, this is supported only on Webkit browsers, although Mozilla is also working on it. You can use placeholder like this:

<input placeholder="Search" title="Type your search here" ...>

We’ve also written a JavaScript solution using feature detection (i.e., it will check whether the browser supports placeholder and adds support if not). Just add this script to the end of your markup (note that it should be the end since it needs to run once the DOM is ready).

Hope that helps,

Bruce & Remy

HTML5 Minified

Grant asked:

Hello! Big fan of your website. I wanted to know about the so called “HTML Minified” feature that allows you to strip the html, head and body tags from your page.

The W3C Validator Conformance Checker for HTML5 says this is valid, but the Conformance Checker is beta and is supposedly unreliable. I haven’t heard from anywhere else that stripping these tags is a feature.

So is it really a feature? Or just a bug (A BIG one at that) in the experimental validator? I know that it works, but I would like to see any confirmation other than the validator that this is in fact an intended standard before I start using it on my websites. Thanks!

According to the spec, it is now explicitly permitted to omit all kinds of elements tags, including the ones you mention. Browsers are able to deduce the document structure based on context (e.g., some elements are only allowed within a <body> element) and will fix the DOM as they go. In fact, these have always been optional tags in HTML (but not XHTML).

Browsers are so good at this, though, because they’ve had to deal with the pants code out there on the interwebs. Going this route means you’re relying on browser error handling to render your document (although said error handling has admittedly been standardised in HTML5). I personally see it as a more extreme version of quoting element attributes. Of course you don’t have to, but being strict makes errors much easier to find, helps out parsers that may not be as sophisticated as a full-fledged browser (like text editor syntax highlighting), and makes it easier for beginners and veterans alike to learn and use HTML.

In general, machines understand you better when you’re explicit, so I’d advise against omitting these elements.

For more detailed articles on HTML5 minification, check out Remy’s HTML5 Boilerplates and Bruce’s A minimal HTML5 document.

Peace,

Oli

Got a question for us?

That wraps up this round of questions. If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Your Questions Answered #11 originally appeared on HTML5 Doctor on July 30, 2010.

]]> http://html5doctor.com/your-questions-answered-11/feed/ 8 Measure up with the meter tag http://html5doctor.com/measure-up-with-the-meter-tag/ http://html5doctor.com/measure-up-with-the-meter-tag/#comments Wed, 07 Oct 2009 13:31:41 +0000 Tom Leadbetter http://html5doctor.com/?p=823 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

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.

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: <meter> 2 out of 10</meter>. 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

<p>Your score is:  <meter>2 out of 10</meter></p>

We can give this further meaning by adding min and max attributes

<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>
<p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>

Without the attributes

You do not always need to use an attribute with the meter tag. You could use

<meter>80%</meter>

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

<meter>3/4</meter>

Some real world examples

Christmas Calendar/Countdown

<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p>

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.

Screengrab from justgiving.com showing how the meter element could be used

This page, for example, would use

<dl>
  <dt>Target</dt>
  <dd><meter min="145" value="145" title="pounds">£145</meter></dd>
  <dt>Amount raised so far</dt>
  <dd><meter min="0" max="1000" low="50" high="125" value="145" optimum="145" title="pounds">£145</meter></dd>
</dl>

Incorrect use

Empty tag

If you used

<meter min="0" max="100" value="75"></meter>

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

<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>

Which could be used to produce on-screen information as shown

Example usage of meter showing the number of subscribers

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:

<p>The grapefruit pie had a radius of <meter>12cm</meter>  and a height of <meter>2cm</meter>.</p> <!-- BAD! -->

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:

<p>The grapefruit pie had a radius of 12cm and a height of 2cm.</p>
<dl>
<dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
<dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
</dl>

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.

 <!--[if IE]>
  <script  src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

As it is an inline element, you don’t need to do anything special with the CSS.

Conclusion

If I were to use

<meter value="1000" min="0"  max="500">100%</meter>

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.

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).

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.

Useful Links

Measure up with the meter tag originally appeared on HTML5 Doctor on October 7, 2009.

]]> http://html5doctor.com/measure-up-with-the-meter-tag/feed/ 37