“The Seven Joys of Mary”

I continue to make my way through the carols in “Songs from the Hill Folk,” a medley in this year’s Boston Pops program (see my write-up about Jesus, Jesus, rest your head from a few days ago). If “Jesus, Jesus” found John Jacob Niles conflating the roles of song collector and songwriter—as he also famously did with “I Wonder as I Wander”—then “The Seven Joys of Mary” finds him more firmly in song collector territory.

I’ve written before about English ballads and ballad collectors, and “Seven Joys” (also called the “Seven Blessings of Mary”) is one of those. The tune that Niles found in Cherokee County, North Carolina in 1933 is quite unlike other tunes for the song, but hews closely to the traditions of the “number song.” There were many earlier known versions, including “The Ferste Joye, As I 3ou Telle” from the fifteenth century in England. Later versions included the African American teaching song “Sister Mary’s Twelve Blessings” (published in the Tuskegee Institute Collection in 1883).

Coming back to “The Ferste Joye,” I note two facts with some delight. The first is that it (and its fellow fifteenth century variant “The Ferste Joye as I Zu Telle” are both full-on Middle English carols. The second is that the Hymns and Carols of Christmas site, from which I drew some of this research, recommends using the Junicode font for optimal viewing of the text. That font is created by none other than University of Virginia professor Peter S. Baker, who taught me Old English, and helped me read through Beowulf, more than twenty years ago.

CSS fixin’: toward a vertical grid

It should be theoretically possible with CSS to design a page where the type falls on a vertical grid. In reality, you rarely see this happen because multi-column sites make matching the grid values across the columns difficult, and browsers, particularly IE, have awkward ways of inserting inconsistent space around some block elements.

But the basic theory is simple enough. Decide the base unit of height of the page, and go through your stylesheet, making sure that everything there is a multiple of the base unit of height. Your tools are line-height, padding-top and padding-bottom. For example, if your base measurement is 20 pixels between lines of type, and you want space between your paragraphs, you might define a style like p { line-height: 20px; padding-bottom: 20px;} or even p { line-height: 20px; padding: 10px 0;} (where the latter splits the padding above and below the paragraph).

Getting it to work right can be a real bitch, though. What if you have a heading that you want to set larger than 20 points? The naïve approach (which I just implemented) might be to implement a rule like this: h3 { font-size: 24px; line-height: 28px; padding: 8px 0 4px;} where the 28 pixels of line height are padded with a total of 12 pixels to make up 40, or two lines. But this only works if all your h3s are less than one line in height; a heading spanning two lines will take up 66 pixels, or a little more than three lines, messing up the grid. The recipe for success is to avoid setting multi-line headings too closely–or perhaps to use smaller font-sizes for headings.

Here, as in all things related to web typography, a valuable resource is The Elements of Typographic Style Applied to the Web, the brilliant adaptation of Robert Bringhurst’s essential typography rulebook to CSS+HTML+ (occasionally) JavaScript. In this case, the sections on vertical motion (Choose a basic leading that suits the typeface, text and measure and Add and delete vertical space in measured intervals) are invaluable, and I’m going through this theme’s stylesheet and working on applying the principles now. So if things look odd, don’t worry, it’s not just you.

I should also point to 8 fonts you probably don’t use in CSS, but should as the inspiration to change my sidebar headers to Gill Sans (though I might pick a different sans in a day or two), and 10 Examples of Beautiful CSS Typography and How They Did It for the specific inspiration to use small, capitalized, letterspaced sans serif for the headings. Both are quite well written posts from the blog at 3.7 Designs.

Excel theme fix list

I’m writing this working list so that I can keep a record of what I did to the Excel theme to get it the way I like it, as well as for anyone else who’s interested in learning how to hack up WordPress themes.


  • The amount of vertical space consumed by the header region (seems to be a common trend among the themes I’ve tried so far)
  • Need to tweak styles — tags and recent comments run into each other, headings in the sidebar are too prominent, need some custom style work for the Delicious widget
  • The dark borders around images and the big blocky links make the top of the page feel too heavy
  • Category and single post pages missing blog title

Fixes to date:

Tags: I replaced the function call for tags that was in the theme to specify the following: the_tags('<ul class="pmeta-tags"><li>Tags: ',',</li> <li>','</li></ul>');. This basically made the tag a true unordered list with a new class, pmeta-tags, and inserted a comma and a space after each item in the list except the last one. Then I edited the stylesheet to define ul.pmeta-tags as display:inline. So the tags now displays as a comma separated list. I tried a different, very handy, css-only approach (example) first, but the browser didn’t pick up the specified commas or spaces as cues to break the line, and so the content disappeared off the right hand side of the box.

Recent comments: I used the CSS-only example cited above to style the comments and provide a semicolon as a separator between comments. Alas, IE doesn’t understand this approach so I’ll have to do something else here.

Blog title on other pages: I edited the header.php file to include the blog title in parens after the title of the object (post, category, etc.)