Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a 'masking' purpose, for allowing the UA to supercompose such icons #657

Merged
merged 3 commits into from
Sep 26, 2018
Merged

Add a 'masking' purpose, for allowing the UA to supercompose such icons #657

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9ead614
Add a 'masking' purpose, for allowing the UA to supercompose such icons
kenchris Feb 23, 2018
11142cb
Anssi's comments
kenchris Sep 4, 2018
aa65918
Fixes after Matt's comments
kenchris Sep 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
358 changes: 358 additions & 0 deletions images/icon-mask-android-circle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
361 changes: 361 additions & 0 deletions images/icon-mask-android-roundsquare.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
365 changes: 365 additions & 0 deletions images/icon-mask-android-squircle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
365 changes: 365 additions & 0 deletions images/icon-mask-ios.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
356 changes: 356 additions & 0 deletions images/icon-mask-windows.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
370 changes: 370 additions & 0 deletions images/icon-plain.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
358 changes: 358 additions & 0 deletions images/icon-safe-zone.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions images/safe-zone.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
173 changes: 173 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,31 @@
caniuse: "web-app-manifest",
};
</script>
<style>
.icon-title {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure this works on mobile, if you haven't already.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did test :-) works fine

text-transform: uppercase;
font-weight: bold;
}

.icons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.icons > div {
text-align: left;
padding: 10px;
width: 188px;
}

.icons > div > img {
width: 188px;
height: 188px;
min-width: 188px;
min-height: 188px;
}
</style>
</head>
<body>
<section id='abstract'>
Expand Down Expand Up @@ -2499,6 +2524,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 maskable">maskable</dfn>:
</dt>
<dd>
The image is designed with <a href="#icon-masks">maskable</a> in mind,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you want to link to the "Icon masks and safe zone" section and not to the maskable definition, it'd be better to expand <a href="#icon-masks">icon masks and safe zone</a>.

(<a>markable</a> should work if you link to its definition.)

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.
</dd>
<dt>
<dfn data-lt="any purpose">any</dfn>:
</dt>
Expand Down Expand Up @@ -2570,6 +2603,143 @@ <h3>
</pre>
</div>
</section>
<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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer to use non-normative language in this para i.e. s/may/can/g and list normative statement in the list below.

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, must
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"supercompose" is not a word. And drop the comma.

It doesn't make sense for the icon to "make sure" of something; the designer needs to make sure.

"must" is a special RFC 2119 word which we shouldn't use here, because this isn't a strict requirement. We could use "SHOULD", but I'm not sure if web specs are supposed to use RFC 2119 language on things we require from developers. (In my mind, we should only impose requirements on user agents, and state how they deal with all sorts of input.)

That makes this a non-normative note. Which means you can't define "safe zone" inside it. So a suggested rewrite:

The <dfn>safe zone</dfn> is the area within a <a>maskable</a> icon which is
guaranteed to always be visible, regardless of user agent preferences. It 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 class="note">
Designers of <a>maskable</a> icons will want to make sure that all important parts
are within the <a>safe zone</a>.
</p>

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done, used your text

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 minimum of the icon's width and height.
</figcaption>
</figure>
<p>
All pixels in this zone are guaranteed to be seen in all masks.
Pixels outside the safe zone are not guaranteed (but may) be visible
depending on the applies mask.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

s/applies/applied.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

</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.
</p>
<p>
The user agent MUST paste any image containing transparent pixels
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

s/paste/composite.

Also it's a bit unclear what "any image" means (it refers to the icon, not just any random image).

So: "If the icon contains transparent pixels, the user agent MUST composite the icon onto a solid ..."

Also, suggest adding a non-normative note: "It is suggested that designers avoid using transparent pixels in maskable icons." (Again, avoiding RFC 2119 word "recommended".)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

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.
It is recommended that developers check their icon when all but the
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

s/recommended/suggested

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

safe zone is masked out.
</p>
<h2 class="icon-title">
Icons with "maskable" purpose
</h2>
<div class="icons">
<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-safe-zone.svg">
<div class="icon-title">
Safe zone
</div>
<div>
Circle with radius 2/5 (40%) of the icon size
</div>
</div>
</div>
<h2 class="icon-title">
Mask examples
</h2>
<div class="icons">
<div>
<img src="images/icon-mask-android-roundsquare.svg">
<div class="icon-title">
Rounded square
</div>
<div>
Android
</div>
</div>
<div>
<img src="images/icon-mask-android-squircle.svg">
<div class="icon-title">
Squircle
</div>
<div>
Android
</div>
</div>
<div>
<img src="images/icon-mask-android-circle.svg">
<div class="icon-title">
Circle
</div>
<div>
Android
</div>
</div>
<div>
<img src="images/icon-mask-ios.svg">
<div class="icon-title">
Rounded square
</div>
<div>
iOS
</div>
</div>
<div>
<img src="images/icon-mask-windows.svg">
<div class="icon-title">
Fullbleed
</div>
<div>
Windows
</div>
</div>
</div>
</section>
</section>
<section data-dfn-for="imageresource">
<h3>
<dfn>sizes</dfn> member
Expand Down Expand Up @@ -3287,6 +3457,9 @@ <h2>
Dave Raggett and Dominique Hazael-Massieux contributed to this
specification via the HTML5Apps project.
</p>
<p>
Claudio Gomboli for icon example images.
</p>
</section>
<section id="conformance" data-status="done" class="appendix">
<p>
Expand Down