[BUG(UI)]: Permalink wrapping disrupts typography

• I’ve read the [contribution guidelines][1] and agree with them

I’ve found a bug and checked that …

• … the problem doesn’t occur with the default MkDocs template
• … the problem is not in any of my customizations (CSS, JS, template)
• … the documentation does not mention anything about my problem
• … there are no open or closed issues that are related to my problem

Description

Technically this might be more of a MkDocs upstream issue, but I’m rather certain the active maintainer there would reject resolving it (based on past threads I’ve seen their involvement in at least, he would defer it to theme maintainers instead).

Github handles this by floating the symbol to the left (which is a bit more consistent in location predictability tbh). They use the following CSS:

float: left;
padding-right: 4px;
margin-left: -20px;

Perhaps supporting that by default isn’t desirable without a breaking change release. I’m also aware that you might just suggest I add custom CSS to maintain this myself and close the issue. I’m just sharing this UX issue for the benefit of others since it’s obviously not a desirable side-effect to encounter.

Expected behavior

Ideally would look like this:

This requires the permalink symbol to not contribute to the width which would collapse.

Actual behavior

Permalink is wrapped to a new line introducing a large blank space, inconsistent with typography of other headings:

Steps to reproduce the bug

1. Enable toc.permalink.
2. Have a heading that is roughly the width of the document containers width.
3. Notice that visually there’s a big blank line, inconsistent with other headers.
4. Mouse over and realize it’s a hidden permalink symbol.

Package versions

Current Docker image release (7.x)

Project configuration

Standard instance should do the trick, this is an internal bug. Using the toc.permalink extension/feature:

markdown_extensions:
  - toc:
      permalink: ⚓︎

System information

Manjaro Linux with Firefox. Present with Docker container build.

[squidfunk]

Yes, I meant anchorlink. I’m sorry, I was answering from my mobile.

[squidfunk]

You can use the headerlink option: https://python-markdown.github.io/extensions/toc/