EPUB Formatting Challenge: Embedding blog posts in the flow of story text

[Morganucopia]

Open challenge to all MobileRead ebook developers:

I'm currently designing a fiction novel in EPUB. Periodically throughout the story a blog is mentioned. I would like to actually break the story text and insert the first few paragraphs of a blog post along with a header image, and then have the story text continue below. Essentially, the effect I'm looking for is similar to books like the Shopaholic series that incorporate letters, or books that incorporate diary entries in the flow of text.

To set the blog post apart from the story text, I will have to use a different typeface, margins, a background image or colour, and maybe a border. I'll also include a link at the end to take the reader directly to the blog post on their web browser. Here's the beef: How's the best way to go about this? Should I create a div.blog to create my blog posts? If I use borders or a background graphic, what will happen if the page breaks in the middle of a blog?

Also, is there a way to actually "embed" an actual, live blog post in an EPUB file? I realize that the reader would need a live Internet connection, but I'm curious if it can be done. So basically, can we "embed" web pages in EPUB? I'd likely not do it this way, but I am curious, and I can't seem to find any info about it online.

Bouquets in advance to anyone willing to brainstorm with me. Thank you!

[Notjohn]

I use a monospace font called Courier for this purpose. I indent from the left but not from the right (because older Kindles don't support right indentation, and there are millions of those out there).

The image would be handled like any other image. Because books now get read on everything from an iPhone to an iPad, I use a width attribute rather than an absolute size for such images, e.g. width="10%" (you might have to experiment).

[DiapDealer]

Originally Posted by Notjohn

I use a monospace font called Courier for this purpose.

I don't even use a specific font name here. I just use:

font-family: monospace;

so that whatever the default (or user-defined) monospaced font for the device/app will be used.

[RbnJrg]

Originally Posted by Morganucopia

Open challenge to all MobileRead ebook developers:

I'm currently designing a fiction novel in EPUB. Periodically throughout the story a blog is mentioned. I would like to actually break the story text and insert the first few paragraphs of a blog post along with a header image, and then have the story text continue below. Essentially, the effect I'm looking for is similar to books like the Shopaholic series that incorporate letters, or books that incorporate diary entries in the flow of text...

Maybe something like this...

https://www.mobileread.com/forums/sho...37&postcount=2

and this...

https://www.mobileread.com/forums/sho...66&postcount=6

...could help.

[Tex2002ans]

I pulled this CSS out of a book I read that was published by Tor that had "blog posts" throughout the book.

I have attached a sample EPUB, and a sample image showing what it looks like.

[Morganucopia]

Originally Posted by Notjohn

I use a monospace font called Courier for this purpose. I indent from the left but not from the right (because older Kindles don't support right indentation, and there are millions of those out there).

The image would be handled like any other image. Because books now get read on everything from an iPhone to an iPad, I use a width attribute rather than an absolute size for such images, e.g. width="10%" (you might have to experiment).

Thanks Notjohn for the heads up on right indents and on using absolute measurements for images. Very good tips!

[Morganucopia]

Originally Posted by DiapDealer

I don't even use a specific font name here. I just use:

font-family: monospace;

so that whatever the default (or user-defined) monospaced font for the device/app will be used.

DiapDealer: Right on. That's a good idea, but I think I'll be using an embedded font, and use "monospace" as an alternative in my CSS if the reader doesn't support embedded fonts.

[Morganucopia]

Originally Posted by RbnJrg

Maybe something like this...

https://www.mobileread.com/forums/sho...37&postcount=2

and this...

https://www.mobileread.com/forums/sho...66&postcount=6

...could help.

RbnJrg: Thanks for the links. I wasn't quite thinking along the lines of a sidebar since there would be no need to wrap the story text around; it would just continue below the blog post. But I can see how I can visually separate my blog material using thick top and bottom borders like in your example. I'm really glad you pointed me to these posts because I didn't know the "float" property could be an issue with older ereaders. Thanks for the heads up!

[Morganucopia]

Originally Posted by Tex2002ans

I pulled this CSS out of a book I read that was published by Tor that had "blog posts" throughout the book.

I have attached a sample EPUB, and a sample image showing what it looks like.

Tex2002ans: Yipee! Thanks for the hard work you put into doing up that sample epub for me. Much appreciated. By any chance, what was the title and author of the TOR book? I wouldn't mind seeing the original to see how the story text was treated before and after the blog post.

[Tex2002ans]

Originally Posted by Morganucopia

Tex2002ans: Yipee! Thanks for the hard work you put into doing up that sample epub for me. Much appreciated. By any chance, what was the title and author of the TOR book? I wouldn't mind seeing the original to see how the story text was treated before and after the blog post.

The name of the book is "Inside Straight" edited by George R. R. Martin:

http://www.barnesandnoble.com/w/insi...=9781429925495

Nothing fancy happens before/after (plus you could always adjust the CSS to make it however you want). Use the CSS in my post/example and build upon it! See attached images for the Before/After in the actual book.

For example, here is CSS for a gray box that I use, which looks great in color, and works GREAT on e-ink (original Nook):

https://www.mobileread.com/forums/sho...25&postcount=9

All of the relevant CSS + sample pictures are given in my last two posts though.

If you are still interested in seeing it in actual action, I have a WIP EPUB of that gray box in the linked post. That gray box was from the Quarterly Journal of Austrian Economics EPUBs that I am working on. Currently, they are all available as PDFs (I had the EPUBs generated from InDesign). It is a long-term backburner project that I am slowly chipping away at.

Everything I do for work is not copyrighted (actually, it is a CC-BY 3.0 that is as close to Public Domain as possible, and my employer will never enforce the copyrights, and everything is free to distribute/share/whatever). So feel free to ask away, I will share everything with anyone who is interested.

All the EPUBs I work on are pretty much non-fiction economics/history works, so the gray box is about as fancy as I get (the goal is to make it work on as many devices as possible, not trying to design EPUBs specifically for one device/reader).

[Morganucopia]

Originally Posted by Tex2002ans

For example, here is CSS for a gray box that I use, which looks great in color, and works GREAT on e-ink (original Nook):

https://www.mobileread.com/forums/sho...25&postcount=9

Thanks again Tex2002ans! The code and screenshots you supplied were enormously helpful. I really appreciate it. Good luck chipping away at your slow burn EPUB project; Austrian Economics isn't exactly Fifty Shades of Gray, is it?

I also have a few ideas of my own for the blog entry sections that involve CSS3 such as multiple backgrounds, drop shadows etc. To support all devices, I'm following the programming technique of progressive enhancement, that is, to design for the lowest common denominator first, and have all the extra visual punch be icing on the cake. When I get a draft finished, I'll share it with you. But thanks for giving me the start I needed.

[Toxaris]

Just be aware that the core of ePUB2 is CSS2.1, or at least a subset.

[Tex2002ans]

Originally Posted by Morganucopia

Thanks again Tex2002ans! The code and screenshots you supplied were enormously helpful. I really appreciate it.

No problem. The more high quality ebooks the world can get, the better.

If you need anything else, feel free to PM/email me. As I said, I am open to sharing anything (PDF -> EPUB conversion tips, resources, image compression, EPUBs I have worked on, Regex I use, etc. etc.)

My personal philosophy with EPUBs though isn't getting them really fancy looking... the goal is to have extremely accurate conversions, plus very clean, minimalist code. This will make conversion to future formats much easier (very long-term mindset).

Originally Posted by Morganucopia

Good luck chipping away at your slow burn EPUB project; Austrian Economics isn't exactly Fifty Shades of Gray, is it?

I am constantly chipping away at books. (2.5 books converted in the past 3 days, just spent probably 12 hours today on this 3rd book).

One of these days I really should take a break from conversion and get some coding done. I have some really good ideas which would speed up EPUB conversions. More productivity means more books, more books means more knowledge spread, more knowledge spread means.... well you get the picture!

As to the "Fifty Shades of Gray".... Economics is actually useful, and not some fad which will disappear in a few months/years.

Originally Posted by Morganucopia

When I get a draft finished, I'll share it with you. But thanks for giving me the start I needed.

Fantastic.

CSS3.... I personally am not one for all the fanciness (just getting the information/ideas/story across is my goal). I do not care if the border is sharp or rounded.... or if there is a shadow behind the text.

Perhaps you might also be able to check out Zen Garden and gather something from the CSS there:

http://www.csszengarden.com/

Although as Toxaris said, just be warned that EPUB is a subset of CSS2.1. Make sure to test everything on your actual device (Kobo Mini?), and/or ADE: https://www.adobe.com/products/digital-editions.html

Another idea is... taking apart EPUBs (like how I found that box CSS). Usually these publishers also have their generic template CSS with a TON of styles they don't use. You could always apply those styles to see what they do.

Definitely post whatever you come up with on the forums, there are lots of lurkers which don't post in topics, but benefit greatly from the knowledge. I have absorbed a lot since being on these forums, and even those who do searches in the future might stumble upon your topic and learn something.

Also, sharing code gets people to give their own examples/input... which will make your code even better.

[Jellby]

Originally Posted by Tex2002ans

Perhaps you might also be able to check out Zen Garden and gather something from the CSS there:

http://www.csszengarden.com/

There's the ePub Zen Garden too

[Tex2002ans]

Originally Posted by Jellby

There's the ePub Zen Garden too

Wow this is great, I will have to take a look through this and gather some CSS.