![]() |
#1 |
Junior Member
![]() Posts: 6
Karma: 10
Join Date: Aug 2023
Device: none
|
Help! Advice on discography layout...
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 |
![]() |
![]() |
![]() |
#2 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,277
Karma: 6700678
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
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. |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Evangelist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 492
Karma: 2267928
Join Date: Nov 2015
Device: none
|
In E-books, you don't need to cram the stuff into the page. Use vertical space, it is limitless.
|
![]() |
![]() |
![]() |
#4 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,330
Karma: 16297052
Join Date: Sep 2022
Device: Kobo Libra 2
|
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.
|
![]() |
![]() |
![]() |
#5 | |
Junior Member
![]() Posts: 6
Karma: 10
Join Date: Aug 2023
Device: none
|
Quote:
(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 |
|
![]() |
![]() |
Advert | |
|
![]() |
#6 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,233
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
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). Last edited by Quoth; 08-05-2023 at 05:18 AM. |
![]() |
![]() |
![]() |
#7 |
Junior Member
![]() Posts: 6
Karma: 10
Join Date: Aug 2023
Device: none
|
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? |
![]() |
![]() |
![]() |
#8 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,233
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
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. |
![]() |
![]() |
![]() |
#9 |
Junior Member
![]() Posts: 6
Karma: 10
Join Date: Aug 2023
Device: none
|
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:-
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 |
![]() |
![]() |
![]() |
#10 |
Junior Member
![]() Posts: 6
Karma: 10
Join Date: Aug 2023
Device: none
|
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." |
![]() |
![]() |
![]() |
#11 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,330
Karma: 16297052
Join Date: Sep 2022
Device: Kobo Libra 2
|
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. Quote:
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. |
|
![]() |
![]() |
![]() |
#12 |
Junior Member
![]() Posts: 6
Karma: 10
Join Date: Aug 2023
Device: none
|
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 |
![]() |
![]() |
![]() |
#13 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,330
Karma: 16297052
Join Date: Sep 2022
Device: Kobo Libra 2
|
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.
![]() |
![]() |
![]() |
![]() |
#14 |
Enthusiast
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 33
Karma: 2538
Join Date: Aug 2023
Location: NW US
Device: none
|
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 |
![]() |
![]() |
![]() |
#15 | |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,233
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Quote:
|
|
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Converting two-page layout pdf into one-page layout | Gergely | 3 | 03-08-2019 09:03 PM | |
Seeking Layout Advice | GrannyGrump | ePub | 8 | 12-13-2012 09:03 AM |
Layout Questions | ebenjamin30 | Workshop | 3 | 11-27-2012 06:45 PM |
Technical eBook Layout Advice | Reg22 | Writers' Corner | 7 | 08-20-2010 01:10 PM |
Layout format? | Seligman | Sony Reader Dev Corner | 9 | 06-19-2008 05:29 AM |