4 ms·

> Easily Linkable Headings I haven't found a nice way to do this on both desktop/mobile. What I want is for every heading to have an anchor link that can be co

by zoidb 2y ago

> Easily Linkable Headings I haven't found a nice way to do this on both desktop/mobile. What I want is for every heading to have an anchor link that can be copied, similar to a hyperlink. I see a lot of sites do this with a [unicode chain symbol] which is present on hover, but that's not an option on mobile. Alternate option is to have it next to every heading (ugly), turn every heading into a hyperlink without styling, or make them look like regular hyperlinks which I think is confusing.

Arcanum-XIII 2y ago
Isn't that what anchor are for?
kibwen 2y ago
Have an icon appear on hover, and make every heading a hyperlink (even without styling), and have a table of contents with links to each heading (with styling). No need to dumb down your interface just for smartphone users.
- g15jv2dp 2y ago
  What's the point of the icon if the heading is already a hyperlink?
  - codetrotter 2y ago
    The anchor symbol can have JavaScript that copies the link to clipboard on click. And the heading can be a plain old link to itself. Gives a nice visual and interaction for desktop while providing a way for mobile users to get the link too (long-press the heading and copy link).
  - account42 2y ago
    It serves as an indication that the link is an anchor for that heading and doesn't lead somewhere else.
ahmetsait 2y ago
I don't think it looks that bad. My blog's anchors are hover-visible on desktop and always visible on mobile (with lower opacity). I used this query to check for hover event availability to decide whether they should be always-visible: `@media screen and (hover: none)`. I think it turned out pretty ok¹. [1]: https://ahmetsait.com/blog/en/Hello-World https://ahmetsait.com/blog/en/Hello-World
microflash 2y ago
Try this. /* keep the icon hidden by default */ :is(h1, h2, h3, h4, h5, h6) .icon { visibility: hidden; } /* show the icon on focus and hover */ :is(h1, h2, h3, h4, h5, h6):focus .icon, :is(h1, h2, h3, h4, h5, h6):hover .icon { visibility: visible; } /* show the icon on devices that don't have any accessory that can hover */ @media (pointer: coarse), (any-hover: none) { :is(h1, h2, h3, h4, h5, h6) .icon { visibility: visible; } } The `pointer: coarse` media query checks if you are using a device with an input mechanism of limited accuracy (such as fingers on a touchscreen). The `any-hover: none` media query checks if none of the input mechanisms on your device support hover (such as a Surface tablet not attached with a keyboard).
- zoidb 2y ago
  thanks! I think I will try this.

by zoidb 2y ago

Arcanum-XIII 2y ago

Isn't that what anchor are for?

kibwen 2y ago

Have an icon appear on hover, and make every heading a hyperlink (even without styling), and have a table of contents with links to each heading (with styling). No need to dumb down your interface just for smartphone users.

g15jv2dp 2y ago
What's the point of the icon if the heading is already a hyperlink?
- codetrotter 2y ago
  The anchor symbol can have JavaScript that copies the link to clipboard on click. And the heading can be a plain old link to itself. Gives a nice visual and interaction for desktop while providing a way for mobile users to get the link too (long-press the heading and copy link).
- account42 2y ago
  It serves as an indication that the link is an anchor for that heading and doesn't lead somewhere else.

ahmetsait 2y ago

I don't think it looks that bad. My blog's anchors are hover-visible on desktop and always visible on mobile (with lower opacity). I used this query to check for hover event availability to decide whether they should be always-visible: `@media screen and (hover: none)`. I think it turned out pretty ok¹. [1]: https://ahmetsait.com/blog/en/Hello-World https://ahmetsait.com/blog/en/Hello-World

microflash 2y ago

Try this. /* keep the icon hidden by default */ :is(h1, h2, h3, h4, h5, h6) .icon { visibility: hidden; } /* show the icon on focus and hover */ :is(h1, h2, h3, h4, h5, h6):focus .icon, :is(h1, h2, h3, h4, h5, h6):hover .icon { visibility: visible; } /* show the icon on devices that don't have any accessory that can hover */ @media (pointer: coarse), (any-hover: none) { :is(h1, h2, h3, h4, h5, h6) .icon { visibility: visible; } } The `pointer: coarse` media query checks if you are using a device with an input mechanism of limited accuracy (such as fingers on a touchscreen). The `any-hover: none` media query checks if none of the input mechanisms on your device support hover (such as a Surface tablet not attached with a keyboard).

zoidb 2y ago
thanks! I think I will try this.