annotation buttons' content within admonitions are not centered

[2bndy5]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

I noticed that the + (& rotated +) used for the annotations' button content is a bit off center when placed within an admonition.

I think this may be related to the slightly smaller font used for admonitions.

Expected behaviour

Not a huge deal, but I had expected the buttons content to align with the center of the button.

Actual behaviour

See above picture in description.

also seen in master (as of 3459540)

Steps to reproduce

see the insiders docs here

I should note that it still shows in master (as of 3459540)

!!! note

    ``` yaml
    # (1)
    ```

    1.  Look ma, less line noise!

Package versions

• Python 3.10.6
• mkdocs, version 1.4.1
• Material master branch (3459540)

Configuration

same for this repo.

System information

• Operating system: Windows 11
• Browser:
  • Firefox 106.0.2 (64-bit)
  • Chrome: 107.0.5304.88

[squidfunk]

Thanks for reporting. I've already poured several hours into trying to solve this problem some time ago, but from my current knowledge I think it's not generally solvable. It's definitely related to sub-pixel rounding issues, which is implemented differently in all browsers. Additionally, proportional fonts other than Roboto Mono might need further adjustment.

One idea I explored is to substitute the text (+ + pseudo element for the circle) with the plus icon in circle from the material icon pack, but that suffered alignment problems as well. Note that when printing, + is replaced with the number of the list item, so annotations are clearly attributable, so the icon idea only works for screen media.

I'm closing this as 'won't fix', but since you have a downstream project with very similar goals, I'm happy to merge a fix in upstream if you find a better way of implementing annotations.

[2bndy5]

Thanks for getting back. My initial "hack" would be to exempt the buttons within admonitions from the smaller font in CSS. But I haven't really played with it (yet).

[squidfunk]

You will see alignment issues in the regular font size as well, so this hack will only solve parts of the problem.

[squidfunk]

Note that this is all fixed in Insiders, and will be merged with the annotation feature once the next funding goal is hit. We switched annotations to use icons instead of the code font, which yields a much more consistent rendering.

Additionally, annotation icons can now be changed to any icon.