Text Overruns Large Margins in Viewer

enuddleyarbl · 09-02-2022, 10:43 AM

This doesn't happen in the Calibre Editor preview or on my Kobo Forma. Only in the Calibre Viewer. I was testing margins and set up a fake book with 5em margins all around. In the Viewer, the text pays no attention to the right margin. It just keeps going. I've included a link to my fake book in case anyone wants to see if I've messed up any particular settings:

And, the book is here:
https://drive.google.com/file/d/1NdG...ew?usp=sharing
.
EDIT: Sorry. I'm on a fully updated Windows 11 Pro x64 and Calibre 6.3. And, I don't see that odd behavior in books with more normal (0 or 0.5em) margins.

kovidgoyal · 09-02-2022, 11:10 AM

Your book will be using non-reflowable markup of some kind such as <pre> or white-space: no-wrap or a table or similar.

enuddleyarbl · 09-02-2022, 12:07 PM

Quote:

Originally Posted by kovidgoyal

Your book will be using non-reflowable markup of some kind such as <pre> or white-space: no-wrap or a table or similar.

AFAIK, I'm not using any of those things. I also split up my margin settings to specify top, right, bottom and left. The issue continues for even small right margins. Also, my Viewer is set to page mode, yet the bottom margin is not being followed either.

And, just in case I've gone blind and can't see where the issue might be, here's the html:

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>My Test Book</title>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>

<body>

  <h2>This is a document using 5.0em for all margins</h2>

  <div class="note">

    <p>body, html {<br/>
/* Basic Styling for HTML and BODY Sections of a File */<br/>
	border-width:	0;<br/>
	height:	100%;<br/>
	margin:	5.0em;<br/>
	orphans:	1;<br/>
	padding:	0;<br/>
	widows:	1;<br/>
}</p>

  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat mi quis pretium semper. Proin luctus orci ac neque venenatis, quis commodo dolor posuere. Curabitur dignissim sapien quis cursus egestas. Donec blandit auctor arcu, nec pellentesque eros molestie eget. In consectetur aliquam hendrerit. Sed cursus mauris vitae ligula pellentesque, non pellentesque urna aliquet. Fusce placerat mauris enim, nec rutrum purus semper vel. Praesent tincidunt neque eu pellentesque pharetra. Fusce pellentesque est orci.</p>

  <p>Integer sodales tincidunt tristique. Sed a metus posuere, adipiscing nunc et, viverra odio. Donec auctor molestie sem, sit amet tristique lectus hendrerit sed. Cras sodales nisl sed orci mattis iaculis. Nunc eget dolor accumsan, pharetra risus a, vestibulum mauris. Nunc vulputate lobortis mollis. Vivamus nec tellus faucibus, tempor magna nec, facilisis felis. Donec commodo enim a vehicula pellentesque. Nullam vehicula vestibulum est vel ultricies.</p>

  <p>Aliquam velit massa, laoreet vel leo nec, volutpat facilisis eros. Donec consequat arcu ut diam tempor luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vitae lacus vel leo sodales pharetra a a nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam luctus tempus nibh, fringilla dictum augue consectetur eget. Curabitur at ante sit amet tortor pharetra molestie eu nec ante. Mauris tincidunt, nibh eu sollicitudin molestie, dolor sapien congue tortor, a pulvinar sapien turpis sed ante. Donec nec est elementum, euismod nulla in, mollis nunc.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat mi quis pretium semper. Proin luctus orci ac neque venenatis, quis commodo dolor posuere. Curabitur dignissim sapien quis cursus egestas. Donec blandit auctor arcu, nec pellentesque eros molestie eget. In consectetur aliquam hendrerit. Sed cursus mauris vitae ligula pellentesque, non pellentesque urna aliquet. Fusce placerat mauris enim, nec rutrum purus semper vel. Praesent tincidunt neque eu pellentesque pharetra. Fusce pellentesque est orci.</p>

  <p>Integer sodales tincidunt tristique. Sed a metus posuere, adipiscing nunc et, viverra odio. Donec auctor molestie sem, sit amet tristique lectus hendrerit sed. Cras sodales nisl sed orci mattis iaculis. Nunc eget dolor accumsan, pharetra risus a, vestibulum mauris. Nunc vulputate lobortis mollis. Vivamus nec tellus faucibus, tempor magna nec, facilisis felis. Donec commodo enim a vehicula pellentesque. Nullam vehicula vestibulum est vel ultricies.</p>

  <p>Aliquam velit massa, laoreet vel leo nec, volutpat facilisis eros. Donec consequat arcu ut diam tempor luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vitae lacus vel leo sodales pharetra a a nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam luctus tempus nibh, fringilla dictum augue consectetur eget. Curabitur at ante sit amet tortor pharetra molestie eu nec ante. Mauris tincidunt, nibh eu sollicitudin molestie, dolor sapien congue tortor, a pulvinar sapien turpis sed ante. Donec nec est elementum, euismod nulla in, mollis nunc.</p>

</body>

</html>

and here's the css stylesheet:

Code:

body, html {
  /* Basic Styling for HTML and BODY Sections of a File */
  border-width: 0;
  height: 100%;
  margin-top: 5em;
  margin-right: 5em;
  margin-bottom: 5em;
  margin-left: 5em;
  orphans: 1;
  padding: 0;
  widows: 1;
}
* + * {
  /* Lobotomized Owl Selector - what to do any time two objects follow each other - limit to margin-top */
  margin-top: 0.6em;
}
h2 {
  /* Basic Chapter Heading Styling */
  page-break-before: always;
  page-break-after: avoid;
  text-align: center;
}
.note + p, div.note p {
  /* Non-indented Paragraphs Styling (for paragraphs that follow something and shouldn't be indented) */
  text-indent: 0;
}
p {
  /* Basic paragraph styling */
  display: block;
  text-indent: 1.2em;
}
/* */
/* This whole section is styling for specific page types of a book */
/* */
/* */
/* This is a section for types of chunks on a page */
/* */
div.note {
  /* Letter Styling */
  display: block;
  font-size: 0.88em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: left;
}
/* */
/* A styling section for things that apply everywhere */
/* */
/* */
/* Stuff Unique to this Book */
/* */

The Calibre Editor's "Check Book" tool finds no problem. Ditto for EpubCheck.

enuddleyarbl · 09-02-2022, 12:16 PM

I've even tried Viewing a commercial epub and get the same issue. I don't remember seeing it before today. I'm going to dig around my system and see if anything got messed up. But, I can't imagine what might have changed that would cause this.

enuddleyarbl · 09-02-2022, 12:24 PM

I've updated to Calibre 6.4 and reset the Viewer's Page Layout preferences to default. Problem continues.

enuddleyarbl · 09-02-2022, 12:57 PM

I think the problem has to do with my body statement in my css. I followed the suggestion in:

https://wiki.mobileread.com/wiki/CSS_HowTo#Essentials

and included html in my body statement:

Code:

body, html {
/* Basic Styling for HTML and BODY Sections of a File */
	border-width:	0;
	height:	100%;
	margin:	0;
	orphans:	1;
	padding:	0;
	widows:	1;
}

If I pull the ", html" bit off (leaving just body), the Viewer behaves normally. Well, more normally. Without including "html," the Viewer's margin settings override the book's css margin settings. With the "html" settings, the book's margins apply, but the right and bottom margins are ignored. Unfortunately, I'm not knowledgeable enough to know if that's correct behavior.

jackie_w · 09-02-2022, 04:01 PM

@enuddleyarbl,

If you don't mind me commenting. If you're going to be reading these books on your Kobo Forma then very little of what you have in that body style is going to be useful.

In my experience (with my Kobo-centric hat on):

padding will default to zero anyway
widows, orphans - in kepubs, both are ignored
widows, orphans - in epubs, these values can be set in the Kobo config file
border-width, height - no idea why you need these at all in body

Personally I don't specify margin in the body style, but it's probably harmless because the Kobo's own settings for left/right will take over.

JSWolf · 09-02-2022, 05:21 PM

Quote:

Originally Posted by enuddleyarbl

I think the problem has to do with my body statement in my css. I followed the suggestion in:

https://wiki.mobileread.com/wiki/CSS_HowTo#Essentials

and included html in my body statement:

Code:

body, html {
/* Basic Styling for HTML and BODY Sections of a File */
	border-width:	0;
	height:	100%;
	margin:	0;
	orphans:	1;
	padding:	0;
	widows:	1;
}

If I pull the ", html" bit off (leaving just body), the Viewer behaves normally. Well, more normally. Without including "html," the Viewer's margin settings override the book's css margin settings. With the "html" settings, the book's margins apply, but the right and bottom margins are ignored. Unfortunately, I'm not knowledgeable enough to know if that's correct behavior.

Forget html. It's not needed. And height: 100%; could be a problem. I have no idea what it's doing in the body and html CSS. It's not essential at all. Also, you don't need border-width and padding.

This is the body code I use and it works perfectly in the Calibre viewer and on a Kobo in both ePub and KePub.

Code:

body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}

enuddleyarbl · 09-02-2022, 05:41 PM

@jackie_w: I've pretty much come to the same conclusion about the body styles vs a Kobo Forma. It looks like the Forma defaults override quite a bit of the book's styles. But, there are so many comments on the forums saying to not depend on defaults (i.e., always specify them) that I'll leave the stuff in just to be safe.

@JSWolf: I added those in because of what that wiki suggested. I've started a thread over in the epub forum asking about that.

I'm wondering if the Calibre Viewer uses settings in the html section of a document and by including those html settings in my CSS, that changes the Viewer behavior.

DNSB · 09-02-2022, 05:42 PM

I would suggest that you lose the text-align: justify; and let the user decide what they want instead of forcing your love for hyphens upon them.

09-02-2022, 10:43 AM	#1
enuddleyarbl Guru Posts: 776 Karma: 1538394 Join Date: Sep 2013 Device: Kobo Forma	Text Overruns Large Margins in Viewer This doesn't happen in the Calibre Editor preview or on my Kobo Forma. Only in the Calibre Viewer. I was testing margins and set up a fake book with 5em margins all around. In the Viewer, the text pays no attention to the right margin. It just keeps going. I've included a link to my fake book in case anyone wants to see if I've messed up any particular settings: And, the book is here: https://drive.google.com/file/d/1NdG...ew?usp=sharing . EDIT: Sorry. I'm on a fully updated Windows 11 Pro x64 and Calibre 6.3. And, I don't see that odd behavior in books with more normal (0 or 0.5em) margins. Last edited by enuddleyarbl; 09-02-2022 at 10:47 AM.

09-02-2022, 12:57 PM	#6
enuddleyarbl Guru Posts: 776 Karma: 1538394 Join Date: Sep 2013 Device: Kobo Forma	I think the problem has to do with my body statement in my css. I followed the suggestion in: https://wiki.mobileread.com/wiki/CSS_HowTo#Essentials and included html in my body statement: Code: body, html { /* Basic Styling for HTML and BODY Sections of a File */ border-width: 0; height: 100%; margin: 0; orphans: 1; padding: 0; widows: 1; } If I pull the ", html" bit off (leaving just body), the Viewer behaves normally. Well, more normally. Without including "html," the Viewer's margin settings override the book's css margin settings. With the "html" settings, the book's margins apply, but the right and bottom margins are ignored. Unfortunately, I'm not knowledgeable enough to know if that's correct behavior.

09-02-2022, 04:01 PM	#7
jackie_w Grand Sorcerer Posts: 6,251 Karma: 16539642 Join Date: Sep 2009 Location: UK Device: ClaraHD, Forma, Libra2, Clara2E, LibraCol, PBTouchHD3	@enuddleyarbl, If you don't mind me commenting. If you're going to be reading these books on your Kobo Forma then very little of what you have in that body style is going to be useful. In my experience (with my Kobo-centric hat on): padding will default to zero anyway widows, orphans - in kepubs, both are ignored widows, orphans - in epubs, these values can be set in the Kobo config file border-width, height - no idea why you need these at all in body Personally I don't specify margin in the body style, but it's probably harmless because the Kobo's own settings for left/right will take over.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Mini PDF Margins Too Large!	Kiwisaurus	Kobo Reader	2	10-03-2018 08:45 PM
Changing margins in the viewer?	roteg	Calibre	2	02-18-2015 04:32 AM
HD A few Kindle books with large right margins on HD only	jswinden	Kindle Fire	6	11-15-2012 06:49 PM
[Kindle Touch] No Image viewer and pdf viewer with white margins	MaxPowerITA	Kindle Developer's Corner	7	04-24-2012 05:27 AM
EPub>Mobi>Kindle 3 large left margins	Zenthor	Calibre	14	11-02-2010 08:37 AM

09-02-2022, 11:10 AM	#2
kovidgoyal creator of calibre Posts: 45,345 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Your book will be using non-reflowable markup of some kind such as <pre> or white-space: no-wrap or a table or similar.

09-02-2022, 12:16 PM	#4
enuddleyarbl Guru Posts: 776 Karma: 1538394 Join Date: Sep 2013 Device: Kobo Forma	I've even tried Viewing a commercial epub and get the same issue. I don't remember seeing it before today. I'm going to dig around my system and see if anything got messed up. But, I can't imagine what might have changed that would cause this.

09-02-2022, 12:24 PM	#5
enuddleyarbl Guru Posts: 776 Karma: 1538394 Join Date: Sep 2013 Device: Kobo Forma	I've updated to Calibre 6.4 and reset the Viewer's Page Layout preferences to default. Problem continues.

09-02-2022, 05:41 PM	#9
enuddleyarbl Guru Posts: 776 Karma: 1538394 Join Date: Sep 2013 Device: Kobo Forma	@jackie_w: I've pretty much come to the same conclusion about the body styles vs a Kobo Forma. It looks like the Forma defaults override quite a bit of the book's styles. But, there are so many comments on the forums saying to not depend on defaults (i.e., always specify them) that I'll leave the stuff in just to be safe. @JSWolf: I added those in because of what that wiki suggested. I've started a thread over in the epub forum asking about that. I'm wondering if the Calibre Viewer uses settings in the html section of a document and by including those html settings in my CSS, that changes the Viewer behavior.

09-02-2022, 05:42 PM	#10
DNSB Bibliophagist Posts: 46,176 Karma: 168983734 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos	I would suggest that you lose the text-align: justify; and let the user decide what they want instead of forcing your love for hyphens upon them.

Advert

Advert