“The layout of textbooks, I think, has been done with an assumption that students don’t read.”
James W. Loewen

 

Throughout several decades, I have watched the development of the technology used to build websites. I hand coded my first website using HTML 2 while I was still an undergraduate.

With each additional release of HTML, the addition of features allowed us to add more and more to websites. Additionally, many other technologies have added to websites like JavaScript and cascading style sheets (CSS).

I think CSS was one of the most significant changes to web design. One of the most apparent advantages of CSS is greater control of layout and design. While it would not be the best way to design a website with CSS, you can determine the position of every element on a webpage down to a single pixel.

Modern websites also use CSS to produce different layouts for desktop and mobile viewing. The reason I think CSS was such a significant change is CSS requires a different way of thinking about design and layout.

Proper use of CSS separates the content from the layout. CSS gives us the ability to move, position, and style content any way we want without changing the content. CSS layout is dependent on the use of tags, by giving each element of the website a unique identifier we can use CSS to place that element anywhere we want.

As an example, suppose we wrote three separate paragraphs and gave then CSS tags para1, para2, and para3.

One way to add the tag looks like this:

<p class=”para1”> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Without the unique tag it would look like this:

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

In and of itself that is not a big deal. However, since the paragraphs are now named elements, I can use CSS to style them independently of each other on the page.

If I do nothing, the three paragraphs will come one after the other. With just a little bit of CSS, I can make paragraph 2 right justified while the other two paragraphs stay left justified.

The code is:

.para2 {  text-align: right;  !important; }

The other paragraphs will stay left aligned because that is the default.

With some other code, I can make one of the paragraphs disappeared.

.para1 { display: none; }

This code would hide the first paragraph.

As the last example, I can change the order of the paragraphs.

p { display: flex; flex-direction: column;}

.para1 {order: 2 }

.para2 {order: 1 }

.para3 {order: 3}

This code would flip the order of the first and second paragraph while leaving the third where it is. These examples show that the code needed to make changes is rather small.

Now, why am I talking about CSS? Not long ago I wrote a blog discussing the problems I had with glossaries in several textbooks (read that blog here). In short, the traditional glossary at the end of a book was broken up and placed at the end of each chapter. For many reasons, I think this makes glossaries harder to use.

The reason for the glossary at the end of chapters is the fact that textbooks, especially open-source ones, are not meant to be used in their entirety but only the parts that fit your course. Since the book designers do not want extra words in the glossary, they split the glossary up.

Now imagine if we took the readability and accessibility of the electronic publication (EPUB) format and coupled that with the layout advantages of CSS. Now instead of copying, pasting, and editing the text of an open-source textbook with a few lines of code you can make a book for your course. Additionally, if something changes in your class, you can easily edit the book by making changes to the CSS. As an example, suppose we tagged all the text in a chapter with a unique name like chp#. If we added the same tag to the words in the glossary the words would behave the same as the chapter when formatted with CSS.

Now if we hide chp# not only will the chapter text disappear but so will the glossary words. However, you might ask “What if we wanted to move chp#? That will also move the glossary entries.” If the glossary entries moved, we would have the same problem with a glossary that I talked about before.

However, CSS has another little trick I skipped over; you can add tags together. As an example, your chapter text is a paragraph which has the default tag p. The glossary is a list, so each word is a list item which has the default tag li.

If I only wanted to move the chapter text, I would use the tag chp#.p this tag will leave the glossary words alone. To make a change to just the glossary words, I would use the tag chp#.li.

The makers of modern electronic books have done their best to re-create books just like their paper versions. While that is fine even desirable in some cases, we should not limit ourselves to it. After all, it should be comparatively easy to add functionality to electronic books.

We already have the code to make use of CSS it is in every web browser currently in use. This code can be added to e-reader software to give e-readers the ability to handle CSS. As for the creation of the books, we could start with any of the website creation tools and add the ability to export and save the documents (sites) as an EPUB document with CSS.

Having electronic books with expanded capabilities would give us tremendous advantages in addition to just CSS we can imagine being able to embed all kinds of additional content; media, live video, tests, and chat/discussions now books aren’t merely repositories for knowledge but a tool for learning.

We currently have all the tools we need to expand the functionality of the EPUBs format all we need to do is bring them together. Having this new EPUB format as a new tool would give us tremendous abilities as we design new and improved books for the use in the classroom.

 

Thanks for Listening to My Musings

The Teaching Cyborg