11-06-2023, 06:14 PM | #1 |
Junior Member
Posts: 1
Karma: 10
Join Date: Nov 2023
Device: none
|
Seeking Advice on Styling Issues with ePub Creation
Hello everyone,
I've been working on creating an ePub using Sigil, and for the most part, I'm thrilled with the results. However, I've hit a snag that's quite frustrating. I designed a specific text format within my book (as shown in the attachment), and after numerous attempts to create a single codebase for both Kindle Previewer and ePub3, I've settled on using a table layout. While this looks decent in the Kindle Previewer, the rendering on the most popular ePub readers on Android is a nightmare. It seems that the default styles of apps like Moon+ Reader are overriding my custom table styles, resulting in a very unprofessional look. I’m also aware of the "Publisher Formatting" feature available in some eReaders like Moon+ Reader but I'm looking for a solution that doesn't require my readers to use a specific app or have advanced knowledge of it. I'd like my ePub to be as user-friendly and versatile as possible, which is why I'm turning to you all for advice. I'm seeking your advice on how to best tackle this issue: Should I create a separate code for MOBI/KPF where I retain the table and attempt something with display:flex for ePub3? Is there a better way to mark an important text fragment that I'm not aware of? Any other suggestions or best practices you could recommend? It's incredibly disheartening because the styling looks perfect on Sigil's preview page and on Windows readers. Any advice to help me solve this cross-platform formatting challenge would be greatly appreciated. Thank you in advance for your time and help! Last edited by wfreeman; 11-06-2023 at 06:16 PM. |
11-06-2023, 08:27 PM | #2 |
Bibliophagist
Posts: 39,945
Karma: 154914010
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
As you noted with Moon+, quite a few Android renderers go their own way and do their own thing. Basically for ePubs that I create, I test on several programs (ADE in several versions and Thorium are the main ones under Windows, Kobo and Pocketbook on mobile devices) and on a couple of hardware eInk ePub ereaders. I also convert to Amazon's AZW3 format and check how that works on Kindles apps and a Kindle eInk device.
I've tested on several Android ePub renderers set to use publisher CSS and the results have been non-optimal (looks like crap might be a better way to phrase it). Please note that if you use ePub 3, there are quite a few renderers and devices that still do not handle enough of the ePub 3 spec to look good. For the most part, I just try to keep the CSS as simple as possible. |
11-09-2023, 01:52 AM | #3 |
Enthusiast
Posts: 33
Karma: 2538
Join Date: Aug 2023
Location: NW US
Device: none
|
M̶m̶m̶...t̶h̶a̶t̶ M̶o̶o̶n̶+̶ e̶R̶e̶a̶d̶e̶r̶ a̶g̶a̶i̶n̶;̶ i̶t̶'s̶ a̶ q̶u̶a̶l̶i̶t̶y̶ p̶r̶o̶d̶u̶c̶t̶, y̶e̶t̶ c̶a̶n̶ c̶r̶e̶a̶t̶e̶ f̶i̶c̶k̶l̶e̶ C̶S̶S̶ c̶o̶d̶e̶ c̶h̶a̶l̶l̶e̶n̶g̶e̶s̶ s̶o̶m̶e̶t̶i̶m̶e̶s̶. T̶h̶e̶ f̶i̶g̶u̶r̶e̶/f̶i̶g̶c̶a̶p̶t̶i̶o̶n̶ i̶s̶ v̶i̶a̶b̶l̶e̶ f̶o̶r̶ ̶b̶̶o̶̶t̶̶h̶̶ ̶e̶̶p̶̶u̶̶b̶̶2̶̶x̶̶ ̶a̶̶n̶̶d̶̶ e̶p̶u̶b̶3̶x̶. T̶h̶e̶ 'f̶l̶e̶x̶' i̶s̶ f̶o̶r̶ e̶p̶u̶b̶3̶x̶ o̶n̶l̶y̶.
Update... I must agree with the additional commenters below, nothing can resolve Moon+ internal default code, because it's a limited use app. We also experimented with figcaption, then flex, then just DIV's (versus 'table'), then tried it with left/right floats, and Moon+ still flips the image below the text. Where Moon+ places that image cannot be resolved (side by side with text). The box text font color can be controlled as you've designed it by adding class="white" to the code for the text, and to the stylesheet add: .white {color: #fff;} To keep image at same fullest size (even though it will still flip down below the text in Moon+), add a class="image" to that particular image, and to the stylesheet add your choice of pixel dimension as follows: .image {max-width: 150px;} Last edited by azimuth; 11-19-2023 at 05:26 PM. |
11-09-2023, 07:54 AM | #4 |
Resident Curmudgeon
Posts: 76,098
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Moon+ is garbage. It's quite far away from quality. That's why the OP is having trouble with it. It may be OK to set the settings on a regular nothing special formatted novel, but add in some more complex formatting and Moon+ goes all wonky. So no, it's not quality. It's a run of the mill rubbish ePub reader. The standard on Android.
|
11-09-2023, 02:03 PM | #5 | ||
Bibliophagist
Posts: 39,945
Karma: 154914010
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
Quote:
Code:
<body> <figure role="group"> <img alt="Figure 1" src="../Images/00003.jpeg"/> <figcaption>A water molecule is made of two hydrogen atoms and one oxygen atom. The two hydrogen atoms are positioned on the oxygen atom and are separated by approximately 105 degrees.</figcaption> </figure> </body> Spoiler:
|
||
11-21-2023, 06:36 PM | #6 |
Enthusiast
Posts: 33
Karma: 2538
Join Date: Aug 2023
Location: NW US
Device: none
|
Tested several more ways (UL etc), and finally got the image to stick in Moon+ with a flex/float combo, although your desired exact style with text/image side by side was not attained.
INSTEAD, our alternative style below may be something to consider. It renders the code design in Moon+, ADE, Pocketbook, and Alkido -- by floating the image to the top right corner. This is only tested on Android. Do further testing on various devices/apps if you plan to use it. See live example at JSFiddle. JS Fiddle example The CSS code: Code:
.pinebox { margin: 0px; padding: 5px; background-color: #04AA6D; text-align: left; } .text { display: flex; flex-direction: row; justify-content: flex-start; align-content: flex-start; margin: 0px; padding: 10px; color: #fff; text-align: left; background-color: #04AA6D; } .image { float: right; height: 80px; width: 80px; max-width: 80px; margin: 0px; padding: 0px; } .clearfix::after { content: ""; clear: both; display: table; } Last edited by azimuth; 11-21-2023 at 07:52 PM. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Seeking advice | Abhuman | Which one should I buy? | 32 | 07-29-2019 09:08 AM |
Seeking Advice | MicS | Calibre | 5 | 04-18-2013 08:23 AM |
Seeking tech advice | wyndslash | Lounge | 13 | 08-26-2011 07:56 PM |
Desperately seeking.... advice on epub conversion? | Direct Ebooks | ePub | 11 | 11-03-2009 10:19 AM |
Yet another noob seeking advice | Voice of Reason | Which one should I buy? | 6 | 04-01-2008 03:49 PM |