Chapter Heading formate displayed wrong in Kobo

[Kaylee Skylyn]

Not sure if this or the Kobo forum is the right place...but ended up with here. I like the chapter headings that have the small "Chapter" with the large # like in White Fang from Feedbooks (that comes default on Aldiko). Anyhow the problem is on my Kobo it is currently coming out wrong. The chapter is lowered but the number is small and way to high. Also looks fine/as intended in Calibre. See attachment with my Kobo on the left (displaying it incorrectly) and my cell with Aldiko on the right (displaying it correctly).

Is there a code solution or is it a Kobo issue that can't be corrected?

(apologies if its been raised before...I've been away for some time and only just trying to address this now, thought it was a mistake I made coding a book until I loaded White Fang and it also looked this way)

Edit: Forgot the code:

<h2><span class="chapterHeader"><span class=
"translation">Chapter</span> <span class="count">1</span></span>

and in the CSS:

h2 {
  padding-top:0;
  display:block;}

.chapterHeader {
  height:60px;
  border:1px solid #000;
  display:block;
  margin-bottom:20px;
  background-color:#FFF;}
  
.chapterHeader .translation {
  float:left;
  font-weight: normal;
  margin-top:38px;
  margin-left: -8px;
  margin-bottom: 0px;
  padding-right: 16px;
  padding-left: 5px ;
  padding-bottom: 0px;
  padding-top: 0px;
  font-size:26px;
  background-color:#FFF;}
                             
.chapterHeader .count {
  line-height: 100%;
  font-style:normal;
  font-weight: normal;
  text-transform:uppercase;
  font-size:94px;
  margin-right:18px;
  margin-top:-14px;
  margin-bottom: -20px;
  float:left;
  padding:0px;
  background-color:#FFF;}

[Turtle91]

Your code also appears correctly when viewed in Sigil. I'm thinking it may be a kobo issue??? Unfortunately, I have zero experience with Kobos.

Good Luck!

[GeoffR]

Setting font-size in units of px will not work. For best results use em or %.

Also keep in mind that the default font on Kobos is Georgia which has those funny lowercase style numerals.

My advice would be not to use units of px for anything, except perhaps for SVG where it can be rescaled to fit the screen, because even if you get it looking right on one specific device it will be wrong on every other one with a different screen resolution or pixel density.

[Notjohn]

Originally Posted by GeoffR

Setting font-size in units of px will not work. For best results use em or %.

Someone posted just this morning on the KDP forum that an epub uploaded to Barnes & Noble (via Draft2Digital) had problems precisely because Nook only obeys sizes in pixels. Is that not the case?

[Kaylee Skylyn]

The px HAD been working.
(I agree it is not the BEST way to do things but it can/has/does does work for some things...but certainly not the first choice for size unit. Especially for font size. But this was not created by me. The book came from FeedBooks and I have just borrowed that same code for my personal uses. This is the first time it has not been working.)

This code was working on everything EXCEPT the Kobo.

Well I tried converting to EM, because everything is worth a try, it is good advice, and em is a better way for font size rendering....if it can be adapted to the application.

And thanks for the note about the default font. That is an annoying change too so I changed that in the code so it hopefully at least looks reasonably like I want it.

Now I have found a way that it mostly works...but it also create new (and more) issues. Looks find in Sigil and in Calibre but on the phone in Aldiko it messes up one way and on the Kobo it messes up a different way. So...at a loss.
So very frustrating readers just can't obey the standards and not mess things up.

Notjohn: I do not have a Nook so can't speak to it.

New code:

.chapterHeader {
  height:4.2em;
  border:1px solid #000;
  display:block;
  margin-bottom:1.5em;
  background-color:#FFF;}
  
.chapterHeader .translation {
  float:left;
  font-weight: normal;
  margin-top:1em;
  margin-left: -.2em;
  margin-bottom: 0em;
  padding-right: 1.2em;
  padding-left: .3em ;
  padding-bottom: 0em;
  padding-top: 0em;
  font-size:2em;
  font-family:"Times New Roman";
  background-color:#FFF;}
                             
.chapterHeader .count {
  line-height: 100%;
  font-style:normal;
  font-weight: normal;
  text-transform:uppercase;
  font-size:6.5em;
  margin-right:.2em;
  margin-top:.75em;
  margin-bottom: -.3em;
  float:left;
  padding:0em;
  font-family:"Times New Roman";
  background-color:#FFF;}

And photo of the results attached.
Kobo: Sized right but the "Chapter" is bumped up to high.
Aldiko: right scale between "Chapter" and the # but the header is much much to small considering the font size...seeing as the "Chapter" is suppose to be 2 em big but its half the size of the main body text....not sure whats up with that.

[GeoffR]

This is what I came up with. It looks the same on my Kobo and in Calibre:

Spoiler:

<h2 class="chapter"><span class="ch"><span class="ct">Chapter</span><span class="cn"> 2</span></span></h2>

.chapter {
  font-weight: normal;
  font-size:2em;
  line-height:1;
  height:2em;
  padding:0;
  margin-bottom:1em;
  border:1px solid #000;
}
.ch {
  float:left;
  padding-top:1.2em;
}
.ct {
  font-size:1em;
  margin-left:-1px; /* just enough to cover the border */
  background-color:#FFF;
}
.cn {
  font-size:2em;
  line-height:0;
  background-color:#FFF;
}

I'm not quite sure what proportions you are aiming for, but if you want something that depends on the height of the numerals then I think you have no choice but to embed your own font. There is no way to know what fonts will be on a device, and so no other way to know if the numerals have the height and positioning you expect.

[dgatwood]

Originally Posted by Notjohn

Someone posted just this morning on the KDP forum that an epub uploaded to Barnes & Noble (via Draft2Digital) had problems precisely because Nook only obeys sizes in pixels. Is that not the case?

Nook handles em units just fine. It supports everything ADE does, just with lots of fun quirks caused by the way their default stylesheet behaves.

On the Kobo, you may get better behavior by using the newer renderer. Rename it to and in .kepub.epub, and I'd expect it to "just work". In legacy EPUB mode, it uses ADE; in KEPUB mode, it uses NetFront ACCESS, which is based on WebKit, and tends to be more standards-compliant.

You're going to have some headaches if you ever port your content to Kindle, because your line height is < 1.2 (120%). Many Kindle models will silently change that to 1.2. If the line height is important, you might try reducing the height of the line by using height tags on a div coupled with overflow clipping instead. Since it only contains one word, you don't have to worry about wrapping.

BTW, part of the problem probably stems from leaving h2 at an arbitrary font size in the original version. I see that you changed that in the final version. That's probably wise.

[Notjohn]

Yes, thanks. I should have followed up on that -- someone on the KDP forum contradicted the statement shortly after.

[Hitch]

Originally Posted by dgatwood

Nook handles em units just fine. It supports everything ADE does, just with lots of fun quirks caused by the way their default stylesheet behaves.

Indeed, good thing, or I have thousands of ePUBs out there that are in deep, deep doodoo. ;-)

On the Kobo, you may get better behavior by using the newer renderer. Rename it to and in .kepub.epub, and I'd expect it to "just work". In legacy EPUB mode, it uses ADE; in KEPUB mode, it uses NetFront ACCESS, which is based on WebKit, and tends to be more standards-compliant.

Yes, by and large, I concur.

You're going to have some headaches if you ever port your content to Kindle, because your line height is < 1.2 (120%). Many Kindle models will silently change that to 1.2. If the line height is important, you might try reducing the height of the line by using height tags on a div coupled with overflow clipping instead. Since it only contains one word, you don't have to worry about wrapping.

BTW, part of the problem probably stems from leaving h2 at an arbitrary font size in the original version. I see that you changed that in the final version. That's probably wise.

Mmmm...height tags on the div? Do you think that's going to work, all-in?

Hitch

[dgatwood]

Originally Posted by Hitch

Mmmm...height tags on the div? Do you think that's going to work, all-in?

Well, the overflow property was in CSS 2.0 (overflow:hidden), and height was in CSS 1.0, so I'd hope so. But as I said, it would only work as long as you can reasonably guarantee that there won't be any wrapping.