Meter Signs

Meter Signs in Academic Writing

2013-12-06 09:28:46

If you spend any time at all writing about music then you’ve faced the issue of how to deal with meter signs in your writing. Most of us just give up early and use fractions like 3/4 and 6/8, but this has always annoyed me, because of course meters are not fractions. Sharp (♯), flat (♭), and natural (♮) symbols are another annoyance but those will have to wait for another post (spoiler: they’re super-easy in HTML!).

I remember a time when my word processor had acceptable meter substitutes, not fractions but numbers actually stacked on top of each other. I think it was WordPerfect 6 on DOS. I haven’t had anything suitable since then and that was a really long time ago. After that I sometimes tried using an equation editor to get the numbers to stack up right. This was hard and also messed up the line spacing.

Recently I decided to have another go at meter symbols. This time the approach was to create images of the meter symbols and insert them inline as if they were characters. This actually works pretty well.

First, I created high-quality png images of some common meter symbols by using Lilypond. Start with an empty file that specifies only the meter you want. Put a skip as a placeholder so it’ll have something to compile. To isolate the meter symbol you have to remove the staff, clef, and bar engravers. Then compile with the -dpreview option, which only outputs the first system. (otherwise you’ll get a whole page with footer)

Here’s the Lilypond source for the symbol.

\version "2.16.2"

\header {
  tagline = ""  % removed
}

#(set-global-staff-size 20)

\score { { \numericTimeSignature \time 4/4 s1 } }
  \layout {
    indent = 0\in
    \context {
      \Staff
      \remove "Staff_symbol_engraver"
      \remove "Clef_engraver"
      \remove "Bar_engraver"
    }
    \context {
      \Score
      \remove "Bar_number_engraver"
    }
  }
}

Compile with this command:

lilypond -dpreview meterfile.ly

This produces three files: eps, pdf, and png. Since the eps file had the highest quality output, I chose that as my source and used the awesome netpbm CLI image manipulation toolset to crop off extra whitespace and then convert the result to a png file with transparent background. since I was going to do several of these I went ahead and made a bash script to automate it:

#!/bin/bash
# Sort out filenames first
infile=$(readlink -f "$1")
stem=$(basename $infile .preview.eps)
ppmfile="$infile"001.ppm

# convert the eps file to pnm so
# we can work with it

pstopnm $infile 

# crop excess whitespace
pnmcrop -white $ppmfile > $stem-crop.pnm

# convert to png with transparent background
pnmtopng -transparent '#ffffff' $stem-crop.pnm > $stem.png

The result of all this is a PNG file that is very high quality and much too large to use in a web page or word processor:

I scaled them down to about 7-10 pixels wide but kept copies of the original images in high quality just in case I want to make different sizes later. Here’s what they look like in action in html.

Understand and time signatures as well as whole notes, half notes, quarter notes and sixteenth notes. What about ?

For each meter sign I use image code that looks something like this:

<img class="meter" width="6px" src="images/3-4meter.png" alt="3/4" title="3/4 meter">

For the meter signs that are a single character wide I use 6px width, and I also grab style control over each one by assigning the class “meter.” I use the ugly fraction as alternate text for the benefit of screen readers and text browsers. For good vertical spacing I set a negative margin-bottom in the CSS like this:

img.meter {margin-bottom: -.15em;}

I also tried using the images in the LibreOffice word processor and found that they work pretty well if in the image properties you anchor the image “as character,” make the height about .16 inches (check the “keep ratio” box), and for vertical alignment choose “center to character”

And here’s how it looks in print:

I’ve posted my initial set of meter signs on my site here in a zipfile, but of course if you want to create other meters signs you can make pretty much any one you want with the lilypond example I used above, along with whatever tools you prefer for image manipulation. I like netpbm for its scripting potential, but I assume you could accomplish the same thing using Photoshop or GIMP or other image tools of your choice. I suppose you could dispense with the transparent background part, but since I plan to use these things on the web, I wanted to make the backgrounds transparent to accommodate different web-page background colors.