Custom CSS Stylesheets for Calibre's Viewer

[belyjmedved]

It worked, thank you very much!
300% was just an example, I did not really need it. But some fonts are good at 120-140% line spacing, others at 100%.

[dunhill]

Originally Posted by belyjmedved

It worked, thank you very much!
300% was just an example, I did not really need it. But some fonts are good at 120-140% line spacing, others at 100%.

Exactly it was only as an example that percentage can be varied according to taste.

[DNSB]

Originally Posted by dunhill

Exactly it was only as an example that percentage can be varied according to taste.

At the time I wrote my original response, 300% was a bit of a sore point. I had downloaded a free prequel to a series that one friend of mine had recommended. I'm attaching a screenshot of the opening page of the first chapter. Some nitwit used 1.25" margins and a line height of 300% for the standard text paragraphs.

[dunhill]

I assure you, it was not me

[TMF]

How can I add spacing after paragraphs in the Calibre viewer's CSS style sheet? "p {margin-bottom:1.5em}" doesn't work.

Thanks for this thread, it's really helpful!

Edit: Kovid answered this already above: it's "p { margin-bottom: 1rem !important }".

[parkher]

I have the opposite problem:
how to get rid of spacing between paragraphs.
I even tried to re-convert with the Calibre converter with --remove-paragraph-spacing
Zero effect. The Calibre viewer still shows gaps between paragraphs.
FBReader shows correctly, though. No gaps between paragraphs.

Oh, it seems that the Calibre stand-alone converter simply added br twice(!) instead of creating p, when converting docx to epub:
<br class="calibre9"/><br class="calibre9"/>
So the problem was caused not by the Calibre viewer but by the Calibre converter.
A replace all is needed. One br is quite enough.
Well, I am not sure if I can really blame the Calibre converter either.
It finds that double br in the docx xml:
</w:t><w:br/><w:br/><w:t>
and it is dumb (or smart?) enough to repeat it. No, nothing smart about it

[democrite]

I was trying to have sort of a custom theme for both light and dark mode. As one cannot set such, is it possible to perhaps accomplish such with CSS? I tried using color and background color with body.calibre-viewer-dark-colors without success.

[lexexed]

I haven't used Calibre in quite some time, but downloaded the most recent version today to give it a try. The reason I stopped was because, until maybe 5 or so updates ago, I used to be able to read a two-page ebook with a background image just fine. Zero problems. But after and since some recent updates, the text is just crammed into the page when I use 2-page with a bg image.
At least one letter of a word is cut off either on the left or right side and the center is also 'crammed.' I hadn't changed any settings except to update. I downloaded the latest version to see if the old behavior had returned, but it's identical to back when I quit. Anyone know why this is happening? No bg image works sort of ok, but as soon as I add an image (any image) the run-off-the-page-edges problem comes right back.

[vyvlad]

I'm not sure if it's my high DPI display or the particular ebooks I have gotten are badly formatted, but the sizes of images are extremely out of proportion with the text zoom or the size of the viewer. Most CSS image instructions set image sizes in absolute terms or relative to the size of the container. transform: scale will end up with images overlapping the text.

To scale all the images in an ebook up without ruining the formatting you can add

img {  
  zoom:200%;
}

To the stylesheet. The zoom level will depend on your DPI.

[Avaai]

Is it possible to access the header & footer (the one that displays "Book title", "Top level section", etc) in the ebook viewer via css? I already tried:

footer,
header {}

.

Not sure if that's right though. It doesn't seem to work...

[theducks]

VIEWER Headers and footers are controlled by the viewers Preferences:headers and Footers (settings )

This does not make use of any present IN the book (IMHO such paper relics have no place as there are no pages for the to reside)

[grandixximo]

I have this problem where Italic text is cut out on the right side, tried different fonts, and margins and padding, even aligning text to the left, but sometimes it still gets cut out, any suggestions?
You can see the final e of Maybe in the picture that I posted.

[grandixximo]

Originally Posted by grandixximo

I have this problem where Italic text is cut out on the right side, tried different fonts, and margins and padding, even aligning text to the left, but sometimes it still gets cut out, any suggestions?
You can see the final e of Maybe in the picture that I posted.

Edit:

Figured it out, just after posting this

* { padding-right: 10px !important }

[grandixximo]

Originally Posted by grandixximo

I have this problem where Italic text is cut out on the right side, tried different fonts, and margins and padding, even aligning text to the left, but sometimes it still gets cut out, any suggestions?
You can see the final e of Maybe in the picture that I posted.

Figured it out, just after posting this

* { padding-right: 10px !important }

[democrite]

Is it possible through CSS to get EPUB page numbers to show in the margin? I thought it was and vaguely recall I was able to once before. But I lost track of where I found it or how to. Haven’t been able to get it working. Official support in someway would be nice but CSS is ok for now.