Closed jeswcollins closed 5 years ago
Similar question and answer[1] on SO makes me think it may be possible, by combining your CSS counter method, with flexbox display, nth-child
and order
.
Unfortunately I don’t think CSS will be able to achieve that. When using order
on an ordered list (<ol>
), the numbered bullets do not keep the expected numerical order but also are swapped.
I think I could use an <ul>
instead of an <ol>
. But I dunno if the counter can be passed to the order
property.
An unordered list would be semantically invalid.
Hi Hugo,
I've returned to this footnote ordering problem. I implemented your numbering method.[1] I've also done some more reading and learning about css, trying out my idea. I learned that, in addition to the <ul>
idea being semantically invalid, counter
returns a string and order
takes a number, not a string.
Do you think it might be possible to use a counter, css variables, and pseudo elements to display the list of references in order? Even if so, I don't think that a list of references displayed as pseudo elements in the footer would be accessible? Would it?
I've thought a little more about idea of using a counter, variables, and pseudo elements. I don't think that could display the list in the order the references are made in the text actually. I think I'd need to use the variable as a selector, and that doesn't seem to be currently possible.
Hi Hugo,
I found your article about css for numbering references to footnotes very interesting[1]
When writing a research proposal, I had used javascript for something related: to reorder the ordered list of footnotes at the bottom, so they appear in the same order as the references to them in the main article text. If this problem isn't clear, happy to provide an example.
Can CSS reorder those list items? i.e. without javascript
Jesse
[1] https://www.sitepoint.com/accessible-footnotes-css/