Quote:
Originally Posted by Turtle91
I'm so sorry it took me longer than expected to get these examples...I couldn't find the images I had made, and my search-fu is not strong...
Attached are a few examples of how using a basic chapter header tag works. From testing accomplished by others it works very well on almost all devices...the one exception if you try and send your ePub through the kepubify service it requires a more precise descriptor (you need to add a class="..." to the <span>.
Code:
CSS:
h3 {yadda yadda}
h3 span {display:block; yadda yadda}
HTML:
<h3>Chapter 1 <span>Chapter Title</span></h3>
<p class="first">This is the first paragraph in the chapter.</p>
<p>This is the second, and subsequent, paragraph(s) in the chapter.</p>
You can do all kinds of fun display stuff just by manipulating the CSS. You can, and should, also provide fallback CSS for those devices that don't support current standards. And, best of all, if the device/app completely ignores the CSS and uses their own, then it is still completely readable and searchable!
Edit:
And yes, Jon, we know you don't approve of anyone else's coding...but the great part is you can change it to whatever YOU want!  |
I don't like the 2nd example. There is too much space between the chapter number and the title.
In the first example, there is too much space between the chapter title and the first paragraph (IMHO).
In the third example, I think the chapter header would look better if it was more centered vertically in the space there. Then it would look better. I also like that it does not have an excess of white space. I've seen some chapter headers that use 15% of wasted space.