Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
poire-z opened this issue Feb 25, 2024 · 21 comments · Fixed by #11527
Closed

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

poire-z opened this issue Feb 25, 2024 · 21 comments · Fixed by #11527
Labels
enhancement
Milestone
2024.04

Comments

@poire-z
Copy link
Contributor

poire-z commented Feb 25, 2024

I'll soon be PR'ing stuff to crengine to support most of the HTML standard specs, see koreader/crengine#551.
Nothing fancy, just some old stuff we may still find in documents (like <table cellpadding="3" border valign="bottom"> and... <body bgcolor="red" text="blue"> and <font face="Georgia" size=2>, and <center> !, so that KOReader and crengine are ready for when HTML2 comes out in a year or two, in 1997 or 1998 ! :)

There will be style tweaks to disable that possibly annoying stuff, but it's better to support that kind of stuff than not (cf. #10770).

So, this will update html5.css.

Then, we have our epub.css, that is currently lightweight, not having as much stuff as html5.css, but still being good enough for most books. But still...
I'm not yet deciding if our default should change (#10770 (comment)) - but see next post.

Anyway, users can and will be able to chose their default between epub.css or html5.css as currently.
But there is an issue with setting html5.css as the default: FB2 documents will then open with html5.css ! which will be bad.
That means that people reading FB2 can't decide to set html5.css as their default for EPUBs, and are stuck with epub.css (and its side effects on styled publisher books).

So, what are your thoughts about this Style > Auto ? Does it has some sense? Should we get rid of it?
Should we force FB2 to open with fb2.css no matter what has been set as the default (which then will be a default for all HTML based documents, so not FB2) ?
@mergen3107 : I remember you have tweaked our fb2.css to your liking. Do you override ours with yours? Have you given it another name? How do you get it to apply on new FB2 books you open?

Any other thoughts?
@Frenzie
Copy link
Member

Frenzie commented Feb 25, 2024

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
Copy link
Contributor Author

poire-z commented Feb 25, 2024 •
edited

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
Copy link
Contributor Author

poire-z commented Feb 25, 2024

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
Copy link
Contributor

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
Copy link
Contributor

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)

This was referenced Feb 26, 2024
Closed
Merged
@poire-z
Copy link
Contributor Author

poire-z commented Mar 3, 2024

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:
image

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

@Frenzie
Copy link
Member

Frenzie commented Mar 3, 2024

I'd just go with book. :-)

@mergen3107
Copy link
Contributor

Reflowable books (except fb2)?

@poire-z
Copy link
Contributor Author

poire-z commented Mar 7, 2024

Reflowable books (except fb2)?

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

@mergen3107
Copy link
Contributor

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
Copy link
Contributor Author

poire-z commented Mar 7, 2024

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
Copy link
Contributor

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

@Frenzie
Copy link
Member

Frenzie commented Mar 7, 2024

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
Copy link
Contributor Author

poire-z commented Mar 8, 2024

image
image
?

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
Copy link
Contributor

Paginated books vs scrollable web pages?

@Frenzie
Copy link
Member

Frenzie commented Mar 8, 2024

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 poire-z mentioned this issue Mar 9, 2024
Merged
@poire-z
Copy link
Contributor Author

poire-z commented Mar 9, 2024

So, going in #11527 with:
image

@Frenzie
Copy link
Member

Frenzie commented Mar 9, 2024 •
edited

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
Copy link
Contributor Author

poire-z commented Mar 9, 2024

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
Copy link
Contributor

Book layout?
Book formatting?
Book typesetting?

@Frenzie
Copy link
Member

Frenzie commented Mar 9, 2024 via email

@poire-z poire-z added this to the 2024.04 milestone Mar 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
2024.04
Development

Successfully merging a pull request may close this issue.

bump crengine: better conformance to the HTML Standard rendering poire-z/koreader
3 participants
@Frenzie @mergen3107 @poire-z