View Single Post
Old 06-20-2014, 03:00 PM   #6
Tex2002ans
Wizard
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 2,306
Karma: 13057279
Join Date: Jul 2012
Device: Kobo Forma, Nook
Quote:
Originally Posted by Alda View Post
Can you be more specific re. InDesign clutter?
Reminds me a lot like not using Styles functionality in Microsoft Word or LibreOffice, and then exporting to HTML.

While doing things that way might LOOK fine on the surface, or be perfectly fine for a print edition, if you try to do anything besides print, your code is going to be mangled/unmaintainable.

When you design a book in InDesign without thinking "ebook FIRST", you cause yourself A MASSIVE amount of headaches when trying to do anything outside of PDF/print.

Let us say when designing the InDesign file, you forgo using Styles, and implement things like manual kerning tweaks, manual font-sizing, instead of specifying logical markup of "heading1" + "heading2" you decide to just resize+bold the text+change the font, etc. etc. When you export the book to EPUB, InDesign creates a massive amount of spans that are just worthless/redundant/overlapping.

For example, here is a sample from one of the latest InDesign -> EPUB conversions I cleaned up.

Here is the first page from the PDF from Chapter 7:

Click image for larger version

Name:	pg43PDF.png
Views:	273
Size:	38.3 KB
ID:	124399

As you can see, it looks perfectly fine on the surface... but, let us take a look at the EPUB code that was generated.

InDesign EPUB:

Click image for larger version

Name:	Chapter7InDesignEPUB.png
Views:	295
Size:	58.4 KB
ID:	124401

Quote:
<div class="generated-style">
<p class="chapter-number chapter-number-override" xml:lang="en-us"><span class="no-style-override">chapter</span> <span class="no-style-override-1">7</span></p>

<p class="chapter-heading" xml:lang="en-us">Market vs. State:</p>

<p class="chapter-heading" xml:lang="en-us">It Is the Overriding Distinction</p>

<p class="chapter-heading" xml:lang="en-us">in Economics and Politics<span class="no-style-override-2">*</span></p>
</div>
InDesign CSS:

Code:
p.chapter-number {
	font-family: "Poppl-Laudatio";
	font-weight: normal;
	font-style: normal;
	font-size: 0.83em;
	line-height: 1.20em;
	text-decoration: none;
	font-variant: small-caps;
	text-indent: 0em;
	text-align: center;
	color: #000000;
	margin: 0.90em 0em 2.25em 0em;
}
p.chapter-number-override {
	margin: 0.64em 0em 1.61em 0em;
}

span.no-style-override {
	font-size: 1.17em;
}
span.no-style-override-1 {
	font-size: 1em;
}

p.chapter-heading {
	font-family: "Poppl-Laudatio";
	font-weight: normal;
	font-style: normal;
	font-size: 1.83em;
	line-height: 1.27em;
	text-decoration: none;
	font-variant: normal;
	text-indent: 0em;
	text-align: center;
	color: #000000;
	margin: 0em;
}

span.no-style-override-2 {
	font-size: 1.33em;
	line-height: 1.88em;
}
Now, I went through, and stripped out a lot of the junk:

After:

Click image for larger version

Name:	pg43EPUB.png
Views:	286
Size:	59.2 KB
ID:	124400

Quote:
<h3 id="sigil_toc_id_4" title="7. Market vs. State: It Is the Overriding Distinction in Economics and Politics">Chapter 7</h3>

<h3 class="sigil_not_in_toc">Market vs. State: It Is the Overriding Distinction in Economics and Politics</h3>
Here is an example of the normal text.

InDesign EPUB:

Quote:
<p class="body-text" xml:lang="en-us"><span class="no-style-override-5">The point is, as we can readily see, the ability to</span> <span class="no-style-override-4">foresee</span> <span class="no-style-override-5">an event is not at all equivalent to</span> <span class="no-style-override-4">agreeing</span> <span class="no-style-override-5">to it. Yes, I can full well</span> <span class="no-style-override-4">predict</span> <span class="no-style-override-5">that if I move to the South Bronx, I’ll likely be victimized by street crime. But this is not at</span> <span class="no-style-override-4">all</span> <span class="no-style-override-5">the same thing as</span> <span class="no-style-override-4">acquiescing</span> <span class="no-style-override-5">in such nefarious activities. Yet, according to the “libertarian” argument we are considering, the two are indistinguishable.</span></p>
InDesign CSS:

Code:
p.body-text {
	font-family: "Minion Pro";
	font-weight: normal;
	font-style: normal;
	font-size: 0.92em;
	line-height: 1.20em;
	text-decoration: none;
	font-variant: normal;
	text-indent: 1.64em;
	text-align: justify;
	color: #000000;
	margin: 0.13em 0em 0em 0em;
}

span.no-style-override-4 {
	font-style: italic;
}

span.no-style-override-5 {
}
After:

Quote:
<p>The point is, as we can readily see, the ability to <i>foresee</i> an event is not at all equivalent to <i>agreeing</i> to it. Yes, I can full well <i>predict</i> that if I move to the South Bronx, I’ll likely be victimized by street crime. But this is not at <i>all</i> the same thing as <i>acquiescing</i> in such nefarious activities. Yet, according to the “libertarian” argument we are considering, the two are indistinguishable.</p>
You really just have to go through on a case-by-case basis and figure out exactly what classes are doing what (and if they are even relevant in an EPUB).

For example, color: #000000; is telling the text to be black. While this works perfectly fine on paper (or in a physical book), in an ebook, this sort of code is only going to cause problems (let us say a user wanted to change the color of their fonts).

InDesign introduces all of these overlapping font-sizes + font-heights + line-heights + other madness... who knows how certain devices would interpret that code. You would HOPE it would show up correctly, but your safest bet is to just strip that all out, and start from the basics, never even giving the chance for the code to be displayed wrong.

Side Note: If you right click on a class in Sigil, and press "Go To Link or Style", it should jump you directly to the class in the CSS file:

Click image for larger version

Name:	GoToStyle.png
Views:	268
Size:	48.8 KB
ID:	124397 Click image for larger version

Name:	GoToStyleCSS.png
Views:	263
Size:	37.5 KB
ID:	124398

This is extremely helpful in determining what classes do what. Although again, there is most likely going to be A TON of overlapping classes.

Other Side Note: If you don't think this code is that bad, there are WAY greater horrors that I have seen.

Last edited by Tex2002ans; 06-20-2014 at 03:08 PM.
Tex2002ans is offline   Reply With Quote