Tag Archives: typography

Using JEdit with LilyPond on Mac OS X

LilyPond is a wonderful way to write simple code that generates beautiful sheet music. I use TextMate for nearly all my coding. It’s a great editor for the web and I have it fully customized to write code for everything I do including CSS, HTML, XML, XSL, Ruby on Rails, and PHP. There is a decent start at a TextMate bundle for LilyPond, and it does color code my LilyPond markup and let me run the compile command straight from the text editor, but the code coloring seems to break down when I get too detailed in the code formatting. Additionally, the feature that lets you point and click on a notehead which brings me back to the editor and position the cursor exactly where the relevant code is for where I clicked seems to be difficult—if not impossible—to get configured. Without this feature, editing complex scores can be a royal pain. There has to be a better way.

Now the basic functionality for LilyPond on Mac was to have it’s own text editor built in, and although primitive, it worked fine for the point and click feature. One could use a system shortcut to open the code in TextMate and all was good, so no big deal there. Unfortunately Mac OS X 10.5 seems to break LilyPond, and it’s a small enough project that no-one has stepped up yet to fix this. I’ll give it a stab sometime, but for now I need to edit some Hindemith bass parts ASAP!

After some research, I discovered there is a path forward in JEdit and a plugin called LilyPondTool. I found basic instructions at this website (which has several alternative paths available,) but there’s just a couple of specific things to mind when going the JEdit route. Here’s how to get it working on Mac OS X:

First, install LilyPond. Get the latest Mac OS X 10.4 build. Note that if a real, bona-fide, working binary appears at that link for 10.5 or 10.6, these instructions become obsolete (and your life is now easier.)

Next, install JEdit. Be sure to get the latest Mac OS X JEdit 4.3pre package and not one of the older ‘stable’ 4.2 builds.

Launch JEDit and choose Plugins > Plugin Manager. In the Plugin Manager, click on the Install tab and find LilyPondTool in the list. Click the checkbox next to LilyPondTool, click Install, and close the window when the thing finishes installing.

Now you have the LilyPondTool installed in JEdit, but it is set up probably for a Windows file system. There should now be a LilyPond > button on the JEdit toolbar that will appear. This button houses a menu for many excellent LilyPond shortcuts. Click on this menu and choose Development > Lilytool Options. This will open the Plugin editor for JEdit, and likely will miss opening the LilyPondTool options section of this panel. Easy enough to fix – just click on the LilyPondTool item in the left tray and select General from the list. Now you need to configure the application paths. These should be (unless you installed these things in weird places):

For the path to the LilyPond binary: /Applications/LilyPond.app/Contents/Resources/bin/

For the path to the external PDF viewer: /Applications/Preview.app

That should get you up and running. You should now have a Run LilyPond and a Preview Output (PDF) button on the JEdit toolbar that compiles and opens your score and lets you point and click on noteheads to instantly return the position of the relevant code. You also now have a nice IDE for LilyPond, with toolbar buttons and menu items to help you along, including a new document wizard and menu items for all the little bits of code I forget (such as ottavia brackets, thumb marks, tuplets, etc.) And the built-in MIDI player is a nice touch.

Update 2009-07-03: As you will see from the comments below, the developer has kindly set the Mac OS X default paths accordingly. Thanks!!

The woes of CSS color in print typography

Smoking Room/Prayer Room

As I was working through some documentation on styling CSS for print recently, I came across an oddity. Colors that I was specifying in my print styles were not getting represented properly at print time. Specify a nice shade of gray for some text? Maybe want to ghost print something very lightly on the printed page. No – not in Firefox. In fact, any shade of gray comes out as black in Gecko browsers. This behavior is only slightly more intelligent in Safari and IE7, but in all cases the user agent makes an assumption about what color of text constitutes being “too light” and then defaults to a darker shade of pale that is handled inconsistently across the various browsers. Printing font colors appears to be a messy situation.

Now the reason why the browser vendors have made this assumption is clear: Printing light text on what is almost always white paper is largely unreadable. Furthermore, printing in pure black, devoid of any complex color mixing, can make printing much faster, because the printer doesn’t have to mix in any red, green, or blue ink and can focus on getting the task done. But what is maddening to the designer trying to achieve accurate color representation in print from their web pages is that all of the major browsers assume that they are smarter than the designer, and recolor the text based on their own inconsistent algorithms. Actually, that may be assuming a bit much on the part of the browsers – sometimes the results defy logic.

To investigate further, I created a testing page. This page runs through some of the various color gamuts and creates a list entry for a number of color variations. The results are surprising… Here are some findings:

  • Safari 3: Between rgb(0,0,0) and rgb(107,107,107), things appear fine. But then there is a breakdown between rgb(108,108,108) and rgb(127,127,127) where the text will randomly jump to a light gray – equivalent of rgb(199,199,199). For lack of a better term, I call this area “The Dead Zone,” and we will see it again soon. At rgb(128,128,128), the text color then jumps to black and as you ascend the values towards an expected white color, Safari yields a progressive amount of additional lightness to the text until it finally winds up at around rgb(171,171,171) where it should be 255 for all values.

    The Dead Zone also occurs in the red, green, and blue colorspaces. If you fix red at 127, about halfway between the minimum value of 0 and the maximum value of 255, we get a dead zone between rgb(127,100,100) and rgb(127,127,127). Same ratios happen starting at rgb(100,127,100), and at rgb(100,100,127).

    Finally, Safari renders rgb(0,255,255), rgb(255,0,255), and rgb(255,255,0) inconsistently from their adjacent color values.

  • Gecko browsers such as Firefox, Camino, and Flock print the entire gray space in black. (Exception: Firefox 3 will actually print the color exactly right – see below.) You cannot specify a light gray such as rgb(127,127,127) or anything else. It will always default to pure black whether you like it or not. If you fix a color bucket at 0, you will get semi-accurate color for the rest of the gamut, but the other color combinations will trend towards black text the lighter it gets.

  • In Opera 9, gray shades render accurately up until rgb(185,185,185), and then higher values default to black. In the points tested, the same conversion to black happens after values higher than rgb(127,211,211), rgb(255,156,156), rgb(87,255,255), rgb(209,209,0), rgb(193,193,127), and rgb(177,177,255).

  • IE7 never gets any lighter than rgb(108,104,102) for grayscale, and the rest of the color spaces don’t seem to allow anything lighter than a midrange hue equivalent to around 110 for any given value.

  • One last thing about Gecko browsers: The marker (the little bullet to the left of each list item) will display the correct color value in print, even though the text itself won’t match! Underlines/Overlines/strikethrough will match whatever color the text is though. So at least here you can see what the color was supposed to be…

  • The exception as mentioned above is Firefox 3. Firefox 3 has been tested to print the colors exactly as you see them on screen, and is the only browser thus far that works this way in a predictable manner.

The conclusion I draw from all of this is that color in CSS print typography is woefully inconsistent, and I do recommend defaulting to black text in most cases simply because it is so problematic to predict what color you will actually wind up with in print. If you need color, go with a darker shade and test your print output in the four major modern browsers (IE, Safari, Firefox, Opera) to see what you can get away with.

Please feel free to try the test suite for yourself and let me know your findings in the comments or via a pingback.

Judging a book by it’s cover…

Sharks patrol these waters...

Or in this case, judging a candidate by their web design! Let’s face it – I am no political wag, and politics is something best left to other demagogues and zealotous pundits across the spectrum.

However, I can claim passable knowledge in double bass, and claim a rudimentary knowledge of web development design and development practices. Obviously I certainly can’t use my bass chops to judge this year’s candidates for president, although if one were to bust out a contrabass and wail out a rendition of oh, say the Koussevitsky Concerto in solo tuning, then I’d have vote for them just on principle.

But I sure as hell can embrace my inner fashion slave and get all up in their web design business! If nothing else, I can at least engage in the purely superficial practice of candidate analysis by using their primary online web presences as the basis:

  • http://www.barackobama.com/ – PHP backend, which says to me: “I’m an open format, flexible, and I like to get things done.” Title tag reads “Barack Obama | Change we can believe in.” Great design, usable. Very ‘web 2.0’-ish design. What stands out: Quote that says “I’M ASKING YOU TO BELIEVE. Not just in my ability to bring about real change in Washington… I’m asking you to believe in yours.” First line of quote in all caps which we will see is overused later on, but here provides appropriate emphasis in the context of the quotation. While I generally don’t like to see drop-down primary navigation menus, these are done well and seem to server the text that is within. Only criticism is the most recent blog post in which they inserted 14 full-size images that were subsequently shrunken down in the display using HTML attributes. This is generally considered a bad idea. Please cut them down to an appropriate pixel dimension for the thumbnail versions and link back to the high-resolution copies. But that is more of a content management issue…
  • http://www.hillaryclinton.com/ – ASP.NET, with a slightly disturbing marionette-like picture of Hillary, and the words in bold “MAKE HISTORY.” In all caps. For emphasis I suppose. Kind of a weak message if you ask me. It’s saying: “Vote for me, just because I’ll be the first woman president.” Drop-down menus seem a bit boxy and compartmentalized – I don’t find them to be as readable as Obama’s. Update: I check back the next day to find that they updated Hillary’s site with a new, vastly improved photo. Airbrush is your friend. Seriously – I have no problem with the airbrush tool in Photoshop and intend to wipe away each wrinkle in my own photo history as they occur…
  • http://www.johnedwards.com/ – Appears to be static HTML. Design looks dated. Message says “Thank You, South Carolina.” Color theme is not your typical palette. Here we have a sort of ochre/green/maroon/blue thing going on – a wider gamut than your usual red, white and blue political site.
  • http://www.johnmccain.com/ – Running on an IIS server. Interestingly, trying any file extension other than .aspx yields the default IIS 404 error page, but when using a .aspx, we get the “intended” 404 page with the site chrome. Noticed this problem on Hillary’s site too. I’m a fan of monochrome color schemes, so I had a soft spot for the site when I hit their splash page. (Why do all these sites insist, in 2008, on using splash pages still?) But the soft spot faded quick when I came to the home page and got overwhelmed with boxes, sliding pictures, a scattering of instances of “click here!” and “learn more” buttons, and a giant smiling McCain holding a mic. Message: “Best Prepared to Lead on Day One.” (Using smallcaps, for slightly less emphasis than all caps I suppose.) But for a minute I thought the site message was “click here.” This page has some nice b/w treatment. Overall I find this site to have an overabundance of head shots – maybe scale it back 50% or so? I get saturated by it – front, left side, right side, repeat.
  • http://www.mittromney.com/ – Server is running Apache Tomcat and appears to be servlet-driven. Slogan: TRUE STRENGTH FOR AMERICA’S FUTURE. You alpha male you. Center image advertises “Limited Edition Mitt Romney T-Shirt Designs” that suspiciously look like André has a Posse stencils. Right action box has the heading “TEAM MITT,” which I subconsciously took to read “dammit” for a minute there. Like the Five Brothers section overall, although they really need a sharper JPEG for the banner.
  • http://www.mikehuckabee.com/ – IIS server. Same 404 problem as McCain and Clinton. Not sure why this is hard on Microsoft web servers – should not all not found pages get the same treatment. Site uses Scriptaculous and Prototype, although I didn’t see any use of these in my cursory glance. Overall not a bad design. Oops – just saw the tagline in the right banner: “FAITH. FAMILY. FREEDOM.” I smell erosion of the 1st amendment separation of church and state and must flee far away from this site…
  • http://www.joinrudy2008.com/ – PHP, and overall not a bad site design. His site doesn’t use his first and last name. The site rudygiuliani.com appears to be controlled by a domain squatter. Anyway, the home page renders an embedded Flash video with Rudy’s portrait in the still image, and I’m immediately reminded of something: Rudy looks like a mortician from one of those wild west flicks – the gaunt, hunchbacked undertaker in a long coat and stove-pipe hat. By now I’ve noticed the ubiquitous box in the lower right of each candidate’s home page that is used for linking to their MySpace, Flickr, Facebook, Digg, and whatever presences. Looking at the home page, I don’t immediately have a message to take away. Every other candidate seemed to have one engraved in text somehow. I was shocked there was no typographical mention of 9/11 mentioned. To get Rudy’s message, you need Flash and have to run the home page video (a feature he relies upon site-wide). OK, once we run this, I see the familiar harping on terrorists and 9/11 that we all know and love from Rudy’s talking points. Rudy’s blog is all video posts, which is kind of odd and probably not that friendly to search engines or people scanning for messages.
  • http://www.ronpaul2008.com/ – PHP, and not a bad first impression for the site design. In fact, we get a meta tag generator attribute that tells us they use Moon PHP MVC framework. Has a Web 2.0 feel to it, although we feel a bit cluttered on the home page. Ron’s tagline is “HOPE FOR AMERICA.” Glad to see at least one candidate on the Republican side has moved beyond wrapping themselves in a flag and thumping on a bible. Join Campaign page has appropriate use of fieldsets which is a nice touch. But what’s this? Under the “The issues that most concern me in this election are:” fieldset, we have a checkbox entitled “Pro-Life.” Obviously this campaign is prepared to exclude the pro-choice camp from having a voice here. Pro-life is not an issue, it is a position on an issue.

Well that was an eye-opener. It is mind-numbing when you have to pay attention to these wingnuts for only a few minutes. It is interesting to note the similarities between many of the sites – the general layout, the features they all place in their sites and on the home page, and how they treat color and typography. The quality of the various sites overall was good, but not really that great. I have to say, for my tastes Obama’s site is by far the best of the crop. The design is there, the usability is there, it nails the design trends of 2007 on into the present, and has the best treatment for features, typography, and messaging. On the Republican side, I have to say that Ron Paul’s site is best, but I’m still having trouble getting past the semantics for that one checkbox issue. Of the three main democratic candidates, I noticed a sense of overall inclusion and positive attitude. On the Republican side, with the exception of Paul’s and somewhat on Romney’s site, I got the feeling that they were trying to convey a sense of “this is what we believe and how we’re going to do things – end of discussion.”

Interestingly, I was surprised to see that all of the ASP.NET/IIS websites failed to have a good 404 error page behavior. And overall, the PHP sites seemed to be coupled with the highest-quality page designs and content structures, although correlation does not equal causation as the whole pirate to global warming trend so effectively illustrates.