fix: keep heading alignment stable when addSectionLinks is false#5172
fix: keep heading alignment stable when addSectionLinks is false#5172marcoscaceres merged 5 commits intospeced:mainfrom
Conversation
marcoscaceres
left a comment
marcoscaceres
left a comment
There was a problem hiding this comment.
Thanks for the quick fix, @saschabuehrle! This landed fast after we triaged #4448 earlier today.
The approach is clean: adding :has(+ a.self-link) ensures the heading offset only applies when the self-link element is present. When addSectionLinks is false, headings stay in their natural position.
Approving as-is. CSS visual tests are hard in this codebase and the fix is visually verifiable.
There was a problem hiding this comment.
Pull request overview
Adjusts ReSpec’s heading styling so the left offset is applied only when a heading actually has an adjacent section self-link, keeping heading alignment stable when addSectionLinks: false (fixes #4448).
Changes:
- Scope the heading left-offset rule to headings that have an adjacent
a.self-linksibling.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
|
|
||
| :is(h2, h3, h4, h5, h6):not(#toc > h2, #abstract > h2, #sotd > h2, .head > h2) { | ||
| :is(h2, h3, h4, h5, h6):not(#toc > h2, #abstract > h2, #sotd > h2, .head > h2):has(+ a.self-link) { |
There was a problem hiding this comment.
Using :has(+ a.self-link) ties this layout fix to support for the relational pseudo-class; in browsers that don’t support :has(), the entire rule will be dropped and headings will no longer be offset when section links are enabled (regression from previous behavior). Since the markup already wraps only section-link headings in .header-wrapper (created only when conf.addSectionLinks is true in core/id-headers.js), consider targeting .header-wrapper > :is(h2, h3, h4, h5, h6) instead to avoid :has() and keep behavior consistent across browsers.
| :is(h2, h3, h4, h5, h6):not(#toc > h2, #abstract > h2, #sotd > h2, .head > h2):has(+ a.self-link) { | |
| .header-wrapper > :is(h2, h3, h4, h5, h6) { |
There was a problem hiding this comment.
This is fine so long as it works in across latest browser engines.
@saschabuehrle can you confirm that it's ok across Firefox, Safari, and Chrome?
Fixes #4448
The heading offset is now applied only when a heading actually has an adjacent section self-link. With
addSectionLinks: false, numbered headings keep the same alignment as when links are enabled.Greetings, saschabuehrle