Seeking Advice on Styling Issues with ePub Creation

[wfreeman]

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!

[DNSB]

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.

[azimuth]

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;}

[JSWolf]

Originally Posted by azimuth

Mmm...that Moon+ eReader again; it's a quality product, yet can create fickle CSS code challenges sometimes.

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.

[DNSB]

Originally Posted by azimuth

Mmm...that Moon+ eReader again; it's a quality product, yet can create fickle CSS code challenges sometimes.

Perhaps if you like a product that by default disregards the ebook's style and has rather spotty support for the ePub specification.

Originally Posted by azimuth

The figure/figcaption is effective for both epub2x and epub3x. Something like this could work (which makes your question lean more toward CSS flex). The 'flex' is for epub3x only, but a figure/figcaption can be designed without it.

Last time I looked, figure & figcaption were ePub 3 only. I tried a test epub2 with figure/figcaption

<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:

and epubcheck was not happy.

OEBPS/Text/Section0001.xhtml	17	531	Col: 8: ERROR(RSC-005): Error while parsing file: element "body" incomplete; expected element "address", "blockquote", "del", "div", "dl", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "ins", "noscript", "ns:svg", "ol", "p", "pre", "script", "table" or "ul" (with xmlns:ns="http://www.w3.org/2000/svg")
OEBPS/Text/Section0001.xhtml	12	255	Col: 24: ERROR(RSC-005): Error while parsing file: element "figure" not allowed anywhere; expected element "address", "blockquote", "del", "div", "dl", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "ins", "noscript", "ns:svg", "ol", "p", "pre", "script", "table" or "ul" (with xmlns:ns="http://www.w3.org/2000/svg")
OEBPS/Text/Section0001.xhtml	13	308	Col: 53: ERROR(RSC-005): Error while parsing file: element "figure" not allowed anywhere; expected element "address", "blockquote", "del", "div", "dl", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "ins", "noscript", "ns:svg", "ol", "p", "pre", "script", "table" or "ul" (with xmlns:ns="http://www.w3.org/2000/svg")

[azimuth]

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:

.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;
}