Project

General

Profile

Actions

Bug #20431

open

Problem with anchor links and top bar (again)

Added by Raffi Khatchadourian about 1 month ago. Updated about 1 month ago.

Status:
New
Priority name:
Normal
Assignee:
-
Category name:
-
Target version:
Start date:
2024-06-03
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

Following up on https://redmine.gc.cuny.edu/issues/14296.

Seems like things have got arye here after some time. I am noticing a few problems:

1. The original link I reported (https://khatchad.commons.gc.cuny.edu/research/publications/#Spektor2020), the achored text is a bit too far down the page (i.e., I can see some text above the achoroed text).
2. I seeing some other achnored text covered by the top navbar yet again, e.g., https://khatchad.commons.gc.cuny.edu/2022/07/13/nyu-gstem-students-visit-during-the-summer-of-2022/#pranavi. I have to push the up arrow on my keyboard once to read the achnored text.

I tried messing with the CSS we used to originally solve the problem, but I am not seeing any effect this time. Thanks!

Actions #1

Updated by Boone Gorges about 1 month ago

I'm unsure what changed, but I was able to adjust the existing CSS to accommodate your first link:

a[name] {
    content: "";
    display: block;
    height: 28px;
/* fixed header height*/
    margin: -28px 0 0;
/* negative fixed header height */
}

As for the second one, you're trying to link to an inline named link (<p><a id="pranavi" href="https://www.linkedin.com/in/pranavigpalli/">Pranavi Gollanapalli</a> is a rising senior...). It's pretty hard to set vertical offsets on inline elements like this. Instead, you could introduce an invisible <a name="pranavi"></a> tag like you have elsewhere. However, it's not clear to me that this conforms completely with the HTML5 spec; see https://stackoverflow.com/questions/484719/should-i-make-html-anchors-with-name-or-id. An alternative technique is to use WP's native "anchor" tool for the paragraph block, and then to add a bit of margin for p:target:

p:target {
    padding-top: 28px;
    margin-top: -28px;
}

In my tests, this works pretty well across browsers: https://khatchad.commons.gc.cuny.edu/2022/07/13/nyu-gstem-students-visit-during-the-summer-of-2022/#gollanapalli

Actions #2

Updated by Raffi Khatchadourian about 1 month ago

Boone Gorges wrote in #note-1:

I'm unsure what changed, but I was able to adjust the existing CSS to accommodate your first link:

[...]

Ah, I found out that I'm hitting a browser refresh issue. My browser won't pick up the CSS changes just by refreshing. I need to close and re-open the window, seemingly. Once I do that, now I am seeing changes in the CSS. I wound up making a bit more of an adjustment.

As for the second one, you're trying to link to an inline named link (<p><a id="pranavi" href="https://www.linkedin.com/in/pranavigpalli/">Pranavi Gollanapalli</a> is a rising senior...). It's pretty hard to set vertical offsets on inline elements like this. Instead, you could introduce an invisible <a name="pranavi"></a> tag like you have elsewhere. However, it's not clear to me that this conforms completely with the HTML5 spec; see https://stackoverflow.com/questions/484719/should-i-make-html-anchors-with-name-or-id. An alternative technique is to use WP's native "anchor" tool for the paragraph block, and then to add a bit of margin for p:target:

[...]

In my tests, this works pretty well across browsers: https://khatchad.commons.gc.cuny.edu/2022/07/13/nyu-gstem-students-visit-during-the-summer-of-2022/#gollanapalli

Hm. I'm seeing no change here in Chrome.

Actions #3

Updated by Raffi Khatchadourian about 1 month ago

Yeah, I agree that this is probably difficult to get right across browsers. I tried Firefox and the results were different.

Actions #4

Updated by Boone Gorges about 1 month ago

Adding Ray as a watcher in case he has more ideas.

This would be fairly easy to solve in a theme-independent way with JS, except that some themes add fixed-position headers/navigation elements (in particular on mobile). So I'm not sure a global solution is possible.

Actions #5

Updated by Raffi Khatchadourian about 1 month ago

Boone Gorges wrote in #note-4:

Adding Ray as a watcher in case he has more ideas.

This would be fairly easy to solve in a theme-independent way with JS, except that some themes add fixed-position headers/navigation elements (in particular on mobile). So I'm not sure a global solution is possible.

Thanks Ray and Boone. Not a big deal, just a little annoying. Weird that one case was fixed but not the other.

Actions #6

Updated by Boone Gorges about 1 month ago

Thanks Ray and Boone. Not a big deal, just a little annoying. Weird that one case was fixed but not the other.

One case uses empty <a> elements with a 'name' attribute. The other adds an 'id' attribute to the non-empty block-level element (ie the paragraph). The former works, the latter is inconsistent. If you want them to be consistent, you can add the empty anchors (might need to do this in HTML mode):

<a name="pranavi"></a>
<p>This is the content of your paragraph</p>
Actions #7

Updated by Raffi Khatchadourian about 1 month ago

I guess "name" is deprecated in HTML 5?

Anyway, I got it to work by adding more CSS:

p[id] {
    padding-top: 18px;
    margin-top: -18px;
}
Actions #8

Updated by Raffi Khatchadourian about 1 month ago

Hm. That "fix" caused other problems. I found a similar issue here: https://stackoverflow.com/questions/21553347/navbar-hiding-text-after-clicking-on-anchor-link

Actions #9

Updated by Boone Gorges about 1 month ago

  • Target version set to Future release

Sorry for the ongoing issues. The strategy in the Stack Overflow link requires knowing the vertical offset, which we can't know across themes, so it's not viable for a networkwide fix. And we can't allow arbitrary JS to be run on individual sites, for security reasons. I'll continue to think about this.

Actions #10

Updated by Raffi Khatchadourian about 1 month ago

I think I got it with this: https://support.knowledgeowl.com/help/fix-anchor-links-hidden-by-top-navigation

/* Make sure that the top navigation never overlaps content when an anchor is clicked */
body, html {
  scroll-padding-top: 55px; /* adjust the pixel amount here for your top navigation bar height */
}
Actions

Also available in: Atom PDF