CSS solution for words cut-off in kepub full screen reading

scoky · 12-13-2014, 07:52 AM

Hi guys, I find if the margin of whole text (body) in CSS is set to 0 like this:

Code:

margin: 0 0 0 0

we can get a correct full screen reading without words cut-off.

To modify CSS, the body code section must be known, like this:

Code:

<body class="calibre">
          </body>

so the margin setting will be added to "calibre" section in CSS like this:

Code:

.calibre {
    display: block;
    font-size: 1em;
    padding-left: 0;
    padding-right: 0;
    text-align: justify;
    margin: 0 0 0 0
    }

and we get the correct display of full screen reading for kepub.

this can be done when kepub is converted by Calibre. it needs to change output setting to prevent Calibre add itself margin. The setting is in Page Setup and you need to set the four margins to zero. Then you can do the conversation.

"f" and "j" issues have been solvedin post #13

arspr · 12-13-2014, 01:44 PM

I think that is not the solution.

I mean I've just suffered the issue once but just going to another book or changing the GUI settings (font size, margins) "fixed" the issue. I don't exactly remember.

What I'm trying to say is that AFAIK the layout going FUBAR is not a fully replicable, constant issue. So it just "fixes" itself. Probably you've just sent a "new" book and then it has been fixed no matter the margin o no margin setting.

Nevertheless maybe I'm wrong and you do have a fully replicable test eBook. In that case it would be great if you could post it (if its copyright allows it), or nevertheless I would like to test it in any case so you could PM me a download link (I promise I will delete it afterwards).

scoky · 12-14-2014, 12:00 AM

Quote:

Originally Posted by arspr

I think that is not the solution.

I mean I've just suffered the issue once but just going to another book or changing the GUI settings (font size, margins) "fixed" the issue. I don't exactly remember.

What I'm trying to say is that AFAIK the layout going FUBAR is not a fully replicable, constant issue. So it just "fixes" itself. Probably you've just sent a "new" book and then it has been fixed no matter the margin o no margin setting.

Nevertheless maybe I'm wrong and you do have a fully replicable test eBook. In that case it would be great if you could post it (if its copyright allows it), or nevertheless I would like to test it in any case so you could PM me a download link (I promise I will delete it afterwards).

I can't fix this issue by adjust GUI setting.

Actually, I find the words cut-off issue in kepub full screen reading mode is caused by non-zero margin setting in CSS which may be original or modified by Calibre. So manual modification or using Calibre can set margin to zero.

Attachments are a free book from Project Gutenberg. This first one is original and I change its extension name to .kepub.epub to use access render. The second is converted to kepub by Calibre and its Margin settings in Page Setup of Calibre are all set to zero.

arspr · 12-14-2014, 03:22 AM

Wow, you are right. The issue is fully replicable.

I've just downloaded your first version (as epub) and when uploaded to my H2O through KoboTouch Extended driver (I mean with an automatic conversion to kepub) the rendering is absolutely FUBAR.

I'll try to narrow the issue down... Because I swear you that I've got books without any margin setting in body (because I ALWAYS explicitly delete them) which perfectly work.

Side comment:
Do not convert into kepub by just changing the file extension. Kepubs have a lot of <span>s in them which are needed by the annotation system and I don't know if other modifications are also made...

davidfor · 12-14-2014, 04:02 AM

Quote:

Originally Posted by arspr

Side comment:
Do not convert into kepub by just changing the file extension. Kepubs have a lot of <span>s in them which are needed by the annotation system and I don't know if other modifications are also made...

There are other things done, but for these sort of tests, they are not going to affect anything. And, Kobo actually tell authors/book creators to do this as a way of checking the book looks OK on the devices.

GeoffR · 12-14-2014, 04:07 AM

This is interesting, the body margin does seem to affect the magnitude of the full-screen cut-off.

But both of the books still suffer from the cut-off problem, although the second one (first screenshot) is much worse than the first. (In the screenshots in post #1 you can see the 'f' on line 8 is cut off in the second screenshot.)

scoky · 12-14-2014, 04:19 AM

Quote:

Originally Posted by GeoffR

This is interesting, the body margin does seem to affect the magnitude of the full-screen cut-off.

But both of the books still suffer from the cut-off problem, although the second one (first screenshot) is much worse than the first. (In the screenshots in post #1 you can see the 'f' on line 8 is cut off in the second screenshot.)

In post #1, the first picture is not processed, so it suffers from words cut-off issue. The second picture is processed with zero margins and it works correctly.

You can test the two books in post #3.

GeoffR · 12-14-2014, 04:22 AM

Quote:

Originally Posted by scoky

In post #1, the first picture is not processed, so it suffers from words cut-off issue. The second picture is processed with zero margins and it works correctly.

You can test the two books in post #3.

Yes I've tested the books, they both suffer the cut-off issue, but to different degrees. Have a look at line 8 of the second picture in post #1, the 'f' is cut off on the right, so the prolem is still there it is just reduced in magnitude compared to the first picture.

(It is not so easy to see with a sans-serif font, much more noticable with serifs.)

arspr · 12-14-2014, 04:24 AM

Quote:

Originally Posted by GeoffR

This is interesting, the body margin does seem to affect the magnitude of the full-screen cut-off.

But both of the books still suffer from the cut-off problem, although the second one (first screenshot) is much worse than the first. (In the screenshots in post #1 you can see the 'f' on line 8 is cut off in the second screenshot.)

That f being cut is another different and also known issue. ACCESS cuts off font characters which "protrude" the margins. It depends on the used font type but usually italic j is the perfect candidate in the left margin and f (or italic f is even better) the perfect candidate for the right margin when justifying.

scoky · 12-14-2014, 04:34 AM

Quote:

Originally Posted by GeoffR

Yes I've tested the books, they both suffer the cut-off issue, but to different degrees. Have a look at line 8 of the second picture in post #1, the 'f' is cut off on the right, so the prolem is still there it is just reduced in magnitude compared to the first picture.

(It is not so easy to see with a sans-serif font, much more noticable with serifs.)

Yes, I find "f" issue and it seems only "f" has this problem.

GeoffR · 12-14-2014, 04:37 AM

Quote:

Originally Posted by arspr

That f being cut is another different and also known issue. ACCESS cuts off font characters which "protrude" the margins. It depends on the used font type but usually italic j is the perfect candidate in the left margin and f (or italic f is even better) the perfect candidate for the right margin when justifying.

Okay, I thought this was what was meant by the full-screen mode cut-off problem, I got my hopes up when I saw this thread. I've never seen a Kobo kepub with a non-zero body margin, and I always strip margins when sideloading books, so I hadn't seen the other problem before.

GeoffR · 12-14-2014, 04:39 AM

Quote:

Originally Posted by scoky

Could you take a snapshot about it? Because in my Kobo aura HD, I don't find this issue. I have test two different serif fonts.

Have a look a the 'f' character at the end of line 8 in your screenshots and compare it to other 'f' characters. The one at the end of the line is cut off at the right.

scoky · 12-14-2014, 07:03 AM

Continue...

I find in .css there are two section to control the real margin. The first one is mentioned above, it is body section to control whole margin and it is better to set to zero. The second is the detail text section in paragraph, it is better to set to a very small value. To process CSS like this, the "f" and "j" issue will be disappeared.
Example: this code is in html of kepub

Code:

<body>
<p>&nbsp;</p>
</body>

The body section in .css will be added with margin: 0;. The p section in .css will be modified like this: margin: 0.25em;

However, I don't find any setting in Calibre can modified this automatically.

Anak · 12-14-2014, 07:38 AM

Quote:

Originally Posted by GeoffR

Have a look a the 'f' character at the end of line 8 in your screenshots and compare it to other 'f' characters. The one at the end of the line is cut off at the right.

Below are the Kobo code style hacks taken from a kepub.

Code:

<style type="text/css">
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }
</style>
<style type="text/css">
div#book-inner p, div#book-inner div { font-size: 1.0em; } a { color: black; } a:link, a:visited, a:hover, a:active { color: blue; } div#book-inner * { margin-top: 0 !important; margin-bottom: 0 !important;}
</style></head>

Top and bottom margins don't affect cut off problems if characters have a negative right hand side bearing. But it will also happen with characters that have a negative left hand side bearings if that character is in the first position of a line. See the images below.

The trick here is to add a "soft" margin. The margin property creates hard margins. The padding property creates (for this purpose) "soft" margins and prevents that characters with a negative side bearing are cut off.

In the example below I add a "soft" margin of 2% to the wrapper (divider) only because it is intended as a page margin only and should not affect individual (child) properties. It will probably work with much smaller values (like 1% or 0.10em). But the (average) width of a negative side bearing varies from font to font. And if set too low it might not work for all fonts.

I add soft margins to the wrapper (divider only) by

Code:

div#book-inner p, div#book-inner div { font-size: 1.0em;padding-left:2%;padding-right:2%;}

The full style hacks with added soft margins:

Code:

<style type="text/css">
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }
</style>
<style type="text/css">
div#book-inner p, div#book-inner div { font-size: 1.0em; padding-left:2%;padding-right:2%; } a { color: black; } a:link, a:visited, a:hover, a:active { color: blue; } div#book-inner * { margin-top: 0 !important; margin-bottom: 0 !important;}
</style></head>

As Kobo kepubs have two wrappers:

Code:

<body>
  <div id="book-columns">
    <div id="book-inner">
……
    </div>
  </div>
</body>

You can also add the soft margin to the - not used - wrapper "book-columns" to avoid touching the existing Kobo Style Hacks Code. Then it would look something like this:

Code:

<style type="text/css">
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }
</style>
<style type="text/css">
div#book-columns div { padding-left:2%;padding-right:2%; }
div#book-inner p, div#book-inner div { font-size: 1.0em; } a { color: black; } a:link, a:visited, a:hover, a:active { color: blue; } div#book-inner * { margin-top: 0 !important; margin-bottom: 0 !important;}
</style>

Is this method fool prove: yes, it will work. Is it perfect for original kepubs: no, because it adds an additional margin (padding:2%) on top of possible predefined left and right (page) margins in the CSS. Therefore you might end up with huge left and right page margins.
If you use the wrapper principle for your home made kepubs (or epubs) it will work out fine but then you should avoid defining unnecessary left and right margins in the CSS of the book (read: use set default margins to 0 as the page wrapper adds the left and right margin).

GeoffR · 12-14-2014, 07:52 AM

It would be good to have a solution that can be automatically applied to sideloaded kepubs. If sideloaded kepubs work better than kobo-bought kepubs then that might give Kobo some extra incentive to fix the bug.

(BTW this does only happen with kepubs in the experimental full-screen mode right? I've never seen it happen with epubs or with kepubs in normal mode.)

12-14-2014, 04:07 AM	#6
GeoffR Wizard Posts: 3,821 Karma: 19162882 Join Date: Nov 2012 Location: Te Riu-a-Māui Device: Kobo Glo	This is interesting, the body margin does seem to affect the magnitude of the full-screen cut-off. But both of the books still suffer from the cut-off problem, although the second one (first screenshot) is much worse than the first. (In the screenshots in post #1 you can see the 'f' on line 8 is cut off in the second screenshot.) Last edited by GeoffR; 12-14-2014 at 04:10 AM. Reason: second book, first screenshot

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Letters of some words are cut off on the right hand side of Calibre screen	innogen	Calibre	1	12-02-2012 10:10 PM
Kindle 4NT Full-Screen PDF Reading(HELP)	CapitainDerya	Kindle Developer's Corner	2	09-25-2012 03:45 PM
Possible solution for full screen images	erez213	Kindle Developer's Corner	242	06-20-2012 11:15 AM
THE full screen reading	irukandji	Kindle Developer's Corner	5	08-08-2011 10:21 PM
Gen3 Words "falling off" the screen / sentences cut off (mobipocket)	Spektakel	Bookeen	6	04-17-2010 11:26 PM

12-13-2014, 07:52 AM	#1
scoky Connoisseur Posts: 62 Karma: 13112 Join Date: Feb 2013 Device: Kindle Paperwhite; KOBO AURA HD	[not perfect]CSS solution for words cut-off in kepub full screen reading Hi guys, I find if the margin of whole text (body) in CSS is set to 0 like this: Code: margin: 0 0 0 0 we can get a correct full screen reading without words cut-off. To modify CSS, the body code section must be known, like this: Code: <body class="calibre"> </body> so the margin setting will be added to "calibre" section in CSS like this: Code: .calibre { display: block; font-size: 1em; padding-left: 0; padding-right: 0; text-align: justify; margin: 0 0 0 0 } and we get the correct display of full screen reading for kepub. this can be done when kepub is converted by Calibre. it needs to change output setting to prevent Calibre add itself margin. The setting is in Page Setup and you need to set the four margins to zero. Then you can do the conversation. "f" and "j" issues have been solvedin post #13 Attached Thumbnails Last edited by scoky; 12-14-2014 at 07:04 AM. Reason: "f" and "j" issues have been solvedin post #13

12-13-2014, 01:44 PM	#2
arspr Dead account. Bye Posts: 587 Karma: 668244 Join Date: Mar 2011 Device: none	I think that is not the solution. I mean I've just suffered the issue once but just going to another book or changing the GUI settings (font size, margins) "fixed" the issue. I don't exactly remember. What I'm trying to say is that AFAIK the layout going FUBAR is not a fully replicable, constant issue. So it just "fixes" itself. Probably you've just sent a "new" book and then it has been fixed no matter the margin o no margin setting. Nevertheless maybe I'm wrong and you do have a fully replicable test eBook. In that case it would be great if you could post it (if its copyright allows it), or nevertheless I would like to test it in any case so you could PM me a download link (I promise I will delete it afterwards).

12-14-2014, 03:22 AM	#4
arspr Dead account. Bye Posts: 587 Karma: 668244 Join Date: Mar 2011 Device: none	Wow, you are right. The issue is fully replicable. I've just downloaded your first version (as epub) and when uploaded to my H2O through KoboTouch Extended driver (I mean with an automatic conversion to kepub) the rendering is absolutely FUBAR. I'll try to narrow the issue down... Because I swear you that I've got books without any margin setting in body (because I ALWAYS explicitly delete them) which perfectly work. Side comment: Do not convert into kepub by just changing the file extension. Kepubs have a lot of <span>s in them which are needed by the annotation system and I don't know if other modifications are also made...

12-14-2014, 07:52 AM	#15
GeoffR Wizard Posts: 3,821 Karma: 19162882 Join Date: Nov 2012 Location: Te Riu-a-Māui Device: Kobo Glo	It would be good to have a solution that can be automatically applied to sideloaded kepubs. If sideloaded kepubs work better than kobo-bought kepubs then that might give Kobo some extra incentive to fix the bug. (BTW this does only happen with kepubs in the experimental full-screen mode right? I've never seen it happen with epubs or with kepubs in normal mode.)

Advert

Advert