font size

[Jocala]

I use calibre's web interface almost always via the Kindle Paperwhite browser. I really prefer COPS as it solves many issues presented by the native caliber content server, however I find COPS size is very difficult for me to read.

I've made changes to style-base.css that help somewhat:

body {
    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
    line-height:50px;
    color: #1c1c1c; /* Lighter on the eyes than #000 Black */
    margin: 0px; background: #cccccc; background-size: cover;
}

.container{
 background: #414141; border:1px solid #000;
    max-width:1200px;width:100%;margin:0 auto;position:relative; }

/* 768px and greater */
@media only screen and (min-width: 768px) {
h1 {font-size: 2em; line-height: 1em;}
body {  margin: 5px;
            font-size: 1.5em;/*12px/16px */
            font-weight:400; /* Better supported than 'lighter' attribute */
    }

My goal was to fill the Kindle browser's screen with a readable (to me) page. The changes above are being used with the default template. I'm not a css coder, it may be that these aren't the optimal way to achieve the desired result.

[horus68]

What is the template you are using in cops when viewing with Kindler?

Side note: Maybe its best to reopen the issue as it could be an improvement to be considered for all users. Even if I'm not a CSS guy! You could also reedit your messages above and enclose the code parts with the code formatting tag.

[Jocala]

Done. Thanks for the comment.

[Jocala]

I copied style-base.css with my changes to a new file, style-kindle.css. It appeared to drop in w/o problems and seems to function w/o errors. I'm sure it could be refined.

style-kindle.css.txt

[seblucas]

My experience with Kindle is that the basic font size is quite different from my Kobo. but if the modification are small it is possible to include them into COPS. We can detect Kindle / Kobo with their User Agent.

[Jocala]

style-kindle.css.txt

 if (preg_match('/Kindle/', $_SERVER['HTTP_USER_AGENT'])) {
       $data['customHeader'] = '<style media="screen" type="text/css">
        html { font-size: 75%; -webkit-text-size-adjust: 75%; -ms-text-size-adjust: 75%; }</style>';
    }

I see you already check for Kindle in index.php. I had tried making changes to the font settings there, but it had no effect. I further refined style-kindle.css, which is attached.

[seblucas]

That's what I had in mind, in the current version of the hack, I reduce the font size (font-size: 75%) but you had to make it bigger, that mean that depending on models the hack has to be different.

Can you try to change it to 125% (all 3 values) and see if it helps

As I see it the main change you made is to change:

• line-height from 18px to 50px
• body font-size from 0.85em to 1.5em

So changing the general font-size can help.

I don't think the change to container width is really that important.

[Jocala]

Adjusting the container width made COPS utilize the entire width of the Kindle screen, otherwise there are large borders of whitespace on either side of the display.

I've included some screenshots:

1.png: Kindle's native book list. This is more or less what I am trying to mimic.

COPS, using Kindle's experimental browser:

2.png: COPS recent additions with fonts @ 75% 3.png: COPS recent additions with fonts @ 125% 4.png: COPS recent additions with style-kindle.css

You'll notice that any changes impact the search field and graphic in the header.