Circled numbers and other footnote styles

| permalink | css

I've investigated this because I want more prominent superscript numbers for footnotes, as the default <sup> superscript numbers are too small and easily missed. I have to play "where's Waldo" with them.

Default looks like this1.

So I thought I'd try my hand at putting a circle around the number like some publications do, should be easy right?

Not quite, especially if you want the circle to change in size dynamically to fit the number without breaking.

Obviously, for footnotes I don't foresee ever needing to accommodate more than 2 digits, but as a perfectionist I do want a solution that won't break when going beyond.

Perfectly round circled numbers

First dynamic solution I found that works is this answer from Stackoverflow, my adaption is shown below with CSS variable added for convenience:

sup {
  --padding: 2px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid;
  margin-inline:.25em;
}

sup:before,
sup:after {
  content: '\200B';
  display: inline-block;
  line-height: 0px;
  padding-top: 50%;
  padding-bottom: 50%;
}

sup:before {
  padding-left: var(--padding);
}

sup:after {
  padding-right: var(--padding);
}

This1 is what12 the circles99 looks like125.

However, while interesting, I don't think having varied height for superscripts works visually. It could work for other use cases though.

Circled numbers with equal heights

So to keep the height the same I'm willing to let the circle become pillboxes when the number of digits grow, however I do want the minimum width to be the same as the height to preserve the circle with there's only a single digit.

To accomplish this I use a combination line-height and min-width to maintain a minimum 1:1 aspect ratio (too bad there isn't a min-aspect-ratio property).

sup {
  --h: 1em;
  --pad-x:.15em;
  font-size:.75rem;
  text-align:center;
  display:inline-block;
  box-sizing: content-box;
  border:1px solid currentColor;
  border-radius:1em;
  line-height:var(--h);
  min-width:calc(var(--h) - var(--pad-x) * 2);
  padding-inline:var(--pad-x);
  margin-inline:.15em;
}

This1 is what12 the circles99 looks like125.

Chiplet footnotes

Now here's one without the circles, it uses transparent white background with sharp corners and transparent black bottom border, creating little "chiplets".

sup {
  border-bottom:1px solid color-mix(in srgb, currentColor 30%, transparent);
  text-decoration-color:currentColor;
  background:rgb(255 255 255 / .5);
  padding-inline:.15em; /* .3em */
  margin-inline:.1em;
  z-index:-1;
  position:relative;
}

This1 is what12 the chiplets99 looks like125.