Skip to content

Fallbacks when referring to a list item in a list with non–Latin counters

r12a edited this page May 11, 2016 · 3 revisions

Assume we have some HTML code as follows:

<ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  </ol>
  
<p>Check out item ბ.</p>

and assume that we styled the list to use georgian counters.

li { list-style-type: georgian; }

The page would look like this when displayed:

ა. one

ბ. two

გ. three

Check out item ბ.

Now suppose you load the page without CSS. It would look like this.

  1. one
  1. two
  1. three

Check out item ბ.

It would be better if the paragraph below the text also defaulted to the same counter style as the list.

One way to do this (there's probably a better way) might be to add the following CSS to the style sheet.

body { counter-reset: listref; }

.cref::before { 
  content: counter(listref, georgian)
  }

Then write the paragraph text as

<p>Check out item <span class="cref" style="counter-reset:listref 2;"></span>.</p>

In the absence of CSS, you would then see

  1. one
  1. two
  1. three

Check out item 2.