Newspaper columns

[Karellen]

A novel I am reading has a couple of chapters as newspaper columns.

I have tried both <tables> and columns created with <div> but both methods chop off the bottom of the table.

Reading the wiki... https://wiki.mobileread.com/wiki/Table#long_columns
It states...

One work around to to create artificial cells with no visible border to mark the row. The eReader can then switch pages at the invisible row separator.

Unfortunately I don't know what that means.

What is an artificial cell with no visible border? And how do you create it?

[DNSB]

Have you taken a look at the book you are reading to see how the columns were created there?

[Karellen]

Originally Posted by DNSB

Have you taken a look at the book you are reading to see how the columns were created there?

There weren't any. The pbook has columns. The ebook has no columns.

[Turtle91]

I think they are talking about empty cells <tr><td></td></tr> interspersed in the table to allow splitting. If I were to use that technique I would give the empty tr a class with a height of zero or something so it doesn’t look wonky.

However….

I’ve tried doing the two-column thing and never got it to work reliably. Divs and/or tables worked fine on a LARGE display but failed miserably on a phone. My recommendation would be to use queries in your css. If the device supports multi-columns css and has a big enough display use the columns css. Otherwise, just use css to style it how you wish, like a newspaper article for example, (font, alignment, indent, etc. ) but only a single column. The user still gets the feel of reading the news and can actually read it.

EDIT:

Here is an example of what I was talking about. Yes, Jon, this is an example of the css...we know you would change it to something else...

CSS:
div.news         {margin:2em 1em}
div.news p       {font-family:serif; font-size:.8em; text-align:justify; text-indent:0}
div.news p.title {font-weight:bold; text-align:center; font-variant:small-caps}

@supports ("column-count") {
   @media (min-width=800px) {
    div.news {column-count: 2;
              column-gap: 10px;
              column-rule: 1px solid black}

    div.news p.title {column-span: all}
   }
}

HTML:
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>

<div class="news">
   <p class="title">Title of the Article</p>
   <p>This is a news paragraph.</p>
   <p>This is a news paragraph.</p>
   <p>This is a news paragraph.</p>
   <p>This is a news paragraph.</p>
</div>

<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>

Depending on the device (eg. OLD ADE) you may need to put your queries on a separate css page. Some of those devices ignore the entire css page if it doesn't like anything on it...which is against the standard. In that case make sure you link the queries page AFTER the normal css... so it has higher priority.

[RbnJrg]

LoIn the past I wrote many posts about how to deal with kind of layout, even fake columns with a table and its issues under ADE. Do a search in Google with

RbnJrg column site:mobileread.com

Here you have a few links:

https://www.mobileread.com/forums/sh...d.php?t=223728

https://www.mobileread.com/forums/sh...d.php?t=284691

https://www.mobileread.com/forums/sh...03#post4176903

[Quoth]

Columns only sometimes works no matter what you do. I've edited some PD ebooks to have the columns sequential in a logical fashion. Slavishly copying more complex paper layouts is pointless unless everyone is using 10" screens and even then it can fail. Unless it's an actual table it works better to make columns just be regular sequential paragraphs in the order they will be read.

[Karellen]

Originally Posted by Turtle91

I think they are talking about empty cells <tr><td></td></tr> interspersed in the table to allow splitting. If I were to use that technique I would give the empty tr a class with a height of zero or something so it doesn’t look wonky.

Thanks. I was having trouble with that terminology as I hadn't come across anything described that way.

Originally Posted by Turtle91

I’ve tried doing the two-column thing and never got it to work reliably. Divs and/or tables worked fine on a LARGE display but failed miserably on a phone.

Yep. It works fine when the ereader can scroll the page, like Calibre Viewer, then the entire column shows, no problems. But then on the Kobo, which is page flips, the text is lost.

How is this not considered a major bug. Anytime an ereader fails to display text, then it needs to be treated as a bug.

Originally Posted by Turtle91

My recommendation would be to use queries in your css. If the device supports multi-columns css and has a big enough display use the columns css. Otherwise, just use css to style it how you wish, like a newspaper article for example, (font, alignment, indent, etc. ) but only a single column. The user still gets the feel of reading the news and can actually read it.

That is what I have decided to do. Ignore the two columns and style it as a single narrow blockquote, probably with a different font.

The entire pbook is a bit weird. I think too many liberties were taken with styling and it is a real jumble.
- newspaper columns.
- chapters in monospace font
- staggered paragraphs - narrow left justified, followed by narrow centered, followed by narrow right justified paragraphs.
- paragraphs that are boxed
- paragraph in sans

I was able to replicate all the others styles, but the newspaper styling had me stumped.

Originally Posted by Turtle91

EDIT:

Here is an example of what I was talking about. Yes, Jon, this is an example of the css...we know you would change it to something else...

Thanks, I'll give it a try

Originally Posted by RbnJrg

LoIn the past I wrote many posts about how to deal with kind of layout, even fake columns with a table and its issues under ADE. Do a search in Google with

Thanks @RbnJrg
I actually came across your second link and tried the code there. It worked and displayed the entire text but, because the paragraphs are not of equal size between column 1 & 2, there were too many gaps in each column and didn't look nice.

Originally Posted by Quoth

Columns only sometimes works no matter what you do. I've edited some PD ebooks to have the columns sequential in a logical fashion. Slavishly copying more complex paper layouts is pointless unless everyone is using 10" screens and even then it can fail. Unless it's an actual table it works better to make columns just be regular sequential paragraphs in the order they will be read.

Yes, I've decided to ignore the double columns and style a single blockquote for those sections. I've already spent quite a lot of time on it, and don't really want to force something to work that obviously doesn't work.
Thanks.

[DNSB]

Originally Posted by Karellen

How is this not considered a major bug. Anytime an ereader fails to display text, then it needs to be treated as a bug.

For what is is worth, since you state this is a bug, please point out where in the ePub specification in any of it's flavours does it specify displaying text in multiple columns the way that you appear to want.

As part of one project, I spend quite a bit of time playing with the column count (column-count=2, etc.) and, the results were not satisfying. I did find an epub.js implementation in a demo ePub3 ebook that worked quite well but the number of ereaders/apps that supported it could be counted on the toes of one foot.

When I tried to use a list in two columns, what I wanted was page 1 to show:

AA  |  AC
AB  |  AD

Whereas what I got was:

AA  |  AN
AB  |  AO

Please not that this displayed all the text, just not in the order I was expecting.

If you want multiple columns, the only reliable way I've found to have multiple columns emulate the look of a physical book, is to create a fixed layout ebook (ePub3 FLO, PDF, whatever).

[JSWolf]

Originally Posted by Karellen

A novel I am reading has a couple of chapters as newspaper columns.

I have tried both <tables> and columns created with <div> but both methods chop off the bottom of the table.

Reading the wiki... https://wiki.mobileread.com/wiki/Table#long_columns
It states...


Unfortunately I don't know what that means.

What is an artificial cell with no visible border? And how do you create it?

As long as you read with a webkit based reader such as KePub on your Libra 2, it's easy.

CSS

.column {
-webkit-column-count: 2;
}

HTML

<div class-"column">
<p><p>“He’s wearing a force field suit,” Renne exclaimed. “They can’t penetrate from that range.”</p>
<p>Hogan opened the general communications icon in his virtual vision. “All squads close in on the target. Pursue until he’s in open ground, then open fire. Overload that force field.” As he watched the squads putting the new tactic into play, screens on every console started to flicker. In his virtual vision, red warning graphics sprang up across his interface with the station’s network.</p>
<p>“Kaos software has been released into the local network nodes,” his e-butler reported. “The controlling RI is attempting to clear it.”</p>
</div>

[Karellen]

Originally Posted by JSWolf

As long as you read with a webkit based reader such as KePub on your Libra 2, it's easy.

Thanks @jswolf.
I'm a couple of books further on now, so I won't be revisiting it anytime soon. Just opted for a single narrowish blockquote to make that portion distinct from the rest of the chapter.

Originally Posted by DNSB

For what is is worth, since you state this is a bug, please point out where in the ePub specification in any of it's flavours does it specify displaying text in multiple columns the way that you appear to want.

Well, you know I can't. But maybe you can point me to where in the epub spec it specifys a character limit for a table cell. And when you exceed that limit, then text is discarded.

[JSWolf]

The only thing you cannot do with the code I posted is have specific text in the columns.

[DNSB]

Originally Posted by Karellen

Well, you know I can't. But maybe you can point me to where in the epub spec it specifys a character limit for a table cell. And when you exceed that limit, then text is discarded.

There is no real character limit for a table cell. OTOH, if you have more characters in a table cell than can be displayed in the cell width, where would you expect the excess characters to be displayed?

[Karellen]

Originally Posted by DNSB

OTOH, if you have more characters in a table cell than can be displayed in the cell width, where would you expect the excess characters to be displayed?

Line wrap??

[DNSB]

Originally Posted by Karellen

Line wrap??

Most tables have a fixed height/width.

[Quoth]

Originally Posted by DNSB

There is no real character limit for a table cell. OTOH, if you have more characters in a table cell than can be displayed in the cell width, where would you expect the excess characters to be displayed?

The default is to crop, not wrap. It says that somewhere.
The epub2 has a subset of what works on websites, even if the website has no javascript etc and is just vanilla HTML5 and CSS3.