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

info button sometimes drawn off-center #575

Closed
yourhead opened this Issue May 10, 2016 · 3 comments

Comments

1 participant
@yourhead
Owner

yourhead commented May 10, 2016

the info button on the upper right corner of the stack draws off center when the stack is in a column stack in any column except the rightmost column.

@yourhead yourhead added the bug label May 10, 2016

@yourhead

This comment has been minimized.

Show comment
Hide comment
@yourhead

yourhead May 10, 2016

Owner

this has always been a problem with the close-box too. however several factors contribute to make it less noticeable: it only happens in the rightmost column, the close box is lower contrast, the x being off-center is not quite as noticeable due to the small size and anti-aliasing.

the info button is more immediately visible as off center.

Owner

yourhead commented May 10, 2016

this has always been a problem with the close-box too. however several factors contribute to make it less noticeable: it only happens in the rightmost column, the close box is lower contrast, the x being off-center is not quite as noticeable due to the small size and anti-aliasing.

the info button is more immediately visible as off center.

@yourhead

This comment has been minimized.

Show comment
Hide comment
@yourhead

yourhead May 10, 2016

Owner

the problem exists because text is rendered on it's own pixel boundaries. if a stack appears on a half-pixel boundary the text will sometimes draw on one pixel and sometimes the other with respect to other dom elements like images, backgrounds, borders, etc.
making it more challenging is that the effect varies with different glyphs and at different DPI.

i don't think there is a way to accurately align the text with the background dom elements with pixel precision. this implies that the background and foreground need to be both be glyphs or both be background dom elements.

it seems possible that the background could be a circle glyph and the foreground another glyph -- however in practice it is very difficult to center one glyph inside another as fractional transforms are not rendered.

Owner

yourhead commented May 10, 2016

the problem exists because text is rendered on it's own pixel boundaries. if a stack appears on a half-pixel boundary the text will sometimes draw on one pixel and sometimes the other with respect to other dom elements like images, backgrounds, borders, etc.
making it more challenging is that the effect varies with different glyphs and at different DPI.

i don't think there is a way to accurately align the text with the background dom elements with pixel precision. this implies that the background and foreground need to be both be glyphs or both be background dom elements.

it seems possible that the background could be a circle glyph and the foreground another glyph -- however in practice it is very difficult to center one glyph inside another as fractional transforms are not rendered.

@yourhead

This comment has been minimized.

Show comment
Hide comment
@yourhead

yourhead May 10, 2016

Owner

replaced the close and info button with icons that include the background circle.

the pin button still has the same problem, but again is not quite so noticeable. i could probably replace the background with a circle glyph from the same library. i suspect this would work but since the problem is not very noticeable and that would require a significant amount of complication and more glyphs, i'm going to leave the pin as-is.

at this time there doesn't seem to be a need for a general purpose solution as there are only a few buttons we need in these cases

Owner

yourhead commented May 10, 2016

replaced the close and info button with icons that include the background circle.

the pin button still has the same problem, but again is not quite so noticeable. i could probably replace the background with a circle glyph from the same library. i suspect this would work but since the problem is not very noticeable and that would require a significant amount of complication and more glyphs, i'm going to leave the pin as-is.

at this time there doesn't seem to be a need for a general purpose solution as there are only a few buttons we need in these cases

@yourhead yourhead added the completed label May 10, 2016

@yourhead yourhead closed this May 10, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment