Anchor permalinks display issues

[hollisticated-horse]

When parsing this page: https://edanparker.hashnode.dev/going-a-little-further, the permalink images are huge.

I think they should be either properly styled and sized, or completely removed.
If this not a Readability.js issue, please let me know.

[gijsk]

@hollisticated-horse Is that the right link? The text in the screenshot does not match what I see at the link, and I cannot reproduce the issue described using the link.

Also, which version of Firefox are you testing with?

[hollisticated-horse]

Oh, sorry about that, I've modified the link in the OG post above.

I was using firefox 137 on archlinux

[gijsk]

Thanks for the updated testcase. Looks like the HTML uses:

<a class="permalink-heading-button" title="Permalink" style="height: 38.8833px;" href="#heading-intro" data-clipboard-text="https://edanparker.hashnode.dev/going-a-little-further#heading-intro">
<span class="hidden">Permalink</span>
<svg class="h-4 w-4 fill-current dark:text-white" viewBox="0 0 512 512"><path d="[elided]"></path></svg>
</a>

The h-4 w-4 classes on that page cause the width/height of the svg node to be smaller, but Readability does not include the page CSS and as a result the image size is determined by the SVG's viewBox, which indicates it should be 512 by 512 pixels. 🫠

Stripping out the viewbox likely wouldn't help on its own as the coordinates used by the SVG's path expect that size viewbox. The site could improve things by using a smaller SVG viewbox but I imagine that's not high on anyone's priority list if it works as-is in general.

This is in principle fixable in the reader mode CSS, for which I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1960636 .

The other option would be to try to find a heuristic to justify removing these from the markup returned by reader mode, though its' not immediately obvious to me what that logic should be. I guess any SVG in h1 (or other heading) elements? Though unsure if that would break other things in practice.

[mislav]

In case it helps anyone, recently I've written a Go implementation of stripping permalinks from heading elements as part of the readability pass of a page's contents https://codeberg.org/readeck/readeck/pulls/720

The logic in the implementation boils down to: if a hyperlink links to somewhere on the same page (<a href="#...">) and it's within or adjacent to a heading element that it links to by its ID, then assume that it's safe to strip the hyperlink and the link icon within. There are some nuances to this approach as the markup for self-linking headings varies across different publishing platforms, and the implementation I've linked to has HTML markup for testing that could be borrowed by anyone working on a JS implementation here. Hope it helps!

[hollisticated-horse]

In case it helps anyone, recently I've written a Go implementation of stripping permalinks from heading elements as part of the readability pass of a page's contents https://codeberg.org/readeck/readeck/pulls/720

Nice, this was literally why I came here in the first place.

@gijsk would it be of interest to the readability project that I try to make a PR for a JS port of the aforementioned fix by @mislav ?

[gijsk]

@hollisticated-horse Yep, sure, that sounds reasonable to me.

[hollisticated-horse]

Another example of permalinks anchors that are borked.

https://codesmash.dev/why-i-ditched-docker-for-podman-and-you-should-too

I'm going to make a WIP PR.