Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 07-18-2015, 09:01 PM   #1
Kaylee Skylyn
Enthusiast
Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.
 
Posts: 44
Karma: 415790
Join Date: Feb 2012
Device: android phone, Kobo Aura, Sony PRS 350
Chapter Heading formate displayed wrong in Kobo

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:
Code:
<h2><span class="chapterHeader"><span class=
"translation">Chapter</span> <span class="count">1</span></span>
and in the CSS:
Code:
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;}
Attached Thumbnails
Click image for larger version

Name:	001s.JPG
Views:	102
Size:	157.1 KB
ID:	140357  

Last edited by Kaylee Skylyn; 07-18-2015 at 09:20 PM. Reason: add code
Kaylee Skylyn is offline   Reply With Quote
Old 07-18-2015, 11:20 PM   #2
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 910
Karma: 6679676
Join Date: Dec 2012
Location: Altus, Oklahoma today
Device: iPhone 6/5/iPad 1,2 & Air/Surface Pro/Kindle PW
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!
Turtle91 is offline   Reply With Quote
 
Advertisement
Old 07-19-2015, 03:30 AM   #3
GeoffR
Wizard
GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.
 
GeoffR's Avatar
 
Posts: 2,215
Karma: 4313790
Join Date: Nov 2012
Location: New Zealand
Device: Kobo Glo, iPod Shuffle 4g
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.
GeoffR is offline   Reply With Quote
Old 07-19-2015, 03:52 PM   #4
Notjohn
Fanatic
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 583
Karma: 247002
Join Date: Dec 2012
Device: Kindle
Quote:
Originally Posted by GeoffR View Post
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?
Notjohn is offline   Reply With Quote
Old 07-19-2015, 05:37 PM   #5
Kaylee Skylyn
Enthusiast
Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.Kaylee Skylyn ought to be getting tired of karma fortunes by now.
 
Posts: 44
Karma: 415790
Join Date: Feb 2012
Device: android phone, Kobo Aura, Sony PRS 350
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:
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.
Attached Thumbnails
Click image for larger version

Name:	002s.JPG
Views:	53
Size:	102.6 KB
ID:	140389  

Last edited by Kaylee Skylyn; 07-19-2015 at 05:46 PM.
Kaylee Skylyn is offline   Reply With Quote
Old 07-22-2015, 01:48 PM   #6
GeoffR
Wizard
GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.
 
GeoffR's Avatar
 
Posts: 2,215
Karma: 4313790
Join Date: Nov 2012
Location: New Zealand
Device: Kobo Glo, iPod Shuffle 4g
This is what I came up with. It looks the same on my Kobo and in Calibre:

Spoiler:

Code:
<h2 class="chapter"><span class="ch"><span class="ct">Chapter</span><span class="cn"> 2</span></span></h2>
Code:
.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.
GeoffR is offline   Reply With Quote
Old 07-23-2015, 11:34 PM   #7
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 462
Karma: 1050000
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by Notjohn View Post
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.
dgatwood is offline   Reply With Quote
Old 07-24-2015, 06:24 AM   #8
Notjohn
Fanatic
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 583
Karma: 247002
Join Date: Dec 2012
Device: Kindle
Yes, thanks. I should have followed up on that -- someone on the KDP forum contradicted the statement shortly after.
Notjohn is offline   Reply With Quote
Old 07-25-2015, 02:04 PM   #9
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 3,398
Karma: 32085221
Join Date: Apr 2010
Location: Phoenix, AZ
Device: Kindle2, iPad, KindleFire and NookColor
Quote:
Originally Posted by dgatwood View Post
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. ;-)

Quote:
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.

Quote:
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
Hitch is offline   Reply With Quote
Old 07-26-2015, 12:13 AM   #10
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 462
Karma: 1050000
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by Hitch View Post
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.
dgatwood is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Conversion turns chapter heading BOLD Bobosmite Conversion 5 03-05-2012 12:12 PM
Issue with Sigil and chapter titles (Heading 2) AprilHare Sigil 11 11-15-2011 09:49 AM
How to avoid page break after heading/chapter tkirke ePub 6 01-22-2010 02:12 PM
html2epub: chapter splitting on more than 1 heading level Portnull Calibre 1 06-25-2009 09:17 AM
Controlling chapter heading sizes? Djehuty Calibre 3 04-27-2009 08:02 PM


All times are GMT -4. The time now is 10:49 PM.


MobileRead.com is a privately owned, operated and funded community.