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.
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? |
The only time I played with splitting lines left/right turned into a mess. I could get the lines aligned but I had fun trying to get the vertical alignment correct and finally gave up.
Code:
<div>
<h2 class="leftie"><span class="biggun">Chapter Title</span></h2>
<h2 class="rightie">Chapter 1</h2>
</div>
<div style="clear: both;"></div>
.leftie {
float: left;
}
.rightie {
float: right;
}
h2 {
font-size: 1em;
font-weight: normal;
font-style: normal;
margin-top: 2em;
margin-bottom: 2em;
}
.biggun {
font-size: 1.4em;
font-weight: bold;
}
Good luck...