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.

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

1-pixel separator lines are feathered #4776

Open
valadaptive opened this issue Jul 3, 2024 · 0 comments
Open

1-pixel separator lines are feathered #4776

valadaptive opened this issue Jul 3, 2024 · 0 comments
Labels
bug Something is broken style visuals and theming

Comments

@valadaptive
Copy link
Contributor

valadaptive commented Jul 3, 2024

Describe the bug

Separator lines which are 1 pixel wide, such as those used by default in panels and the Separator widget, are rendered with their centers at a pixel coordinate rather than their edges at a pixel coordinate. This leads to them appearing as 2-pixel translucent lines rather than 1-pixel opaque lines.

This was discussed somewhat in #1322, but I think it's worth revisiting. Right now, 1-pixel lines are very heavily used in egui, and this behavior can lead to some unintuitive and visually unappealing results (for instance, this contributes to #4773; the 1-pixel border of the panel feathers upwards, merging with the vertical separator above). If a 2-pixel transparent border is more aesthetically appealing, it should be explicitly represented as such for layout purposes.

I think this lies more on the "bug" side than the "feature" side because the code that draws these separator lines, for both separators and panels, does call round_to_pixel--it's just that the rounding value is incorrect for lines with odd widths.

To Reproduce

This can be seen in any egui application that uses panels or separators. For instance, all of these 2-pixel medium-grey outlines in the demo app are supposed to be 1-pixel light grey outlines:
image

Expected behavior

Lines which are 1 pixel (as a unit) wide should, at 1 pixel per point, be 1 physical pixel wide. It's not as simple as always rounding up or down-- for e.g. a border around a rectangle, you may want to round "outwards" or "inwards", which rounds differently depending on which side of the rectangle you're on. It may be worth looking into how CSS does this (which ties into #4019).

@valadaptive valadaptive added the bug Something is broken label Jul 3, 2024
@emilk emilk added the style visuals and theming label Jul 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something is broken style visuals and theming
Projects
None yet
Development

No branches or pull requests

2 participants