Annotations inside image captions

[MrEddX]

Is it possible to add annotations inside image captions?
If this is possible, could you provide an example?

[alexvoss]

I assume you use <figure> as suggested in the documentation? To get an annotation to render there you would need to add the markdown attribute to <figcaption> so that the content of that HTML element gets treated as Markdown.

[MrEddX]

Yes. You're right @alexvoss. But in my case the annotation icon is half visible so I'm not sure if I'm doing it the right way. For example:

<figure markdown>
  ![Image](resources/img/image_light.png#only-light){ width="640" }
  ![Image](resources/img/image_dark.png#only-dark){ width="640" }
  <figcaption markdown>Image caption (1)  text here
  { .annotate }

  1. And the annotation text.

  </figcaption>
</figure>

Light theme	Dark theme

When you click on the half icon, the animation works and the annotation is displayed, just the rendering is weird.

[kamilkrzyskow]

Hi @MrEddX,
I think this is a fixable bug, please report it via the proper Issue channels with a minimal reproduction.

• https://squidfunk.github.io/mkdocs-material/guides/creating-a-reproduction/#creating-a-reproduction

For the time being you can add CSS customization:

• https://squidfunk.github.io/mkdocs-material/customization/#additional-css

figure .md-annotation {
  text-align: initial;
}

[kamilkrzyskow]

I see this was resolved in:

• Incorrect rendering of the Annotation icon in Image captions #7362

Thanks for reporting. Also due to how the { .annotate } syntax works, I believe this a valid alternative approach, which is a bit cleaner:

<figcaption class="annotate" markdown>

Image caption (1) text here

</figcaption>

1. And the annotation text.

However, as it moves the list outside of the figcaption, then perhaps the position of the list shifts during printing.

[MrEddX]

Thanks to everyone who helped resolve this situation! Tested with the new 9.5.29 and now it works as expected.

I like your way @kamilkrzyskow. It's much more elegant.