Case Study: Data Tables from Print to Ebook

Printed Cold Heart back matter page showing the solar stems in the lunisolar calendar
The print book design is fairly straightforward — the only unusual aspect being the column of Japanese kanji in a different typeface.

During production of Cold Heart: Yamabuki vs. the Shinobi Priest, the author, Katherine M. Lawrence, and I decided that readers might benefit from having some additional back matter explaining the world of 12th-century Heian Japan.

The challenge comes when you want to present a moderately wide table of data, which would not fit in older ebook devices and ebook apps on smaller screens.

Cold Heart by Katherine M Lawrence, back matter in print and kindle
The print layout and the default ebook layout are designed to be essentially the same in appearance.

One solution is to redefine the semantic structure of the content from HTML table display to an alternate display, and doing it without losing the intended meaning in the content itself. The rest is done with CSS.

Rendered display of Cold Heart table data formatted for current ebook ereaders and devices
The preferred display is very similar to the print layout of the content. The table data is presented in an HTML table and styled with CSS accordingly.
Ebook HTML code for display of Cold Heart table data formatted for current ebook ereaders and devices
The HTML coding for the page with the tabular data defined and marked up in table format.
Rendered fallback display of Cold Heart table data formatted for older ebook ereaders and devices
The definition list displays the data in a more stacked mode. It’s not as ideal as the tabular display, but the content is still understandable — and semantically correct, so that screen reading devices will interpret the content properly.
Ebook HTML coding for fallback display of Cold Heart table data formatted for older ebook ereaders and devices
For older devices with narrower lower-resolution screens, a tabular display may not fit, so instead the data is presented in HTML as a definition list.

SUBSCRIBE TO MY

NEWSLETTER

Receive very infrequent emails about design, editing, writing, and the occasional special offer.

Check your inbox

for a confirmation email.

Click the link to confirm your subscription.

Thank you!

Powered by Convert Pro
Scroll to Top