<style>/*<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=8737588169908790988&zx=bddeefaf-ce80-43c5-897a-e1aef4ab0557' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=8737588169908790988&zx=bddeefaf-ce80-43c5-897a-e1aef4ab0557' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

</head><body>*/</style>

Album liner notes in EPUB

Stewart Haines

30 Sep, 2025

I was playing around with presenting CD booklet-style liner notes in EPUB and made this.

(Obviously this is copyrighted material that I don't have permission to distribute, so please don't look at the EPUB in the embedded viewer below.)

It's really nice to use split-screen on my android tablet with a music streaming service, and the Cantook EPUB reader sharing the split screen. It's a little bit like reading a CD booklet while listening.

This blog post is also an experiment in where to host EPUB files. This one is on a cloudflare pages deployment, which was fairly simple to set up and free at this scale. The other samples I've embedded in the blog are hosted on github pages.

One of the other parts of the EPUB space I'm exploring is what to do with the EPUB files I'm making in the SEED.html app. Where to host them, how to get them into the hands of the people I want to read/reference them. I will write something about OPDS soon.

Point: the EPUB ecosystem is shaped both by the complexity of tools for creating EPUBs but also the options for distributing books outside of the industrial-scale publishers. Hosting is one part of that.

SEED.html embedded

The SEED.html app is a single-file, self-contained, single-page app that lets you edit an EPUB file as plain text content, styles and scripts.

It turns out the app itself can be embedded in a blog post. But if you want to use it check out the SEED.html app's home page.

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2536035415-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5vjJHAwb0eXTZyUDTcdFIrzdr36Q:1759224688367';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8737588169908790988','//blog.stewarthaines.com/2025/09/album-liner-notes-in-epub.html','8737588169908790988');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '8737588169908790988', 'title': 'EPUB 3 Investigations', 'url': 'https://blog.stewarthaines.com/2025/09/album-liner-notes-in-epub.html', 'canonicalUrl': 'https://blog.stewarthaines.com/2025/09/album-liner-notes-in-epub.html', 'homepageUrl': 'https://blog.stewarthaines.com/', 'searchUrl': 'https://blog.stewarthaines.com/search', 'canonicalHomepageUrl': 'https://blog.stewarthaines.com/', 'blogspotFaviconUrl': 'https://blog.stewarthaines.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22EPUB 3 Investigations - Atom\x22 href\x3d\x22https://blog.stewarthaines.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22EPUB 3 Investigations - RSS\x22 href\x3d\x22https://blog.stewarthaines.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22EPUB 3 Investigations - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/8737588169908790988/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22EPUB 3 Investigations - Atom\x22 href\x3d\x22https://blog.stewarthaines.com/feeds/1399732472640917644/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/8f4b520d26f96f21', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '1399732472640917644', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNhms-TGYi48Sc9PZUk9u1u1e9Qa720KmwyKKcZj6uTdZ-c_dcYAtkfpvYEoFUVfRD78MFNwAwB7N4wyiz2J907fNDeW5efRcIiFhsQgwvADNrHoJQJESKrOYehyphenhyphenPgOsVuvekBQ-eyG5rpZdf-aRJGT2Y1cBvyWg-XuRHm3r1M-xoFqDa3wUsb023sCQ/s72-c/hotel-foxtrot.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNhms-TGYi48Sc9PZUk9u1u1e9Qa720KmwyKKcZj6uTdZ-c_dcYAtkfpvYEoFUVfRD78MFNwAwB7N4wyiz2J907fNDeW5efRcIiFhsQgwvADNrHoJQJESKrOYehyphenhyphenPgOsVuvekBQ-eyG5rpZdf-aRJGT2Y1cBvyWg-XuRHm3r1M-xoFqDa3wUsb023sCQ/s320/hotel-foxtrot.jpg', 'pageName': 'Album liner notes in EPUB', 'pageTitle': 'EPUB 3 Investigations: Album liner notes in EPUB'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Album liner notes in EPUB', 'description': 'I was playing around with presenting CD booklet-style liner notes in EPUB and made this.   (Obviously this is copyrighted material that I do...', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNhms-TGYi48Sc9PZUk9u1u1e9Qa720KmwyKKcZj6uTdZ-c_dcYAtkfpvYEoFUVfRD78MFNwAwB7N4wyiz2J907fNDeW5efRcIiFhsQgwvADNrHoJQJESKrOYehyphenhyphenPgOsVuvekBQ-eyG5rpZdf-aRJGT2Y1cBvyWg-XuRHm3r1M-xoFqDa3wUsb023sCQ/s320/hotel-foxtrot.jpg', 'url': 'https://blog.stewarthaines.com/2025/09/album-liner-notes-in-epub.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 1399732472640917644}}, {'name': 'widgets', 'data': [{'title': 'JSON Variables', 'type': 'HTML', 'sectionId': 'upload-image', 'id': 'HTML50'}, {'title': 'Search This Blog', 'type': 'BlogSearch', 'sectionId': 'upload-image', 'id': 'BlogSearch1'}, {'type': 'Attribution', 'sectionId': 'upload-image', 'id': 'Attribution1'}, {'title': '', 'type': 'BlogArchive', 'sectionId': 'upload-image', 'id': 'BlogArchive1'}, {'title': 'Categories', 'type': 'Label', 'sectionId': 'upload-image', 'id': 'Label1'}, {'title': 'Main Tags', 'type': 'Label', 'sectionId': 'upload-image', 'id': 'Label2'}, {'title': '', 'type': 'ReportAbuse', 'sectionId': 'upload-image', 'id': 'ReportAbuse1'}, {'title': '', 'type': 'PageList', 'sectionId': 'upload-image', 'id': 'PageList1'}, {'title': 'About Me', 'type': 'Profile', 'sectionId': 'upload-image', 'id': 'Profile1'}, {'title': 'Default Thumbnail', 'type': 'Image', 'sectionId': 'upload-image', 'id': 'Image52'}, {'title': 'Pages', 'type': 'PageList', 'sectionId': 'upload-image', 'id': 'PageList52'}, {'title': '', 'type': 'Image', 'sectionId': 'upload-image', 'id': 'Image50'}, {'title': 'About Us', 'type': 'Image', 'sectionId': 'upload-image', 'id': 'Image51'}, {'title': 'EPUB 3 Investigations (Header)', 'type': 'Header', 'sectionId': 'upload-image', 'id': 'Header1'}, {'title': 'Icons, Dark, Search', 'type': 'LinkList', 'sectionId': 'header-main', 'id': 'LinkList10'}, {'title': 'Menu', 'type': 'LinkList', 'sectionId': 'header-main', 'id': 'LinkList11'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'blog-post', 'id': 'Blog1', 'posts': [{'id': '1399732472640917644', 'title': 'Album liner notes in EPUB', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNhms-TGYi48Sc9PZUk9u1u1e9Qa720KmwyKKcZj6uTdZ-c_dcYAtkfpvYEoFUVfRD78MFNwAwB7N4wyiz2J907fNDeW5efRcIiFhsQgwvADNrHoJQJESKrOYehyphenhyphenPgOsVuvekBQ-eyG5rpZdf-aRJGT2Y1cBvyWg-XuRHm3r1M-xoFqDa3wUsb023sCQ/s320/hotel-foxtrot.jpg', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'author', 'label': 'by'}, {'name': 'timestamp', 'label': 'd MMM, yyyy'}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comment'}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Tags:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'by'}, {'name': 'timestamp', 'label': 'd MMM, yyyy'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': 'Tags:'}]}, {'title': 'Categories', 'type': 'Label', 'sectionId': 'sidebar-static', 'id': 'Label10'}, {'title': 'Archive', 'type': 'BlogArchive', 'sectionId': 'sidebar-static', 'id': 'BlogArchive10'}, {'title': '#Recent Post', 'type': 'HTML', 'sectionId': 'sidebar-static', 'id': 'HTML19'}, {'title': 'About This', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML21'}, {'title': 'Follow Me', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList14'}, {'title': 'Copyright', 'type': 'HTML', 'sectionId': 'copyright', 'id': 'HTML23'}, {'title': 'SVG Icons', 'type': 'HTML', 'sectionId': 'jet-options', 'id': 'HTML24'}]}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML50', 'upload-image', document.getElementById('HTML50'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch1', 'upload-image', document.getElementById('BlogSearch1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'upload-image', document.getElementById('Attribution1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'upload-image', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'upload-image', document.getElementById('Label1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label2', 'upload-image', document.getElementById('Label2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ReportAbuseView', new _WidgetInfo('ReportAbuse1', 'upload-image', document.getElementById('ReportAbuse1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'upload-image', document.getElementById('PageList1'), {'title': '', 'links': [{'isCurrentPage': false, 'href': 'http://seed-html.blogspot.com/', 'title': 'Home'}, {'isCurrentPage': false, 'href': 'https://blog.stewarthaines.com/p/about.html', 'id': '7518744560269226166', 'title': 'About'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'upload-image', document.getElementById('Profile1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image52', 'upload-image', document.getElementById('Image52'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList52', 'upload-image', document.getElementById('PageList52'), {'title': 'Pages', 'links': [{'isCurrentPage': false, 'href': '/', 'title': 'Home'}, {'isCurrentPage': false, 'href': 'https://blog.stewarthaines.com/p/about.html', 'id': '7518744560269226166', 'title': 'About'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image50', 'upload-image', document.getElementById('Image50'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image51', 'upload-image', document.getElementById('Image51'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'upload-image', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList10', 'header-main', document.getElementById('LinkList10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList11', 'header-main', document.getElementById('LinkList11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'blog-post', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/4187009774-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label10', 'sidebar-static', document.getElementById('Label10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive10', 'sidebar-static', document.getElementById('BlogArchive10'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML19', 'sidebar-static', document.getElementById('HTML19'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'footer-widget', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList14', 'footer-widget', document.getElementById('LinkList14'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML23', 'copyright', document.getElementById('HTML23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML24', 'jet-options', document.getElementById('HTML24'), {}, 'displayModeFull'));
</script>
</body>*/</style>