Petroglyphs

My right wrist has been hurting on and off for the last week, and fairly constantly over the last couple of days. I’ve got reasonably ergonomic setups at home and at work, but I think it’s time I start looking more closely at RSI information.

I’ve been trying to figure out the best way to mark up lyrics for the Sirens website (and, tangentially, my Lenni Jabour fan site). For my purposes, best means having the most flexibility for entry and layout while retaining as much semantic value as possible. There are a few options:

<pre>

Preformatted text is probably the simplest way to go, but it’s also semantically poor. It also suffers from an apparent bug in IE (who’d’a thunk?) which doesn’t allow the font of a <pre> element to be styled.

<p/>/<div/>

Piggin.Net suggests using a separate paragraph for each line. This makes layout much easier, but drops the semantic idea of paragraphs being groups of sentences. On the other hand, the stanzas example does group lines into verses using <div/> elements.

<p/>/<br/>

Paragraphs and line breaks are reasonable and commonly used, though they provide somewhat less-flexible layout options than simple <p/> elements. Classes can be applied directly to each paragraph, however, which allows things like <p class=”chorus”>…</p>.

<p/> plus white-space: pre

Simple paragraphs are probably the most semantically correct, and applying the CSS white-space: pre property allows them to be laid out in lines. Non-CSS2 browsers will see long lines of text for each verse, though, which isn’t the desired effect.

All <div/>, all the time

<div/> throws out all the semantics and most of the style inherent in HTML entirely, leaving everything to CSS. Non-CSS browsers will have a fit, and this isn’t much different otherwise from <p/>/<div/> or <p/>/white-space: pre.

XML markup

Definitely the most semantic, but also the least usable for general browsing. TEI‘s Base Tag Set for Verse seems to be the ultimate method; all of the other XML music formats (like 4ML) are note-based, so it’s impossible to do just lyrics. Layout-wise, if more browsers supported styling inline XML it might be worthwhile, but ultimately there’s nothing to see here. Move along.

Markupbation aside, I’m thinking <p/>/<br/> gives the biggest bang for the buck. Add some classes (verse and chorus) and some CSS (.chorus:before { content: ‘Chorus:’; }) and I’m ready to go.

As Dave Shea says, This is an article I needed to find myself…. Feel free to link gratuitously with [appropriate search term phrases]… so that others may benefit from it.

Another RSS Bigot joins the fold. Get with the program, people, and recognize how valuable an RSS feed is for your site!

Jenny Levine, Exactly!

Count me in as an RSS (and other feed formats) Bigot.

On the same topic, and further to yesterday’s post, how many Flash websites–for musicians in particular–boast RSS or iCalendar feeds? None that I’ve seen; they can’t even be scraped. Conversely, many non-Flash websites do have them; see Emm Gryner’s Journal, Newsfront, Website Updates, and Tour Dates for some good examples.

Finally, and off-topic, I wanted to call this post RSS Bigotry or something similar, but I’m not interested in the Google traffic the word bigot in the title will generate. Anti-keywords, anyone?

Flash sucks.

Well, that’s not entirely true: it’s the uses of Flash that suck. Flash websites suck. Flash ads suck. Flash used for the sake of using Flash sucks.

Even website designers recognize this: when’s the last time you saw one of those bloated Flash introductions without a skip button prominently displayed right next to it? (Extra points off for irony: the put-the-skip-button-inside-the-Flash-intro pattern.)

(A lot of the above goes for Java applets used in similar situations, but at least it’s useful on the server side too.)

When doesn’t Flash suck? It’s probably indicative of how bad things are that only one site comes to mind: Homestar Runner, home of Strong Bad’s e-mail.

This rant brought to you by a guy who’s seen one too many pointless Flash sites today. And the letter Z… that’s zed, not zee, and is a topic for another day.

Serendipity: Tim Bray’s post on a similar topic, published at 10:42pm local time but which I didn’t see in my aggregator until just now. Although he does use the phrase Flash sucks, the gist of the article is this: given the choice of a Flash UI or an HTML one, users …ended up going for the HTML version every time.

Mark Pilgrim points out Andrew Clover‘s parasite detector, which automatically searches for spyware etc. when a Windows Internet Explorer user browses to a webpage. As of now I’ve installed it on the main and most-requested pages of this site as a public service.

As Mark says, IE sucks. Use a better browser.

By now most everyone’s heard of the FIR technique for replacing plain text with images using CSS. Stuart Langridge has come up with a (better?) solution that doesn’t require extra tags, which I presume from the URL is to be referred to as LIR. It doesn’t seem to have garnered much attention to date, so I’m going to do my small part to make it better-known. I’m in the midst of my Sirens website redesign and didn’t relish the thought of having to go back to add <span/>s everywhere, so Stuart’s idea appeared at just the right time.