ePub with quite long table

[jouslain]

I'm trying to create an ePub file using Sigil/Calibre epub editor.

The content I want to put in my file includes some table and content in these table are quite long (honestly, sometimes in one row). It's longer than "1 page" in my ebook reader (Sony PRS-T2)

The problem is once the table is long, I won't be able to read the content in the table that is below the lower edge of the screen (Turning to the next page skip all the remaining parts of the table)

Is there anyway to force pagebreak within a table (even within a table row) in ePub?

Or is there anyway to create a multiple-column-like epub? (I've tried <div> + stylesheet but vertical alignment not seem to be working)

[Doitsu]

Originally Posted by jouslain

Or is there anyway to create a multiple-column-like epub? (I've tried <div> + stylesheet but vertical alignment not seem to be working)

You can define a multi-column layout for ADE/RMSDK based reading apps via an XPGT file. While this method should work for your Sony reading app, it obviously won't work with other non-ADE readers.

Please find attached the .xpgt file from the ADE Best Practices Guide ePub file, which many publishers include in their ePub books.

[odedta]

Of course you can make a multi column epub! the problems are:
1. multi column is a css3 feature which means that is only supported in epub 3, which means very few devices will be able to show it correctly.
2. eReaders screens are usually quite small so multi column data output is not a good idea.

Did you try to create a div inside that row and force a page break using page-break-after rule?

There is no great solution for this unfortunately, you can also use an image that contains the entire image instead of an actual table, split it to fit most screens. though you will lose searching capabilities.

Doitsu gave you a solution that will work for some devices as well.

It really depends which epub version you're making and to which target devices.

[mrmikel]

Unfortunately, the only real solution is to change the content so it doesn't spill out over the end of the page. This might be done by making more than one table with a summary table and a breakdown of detail in a following table, or might be handled through endnotes, or if it is about various regions, break it into regions.

If you are trying to do a book that already has tables that are like this, images are probably the only solution, but the type will be small.

Tables are a real sore spot in epubs with problems you have encountered in layout, but also in support by various devices.

[jouslain]

Thank you all you guys,

The table I'm trying to insert is the comparison between translated language so I'd like them to be compared side-by-side.

Now I try using

<div> +
#column1-3 { width: 33%; margin-left: 0%; top: 5em; position:absolute }
#column2-3 { width: 33%; margin-left: 33%; top: 5em; position:absolute }
#column3-3 { width: 33%; margin-left: 66%; top: 5em; position:absolute }

In computer it look like this, (which is perfect)


[Click to enlarge.]


But when it comes to Reader (Sony PRS-T2), it turns to be





So I try,

<div> +
#column1-3 {float: left; width: 33%;}
#column2-3 {float: right; width: 33%}
#column3-3 { float: right; width: 30%; right-margin: 33%;}

The column seems to be all right, but I can't scroll to the content below the screen (just like what happened when using <table>, and I wonder why the <div> tag change their behavior)


[Click to enlarge.]


Anyway thanks all you guys: Doitsu, odedta, mrmikel

[mrmikel]

Of course you can't scroll. E-ink readers are page based. It is not continuous like other devices. It will reformat based on text size, etc., but it still by the page.

Maybe I don't understand what is going on so well, but don't you have 130% of the screen width allocated?

[Doitsu]

Wouldn't it make more sense to break up the table into <divs> containing three paragraphs (one paragraph each for Romaji, Japanese and English)?

I'd simply copy the table as a tab-delimited text file to the clipboard, paste it into a RegEx-capable editor (e.g. Notepad++) and use the following parameters to transform it:

Find what:^(.*?)\t(.*?)\t(.*?)$
Replace with:<div><p>\1</p><p>\2</p><p>\3</p></div>

[odedta]

Originally Posted by Doitsu

Wouldn't it make more sense to break up the table into <divs> containing three paragraphs (one paragraph each for Romaji, Japanese and English)?

I'd simply copy the table as a tab-delimited text file to the clipboard, paste it into a RegEx-capable editor (e.g. Notepad++) and use the following parameters to transform it:

Find what:^(.*?)\t(.*?)\t(.*?)$
Replace with:<div><p>\1</p><p>\2</p><p>\3</p></div>

+1 this seems like the most logical way, remove marings of divs so they look like a table.

This comes as a question: I know that a able is reflowable so all you need is the cells width, in that case what is the point of the

float:left
and
margin-right

rules you added?

[jouslain]

Originally Posted by Doitsu

Wouldn't it make more sense to break up the table into <divs> containing three paragraphs (one paragraph each for Romaji, Japanese and English)?

I'd simply copy the table as a tab-delimited text file to the clipboard, paste it into a RegEx-capable editor (e.g. Notepad++) and use the following parameters to transform it:

Find what:^(.*?)\t(.*?)\t(.*?)$
Replace with:<div><p>\1</p><p>\2</p><p>\3</p></div>

The photographs I posted were done using <div>, How can I make it display side-by-side, please?

This comes as a question: I know that a able is reflowable so all you need is the cells width, in that case what is the point of the

rules you added?

I've tried but it appeared like a table (It can't view the below contents)

[Doitsu]

Originally Posted by jouslain

The photographs I posted were done using <div>, How can I make it display side-by-side, please?

I didn't suggest to display them side-by-side; I suggested to display them one after another.

[GMcG]

Couldn't you make each line a separate table with one row and three cells?

In html it would be like

<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="33%"><p>itsuno hi ka....</p></td>
<td width="33%"><p>1 2 3 4...</p></td>
<td width="33%"><p>One of these days ....</p></td>
</tr>
</table>
</center></div>
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="33%"><p>furu</p></td>
<td width="33%">3 4 5 6 ...</p></td>
<td width="33%">meet again I will..</p></td>
</tr>
</table>
</center></div>
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="33%"><p>kimi no egao ...</p></td>
<td width="33%"><p>4 5 6 ...</p></td>
<td width="33%"><p>your smiling face...</p></td>
</tr>
</table>
</center></div>

and so on. But the code would increase enormously.

George

[mrmikel]

If you have tables you have lots of code, which is one reason I am not over fond of them.

[JSWolf]

What works best is to make each line a separate row and it will split at a row to flow onto the next screen page.