css margin-left and margin-right problem

[klaus schallhorn]

Calibre 2.something and all 3.0 to 3.1.1 [windows].

When creating or reading ebooks I prefer to have a little bit of white space at the page margins.

If I set body{margin-left:6pt;margin-right:6pt;} in a book's CSS the effect is as if the viewport in the open viewer is shifting a little with each page displayed so that after a few pages calibre's viewer displays each line of text flush to the left margin, followed by some white space, which is then followed by the beginnings of the lines of the next page to be displayed. A few pages further on I just see, say, the rightmost 80% of the current page, some white space and maybe appx 15% of the next page.

If, otoh, I set the margin of the body element to 0 and instead set block elements to have 6pt left and right margins, I get what I expect [and was hoping to achieve by setting this margin on the body only].

Trying to override an ebook's css with a user-style body{margin-left:6pt !important;margin-right:6pt !important;} causes the very same problem.

Tested and verified with a variety of public domain and other ebooks, most of which validate fine with epubcheck.

To verify just add a user-style of, say, body{margin:0 20pt !important;} and view a few books, then replace body with p,div,ol,ul,h1-6 etc. to see the difference.

[Kovid Goyal (kovid)]

You want to control page margins, do it via "Text layout in paged mode"
in the viewer settings. Not by setting body margins. body margins are
not used in paged mode.

 status fixreleased

[klaus schallhorn (kso)]

On Sat, 24 Jun 2017, Kovid Goyal wrote:

It doesn't matter if I set margins on body{}, @page{} or any other container
wrapped around a complete page, the problem is either Calibre or the QT
library you're using. Because:

in my stylesheet I have:

* {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

for various reasons. If I disable "-webkit-box-sizing" and "box-sizing" the
problem goes away and I can play with "Text layout in paged mode".

QUESTION: as on some layouts I do I need box-sizing. Is it possible to
target either Calibre or the QT library using a specific @media-query?

BTW: I've been using the *{} code to set "box-sizing" for some time now, on
old and new webkit browsers [Safari] and never had a problem with. Gecko,
Blink and Windows browsers handle this fine, as far as I can see.

rgds

ks

> You want to control page margins, do it via "Text layout in paged mode"
> in the viewer settings. Not by setting body margins. body margins are
> not used in paged mode.
>
> status fixreleased
>
> ** Changed in: calibre
> Status: New => Fix Released
>
>

klaus schallhorn

[Kovid Goyal (kovid)]

Again, dont set margins, you cannot reliably influence the margins via
css in the calibre viewer. They are designed to be user controllable via
a setting in the viewer preferences.

[klaus schallhorn (kso)]

On Sat, 24 Jun 2017, Kovid Goyal wrote:

The problem is caused by either calibre or the qt code you're using not
handling
    box-sizing:border-box;
correctly.

If I set margin-right and margin-left to 0 in my stylesheet, and set, as you
recommend, my preferred margin in the viewer prefs, the effect of shifting
viewport and broken display is the same.

When I take box-sizing:border-box; out of my stylesheet, the margins on the
left and right are handled correctly [but then I would have to change a lot
of other things that depend on box-sizing].

The "box-sizing:border-box;" code is, as can be easily googled, perfectly
valid and has been for many years.

Calibre 1.48 incidently doesn't have the problem.

  > Again, dont set margins, you cannot reliably influence the margins via
> css in the calibre viewer. They are designed to be user controllable via
> a setting in the viewer preferences.
>
>

klaus schallhorn

[Kovid Goyal (kovid)]

So dont set box-sizing for everything. Why on earth would you think that
is a good idea? Just because the * selector exists in CSS does not mean
it should be used. It will screw up anything that tries to insert any
content or styling in the same context, which viewers do a lot of, since
lots of viewer chrome is actually rendered in the same context as the
content.

If you insist on using it then wrap your content in a
<div class="mycontent"> and use .mycontent *

I can certainly fix the immediate issue by overriding box-sizing on body
but, as I said there will be lots of other issues with injected chrome.

[Kovid Goyal (kovid)]

Fixed in branch master. The fix will be in the next release. calibre is usually released every alternate Friday.

 status fixreleased