07-18-2015, 09:01 PM | #1 |
Enthusiast
Posts: 47
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> 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;} Last edited by Kaylee Skylyn; 07-18-2015 at 09:20 PM. Reason: add code |
07-18-2015, 11:20 PM | #2 |
A Hairy Wizard
Posts: 3,160
Karma: 18843349
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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! |
Advert | |
|
07-19-2015, 03:30 AM | #3 |
Wizard
Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
|
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. |
07-19-2015, 03:52 PM | #4 |
mostly an observer
Posts: 1,515
Karma: 987654
Join Date: Dec 2012
Device: Kindle
|
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?
|
07-19-2015, 05:37 PM | #5 |
Enthusiast
Posts: 47
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;} 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. Last edited by Kaylee Skylyn; 07-19-2015 at 05:46 PM. |
Advert | |
|
07-22-2015, 01:48 PM | #6 |
Wizard
Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
|
This is what I came up with. It looks the same on my Kobo and in Calibre:
Spoiler:
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. |
07-23-2015, 11:34 PM | #7 | |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
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. 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. |
|
07-24-2015, 06:24 AM | #8 |
mostly an observer
Posts: 1,515
Karma: 987654
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.
|
07-25-2015, 02:04 PM | #9 | |||
Bookmaker & Cat Slave
Posts: 11,473
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Quote:
Quote:
Hitch |
|||
07-26-2015, 12:13 AM | #10 |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
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.
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Issue with Sigil and chapter titles (Heading 2) | AprilHare | Sigil | 18 | 02-05-2020 08:14 PM |
Conversion turns chapter heading BOLD | Bobosmite | Conversion | 5 | 03-05-2012 12:12 PM |
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 |