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).