=== 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
Because the bolded text is slightly wider than the non-bolded text, in some cases this causes line-wrapping
{F35014217}
===== 2. Clicking a ToC section link //without// scrolling the page initially cases the ToC to "jump"
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
| {F35014212 width=500} | {F35014214 width=500}
(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:
{F35014223}
(note, to easily add the pink backgrounds use: `document.getElementById( 'bodyContent' ).querySelectorAll( 'h1, h2, h3, h4, h5, h6' ).forEach( node => node.style.backgroundColor = 'pink');`)