I recently bought a copy of some translated Japanese books made by Kodansha. The book isn't actually in Japanese, but it looks like it uses Kodansha's stylesheets and so forth, and it's doing some
weird things when I send it to an ebook reader. It looks completely normal in Calibre or Sigil, but when I send it to my Kobo or my Bookeen Diva, there's a giant space after every apostrophe and some letters will just disappear.
I've cleaned out several thousand unused styles and I can't find anything in them that I would expect to cause this. The encoding is UTF-8, just like the ebooks I make myself. Can anybody tell me what the source of this problem might be?
It might make it easier to help if we could see the CSS and a sample of the HTML that exhibits the error. If it is copyrighted, then you can
Borkify it before posting.
I can't get Borkify to work, so I'll just post a bit of a page.
Code
<div class="indent-2em"> <p>If somethings on your mind, just say it.</p> </div> <div class="indent-2em"> <p>The man seemed bothered by her question.</p> </div> <div class="indent-2em"> <p>Its not like that─Im just a little out of place. Im an island monkey. I dont think Ive ever stepped on wood so shiny.</p> </div>
The CSS is as follows:
Code
body { font-size: 100%; vertical-align: baseline; background: transparent; text-align: justify;
}
div, p { display: block; margin: 0; padding: 0;
}
body, div, p { text-indent: 0;
}
body > p, div > p { text-indent: inherit;
}
h1, h2, h3, h4, h5, h6 { display: block; margin: 0; padding: 0; font-size: 100%; font-weight: inherit; background: transparent;
}
img { width: auto; height: auto; margin: 0; padding: 0; border: none; vertical-align: baseline; background: transparent;
}
a { font-style: inherit; font-weight: inherit; text-decoration: inherit; color: inherit; background: transparent;
}
.align-center { text-align: center;
}
.align-right, .align-end { text-align: right;
}
.hltr a { text-decoration: underline;
}
a:link, a:visited, a:hover, a:focus, a:active { color: #00f;
}
img.gaiji, img.gaiji-line, img.gaiji-wide { display: inline-block; margin: 0; padding: 0; border: none; background: transparent;
}
img.gaiji { width: 1em; height: 1em;
}
.hltr img.gaiji, .hltr img.gaiji-line, .hltr img.gaiji-wide { vertical-align: text-bottom;
}
.fit { display: inline-block; page-break-inside: avoid; max-height: 100%; max-width: 100%;
}
.hltr .fit { vertical-align: top;
}
.super { font-size: x-small; vertical-align: super;
}
.hltr .gfont, .vrtl .gfont { font-family: sans-serif;
}
.font-090per { font-size: 90%;
}
.font-110per { font-size: 110%;
}
.bold { font-weight: bold;
}
.italic { font-style: italic;
}
.indent-2em { text-indent: 10%;
}
.hltr .h-indent-2em { text-indent: -2em; padding-left: 2em;
}
.hltr .start-3em { margin-left: 3em;
}
.hltr .start-5em { margin-left: 5em;
}
.hltr .end-3em { margin-right: 3em;
}
.hltr .align-right, .vrtl .hltr .align-right { text-align: right; padding-left: 3em;
}
a:visited { color: #00008b;
}
.cover-page .main { margin: 0; padding: 0; text-align: center;
}
.image-page .main { margin: 0; padding: 0; text-align: center;
}
And here's an example of what comes out:
image »It looks like a space after the apostrophe
The body style is JUSTIFY
the space allow the justify to pad in that plac. Normally it is just whatever's
no space
Also the style for the paragraph indent (2em) reads 10%
It's not normal for justified text to behave that way. It's
definitely not normal for it to split "they're" into "they" and "re" on two separate lines, so I don't think it can be a justification issue.
The text is also not supposed to be italic and Calibre and Sigil don't render it that way.
The only unusual (tome) is that Background: transparent
ADE was notorious for ditching a CSS with errors
Quote theducks
ADE was notorious for ditching a CSS with errors
Ah! Good point. That would explain why it keeps intermittently reading everything in italic, but only sometimes. Let me run ePubCheck on it and make sure it's
completely error-free...
But no. Correcting everything that ePubCheck doesn't like still doesn't solve the problem.
/stares
Ah! I found it! The xhtml attribute still has lang:"ja" set. I knew it was going to be something like that. Switching it to lang:"en" fixes all the issues.
great...glad I could be of help...lol
Quote Rand Brittain
It's not normal for justified text to behave that way. It's definitely not normal for it to split "they're" into "they" and "re" on two separate lines, so I don't think it can be a justification issue.
The text is also not supposed to be italic and Calibre and Sigil don't render it that way.
Take this ePub and load it in the Calibre editor. Then fromt he Tools menu, select "Remove unused CSS rules". This will remove any CSS classes that are not used in both the CSS and the HTML. If there is an error in the CSS that's not being used, then that will go away. The next thing to do is check for errors using Calibre's error checker. That's the icon that looks like a bug. Fix any errors showing there. Then run epubcheck. If you don't have epubcheck, install the epubcheck plugin for the editor.
One final thing to do is from the Tools menu select "Congress images losslessly". This will remove the crud inside the images without changing the image quality. By removing the crud, you make them smaller.
And finally, test your ePub in ADE and see what happens.
