- From: Matt Giuca <notifications@github.com>
- Date: Wed, 11 Jul 2018 00:02:12 -0700
- To: w3c/manifest <manifest@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <w3c/manifest/pull/657/review/136080179@github.com>
mgiuca commented on this pull request.
Hi Kenneth,
I did a pass over. This is good work. However, I also had a long chat with @dominickng and we're still a bit unsure that this is the direction we want to go in. It's starting to feel too hard to capture these "full bleed" requirements of all the currently known systems (Windows 10, Android 8 and iOS) with a single set of rules.
I'll post some more thoughts on the bug #555. Perhaps we should have a VC to sort this out (I am out until Tuesday).
> @@ -1151,6 +1176,167 @@ <h3>
</section>
</section>
</section>
+ <section>
+ <h2>
+ Icons
+ </h2>
+ <p>
+ Icons can be used by the user agent in multiple places, such as on a
+ home-screen, in an app store, or even on top of notifications.
+ </p>
+ <p>
+ For this reason, icons can be declared with different sizes and for
+ different purposes. A user agent can then use these metadata to decide
s/these/this ("data" is a mass noun so never plural).
> @@ -1151,6 +1176,167 @@ <h3>
</section>
</section>
</section>
+ <section>
+ <h2>
+ Icons
+ </h2>
+ <p>
+ Icons can be used by the user agent in multiple places, such as on a
+ home-screen, in an app store, or even on top of notifications.
+ </p>
+ <p>
+ For this reason, icons can be declared with different sizes and for
+ different purposes. A user agent can then use these metadata to decide
+ which icon to use in different situations. For instance, a user agent
+ might prefer showing icons with the <a>badge</a> purpose on top of
+ notifications, as <a>badge</a> indicates an icon that can be placed on
+ top of other content, in size constrained situations.
size-constrained (hyphenate)
> + <p>
+ For this reason, icons can be declared with different sizes and for
+ different purposes. A user agent can then use these metadata to decide
+ which icon to use in different situations. For instance, a user agent
+ might prefer showing icons with the <a>badge</a> purpose on top of
+ notifications, as <a>badge</a> indicates an icon that can be placed on
+ top of other content, in size constrained situations.
+ </p>
+ <section>
+ <h2>
+ Icon masks and safe zone
+ </h2>
+ <p>
+ Some platforms have their own preferred icon shape, but as web
+ applications should work across multiple platforms, it is possible to
+ indicate that an icon may be supercomposed with a mask, by adding the
"supercomposed" isn't a word. Can you rephrase as "have a user-agent-specified mask applied"?
> + For this reason, icons can be declared with different sizes and for
+ different purposes. A user agent can then use these metadata to decide
+ which icon to use in different situations. For instance, a user agent
+ might prefer showing icons with the <a>badge</a> purpose on top of
+ notifications, as <a>badge</a> indicates an icon that can be placed on
+ top of other content, in size constrained situations.
+ </p>
+ <section>
+ <h2>
+ Icon masks and safe zone
+ </h2>
+ <p>
+ Some platforms have their own preferred icon shape, but as web
+ applications should work across multiple platforms, it is possible to
+ indicate that an icon may be supercomposed with a mask, by adding the
+ <a>masking</a> purpose. This allows the platform to ensure that the
Hmm. Let's consider the purpose word to be used in a sentence like "This is used for ____" or "This is used as a ____". So "badge" means "This is used as a badge." If we picked "mask" it would be misinterpreted as "This is used as a mask." Similarly, I think "masking" reads as "This is used for masking," which I think could be interpreted either way (i.e., this is a mask, or this is an image that has a mask applied to it.)
So I was going to agree with you, but on further thought, I think we do need a word like "maskable" (despite it being ugly). "maskable" unambiguously (I think) means "This can have a mask applied to it."
> + <p>
+ Some platforms have their own preferred icon shape, but as web
+ applications should work across multiple platforms, it is possible to
+ indicate that an icon may be supercomposed with a mask, by adding the
+ <a>masking</a> purpose. This allows the platform to ensure that the
+ icon looks well integrated with the platform, and even apply
+ different masks and background colors in different places throughout
+ the platform.
+ </p>
+ <p>
+ Any icon indicating that it can be supercomposed with a mask, much
+ make sure that all important parts are within the <dfn>safe
+ zone</dfn>, which is defined as a circle with center point in the
+ center of the icon and with a radius of 2/5 (40%) of the icon size,
+ which means the smaller of the icon width and height, in case the
+ icon is not retangular.
"rectangular" (misspelled)
> + indicate that an icon may be supercomposed with a mask, by adding the
+ <a>masking</a> purpose. This allows the platform to ensure that the
+ icon looks well integrated with the platform, and even apply
+ different masks and background colors in different places throughout
+ the platform.
+ </p>
+ <p>
+ Any icon indicating that it can be supercomposed with a mask, much
+ make sure that all important parts are within the <dfn>safe
+ zone</dfn>, which is defined as a circle with center point in the
+ center of the icon and with a radius of 2/5 (40%) of the icon size,
+ which means the smaller of the icon width and height, in case the
+ icon is not retangular.
+ </p>
+ <figure>
+ <img src="images/safe-zone.svg" width="340" height="340" alt=
I think this picture should show a non-square icon. Even though a very uncommon case, it is the general case, and makes it obvious why you're doing min(width, height) and not just assuming they're the same.
> + </p>
+ <section>
+ <h2>
+ Icon masks and safe zone
+ </h2>
+ <p>
+ Some platforms have their own preferred icon shape, but as web
+ applications should work across multiple platforms, it is possible to
+ indicate that an icon may be supercomposed with a mask, by adding the
+ <a>masking</a> purpose. This allows the platform to ensure that the
+ icon looks well integrated with the platform, and even apply
+ different masks and background colors in different places throughout
+ the platform.
+ </p>
+ <p>
+ Any icon indicating that it can be supercomposed with a mask, much
You're defining the **safe zone** (a normative concept) in the same sentence as giving non-normative advice to the icon designer. I think this can be more formalized here, so you don't have to keep referring to 2/5, 40%, 4/5 and other various ways of explaining the same thing.
You could say:
"For an icon with the [masking] purpose, having width *w* and height *h*, the **safe zone** is a circular region centered in the center of the icon, with a radius of 0.4 × *w* or *h* (whichever is smaller)." (Or just 0.4 × min(w, h))
Then add a note: "When designing an icon with the [masking] purpose, developers will want to make sure that all important parts are within the [safe zone]."
> + make sure that all important parts are within the <dfn>safe
+ zone</dfn>, which is defined as a circle with center point in the
+ center of the icon and with a radius of 2/5 (40%) of the icon size,
+ which means the smaller of the icon width and height, in case the
+ icon is not retangular.
+ </p>
+ <figure>
+ <img src="images/safe-zone.svg" width="340" height="340" alt=
+ "safe zone illustrated">
+ <figcaption>
+ The safe zone is a centrally positioned circle, with radius 2/5
+ (40%) of the icon size.
+ </figcaption>
+ </figure>
+ <p>
+ All pixels in this zone are guaranteed to be seen in all masks. What
I think this is a non-normative note. Also s/masks/user agents/ (since "mask" is kind of an implementation detail; what we really care about is that all user agents will display these pixels).
> + icon is not retangular.
+ </p>
+ <figure>
+ <img src="images/safe-zone.svg" width="340" height="340" alt=
+ "safe zone illustrated">
+ <figcaption>
+ The safe zone is a centrally positioned circle, with radius 2/5
+ (40%) of the icon size.
+ </figcaption>
+ </figure>
+ <p>
+ All pixels in this zone are guaranteed to be seen in all masks. What
+ is outside may be visible, but are not guaranteed to be so.
+ </p>
+ <p>
+ The user agent MAY apply a mask of any size, making any pixels that
I think "apply a mask" is not very well specified; even though they'll use a mask in practice, maybe best for us to not use this terminology in normative language, and instead just talk about they're allowed to make these pixels transparent. (Also "of any size" is contradicted by the safe zone.)
So how about: "The user agent MAY make any pixels outside of the [safe zone] fully transparent. ... The user agent MUST NOT make any pixel within the [safe zone] fully transparent."
(Note: I say "fully transparent" because we need to think about partial transparency. The mask is likely to have at least a small feather edge of partial transparency, which I think is fine to dip into the safe zone. In general, we can't stop the UA from making all pixels partially transparent because the entire icon might be made partially transparent when dragging or something. So I'd just impose a restriction on full transparency, and not partial transparency.)
> + <p>
+ All pixels in this zone are guaranteed to be seen in all masks. What
+ is outside may be visible, but are not guaranteed to be so.
+ </p>
+ <p>
+ The user agent MAY apply a mask of any size, making any pixels that
+ are more than 2/5ths of the image size (minimum of width and height
+ if non-square) away from the center (the <a>safe zone</a>)
+ transparent.
+ </p>
+ <p>
+ The user agent MUST NOT make any pixel within the safe zone
+ transparent.
+ </p>
+ <p>
+ The user agent MAY superimpose the icon on top of a colored
I'm not sure if this is necessary (it should be fairly implied that the UA can put icons wherever it wants). If you do say it, I would drop the word "colored" since that may imply it can only be a solid color, not arbitrary pixel data.
> + <p>
+ The user agent MAY apply a mask of any size, making any pixels that
+ are more than 2/5ths of the image size (minimum of width and height
+ if non-square) away from the center (the <a>safe zone</a>)
+ transparent.
+ </p>
+ <p>
+ The user agent MUST NOT make any pixel within the safe zone
+ transparent.
+ </p>
+ <p>
+ The user agent MAY superimpose the icon on top of a colored
+ background of any kind and MAY further enlarge the icon by adding
+ additional padding.
+ </p>
+ <section>
class="informative" to make the whole section "This section is non-normative".
Then you should remove the redundant class="note" from the first paragraph.
> + icon is not retangular.
+ </p>
+ <figure>
+ <img src="images/safe-zone.svg" width="340" height="340" alt=
+ "safe zone illustrated">
+ <figcaption>
+ The safe zone is a centrally positioned circle, with radius 2/5
+ (40%) of the icon size.
+ </figcaption>
+ </figure>
+ <p>
+ All pixels in this zone are guaranteed to be seen in all masks. What
+ is outside may be visible, but are not guaranteed to be so.
+ </p>
+ <p>
+ The user agent MAY apply a mask of any size, making any pixels that
OTOH, I saw a rule on the [design article](https://medium.com/google-design/designing-adaptive-icons-515af294c783): which says masks "must be convex in shape". Do we want to also impose that rule on UAs? If so, we do need to get into the details of what a "mask" is, as opposed to just saying they can make certain pixels transparent. (Note: I don't think we want to get into this detail, but something to consider.)
> + Examples of masks
+ </h3>
+ <p class="note">
+ By staying inside the <a>safe zone</a>, most icons will have around
+ 10% padding on the top, bottom, right and left with no content or
+ non-essential content, such as an icon background. For good visual
+ results, it is recommended adding a bit of padding to the inside of
+ the <a>safe zone</a> to make sure the main branding material
+ doesn't go straight to the edges after a mask have been applied.
+ </p>
+ <h2 class="icon-title">
+ Icons with "masking" purpose
+ </h2>
+ <div class="icons">
+ <div>
+ <img src="images/icon-plain.svg">
I think you got these from @clagom on the other thread. Do we have rights to use these or transfer them to W3C copyright.
> + <div>
+ <img src="images/icon-plain.svg">
+ <div class="icon-title">
+ Image
+ </div>
+ <div>
+ The base image with transparent background
+ </div>
+ </div>
+ <div>
+ <img src="images/icon-margins.svg">
+ <div class="icon-title">
+ Margins
+ </div>
+ <div>
+ Margins are 1/5 of the image size
I'm not sure where this "margins" one came from. Is this 1/5 corners a normative requirement anywhere, or just a recommendation for space to avoid putting important things in? Shouldn't we simply recommend avoiding putting important things anywhere outside of the safe zone?
I think delete this.
> @@ -2491,6 +2677,14 @@ <h3>
A user agent can present this icon where space constraints and/or
color requirements differ from those of the application icon.
</dd>
+ <dt>
+ <dfn data-lt="badge masking">masking</dfn>:
+ </dt>
+ <dd>
+ The image is designed with <a>masking</a> in mind, such that any
+ part of the image that is outside the <a>safe zone</a> can safely
+ be ignored and masked away by the user agent.
Needs a "see [Icons]".
> @@ -2491,6 +2677,14 @@ <h3>
A user agent can present this icon where space constraints and/or
color requirements differ from those of the application icon.
</dd>
+ <dt>
+ <dfn data-lt="badge masking">masking</dfn>:
+ </dt>
+ <dd>
+ The image is designed with <a>masking</a> in mind, such that any
Drop the link (which links to this very sentence) or link up to the masking section above.
> + </p>
+ <p>
+ The user agent MAY apply a mask of any size, making any pixels that
+ are more than 2/5ths of the image size (minimum of width and height
+ if non-square) away from the center (the <a>safe zone</a>)
+ transparent.
+ </p>
+ <p>
+ The user agent MUST NOT make any pixel within the safe zone
+ transparent.
+ </p>
+ <p>
+ The user agent MAY superimpose the icon on top of a colored
+ background of any kind and MAY further enlarge the icon by adding
+ additional padding.
+ </p>
I think we should either:
- a) Require that the icons have no alpha channel or transparent pixels (not as a MUST requirement, but specify that it's invalid if it does), or
- b) Specify what happens if they do have transparent pixels. For example, we could say it MUST get pasted onto a white background, or a solid colour of user agent choice.
The idea is that these should be full-bleed images.
--
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/manifest/pull/657#pullrequestreview-136080179
Received on Wednesday, 11 July 2018 07:02:47 UTC