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

T363481: Use text-decoration for link style #199

Merged
merged 1 commit into from
Apr 30, 2024
Merged

Conversation

medied
Copy link
Contributor

@medied medied commented Apr 29, 2024

Phab ticket: https://phabricator.wikimedia.org/T363481
Demo: https://wikimedia.github.io/wikipedia-preview/T363481-underline/articles/english.html

Wikipedia Preview links styling is currently implemented using a pseudo element (::after). The following issues have been found to be likely due to this implementation:

  • When the target is on more than one line, the underline disappears
  • The gap between the word(s) and the underline is not part of the element so moving the mouse there will cause the popup to disappear

This PR uses text-decoration instead to fix issues above, sample below:

image

Copy link
Member

@hueitan hueitan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NIce, this works!

I wondering myself why changing it to use ::after in my last commit
https://github.com/wikimedia/wikipedia-preview/pull/174/files

@stephanebisson stephanebisson merged commit 25f0ed0 into main Apr 30, 2024
2 checks passed
@stephanebisson stephanebisson deleted the T363481-underline branch April 30, 2024 12:29
opacity: 0.5;
border-bottom: 2px dashed;
text-decoration: dashed underline 2px;
text-decoration-color: rgba(0, 0, 0, 0.5);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting a color here doesn't look good in dark mode.

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

Successfully merging this pull request may close these issues.

3 participants