Embiggen epub cover, add stylesheet to cover page

riley-martine commented 1 year ago

On my device (Kindle PW3, Koreader 2023.01), stories (example) show up with small cover images on the cover page:

before

I tried to remedy this by modifying add_to_output_css in personal.ini, but the stylesheet is not loaded on the cover page.

This change makes the cover image larger, and adds loading the user CSS so this can be further customized without changing the code.

Example after change on my device: after

Note: I am not a competent web designer, and am not certain this is the correct CSS! If you want a lower-risk change, I can modify this to only add the user stylesheet, and not modify the default CSS.

JimmXinu commented 1 year ago

I'm not seeing this issue with my Kindle Paperwhite with FFF EPUB converted to either AZW3 or MOBI using Calibre's usual Conversion. So I'm inclined to believe it's something special with your reader.

I can't remember what exactly, but I have vague recollections that the coverpage HTML was kept very minimal for a reason. So I'm a bit reluctant to change it for everyone.

But you can easily change it for yourself in personal.ini settings: Epub Cover in Custom Ouput

If, for some reason, that doesn't work for you we can discuss it some more.

riley-martine commented 1 year ago

Ah, I think I might know the issue then -- I'm sending the epubs themselves to my device, not converting. (KOReader supports these.) When I round-trip the FFF epub -> calibre mobi -> back to epub, I get this titlepage.xhtml:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="calibre:cover" content="true"/>
        <title>Cover</title>
        <style type="text/css" title="override_css">
            @page {padding: 0pt; margin:0pt}
            body { text-align: center; padding:0pt; margin: 0pt; }
        </style>
    </head>
    <body>
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 400 600" preserveAspectRatio="none">
                <image width="400" height="600" xlink:href="cover.jpeg"/>
            </svg>
        </div>
    </body>
</html>

Note this line: <svg ... width="100%" height="100%.... So something in the conversion ends up making the image larger.

I can't remember what exactly, but I have vague recollections that the coverpage HTML was kept very minimal for a reason. So I'm a bit reluctant to change it for everyone.

Absolutely makes sense to me. Thought something like that was probably the case when I saw it. This probably only affects people who read the unmodified epubs on readers that don't make the cover image larger (so, not the calibre reader, and not the reader I use on my phone). So might not be worth making a change.

But you can easily change it for yourself in personal.ini settings: Epub Cover in Custom Ouput

This works, thank you. Missed this somehow. You can close this if you don't want to change anything!

JimmXinu / FanFicFare

Embiggen epub cover, add stylesheet to cover page #918