Formatting iPhone lyrics display with alignment, color etc.

By: Jeremy Knight

So I may be the only one in the world who cares about this discovery, but in any case, I've recently realized that you can customize the lyrics display on the iPhone.

(Yes, you can display lyrics on the iPhone for any song you are playing. I guess that's the first discovery. You have to enter the lyrics manually, but there's also a plug-in for that, too. To show the lyrics, just tap the album artwork for any song while it's playing. Anyway, my big discovery is that you can customize the look of these lyrics with basic CSS.)

The background to this story is that I'm trying to learn italian. I've downloaded some italian covers of english songs. (ie: House of the Rising Sun sung in Italian) The problem is just hearing the song doesn't help me learn, I also need to see the words in italian and in english. So I've copied the lyrics (in english and italian) from the web into iTunes, but when they show up on the iPhone they are center justified and on a semi transparent black background. This looks bad, and is difficult to read. So I tried adding some HTML in there and viola, it worked! So I just wrapped the lyrics in a div like this:

div style="background: #000000; text-align: left; padding: 10px;"

.... lyrics go here ....

/div

This puts them on a solid background, with a little padding and aligns them left. Good times.

---