Applying hard coded stylesheet

[antontkv]

Hi.

I noticed some visual issues with the downloaded books. No background-color for code blocks, squashed calloutlists, etc. Not to mention that styles in the downloaded book looks different from web site.

I found out that there is stylesheet that not mentioned in API response. I will use Fluent Python, 2nd Edition as an example. If you look at compiled page source, there will be two styleshees for the book:

<link rel="stylesheet" href="/files/public/epub-reader/override_v1.css" crossorigin="anonymous">
<link rel="stylesheet" href="/api/v2/epubs/urn:orm:book:9781492056348/files/epub.css" crossorigin="anonymous">

Second one comes from the API response, but first one override_v1.css actually hard coded in .js file. In the book page there is script file https://learning.oreilly.com/library/view/dist/main.6c3d155559e48f978143.js and there you can find this code:

...
injectStyles: 
async e=>{var t;let{chapter:n,getReaderRef:r}=e;const o=r(),i=[`${window.location.origin}/files/public/epub-reader/override_v1.css`,...(null===(t=n.related_assets)||void 0===t?void 0:t.stylesheets)
...

injectStyles styles function creates an array with first element hard coded ${window.location.origin}/files/public/epub-reader/override_v1.css and the rest stylesheets from the API response.

I took this styleesheet and added it to already downloaded book. Removing any mention of #book-content from it, since the book don't have this id. I removed this block:

#book-content {
    font-family: Noto Serif,serif !important;
    margin-bottom: 80px !important;
}

And used this regex (\s+|)#book-content(\s+|) to remove any other mention.

Here are comparison shots from the Calibre viewer:

Left: without override_v1.css, Right: with override_v1.css. Notice background-color for inline code and code blocks. Also fixed squashed list elements.

Also I added this css rule for better aligning of calloutlists:

#sbo-rt-content dl.calloutlist dt
{
  margin-bottom: 0 !important;
}

Left before adding css rule, right after.

Do you think that it possible to add this css improvements for downloaded books? It could be done by adding https://learning.oreilly.com/files/public/epub-reader/override_v1.css to every book, since O'Reilly is doing it anyway. Or to be save, the main\..*\.js file from book page could be parsed to look for any hard coded css file.

[hurlenko]

Hi @antontkv !

Thanks for your thorough research and awesome explanation of the issue. I remember seeing these same issues while reading the downloaded books but I never had time and motivation to dig any deeper. This looks so much better. This would still require some more investigation (is this override_v1.css file present in all the books, is it always the same, does it break anything else, kindle compatibility etc) but I will definitely try to incorporate this update once I have time (might be weeks from now).

Thanks again!