- From: Dominick Ng <notifications@github.com>
- Date: Tue, 24 Jul 2018 17:52:45 -0700
- To: w3c/manifest <manifest@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <w3c/manifest/pull/657/review/140127999@github.com>
dominickng commented on this pull request.
> @@ -1151,6 +1176,160 @@ <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.
Nit: use "home screen" (already used in the spec)
> @@ -1151,6 +1176,160 @@ <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.
Nit: perhaps the notifications example isn't needed? The "even" seems a bit much in any case.
> @@ -1151,6 +1176,160 @@ <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
I don't know if this badge example is needed - it's covered in the definition of the "purpose" member.
> @@ -1151,6 +1176,160 @@ <h3>
</section>
</section>
</section>
+ <section>
+ <h2>
+ Icons
Should all of this just go under the "purpose" section?
> + </p>
+ <section>
+ <h2><a id="icon-masks"></a>
+ 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 have a user-agent-specified mask applied, by
+ adding the <a>maskable</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
Nit: "much" -> "must"
> + <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 enlarge the icon by adding additional padding.
Should we guarantee that the additional padding will not be shown?
> + 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 rectangular.
+ </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.
Phrasing nit:
"What is outside ... to be so" -> "Pixels outside the safe zone are not guaranteed (but may) be visible depending on the applied mask."
> + 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 rectangular.
+ </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.
Nit: "icon size" -> "minimum of the icon's width or height"
> + <p>
+ For this reason, icons can be declared with different sizes and for
+ different purposes. A user agent can then use this 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><a id="icon-masks"></a>
+ 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 have a user-agent-specified mask applied, by
Nit: remove comma before "by"
> + </p>
+ <p>
+ The user agent MAY enlarge the icon by adding additional padding.
+ </p>
+ <p>
+ The user agent MUST paste any image containing transparent pixels
+ onto a solid color (eg. white) of the user agent's choice.
+ </p>
+ <section>
+ <h3>
+ 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
Phrasing nit: "For good ..." -> "It is recommended that developers check their icon when all but the safe zone is masked out" ?
--
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-140127999
Received on Wednesday, 25 July 2018 00:53:09 UTC