Fixing O'Reilly Safari Books Online annoyances

While I love the content available from O'Reilly's Safari Books Online website, I'm less than enamoured with the presentation. Specifically it insists on using small Times Roman as the font for displaying the contents of books. You can increase the size, but it doesn't 'stick' between visits, and my aging eyesight really doesn't cope well with small serif fonts, especially the rather grotty Times Roman I have available - rather than specifying a serif font, the CSS explicitly asks for Times Roman.

The fix is pretty straighforward - firstly I found the CSS style used by the text in question, using the most excellent Web Developer extension for Firefox - install the extension, press <Control-Shift-Y> and click on the offending text to find the style information.

Next step: override the CSS by using Firefox's userContent.css file to provide a replacement. This file is found in your Firefox preferences directory, the easiest way to locate it is with find $HOME/.mozilla -name userContent-example.css - it should live in the same directory as that file. Here's what I used:

@-moz-document domain(safaribooksonline.com) {
        .docText, .docList {
                font-family:    sans-serif      !important;
                font-size:      medium          !important;
        }
	.docFootnote, .docItemizedlist {
		font-family:	sans-serif	!important;
		font-size:	small		!important;
	}
}

Note that after you've created this file you need to restart Firefox, as it only gets read when Firefox starts up. The neat bit is the use of the @-moz-document directive to restrict the custom CSS to just the Safari Books Online website, as .docText and .docList aren't exactly unusual names and could conveivably used by other websites. The full synxax of the @-moz-document directive is as follows:

  • url(http://www.w3.org/)
    Apply the CSS to the page http://www.w3.org/

  • url-prefix(http://www.w3.org/Style/)
    Apply the CSS to any page whose URL begins with http://www.w3.org/Style/

  • domain(mozilla.org)
    Apply the CSS to any page whose URL's host is mozilla.org or ends with .mozilla.org

Tags : ,
Categories : Web, Tech