search

KittyGiraudel / ama

Ask me anything!
43 stars 4 forks source link

CSS to reorder footnotes? #103

Closed jeswcollins closed 5 years ago

jeswcollins commented 5 years ago

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/

jeswcollins commented 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.

[1] https://stackoverflow.com/a/39217784/895065

KittyGiraudel commented 5 years ago

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.

jeswcollins commented 5 years ago

I think I could use an <ul> instead of an <ol>. But I dunno if the counter can be passed to the order property.

KittyGiraudel commented 5 years ago

An unordered list would be semantically invalid.

jeswcollins commented 5 years ago

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?

[1] https://www.sitepoint.com/accessible-footnotes-css/

jeswcollins commented 5 years ago

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.