how to edit this book?

[franklekens]

I bought Olivia Manning's The Balkan Trilogy at Kobo. However, something seems to be wrong with the lay-out of the book. Every now and then a chunk of text is randomly displayed in a bigger font, like in the screenshot.

I've found that this occurs after page identifiers, like <a id="page_6"/>: see the other screenshot. The weird thing: Manning's Levant Trilogy, from the same publisher, also has these page identifier codes, but doesn't display this problem.

Calibre displays the text just fine, but my Kobo Forma insists on giving all text after the page identifier in a bigger font. (It doesn't matter whether I use Bookerly, like in the screenshot, or the Publisher default font.)

Does anybody know what it is in the css (or elsewhere?) that causes this, and how to fix it?

I've already tried comparing the css of the Balkan Trilogy with that of the Levant Trilogy, to see if a file comparer could quickly spot the fatal difference. But they're so wildly different that it's no use. And I know too little about html, css and epub &c to really know what to look for.

I'll add the css file here.

Thanks.

[stumped]

what a hideous overcomplicated css

by far the quickest fix is to regex out all the <a... page Id...> stuff. book will work fine without it
the code i use in Sigil - which removes all <a > entries - is find
</?a ?([^>]+)?>
replace all with nothing

my alternative lazy option would be an epub to epub conversion in calibre which hopefully will tidy up the mess and either fix it, or make it more fixable

[theducks]

Gah! what a cluttered CSS.
You failed to include the piece that set the style for the large paragraph
(the <a tag bit is a red herring in this case)

1) Clean it of unused selectors using the tool in the Editor. It makes things easier to read.

2) (IMHO) the excessive use of font-size: small. Blow that away, (your 'large' is really a 'Normal'. The rest has been forced Small.

Any Body font should be the device default (AKA Normal. I rarely set font-size any place other than when needed to be other than 1em/normal)

[stumped]

red herring or not, i bet that removing the <a > stuff fixes it
its exposing a glitch/bug in the kobo renderer , because other renderers e.g. calibre viewer are apparently Ok
the <a is somehow triggering a font change e.g. from small to normal. but its not reverting back as it should after the tag close
a class statement for the para is shown - bodytext - but there could be other inheritance rules involved. its arguably worst CSS file I have ever seen
e.g. the <a... having no inserted class of its own , may take on the overall body style
bodytext includes font-size: small ,
but body does not

it's unclear because <a ... > does not introduce any rendered text
.

[DNSB]

Why does the CSS have an embedded font for CharisSILR and then sets the font-family for almost every class to Times New Roman, serif?

I suspect it won't matter what font you select. Unless you have Times New Roman on your Kobo, the serif is going to force the default serif font which is unlikely to be Bookerly. The exception would be if you are looking at text inside a <span class="font">blahblahblah</span> which should use CharisSILR.

I did a bit of quick cleanup on the CSS and have attached it to this message.

[franklekens]

Everybody thanks for their help. I replaced the css by David's version, *and* I replaced the page identifiers with the search and replace (thanks for helping out with the regular expressions), because even though the css solved the font problem, the Kobo reader now insisted on interpreting those as a paragraph break.

But now all is well, more or less, and I've had some valuable first experience editing an epub.

[JSWolf]

@franklekens, load this eBook into the Calibre editor. Then go to Tools > Remove unused CSS Rules. Please repost the CSS again once done. This gets rid of all those extra CSS classes you find in most CSS from mainstream publishers. I'd like to see the CSS from there. Thanks.