RFC: Style>Auto, fb2.css, epub.css, html5.css

[poire-z]

RFC: Style>Auto, fb2.css, epub.css, html5.css

[Frenzie]

I guess the answer should be to be able to pick a default per document type, although that sounds a bit annoying to implement. :-)

[poire-z]

So, html5.css will grow by 50%, with added proper selectors. It's obviously a bit slower to load a book, but not that much (a big book taking 34s on my Kobo with our old html5.css would now take 36 s to load).

If we want epub.css to benefit from the html5.css improvements (and not have to maintain things in 2 .css files), we can just @import html5.css at its top and just add the stuff from our existing epub.css that deviates from html5.css.

I did the exercice, and came up with the following.
These comments here are not my stylistic choices, they are the ones existing in our current epub.css (and most of them probably comes from CoolReader), I just tried to put into words some reasons that could explain to a newcomer why we have wanted/prefered these tweaks over the rendering suggestion of the HTML standard (which is what our html5.css will be).
I'm fine with most of them, we don't need here to talk about these choices - as we are all unconsciously addicted to them and would notice any small change and would probably be quite bothered (I can notice and be annoyed when a publisher override our default of text-indent: 1.2em with text-indent: 1em or 1.3em :))
(The only real thing I'm quite bothered with as a {color: gray;}, that I reset to black in my own patch.)

@import "html5.css"  /* HTML standard */

/* Extend html5.css with tweaks to make it more "book" looking and less
 * like a web page, especially needed with unstyled EPUB/HTML documents.
 * (styling similar to what we got with our older epub.css). */

/* Text justified by default */
body {
  text-align: justify;
}

/* Constant margin on all levels */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0.7em;
  margin-bottom: 0.5em;
  hyphens: none;
}
/* Less radical font size changes */
h1 { font-size: 150%; }
h2 { font-size: 140%; }
h3 { font-size: 130%; }
h4 { font-size: 120%; }
h5 { font-size: 110%; }
h6 { font-size: 100%; }

/* Paragraphs: no spacing between them, and text-indentation */
p {
  text-indent: 1.2em;
  margin-top: 0;
  margin-bottom: 0;
}

/* Blockquote: smaller margins, based on font size; unbalanced but fine */
blockquote {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 2em;
  margin-right: 1em;
}
blockquote:dir(rtl) {
  margin-left: 1em;
  margin-right: 2em;
}

/* HR: less 1990s HTML */
hr {
  border-style: solid;
}

/* Lists: no vertical margin, a bit of margin left added to our -cr-special padding */
ul, ol {
  margin-left: 1em;
  margin-top: 0;
  margin-bottom: 0;
}
ul:dir(rtl), ol:dir(rtl) {
  margin-left: unset;
  margin-right: 1em;
}

/* Definitions: smaller margins all around, dt bold */
dl {
  margin-left: 0;
}
dt {
  margin-left: 0;
  margin-top: 0.3em;
  font-weight: bold;
}
dd {
  margin-left: 1.3em;
}
dd:dir(rtl) {
  margin-left: unset;
  margin-right: 1.3em;
}

/* Tables: smaller font size (for less wrapping and less height taken on our small screens) */
table {
  font-size: 80%;
  margin: 3px 0;
  border-spacing: 1px; /* needed for separate border to not look uneven */
}
table table { /* stop imbricated tables from getting smaller */
  font-size: 100%;
}

/* A bit more default padding in cells */
td, th {
  padding: 3px;
}

/* Background by default on table headers, and text-align center */
th {
  background-color: #DDD;
  text-align: center;
}

/* Same for caption */
table caption {
  padding: 4px;
  background-color: #EEE;
}

/* Pre: smaller vertical margins, drop our inherited justification */
pre, xmp {
  text-align: left;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* sup/sub: smaller font size */
sup { font-size: 70%;  }
sub { font-size: 70%;  }

/* Make links noticable */
a {
  text-decoration: underline;
  color: gray;
}

/* EPUB3: also hide any <nav hidden=""> made available in the book content,
 * which could be a huge list of reference page numbers */
/* nav[hidden] { display: none; } */
/* Taken care of in html5.css by a generic [hidden] */


/* Keep ensuring this in legacy rendering */
h2, h3 {
  -cr-only-if: legacy -epub-document;
    page-break-before: always;
}

/* Old element or className based selectors involving display: that we need
 * to support for older gDOMVersionRequested (these were fixed in 20180528).
 * DO NOT MODIFY BELOW to not break past highlights */
@media (-cr-max-cre-dom-version: 20180527) {
  /* Images are now inline by default, and no more block with exceptions */
  img { text-align: center; text-indent: 0; display: block; }
  sup img { display: inline; }
  sub img { display: inline; }
  a img   { display: inline; }
  p img   { display: inline; }
  p image { display: inline; } /* non html */
  /* With dom_version < 20180528, unknown elements defaulted to 'display: inherit'
   * These ones here were explicitely set to inline (and some others not
   * specified here were also set to inline in fb2def.h */
  b, strong, i, em, dfn, var, q, u, del, s, strike, small, big, sub, sup, acronym, tt, samp, kbd, code {
      display: inline;
  }
  form { display: none; }
  .title, .title1, .title2, .title3, .title4, .title5, .subtitle { display: block; }
  .fb2_info { display: block; }
  .code     { display: block; }
}

(For reference for the curious, our future html5.css: html-standard.css.txt, with its default values we don't need to override).

Another way to go at that would be to keep only html5.css (and have it as the default for html/epubs/anything not FB2), and have all our above tweaks in a (huge) style tweak (named Book look or something), so it can be enabled/disabled globally or per-book (with the effect that a global change apply to past books, unilke our epub/html5.css choice). Oh, but it would then apply also to FB2 books :/ (unless I add some code to make sure it explicitely doesn't apply on FB2 documents).
I'm quite not sure what is the best.

Thoughts welcome.

[poire-z]

And if one has read up to here (thank you!), I'm still looking for thoughts about what to do with Wikipedia EPUBs :) #10770 (comment)

[mergen3107]

Hi @poire-z
No, back then I ended up leaving fb2.css as is, and only doing a few style tweaks to tweak a thing or two :D

I still do some books by hand though, via Book-specific style tweaks. For example, some books have different class names for images I would like to have centered.

[mergen3107]

I mean, current implementation is great: fb2 books open with fb2.css, epub with html (I think? I don't read many epubs, can't remember)

[poire-z]

I'll go with a ui.document.is_fb2, and handling different defaults whether is_fb2 or not (and preventing the use of our epub.css and html5.css with fb2).

I'm looking for some other wording or adjective than "eBook oriented" (that I picked from the User guide, but it feels it's not the best word) for nicknaming our epub.css:

Also, how do we spell "ebook" ? eBook, ebook, e-book, or just book ?

[Frenzie]

I'd just go with book. :-)

[mergen3107]

Reflowable books (except fb2)?

[poire-z]

Reflowable books (except fb2)?

That's an answer to which of my questions ? (sorry for asking, I asked so many :))

[mergen3107]

Also, how do we spell "ebook" ? eBook, ebook, e-book, or just book ?

@poire-z This one(s) :D
I just hardly can remember that we called anything "eBook". "Document", ultimately, but that is in the context of Gestures, for example (Reflowable/Fixed layout documents).

[poire-z]

Ok :)
Nope, that won't do.
It's for giving some title to our epub.css.
html5.css is to be "titled": HTML Standard rendering, because that's the title of https://html.spec.whatwg.org/multipage/rendering.html that it implements.

epub.css is our tweaks to that standard rendering to make it look more like a paper book (or book, or ebook) than like a web page.
I'd like to find something better than "book oriented" or "ebook oriented".
"book look" rhyme :) but feels a bit short.

[mergen3107]

Typographical book layout?
Printing press book?
Publishing book?
EPUB2 Standard book (or with 3 as well?)?

[Frenzie]

I'd like to find something better than "book oriented" or "ebook oriented".
"book look" rhyme :) but feels a bit short.

Electronic parchment
Arcane paper
Purple-dyed vellum

Maybe something in the direction of "traditional book"?

[poire-z]

?

The help_text:
This is our book-oriented stylesheet: it extends the HTML standard stylesheet with styles aimed at making HTML content look more like a book than like a web page (ie. justified text and indentation on paragraphs).
needs for 2 more alternative wordings in there :)

Printing press book feels a bit technical. What would sound/work better: paper book ? hardcopy book ? real book ?

[mergen3107]

Paginated books vs scrollable web pages?

[Frenzie]

Printing press book feels a bit technical. What would sound/work better: paper book ? hardcopy book ? real book ?

Just a regular paper book sounds best to me.

[poire-z]

So, going in #11527 with:

[Frenzie]

The alliteration in book look does amuse me. You could say book aesthetics if you wish to avoid that. I'll leave that for you to decide.

I think elsewhere in the descriptions we say i.e., if that's what we use? But maybe just (with justified text and…).

[poire-z]

I'll fix the ie, and move the parens nearer to what it applies to:
aimed at making HTML content look more like a paper book (with justified text and indentation on paragraphs) than like a web page.

I like the sound of boot loop book look :)
Traditional book aesthetics feels a bit artsy
Traditional book appearance ok but a bit wordy
Traditional book style could work in our context (but a bit redundant or ambiguous on the meaning of "style")
Traditional book (epub.css) feels a bit short and vague

[mergen3107]

Book layout?
Book formatting?
Book typesetting?

[Frenzie]

Like I said I like book look. ;)

…

On Sat, Mar 9, 2024, 13:37 mergen3107 ***@***.***> wrote: Book layout? Book formatting? Book typesetting? — Reply to this email directly, view it on GitHub <#11494 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABRQBPT7JDTUWY7WHPIGETYXL7AXAVCNFSM6AAAAABDZDK4B2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBWHA2DKNZXHA> . You are receiving this because you commented.Message ID: ***@***.***>