So I just needed to present a list of authors in an article but I didn’t want to resort to writing a stupid text shoving helper.
The sun is beating down on me but I need to sit it out since my dark skin needs more exposure to produce my dosages of vitamin D. While devouring my pasta carbonara I decided to share a little snippet I may need again in the future .
Back in #Berlin 🇩🇪 and basking in the sun 🌞 to produce #vitamin #D. Just had some pasta 🍝 while getting some #html #css stuff done. Such a difference from the mind numbing puzzles 🀄 I generally try to solve. Felt like a kid for a second. #playtime #html #css #fun -- #piece of #cake 🍰 but I can't do this all day 😝 https://vid.bina.me/web/list-sentence/
So for future me…
Semantically you just need a list, aesthetically you just need something that is more natural language-ish. $LaTeX$ has a way of dealing with authors, but we’re writing webpages. It’s just a matter of style.
With my two authors, one quite wise and renowned for his disregard for the ordering we generally respect in English grammar and the other barely capable of formulating a proper sentence, we are in for a treat.
We want to disable the
list-style and display the list and all it’s
inline-blocks’ in order to play ball with the rest of our
sentence, if there is one.
Using pseudo-classes such as
allows us to append or prepend some content to our items.
The entire ordeal is only necessary when we have multiple children which is
why we captured everything in a
Now that we’re separated the lonely kids from the ones with siblings we need to ensure that the last child is always properly prefixed with the phrase and.
All other children, except the last two are postfixed with a comma. Note how
e aren’t postfixed by anything in
a, b, c, d and e. We basically
accomplish that by eliminating the last child and the 2nd last child
:not(:last-child):not(:nth-last-child(2)) and postfixing the rest with a
The resulting css should look something like the following:
That’s all for now.
If you really must you can prefix the entire
.authors block or the first
author element with the string by but that is up to you.
I can hear you thinking… don’t be a lazy fart. Demo this sucker! Well here goes…