Skip to content

feat: Use pure CSS for selection highlights #9202

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

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

BenHenning
Copy link
Contributor

The basics

The details

Resolves

Fixes #8942

Proposed Changes

Reason for Changes

Test Coverage

Documentation

Additional Information

This is still a WIP solution, but it's a possible approach.
@BenHenning BenHenning changed the title feat: Use pure CSS for selection highlights. feat: Use pure CSS for selection highlights Jul 3, 2025
@github-actions github-actions bot added PR: feature Adds a feature and removed PR: feature Adds a feature labels Jul 3, 2025
@BenHenning
Copy link
Contributor Author

BenHenning commented Jul 3, 2025

This is a possible solution to #8942 that is a completely different approach from those. It still relies on an extra path structure (not unlike option (3) in the issue and current highlights), except it uses it as a clip path. This is a clever solution I learned from https://alexwlchan.net/2021/inner-outer-strokes-svg/ that essentially produces an inner-only stroke so long as the stroke width is doubled.

This actually works very well, producing exactly the size of stroke we want without the block overlaps causing any issues.

However, there's now a small 1px gap due to a 2px reduction in size (before blocks would have a 1px stroke border on both sides, resulting in them overlapping by 1px) in Zelos. I haven't yet figured out how to eliminate this gap since it requires changes to block placement or path generation (not sure which yet).

Separately, I put this in common since the idea of using simple CSS for tweaking selection highlight behavior probably means we want the same solution for all renderers. This seems to look correct in Thrasos, but quite wrong in Geras (I'm assuming because of the offset dark path, but I haven't dug yet).

@rachel-fenichel I assume you are likely to have strong opinions about this--could you PTAL when you are next able to? It'd be helpful to get some thoughts on:

  • Whether this is a sufficiently clean approach.
  • Whether we should isolate this to Zelos or continue with the approach to generalize it.
  • How to eliminate the 1px gap that exists now due to the default stroke borders also inherently becoming inner borders with the new clipping in place.

Edit: Also, I realized while working on this PR that Thrasos and Geras both have their CSS-based selection highlights partially cut off at the bottom of the blocks, as well, since they rely on stroke. I think it's just move noticeable in Zelos for whatever reason, so it may not be unreasonable to just remove the filter bits from Zelos and move it over to the exact same CSS selection highlight and just be fine with the slight cut-off. The clip approach introduced here ensures an even border around the block which does look much nicer, but there's a fair amount of work remaining to get it working properly for all three renderers.

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

Successfully merging this pull request may close these issues.

Use CSS for selection state
2 participants