Description

A few details related to the ToC that we've decided to address as part of the visual design phase of the project.

1. Bolding the active section link can cause unexpected line-wrapping (✅ fixed)

Fixed via @Jdrewniak's brilliance in: T314670: [Visual refinements] Bold active section in ToC
Because the bolded text is slightly wider than the non-bolded text, in some cases this causes line-wrapping

2. Clicking a ToC section link without scrolling the page initially cases the ToC to "jump"

This will be helped a little bit by: T314330: [Visual refinements] Stop TOC from jumping when sticky header appears (logged-in only)
Because the sticky position of the ToC is closer to the top of the screen than the initial position of the ToC, if you click a ToC section link without scrolling the page (such that the ToC would reach its sticky position) the ToC "jumps" to its sticky position. One way to fix this would be to adjust the sticky height of the ToC, however doing that would result in a significant amount of vertical dead space above the ToC.

current behavior	possible solution

(if GIFs above aren't auto-playing, click to view)

3. What should be the threshold for considering a section "active"?

The ToC bolds/highlights the "active" section link, i.e. the link corresponding to the section of the page you are currently viewing. However since sections can be short you can often have multiple sections on the screen at once. We can't know where on the screen you are looking, and therefore which section you're actually reading, so we have to guess. The current logic considers a section active when the section heading crosses a threshold ~70px from the top of the screen (which accounts for the sticky header). We can easily adjust this threshold to be lower down on the page if we would like. This screen recording demonstrates various section headings (highlighted with a pink background) crossing that threshold:

(note, to easily add the pink backgrounds use: document.getElementById( 'bodyContent' ).querySelectorAll( 'h1, h2, h3, h4, h5, h6' ).forEach( node => node.style.backgroundColor = 'pink');)

4. Should we avoid auto-scrolling the ToC in cases where you click on a section link that's towards the bottom of the ToC

e.g. in this situation the ToC would not auto-scroll (until the person then scrolled a little bit):