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

Improve legibility of element-based navigation when many elements are in close proximity #2

Closed
mjrusso opened this issue Jan 1, 2022 · 2 comments

Comments

@mjrusso
Copy link
Owner

mjrusso commented Jan 1, 2022

Legibility when using element-based navigation is (usually) OK-ish, but far from perfect.

As an example of a degenerate case, here's what HN looks like when element-based nav is active:

Screen Shot 2022-01-01 at 10 30 48 AM

The combination of a small font size, with many unique anchors in close proximity, is problematic. It might make sense to ignore elements that are clustered too closely together (using size as a proxy for importance).

Originally posted by @mjrusso in #1 (comment)

@mjrusso mjrusso changed the title Improve legibility of using element-based navigation when many elements are in close proximity Improve legibility of element-based navigation when many elements are in close proximity Jan 1, 2022
@mjrusso mjrusso closed this as completed in 323229b Jan 9, 2022
@mjrusso
Copy link
Owner Author

mjrusso commented Jan 9, 2022

I implemented (naive) algorithm that reduce "crowding", by filtering out elements that are positioned too closely together.

Here's what HN looks like with this change (see 323229b for implementation details):

Screen Shot 2022-01-09 at 9 04 02 AM

This is a huge improvement over before. It can still be hard to read the text, but that's a separate issue (being tracked in #4).

@mjrusso
Copy link
Owner Author

mjrusso commented Jan 9, 2022

Added 4cd2104, which draws a background colour underneath the element labels, to improve legibility. Here's what HN looks like with this change:

Screen Shot 2022-01-09 at 2 40 43 PM

It's not perfect, and not a substitute for #4, but it is a dramatic improvement.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant