View Full Version : columns in ePubs


dezignlady
06-03-2011, 07:10 PM
I am new the forum, and relatively new to ePubs. I've successfully generated a couple of them thanks to Anne-Marie and her video on Lynda.com but I have just been presented with an opportunity to work on another one, with possibly several more to follow. The challenge, at least to me, is the books require a column in the outside margin where small study notes will accompany each paragraph. These are simple books otherwise so setting them shouldn't be too hard, I'm just not sure what would be the best approach in InDesign.
I've considered an anchored object, but then does the CSS recognize and honor the positioning or do I have edit that?
A table? but there are about 100 pages, albeit short pages, that would have to be on continuous table.
I am looking for suggestions and options so that I can figure a quote to convert this book.
thanks all.

Jellby
06-04-2011, 03:47 AM
Consider that an ebook might be read in a device with a narrow screen; even if the screen is not particularly narrow, a user might set a quite large font size, making the screen narrow in relation to the font size. In such a screen, I don't think having columns is desirable or nice. My advice: try to find a different way to present the information. Maybe as foot/endnotes with links, maybe as boxes between paragraphs...

HarryT
06-04-2011, 03:59 AM
Jelly is absolutely right; this style of presentation just doesn't work on the small screen of an ebook reader.

dezignlady
06-04-2011, 08:18 AM
Well the printed book is currently between the size of an iPad and a Kindle and the text is already 12 pt. This being academia they are pretty set on it appearing with the study notes in the margin. Is there a way to effectively do this?

Jellby
06-04-2011, 08:55 AM
Well the printed book is currently between the size of an iPad and a Kindle and the text is already 12 pt.

So, it's larger than most readers (which are Kindle-size or smaller), and has a font that many users with sight problems (and needing reading glasses is already a "problem") would find small.

This being academia they are pretty set on it appearing with the study notes in the margin. Is there a way to effectively do this?

So they want it to look exactly like a printed book? Then make a PDF.

You could put the sidenotes in boxes with "float: left" (or right), but it's going to look pretty crappy in many configurations.

HarryT
06-04-2011, 09:14 AM
I think personally that linked end-notes would work a heck of a lot better. Surely the goal is to produce something that works well as an e-book, not slavishly adhere to the appearance of the printed book?

dezignlady
06-04-2011, 09:31 AM
Well sometimes the clients want what the clients want. These notes need to appear next to the paragraph as a study note, having them at the end would mean the reader would probably not read them, having them interrupt the text flow would make it hard to read. Since this is college and post-graduate readers the font size doesn't have to be huge, it was just the choice of the publisher 11 years ago. Since a table is acceptable to the HTML/CSS, and since the chapters are not terribly long I am hoping that might be the best option at the moment to go to ePub, since, if I understand all this correctly, a PDF is not an option for Kindle or Nook.

HarryT
06-04-2011, 09:34 AM
PDF works absolutely fine for the Kindle and nook, provided that it's correctly sized for the 6" screen. The issue arises when people try to read PDFs formatted for an A4/Letter page on a 6" screen - that doesn't work at all well. If the PDF is designed for the 6" screen, it will look good. The issue with PDF on the Kindle is that hyperlinks don't work, dictionary lookup doesn't work, and you can't add annotations.

But I'm a little puzzled by your mention of the Kindle. Weren't we discussing an ePub book? The Kindle doesn't use ePub.

dezignlady
06-04-2011, 09:39 AM
PDF works absolutely fine for the Kindle and nook, provided that it's correctly sized for the 6" screen. The issue arises when people try to read PDFs formatted for an A4/Letter page on a 6" screen - that doesn't work at all well. If the PDF is designed for the 6" screen, it will look good. The issue with PDF on the Kindle is that hyperlinks don't work, dictionary lookup doesn't work, and you can't add annotations.

Well that is good to know, I have been reading otherwise. I plan on reformatting the book to a small screen size since it's a complete redo of an old Pagemaker file. So what I might do is test the table theory and one as a PDF. For this publication there aren't any links but the dictionary look-up might be a problem. They have quite a few older documents like this that they would like to make available for mobile reading so just trying to hammer out the best and most cost-effective approach.
thanks

Jellby
06-04-2011, 12:21 PM
Can we see a sample page of what kind of information there is in the sidenotes? Would it really be that much of a problem if the sidenotes were presented before the paragraph, in a smaller font, with a frame, and with a generous left margin, for instance?

Sometimes the clients want what the clients want, sure, but part of your work is explaining to the clients why what they want might not be a good idea. If you were an architect and a client asked you for something unreasonable (insecure, too expensive, too hot in summer, against local law, hard to maintain...) you'd be expected to explain it to your client, and make sure it's what he really wants, no matter what.

In this case, an ePUB book is not something that will be read on a Nook or iPad and that's all. No, it's something that someone, somewhere, will want to read on a smartphone, someone else will need to read with a 24pt font, and another person will need a text-to-speech system to read it. The best solution for a printed book is often not the best solution for an ebook.

EowynCarter
06-04-2011, 12:32 PM
If have a pdf like that, with a wide margin and notes in it.
It's just awful to read on an e-reader because the margin takes all the much needed reading space.

Isn't there footnotes when using ePub ?

HarryT
06-04-2011, 12:47 PM
No, ePub doesn't support footnotes. Ones uses endnotes instead.

DaleDe
06-04-2011, 02:28 PM
I agree with Jellby. This seems a perfect use for sidenote that float beside the paragraph. They will be sized to take up the least space and should meet the clients need. I would suggest a few sample pages using sidenotes be presented to the client. This is what they are designed to do after all.

Dale

HarryT
06-04-2011, 04:25 PM
I don't think that Jellby was suggesting that, Dale, unless I've misunderstood.

DaleDe
06-04-2011, 07:10 PM
I don't think that Jellby was suggesting that, Dale, unless I've misunderstood.

He said: "You could put the sidenotes in boxes with "float: left" (or right), but it's going to look pretty crappy in many configurations."

I am not so sure it would look crappy but it may be that some of the implementations wouldn't support this part of the standard. It seems to be little used. I think the only way to see how it looks is to give it a try and then evaluate. Personally I would like to see a sample of a few of these textbook pages done this way.

Dale

HarryT
06-05-2011, 02:34 AM
I'm sure it would look fine on a large screen, but on a small-screen device, such as the iPhone I'm using to write this message, it's going to be pretty much unreadable.

dezignlady
06-06-2011, 07:40 AM
Jelby and all,

I have attached a few pages of the sample file I have, the conversion and font change have moved a few things around but generally there is a margin note for each paragraph. Since this is a study guide book book it's important that the note be with each paragraph. As you can see they are generally small. I have had the conversation with the client about view on a small device or smartphone and they are convinced this is not an issue for this application, they are targeting the read to the larger format of the Nook or iPad.

I've been in the design biz for close to 30 years so I am very familiar with the process of trying to convince a client that their request might mot be the best option, but I also teach on a college level and I know a bit about how academia thinks, so I am trying to find an acceptable middle ground here.

I was wondering if one of two options will work?
1. Could I do each chapter in a two column table with the left hand column being narrow, an inch or less. I would have to make each paragraph a row, but a table does translate correctly in the ePub format, doesn't it?

2. Could each note be an anchored frame that breaks the beginning of each paragraph and hangs, so much like a first word Drop Cap that is hanging. So here the left margin would be wider but not as much as option 1. I see this as the same as inserting a small image and wrapping text around it, so assume it would work as well.

Thanks for all your input.
karen


Can we see a sample page of what kind of information there is in the sidenotes? Would it really be that much of a problem if the sidenotes were presented before the paragraph, in a smaller font, with a frame, and with a generous left margin, for instance?

Sometimes the clients want what the clients want, sure, but part of your work is explaining to the clients why what they want might not be a good idea. If you were an architect and a client asked you for something unreasonable (insecure, too expensive, too hot in summer, against local law, hard to maintain...) you'd be expected to explain it to your client, and make sure it's what he really wants, no matter what.

In this case, an ePUB book is not something that will be read on a Nook or iPad and that's all. No, it's something that someone, somewhere, will want to read on a smartphone, someone else will need to read with a 24pt font, and another person will need a text-to-speech system to read it. The best solution for a printed book is often not the best solution for an ebook.

Jellby
06-06-2011, 08:37 AM
Tables are fine in ePub, but most readers will do funny things with them, they are particularly problematic in relation to pagebreaks. I don't think a table is the solution here

[quote]2. Could each note be an anchored frame that breaks the beginning of each paragraph and hangs, so much like a first word Drop Cap that is hanging. So here the left margin would be wider but not as much as option 1. I see this as the same as inserting a small image and wrapping text around it, so assume it would work as well.

This could work, and you can place the notes mid-paragraph too. You just have to put them in a box with an explicit width and "float: right". You can't use a <div>, though, because those are forbidden inside paragraphs (<p>). Try something like this:

<p>The three characteristics just mentioned fix the aims and
methods of instruction and discipline. <span class="sidenote">The main
objective of traditional education is to prepare the young for future
responsibilities.</span>The main purpose or objective is to prepare the
young for future responsibilities and for success in life, by means of
acquisition of the organized bodies of information and prepared forms of
skill which comprehend the material of instruction.</p>

with:

span.sidenote {
display: block;
float: right;
width: 40%;
margin: 0.5em 0 0.5em 0.5em;
font-size: 85%;
border: solid thin black;
}

dezignlady
06-06-2011, 09:05 AM
Tables are fine in ePub, but most readers will do funny things with them, they are particularly problematic in relation to pagebreaks. I don't think a table is the solution here

Thanks, this is good to know!

This could work, and you can place the notes mid-paragraph too. You just have to put them in a box with an explicit width and "float: right". You can't use a <div>, though, because those are forbidden inside paragraphs (<p>). Try something like this:

Ok this is the approach I will give. I have to figure a quote first so will prep a pdf to show them the approach just to make sure it is palatable. It will actually take less time to do that then the table routine!

One other general question.
The other book that I worked on I just used the existing file to convert but since this is getting dumped into InDesign from Pagemaker it's a total makeover so was thinking I would just set up for ePub export. Is there an optimum setup for ePub that I should start with?

thanks so much for your help.
karen

sed91
10-27-2011, 12:54 PM
Hello everyone, I'm new here and I have a similar problem/question as dezignlady.

I'm a Classics student currently in a digital methods class in university and one of the projects that we're currently working on is creating an online library based off of the Perseus Digital Library, where we are taking Ancient Greek and Latin texts, along with their English translations, and we're converting them into epub documents so that they can be read on ebooks like the Kobo. This is so that we can have a whole library of sources accessible to read on ebooks so Classics scholars can have all materials in one place and can be easily portable.

We have succeeded in converting TEI XML documents into epub and can open them up through calibre, but what I am having trouble with is that we want to try and have the English translation on the page with it's original Greek/Latin work, via-a-vis page columns. I've been trying to figure out how to do it and am not having any luck on my own.

Does anyone have any helpful suggestions, or maybe even an example for how to format two works in columns for epub?

DaleDe
10-27-2011, 11:27 PM
There is a CSS two column feature but that writes column one and then writes column two, more like two pages side by side with one following the other.

The only way to make two columns that track each other is a two column table. However, many ePub readers don't handle tables that span pages very well so the likely answer is, test it on the target reader, or use lots of tables so they won't span pages.

Dale

nrapallo
10-27-2011, 11:55 PM
Try using margins like the <dt> and <dd> constructs used in this post (http://www.mobileread.com/forums/showthread.php?p=1468813#post1468813).

Just make the widths equal and group the translated text with the english text in the <dt> and the original greek/latin in the <dd> or vice versa. I think it may suit your needs, so just experiment.

EDIT: Try something like this (just change the file extension to .htm and create an ebook)