Once I figured out how to use them, I fell in love with counters.
You can add incrementing numbers to anything. They make you look more polished and organized than you actually are. It's cool how they just work.
My first counter was a figure counter. I wanted to learn how to add captions to my photos, so I learned about the <figure> tag, which happens to come equipped with the handy <figcaption> tag. That means your photos and their captions can always stay together. Like this:
<figure>
<img src="/content/images/2018/03/WorstPoliceSketchEver.jpg">
<figcaption>The Worst Police Sketch Ever</figcaption>
</figure>
(Using <figure> is also a good way to center your photos, which is often harder than it should be. We will do that in our CSS below. Also... you DO know that you can enter HTML directly into a post in your Ghost blog, don't you? You can't do that in most other blogging platforms.)
Naturally, adding a beautiful caption like that made me wonder, "Hmm, could I also number my captions, like they do in school textbooks? I want it to say, "Figure 1: The Worst Police Sketch Ever". Then the next one should say, "Figure 2..." and so on.
Obviously, I could just write the words, "Figure 1," and "Figure 2," into my figcaptions, but why not let the computer do that work for me? After all, it is inevitable that I will eventually want to squeeze "Figure 1b" between figures 1 and 2, and then I will realize I need to re-number everything, and you know how that goes.
Luckily, it's pretty easy. My HTML will stay exactly the same. What I am going to do is add a "counter" to my CSS style sheet, and then take that counter and prefix it to every <figcaption> that happens to come along. If you want the same effect on your blog, you can simply copy and paste my CSS code, shown below. The end result will look like this:
The only real mental work you need to do is to think: "When do I want my counter to start back at 1 again?"
In my case, that's not a hard question. Each one of my blog posts is a separate document. And I don't forsee a time when I would have a single post that contained multiple "chapters," so to speak, so I am fine with my figures starting at "Fig 1" and continuing until... whenever. When I create a new post, the numbering should start back at 1 again. Perfect.
What does every HTML document have exactly one of? A <body> tag, of course. So I can simply tell my counter to start from zero every time it encounters a <body> tag.
Later, when I create footnotes, I will do exactly the same thing. The first footnote in any post should be footnote number 1, right? And they should continue incrementing from there. So, conveniently, the <body> tag can serve as the clue that tells BOTH counters to start over.
Just to be clear... we could use any tag. If you were a lawyer, for example, you could make every paragraph numbered, and reset the numbering at every section. Or if you are writing a research paper, you could attach outline-style numbering to your <h1> and <h2> tags, so that your <h2> counter is reset every time there's a new <h1>, and so forth. Google "css counter" if you want to get fancy.
Here's my CSS for a really basic figure which centers the photo (or table, or graph, or whatever), then centers a caption under it, then numbers the captions, starting at 1. Copy this into your CSS (or simply include it between <style> tags in your HTML), and every time you use the <figcaption> tag you will get automatic numbering.
/* -----------------------------------------------*/
/* MARY'S CENTERED FIGURES WITH NUMBERED CAPTIONS */
/* -----------------------------------------------*/
body {
counter-reset: my-fig-counter 0;
}
figure {
text-align: center;
}
figcaption {
font-size:smaller;
}
figcaption:before {
counter-increment: my-fig-counter 1;
content: "Fig. " counter(my-fig-counter, decimal) " - ";
}
I'm sure you can figure out what everything means, but here's the rundown:
- counter-reset means "set the counter back to zero" when you encounter a new body tag.
- counter-increment means "increment the counter by this much".
- :before means, "prefix any figcaption with the following content".
- decimal means use regular numbers, not Roman numerals or any of the other format choices (which you can google yourself).
- And, obviously, you can change the word "Fig" to "Figure" or "Illustration" or "Example" or anything else you want.
Ta-da, an automatically incrementally numbered figure.
So what's the trick? You said there was a trick!
Now, pay attention.
As you have hopefully discovered, I later decided to create some awesome, hoverable footnotes, which also use counters. I will show you how I did that in another post, but basically, I used the same method of resetting the numbering for every new HTML "body."
A week later, I realized that my figures were no longer incrementing -- every single one was labeled "Figure 1" -- and I spent a good two hours trying to figure out what I had broken.
This is what I had done WRONGLY.
body {
counter-reset: my-fig-counter 0;
counter-reset: my-footnote-counter 0;
}
Which is the same as doing this:
body {counter-reset: my-fig-counter 0;}
body {counter-reset: my-footnote-counter 0;}
The problem with doing things that way -- and I did not find this documented anywhere that was easy to find -- is that, apparently, you can only have ONE counter-reset statement attached to a particular tag. (Or maybe only one counter-reset period. I did not test that.)
In any event, the RIGHT, CORRECT way to reset your counters is like this:
body {
counter-reset: my-fig-counter 0 my-footnote-counter 0;
}
Notice that there are only spaces separating those items, no punctuation.
That's a little bit annoying because I like to keep my css code grouped together. Anything that applies to figures should be in one place, in my opinion, and anything related to footnotes should be in another, but when it comes to counter-resets, they need to stay together in one single statement.
Got it?
I hope this helps someone who has run into the same issue, when they find out that all 20 of their figures are labeled "Figure 1." When you think your CSS counter increment is not working, it might NOT be your counter-increment, but rather your counter-reset being wiped out by another counter-reset.
Cheers! Now go forth and number your figures.
