Weird Formatting Issues, Extra Spaces

[Rand Brittain]

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?

[Turtle91]

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.

[Rand Brittain]

I can't get Borkify to work, so I'll just post a bit of a page.

<div class="indent-2em">
      <p>“If something’s 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>“It’s not like that─I’m just a little out of place. I’m an island monkey. I don’t think I’ve ever stepped on wood so shiny.”</p>
    </div>

The CSS is as follows:

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;
}

[Rand Brittain]

And here's an example of what comes out:

[theducks]

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%

[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.

[theducks]

The only unusual (tome) is that Background: transparent

ADE was notorious for ditching a CSS with errors

[Rand Brittain]

Originally Posted by 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.

[Turtle91]

great...glad I could be of help...lol

[JSWolf]

Originally Posted by 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.

[Rand Brittain]

Originally Posted by JSWolf

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.

Oh, man, this is the first thing I do with any ePub, regardless.

The problem is fixed by changing the language settings in the xhtml tag; I just wanted to mention that because this particular ePub had 5,000 unused style rules when I first processed it. I guess Kodansha's default stylesheets are just ungodly huge and probably intended for Japanese-language texts.

[JSWolf]

Originally Posted by Rand Brittain

Oh, man, this is the first thing I do with any ePub, regardless.

The problem is fixed by changing the language settings in the xhtml tag; I just wanted to mention that because this particular ePub had 5,000 unused style rules when I first processed it. I guess Kodansha's default stylesheets are just ungodly huge and probably intended for Japanese-language texts.

There is no reason at all to have a single extra CSS class let along 5000. If I found it that bad, I'd want my money back.

[Rand Brittain]

Also it turns out that instead of an emdash it was using a totally different character called a "box drawings light horizontal" that won't display in a normal font, so there's also that.