Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 07-14-2013, 02:53 PM   #1
Morganucopia
Bookaholic
Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.
 
Posts: 24
Karma: 11110
Join Date: Apr 2013
Location: Canada
Device: Kobo Mini
EPUB Formatting Challenge: Embedding blog posts in the flow of story text

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!
Morganucopia is offline   Reply With Quote
Old 07-14-2013, 02:58 PM   #2
Notjohn
mostly an observer
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 1,515
Karma: 987654
Join Date: Dec 2012
Device: Kindle
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).
Notjohn is offline   Reply With Quote
Old 07-14-2013, 03:59 PM   #3
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 27,463
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
Quote:
Originally Posted by Notjohn View Post
I use a monospace font called Courier for this purpose.
I don't even use a specific font name here. I just use:
Code:
font-family: monospace;
so that whatever the default (or user-defined) monospaced font for the device/app will be used.
DiapDealer is offline   Reply With Quote
Old 07-14-2013, 05:48 PM   #4
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Morganucopia View Post
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.

Last edited by RbnJrg; 07-14-2013 at 05:52 PM.
RbnJrg is offline   Reply With Quote
Old 07-17-2013, 08:34 PM   #5
Tex2002ans
Wizard
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
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.
Attached Thumbnails
Click image for larger version

Name:	SampleBlog.png
Views:	472
Size:	23.1 KB
ID:	108336  
Attached Files
File Type: epub SampleBlogPost.epub (2.3 KB, 271 views)
Tex2002ans is offline   Reply With Quote
Old 07-19-2013, 04:38 PM   #6
Morganucopia
Bookaholic
Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.
 
Posts: 24
Karma: 11110
Join Date: Apr 2013
Location: Canada
Device: Kobo Mini
Quote:
Originally Posted by Notjohn View Post
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 is offline   Reply With Quote
Old 07-19-2013, 04:42 PM   #7
Morganucopia
Bookaholic
Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.
 
Posts: 24
Karma: 11110
Join Date: Apr 2013
Location: Canada
Device: Kobo Mini
Quote:
Originally Posted by DiapDealer View Post
I don't even use a specific font name here. I just use:
Code:
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 is offline   Reply With Quote
Old 07-19-2013, 05:41 PM   #8
Morganucopia
Bookaholic
Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.
 
Posts: 24
Karma: 11110
Join Date: Apr 2013
Location: Canada
Device: Kobo Mini
Quote:
Originally Posted by RbnJrg View Post
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 is offline   Reply With Quote
Old 07-19-2013, 05:44 PM   #9
Morganucopia
Bookaholic
Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.
 
Posts: 24
Karma: 11110
Join Date: Apr 2013
Location: Canada
Device: Kobo Mini
Quote:
Originally Posted by Tex2002ans View Post
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.
Morganucopia is offline   Reply With Quote
Old 07-21-2013, 06:45 PM   #10
Tex2002ans
Wizard
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
Quote:
Originally Posted by Morganucopia View Post
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).
Attached Thumbnails
Click image for larger version

Name:	BeforePost.png
Views:	384
Size:	53.3 KB
ID:	108443   Click image for larger version

Name:	AfterPost.png
Views:	391
Size:	53.3 KB
ID:	108444  

Last edited by Tex2002ans; 07-21-2013 at 07:14 PM.
Tex2002ans is offline   Reply With Quote
Old 07-28-2013, 03:48 PM   #11
Morganucopia
Bookaholic
Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.Morganucopia can tame squirrels without the assistance of a chair or a whip.
 
Posts: 24
Karma: 11110
Join Date: Apr 2013
Location: Canada
Device: Kobo Mini
Quote:
Originally Posted by Tex2002ans View Post
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.
Morganucopia is offline   Reply With Quote
Old 07-28-2013, 04:51 PM   #12
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
Just be aware that the core of ePUB2 is CSS2.1, or at least a subset.
Toxaris is offline   Reply With Quote
Old 07-29-2013, 04:47 AM   #13
Tex2002ans
Wizard
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
Quote:
Originally Posted by Morganucopia View Post
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).

Quote:
Originally Posted by Morganucopia View Post
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.

Quote:
Originally Posted by Morganucopia View Post
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.
Tex2002ans is offline   Reply With Quote
Old 07-29-2013, 07:15 AM   #14
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by Tex2002ans View Post
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
Jellby is offline   Reply With Quote
Old 07-29-2013, 04:07 PM   #15
Tex2002ans
Wizard
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
Quote:
Originally Posted by Jellby View Post
There's the ePub Zen Garden too
Wow this is great, I will have to take a look through this and gather some CSS.
Tex2002ans is offline   Reply With Quote
Reply

Tags
blogs, embedding, epub, formatting

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Text Flow for Nook for PC - wth? dvrader Nook Developer's Corner 0 12-19-2012 12:22 PM
fb2 to epub wrong text formatting rulet Conversion 3 03-30-2012 02:09 PM
Blog posts about content server and other features anoved Calibre 0 02-01-2012 03:21 PM
Free (Kindle) Paper Flow 28 Day Challenge by Mary Anne Bennie and Brigitte Hin arcadata Deals and Resources (No Self-Promotion or Affiliate Links) 1 08-25-2011 06:56 PM
PRS-350 Landscape mode text flow issue skypilotpete Sony Reader 2 03-25-2011 03:35 AM


All times are GMT -4. The time now is 02:31 AM.


MobileRead.com is a privately owned, operated and funded community.