Last summer we undertook a project to create a an open Thermodynamics book for Dr. Diana Bairaktarova which would be based on the open textbook, Engineering Thermodynamics -A Graphical Approach, by Dr. Israel Urieli from the University of Ohio. For this project we spent quite a bit of time considering the best way to publish the textbook we were going to create. We knew in the beginning, that the book would need to be downloadable as a PDF or a webpage that could simply be viewed in a web browser. This meant that the text would need to display well in a browser and on a printed page alike.
Stacy and I had several meetings with Dr. Bairaktarova and two students who would be helping her write and publish the Thermodynamics book. During these meetings we discussed the general format the book would take and planned the schedule on which the book would be created. We decided that the best format for this particular book was a website. The first step in creating the Thermodynamics website was to create a layout that was not distracting to the reader and that also displayed well across device platforms. Once the layout was created, it was not long until Dr. Bairaktarova’s students began inserting adapted content from the Ohio Thermodynamics textbook into the layout. It took about half the summer to create the content and build webpages for the book.
At the beginning of this project several days were spent building the layout for what would become the website; however, the same layout could potentially be used to house other content reducing the development time for subsequent projects. The Thermodynamics content was easy to incorporate into the layout in that it does not contain a large variety of media types. The entire book is text and images. There was, however, one problem to be solved for this book and that was the mathematical equations to be displayed in it. We wanted a, fast, easy, and accessible way of displaying math in a textbook. Math is commonly displayed on webpages in the form of images which often look awkward as they typically do not fit well into the page. Images are not ideal in that they are often created using some form of LaTeX markup then rendered as images that need to be inserted into the page and then uploaded to the website’s server along with the updated webpage.
For a textbook that contains a considerable amount of equations this workflow becomes problematic. Imagine creating each equation separately, organizing and naming each equation such that they can be easily accessed and edited -because they will inevitably contain mistakes, and then inserting each into its proper place on the page and uploaded to the server. This could be terribly difficult in the case of a text full of equations.
When I realized this I knew that there must be a better way to display equations and there is! MathJax is an opensource Javascript script that parses the HTML of your webpage and then renders LaTeX within it as webfonts or as SVG images -your choice! The result is beautiful and could not be more easy to produce. In the <head> of each page which is to contain equations a link to a script needs to be added. What this means is simply copying and pasting the following bit into your page.
<!--This script converts LaTeX markup to HTML and CSS for clear viewing on web.-->
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
When each page containing this is loaded, the script will execute and render the LaTeX within as webofnts. There is; however, only one downside to this method and that is the instant after a page is loaded when the raw LaTeX markup is displayed while the script is executing. This only lasts for the blink of an eye and is then replaced by attractive webfonts. Because the MathJax script is written in Javascript it works well on all devices. The following image is what the user might see if they are quick enough to catch a glimpse of the page while the MathJax script is executing.
The final rendered version of the above markup is shown in the image below.
The functionality provided by MathJax allows equations to be published with ease and because the equations are re-rendered each time the page is loaded, all that needs to happen to fix one of those inevitable mistakes mentioned earlier is to edit the LaTeX markup in the HTML of the page and upload the edited page to your server. The next time the page is loaded the user will see the changes reflected on their screen. If you happen to be using WordPress as a content management system for which to publish your content, there is a MathJax plugin that works the same way but on your WordPress site.
