InDesign epub code cleanup

[paperwhite13]

There is now a dedicated topic just for that

[nabsltd]

Originally Posted by JSWolf

One reason for having naked tags is because they look better when editing eBooks.

Fixed that for you.

[issybird]

Originally Posted by nabsltd

Fixed that for you.

Moderator Notice
Please don't alter comments within a quote; it's a violation of the guidelines.

[chrisridd]

What sorts of automated tools are there that can help improve the HTML/CSS used in a book? For example:

• Moving all inline styles into a shared CSS file
• Only using classes/ids to style the exceptional cases, not the normal cases
• Removing redundant declarations from the CSS file
• Using more semantic HTML - from <div class="para"> to <p> for example
• ... others?

There are CSS "minifier" tools that may help removing redundant declarations, though (I just tried one) and they seem to optimise for compactness and perhaps not human readability.

Personally I'd kill for a tool that could correctly replace HarperCollins' awful typographical mess in their Discworld books of:

<span class="smallCaps">HELLO I'M DEATH</span>

and

.smallCaps { font-size: small }

(usually much more complex) into:

<span class="smallCaps">Hello I'm Death</span>

and

.smallCaps { font-variant: small-caps }

But this is a really really specific itch

[Quoth]

Originally Posted by chrisridd

Personally I'd kill for a tool that could correctly replace HarperCollins' awful typographical mess in their Discworld books of:

<span class="smallCaps">HELLO I'M DEATH</span>

and

.smallCaps { font-size: small }

They are doing that because there are ereaders and versions of apps (needed for DRM or Library loans) that don't at all support 'small caps' and it's not semantically small caps anyway. Sometimes the font doesn't have it and I forget if Kindle on iOS or mobi on old Kindles does it.

Death speaks in all upper case / capitals. Unlike some newspaper style guides for AM PM BC AD NATO FM etc it doesn't have to be small caps or transformed sentence case.

Your example of small caps entered in sentence case and transformed in is typically for the start of a paragraph after a break or heading.

I'm sure there are far worse examples of crazy on HarperCollins, The house of Random Penguins, or small publishers like Lume.

Gutenberg has a weird style guide and some of their content uses multiple nested blockquotes simply to change margin. Those can result in a column of broken single words. Standard eBooks goes to an opposite extreme

[Turtle91]

There isn’t going to be a completely automatic tool to do that, but there are a lot of different tools to do specific things. You just need to learn to use those tools.

• Moving all inline styles into a shared CSS file source software or plug-in
• Only using classes/ids to style the exceptional cases, not the normal cases regex
• Removing redundant declarations from the CSS file plug-in
• Using more semantic HTML - from <div class="para"> to <p> for example regex
• ... others?

The software authors use to create the book SHOULD have the option to export using a css stylesheet instead of inline styling. If you don’t have access to the source file then Sigil (or Calibre IIRC) have plugins that can do that.

Regular expressions (regex) is a type of advanced search that you can use to find/replace phrases/text. It can easily make hundreds, or thousands, of changes in seconds. Just remember, with great power comes great risk (or something like that ). It can totally wreck your text if you make a mistake - so save/backup early and often.
Calibre has a built-in tool called Regex Functions that can do Title Case (Sigil has a plug-in). As Quoth mentioned, DEATH speaks in all caps, but a regex wouldn’t know the difference between DEATH speaking and any other smallcaps. You, the coder, needs to make that distinction when you use the tools. (I haven’t read all the discworld books, but I don’t remember them specifying that he HAD to use all caps - it could be that was the only kind of typography they had to use at the time to give it that importance???)

Regex example:
Find: <div class="para">(.*?)</div>
Replace: <p>\1</p>

You can easily change the styling in the css stylesheet.

[chrisridd]

Originally Posted by Quoth

They are doing that because there are ereaders and versions of apps (needed for DRM or Library loans) that don't at all support 'small caps' and it's not semantically small caps anyway. Sometimes the font doesn't have it and I forget if Kindle on iOS or mobi on old Kindles does it.

Yes that's likely the reason the publisher's decided to go for the lowest common denominator. Personally I don't care what limitations are in Kindle for iOS or mobi (etc), I've got an epub. But I can certainly understand the publisher's desire to do as little as possible.

Death speaks in all upper case / capitals.

Actually, no. I went back to the Colour (sic) of Magic and it does really look like small-caps. Screenshot hopefully attached.

My Corgi paperback copies are buried under a mound of other stuff so I can't check them readily.

[Jellby]

Originally Posted by chrisridd

Personally I don't care what limitations are in Kindle for iOS or mobi (etc), I've got an epub.

That's an epub limitation too. At least in epub2, font-variant is not among the required CSS properties, so epub readers can ignore it and still call themselves compliant. Most notably, ADE does not render small caps (or used not to).

If it's for your own use, fine. I've also changed all those to small caps and made sure they render correctly in KOReader

[chrisridd]

Originally Posted by Jellby

That's an epub limitation too. At least in epub2, font-variant is not among the required CSS properties, so epub readers can ignore it and still call themselves compliant. Most notably, ADE does not render small caps (or used not to).

Is that still a limitation for epub3? These happened to be epub3 books.

Judging from this ancient thread, ADE can render small-caps if the conditions are all correct.

[JSWolf]

Originally Posted by Turtle91

There isn’t going to be a completely automatic tool to do that, but there are a lot of different tools to do specific things. You just need to learn to use those tools.

• Moving all inline styles into a shared CSS file source software or plug-in
• Only using classes/ids to style the exceptional cases, not the normal cases regex
• Removing redundant declarations from the CSS file plug-in
• Using more semantic HTML - from <div class="para"> to <p> for example regex
• ... others?

The software authors use to create the book SHOULD have the option to export using a css stylesheet instead of inline styling. If you don’t have access to the source file then Sigil (or Calibre IIRC) have plugins that can do that.

Regular expressions (regex) is a type of advanced search that you can use to find/replace phrases/text. It can easily make hundreds, or thousands, of changes in seconds. Just remember, with great power comes great risk (or something like that ). It can totally wreck your text if you make a mistake - so save/backup early and often.
Calibre has a built-in tool called Regex Functions that can do Title Case (Sigil has a plug-in). As Quoth mentioned, DEATH speaks in all caps, but a regex wouldn’t know the difference between DEATH speaking and any other smallcaps. You, the coder, needs to make that distinction when you use the tools. (I haven’t read all the discworld books, but I don’t remember them specifying that he HAD to use all caps - it could be that was the only kind of typography they had to use at the time to give it that importance???)

Regex example:
Find: <div class="para">(.*?)</div>
Replace: <p>\1</p>

You can easily change the styling in the css stylesheet.

Removed redundant CSS can also be done with the source software. calibre can remove extra CSS without a plugin as it's a built-in function of the editor.

As for Death, the eBooks having him speaking in all caps but uses smallcaps instead of lowercase. So in order to make sure this works in all cases, a smaller font size is used instead of small caps in CSS. If you use font-variant: small-caps instead of a smaller font size, you can spoil the effect in programs that do not support small-caps.

If you decide to use small-caps, you have to make sure that it's OK when it doesn't work. For example, 3P.M. will be OK if they are not in small-caps. Death speaking will not be OK.

As for the regex example, that can be done (and more) with Diaps Editing Toolbag. It's a plugin for calibre editor and Sigil. I use it a lot.

[JSWolf]

Originally Posted by Quoth

I'm sure there are far worse examples of crazy on HarperCollins, The house of Random Penguins, or small publishers like Lume.

Penguin does indeed do something worse. They have a file called next-reads.xhtml. That links to a 1700x1200 sized image and they embed 2 fonts for a small bit of text on the page.

Taking a Penguin eBook and just removing the HTML, image, and fonts results in a smaller ePub. Original ePub is 1604KB and then edited ePub is 1550KB. To me, that's much worse then Death speaking. That (IMHO) is a really good example of code bloat.

[JSWolf]

Originally Posted by chrisridd

Is that still a limitation for epub3? These happened to be epub3 books.

Judging from this ancient thread, ADE can render small-caps if the conditions are all correct.

The font size instead of small-caps is a fallback for ePub2. The version of RMSDK used on Kobo does not support small-caps. So anyone reading Discworld with ePub would not have the correct smallcaps. This was a major blunder (IMHO) by the ePub standards to make font-variant optional in ePub2.

Sony Readers cannot render small-caps and there are other old Readers that also cannot.

There is no fallback for small-caps except not to use it.

[Turtle91]

Originally Posted by JSWolf

The font size instead of small-caps is a fallback for ePub2. The version of RMSDK used on Kobo does not support small-caps. So anyone reading Discworld with ePub would not have the correct smallcaps. This was a major blunder (IMHO) by the ePub standards to make font-variant optional in ePub2.

Sony Readers cannot render small-caps and there are other old Readers that also cannot.

There is no fallback for small-caps except not to use it.

Saying "there is no fallback" is not quite accurate. It might not look exactly the same, but that doesn't mean it doesn't work. Using media queries allows you to change the way things are displayed.

for example - and this is a simplification Jon not a proper MQ:

HTML:
<p>Death said "<span class="death">They could hear me roar in Middengard!</span>"</p>

CSS:
Media query - Does it support small-caps:
    death {font-variant:small-caps}

Media query - Does it support text-transform but NOT small-caps:
    death {text-transform:uppercase; font-size:.9em}

Media query - Does device support color but NOT small-caps:
    death {color:blue}

Media query - is it Jon's e-ink device and doesn't support anything??
    death {}

The most basic styling (none) is still readable and makes perfect sense. The user will not complain because they aren't expecting any styling on their ancient device.

That is a basic Media Query concept example. That doesn't take into account the possibilities of basic Cascading principles of CSS where the most recent style (lowest on the list) has priority. eg. Put your more capable css last in the list...if the device doesn't support it, then it will ignore it and go with what is earlier in the list.

[JSWolf]

Originally Posted by Turtle91

Saying "there is no fallback" is not quite accurate. It might not look exactly the same, but that doesn't mean it doesn't work. Using media queries allows you to change the way things are displayed.

How would you handle a media que

for example - and this is a simplification Jon not a proper MQ:

HTML:
<p>Death said "<span class="death">They could hear me roar in Middengard!</span>"</p>

CSS:
Media query - Does it support small-caps:
    death {font-variant:small-caps}

Media query - Does it support text-transform but NOT small-caps:
    death {text-transform:uppercase; font-size:.9em}

Media query - Does device support color but NOT small-caps:
    death {color:blue}

Media query - is it Jon's e-ink device and doesn't support anything??
    death {}

Attachment 206317

The most basic styling (none) is still readable and makes perfect sense. The user will not complain because they aren't expecting any styling on their ancient device.

That is a basic Media Query concept example. That doesn't take into account the possibilities of basic Cascading principles of CSS where the most recent style (lowest on the list) has priority. eg. Put your more capable css last in the list...if the device doesn't support it, then it will ignore it and go with what is earlier in the list.[/QUOTE]
How would you write a media query that would override the font size and give you small-caps?

[Turtle91]

I will leave that as a homework assignment…