Quote:
Originally Posted by graycyn
So I tried Turtle91's method for chapter number and title and it worked great! No troubles on ADE, iBooks or Kindle. Many thanks!
BUT, I ran the epub through Kepubify and loaded the kepub on my Kobo Aura One and it didn't work there.
What happened was the h2 styling was mostly ignored and the span honored. Both chunks of text displayed at 1.4em font size, bold and left-aligned. The look I was trying to achieve was with the chapter number RIGHT aligned (not bold) and the chapter title LEFT aligned (bold), mimicking the print book.
But in the kepub, I got both showing LEFT aligned and at the font size and weight set for the chapter title.
This is the CSS. It validated. So did the epub before Kepubifying it.
Code:
{
font-size: .96em;
font-weight: normal;
font-style: normal;
text-align: right;
text-indent: 0;
margin-top: 18%;
margin-bottom: 15%;
}
h2 span
{
display: block;
font-size: 1.4em;
font-weight: bold;
text-align: left;
margin-top: 2em;
}
And the HTML:
Code:
<h2>CHAPTER 1<span>Chapter Title</span></h2>
The look in the kepub is readable, just not nice looking. I was able to make it work for kepub, by assigning spans and classes to both chapter number and title and styling accordingly, that solution works across the board, ADE, iBooks, Kindle, Kobo kepub, but it's NOT elegant.
So did I do anything wrong here that prevented it from working as kepub or is it a Kobo thing? Or possibly a Kepubify issue? |
That CSS code you have for chapter titles is just awful. Scrap it and start over. You have way too much wasted screen space and that does look ugly. Think of using smaller space around the chapter header. Try 1em top/bottom margin. Try the default size you get with H2. Don't left justify. Center justify.