Calibre's epub Viewer: Custom layout & style

README.md

Notes to customize Calibre's Epub Viewer layout and style.

• I don't share a copy of Calibre's configuration folder (it contains more configuration, like menu layouts).
• I'm under Debian/Linux, but thoses notes can be adappted to the other versions.

---

Préférences / Styles

• Custom color scheme:

"background": "#fffff2",
"foreground": "#1b1b1b",
"link": "#000758",
"margin_bottom": "#fffff2:#484848",
"margin_left": "#fffff2:#484848",
"margin_right": "#fffff2:#484848",
"margin_top": "#fffff2:#484848",

• Stylesheet:

Check the attached style.css file.

style.css is inspired by normalize.css, some advices from MobileRead and my own preferences. It adds some elements like the column separator and it corrects a lot of issues with tables, images and margins.

⚠️ Warning:

style.css contains an override to add a dotted separator in a 2 pages layout. But, for a year now, Calibre decided to write the "column-rule" inside the element.style of the body with "!important". To display the separator you have to modify the source code or modify some files installed by the release.

Instruction to remove "!important" for body.style's "column-rule"

• The issue is in the source code line 302 in src/pyj/read_book/paged_mode.pyj, all is marked as !important.:

  set_important_css(document.body, column_gap=gap + 'px', column_width=col_size + 'px', column_rule='0px inset blue',
  min_width='0', max_width='none', min_height='0', max_height='100vh', column_fill='auto',
  margin='0', border_width='0', padding='0', box_sizing='content-box',
  width=scroll_viewport.width() + 'px', height=scroll_viewport.height() + 'px', overflow_wrap='break-word'
  )

• If you build from sources, you can remove column_rule='0px inset blue', from the list and add document.body.style.columnRule = "0px inset blue"; above it.

• If you installed a release, you can patch the files /usr/share/calibre/viewer.js and /usr/share/calibre/content-server/index-generated.html with the 2 patch files included in the gist:

sudo patch /usr/share/calibre/content-server/index-generated.html < index-generated.html.patch 
sudo patch /usr/share/calibre/viewer.js < viewer.js.patch

Préférences / Page

• Margins
  • left/right: 60
  • top/bottom: 40
• Page Mode
• Landscape/Portrait: 2
• height/width: 0
• aspect ration: no (I use css dor that)

Préférences / Header & Footer

• Header
  • Left: Title
  • Middle: Serie
  • Right: Author
• Footer
  • Left: Parent Section
  • Middle: Current Section
  • Right: Position

Préférences / Fonts

• Default: Serif
• Family: IBM Plex (serif text, sans text, mono text, https://github.com/IBM/plex/releases/latest)
• Zoom steps: 20%
• Minimal font size: 9px

TTS

I use Piper with speechdispatcher on linux.

https://github.com/rhasspy/piper

Font Size

• 18px

---

index-generated.html.patch

--- index-generated.html	2024-10-18 09:48:06.000000000 +0700
+++ index-generated.html	2024-11-12 10:17:05.034508591 +0700
@@ -28382,7 +28382,8 @@
             }
             screen_block = scroll_viewport.block_size();
             col_and_gap = col_size + gap;
-            ρσ_interpolate_kwargs.call(this, set_important_css, [document.body].concat([ρσ_desugar_kwargs({column_gap: gap + "px", column_width: col_size + "px", column_rule: "0px inset blue", min_width: "0", max_width: "none", min_height: "0", max_height: "100vh", column_fill: "auto", margin: "0", border_width: "0", padding: "0", box_sizing: "content-box", width: scroll_viewport.width() + "px", height: scroll_viewport.height() + "px", overflow_wrap: "break-word"})]));
+	    document.body.style.columnRule = "0px inset blue";
+            ρσ_interpolate_kwargs.call(this, set_important_css, [document.body].concat([ρσ_desugar_kwargs({column_gap: gap + "px", column_width: col_size + "px", min_width: "0", max_width: "none", min_height: "0", max_height: "100vh", column_fill: "auto", margin: "0", border_width: "0", padding: "0", box_sizing: "content-box", width: scroll_viewport.width() + "px", height: scroll_viewport.height() + "px", overflow_wrap: "break-word"})]));
             document.body.style.setProperty("-webkit-margin-collapse", "separate");
             c = first_child(document.body);
             if (c) {

style.css

html {
  line-height: 1.17;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  text-rendering: optimizeLegibility !important;
  widows: 1 !important;
  orphans: 1 !important;
}

body.calibre-viewer-paginated[style] {
  column-rule: 5px dotted gray !important;
  text-rendering: optimizeLegibility !important;
  widows: 1 !important;
  orphans: 1 !important;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
  page-break-after: avoid;
}

h2,
h3,
h4,
h5,
h6 {
  margin: 0.34em 0;
  page-break-after: avoid;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

p {
  widows: 1 !important;
  orphans: 1 !important;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
  background-color: #e5f2e5;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

body.cover-fill img {
    object-fit: contain;
}

img.coverimage {
    object-fit: contain;
    height: auto;
}

img {
  border-style: none;
  max-width: 95%;
  max-height: 95%;
  height: auto;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

table {
  max-width: 95%;
}

table td {
  vertical-align: center;
}

table p {
  text-indent: 0;
}

table .row img {
  max-width: 100px;
  max-height: 100px;
}

viewer.js.patch

--- viewer.js	2024-10-18 23:44:44.000000000 +0700
+++ viewer.js	2024-11-12 10:17:34.970837846 +0700
@@ -26362,7 +26362,8 @@
             }
             screen_block = scroll_viewport.block_size();
             col_and_gap = col_size + gap;
-            ρσ_interpolate_kwargs.call(this, set_important_css, [document.body].concat([ρσ_desugar_kwargs({column_gap: gap + "px", column_width: col_size + "px", column_rule: "0px inset blue", min_width: "0", max_width: "none", min_height: "0", max_height: "100vh", column_fill: "auto", margin: "0", border_width: "0", padding: "0", box_sizing: "content-box", width: scroll_viewport.width() + "px", height: scroll_viewport.height() + "px", overflow_wrap: "break-word"})]));
+	    document.body.style.columnRule = "0px inset blue";
+            ρσ_interpolate_kwargs.call(this, set_important_css, [document.body].concat([ρσ_desugar_kwargs({column_gap: gap + "px", column_width: col_size + "px", min_width: "0", max_width: "none", min_height: "0", max_height: "100vh", column_fill: "auto", margin: "0", border_width: "0", padding: "0", box_sizing: "content-box", width: scroll_viewport.width() + "px", height: scroll_viewport.height() + "px", overflow_wrap: "break-word"})]));
             document.body.style.setProperty("-webkit-margin-collapse", "separate");
             c = first_child(document.body);
             if (c) {

Tested column-rule at 150px vs 5px, to see if it affects the layout for this issue.