From mickyhulse.lists at gmail.com  Wed May  1 16:56:09 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Wed, 1 May 2013 16:56:09 -0700
Subject: [html5] <header>, <hgroup> and subheadings
Message-ID: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>

Hello,

Using the outliner (ya'll probably know this link by heart):

<http://gsnedders.html5.org/outliner/>

Example #1:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <hgroup>
            <h1>Primary heading</h1>
            <h2>Secondary heading</h2>
            <h3>Tertiary heading</h3>
        </hgroup>
    </heading>
</article>

... creates this outline:

1. This is a section
    1. Primary heading

Example #2:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <hgroup>
            <h1>Primary heading</h1>
            <h2>Secondary heading</h2>
        </hgroup>
        <h3>Tertiary heading</h3>
    </heading>
</article>

... creates this outline:

1. This is a section
    1. Primary heading
        1. Tertiary heading

Question:

Which is better in terms of showing a subheading?

I like how the outliner, in Example #2, insets the "Tertiary heading"
on a new level. To me, that's how I would expect an outline to show a
subheading of an article.

On the other hand, everything I've read says to group headings
together using <hgroup>.

I know things are open to interpretation, but in your opinions, would
it be wrong for me to leave the <h3> outside of the <hgroup>?

In the real world, I'm using the <h3> for optional subheadlines to my articles.

Thanks!
Micky

From mickyhulse.lists at gmail.com  Wed May  1 17:38:44 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Wed, 1 May 2013 17:38:44 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
Message-ID: <CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>

Hmm, just read that the <hgroup> has been removed from the spec:

http://html5doctor.com/the-hgroup-element/

"Update 16th April, 2013. hgroup has now been removed from the HTML5
specification. We are working on an article to help guide authors on
which markup patterns they should use instead."

Interesting.

I guess I'll start the process of removing <hgroup> from my code.

Actually, I just tested this code (not using <hgroup>):

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <h1>Primary heading</h1>
        <h2>Secondary heading</h2>
        <h3>Tertiary heading</h3>
    </heading>
</article>

... which produces this outline:

1. This is a section
    1. Primary heading
        1. Secondary heading
            1. Tertiary heading

That's not bad! For some reason, I was getting different results
earlier when outlining a bigger site.

Ah, maybe I was getting odd results because I had a structure like this:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <h3>Tertiary heading</h3>
        <h1>Primary heading</h1>
        <h2>Secondary heading</h2>
    </heading>
</article>

... which gives me this outline:

1. This is a section
    1. Tertiary heading
    2. Primary heading
        1. Secondary heading

I never realized that the order mattered. Good to know!

So, how does one handle a subheading that is supposed to appear above
a main heading? I don't always want my <h1> to be the first in the
flow due to importance of the heading, right?

<h3>Least important heading</h3>
<h1>Most important heading</h1>
<h2>Second most important heading</h2>

Using the above, without an <hgroup> throws off the outliner.

Strange.


On Wed, May 1, 2013 at 4:56 PM, Micky Hulse <mickyhulse.lists at gmail.com> wrote:
> Hello,
>
> Using the outliner (ya'll probably know this link by heart):
>
> <http://gsnedders.html5.org/outliner/>
>
> Example #1:
>
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>     <heading>
>         <hgroup>
>             <h1>Primary heading</h1>
>             <h2>Secondary heading</h2>
>             <h3>Tertiary heading</h3>
>         </hgroup>
>     </heading>
> </article>
>
> ... creates this outline:
>
> 1. This is a section
>     1. Primary heading
>
> Example #2:
>
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>     <heading>
>         <hgroup>
>             <h1>Primary heading</h1>
>             <h2>Secondary heading</h2>
>         </hgroup>
>         <h3>Tertiary heading</h3>
>     </heading>
> </article>
>
> ... creates this outline:
>
> 1. This is a section
>     1. Primary heading
>         1. Tertiary heading
>
> Question:
>
> Which is better in terms of showing a subheading?
>
> I like how the outliner, in Example #2, insets the "Tertiary heading"
> on a new level. To me, that's how I would expect an outline to show a
> subheading of an article.
>
> On the other hand, everything I've read says to group headings
> together using <hgroup>.
>
> I know things are open to interpretation, but in your opinions, would
> it be wrong for me to leave the <h3> outside of the <hgroup>?
>
> In the real world, I'm using the <h3> for optional subheadlines to my articles.
>
> Thanks!
> Micky



-- 
http://hulse.me

From mickyhulse.lists at gmail.com  Wed May  1 18:00:26 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Wed, 1 May 2013 18:00:26 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
Message-ID: <CALri7MkxnrD4FymZVJ7XkvdyW15QEtuVUfCd9M7LbXKVD8=Z0A@mail.gmail.com>

Check out this scenario:

Not using an <hgroup>:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
   <heading>
       <h3>Tertiary heading</h3>
       <h1>Primary heading</h1>
       <h2>Secondary heading</h2>
   </heading>
</article>

Outline:

1. This is a section
   1. Tertiary heading
   2. Primary heading
       1. Secondary heading

Now, using an <hgroup>:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <hgroup>
            <h3>Tertiary heading</h3>
            <h1>Primary heading</h1>
            <h2>Secondary heading</h2>
        </hgroup>
    </heading>
</article>

Outline:

1. This is a section
   1. Primary heading

Clearly, in this case, the <hgroup> proves to be useful as it allows
for non-sequential heading orders and it pulls the <h1> as the title
for group in the outliner.

I'd hate to always have to have <h1> come first ... Sometimes one
needs to put a less important heading above the most important heading
(I'd say that's a pretty common pattern that people use for when it
comes to multiple headings).

Anyone following me here? :D

From amy at darbyshire.id.au  Wed May  1 20:43:22 2013
From: amy at darbyshire.id.au (Amy Soyka)
Date: Thu, 2 May 2013 13:43:22 +1000
Subject: [html5]  these simplifications simply must happen...
Message-ID: <CADfr_5Be-_1bPPgOFY28TKn2VHWuP8FjE03cwGUAM=QdreyZQA@mail.gmail.com>

Hi all,

I've posted about this in the past but it seems to have been ignored so I
am airing this on the help mailing list as it is an issue I think needs to
be fixed.

traditionally linking to external stylesheets has always been done with:
<link href="url" rel="stylesheet" type="text/css">
the link tag being used not only for stylesheets but also to link other
media.

however, when embedding css into our documents we use:
<style type="text/css"></style>
or simply the new html5 way:
<style></style>

traditionally linking to javascript had been done with:
<script src="url" type="text/javascript"></script>
which was written so as to execute both external & embedded scripts.
or now in html 5 simply:
<script src="url"></script>

why cant the styles tag follow suite and use:
<style src="url"></style>
?

this would simplify the use of both external & embedded styles.
scripts using <script src=""></script>
styles using <style src=""></style>

additional points I would like to suggest are to do with the use of both:
href="" & src="" when linking content.
href means hyperlink reference & src means source

would it make sense to define some better practice standards around this?
href means hyperlink reference. it is used for linking within/to other
pages.
src means source. it is used to link to media content beyond a page.
shouldn't these be defined more as such?

I hope that everyone appreciates these comments.
Sincerely
Amy Soyka
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130502/d07eaa24/attachment.htm>

From jukka.k.korpela at kolumbus.fi  Wed May  1 21:21:11 2013
From: jukka.k.korpela at kolumbus.fi (Jukka K. Korpela)
Date: Thu, 02 May 2013 07:21:11 +0300
Subject: [html5] these simplifications simply must happen...
In-Reply-To: <CADfr_5Be-_1bPPgOFY28TKn2VHWuP8FjE03cwGUAM=QdreyZQA@mail.gmail.com>
References: <CADfr_5Be-_1bPPgOFY28TKn2VHWuP8FjE03cwGUAM=QdreyZQA@mail.gmail.com>
Message-ID: <5181E9B7.30801@kolumbus.fi>

2013-05-02 6:43, Amy Soyka wrote:
> why cant the styles tag follow suite and use:
> <style src="url"></style>
> ?

Because existing browsers would ignore the src attribute and treat this 
just as a style element with empty content.

If HTML were designed from scratch, it would probably look very 
different from what it is now.  But then it could be displayed in future 
browsers only.

> additional points I would like to suggest are to do with the use of both:
> href="" & src="" when linking content.

Attribute names are part of HTML legacy, and changing them would make 
existing pages stop working.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/


From jukka.k.korpela at kolumbus.fi  Thu May  2 00:59:44 2013
From: jukka.k.korpela at kolumbus.fi (Jukka K. Korpela)
Date: Thu, 02 May 2013 10:59:44 +0300
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
Message-ID: <51821CF0.90109@kolumbus.fi>

2013-05-02 3:38, Micky Hulse wrote:
> Hmm, just read that the <hgroup> has been removed from the spec:
>
> http://html5doctor.com/the-hgroup-element/
>
> "Update 16th April, 2013. hgroup has now been removed from the HTML5
> specification. We are working on an article to help guide authors on
> which markup patterns they should use instead."
>
There is no HTML5 specification. There are just more or less mutable 
working documents confusingly called "specifications" or "standards". In 
particular,

1) the HTML 5.0 CR by the W3C still has the <hgroup> element:
http://www.w3.org/TR/html5/

2) the editor's draft HTML 5.1 Nightly has it removed now, following the 
W3C working group decision:
http://www.w3.org/html/wg/drafts/html/master/

3) the HTML Living HTML by the WHATWG still has it, with no note about 
being removed:
http://www.whatwg.org/specs/web-apps/current-work/multipage/

The natural approach is to mark headings by their structural level. You 
don't then combine e.g. <h2> and <h3> into a single "header group" 
supposed to act as a header block at structural level 2, worrying about 
automatic analyzers getting the structure wrong somehow. Instead, you 
use simply <h2> and style its parts differently if desired. The old and 
robust way would be

<h2>The basic heading<br>
<small>The explanatory or more detailed "sub-heading"</small></h2>

but if you wish to try to use <br> and <small> by their semantics in 
HTM5 / Living HTML (even though that semantics looks incomprehensible to 
mortals), you would presumably use semantically empty markup and do all 
the formatting in CSS:

<h2>The basic heading
<span class=subheading>The explanatory or more detailed 
"sub-heading"</span></h2>

Either of these approaches makes the entire heading text a 2nd level 
heading from the perspective of search engines. This should be OK 
because that's what it is, even though some parts thereof might be seen 
as less important than others.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/


From mickyhulse.lists at gmail.com  Thu May  2 10:22:00 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Thu, 2 May 2013 10:22:00 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <51821CF0.90109@kolumbus.fi>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
Message-ID: <CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>

Hi Jukka! Thanks for the reply, I really appreciate the help. :)

On Thu, May 2, 2013 at 12:59 AM, Jukka K. Korpela
<jukka.k.korpela at kolumbus.fi> wrote:
> There is no HTML5 specification. There are just more or less mutable working
> documents confusingly called "specifications" or "standards". In particular,
> 1) the HTML 5.0 CR by the W3C still has the <hgroup> element:
> http://www.w3.org/TR/html5/
> 2) the editor's draft HTML 5.1 Nightly has it removed now, following the W3C
> working group decision:
> http://www.w3.org/html/wg/drafts/html/master/
> 3) the HTML Living HTML by the WHATWG still has it, with no note about being
> removed:
> http://www.whatwg.org/specs/web-apps/current-work/multipage/

Interesting! It would be nice if HTMLDoctor website had mentioned
those things. I know they are not an official source of information,
but they usually are the first to appear in Google searches for HTML5
topics. I suppose I'll wait to see what they write about in the coming
weeks on this topic. :)

> ... <snip> ...
> Either of these approaches makes the entire heading text a 2nd level heading
> from the perspective of search engines. This should be OK because that's
> what it is, even though some parts thereof might be seen as less important
> than others.

Awesome. Thanks for the pro tips, I really appreciate it. :)

<off-topic>

A few years back (2010-ish), I actually used to do something similar
to what you suggest for sub-headings and headings; unfortunately, we
ended up running into issues with Google News.

Long story short, Google News did not like the extraneous markup
within our primary heading tags on story pages; the fix was to make
the headline "clean" by stripping any child HTML from the heading.

Once we "fixed" our primary headings (and tweaked the page title), our
news stories showed back up in Google News.

Interestingly, standard Google searches had no problems with extra
markup inside the heading tags for our stories.

The point is, Google news is much more strict than regular Google and
that's why I have a tendency to use multiple heading levels for main,
sub and tertiary headlines.

</off-topic>

With that said, I'll play around with your suggested solution(s).

Thanks again for your clarification and help! It's much appreciated!

Cheers,
Micky

From ian at hixie.ch  Fri May  3 14:39:03 2013
From: ian at hixie.ch (Ian Hickson)
Date: Fri, 3 May 2013 21:39:03 +0000 (UTC)
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
	<CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
Message-ID: <Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>

On Wed, 1 May 2013, Micky Hulse wrote:
> 
> Using the outliner (ya'll probably know this link by heart):
> 
> <http://gsnedders.html5.org/outliner/>
>
> Example #1:
> 
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>     <heading>
>         <hgroup>
>             <h1>Primary heading</h1>
>             <h2>Secondary heading</h2>
>             <h3>Tertiary heading</h3>
>         </hgroup>
>     </heading>
> </article>
> 
> ... creates this outline:
> 
> 1. This is a section
>     1. Primary heading

The outliner is unfortunately not showing the secondary and teriatry 
headings, but that's just an issue with in the outliner. The actual 
outline there is:

 1. This is a section
     1. Primary heading - Secondary heading - Tertiary heading

(Note that <heading> is wrong, it's <header> you probably want.)


> Which is better in terms of showing a subheading?

If by "subheading" you mean that it's a section's heading but it has two 
levels, the way many books these days are marked up, then it's <hgroup>. 
If by subheading you mean the heading of a subsection, then you want two 
different <section> elements, basically.


On Wed, 1 May 2013, Micky Hulse wrote:
>
> Hmm, just read that the <hgroup> has been removed from the spec:

It was removed from the W3C spec, but it's still in the HTML standard.


> I guess I'll start the process of removing <hgroup> from my code.

No need, it's still valid.


> So, how does one handle a subheading that is supposed to appear above a 
> main heading? I don't always want my <h1> to be the first in the flow 
> due to importance of the heading, right?

Yeah. The <h1> is the main heading, the other <hx> elements are 
subheadings.


On Wed, 1 May 2013, Micky Hulse wrote:
>
> Not using an <hgroup>:
> 
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>    <heading>
>        <h3>Tertiary heading</h3>
>        <h1>Primary heading</h1>
>        <h2>Secondary heading</h2>
>    </heading>
> </article>

This is equivalent to:

  <body>
    <h1>This is a section</h1>
    <article>
      <h1>Tertiary heading</h1>
    </article>
    <article>
      <h1>Primary heading</h1>
      <section>
        <h2>Secondary heading</h2>
      </section>
    </article>
  </body>

(Note that there are two <article>s.)


> Now, using an <hgroup>:
> 
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>     <heading>
>         <hgroup>
>             <h3>Tertiary heading</h3>
>             <h1>Primary heading</h1>
>             <h2>Secondary heading</h2>
>         </hgroup>
>     </heading>
> </article>

That's probably what you want, right (assuming it's just the heading of 
the <article>). The outline tool just doesn't show the full heading of the 
<hgroup>.


> Clearly, in this case, the <hgroup> proves to be useful as it allows for 
> non-sequential heading orders and it pulls the <h1> as the title for 
> group in the outliner.

Right, that's the idea.


On Thu, 2 May 2013, Jukka K. Korpela wrote:
> 
> The natural approach is to mark headings by their structural level. You 
> don't then combine e.g. <h2> and <h3> into a single "header group" 
> supposed to act as a header block at structural level 2, worrying about 
> automatic analyzers getting the structure wrong somehow. Instead, you 
> use simply <h2> and style its parts differently if desired. The old and 
> robust way would be
> 
> <h2>The basic heading<br>
> <small>The explanatory or more detailed "sub-heading"</small></h2>
>
> [...]
> 
> <h2>The basic heading
> <span class=subheading>The explanatory or more detailed
> "sub-heading"</span></h2>

You could do those, but <hgroup> is intended to make these unnecessary.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'

From mickyhulse.lists at gmail.com  Fri May  3 16:01:01 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Fri, 3 May 2013 16:01:01 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
	<CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
	<Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>
Message-ID: <CALri7MmD9NAcgACdrAS5RhTVvSV1K5_z9g+m5c92Mnm4itdcMQ@mail.gmail.com>

On Fri, May 3, 2013 at 2:39 PM, Ian Hickson <ian at hixie.ch> wrote:
> On Wed, 1 May 2013, Micky Hulse wrote:
>> Example #1:
>> <doctype html>
>> <title>Hello, world!</title>
>> <h1>This is a section</h1>
>> <article>
>>     <heading>
>>         <hgroup>
>>             <h1>Primary heading</h1>
>>             <h2>Secondary heading</h2>
>>             <h3>Tertiary heading</h3>
>>         </hgroup>
>>     </heading>
>> </article>
>  ... The actual outline there is:
>  1. This is a section
>      1. Primary heading - Secondary heading - Tertiary heading

Ah, that's great to know! Thanks for the clarification. :)

> (Note that <heading> is wrong, it's <header> you probably want.)

DOH! Agh! I definitely feel stupid for missing that! I hate to admit
it, but I always get those two terms mixed up when writing that tag.
Anyway, thanks for the correction! :)

>> Which is better in terms of showing a subheading?
> If by "subheading" you mean that it's a section's heading but it has two
> levels, the way many books these days are marked up, then it's <hgroup>.
> If by subheading you mean the heading of a subsection, then you want two
> different <section> elements, basically.

Interesting. Thanks for the clarification. That makes a lot of sense.

My industry is Newspapers, and <hgroup> fits my particular situation.
To clarify, this is for a newspaper article where we have a "Label",
"Headline" and a "Deck" (in that order); where the headline is the
most important, deck is second most important and the label is of
least importance but they are all related to one particular article.

> No need, it's still valid.

That's good to know! Thanks for confirming. :)

>> So, how does one handle a subheading that is supposed to appear above a
>> main heading? I don't always want my <h1> to be the first in the flow
>> due to importance of the heading, right?
> Yeah. The <h1> is the main heading, the other <hx> elements are
> subheadings.

Coooool! Also good to know! Thank you.

>> Not using an <hgroup>:
>> <doctype html>
>> <title>Hello, world!</title>
>> <h1>This is a section</h1>
>> <article>
>>    <heading>
>>        <h3>Tertiary heading</h3>
>>        <h1>Primary heading</h1>
>>        <h2>Secondary heading</h2>
>>    </heading>
>> </article>
> This is equivalent to:
>   <body>
>     <h1>This is a section</h1>
>     <article>
>       <h1>Tertiary heading</h1>
>     </article>
>     <article>
>       <h1>Primary heading</h1>
>       <section>
>         <h2>Secondary heading</h2>
>       </section>
>     </article>
>   </body>

Whoa! Really? I would have never guessed that's how it translates. Amazing.

Just out of curiosity, how did you come up with that translation? I'd
love to know of the tool or technique that could help me translate
HTML5 markup into the example you provide above. :)

> That's probably what you want, right (assuming it's just the heading of
> the <article>). The outline tool just doesn't show the full heading of the
> <hgroup>.

That's definitely what I'd prefer to do.

> On Thu, 2 May 2013, Jukka K. Korpela wrote:
>> <h2>The basic heading<br>
>> <small>The explanatory or more detailed "sub-heading"</small></h2>
>> [...]
>> <h2>The basic heading
>> <span class=subheading>The explanatory or more detailed
>> "sub-heading"</span></h2>
> You could do those, but <hgroup> is intended to make these unnecessary.

Thanks for the help Ian (and Jukka) I really appreciate it! You guys rock! :)

Have a nice day.

Cheers,
Micky

From ian at hixie.ch  Fri May  3 16:23:11 2013
From: ian at hixie.ch (Ian Hickson)
Date: Fri, 3 May 2013 23:23:11 +0000 (UTC)
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7MmD9NAcgACdrAS5RhTVvSV1K5_z9g+m5c92Mnm4itdcMQ@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
	<CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
	<Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>
	<CALri7MmD9NAcgACdrAS5RhTVvSV1K5_z9g+m5c92Mnm4itdcMQ@mail.gmail.com>
Message-ID: <Pine.LNX.4.64.1305032315360.3512@ps20323.dreamhostps.com>

On Fri, 3 May 2013, Micky Hulse wrote (slightly edited):
> >>
> >> <h1>This is a section</h1>
> >> <article>
> >>   <h3>Tertiary heading</h3>
> >>   <h1>Primary heading</h1>
> >>   <h2>Secondary heading</h2>
> >> </article>
> >
> > This is equivalent to:
> >   <body>
> >     <h1>This is a section</h1>
> >     <article>
> >       <h1>Tertiary heading</h1>
> >     </article>
> >     <article>
> >       <h1>Primary heading</h1>
> >       <section>
> >         <h1>Secondary heading</h1>
> >       </section>
> >     </article>
> >   </body>
> 
> Whoa! Really? I would have never guessed that's how it translates. 
> Amazing.
> 
> Just out of curiosity, how did you come up with that translation?

The first heading element (<h1>-<h6> or <hgroup>) of a sectioning content 
element (article, aside, nav, section) or sectioning root element 
(blockquote, body, details, dialog, fieldset, figure, td) is the heading 
for that element. So in the example above, the <h3> is the heading of the 
<article>. Then, if you find another heading with a lower rank (higher 
number), e.g. an <h4> in this case, that starts a subsection. However, if 
you find an element with a higher or equal rank, then that starts a new 
section. The <h1> that follows the <h3> thus can't be a subsection of the 
<h3> (since it's higher rank), so it must be a sibling section. Since the 
sectioning content element here is an <article>, it essentially splits the 
<article> in half. The <h2> after it is lower rank than the <h1>, so it 
forms a subsection under the <h1>.

If you always use <h1>s (outside of <hgroup>s), and only ever have one per 
sectioning content or sectioning root element, you don't have a problem, 
since it's always clear which heading is associated with which section. 
It's only when you bring <h2>-<h6> into the mix, or have multiple 
equally-ranked headings in the same section, that things get hairy.


> I'd love to know of the tool or technique that could help me translate 
> HTML5 markup into the example you provide above. :)

The algorithm is this one:

   http://whatwg.org/html#outline

...but admittedly it can be hard to follow.

HTH,
-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'

From mickyhulse.lists at gmail.com  Fri May  3 16:30:05 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Fri, 3 May 2013 16:30:05 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <Pine.LNX.4.64.1305032315360.3512@ps20323.dreamhostps.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
	<CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
	<Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>
	<CALri7MmD9NAcgACdrAS5RhTVvSV1K5_z9g+m5c92Mnm4itdcMQ@mail.gmail.com>
	<Pine.LNX.4.64.1305032315360.3512@ps20323.dreamhostps.com>
Message-ID: <CALri7M=TV+4Epih1AGOnz0CJ8VtonXeENBb4EL-JJy6cRk=D5w@mail.gmail.com>

Ian,

> The first heading element (<h1>-<h6> or <hgroup>) of a sectioning content
> element (article, aside, nav, section) or sectioning root element
> ...<snip>...
> It's only when you bring <h2>-<h6> into the mix, or have multiple
> equally-ranked headings in the same section, that things get hairy.
> The algorithm is this one:
>    http://whatwg.org/html#outline
> ...but admittedly it can be hard to follow.

AWESOME! That's very helpful!!!!

I'm looking forward to experimenting with this ... It helps me to
understand how to structure my documents better. The outliner is
great, but being able to kinda run through this stuff in my head (or
on paper) will be very useful for future projects.

Thank you so much for the extra info and clarifications. I REALLY
appreciate it. :)

From mike at lunawebs.com  Tue May  7 10:53:24 2013
From: mike at lunawebs.com (Mike Vandenberghe)
Date: Tue, 07 May 2013 11:53:24 -0600
Subject: [html5] meta extensions
Message-ID: <51893F94.3050204@lunawebs.com>

We ran a w3c validator check on our website today, it told us that one 
of the meta tags we were using for pinterest p:domain_verify wasn't 
accepted and to contact the mailing list for the whatwg wiki to request 
it's addition.

Could you guys have it added to the list? 
http://wiki.whatwg.org/wiki/MetaExtensions

Does the w3c validator source this list as the acceptable list of meta tags?

We are using

<meta  name="p:domain_verify"content="xxxxxxxxxxxxxxxxxxxxxxxxx"/>


Thanks ahead for any help/suggestions

-- 
*Mike Vandenberghe*
/www.LunaWebs.com/
Clean, Simple and Easy?
mike at lunawebs.com
-----------------------------------------------------------------
Custom Web Design & Development
SEO/SMM/Online Marketing
Mobile/Iphone/Flash/Video
CRM/E-Commerce/Software Applications
-----------------------------------------------------------------
office 801 755-9966
fax 866-285-5008

This e-mail message may contain proprietary and/or confidential 
information. If you are not the intended recipient(s), or the employee 
or agent responsible for delivery of this message to the intended 
recipient(s), you are hereby notified that any dissemination, 
distribution or copying of this e-mail message is strictly prohibited. 
If you have received this message in error, please immediately notify 
the sender and delete this e-mail message from your computer.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130507/f5fe2f13/attachment.htm>

From mike at w3.org  Tue May  7 11:45:12 2013
From: mike at w3.org (Michael[tm] Smith)
Date: Wed, 8 May 2013 03:45:12 +0900
Subject: [html5] meta extensions
In-Reply-To: <51893F94.3050204@lunawebs.com>
References: <51893F94.3050204@lunawebs.com>
Message-ID: <20130507184512.GD14583@sideshowbarker>

Mike Vandenberghe <mike at lunawebs.com>, 2013-05-07 11:53 -0600:

> We ran a w3c validator check on our website today, it told us that one of
> the meta tags we were using for pinterest p:domain_verify wasn't accepted
> and to contact the mailing list for the whatwg wiki to request it's
> addition.
> 
> Could you guys have it added to the list?
> http://wiki.whatwg.org/wiki/MetaExtensions

That page is a wiki and includes instructions on how to add new meta at name
values to it.

> Does the w3c validator source this list as the acceptable list of meta tags?

No, it uses a static list that we update based on the wiki page.

  --Mike

-- 
Michael[tm] Smith http://people.w3.org/mike

From sigurd.lerstad at gmail.com  Wed May  8 16:02:10 2013
From: sigurd.lerstad at gmail.com (Sigurd Lerstad)
Date: Thu, 9 May 2013 01:02:10 +0200
Subject: [html5] HTML5 canvas suggestions
Message-ID: <518ad97b.0203980a.14fa.073d@mx.google.com>

A few canvas API suggestions:

 

1)

drawTintedImage(image, tintR, tintG, tintB, tintA, ...)

the rest of the arguments would be the same as for drawImage

 

What this method does is the same as drawImage, but it multiplies each color
component with the passed rgba values.

 

A search on google reveals that a lot of people want this feature, but
instead must resort to other slower solutions, like
getImageData/putImageData or drawing three separate images with compositing
of "lighter". I myself also miss this feature.

 

2)

drawColorTransformedImage(image, colorTransform, ..)

 

Basically same as above, but instead passes a complete 4x5 colorTransform
(either an array or some kind of ColorMatrix object ?)

 

--

Sigurd Lerstad

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130509/fbf612f5/attachment.htm>

From cabanier at gmail.com  Wed May  8 20:11:20 2013
From: cabanier at gmail.com (Rik Cabanier)
Date: Wed, 8 May 2013 20:11:20 -0700
Subject: [html5] HTML5 canvas suggestions
In-Reply-To: <518ad97b.0203980a.14fa.073d@mx.google.com>
References: <518ad97b.0203980a.14fa.073d@mx.google.com>
Message-ID: <CAGN7qDC+t5jRkeGob2LSLAQD--cYuRBDgQZx21d_Snhuozn8fg@mail.gmail.com>

On Wed, May 8, 2013 at 4:02 PM, Sigurd Lerstad <sigurd.lerstad at gmail.com>wrote:

> A few canvas API suggestions:****
>
> ** **
>
> 1)****
>
> drawTintedImage(image, tintR, tintG, tintB, tintA, ...)****
>
> the rest of the arguments would be the same as for drawImage****
>
> ** **
>
> What this method does is the same as drawImage, but it multiplies each
> color component with the passed rgba values.
>

I think my proposal for 'maskImage' [1] allows you to do this too.
You'd set an image and tell canvas to use either the alpha or luma values.
You'd then draw a rectangle with the color you want as a tint.


> ****
>
> ** **
>
> A search on google reveals that a lot of people want this feature, but
> instead must resort to other slower solutions, like
> getImageData/putImageData or drawing three separate images with compositing
> of ?lighter?. I myself also miss this feature.****
>
> ** **
>
> 2)****
>
> drawColorTransformedImage(image, colorTransform, ?.)****
>
> ** **
>
> Basically same as above, but instead passes a complete 4x5 colorTransform
> (either an array or some kind of ColorMatrix object ?)
>

I've seen proposals that allows you to set a CSS filter shorthand [2] in
the canvas state. In theory you should be able to put any SVG in there but
that *might* be slower.
So:
    ctx.save();
    ctx.filters = "sepia(50%);
    ctx.drawImage(...);
    ctx.restore();


1:
http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Jan/0263.html
2: http://www.w3.org/TR/filter-effects/#ShorthandEquivalents
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130508/87397ff0/attachment.htm>

From sigurd.lerstad at gmail.com  Thu May  9 07:14:56 2013
From: sigurd.lerstad at gmail.com (Sigurd Lerstad)
Date: Thu, 9 May 2013 16:14:56 +0200
Subject: [html5] HTML5 canvas suggestions
In-Reply-To: <CAGN7qDC+t5jRkeGob2LSLAQD--cYuRBDgQZx21d_Snhuozn8fg@mail.gmail.com>
References: <518ad97b.0203980a.14fa.073d@mx.google.com>
	<CAGN7qDC+t5jRkeGob2LSLAQD--cYuRBDgQZx21d_Snhuozn8fg@mail.gmail.com>
Message-ID: <CAFNCNheoUND7J+9sKxCOTTfL8MiSVCuu5h3RxGJByJRsaHTSpA@mail.gmail.com>

Your mask proposal is fine, but I still believe that the drawTintedImage()
API would be very useful.

The main point of the drawTintedImage was to have a very simple API, that I
think implementors could implement relatively fast, it's simple, and only
adds one method to the API, no fuss, and it provides a bare minimum of
flexibility that a lot of people are asking for (myself included). It's not
as advanced as your mask proposal, but that's the main idea.

Even if one later adds other methods, like your mask proposal, or drawImage
with a colorMatrix, they can all be used to implement drawTintedImage
behind the scenes, if implementors so choose, but the beauty of
drawTintedImage is it's simplicity.

I think it's a good idea to add several methods that provide progressively
more power. Like:
1) drawImage (already exists)
2) drawTintedImage
3) drawColorTransformedImage (can be used to implement drawTintedImage)
4) drawMask...

and I also agree that eventually, one should be able to programatically
apply all SVG filters to canvas.



2013/5/9 Rik Cabanier <cabanier at gmail.com>

>
>
> On Wed, May 8, 2013 at 4:02 PM, Sigurd Lerstad <sigurd.lerstad at gmail.com>wrote:
>
>> A few canvas API suggestions:****
>>
>> ** **
>>
>> 1)****
>>
>> drawTintedImage(image, tintR, tintG, tintB, tintA, ...)****
>>
>> the rest of the arguments would be the same as for drawImage****
>>
>> ** **
>>
>> What this method does is the same as drawImage, but it multiplies each
>> color component with the passed rgba values.
>>
>
> I think my proposal for 'maskImage' [1] allows you to do this too.
> You'd set an image and tell canvas to use either the alpha or luma values.
> You'd then draw a rectangle with the color you want as a tint.
>
>
>> ****
>>
>> ** **
>>
>> A search on google reveals that a lot of people want this feature, but
>> instead must resort to other slower solutions, like
>> getImageData/putImageData or drawing three separate images with compositing
>> of ?lighter?. I myself also miss this feature.****
>>
>> ** **
>>
>> 2)****
>>
>> drawColorTransformedImage(image, colorTransform, ?.)****
>>
>> ** **
>>
>> Basically same as above, but instead passes a complete 4x5 colorTransform
>> (either an array or some kind of ColorMatrix object ?)
>>
>
> I've seen proposals that allows you to set a CSS filter shorthand [2] in
> the canvas state. In theory you should be able to put any SVG in there but
> that *might* be slower.
> So:
>     ctx.save();
>     ctx.filters = "sepia(50%);
>     ctx.drawImage(...);
>     ctx.restore();
>
>
> 1:
> http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Jan/0263.html
>
> 2: http://www.w3.org/TR/filter-effects/#ShorthandEquivalents
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130509/4dfc1f6b/attachment.htm>

From sigurd.lerstad at gmail.com  Thu May  9 07:22:15 2013
From: sigurd.lerstad at gmail.com (Sigurd Lerstad)
Date: Thu, 9 May 2013 16:22:15 +0200
Subject: [html5] Fwd:  HTML5 canvas suggestions
In-Reply-To: <CAFNCNhcDG2O=q=-16CqOEjgS2rTaf6rd5kwjQaqiFrJfNkRahA@mail.gmail.com>
References: <518ad97b.0203980a.14fa.073d@mx.google.com>
	<CAGN7qDC+t5jRkeGob2LSLAQD--cYuRBDgQZx21d_Snhuozn8fg@mail.gmail.com>
	<CAFNCNhcDG2O=q=-16CqOEjgS2rTaf6rd5kwjQaqiFrJfNkRahA@mail.gmail.com>
Message-ID: <CAFNCNhf72eovMj3qavOaTy+V9viU3nu4BPRF9yEaQ8ce7RLRPw@mail.gmail.com>

Rik,

On second thought... I don't see how your mask proposal would accomplish a
drawTintedImage()
drawTintedImage *multiples* each pixel in the image with an rgba value
before putting it on the canvas. Some Examples:

1,1,1,1  (same as drawImage)
1,1,1,0.5 (50% opacity)
1,0,0,1 (only red channel, g and b are black)


--
Sigurd Lerstad



2013/5/9 Rik Cabanier <cabanier at gmail.com>

>
>
> On Wed, May 8, 2013 at 4:02 PM, Sigurd Lerstad <sigurd.lerstad at gmail.com>wrote:
>
>> A few canvas API suggestions:****
>>
>> ** **
>>
>> 1)****
>>
>> drawTintedImage(image, tintR, tintG, tintB, tintA, ...)****
>>
>> the rest of the arguments would be the same as for drawImage****
>>
>> ** **
>>
>> What this method does is the same as drawImage, but it multiplies each
>> color component with the passed rgba values.
>>
>
> I think my proposal for 'maskImage' [1] allows you to do this too.
> You'd set an image and tell canvas to use either the alpha or luma values.
> You'd then draw a rectangle with the color you want as a tint.
>
>
>> ****
>>
>> ** **
>>
>> A search on google reveals that a lot of people want this feature, but
>> instead must resort to other slower solutions, like
>> getImageData/putImageData or drawing three separate images with compositing
>> of ?lighter?. I myself also miss this feature.****
>>
>> ** **
>>
>> 2)****
>>
>> drawColorTransformedImage(image, colorTransform, ?.)****
>>
>> ** **
>>
>> Basically same as above, but instead passes a complete 4x5 colorTransform
>> (either an array or some kind of ColorMatrix object ?)
>>
>
> I've seen proposals that allows you to set a CSS filter shorthand [2] in
> the canvas state. In theory you should be able to put any SVG in there but
> that *might* be slower.
> So:
>     ctx.save();
>     ctx.filters = "sepia(50%);
>     ctx.drawImage(...);
>     ctx.restore();
>
>
> 1:
> http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Jan/0263.html
>
> 2: http://www.w3.org/TR/filter-effects/#ShorthandEquivalents
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130509/7f1776bc/attachment-0001.htm>

From sigurd.lerstad at gmail.com  Sat May 18 02:49:53 2013
From: sigurd.lerstad at gmail.com (Sigurd Lerstad)
Date: Sat, 18 May 2013 11:49:53 +0200
Subject: [html5] HTML5 canvas.toDataURL suggestions
Message-ID: <51974ed4.a915700a.6bc9.1edf@mx.google.com>

I suggest improving / making more flexible the canvas.toDataURL API

 

The API is currently called with a second quality argument for the JPEG and
WebP formats, and no second argument for the PNG format:

 

toDataURL(type, quality);           // JPEG and WebP

toDataURL(type);           // PNG

 

I suggest the following possibilities as well:

 

toDataURL("image/jpeg", {

             quality: 0..1,

             grayscale: true/false,     // since the JPEG format also
supports grayscale images at smaller files sizes

             progressive: true/false

}

 

For the WebP format, as far as I can see, Chrome currently doesn't create an
alpha channel.

Also, the possibility to create lossless WebP would be nice, I'm not sure if
specifying a value of 1 for quality, accomplishes this.

 

toDataURL("image/webp", {

             quality: 0..1,

             alpha: true/false,

             alphaQuality: 0..1 (same as quality if omitted)

             .

}

 

For the PNG format:

 

toDataURL("image/png", {

             interlaced: true/false,

             grayscale: true/false,

             alpha: true/false,

}

 

Some means of creating 8bit color indexed PNG would also be nice.

 

--

Sigurd Lerstad

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130518/d1c8f4f0/attachment.htm>

From mickyhulse.lists at gmail.com  Wed May  1 16:56:09 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Wed, 1 May 2013 16:56:09 -0700
Subject: [html5] <header>, <hgroup> and subheadings
Message-ID: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>

Hello,

Using the outliner (ya'll probably know this link by heart):

<http://gsnedders.html5.org/outliner/>

Example #1:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <hgroup>
            <h1>Primary heading</h1>
            <h2>Secondary heading</h2>
            <h3>Tertiary heading</h3>
        </hgroup>
    </heading>
</article>

... creates this outline:

1. This is a section
    1. Primary heading

Example #2:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <hgroup>
            <h1>Primary heading</h1>
            <h2>Secondary heading</h2>
        </hgroup>
        <h3>Tertiary heading</h3>
    </heading>
</article>

... creates this outline:

1. This is a section
    1. Primary heading
        1. Tertiary heading

Question:

Which is better in terms of showing a subheading?

I like how the outliner, in Example #2, insets the "Tertiary heading"
on a new level. To me, that's how I would expect an outline to show a
subheading of an article.

On the other hand, everything I've read says to group headings
together using <hgroup>.

I know things are open to interpretation, but in your opinions, would
it be wrong for me to leave the <h3> outside of the <hgroup>?

In the real world, I'm using the <h3> for optional subheadlines to my articles.

Thanks!
Micky


From mickyhulse.lists at gmail.com  Wed May  1 17:38:44 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Wed, 1 May 2013 17:38:44 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
Message-ID: <CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>

Hmm, just read that the <hgroup> has been removed from the spec:

http://html5doctor.com/the-hgroup-element/

"Update 16th April, 2013. hgroup has now been removed from the HTML5
specification. We are working on an article to help guide authors on
which markup patterns they should use instead."

Interesting.

I guess I'll start the process of removing <hgroup> from my code.

Actually, I just tested this code (not using <hgroup>):

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <h1>Primary heading</h1>
        <h2>Secondary heading</h2>
        <h3>Tertiary heading</h3>
    </heading>
</article>

... which produces this outline:

1. This is a section
    1. Primary heading
        1. Secondary heading
            1. Tertiary heading

That's not bad! For some reason, I was getting different results
earlier when outlining a bigger site.

Ah, maybe I was getting odd results because I had a structure like this:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <h3>Tertiary heading</h3>
        <h1>Primary heading</h1>
        <h2>Secondary heading</h2>
    </heading>
</article>

... which gives me this outline:

1. This is a section
    1. Tertiary heading
    2. Primary heading
        1. Secondary heading

I never realized that the order mattered. Good to know!

So, how does one handle a subheading that is supposed to appear above
a main heading? I don't always want my <h1> to be the first in the
flow due to importance of the heading, right?

<h3>Least important heading</h3>
<h1>Most important heading</h1>
<h2>Second most important heading</h2>

Using the above, without an <hgroup> throws off the outliner.

Strange.


On Wed, May 1, 2013 at 4:56 PM, Micky Hulse <mickyhulse.lists at gmail.com> wrote:
> Hello,
>
> Using the outliner (ya'll probably know this link by heart):
>
> <http://gsnedders.html5.org/outliner/>
>
> Example #1:
>
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>     <heading>
>         <hgroup>
>             <h1>Primary heading</h1>
>             <h2>Secondary heading</h2>
>             <h3>Tertiary heading</h3>
>         </hgroup>
>     </heading>
> </article>
>
> ... creates this outline:
>
> 1. This is a section
>     1. Primary heading
>
> Example #2:
>
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>     <heading>
>         <hgroup>
>             <h1>Primary heading</h1>
>             <h2>Secondary heading</h2>
>         </hgroup>
>         <h3>Tertiary heading</h3>
>     </heading>
> </article>
>
> ... creates this outline:
>
> 1. This is a section
>     1. Primary heading
>         1. Tertiary heading
>
> Question:
>
> Which is better in terms of showing a subheading?
>
> I like how the outliner, in Example #2, insets the "Tertiary heading"
> on a new level. To me, that's how I would expect an outline to show a
> subheading of an article.
>
> On the other hand, everything I've read says to group headings
> together using <hgroup>.
>
> I know things are open to interpretation, but in your opinions, would
> it be wrong for me to leave the <h3> outside of the <hgroup>?
>
> In the real world, I'm using the <h3> for optional subheadlines to my articles.
>
> Thanks!
> Micky



-- 
http://hulse.me


From mickyhulse.lists at gmail.com  Wed May  1 18:00:26 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Wed, 1 May 2013 18:00:26 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
Message-ID: <CALri7MkxnrD4FymZVJ7XkvdyW15QEtuVUfCd9M7LbXKVD8=Z0A@mail.gmail.com>

Check out this scenario:

Not using an <hgroup>:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
   <heading>
       <h3>Tertiary heading</h3>
       <h1>Primary heading</h1>
       <h2>Secondary heading</h2>
   </heading>
</article>

Outline:

1. This is a section
   1. Tertiary heading
   2. Primary heading
       1. Secondary heading

Now, using an <hgroup>:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <hgroup>
            <h3>Tertiary heading</h3>
            <h1>Primary heading</h1>
            <h2>Secondary heading</h2>
        </hgroup>
    </heading>
</article>

Outline:

1. This is a section
   1. Primary heading

Clearly, in this case, the <hgroup> proves to be useful as it allows
for non-sequential heading orders and it pulls the <h1> as the title
for group in the outliner.

I'd hate to always have to have <h1> come first ... Sometimes one
needs to put a less important heading above the most important heading
(I'd say that's a pretty common pattern that people use for when it
comes to multiple headings).

Anyone following me here? :D


From amy at darbyshire.id.au  Wed May  1 20:43:22 2013
From: amy at darbyshire.id.au (Amy Soyka)
Date: Thu, 2 May 2013 13:43:22 +1000
Subject: [html5]  these simplifications simply must happen...
Message-ID: <CADfr_5Be-_1bPPgOFY28TKn2VHWuP8FjE03cwGUAM=QdreyZQA@mail.gmail.com>

Hi all,

I've posted about this in the past but it seems to have been ignored so I
am airing this on the help mailing list as it is an issue I think needs to
be fixed.

traditionally linking to external stylesheets has always been done with:
<link href="url" rel="stylesheet" type="text/css">
the link tag being used not only for stylesheets but also to link other
media.

however, when embedding css into our documents we use:
<style type="text/css"></style>
or simply the new html5 way:
<style></style>

traditionally linking to javascript had been done with:
<script src="url" type="text/javascript"></script>
which was written so as to execute both external & embedded scripts.
or now in html 5 simply:
<script src="url"></script>

why cant the styles tag follow suite and use:
<style src="url"></style>
?

this would simplify the use of both external & embedded styles.
scripts using <script src=""></script>
styles using <style src=""></style>

additional points I would like to suggest are to do with the use of both:
href="" & src="" when linking content.
href means hyperlink reference & src means source

would it make sense to define some better practice standards around this?
href means hyperlink reference. it is used for linking within/to other
pages.
src means source. it is used to link to media content beyond a page.
shouldn't these be defined more as such?

I hope that everyone appreciates these comments.
Sincerely
Amy Soyka
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130502/d07eaa24/attachment-0002.htm>

From jukka.k.korpela at kolumbus.fi  Wed May  1 21:21:11 2013
From: jukka.k.korpela at kolumbus.fi (Jukka K. Korpela)
Date: Thu, 02 May 2013 07:21:11 +0300
Subject: [html5] these simplifications simply must happen...
In-Reply-To: <CADfr_5Be-_1bPPgOFY28TKn2VHWuP8FjE03cwGUAM=QdreyZQA@mail.gmail.com>
References: <CADfr_5Be-_1bPPgOFY28TKn2VHWuP8FjE03cwGUAM=QdreyZQA@mail.gmail.com>
Message-ID: <5181E9B7.30801@kolumbus.fi>

2013-05-02 6:43, Amy Soyka wrote:
> why cant the styles tag follow suite and use:
> <style src="url"></style>
> ?

Because existing browsers would ignore the src attribute and treat this 
just as a style element with empty content.

If HTML were designed from scratch, it would probably look very 
different from what it is now.  But then it could be displayed in future 
browsers only.

> additional points I would like to suggest are to do with the use of both:
> href="" & src="" when linking content.

Attribute names are part of HTML legacy, and changing them would make 
existing pages stop working.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/



From jukka.k.korpela at kolumbus.fi  Thu May  2 00:59:44 2013
From: jukka.k.korpela at kolumbus.fi (Jukka K. Korpela)
Date: Thu, 02 May 2013 10:59:44 +0300
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
Message-ID: <51821CF0.90109@kolumbus.fi>

2013-05-02 3:38, Micky Hulse wrote:
> Hmm, just read that the <hgroup> has been removed from the spec:
>
> http://html5doctor.com/the-hgroup-element/
>
> "Update 16th April, 2013. hgroup has now been removed from the HTML5
> specification. We are working on an article to help guide authors on
> which markup patterns they should use instead."
>
There is no HTML5 specification. There are just more or less mutable 
working documents confusingly called "specifications" or "standards". In 
particular,

1) the HTML 5.0 CR by the W3C still has the <hgroup> element:
http://www.w3.org/TR/html5/

2) the editor's draft HTML 5.1 Nightly has it removed now, following the 
W3C working group decision:
http://www.w3.org/html/wg/drafts/html/master/

3) the HTML Living HTML by the WHATWG still has it, with no note about 
being removed:
http://www.whatwg.org/specs/web-apps/current-work/multipage/

The natural approach is to mark headings by their structural level. You 
don't then combine e.g. <h2> and <h3> into a single "header group" 
supposed to act as a header block at structural level 2, worrying about 
automatic analyzers getting the structure wrong somehow. Instead, you 
use simply <h2> and style its parts differently if desired. The old and 
robust way would be

<h2>The basic heading<br>
<small>The explanatory or more detailed "sub-heading"</small></h2>

but if you wish to try to use <br> and <small> by their semantics in 
HTM5 / Living HTML (even though that semantics looks incomprehensible to 
mortals), you would presumably use semantically empty markup and do all 
the formatting in CSS:

<h2>The basic heading
<span class=subheading>The explanatory or more detailed 
"sub-heading"</span></h2>

Either of these approaches makes the entire heading text a 2nd level 
heading from the perspective of search engines. This should be OK 
because that's what it is, even though some parts thereof might be seen 
as less important than others.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/



From mickyhulse.lists at gmail.com  Thu May  2 10:22:00 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Thu, 2 May 2013 10:22:00 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <51821CF0.90109@kolumbus.fi>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
Message-ID: <CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>

Hi Jukka! Thanks for the reply, I really appreciate the help. :)

On Thu, May 2, 2013 at 12:59 AM, Jukka K. Korpela
<jukka.k.korpela at kolumbus.fi> wrote:
> There is no HTML5 specification. There are just more or less mutable working
> documents confusingly called "specifications" or "standards". In particular,
> 1) the HTML 5.0 CR by the W3C still has the <hgroup> element:
> http://www.w3.org/TR/html5/
> 2) the editor's draft HTML 5.1 Nightly has it removed now, following the W3C
> working group decision:
> http://www.w3.org/html/wg/drafts/html/master/
> 3) the HTML Living HTML by the WHATWG still has it, with no note about being
> removed:
> http://www.whatwg.org/specs/web-apps/current-work/multipage/

Interesting! It would be nice if HTMLDoctor website had mentioned
those things. I know they are not an official source of information,
but they usually are the first to appear in Google searches for HTML5
topics. I suppose I'll wait to see what they write about in the coming
weeks on this topic. :)

> ... <snip> ...
> Either of these approaches makes the entire heading text a 2nd level heading
> from the perspective of search engines. This should be OK because that's
> what it is, even though some parts thereof might be seen as less important
> than others.

Awesome. Thanks for the pro tips, I really appreciate it. :)

<off-topic>

A few years back (2010-ish), I actually used to do something similar
to what you suggest for sub-headings and headings; unfortunately, we
ended up running into issues with Google News.

Long story short, Google News did not like the extraneous markup
within our primary heading tags on story pages; the fix was to make
the headline "clean" by stripping any child HTML from the heading.

Once we "fixed" our primary headings (and tweaked the page title), our
news stories showed back up in Google News.

Interestingly, standard Google searches had no problems with extra
markup inside the heading tags for our stories.

The point is, Google news is much more strict than regular Google and
that's why I have a tendency to use multiple heading levels for main,
sub and tertiary headlines.

</off-topic>

With that said, I'll play around with your suggested solution(s).

Thanks again for your clarification and help! It's much appreciated!

Cheers,
Micky


From ian at hixie.ch  Fri May  3 14:39:03 2013
From: ian at hixie.ch (Ian Hickson)
Date: Fri, 3 May 2013 21:39:03 +0000 (UTC)
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
	<CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
Message-ID: <Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>

On Wed, 1 May 2013, Micky Hulse wrote:
> 
> Using the outliner (ya'll probably know this link by heart):
> 
> <http://gsnedders.html5.org/outliner/>
>
> Example #1:
> 
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>     <heading>
>         <hgroup>
>             <h1>Primary heading</h1>
>             <h2>Secondary heading</h2>
>             <h3>Tertiary heading</h3>
>         </hgroup>
>     </heading>
> </article>
> 
> ... creates this outline:
> 
> 1. This is a section
>     1. Primary heading

The outliner is unfortunately not showing the secondary and teriatry 
headings, but that's just an issue with in the outliner. The actual 
outline there is:

 1. This is a section
     1. Primary heading - Secondary heading - Tertiary heading

(Note that <heading> is wrong, it's <header> you probably want.)


> Which is better in terms of showing a subheading?

If by "subheading" you mean that it's a section's heading but it has two 
levels, the way many books these days are marked up, then it's <hgroup>. 
If by subheading you mean the heading of a subsection, then you want two 
different <section> elements, basically.


On Wed, 1 May 2013, Micky Hulse wrote:
>
> Hmm, just read that the <hgroup> has been removed from the spec:

It was removed from the W3C spec, but it's still in the HTML standard.


> I guess I'll start the process of removing <hgroup> from my code.

No need, it's still valid.


> So, how does one handle a subheading that is supposed to appear above a 
> main heading? I don't always want my <h1> to be the first in the flow 
> due to importance of the heading, right?

Yeah. The <h1> is the main heading, the other <hx> elements are 
subheadings.


On Wed, 1 May 2013, Micky Hulse wrote:
>
> Not using an <hgroup>:
> 
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>    <heading>
>        <h3>Tertiary heading</h3>
>        <h1>Primary heading</h1>
>        <h2>Secondary heading</h2>
>    </heading>
> </article>

This is equivalent to:

  <body>
    <h1>This is a section</h1>
    <article>
      <h1>Tertiary heading</h1>
    </article>
    <article>
      <h1>Primary heading</h1>
      <section>
        <h2>Secondary heading</h2>
      </section>
    </article>
  </body>

(Note that there are two <article>s.)


> Now, using an <hgroup>:
> 
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>     <heading>
>         <hgroup>
>             <h3>Tertiary heading</h3>
>             <h1>Primary heading</h1>
>             <h2>Secondary heading</h2>
>         </hgroup>
>     </heading>
> </article>

That's probably what you want, right (assuming it's just the heading of 
the <article>). The outline tool just doesn't show the full heading of the 
<hgroup>.


> Clearly, in this case, the <hgroup> proves to be useful as it allows for 
> non-sequential heading orders and it pulls the <h1> as the title for 
> group in the outliner.

Right, that's the idea.


On Thu, 2 May 2013, Jukka K. Korpela wrote:
> 
> The natural approach is to mark headings by their structural level. You 
> don't then combine e.g. <h2> and <h3> into a single "header group" 
> supposed to act as a header block at structural level 2, worrying about 
> automatic analyzers getting the structure wrong somehow. Instead, you 
> use simply <h2> and style its parts differently if desired. The old and 
> robust way would be
> 
> <h2>The basic heading<br>
> <small>The explanatory or more detailed "sub-heading"</small></h2>
>
> [...]
> 
> <h2>The basic heading
> <span class=subheading>The explanatory or more detailed
> "sub-heading"</span></h2>

You could do those, but <hgroup> is intended to make these unnecessary.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'


From mickyhulse.lists at gmail.com  Fri May  3 16:01:01 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Fri, 3 May 2013 16:01:01 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
	<CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
	<Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>
Message-ID: <CALri7MmD9NAcgACdrAS5RhTVvSV1K5_z9g+m5c92Mnm4itdcMQ@mail.gmail.com>

On Fri, May 3, 2013 at 2:39 PM, Ian Hickson <ian at hixie.ch> wrote:
> On Wed, 1 May 2013, Micky Hulse wrote:
>> Example #1:
>> <doctype html>
>> <title>Hello, world!</title>
>> <h1>This is a section</h1>
>> <article>
>>     <heading>
>>         <hgroup>
>>             <h1>Primary heading</h1>
>>             <h2>Secondary heading</h2>
>>             <h3>Tertiary heading</h3>
>>         </hgroup>
>>     </heading>
>> </article>
>  ... The actual outline there is:
>  1. This is a section
>      1. Primary heading - Secondary heading - Tertiary heading

Ah, that's great to know! Thanks for the clarification. :)

> (Note that <heading> is wrong, it's <header> you probably want.)

DOH! Agh! I definitely feel stupid for missing that! I hate to admit
it, but I always get those two terms mixed up when writing that tag.
Anyway, thanks for the correction! :)

>> Which is better in terms of showing a subheading?
> If by "subheading" you mean that it's a section's heading but it has two
> levels, the way many books these days are marked up, then it's <hgroup>.
> If by subheading you mean the heading of a subsection, then you want two
> different <section> elements, basically.

Interesting. Thanks for the clarification. That makes a lot of sense.

My industry is Newspapers, and <hgroup> fits my particular situation.
To clarify, this is for a newspaper article where we have a "Label",
"Headline" and a "Deck" (in that order); where the headline is the
most important, deck is second most important and the label is of
least importance but they are all related to one particular article.

> No need, it's still valid.

That's good to know! Thanks for confirming. :)

>> So, how does one handle a subheading that is supposed to appear above a
>> main heading? I don't always want my <h1> to be the first in the flow
>> due to importance of the heading, right?
> Yeah. The <h1> is the main heading, the other <hx> elements are
> subheadings.

Coooool! Also good to know! Thank you.

>> Not using an <hgroup>:
>> <doctype html>
>> <title>Hello, world!</title>
>> <h1>This is a section</h1>
>> <article>
>>    <heading>
>>        <h3>Tertiary heading</h3>
>>        <h1>Primary heading</h1>
>>        <h2>Secondary heading</h2>
>>    </heading>
>> </article>
> This is equivalent to:
>   <body>
>     <h1>This is a section</h1>
>     <article>
>       <h1>Tertiary heading</h1>
>     </article>
>     <article>
>       <h1>Primary heading</h1>
>       <section>
>         <h2>Secondary heading</h2>
>       </section>
>     </article>
>   </body>

Whoa! Really? I would have never guessed that's how it translates. Amazing.

Just out of curiosity, how did you come up with that translation? I'd
love to know of the tool or technique that could help me translate
HTML5 markup into the example you provide above. :)

> That's probably what you want, right (assuming it's just the heading of
> the <article>). The outline tool just doesn't show the full heading of the
> <hgroup>.

That's definitely what I'd prefer to do.

> On Thu, 2 May 2013, Jukka K. Korpela wrote:
>> <h2>The basic heading<br>
>> <small>The explanatory or more detailed "sub-heading"</small></h2>
>> [...]
>> <h2>The basic heading
>> <span class=subheading>The explanatory or more detailed
>> "sub-heading"</span></h2>
> You could do those, but <hgroup> is intended to make these unnecessary.

Thanks for the help Ian (and Jukka) I really appreciate it! You guys rock! :)

Have a nice day.

Cheers,
Micky


From ian at hixie.ch  Fri May  3 16:23:11 2013
From: ian at hixie.ch (Ian Hickson)
Date: Fri, 3 May 2013 23:23:11 +0000 (UTC)
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7MmD9NAcgACdrAS5RhTVvSV1K5_z9g+m5c92Mnm4itdcMQ@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
	<CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
	<Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>
	<CALri7MmD9NAcgACdrAS5RhTVvSV1K5_z9g+m5c92Mnm4itdcMQ@mail.gmail.com>
Message-ID: <Pine.LNX.4.64.1305032315360.3512@ps20323.dreamhostps.com>

On Fri, 3 May 2013, Micky Hulse wrote (slightly edited):
> >>
> >> <h1>This is a section</h1>
> >> <article>
> >>   <h3>Tertiary heading</h3>
> >>   <h1>Primary heading</h1>
> >>   <h2>Secondary heading</h2>
> >> </article>
> >
> > This is equivalent to:
> >   <body>
> >     <h1>This is a section</h1>
> >     <article>
> >       <h1>Tertiary heading</h1>
> >     </article>
> >     <article>
> >       <h1>Primary heading</h1>
> >       <section>
> >         <h1>Secondary heading</h1>
> >       </section>
> >     </article>
> >   </body>
> 
> Whoa! Really? I would have never guessed that's how it translates. 
> Amazing.
> 
> Just out of curiosity, how did you come up with that translation?

The first heading element (<h1>-<h6> or <hgroup>) of a sectioning content 
element (article, aside, nav, section) or sectioning root element 
(blockquote, body, details, dialog, fieldset, figure, td) is the heading 
for that element. So in the example above, the <h3> is the heading of the 
<article>. Then, if you find another heading with a lower rank (higher 
number), e.g. an <h4> in this case, that starts a subsection. However, if 
you find an element with a higher or equal rank, then that starts a new 
section. The <h1> that follows the <h3> thus can't be a subsection of the 
<h3> (since it's higher rank), so it must be a sibling section. Since the 
sectioning content element here is an <article>, it essentially splits the 
<article> in half. The <h2> after it is lower rank than the <h1>, so it 
forms a subsection under the <h1>.

If you always use <h1>s (outside of <hgroup>s), and only ever have one per 
sectioning content or sectioning root element, you don't have a problem, 
since it's always clear which heading is associated with which section. 
It's only when you bring <h2>-<h6> into the mix, or have multiple 
equally-ranked headings in the same section, that things get hairy.


> I'd love to know of the tool or technique that could help me translate 
> HTML5 markup into the example you provide above. :)

The algorithm is this one:

   http://whatwg.org/html#outline

...but admittedly it can be hard to follow.

HTH,
-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'


From mickyhulse.lists at gmail.com  Fri May  3 16:30:05 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Fri, 3 May 2013 16:30:05 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <Pine.LNX.4.64.1305032315360.3512@ps20323.dreamhostps.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
	<CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
	<Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>
	<CALri7MmD9NAcgACdrAS5RhTVvSV1K5_z9g+m5c92Mnm4itdcMQ@mail.gmail.com>
	<Pine.LNX.4.64.1305032315360.3512@ps20323.dreamhostps.com>
Message-ID: <CALri7M=TV+4Epih1AGOnz0CJ8VtonXeENBb4EL-JJy6cRk=D5w@mail.gmail.com>

Ian,

> The first heading element (<h1>-<h6> or <hgroup>) of a sectioning content
> element (article, aside, nav, section) or sectioning root element
> ...<snip>...
> It's only when you bring <h2>-<h6> into the mix, or have multiple
> equally-ranked headings in the same section, that things get hairy.
> The algorithm is this one:
>    http://whatwg.org/html#outline
> ...but admittedly it can be hard to follow.

AWESOME! That's very helpful!!!!

I'm looking forward to experimenting with this ... It helps me to
understand how to structure my documents better. The outliner is
great, but being able to kinda run through this stuff in my head (or
on paper) will be very useful for future projects.

Thank you so much for the extra info and clarifications. I REALLY
appreciate it. :)


From mike at lunawebs.com  Tue May  7 10:53:24 2013
From: mike at lunawebs.com (Mike Vandenberghe)
Date: Tue, 07 May 2013 11:53:24 -0600
Subject: [html5] meta extensions
Message-ID: <51893F94.3050204@lunawebs.com>

We ran a w3c validator check on our website today, it told us that one 
of the meta tags we were using for pinterest p:domain_verify wasn't 
accepted and to contact the mailing list for the whatwg wiki to request 
it's addition.

Could you guys have it added to the list? 
http://wiki.whatwg.org/wiki/MetaExtensions

Does the w3c validator source this list as the acceptable list of meta tags?

We are using

<meta  name="p:domain_verify"content="xxxxxxxxxxxxxxxxxxxxxxxxx"/>


Thanks ahead for any help/suggestions

-- 
*Mike Vandenberghe*
/www.LunaWebs.com/
Clean, Simple and Easy?
mike at lunawebs.com
-----------------------------------------------------------------
Custom Web Design & Development
SEO/SMM/Online Marketing
Mobile/Iphone/Flash/Video
CRM/E-Commerce/Software Applications
-----------------------------------------------------------------
office 801 755-9966
fax 866-285-5008

This e-mail message may contain proprietary and/or confidential 
information. If you are not the intended recipient(s), or the employee 
or agent responsible for delivery of this message to the intended 
recipient(s), you are hereby notified that any dissemination, 
distribution or copying of this e-mail message is strictly prohibited. 
If you have received this message in error, please immediately notify 
the sender and delete this e-mail message from your computer.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130507/f5fe2f13/attachment-0001.htm>

From mike at w3.org  Tue May  7 11:45:12 2013
From: mike at w3.org (Michael[tm] Smith)
Date: Wed, 8 May 2013 03:45:12 +0900
Subject: [html5] meta extensions
In-Reply-To: <51893F94.3050204@lunawebs.com>
References: <51893F94.3050204@lunawebs.com>
Message-ID: <20130507184512.GD14583@sideshowbarker>

Mike Vandenberghe <mike at lunawebs.com>, 2013-05-07 11:53 -0600:

> We ran a w3c validator check on our website today, it told us that one of
> the meta tags we were using for pinterest p:domain_verify wasn't accepted
> and to contact the mailing list for the whatwg wiki to request it's
> addition.
> 
> Could you guys have it added to the list?
> http://wiki.whatwg.org/wiki/MetaExtensions

That page is a wiki and includes instructions on how to add new meta at name
values to it.

> Does the w3c validator source this list as the acceptable list of meta tags?

No, it uses a static list that we update based on the wiki page.

  --Mike

-- 
Michael[tm] Smith http://people.w3.org/mike


From sigurd.lerstad at gmail.com  Wed May  8 16:02:10 2013
From: sigurd.lerstad at gmail.com (Sigurd Lerstad)
Date: Thu, 9 May 2013 01:02:10 +0200
Subject: [html5] HTML5 canvas suggestions
Message-ID: <518ad97b.0203980a.14fa.073d@mx.google.com>

A few canvas API suggestions:

 

1)

drawTintedImage(image, tintR, tintG, tintB, tintA, ...)

the rest of the arguments would be the same as for drawImage

 

What this method does is the same as drawImage, but it multiplies each color
component with the passed rgba values.

 

A search on google reveals that a lot of people want this feature, but
instead must resort to other slower solutions, like
getImageData/putImageData or drawing three separate images with compositing
of "lighter". I myself also miss this feature.

 

2)

drawColorTransformedImage(image, colorTransform, ..)

 

Basically same as above, but instead passes a complete 4x5 colorTransform
(either an array or some kind of ColorMatrix object ?)

 

--

Sigurd Lerstad

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130509/fbf612f5/attachment-0002.htm>

From cabanier at gmail.com  Wed May  8 20:11:20 2013
From: cabanier at gmail.com (Rik Cabanier)
Date: Wed, 8 May 2013 20:11:20 -0700
Subject: [html5] HTML5 canvas suggestions
In-Reply-To: <518ad97b.0203980a.14fa.073d@mx.google.com>
References: <518ad97b.0203980a.14fa.073d@mx.google.com>
Message-ID: <CAGN7qDC+t5jRkeGob2LSLAQD--cYuRBDgQZx21d_Snhuozn8fg@mail.gmail.com>

On Wed, May 8, 2013 at 4:02 PM, Sigurd Lerstad <sigurd.lerstad at gmail.com>wrote:

> A few canvas API suggestions:****
>
> ** **
>
> 1)****
>
> drawTintedImage(image, tintR, tintG, tintB, tintA, ...)****
>
> the rest of the arguments would be the same as for drawImage****
>
> ** **
>
> What this method does is the same as drawImage, but it multiplies each
> color component with the passed rgba values.
>

I think my proposal for 'maskImage' [1] allows you to do this too.
You'd set an image and tell canvas to use either the alpha or luma values.
You'd then draw a rectangle with the color you want as a tint.


> ****
>
> ** **
>
> A search on google reveals that a lot of people want this feature, but
> instead must resort to other slower solutions, like
> getImageData/putImageData or drawing three separate images with compositing
> of ?lighter?. I myself also miss this feature.****
>
> ** **
>
> 2)****
>
> drawColorTransformedImage(image, colorTransform, ?.)****
>
> ** **
>
> Basically same as above, but instead passes a complete 4x5 colorTransform
> (either an array or some kind of ColorMatrix object ?)
>

I've seen proposals that allows you to set a CSS filter shorthand [2] in
the canvas state. In theory you should be able to put any SVG in there but
that *might* be slower.
So:
    ctx.save();
    ctx.filters = "sepia(50%);
    ctx.drawImage(...);
    ctx.restore();


1:
http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Jan/0263.html
2: http://www.w3.org/TR/filter-effects/#ShorthandEquivalents
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130508/87397ff0/attachment-0002.htm>

From sigurd.lerstad at gmail.com  Thu May  9 07:14:56 2013
From: sigurd.lerstad at gmail.com (Sigurd Lerstad)
Date: Thu, 9 May 2013 16:14:56 +0200
Subject: [html5] HTML5 canvas suggestions
In-Reply-To: <CAGN7qDC+t5jRkeGob2LSLAQD--cYuRBDgQZx21d_Snhuozn8fg@mail.gmail.com>
References: <518ad97b.0203980a.14fa.073d@mx.google.com>
	<CAGN7qDC+t5jRkeGob2LSLAQD--cYuRBDgQZx21d_Snhuozn8fg@mail.gmail.com>
Message-ID: <CAFNCNheoUND7J+9sKxCOTTfL8MiSVCuu5h3RxGJByJRsaHTSpA@mail.gmail.com>

Your mask proposal is fine, but I still believe that the drawTintedImage()
API would be very useful.

The main point of the drawTintedImage was to have a very simple API, that I
think implementors could implement relatively fast, it's simple, and only
adds one method to the API, no fuss, and it provides a bare minimum of
flexibility that a lot of people are asking for (myself included). It's not
as advanced as your mask proposal, but that's the main idea.

Even if one later adds other methods, like your mask proposal, or drawImage
with a colorMatrix, they can all be used to implement drawTintedImage
behind the scenes, if implementors so choose, but the beauty of
drawTintedImage is it's simplicity.

I think it's a good idea to add several methods that provide progressively
more power. Like:
1) drawImage (already exists)
2) drawTintedImage
3) drawColorTransformedImage (can be used to implement drawTintedImage)
4) drawMask...

and I also agree that eventually, one should be able to programatically
apply all SVG filters to canvas.



2013/5/9 Rik Cabanier <cabanier at gmail.com>

>
>
> On Wed, May 8, 2013 at 4:02 PM, Sigurd Lerstad <sigurd.lerstad at gmail.com>wrote:
>
>> A few canvas API suggestions:****
>>
>> ** **
>>
>> 1)****
>>
>> drawTintedImage(image, tintR, tintG, tintB, tintA, ...)****
>>
>> the rest of the arguments would be the same as for drawImage****
>>
>> ** **
>>
>> What this method does is the same as drawImage, but it multiplies each
>> color component with the passed rgba values.
>>
>
> I think my proposal for 'maskImage' [1] allows you to do this too.
> You'd set an image and tell canvas to use either the alpha or luma values.
> You'd then draw a rectangle with the color you want as a tint.
>
>
>> ****
>>
>> ** **
>>
>> A search on google reveals that a lot of people want this feature, but
>> instead must resort to other slower solutions, like
>> getImageData/putImageData or drawing three separate images with compositing
>> of ?lighter?. I myself also miss this feature.****
>>
>> ** **
>>
>> 2)****
>>
>> drawColorTransformedImage(image, colorTransform, ?.)****
>>
>> ** **
>>
>> Basically same as above, but instead passes a complete 4x5 colorTransform
>> (either an array or some kind of ColorMatrix object ?)
>>
>
> I've seen proposals that allows you to set a CSS filter shorthand [2] in
> the canvas state. In theory you should be able to put any SVG in there but
> that *might* be slower.
> So:
>     ctx.save();
>     ctx.filters = "sepia(50%);
>     ctx.drawImage(...);
>     ctx.restore();
>
>
> 1:
> http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Jan/0263.html
>
> 2: http://www.w3.org/TR/filter-effects/#ShorthandEquivalents
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130509/4dfc1f6b/attachment-0002.htm>

From sigurd.lerstad at gmail.com  Thu May  9 07:22:15 2013
From: sigurd.lerstad at gmail.com (Sigurd Lerstad)
Date: Thu, 9 May 2013 16:22:15 +0200
Subject: [html5] Fwd:  HTML5 canvas suggestions
In-Reply-To: <CAFNCNhcDG2O=q=-16CqOEjgS2rTaf6rd5kwjQaqiFrJfNkRahA@mail.gmail.com>
References: <518ad97b.0203980a.14fa.073d@mx.google.com>
	<CAGN7qDC+t5jRkeGob2LSLAQD--cYuRBDgQZx21d_Snhuozn8fg@mail.gmail.com>
	<CAFNCNhcDG2O=q=-16CqOEjgS2rTaf6rd5kwjQaqiFrJfNkRahA@mail.gmail.com>
Message-ID: <CAFNCNhf72eovMj3qavOaTy+V9viU3nu4BPRF9yEaQ8ce7RLRPw@mail.gmail.com>

Rik,

On second thought... I don't see how your mask proposal would accomplish a
drawTintedImage()
drawTintedImage *multiples* each pixel in the image with an rgba value
before putting it on the canvas. Some Examples:

1,1,1,1  (same as drawImage)
1,1,1,0.5 (50% opacity)
1,0,0,1 (only red channel, g and b are black)


--
Sigurd Lerstad



2013/5/9 Rik Cabanier <cabanier at gmail.com>

>
>
> On Wed, May 8, 2013 at 4:02 PM, Sigurd Lerstad <sigurd.lerstad at gmail.com>wrote:
>
>> A few canvas API suggestions:****
>>
>> ** **
>>
>> 1)****
>>
>> drawTintedImage(image, tintR, tintG, tintB, tintA, ...)****
>>
>> the rest of the arguments would be the same as for drawImage****
>>
>> ** **
>>
>> What this method does is the same as drawImage, but it multiplies each
>> color component with the passed rgba values.
>>
>
> I think my proposal for 'maskImage' [1] allows you to do this too.
> You'd set an image and tell canvas to use either the alpha or luma values.
> You'd then draw a rectangle with the color you want as a tint.
>
>
>> ****
>>
>> ** **
>>
>> A search on google reveals that a lot of people want this feature, but
>> instead must resort to other slower solutions, like
>> getImageData/putImageData or drawing three separate images with compositing
>> of ?lighter?. I myself also miss this feature.****
>>
>> ** **
>>
>> 2)****
>>
>> drawColorTransformedImage(image, colorTransform, ?.)****
>>
>> ** **
>>
>> Basically same as above, but instead passes a complete 4x5 colorTransform
>> (either an array or some kind of ColorMatrix object ?)
>>
>
> I've seen proposals that allows you to set a CSS filter shorthand [2] in
> the canvas state. In theory you should be able to put any SVG in there but
> that *might* be slower.
> So:
>     ctx.save();
>     ctx.filters = "sepia(50%);
>     ctx.drawImage(...);
>     ctx.restore();
>
>
> 1:
> http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Jan/0263.html
>
> 2: http://www.w3.org/TR/filter-effects/#ShorthandEquivalents
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130509/7f1776bc/attachment-0002.htm>

From sigurd.lerstad at gmail.com  Sat May 18 02:49:53 2013
From: sigurd.lerstad at gmail.com (Sigurd Lerstad)
Date: Sat, 18 May 2013 11:49:53 +0200
Subject: [html5] HTML5 canvas.toDataURL suggestions
Message-ID: <51974ed4.a915700a.6bc9.1edf@mx.google.com>

I suggest improving / making more flexible the canvas.toDataURL API

 

The API is currently called with a second quality argument for the JPEG and
WebP formats, and no second argument for the PNG format:

 

toDataURL(type, quality);           // JPEG and WebP

toDataURL(type);           // PNG

 

I suggest the following possibilities as well:

 

toDataURL("image/jpeg", {

             quality: 0..1,

             grayscale: true/false,     // since the JPEG format also
supports grayscale images at smaller files sizes

             progressive: true/false

}

 

For the WebP format, as far as I can see, Chrome currently doesn't create an
alpha channel.

Also, the possibility to create lossless WebP would be nice, I'm not sure if
specifying a value of 1 for quality, accomplishes this.

 

toDataURL("image/webp", {

             quality: 0..1,

             alpha: true/false,

             alphaQuality: 0..1 (same as quality if omitted)

             .

}

 

For the PNG format:

 

toDataURL("image/png", {

             interlaced: true/false,

             grayscale: true/false,

             alpha: true/false,

}

 

Some means of creating 8bit color indexed PNG would also be nice.

 

--

Sigurd Lerstad

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130518/d1c8f4f0/attachment-0001.htm>

From mickyhulse.lists at gmail.com  Wed May  1 16:56:09 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Wed, 1 May 2013 16:56:09 -0700
Subject: [html5] <header>, <hgroup> and subheadings
Message-ID: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>

Hello,

Using the outliner (ya'll probably know this link by heart):

<http://gsnedders.html5.org/outliner/>

Example #1:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <hgroup>
            <h1>Primary heading</h1>
            <h2>Secondary heading</h2>
            <h3>Tertiary heading</h3>
        </hgroup>
    </heading>
</article>

... creates this outline:

1. This is a section
    1. Primary heading

Example #2:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <hgroup>
            <h1>Primary heading</h1>
            <h2>Secondary heading</h2>
        </hgroup>
        <h3>Tertiary heading</h3>
    </heading>
</article>

... creates this outline:

1. This is a section
    1. Primary heading
        1. Tertiary heading

Question:

Which is better in terms of showing a subheading?

I like how the outliner, in Example #2, insets the "Tertiary heading"
on a new level. To me, that's how I would expect an outline to show a
subheading of an article.

On the other hand, everything I've read says to group headings
together using <hgroup>.

I know things are open to interpretation, but in your opinions, would
it be wrong for me to leave the <h3> outside of the <hgroup>?

In the real world, I'm using the <h3> for optional subheadlines to my articles.

Thanks!
Micky


From mickyhulse.lists at gmail.com  Wed May  1 17:38:44 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Wed, 1 May 2013 17:38:44 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
Message-ID: <CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>

Hmm, just read that the <hgroup> has been removed from the spec:

http://html5doctor.com/the-hgroup-element/

"Update 16th April, 2013. hgroup has now been removed from the HTML5
specification. We are working on an article to help guide authors on
which markup patterns they should use instead."

Interesting.

I guess I'll start the process of removing <hgroup> from my code.

Actually, I just tested this code (not using <hgroup>):

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <h1>Primary heading</h1>
        <h2>Secondary heading</h2>
        <h3>Tertiary heading</h3>
    </heading>
</article>

... which produces this outline:

1. This is a section
    1. Primary heading
        1. Secondary heading
            1. Tertiary heading

That's not bad! For some reason, I was getting different results
earlier when outlining a bigger site.

Ah, maybe I was getting odd results because I had a structure like this:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <h3>Tertiary heading</h3>
        <h1>Primary heading</h1>
        <h2>Secondary heading</h2>
    </heading>
</article>

... which gives me this outline:

1. This is a section
    1. Tertiary heading
    2. Primary heading
        1. Secondary heading

I never realized that the order mattered. Good to know!

So, how does one handle a subheading that is supposed to appear above
a main heading? I don't always want my <h1> to be the first in the
flow due to importance of the heading, right?

<h3>Least important heading</h3>
<h1>Most important heading</h1>
<h2>Second most important heading</h2>

Using the above, without an <hgroup> throws off the outliner.

Strange.


On Wed, May 1, 2013 at 4:56 PM, Micky Hulse <mickyhulse.lists at gmail.com> wrote:
> Hello,
>
> Using the outliner (ya'll probably know this link by heart):
>
> <http://gsnedders.html5.org/outliner/>
>
> Example #1:
>
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>     <heading>
>         <hgroup>
>             <h1>Primary heading</h1>
>             <h2>Secondary heading</h2>
>             <h3>Tertiary heading</h3>
>         </hgroup>
>     </heading>
> </article>
>
> ... creates this outline:
>
> 1. This is a section
>     1. Primary heading
>
> Example #2:
>
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>     <heading>
>         <hgroup>
>             <h1>Primary heading</h1>
>             <h2>Secondary heading</h2>
>         </hgroup>
>         <h3>Tertiary heading</h3>
>     </heading>
> </article>
>
> ... creates this outline:
>
> 1. This is a section
>     1. Primary heading
>         1. Tertiary heading
>
> Question:
>
> Which is better in terms of showing a subheading?
>
> I like how the outliner, in Example #2, insets the "Tertiary heading"
> on a new level. To me, that's how I would expect an outline to show a
> subheading of an article.
>
> On the other hand, everything I've read says to group headings
> together using <hgroup>.
>
> I know things are open to interpretation, but in your opinions, would
> it be wrong for me to leave the <h3> outside of the <hgroup>?
>
> In the real world, I'm using the <h3> for optional subheadlines to my articles.
>
> Thanks!
> Micky



-- 
http://hulse.me


From mickyhulse.lists at gmail.com  Wed May  1 18:00:26 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Wed, 1 May 2013 18:00:26 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
Message-ID: <CALri7MkxnrD4FymZVJ7XkvdyW15QEtuVUfCd9M7LbXKVD8=Z0A@mail.gmail.com>

Check out this scenario:

Not using an <hgroup>:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
   <heading>
       <h3>Tertiary heading</h3>
       <h1>Primary heading</h1>
       <h2>Secondary heading</h2>
   </heading>
</article>

Outline:

1. This is a section
   1. Tertiary heading
   2. Primary heading
       1. Secondary heading

Now, using an <hgroup>:

<doctype html>
<title>Hello, world!</title>
<h1>This is a section</h1>
<article>
    <heading>
        <hgroup>
            <h3>Tertiary heading</h3>
            <h1>Primary heading</h1>
            <h2>Secondary heading</h2>
        </hgroup>
    </heading>
</article>

Outline:

1. This is a section
   1. Primary heading

Clearly, in this case, the <hgroup> proves to be useful as it allows
for non-sequential heading orders and it pulls the <h1> as the title
for group in the outliner.

I'd hate to always have to have <h1> come first ... Sometimes one
needs to put a less important heading above the most important heading
(I'd say that's a pretty common pattern that people use for when it
comes to multiple headings).

Anyone following me here? :D


From amy at darbyshire.id.au  Wed May  1 20:43:22 2013
From: amy at darbyshire.id.au (Amy Soyka)
Date: Thu, 2 May 2013 13:43:22 +1000
Subject: [html5]  these simplifications simply must happen...
Message-ID: <CADfr_5Be-_1bPPgOFY28TKn2VHWuP8FjE03cwGUAM=QdreyZQA@mail.gmail.com>

Hi all,

I've posted about this in the past but it seems to have been ignored so I
am airing this on the help mailing list as it is an issue I think needs to
be fixed.

traditionally linking to external stylesheets has always been done with:
<link href="url" rel="stylesheet" type="text/css">
the link tag being used not only for stylesheets but also to link other
media.

however, when embedding css into our documents we use:
<style type="text/css"></style>
or simply the new html5 way:
<style></style>

traditionally linking to javascript had been done with:
<script src="url" type="text/javascript"></script>
which was written so as to execute both external & embedded scripts.
or now in html 5 simply:
<script src="url"></script>

why cant the styles tag follow suite and use:
<style src="url"></style>
?

this would simplify the use of both external & embedded styles.
scripts using <script src=""></script>
styles using <style src=""></style>

additional points I would like to suggest are to do with the use of both:
href="" & src="" when linking content.
href means hyperlink reference & src means source

would it make sense to define some better practice standards around this?
href means hyperlink reference. it is used for linking within/to other
pages.
src means source. it is used to link to media content beyond a page.
shouldn't these be defined more as such?

I hope that everyone appreciates these comments.
Sincerely
Amy Soyka
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130502/d07eaa24/attachment-0003.htm>

From jukka.k.korpela at kolumbus.fi  Wed May  1 21:21:11 2013
From: jukka.k.korpela at kolumbus.fi (Jukka K. Korpela)
Date: Thu, 02 May 2013 07:21:11 +0300
Subject: [html5] these simplifications simply must happen...
In-Reply-To: <CADfr_5Be-_1bPPgOFY28TKn2VHWuP8FjE03cwGUAM=QdreyZQA@mail.gmail.com>
References: <CADfr_5Be-_1bPPgOFY28TKn2VHWuP8FjE03cwGUAM=QdreyZQA@mail.gmail.com>
Message-ID: <5181E9B7.30801@kolumbus.fi>

2013-05-02 6:43, Amy Soyka wrote:
> why cant the styles tag follow suite and use:
> <style src="url"></style>
> ?

Because existing browsers would ignore the src attribute and treat this 
just as a style element with empty content.

If HTML were designed from scratch, it would probably look very 
different from what it is now.  But then it could be displayed in future 
browsers only.

> additional points I would like to suggest are to do with the use of both:
> href="" & src="" when linking content.

Attribute names are part of HTML legacy, and changing them would make 
existing pages stop working.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/



From jukka.k.korpela at kolumbus.fi  Thu May  2 00:59:44 2013
From: jukka.k.korpela at kolumbus.fi (Jukka K. Korpela)
Date: Thu, 02 May 2013 10:59:44 +0300
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
Message-ID: <51821CF0.90109@kolumbus.fi>

2013-05-02 3:38, Micky Hulse wrote:
> Hmm, just read that the <hgroup> has been removed from the spec:
>
> http://html5doctor.com/the-hgroup-element/
>
> "Update 16th April, 2013. hgroup has now been removed from the HTML5
> specification. We are working on an article to help guide authors on
> which markup patterns they should use instead."
>
There is no HTML5 specification. There are just more or less mutable 
working documents confusingly called "specifications" or "standards". In 
particular,

1) the HTML 5.0 CR by the W3C still has the <hgroup> element:
http://www.w3.org/TR/html5/

2) the editor's draft HTML 5.1 Nightly has it removed now, following the 
W3C working group decision:
http://www.w3.org/html/wg/drafts/html/master/

3) the HTML Living HTML by the WHATWG still has it, with no note about 
being removed:
http://www.whatwg.org/specs/web-apps/current-work/multipage/

The natural approach is to mark headings by their structural level. You 
don't then combine e.g. <h2> and <h3> into a single "header group" 
supposed to act as a header block at structural level 2, worrying about 
automatic analyzers getting the structure wrong somehow. Instead, you 
use simply <h2> and style its parts differently if desired. The old and 
robust way would be

<h2>The basic heading<br>
<small>The explanatory or more detailed "sub-heading"</small></h2>

but if you wish to try to use <br> and <small> by their semantics in 
HTM5 / Living HTML (even though that semantics looks incomprehensible to 
mortals), you would presumably use semantically empty markup and do all 
the formatting in CSS:

<h2>The basic heading
<span class=subheading>The explanatory or more detailed 
"sub-heading"</span></h2>

Either of these approaches makes the entire heading text a 2nd level 
heading from the perspective of search engines. This should be OK 
because that's what it is, even though some parts thereof might be seen 
as less important than others.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/



From mickyhulse.lists at gmail.com  Thu May  2 10:22:00 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Thu, 2 May 2013 10:22:00 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <51821CF0.90109@kolumbus.fi>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
Message-ID: <CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>

Hi Jukka! Thanks for the reply, I really appreciate the help. :)

On Thu, May 2, 2013 at 12:59 AM, Jukka K. Korpela
<jukka.k.korpela at kolumbus.fi> wrote:
> There is no HTML5 specification. There are just more or less mutable working
> documents confusingly called "specifications" or "standards". In particular,
> 1) the HTML 5.0 CR by the W3C still has the <hgroup> element:
> http://www.w3.org/TR/html5/
> 2) the editor's draft HTML 5.1 Nightly has it removed now, following the W3C
> working group decision:
> http://www.w3.org/html/wg/drafts/html/master/
> 3) the HTML Living HTML by the WHATWG still has it, with no note about being
> removed:
> http://www.whatwg.org/specs/web-apps/current-work/multipage/

Interesting! It would be nice if HTMLDoctor website had mentioned
those things. I know they are not an official source of information,
but they usually are the first to appear in Google searches for HTML5
topics. I suppose I'll wait to see what they write about in the coming
weeks on this topic. :)

> ... <snip> ...
> Either of these approaches makes the entire heading text a 2nd level heading
> from the perspective of search engines. This should be OK because that's
> what it is, even though some parts thereof might be seen as less important
> than others.

Awesome. Thanks for the pro tips, I really appreciate it. :)

<off-topic>

A few years back (2010-ish), I actually used to do something similar
to what you suggest for sub-headings and headings; unfortunately, we
ended up running into issues with Google News.

Long story short, Google News did not like the extraneous markup
within our primary heading tags on story pages; the fix was to make
the headline "clean" by stripping any child HTML from the heading.

Once we "fixed" our primary headings (and tweaked the page title), our
news stories showed back up in Google News.

Interestingly, standard Google searches had no problems with extra
markup inside the heading tags for our stories.

The point is, Google news is much more strict than regular Google and
that's why I have a tendency to use multiple heading levels for main,
sub and tertiary headlines.

</off-topic>

With that said, I'll play around with your suggested solution(s).

Thanks again for your clarification and help! It's much appreciated!

Cheers,
Micky


From ian at hixie.ch  Fri May  3 14:39:03 2013
From: ian at hixie.ch (Ian Hickson)
Date: Fri, 3 May 2013 21:39:03 +0000 (UTC)
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
	<CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
Message-ID: <Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>

On Wed, 1 May 2013, Micky Hulse wrote:
> 
> Using the outliner (ya'll probably know this link by heart):
> 
> <http://gsnedders.html5.org/outliner/>
>
> Example #1:
> 
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>     <heading>
>         <hgroup>
>             <h1>Primary heading</h1>
>             <h2>Secondary heading</h2>
>             <h3>Tertiary heading</h3>
>         </hgroup>
>     </heading>
> </article>
> 
> ... creates this outline:
> 
> 1. This is a section
>     1. Primary heading

The outliner is unfortunately not showing the secondary and teriatry 
headings, but that's just an issue with in the outliner. The actual 
outline there is:

 1. This is a section
     1. Primary heading - Secondary heading - Tertiary heading

(Note that <heading> is wrong, it's <header> you probably want.)


> Which is better in terms of showing a subheading?

If by "subheading" you mean that it's a section's heading but it has two 
levels, the way many books these days are marked up, then it's <hgroup>. 
If by subheading you mean the heading of a subsection, then you want two 
different <section> elements, basically.


On Wed, 1 May 2013, Micky Hulse wrote:
>
> Hmm, just read that the <hgroup> has been removed from the spec:

It was removed from the W3C spec, but it's still in the HTML standard.


> I guess I'll start the process of removing <hgroup> from my code.

No need, it's still valid.


> So, how does one handle a subheading that is supposed to appear above a 
> main heading? I don't always want my <h1> to be the first in the flow 
> due to importance of the heading, right?

Yeah. The <h1> is the main heading, the other <hx> elements are 
subheadings.


On Wed, 1 May 2013, Micky Hulse wrote:
>
> Not using an <hgroup>:
> 
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>    <heading>
>        <h3>Tertiary heading</h3>
>        <h1>Primary heading</h1>
>        <h2>Secondary heading</h2>
>    </heading>
> </article>

This is equivalent to:

  <body>
    <h1>This is a section</h1>
    <article>
      <h1>Tertiary heading</h1>
    </article>
    <article>
      <h1>Primary heading</h1>
      <section>
        <h2>Secondary heading</h2>
      </section>
    </article>
  </body>

(Note that there are two <article>s.)


> Now, using an <hgroup>:
> 
> <doctype html>
> <title>Hello, world!</title>
> <h1>This is a section</h1>
> <article>
>     <heading>
>         <hgroup>
>             <h3>Tertiary heading</h3>
>             <h1>Primary heading</h1>
>             <h2>Secondary heading</h2>
>         </hgroup>
>     </heading>
> </article>

That's probably what you want, right (assuming it's just the heading of 
the <article>). The outline tool just doesn't show the full heading of the 
<hgroup>.


> Clearly, in this case, the <hgroup> proves to be useful as it allows for 
> non-sequential heading orders and it pulls the <h1> as the title for 
> group in the outliner.

Right, that's the idea.


On Thu, 2 May 2013, Jukka K. Korpela wrote:
> 
> The natural approach is to mark headings by their structural level. You 
> don't then combine e.g. <h2> and <h3> into a single "header group" 
> supposed to act as a header block at structural level 2, worrying about 
> automatic analyzers getting the structure wrong somehow. Instead, you 
> use simply <h2> and style its parts differently if desired. The old and 
> robust way would be
> 
> <h2>The basic heading<br>
> <small>The explanatory or more detailed "sub-heading"</small></h2>
>
> [...]
> 
> <h2>The basic heading
> <span class=subheading>The explanatory or more detailed
> "sub-heading"</span></h2>

You could do those, but <hgroup> is intended to make these unnecessary.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'


From mickyhulse.lists at gmail.com  Fri May  3 16:01:01 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Fri, 3 May 2013 16:01:01 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
	<CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
	<Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>
Message-ID: <CALri7MmD9NAcgACdrAS5RhTVvSV1K5_z9g+m5c92Mnm4itdcMQ@mail.gmail.com>

On Fri, May 3, 2013 at 2:39 PM, Ian Hickson <ian at hixie.ch> wrote:
> On Wed, 1 May 2013, Micky Hulse wrote:
>> Example #1:
>> <doctype html>
>> <title>Hello, world!</title>
>> <h1>This is a section</h1>
>> <article>
>>     <heading>
>>         <hgroup>
>>             <h1>Primary heading</h1>
>>             <h2>Secondary heading</h2>
>>             <h3>Tertiary heading</h3>
>>         </hgroup>
>>     </heading>
>> </article>
>  ... The actual outline there is:
>  1. This is a section
>      1. Primary heading - Secondary heading - Tertiary heading

Ah, that's great to know! Thanks for the clarification. :)

> (Note that <heading> is wrong, it's <header> you probably want.)

DOH! Agh! I definitely feel stupid for missing that! I hate to admit
it, but I always get those two terms mixed up when writing that tag.
Anyway, thanks for the correction! :)

>> Which is better in terms of showing a subheading?
> If by "subheading" you mean that it's a section's heading but it has two
> levels, the way many books these days are marked up, then it's <hgroup>.
> If by subheading you mean the heading of a subsection, then you want two
> different <section> elements, basically.

Interesting. Thanks for the clarification. That makes a lot of sense.

My industry is Newspapers, and <hgroup> fits my particular situation.
To clarify, this is for a newspaper article where we have a "Label",
"Headline" and a "Deck" (in that order); where the headline is the
most important, deck is second most important and the label is of
least importance but they are all related to one particular article.

> No need, it's still valid.

That's good to know! Thanks for confirming. :)

>> So, how does one handle a subheading that is supposed to appear above a
>> main heading? I don't always want my <h1> to be the first in the flow
>> due to importance of the heading, right?
> Yeah. The <h1> is the main heading, the other <hx> elements are
> subheadings.

Coooool! Also good to know! Thank you.

>> Not using an <hgroup>:
>> <doctype html>
>> <title>Hello, world!</title>
>> <h1>This is a section</h1>
>> <article>
>>    <heading>
>>        <h3>Tertiary heading</h3>
>>        <h1>Primary heading</h1>
>>        <h2>Secondary heading</h2>
>>    </heading>
>> </article>
> This is equivalent to:
>   <body>
>     <h1>This is a section</h1>
>     <article>
>       <h1>Tertiary heading</h1>
>     </article>
>     <article>
>       <h1>Primary heading</h1>
>       <section>
>         <h2>Secondary heading</h2>
>       </section>
>     </article>
>   </body>

Whoa! Really? I would have never guessed that's how it translates. Amazing.

Just out of curiosity, how did you come up with that translation? I'd
love to know of the tool or technique that could help me translate
HTML5 markup into the example you provide above. :)

> That's probably what you want, right (assuming it's just the heading of
> the <article>). The outline tool just doesn't show the full heading of the
> <hgroup>.

That's definitely what I'd prefer to do.

> On Thu, 2 May 2013, Jukka K. Korpela wrote:
>> <h2>The basic heading<br>
>> <small>The explanatory or more detailed "sub-heading"</small></h2>
>> [...]
>> <h2>The basic heading
>> <span class=subheading>The explanatory or more detailed
>> "sub-heading"</span></h2>
> You could do those, but <hgroup> is intended to make these unnecessary.

Thanks for the help Ian (and Jukka) I really appreciate it! You guys rock! :)

Have a nice day.

Cheers,
Micky


From ian at hixie.ch  Fri May  3 16:23:11 2013
From: ian at hixie.ch (Ian Hickson)
Date: Fri, 3 May 2013 23:23:11 +0000 (UTC)
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <CALri7MmD9NAcgACdrAS5RhTVvSV1K5_z9g+m5c92Mnm4itdcMQ@mail.gmail.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
	<CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
	<Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>
	<CALri7MmD9NAcgACdrAS5RhTVvSV1K5_z9g+m5c92Mnm4itdcMQ@mail.gmail.com>
Message-ID: <Pine.LNX.4.64.1305032315360.3512@ps20323.dreamhostps.com>

On Fri, 3 May 2013, Micky Hulse wrote (slightly edited):
> >>
> >> <h1>This is a section</h1>
> >> <article>
> >>   <h3>Tertiary heading</h3>
> >>   <h1>Primary heading</h1>
> >>   <h2>Secondary heading</h2>
> >> </article>
> >
> > This is equivalent to:
> >   <body>
> >     <h1>This is a section</h1>
> >     <article>
> >       <h1>Tertiary heading</h1>
> >     </article>
> >     <article>
> >       <h1>Primary heading</h1>
> >       <section>
> >         <h1>Secondary heading</h1>
> >       </section>
> >     </article>
> >   </body>
> 
> Whoa! Really? I would have never guessed that's how it translates. 
> Amazing.
> 
> Just out of curiosity, how did you come up with that translation?

The first heading element (<h1>-<h6> or <hgroup>) of a sectioning content 
element (article, aside, nav, section) or sectioning root element 
(blockquote, body, details, dialog, fieldset, figure, td) is the heading 
for that element. So in the example above, the <h3> is the heading of the 
<article>. Then, if you find another heading with a lower rank (higher 
number), e.g. an <h4> in this case, that starts a subsection. However, if 
you find an element with a higher or equal rank, then that starts a new 
section. The <h1> that follows the <h3> thus can't be a subsection of the 
<h3> (since it's higher rank), so it must be a sibling section. Since the 
sectioning content element here is an <article>, it essentially splits the 
<article> in half. The <h2> after it is lower rank than the <h1>, so it 
forms a subsection under the <h1>.

If you always use <h1>s (outside of <hgroup>s), and only ever have one per 
sectioning content or sectioning root element, you don't have a problem, 
since it's always clear which heading is associated with which section. 
It's only when you bring <h2>-<h6> into the mix, or have multiple 
equally-ranked headings in the same section, that things get hairy.


> I'd love to know of the tool or technique that could help me translate 
> HTML5 markup into the example you provide above. :)

The algorithm is this one:

   http://whatwg.org/html#outline

...but admittedly it can be hard to follow.

HTH,
-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'


From mickyhulse.lists at gmail.com  Fri May  3 16:30:05 2013
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Fri, 3 May 2013 16:30:05 -0700
Subject: [html5] <header>, <hgroup> and subheadings
In-Reply-To: <Pine.LNX.4.64.1305032315360.3512@ps20323.dreamhostps.com>
References: <CALri7M=W4ib8b5qC7McmBKMxF3c5e3YqTakNjqTJGM-gdv9-Sg@mail.gmail.com>
	<CALri7Mkdq23HV89MjzEkGe2QhOevB=X62AA-t82VO-xqspMttA@mail.gmail.com>
	<51821CF0.90109@kolumbus.fi>
	<CALri7MndwWp4GQTthMJNy1MVrauXGvFYQ+5_pYF-+0Uxasz+OA@mail.gmail.com>
	<Pine.LNX.4.64.1305032123140.3512@ps20323.dreamhostps.com>
	<CALri7MmD9NAcgACdrAS5RhTVvSV1K5_z9g+m5c92Mnm4itdcMQ@mail.gmail.com>
	<Pine.LNX.4.64.1305032315360.3512@ps20323.dreamhostps.com>
Message-ID: <CALri7M=TV+4Epih1AGOnz0CJ8VtonXeENBb4EL-JJy6cRk=D5w@mail.gmail.com>

Ian,

> The first heading element (<h1>-<h6> or <hgroup>) of a sectioning content
> element (article, aside, nav, section) or sectioning root element
> ...<snip>...
> It's only when you bring <h2>-<h6> into the mix, or have multiple
> equally-ranked headings in the same section, that things get hairy.
> The algorithm is this one:
>    http://whatwg.org/html#outline
> ...but admittedly it can be hard to follow.

AWESOME! That's very helpful!!!!

I'm looking forward to experimenting with this ... It helps me to
understand how to structure my documents better. The outliner is
great, but being able to kinda run through this stuff in my head (or
on paper) will be very useful for future projects.

Thank you so much for the extra info and clarifications. I REALLY
appreciate it. :)


From mike at lunawebs.com  Tue May  7 10:53:24 2013
From: mike at lunawebs.com (Mike Vandenberghe)
Date: Tue, 07 May 2013 11:53:24 -0600
Subject: [html5] meta extensions
Message-ID: <51893F94.3050204@lunawebs.com>

We ran a w3c validator check on our website today, it told us that one 
of the meta tags we were using for pinterest p:domain_verify wasn't 
accepted and to contact the mailing list for the whatwg wiki to request 
it's addition.

Could you guys have it added to the list? 
http://wiki.whatwg.org/wiki/MetaExtensions

Does the w3c validator source this list as the acceptable list of meta tags?

We are using

<meta  name="p:domain_verify"content="xxxxxxxxxxxxxxxxxxxxxxxxx"/>


Thanks ahead for any help/suggestions

-- 
*Mike Vandenberghe*
/www.LunaWebs.com/
Clean, Simple and Easy?
mike at lunawebs.com
-----------------------------------------------------------------
Custom Web Design & Development
SEO/SMM/Online Marketing
Mobile/Iphone/Flash/Video
CRM/E-Commerce/Software Applications
-----------------------------------------------------------------
office 801 755-9966
fax 866-285-5008

This e-mail message may contain proprietary and/or confidential 
information. If you are not the intended recipient(s), or the employee 
or agent responsible for delivery of this message to the intended 
recipient(s), you are hereby notified that any dissemination, 
distribution or copying of this e-mail message is strictly prohibited. 
If you have received this message in error, please immediately notify 
the sender and delete this e-mail message from your computer.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130507/f5fe2f13/attachment-0002.htm>

From mike at w3.org  Tue May  7 11:45:12 2013
From: mike at w3.org (Michael[tm] Smith)
Date: Wed, 8 May 2013 03:45:12 +0900
Subject: [html5] meta extensions
In-Reply-To: <51893F94.3050204@lunawebs.com>
References: <51893F94.3050204@lunawebs.com>
Message-ID: <20130507184512.GD14583@sideshowbarker>

Mike Vandenberghe <mike at lunawebs.com>, 2013-05-07 11:53 -0600:

> We ran a w3c validator check on our website today, it told us that one of
> the meta tags we were using for pinterest p:domain_verify wasn't accepted
> and to contact the mailing list for the whatwg wiki to request it's
> addition.
> 
> Could you guys have it added to the list?
> http://wiki.whatwg.org/wiki/MetaExtensions

That page is a wiki and includes instructions on how to add new meta at name
values to it.

> Does the w3c validator source this list as the acceptable list of meta tags?

No, it uses a static list that we update based on the wiki page.

  --Mike

-- 
Michael[tm] Smith http://people.w3.org/mike


From sigurd.lerstad at gmail.com  Wed May  8 16:02:10 2013
From: sigurd.lerstad at gmail.com (Sigurd Lerstad)
Date: Thu, 9 May 2013 01:02:10 +0200
Subject: [html5] HTML5 canvas suggestions
Message-ID: <518ad97b.0203980a.14fa.073d@mx.google.com>

A few canvas API suggestions:

 

1)

drawTintedImage(image, tintR, tintG, tintB, tintA, ...)

the rest of the arguments would be the same as for drawImage

 

What this method does is the same as drawImage, but it multiplies each color
component with the passed rgba values.

 

A search on google reveals that a lot of people want this feature, but
instead must resort to other slower solutions, like
getImageData/putImageData or drawing three separate images with compositing
of "lighter". I myself also miss this feature.

 

2)

drawColorTransformedImage(image, colorTransform, ..)

 

Basically same as above, but instead passes a complete 4x5 colorTransform
(either an array or some kind of ColorMatrix object ?)

 

--

Sigurd Lerstad

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130509/fbf612f5/attachment-0003.htm>

From cabanier at gmail.com  Wed May  8 20:11:20 2013
From: cabanier at gmail.com (Rik Cabanier)
Date: Wed, 8 May 2013 20:11:20 -0700
Subject: [html5] HTML5 canvas suggestions
In-Reply-To: <518ad97b.0203980a.14fa.073d@mx.google.com>
References: <518ad97b.0203980a.14fa.073d@mx.google.com>
Message-ID: <CAGN7qDC+t5jRkeGob2LSLAQD--cYuRBDgQZx21d_Snhuozn8fg@mail.gmail.com>

On Wed, May 8, 2013 at 4:02 PM, Sigurd Lerstad <sigurd.lerstad at gmail.com>wrote:

> A few canvas API suggestions:****
>
> ** **
>
> 1)****
>
> drawTintedImage(image, tintR, tintG, tintB, tintA, ...)****
>
> the rest of the arguments would be the same as for drawImage****
>
> ** **
>
> What this method does is the same as drawImage, but it multiplies each
> color component with the passed rgba values.
>

I think my proposal for 'maskImage' [1] allows you to do this too.
You'd set an image and tell canvas to use either the alpha or luma values.
You'd then draw a rectangle with the color you want as a tint.


> ****
>
> ** **
>
> A search on google reveals that a lot of people want this feature, but
> instead must resort to other slower solutions, like
> getImageData/putImageData or drawing three separate images with compositing
> of ?lighter?. I myself also miss this feature.****
>
> ** **
>
> 2)****
>
> drawColorTransformedImage(image, colorTransform, ?.)****
>
> ** **
>
> Basically same as above, but instead passes a complete 4x5 colorTransform
> (either an array or some kind of ColorMatrix object ?)
>

I've seen proposals that allows you to set a CSS filter shorthand [2] in
the canvas state. In theory you should be able to put any SVG in there but
that *might* be slower.
So:
    ctx.save();
    ctx.filters = "sepia(50%);
    ctx.drawImage(...);
    ctx.restore();


1:
http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Jan/0263.html
2: http://www.w3.org/TR/filter-effects/#ShorthandEquivalents
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130508/87397ff0/attachment-0003.htm>

From sigurd.lerstad at gmail.com  Thu May  9 07:14:56 2013
From: sigurd.lerstad at gmail.com (Sigurd Lerstad)
Date: Thu, 9 May 2013 16:14:56 +0200
Subject: [html5] HTML5 canvas suggestions
In-Reply-To: <CAGN7qDC+t5jRkeGob2LSLAQD--cYuRBDgQZx21d_Snhuozn8fg@mail.gmail.com>
References: <518ad97b.0203980a.14fa.073d@mx.google.com>
	<CAGN7qDC+t5jRkeGob2LSLAQD--cYuRBDgQZx21d_Snhuozn8fg@mail.gmail.com>
Message-ID: <CAFNCNheoUND7J+9sKxCOTTfL8MiSVCuu5h3RxGJByJRsaHTSpA@mail.gmail.com>

Your mask proposal is fine, but I still believe that the drawTintedImage()
API would be very useful.

The main point of the drawTintedImage was to have a very simple API, that I
think implementors could implement relatively fast, it's simple, and only
adds one method to the API, no fuss, and it provides a bare minimum of
flexibility that a lot of people are asking for (myself included). It's not
as advanced as your mask proposal, but that's the main idea.

Even if one later adds other methods, like your mask proposal, or drawImage
with a colorMatrix, they can all be used to implement drawTintedImage
behind the scenes, if implementors so choose, but the beauty of
drawTintedImage is it's simplicity.

I think it's a good idea to add several methods that provide progressively
more power. Like:
1) drawImage (already exists)
2) drawTintedImage
3) drawColorTransformedImage (can be used to implement drawTintedImage)
4) drawMask...

and I also agree that eventually, one should be able to programatically
apply all SVG filters to canvas.



2013/5/9 Rik Cabanier <cabanier at gmail.com>

>
>
> On Wed, May 8, 2013 at 4:02 PM, Sigurd Lerstad <sigurd.lerstad at gmail.com>wrote:
>
>> A few canvas API suggestions:****
>>
>> ** **
>>
>> 1)****
>>
>> drawTintedImage(image, tintR, tintG, tintB, tintA, ...)****
>>
>> the rest of the arguments would be the same as for drawImage****
>>
>> ** **
>>
>> What this method does is the same as drawImage, but it multiplies each
>> color component with the passed rgba values.
>>
>
> I think my proposal for 'maskImage' [1] allows you to do this too.
> You'd set an image and tell canvas to use either the alpha or luma values.
> You'd then draw a rectangle with the color you want as a tint.
>
>
>> ****
>>
>> ** **
>>
>> A search on google reveals that a lot of people want this feature, but
>> instead must resort to other slower solutions, like
>> getImageData/putImageData or drawing three separate images with compositing
>> of ?lighter?. I myself also miss this feature.****
>>
>> ** **
>>
>> 2)****
>>
>> drawColorTransformedImage(image, colorTransform, ?.)****
>>
>> ** **
>>
>> Basically same as above, but instead passes a complete 4x5 colorTransform
>> (either an array or some kind of ColorMatrix object ?)
>>
>
> I've seen proposals that allows you to set a CSS filter shorthand [2] in
> the canvas state. In theory you should be able to put any SVG in there but
> that *might* be slower.
> So:
>     ctx.save();
>     ctx.filters = "sepia(50%);
>     ctx.drawImage(...);
>     ctx.restore();
>
>
> 1:
> http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Jan/0263.html
>
> 2: http://www.w3.org/TR/filter-effects/#ShorthandEquivalents
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130509/4dfc1f6b/attachment-0003.htm>

From sigurd.lerstad at gmail.com  Thu May  9 07:22:15 2013
From: sigurd.lerstad at gmail.com (Sigurd Lerstad)
Date: Thu, 9 May 2013 16:22:15 +0200
Subject: [html5] Fwd:  HTML5 canvas suggestions
In-Reply-To: <CAFNCNhcDG2O=q=-16CqOEjgS2rTaf6rd5kwjQaqiFrJfNkRahA@mail.gmail.com>
References: <518ad97b.0203980a.14fa.073d@mx.google.com>
	<CAGN7qDC+t5jRkeGob2LSLAQD--cYuRBDgQZx21d_Snhuozn8fg@mail.gmail.com>
	<CAFNCNhcDG2O=q=-16CqOEjgS2rTaf6rd5kwjQaqiFrJfNkRahA@mail.gmail.com>
Message-ID: <CAFNCNhf72eovMj3qavOaTy+V9viU3nu4BPRF9yEaQ8ce7RLRPw@mail.gmail.com>

Rik,

On second thought... I don't see how your mask proposal would accomplish a
drawTintedImage()
drawTintedImage *multiples* each pixel in the image with an rgba value
before putting it on the canvas. Some Examples:

1,1,1,1  (same as drawImage)
1,1,1,0.5 (50% opacity)
1,0,0,1 (only red channel, g and b are black)


--
Sigurd Lerstad



2013/5/9 Rik Cabanier <cabanier at gmail.com>

>
>
> On Wed, May 8, 2013 at 4:02 PM, Sigurd Lerstad <sigurd.lerstad at gmail.com>wrote:
>
>> A few canvas API suggestions:****
>>
>> ** **
>>
>> 1)****
>>
>> drawTintedImage(image, tintR, tintG, tintB, tintA, ...)****
>>
>> the rest of the arguments would be the same as for drawImage****
>>
>> ** **
>>
>> What this method does is the same as drawImage, but it multiplies each
>> color component with the passed rgba values.
>>
>
> I think my proposal for 'maskImage' [1] allows you to do this too.
> You'd set an image and tell canvas to use either the alpha or luma values.
> You'd then draw a rectangle with the color you want as a tint.
>
>
>> ****
>>
>> ** **
>>
>> A search on google reveals that a lot of people want this feature, but
>> instead must resort to other slower solutions, like
>> getImageData/putImageData or drawing three separate images with compositing
>> of ?lighter?. I myself also miss this feature.****
>>
>> ** **
>>
>> 2)****
>>
>> drawColorTransformedImage(image, colorTransform, ?.)****
>>
>> ** **
>>
>> Basically same as above, but instead passes a complete 4x5 colorTransform
>> (either an array or some kind of ColorMatrix object ?)
>>
>
> I've seen proposals that allows you to set a CSS filter shorthand [2] in
> the canvas state. In theory you should be able to put any SVG in there but
> that *might* be slower.
> So:
>     ctx.save();
>     ctx.filters = "sepia(50%);
>     ctx.drawImage(...);
>     ctx.restore();
>
>
> 1:
> http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Jan/0263.html
>
> 2: http://www.w3.org/TR/filter-effects/#ShorthandEquivalents
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130509/7f1776bc/attachment-0003.htm>

From sigurd.lerstad at gmail.com  Sat May 18 02:49:53 2013
From: sigurd.lerstad at gmail.com (Sigurd Lerstad)
Date: Sat, 18 May 2013 11:49:53 +0200
Subject: [html5] HTML5 canvas.toDataURL suggestions
Message-ID: <51974ed4.a915700a.6bc9.1edf@mx.google.com>

I suggest improving / making more flexible the canvas.toDataURL API

 

The API is currently called with a second quality argument for the JPEG and
WebP formats, and no second argument for the PNG format:

 

toDataURL(type, quality);           // JPEG and WebP

toDataURL(type);           // PNG

 

I suggest the following possibilities as well:

 

toDataURL("image/jpeg", {

             quality: 0..1,

             grayscale: true/false,     // since the JPEG format also
supports grayscale images at smaller files sizes

             progressive: true/false

}

 

For the WebP format, as far as I can see, Chrome currently doesn't create an
alpha channel.

Also, the possibility to create lossless WebP would be nice, I'm not sure if
specifying a value of 1 for quality, accomplishes this.

 

toDataURL("image/webp", {

             quality: 0..1,

             alpha: true/false,

             alphaQuality: 0..1 (same as quality if omitted)

             .

}

 

For the PNG format:

 

toDataURL("image/png", {

             interlaced: true/false,

             grayscale: true/false,

             alpha: true/false,

}

 

Some means of creating 8bit color indexed PNG would also be nice.

 

--

Sigurd Lerstad

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130518/d1c8f4f0/attachment-0002.htm>