Fuddland

This is the kind of thing only I would worry about. I could try and blame Richard and his throwaway comment about ordered lists, or mrtn for very kindly buying me Eats, Shoots & Leaves, but if I’m honest I’d been thinking about this anyway.

I’m always interested in discussions about correct and valid HTML or XHTML mark-up, and am getting mildly obsessive about making sure I use the right tags for the right job. Only recently I’ve got into the habit of putting <cite> tags around any book titles I mention, because this helps search engines when they’re indexing your site.

Similarly, using <abbr> and <acronym> tags gives important clues to search engine spiders about the topic of the text it is indexing. For example, if a page referring to “bugs in IE” is actually talking about bugs in Internet Explorer, marking-up the first instance of “IE” as <abbr title="Internet Explorer">IE<abbr> makes all the difference.

This week I are been mostly thinking about lists.

---

When I put a list of things in one of these weblog entries, it’s almost always marked-up as an unordered list, using the <ul> tag, because the order isn’t generally important. However, I like to try and punctuate my lists correctly — because I’ve been programmed to do this when writing mathematics. More often than not, each list item ends with a semi-colon, except the last one, which ends with a full stop [or a period if you’re North American]. Some people would use a comma as the separator, except if the list items themselves contain a comma, but I prefer to use a semi-colon regardless.

My problem is that, up until now, I’ve hard-coded the punctuation into the page and because of this, these unordered lists have an order imposed upon them; the item that has the full stop at the end has to be the last item in this list, turning it into a hybrid unordered-but-ordered list. I’m reluctant to use ordered lists because — obviously — that implies that the order of the items is somehow important.

If hard-coding the punctuation is not right, but I still want to use unordered lists, I wondered about whether I could get the punctuation done automatically, or at least mostly-automatically — taking care of the majority of cases. After all, part of the point of marking them up is so you don’t have to number each item yourself, so why should you have to figure out the punctuation too?

This seems like a job for CSS 3, currently supported by a few of the most recent browsers such as Firebird, via the :last-child pseudo-class and the ::after pseudo-element with CSS-generated content:

This automatically adds the most commonly-used separator, the semi-colon, to every list item, except the last one, to which it adds a full stop. If you find that more often than not you use a comma as a separator, all you need to do is change it in the CSS content attribute.

A problem lies with the fact that, as I mentioned, often you have to use different punctuation for grammatical reasons, and so don’t always want the semi-colons and final full stop. For example:

Here are some questions you can expect to be asked at some point in your life:

• What is your name?

• Are you going to wear that jumper?

• Have you seen Geoff?

• Was that you?

The solution I’ve come up with for this issue is to create a CSS class, nopunc, which clears the content attribute and can be applied to either entire lists or individual list items:

The above example would then need to be marked-up like this:

If the list is made up of items only some of which need different punctuation, then those that don’t require the CSS additions should be marked up as, e.g. <li class="nopunc"><p>Are you talking to me?</p><li>.

This idea could be extended to take care of more cases — for example, if a list forms part of a sentence that continues after the list, you’d not want a full stop on the last item, so could create a CSS class called continued, or something like that, that dealt with this instance.

After some heavy googling, I found a pretty concise and logical guide to punctuating lists at Writer’s Block. The above technique seems to fit nicely with their advice.

Of course the downside to this strategy is that not all browsers support CSS 3 [the :last-child pseudo-class part] yet, nor even the CSS 2 pseudo-element ::after — IE handles neither [surprise surprise] and Opera currently only supports ::after — so my correctly-marked-up lists will only look correctly punctuated on some systems. Swings and roundabouts eh?

The following is an entry which follows on from the above:

1. Punctuation #1, or, You're not the only one [onlysomuch - blog]. Excerpt: Following on from this discussion regarding punctuation, specifically David's comment that, "only I could worry about this", I must report that this so ain't so. Last night I woke up screaming from a nightmare. After a couple of minutes calming...

#1

bsag | 2004 / 01 / 27 – 10:45

I usually put no punctuation at all at the end of my lists, and now it turns out that I’m utterly wrong to do that. Arg. Now you’ve got me worrying about it. Nice solution, though! CSS 3 has all sorts of cool goodies, so it will be nice when all browsers support it properly.

#2

mrtn | 2004 / 01 / 27 – 12:43

yeah, i generally try to use no punctuation. that fits with the general move towards less cluttered punctuation generally. i notice the quoted article at writer’s block is getting on a bit…

having said that, i can see the logic behind full-stops as punctuation for list items that are complete thoughts: complete thoughts are sentences, and sentences have full stops.

but i can’t see any reason to have commas (or semi-colons, even though i use them quite a bit) at the end of list items. really, what’s a comma for? to show a natural pause. who would read a bulleted or numbered list, with no punctuation at the end of the list items, without naturally pausing when you get to the bullet or number anyway? which makes the comma or semi-colon kind of redundant in my book…

#3

David | 2004 / 01 / 27 – 13:10

Re #1: Glad you see I’m not the only one who worries about this sort of thing. ;)

Re #2: I don’t think seven years is ‘getting on a bit’ for advice about grammar or punctuation! I guess I’ve always — even before I’d read that article — followed their Rule 2:

Always use “natural” punctuation, that is, the same punctuation that would be applied were the list to be run into the body of the text.

If you adhere to that, then you obviously need the commas or semi-colons to act as separators [as well as pauses]. So the question is: is putting the items in a vertical list punctuation or formatting? If it’s the former, I can see the justification in not using commas or semi-colons; if it’s the latter, then I’d still use the separators.

#4

mrtn | 2004 / 01 / 27 – 13:34

re #3: “punctuation or formatting?”

interesting but moot question, since i don’t think it makes a great deal of difference.

if you were to run a bulleted list into the main text, you’d take out the bullets, right? in that instance agreed, you’d need the seperators at the end of the list items. but i can’t see the logic of keeping them in if you use, how should i put it, a different layout.

perhaps this comes right down to questions of how much control an author (or editor, or whatever) should have over written material and how much control the reader should have.

the web and current web standards in general have made people think that separation of content from layout is some kind of “holy grail”. now, it’s a good thing, especially in the context of web pages, but where does it end? if i produce something with a bulleted list, whose fault is it if someone else has decided “i don’t like bulleted lists, convert them all to plain text” and they end up with a list without separators? how about the change that “i don’t like sonnets, convert them all to blank verse” would make to shakespeare? reductio ad absurdum, agreed, but even so…

at the end of the day, if i decide to use a bulleted list, it’s because i’m following rule 1 from the writer’s block article:

Punctuate each list on its own merits, not according to some arbitrary scheme decided in advance for all lists in a particular publication.

re-reading that piece, i see that they themselves touch on the idea of editorial control:

Because some aspects of punctuation are a matter of editorial preference, the same list could possibly be punctuated differently by different persons. Therefore, all decisions on stylistic preferences for one publication (or publication series) should be made by the same person.

to whch i might add, “- and not by the reader!”

#5

David | 2004 / 01 / 27 – 14:10

Re #4: First of all, congrats for what I’m sure is the longest comment ever posted on Fuddland! :)

As I noted in the entry, my “solution” isn’t really a solution at all, in real terms, because of the lack of current CSS 3 support in browsers [the whole thing could be thought of as nothing more than an exercise in CSS], but I like the fact that it is flexible enough to fit into Rule 1’s criteria — you can use it to aid punctuating each list on its own merits, when that list is being marked-up as unordered, without it completely determining the punctuation for you; I realised a rigid, pre-described scheme would fall over pretty soon.

I think we agree that it all comes down to style — some people like using separators, some don’t. But the separation of style and content is a problem too; as you say, it’s generally a good thing, but at the moment with the content attribute the lines are blurred: it is not, as I think it should be, treated as genuine content by the browser [in Firebird, at least]. If you try and select the text of one of these lists, the CSS-added content is not highlighted.

So to sum up the thread so far: it looks like I’m either way behind the times because I still use separators, or way ahead of the times because my CSS is too advanced. ;)

#6

Daisy | 2004 / 01 / 27 – 16:46

Blimey, even I understood that code! How many years do you think it’ll be before CSS3 is in common usage?

#7

David | 2004 / 01 / 27 – 17:02

Re #6: Quite a while I should think. It offers some cool possibilities — I particularly like the nth-child selector which can be used, for example, to specify alternating background colours in table rows or cells. But IE doesn’t support any CSS3 — who knows if the new version included with Longhorn will? Opera will probably support it at some point, but I can’t find any exact promises.

To be fair, I don’t think the official CSS3 specs have even been finalised, so browser developers could argue that they’re waiting for that time — it’d be annoying to add support for a certain attribute or selector that ended up being not including in the final recommendation [annoying for both the developer and those users who have already implemented it in their designs, as they’d then have invalid CSS!].

#8

David | 2004 / 01 / 30 – 03:24

I forgot to put in the child selectors [>] in the CSS — code above updated. :)

Commenting on this post is closed. Thanks to all those who left comments. If you'd still like to say something about this entry, feel free to email me.