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

Definitions in headings are visually unrecognizable #425

Open
not-my-profile opened this issue Sep 29, 2023 · 7 comments
Open

Definitions in headings are visually unrecognizable #425

not-my-profile opened this issue Sep 29, 2023 · 7 comments

Comments

@not-my-profile
Copy link

not-my-profile commented Sep 29, 2023

For example the heading of section 13.2.6.5 of the HTML spec is rendered as:

image

what you cannot see is that "foreign content" is hyperlinked clickable.

@annevk annevk changed the title Links in headings are visually unrecognizable Definitions in headings are visually unrecognizable Sep 29, 2023
@annevk
Copy link
Member

annevk commented Sep 29, 2023

That's a definition, but valid point.

I wonder if we should solve the styling issue or instead attempt to move definitions out of headings as generally that seems like bad practice to me.

@domenic
Copy link
Member

domenic commented Sep 29, 2023

I think definitions in headings is fine, and the fact that it's not obvious that they're definitions is also fine? The point of definitions is to have something to link to; they don't need to be visually obvious, IMO.

@not-my-profile
Copy link
Author

The point is that html-dfn.js turns these definitions into interactive elements and interactive elements should be visually recognizable.

Moving these definitions out of the headings could be one possible way of addressing this, and could probably also address whatwg/html#9811.

@domenic
Copy link
Member

domenic commented Sep 29, 2023

Yes, there are a number of interactable elements in HTML which are not properly marked up. It'd be nice to add some stuff to our build tools to emulate what Bikeshed (the other major spec build tool) does to them, which is add a little floating # permalink indicator.

@not-my-profile
Copy link
Author

I don't know what you mean by "little floating # permalink indicator.". The bikeshed whatwg specs use the same styling as the HTML spec.

@annevk
Copy link
Member

annevk commented Sep 29, 2023

They have different markup which sometimes helps (and sometimes does not), but for this they appear to have the same problem: https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-mime-type?

@janbrasna
Copy link
Contributor

A quick PoC adding subtle 30% grey dotted underline:

body.dfnEnabled dfn { text-decoration: underline dotted var(--a-underline); }

Screen Shot 2024-07-22 at 18 34 51

doesn't make it too busy, but admittedly the dfns are a plenty, so it may seem like a noise somewhat.

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

No branches or pull requests

4 participants