Method to Convert Fancy CSS to Everyday CSS?

[enuddleyarbl]

In general, my epubs have been fairly old and I've been playing around with converting their CSS styles (selectors) over to my standard set of CSS styles. No problem. Lately, I've run across some more "modern" CSS that short-circuits my brain so that I can't figure out what it's doing. Right now, I'm looking at the kepub version of Wilkie Colins' "The Woman in White" as formatted by Standard Ebooks:

https://standardebooks.org/ebooks/wi...woman-in-white

and, while it looks like I can mostly understand their CSS, I would prefer my old, plebian CSS. From an old, bloody thread:

https://www.mobileread.com/forums/sh...d.php?t=335913

I took a look at the formatting JSWolf came up with in place of what Standard Ebooks used in one of their books, and that's pretty much what I use (the h2 + p, hr + p selector is new to me and looks pretty useful). What I'd like to do is convert this book's CSS over. But, I don't know what the most efficient way to do it is. As a starting point, it looks like I can just rip out all the <section> and <header> stuff and well as things like role= and type= (most of which I don't understand).

Any other suggestions as a methodology?

EDIT: Tex2002ans kindly provided a lot of information in another thread:

https://www.mobileread.com/forums/sh...5&postcount=12

But, I was hoping for a more "nutshell" version for converting between Standard Ebooks' formats to my everyday formats.

[JSWolf]

The CSS from Standard EBooks is rubbish. They have no idea how to do is properly. KISS is the way to do it. They just want to use the most convoluted CSS they can. They even have some code in their CSS that causes RMSDK on Kobo to ignore the entire CSS. It was pointed out to them what the problem way, but they don't care.

I did take one of their book and instead of always trying to figure out what the CSS was doing, I just made simple CSS to do what needed to be done based on looking at the way the eBook displayed in Calibre's viewer.

Have a look at What exactly are Standard Ebook's "advanced epubs"? and when you get to post #34, download the eBook I posted and comoare the CSS from mine to theirs and you'll understand the problem.

[enuddleyarbl]

Originally Posted by JSWolf

The CSS from Standard EBooks is rubbish. They have no idea how to do is properly. KISS is the way to do it. They just want to use the most convoluted CSS they can. They even have some code in their CSS that causes RMSDK on Kobo to ignore the entire CSS. It was pointed out to them what the problem way, but they don't care.

I did take one of their book and instead of always trying to figure out what the CSS was doing, I just made simple CSS to do what needed to be done based on looking at the way the eBook displayed in Calibre's viewer.

Have a look at What exactly are Standard Ebook's "advanced epubs"? and when you get to post #34, download the eBook I posted and comoare the CSS from mine to theirs and you'll understand the problem.

Yep. That's what I've done. But, I'm wondering what your process was of converting from their formats to yours. Right now, I'm playing around with "The Woman in White" and it looks like all I have to do to get most of the way there is:

1. Bulk delete all the classes in one of their stylesheets and replace them with mine
2. Delete all their other stylesheets (and the links to them in the heads of each file
3. Add my own class= lines in the few places that need it.

Yes, I still have all those <section>, <header> and <footer> things. But, they're out of the way from the actual text and I can work with that.

[JSWolf]

I removed unused CSS. I combined all the CSS into one file. I dropped all the unnecessary <section> and other gunk. I made the chapter headers a single line as they don't need all that excess code. I converted it to ePub 2. Basically, I took their overly complicated code and made it simple code.

It was easier to go ePub 2 so I could easily blow away some of the ePub 3 mess they made.

[phillipgessert]

Personally I don’t bother trying to preserve anything in the original CSS if I’m already in there anyway. I try to see if cleaning up the markup seems like a reasonable task, and if it does I just trash the CSS entirely and replace it with a few lines of something really barebones.

[enuddleyarbl]

After deleting all their codes and replacing them with mine, I went through the book looking for things I needed to change. Most of it was fine. One thing I realized while I was doing that, though, was that they happened to use standard forms of <i>, <b>, <em>, <strong>, etc. tags (or at least any spans they used with custom classes on those also included the standard forms). If they hadn't done that (and I've seen books that used epub-i and epub-b for <i> and <b>), I would have lost those html codes in the text. So, I guess I should have checked for class names related to those before deleting them.

Also, JSWolf, how did you get rid of the <section> stuff? Did you use something like Diap's Editing Toolbag? Or, go through it manually and delete?

[JSWolf]

Originally Posted by DaveLessnau

After deleting all their codes and replacing them with mine, I went through the book looking for things I needed to change. Most of it was fine. One thing I realized while I was doing that, though, was that they happened to use standard forms of <i>, <b>, <em>, <strong>, etc. tags (or at least any spans they used with custom classes on those also included the standard forms). If they hadn't done that (and I've seen books that used epub-i and epub-b for <i> and <b>), I would have lost those html codes in the text. So, I guess I should have checked for class names related to those before deleting them.

Also, JSWolf, how did you get rid of the <section> stuff? Did you use something like Diap's Editing Toolbag? Or, go through it manually and delete?

This is why I don't blow away the CSS. I see what the specific class does amd either fix it or use my own.

As for the sections, yes, Diap's Editing Toolbag does a great job of deleting the <section> stuff. There's no need for it. A chapter title like in the book I edited needs only one line. It does not need a <section> or <div>.

[Karellen]

Oh wow. What an overly complex css (in my noobie eyes).

@DaveLessnau how comfortable are you with regex S&R. You could rid the code and replace with your own in just a few S&R quite easily.

For your <section search...

\n\s\s<section data\-parent=".*?" id=".*?" epub:type=".*?">\n

and then replace with nothing

Then search...

\s\s</section>\n\n</body>\n\n</html>

Replace...

\n\n</body>\n</html>

All going well, in two steps you have removed all the <section tags

[hobnail]

The Standard Ebooks versions may be more semantically correct but when the book is only for me that stuff doesn't matter; all I need is decent formatting. They seem to present themselves as the gold standard of semantically correct ebook formatting but in some ways they are wrong. For example, they use blockquote for what I think of as a block; letters, poetry, etc. But if you look at the w3c definition for blockquote it's quite clear that it's really for a quote, like an excerpt. What they could or should be using is the more mundane div. (For example, I have a div class called block that I use for letters, poetry, etc.)

With Standard Ebooks I don't think I've ever seen a book that they've put out that isn't also available elsewhere from the usual places for free. If I'm just reformatting a book to suit my own preferences I'd rather start with one from Project Gutenberg, Faded Page, etc. since there's not so much "junk" to deal with.

[enuddleyarbl]

Originally Posted by hobnail

...With Standard Ebooks I don't think I've ever seen a book that they've put out that isn't also available elsewhere from the usual places for free. If I'm just reformatting a book to suit my own preferences I'd rather start with one from Project Gutenberg, Faded Page, etc. since there's not so much "junk" to deal with.

Originally, I had a free version of the book from Amazon. But, when I loaded it up on my ereader, it was unreadable. I popped it into Calibre Editor and the formatting looked like it was done by a drunk on lsd. It wasn't any kind of newfangled, complex stuff. It was just badly done and fixing it would take longer than I wanted. So, I headed over to Project Gutenberg, downloaded a new copy there and, though better, it was still badly done (it looks like my old Amazon version was based off Gutenberg's). So, off I went to Standard Ebooks. Yes, the formatting is complex and not to my taste. But, at least the structure of the book was formatted decently.

As I was changing the formatting around, I was saying the exact same thing you mentioned: I can understand "publishers" wanting to go the semantically correct way (they have a lot of very different people reading things). But, for my purposes, I just need a simply formatted book that I can adjust as needed. I don't need thousands of lines of styling information across scores of classes. In this book, after I was done with it, I ended up with about a dozen:

@page { margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; }
blockquote {
  margin-top: 1em;
  margin-right: 1.7em;
  margin-bottom: 1em;
  margin-left: 1.7em;
  font-style: italic;
}
body { widows: 1; orphans: 1 }
h1, h2 {
  text-align: center;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}
hr {
  margin-top: 0.9em;
  margin-bottom: 0.9em;
  border: none;
}
hr::before {
  content: "***";
  display: block;
  text-align: center;
}
h2 + p, h3 + p, h4 + p, hr + p {
  text-indent: 0;
}
img {
  max-height: 100%;
  max-width: 100%;
}
p {
  margin-top: 0;
  margin-bottom: 1;
  text-indent: 1.2em;
}
.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  text-indent: 0;
}
.copy {
  font-size: small;
  margin-top: 0.5em;
  text-align: center;
  text-indent: 0;
}
.ded {
  text-align: center;
  text-indent: 0;
  margin-top: 3em;
}
.footnote {
  font-family: sans-serif;
  font-size: 0.7em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  margin-left: 4em;
  margin-right: 4em;
  text-indent: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  page-break-inside: avoid;
}

And, it was that many only because of the footnotes and a couple of more-specific classes that I added in since they keep recurring in various books.

Just as JSWolf said in that Standard Ebooks thread I referred to earlier, I wish SE would produce a simple, standard version of their books and leave the fancy stuff to their "Advanced" formatted version.

[PeterT]

Just curious as to whether you took a look at the MobileRead library. See https://www.mobileread.com/forums/sh...ad.php?t=95623 for instance.

Sent from my Pixel 4a using Tapatalk

[Quoth]

Originally Posted by hobnail

The Standard Ebooks versions may be more semantically correct but when the book is only for me that stuff doesn't matter; all I need is decent formatting. They seem to present themselves as the gold standard of semantically correct ebook formatting but in some ways they are wrong. For example, they use blockquote for what I think of as a block; letters, poetry, etc. But if you look at the w3c definition for blockquote it's quite clear that it's really for a quote, like an excerpt. What they could or should be using is the more mundane div. (For example, I have a div class called block that I use for letters, poetry, etc.)

With Standard Ebooks I don't think I've ever seen a book that they've put out that isn't also available elsewhere from the usual places for free. If I'm just reformatting a book to suit my own preferences I'd rather start with one from Project Gutenberg, Faded Page, etc. since there's not so much "junk" to deal with.

I think <blockquote> is really just for websites, maybe even stuff ignoring CSS. It does an indent by default and I have seen
<span class="s1"><blockquote class="bq1"><blockquoteclass="bq2"><blockquoteclas s="bq2">Some text</blockquote></blockquote></blockquote><blockquote class="bq1"><blockquoteclass="bq2"><blockquoteclas s="bq2">More text</blockquote></blockquote></blockquote></span>

Instead of
<p class="quote2">Some text</p><p class="quote2">More text</p>

The House of Random Penguins and Standard Books both seem to do pointlessly over-elaborate CSS.

[enuddleyarbl]

Originally Posted by PeterT

Just curious as to whether you took a look at the MobileRead library. See https://www.mobileread.com/forums/sh...ad.php?t=95623 for instance.

Sent from my Pixel 4a using Tapatalk

No. I hadn't even known about that forum. Thanks for the heads-up.

[JSWolf]

Originally Posted by Quoth

I think <blockquote> is really just for websites, maybe even stuff ignoring CSS. It does an indent by default and I have seen
<span class="s1"><blockquote class="bq1"><blockquoteclass="bq2"><blockquoteclas s="bq2">Some text</blockquote></blockquote></blockquote><blockquote class="bq1"><blockquoteclass="bq2"><blockquoteclas s="bq2">More text</blockquote></blockquote></blockquote></span>

Instead of
<p class="quote2">Some text</p><p class="quote2">More text</p>

The House of Random Penguins and Standard Books both seem to do pointlessly over-elaborate CSS.

I'm going to disagree with you on <blockquote>. <blockquote> is for offset text. Plain and simple.

[Turtle91]

Kinda hard to disagree with Quoth when it is a simple example of what he/she's (sorry Quoth don't mean to assume ) seen...

But...I will disagree with your disagreement and raise you one "are you kidding me?!"

Blockquotes are semantically for a "long quote", of which you can include a citation, etc. Short quotes (within a paragraph) semantically should use <q> ...although I don't think I've ever seen this used in the wild - especially in fiction.

Blockquote:

Definition and Usage
The <blockquote> tag specifies a section that is quoted from another source.

Browsers usually indent <blockquote> elements...

Tips and Notes
Tip: Use <q> for inline (short) quotations.

Offset text would be a <div>, usually surrounding a <p> (assuming multiple lines/paragraphs), unless it was a list item of some-such, then it would use <ol>/<ul> and <li> -or- <dl><dt><dd>, etc.

DIV:

Definition and Usage
The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Note: By default, browsers always place a line break before and after the <div> element.