Since starting the Alternative Textbook Initiative, Stacy and I have been working with OU faculty who have chosen to adopt an open textbook to be used this coming fall semester. Some have simply adopted a textbook and others have chosen to write their own. In the OER space, when an author writes a textbook it is most commonly published in multiple formats. Typically open textbooks exist in digital form whether that be PDF, ePUB, iBook, a webpage, or some other form of eText. Faculty who are interested in open textbooks are concerned about how accessible their textbooks are; therefore, it would be ideal if their digital textbooks were also available in print form.
We decided to do some experimentation with websites as an open textbook publishing platform. After all, if you’re careful about it, webpages can be made to display well on desktop computers, laptops, tablets and phones alike regardless of proprietary restrictions. Webpages offer the interactivity that many faculty members are looking for and they can be edited in such a way that all users of the page receive the updated version at the same time. We even found during our experiment that webpages can be made to print beautifully using an alternative stylesheet that styles the content of the page in such a way that is ideal for printing on paper. Realizing this, I set out to build a website template that displayed well on devices of varying screen sizes and could be easily printed. Because I kept the layout pretty simple this was not too difficult to do.
Using two stylesheets; one for on-screen presentation and the other for on-paper presentation is quite easy. In fact, the on-paper stylesheet is quite similar to the on-screen stylesheet except that elements that should not be printed are hidden by a display: none attribute. Before beginning the experiment, I had never used a separate stylesheet for the print version of a page, but this article from Smashing Magazine gave me gave me all that I needed to get started. Using stylesheets in this way makes removing menus, backgrounds, headers and footers simple and allows only the content of the page to be displayed. Something to consider when printing a webpage is how the interactive content of the page will be displayed on paper. Videos should ideally not show up in the on-paper version of a webpage, but in their place should be a link to the video so that those reading on paper can access the video once they are in front of a computer. This can be achieved, by displaying the video (media, in the example below) in the on-screen version of the page and hiding it in the on-paper version of the page and furthermore by hiding the link to the video in the on-screen version of the page and showing it in the on-paper version of the page. The stylesheet comparison below explains this more clearly than that last sentence. Even those who are unfamiliar with CSS, I’m sure can make sense of the snippets below.
| On-Screen CSS Example | On-Paper CSS Example |
|---|---|
| /*—————————-BODY*/ #body { background-color: #660000; position: absolute; top: 234px; min-height: 100%; } /*—————————-Media*/ #media { display: block; } #printonly { display: none; } |
|
One of the many benefits of using separate stylesheets for different forms of presentation is the ability to use different fonts for each. There is debate about typefaces and which are more legible on screen vs on paper. This blog post by Alex Poole, a user experience designer, outlines the debate well. The argument is over whether or not san-serif fonts are more legible on-screen than are serif fonts. My personal opinion is that they are, and I have set up the two stylesheets accordingly. If you click on the side-by-side comparison of the styleshees above to view the full-size image, you’ll notice that the example on the left, the on-screen version, uses a san-serif font whereas the on-paper version, on the right, uses a serif font. This is just another example of the flexibility achieved when using multiple stylesheets.
We are currently working with two faculty members regarding how to best deliver their open content to students. A website template similar to that pictured above has been proposed to each citing the benefits of universal cross-platform compatibility, ability to edit after publishing, ability to print, and the option to include interactive features. Neither solution is developed enough to link to an example page, but as soon as one is available there will surely be a blog post about it.
