Why is my css snippet in obsidian not counting figures correctly?

Question

Hello I just got Obsidian.md and want a nice way to caption and keep track of figures. I am a novice with HTML and CSS but have been stumbling through. I am making figures using HTML and would like to prepend my figure captions with 'Fig. X' where X is the figure's number in my note and I wrote this snippet

<style>
    /* initialise the counter */
    body { counter-reset: figureCounter; }
    /* increment the counter for every instance of a figure even if it doesn't have a caption */
    figure { counter-increment: figureCounter; }
    /* prepend the counter to the figcaption content */
    figure figcaption:before {
        content: "Fig " counter(figureCounter) ": "
    }
</style>

Unfortunately it seems like every figure got 'Fig. 1'. Does anyone know why my code seems to be "forgetting" how many figures there were? I tested wrapping my figures in a body and this correctly creates Fig. 1 and Fig. 2, but I don't want to wrap my whole note in a .

<body>
  <figure>
    <img src = "link" width = 250>
    <figcaption>This is the caption</figcaption>
  </figure>
  <figure>
    <img src = "link" width = 250>
    <figcaption>This is the caption</figcaption>
  </figure>
</body>

Any help would be appreciated, thanks in advance!

score 0 · Answer 1 · edited Jul 24 '23 at 23:07

0

Wrap your figures inside a wrapper element, something like <div class="figure__wrapper">

<div class="figure__wrapper">
  <figure>
    <img src="link" width="250">
    <figcaption>This is the caption</figcaption>
  </figure>
  <figure>
    <img src="link" width="250">
    <figcaption>This is the caption</figcaption>
  </figure>
</div>

Update CSS

.figure__wrapper { counter-reset: figureCounter; }

.figure__wrapper figure { counter-increment: figureCounter; }

.figure__wrapper figure figcaption:before {
  content: "Fig " counter(figureCounter) ": ";
}

edited Jul 24 '23 at 23:07

midnight-coding

2,857
2
17
27

answered Jul 24 '23 at 22:25

Mohamed Ramadan

20
3

Hello, thank you for your answer @midnight-coding. Unfortunately I am writing in a format where my notes look like figure-block --- some markdown --- figure-block, and if I wrap my figures in an html tag it breaks the markdown rendering and stops some neat obsidian.md functionality. Otherwise this solution or the body tag in my example would work great! – Matthew Kozubov Jul 26 '23 at 14:35

score 0 · Answer 2 · answered Aug 22 '23 at 05:01

I found this solution for source mode. By extending this snippet to .markdown-preview-view, I got it to worked in both source and preview mode (on my machine).

Updated CSS:

<style>
/* initialise the counter */
.markdown-source-view, .markdown-preview-view {
    counter-reset: figureCounter;
}
/* increment the counter for every instance of a figure even if it doesn't have a caption */
.markdown-source-view figure , .markdown-preview-view figure{ 
    counter-increment: figureCounter;
 }
/* prepend the counter to the figcaption content */
.markdown-source-view  figure figcaption:before, .markdown-preview-view figure figcaption:before{
    content: "Fig " counter(figureCounter) ": ";
}
</style>

Example Note:

 <figure>
    <img src ="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRp5NcUOddSPHMZE9kstbTBek5rGKI2mRWcKapdWtgqKNxnHzTQVHPUMfUBnSIF0A00csw&usqp=CAU" width = 250>
    <figcaption>This is the caption</figcaption>
  </figure>

Some **unrelated** markdown text. 

  <figure>
    <img src ="https://upload.wikimedia.org/wikipedia/commons/3/38/Adorable-animal-cat-20787.jpg" width = 250>
  </figure>The second figure has no caption to make sure the counter is increased

  <figure>
    <img src = "https://upload.wikimedia.org/wikipedia/commons/9/9b/Domestic_cat_cropped.jpg" width = 250>
    <figcaption>This is the caption</figcaption>
  </figure>

Result:

Why is my css snippet in obsidian not counting figures correctly?

2 Answers2