Re: epub3 formatting help

Hussein Shafie <[email protected]> Mon, 21 Oct 2024 10:00:35 +0200
Newsgroups	gmane.editors.xxe.general
Message-ID	<[email protected]>
Z. wrote:
> 
> I first tried the following from your email:
> 
> conbody .p,
> .refbody .p,
> .taskbody .p,
> .body .p {
>         margin-top: 1em;
>         margin-bottom: 1em;
>         text-align: justify;
>         color: red;
> }
> 
> It does not work for Calibre on Linux and Windows 11. It does work for 
> firefox epub Reader. However, with
> firefox epub reader, I saw a <codeph> element extends into the right 
> column when all other text is displayed nicely in
> two columns. Not sure why. <codeph> is used to insert source code in my 
> book. It renders fine in PDF format.
> 
> Then I realized that the css rules depend on the layout. One of my 
> generated HTML file looks like this:
> 
> <!DOCTYPE html>
> <html xmlns="http://www.w3.org/1999/xhtml <http://www.w3.org/1999/xhtml>">
>     <head>
>        <meta charset="UTF-8" />
>        <title>Chapter 3. Chapter name here</title>
>        <link rel="stylesheet" type="text/css" href="resources/epub.css" />
>        <meta name="generator" content="XMLmind DITA Converter 3.15.0" />
>        <style type="text/css">
> ol.ol-d5881e5526 { counter-reset: ol-d5881e5526 0; }
> ol.ol-d5881e5526 > li::before { counter-increment: ol-d5881e5526;
> content:  counter(ol-d5881e5526, decimal) "."; }
> ol.ol-d5881e5683 { counter-reset: ol-d5881e5683 0; }
> ol.ol-d5881e5683 > li::before { counter-increment: ol-d5881e5683;
> content:  counter(ol-d5881e5526, decimal) "." counter(ol-d5881e5683, 
> decimal) "."; }
> </style>
>     </head>
>     <body>
>        <section id="Book-Part-One" class="topic">
>           <h2 class="chapter-title">Chapter 3. Chapter title is here</h2>
>           <div class="body">
>              <div class="p">This is a paragraph</div>
> 
> GIven this, I tried the following:
> 
> div {
>        margin-top: 1em;
>        margin-bottom: 1em;
>        text-align: justify;
>        color: red;
> }

Yes, it sure works but, more precise:

---
.conbody .p,
.refbody .p,
.taskbody .p,
.body .p {
             margin-top: 1em;
             margin-bottom: 1em;
             text-align: justify;
             color: red;
}
---

worked just fine for us too. Sent you a Calibre screenshot proving that.


> 
> Then everything worked! Paragraphs are justified with spacing between 
> them. For some reason, the text
> is not red (I left there by accident).  I also tried *div.p*, which did 
> not work for some reason.

Sorry but I don't understand why this happens.



> 
> So far, I am Okay with the result. But I noticed some tables (not all 
> tables) spill into the next column when
> I let Calibre display my book in multiple columns. I wonder if there is 
> a way to avoid this by using some XSL
> parameters or table properties perhaps.

I don't think so. How an EPUB is displayed by an EPUB reader is mainly 
controlled by the reader itself and less by the CSS stylesheet found in 
the EPUB file.

In the case of multiple columns, it may be the default setting for the 
EPUB reader. May be this setting can be changed in the app.




> 
> I am pretty new to this epub formatting, any advice and pointers are 
> appreciated. By the way, I also tried
> to import my epub file on a macBook to see how it renders by the Books 
> app, it no longer worked (used to
> work for me earlier this year).
> 

Please note that the EPUB files we generate are frequently tested 
against the Mac and iPad Books apps. It's with this EPUB reader that our 
EPUB files are best rendered. See for example, attached screenshot #1, 
excerpts of 
https://www.xmlmind.com/ditac/_distrib/doc/manual/ditac_manual.epub as 
rendered by the Books app of my iPad.

However when the EPUB CSS stylesheet has been customized:
---
@charset "UTF-8";

@import url(__stock_epub.css);

/* ADD YOUR STYLES HERE */

.conbody .p,
.refbody .p,
.taskbody .p,
.body .p {
            margin-top: 1em;
            margin-bottom: 1em;
            text-align: justify;
            color: red;
}
---

This customized CSS stylesheet is indeed completely ignored by Apple 
Books. See attached screenshot #2 as rendered by the Books app of my 
iPad: no justification, no red text, compact lists, incorrect fonts, etc.

The obvious reason is that, unlike Calibre and Firefox EPUB add-on, 
Apple Books does not support:

---
@import url(__stock_epub.css);
---

We'll do our best to workaround this Apple Books limitation in the next 
release of XXE. Thank you for reporting this issue.
ditac_manual.png (image/png, 667.7 KB) - not displayed
CSS_ignored.png (image/png, 73.6 KB) - not displayed