Help! Advice on discography layout...

[IvorT]

Over the last 30 or so years I've helped a mate out with DTP on several of his musical encyclopedia's. For his current project he's wanting to go down the Ebook route rather than print and I'm struggling to find a way to approximate the layout we've used for the discographical & band personnel listings.

Is there anyway to do this? I've tried tables & CSS but haven't found a solution that I'm happy with.

Attached is a screen grab extract showing the kind of layout we've used, although for the Ebook it'll be one-column rather than two...

Any suggestions much appreciated.
Thanks
Ivor

[Karellen]

I would also use tables, as you have done. Maybe some parts you could style with larger indents?

What didn't you like about your attempt with the tables? Maybe you can post the code you used and there may be a way to improve it.

[Sarmat89]

In E-books, you don't need to cram the stuff into the page. Use vertical space, it is limitless.

[Aleron Ives]

Yes, the way you have information aligned in rows won't work on an e-book. If the reader increases the font size too much or simply has a small screen, the rows will be forced to wrap onto new lines, thus breaking your table layout. Unless you want to use PDF to prevent the text from reflowing (boo! hiss!), you'll need a new layout that doesn't rely on fixed-width tables.

[IvorT]

Originally Posted by Karellen

What didn't you like about your attempt with the tables? Maybe you can post the code you used and there may be a way to improve it.

Thanks - I had another go with tables & managed to get something which is more promising... Part of the problem I had was due to my initial attempt using Scrivener to import an RTF file & then Calibre to add HTML tables. I'd missed some of the CSS formatting that had been automatically added & that was preventing me from seeing any changes I'd made. e.g. a border setting meant that tables had a persistant black border on the bottom edge.

(I've now discovered Sigil, which I'm finding much more straight forward)

I'm not sure on the etiquette of posting code, but have attached a test epub with two different table layouts. At the moment I'm leaning towards the "Alternate" layout at the end of the example band entry.

So far I've only tested with Kindle Previewer, Calibre e-book viewer, and Icecream.

Many thanks
Ivor

[Quoth]

Use LO Writer (edit in ODT) and extra Save As in docx for Calibre. The styles to CSS is 1:1 and accurate. Only some image CSS needs edited where you for example want image-height: auto; image-width: 90%; (or whatever).

Test also on Lithium on a 6″ or less Android phone, or iOS equivalent if you don't have small eink ereaders.

Scrivener and Apple Pages are more suited to paper. LO Writer works well for paper or epub (via docx and Calibre). I always make a new copy of final proofed version for epub (and thus Kindle) and edit styles for paper. Then PDF direct export. Have Style & Outline windows open. No direct formatting except italic, superscript and subscript (inside a paragraph).

[IvorT]

Thanks all... I thought I was getting somewhere. @Quoth's recommendation to test on Lithium/small screen was useful & I added a media query to reduce the font size in the tables. However, when I test on both a large iPad & small iPhone most of the CSS looks like it is ignored & the result is no good. The attached shows a sample displayed in an my wife's old Android phone, iPad & Kindle, delivered using the Kindle app & 'send to Kindle' to website.
Is there any way to solve the problem on Apple devices?

[Quoth]

You can't make it work by reducing the font! One of the best features of ebooks is the user's ability to change font size.

You need to make information be in sequential blocks.

The iOS (iPad and iPhone) rendering depends almost entirely which app is used.

[IvorT]

In the media query for small screens I increased the % column width & reduced the font % size, which improved the overall look.

As a text book, it won't be read sequentially but the discography/personnel details need to have a clear layout.

I've now tested the book using Apple books on the ipad/iphone & they're acceptable but with 'Kindle for ios' (using Send to Kindle webpage & download app) I can't even get vertical space to show between the tables. I'm not sure if this is a problem with the delivery method I'm using, or a limitation of 'Kindle for ios'. So far I've tried:-

• specifying 'margin-top' / 'margin-bottom' separately in the CSS
• adding "!important" to the CSS
• using em & px spacing
• placing tables inside div tags with the CSS class applied to the div
• blank paragraphs with non-breaking space between tables

If I apply the CSS class to a para tag or a div tag own, then 'Kindle for ios' displays the vertical space correctly...

There's obviously other problems with the tables in 'Kindle for ios' but getting a space between them is pretty basic. Not sure what to do from here?

I've checked the book using Calibre's 'Check Book' option; Kindle Previewer's 'Quality Check'; ePubcheck cmd line; and W3CSS validation...

Thanks!
Ivor

[IvorT]

Hmm... this doesn't bode well:
https://www.jutoh.com/bookv2/html/section-0018.html

"Kindle for iOS is less capable when rendering tables than other KF8 Kindle apps and devices. Cell widths cannot be specified as percentages, and the table width attribute is not recognised. However, it does recognise the min-width attribute, so when generating Mobipocket files, Jutoh adds a min-width attribute to the table."

[Aleron Ives]

You have two options:

1) Keep the table layout you're used to and use PDF to set the table layout in stone, the way you would on a printed page. This forbids the user from changing the formatting at all, so the user can only zoom the PDF and pan around the virtual page.

2) Abandon your table layout and adopt a new layout that supports reflowable text and arbitrary font sizes.

Originally Posted by IvorT

As a text book, it won't be read sequentially but the discography/personnel details need to have a clear layout.

In order to do #2, you must abandon this idea and accept that the user can and will break your formatting decisions by changing the font face, font size, and margins to his liking. If you can't accept this and require a fixed format, you must use PDF to simulate a printed page and prevent the user from overriding your formatting decisions.

You will never be able to do what you're trying to do with tables and CSS. You're trying to force an e-book to look like a printed page, and e-books can't do that. That's what PDF is for.

[IvorT]

Thanks @Aleron Ives. I've now replaced all the tables with lists for the discographies / personnel sections. Formatting some sections in italics and adding a UTF-8 character between each section seems like a reasonable compromise.
Many thanks!
Ivor

[Aleron Ives]

Kudos for sticking with EPUB and adjusting your formatting techniques for reflowable text. Your users with small screens will be grateful that they don't have to zoom and pan around a PDF.

[azimuth]

Filament Group Tablesaw has a toggle method where you can switch on/off various columns with a mere click.
Filament Tablesaw

Another nice one is RWD Table Patterns which has a similar toggle off/on method.
RWD Tables

[Quoth]

Originally Posted by azimuth

Filament Group Tablesaw has a toggle method where you can switch on/off various columns with a mere click.
Filament Tablesaw

Another nice one is RWD Table Patterns which has a similar toggle off/on method.
RWD Tables

Won't work on end users ereaders.