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

Jump to bottom

Resolve improper aliasing for icons on high resolution screens #49311

Closed
richtabor opened this issue Mar 23, 2023 · 1 comment · Fixed by #56532
Closed

Resolve improper aliasing for icons on high resolution screens #49311

richtabor opened this issue Mar 23, 2023 · 1 comment · Fixed by #56532
Assignees
@richtabor
Labels
Needs Design Needs design efforts. [Package] Icons /packages/icons [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@richtabor
Copy link
Member

What problem does this address?

A number of block icons use .25 X and Y values for the block icon SVGs, which results in extraneous aliasing.

What is your proposed solution?

Comb through the block icons to start, adapting them to not use .25 values.

Visual

Within Figma, the Heading icon using .25 values:

CleanShot 2023-03-23 at 11 02 40

At 100% scale, this is the before-and-after comparison of migrating away from the .25 value:

CleanShot 2023-03-23 at 11 02 53

As you can see, the icon appears much sharper in the after version.
@richtabor richtabor added Needs Design Needs design efforts. [Package] Icons /packages/icons labels Mar 23, 2023
@richtabor
Copy link
Member Author

richtabor commented Mar 23, 2023 •
edited
Loading

These would cover the majority of higher-visibility icons:

Block Icons:

  • Paragraph
  • Heading
  • Gallery
  • Stack
  • Row
  • Grid
  • Page Break
  • Title
  • PostContent
  • Media & Text
  • Separator
  • Spacer
  • Table of Contents
  • Archives
  • Post Excerpt
  • Page List
  • Post Content
  • Tag Cloud
  • Tags

UI Icons:

  • List view
  • Plus
  • Crop
  • block-alignment-wide
  • block-alignment-full
  • block-alignment-center
  • block-alignment-none
  • block-alignment-right
  • block-alignment-left
  • text-alignment-left
  • text-alignment-right
  • text-alignment-center
  • Link
  • LinkOff

@richtabor richtabor mentioned this issue Mar 27, 2023
Merged
@richtabor richtabor mentioned this issue Jun 14, 2023
Merged
@richtabor richtabor mentioned this issue Jun 21, 2023
Merged
@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Jul 26, 2023
@richtabor richtabor mentioned this issue Nov 26, 2023
Merged
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Nov 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@richtabor richtabor

Labels
Needs Design Needs design efforts. [Package] Icons /packages/icons [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Another round of HiDPI icon tweaks WordPress/gutenberg
2 participants
@richtabor @jordesign