Chapter formatting

[pedrovic]

Hi, group, how are you? I am a graphic designer who is migrating to the "literary" mobile world. I have read a lot about html and css for epub and mobi, but I have a question that I still can not solve: When a chapter page has two elements: chapter number and, below, the chapter title, which hierarchy of headings ? I could start with a <h3> for the chapter number and then insert a <h1> in the title? the goal is to leave this larger than the first.Something like that:

Chapter 1
The life of Brian

This is my first post, and I could not find this question here, so if it already exists, I apologize for repeating a post.

Thank you all!

[DNSB]

Originally Posted by pedrovic

Hi, group, how are you? I am a graphic designer who is migrating to the "literary" mobile world. I have read a lot about html and css for epub and mobi, but I have a question that I still can not solve: When a chapter page has two elements: chapter number and, below, the chapter title, which hierarchy of headings ? I could start with a <h3> for the chapter number and then insert a <h1> in the title? the goal is to leave this larger than the first.Something like that:

Chapter 1
The life of Brian

This is my first post, and I could not find this question here, so if it already exists, I apologize for repeating a post.

Thank you all!

I would enclose both elements in the same <h?> tag with a <br /> to break the line and a css class to increase the size of the title.

As a quick and dirty example (the first line is from the text, the two classes are in the stylesheet:

<h3 class="chapternum">Chapter 1<br/><span class="bigc15">The Ending of the Beginning</span></h3>

.chapternum {
	font-size: 1.5em;
	margin-top: 2em;
	margin-bottom: 1.5em;
	margin-right: 0;
	margin-left: 0;
	page-break-after: avoid;
	text-align: center;
	font-weight: bold;
    }

.bigc15 {
	font-size: 1.5em;
   }

Generally, I prefer to do as much as possible with the stylesheet and avoid in-line styles like the plague. In the code above, the first part of the chapter heading is displayed with 1.5 time the default font size while the subheader is displayed at 2.25x the default font size (1.5x1.5=2.25).

Also note that this is for epub. Mobi should work much the same but oddities will occur.

[theducks]

I also use DNSB's method.
This has the advantage of being perfect for the TOC (from header) tools
to include both pieces as a single entry (also on a single line)

Forget the old "Use Headers for style"

Use them for TOC indent levels


h3 chapter
h2 part
h1 if you need something as a wrapper.

I leave the books title at the same level as the outer layer used

[pedrovic]

Thanks, "DNSB" and "theducks" for the tips.
I tested in Sigil and Kindle Previewer and it's OK.

One mor question: can I change <h3> to <h1> for a better HTML semantics?

Best,
Pedrovic

[lumpynose]

Does anyone ever use the section tag? I like its semantics, how it contains the chapter (i.e., has an end section tag) rather than having an h tag merely start the chapter. I have no idea what the epub spec says about it.

https://stackoverflow.com/questions/...ection-and-div

[Hitch]

Originally Posted by pedrovic

Thanks, "DNSB" and "theducks" for the tips.
I tested in Sigil and Kindle Previewer and it's OK.

One mor question: can I change <h3> to <h1> for a better HTML semantics?

Best,
Pedrovic

Why do you think those are "better," if I may ask?

Hitch

[theducks]

I'm with Hitch. I only use H#'s to aid in using the TOC tool. No other reason.

If you want size, use the CSS (and maybe a Span to raise or lower the size of part of the title)

[Turtle91]

The <h?> tags are more semantically correct when used to define/differentiate what level 'header' you are using. You can style your headers however way you wish, or no way at all. Some devices might apply default styles to a header when that device doesn't use the publisher's css. As mentioned previously, some programs like Sigil and Calibre Editor can auto create TOC based on the header tags.

I use them in a heirarchy like this:

Spoiler:

<h1> cover </h1>
   <h2>front matter like dedication, synopsis, title page, etc.</h2>
      <h3>Chapters</h3>
      <h3>Graphics, epigraphs, maps, etc.</h3>
   <h2>Appendix Title</h2>
      <h3>Appendix 1</h3>
      <h3>Appendix 2</h3>
      <h3>Appendix 3</h3>
   <h2>back matter like 'about the author', acknowledgements, author notes, etc.</h2>
<h1> back cover (if there is one) </h1>

 - OR - 

<h1> cover </h1>
   <h2>front matter like dedication, synopsis, title page, etc.</h2>
      <h3> Parts, Books, etc</h3>
         <h4>Chapters</h4>
         <h4>Graphics, epigraphs, maps, etc.</h4>
      <h3> Parts, Books, etc</h3>
         <h4>Chapters</h4>
         <h4>Graphics, epigraphs, maps, etc.</h4>
   <h2>Appendix Title</h2>
      <h3>Appendix 1</h3>
      <h3>Appendix 2</h3>
      <h3>Appendix 3</h3>
   <h2>back matter like 'about the author', acknowledgements, author notes, etc.</h2>
<h1> back cover (if there is one) </h1>

I also use css similar to the example provided by DNSB, but mine relies a little more on the rules of CSS to define styling rather than giving everything a class name. This approach is perfectly valid and, IMO, provides a little cleaner html code:

Spoiler:

<h3>Chapter 1 <span>The Ending of the Beginning</span></h3>

/* (however you want to style it:) */
h3 {
	font-size: .75em;
	margin: 2em 0;
	text-align: center;
	font-weight: bold;
        font-family: sans-serif
    }

h3 span {
	display: block;
        font-size: 2em;
        margin-top: 1em;
        font-weight: normal;
        font-family: serif;
        font-variant: small-caps
   }

I don't particularly use the <section> tag. I haven't needed it - but I haven't really gotten into ePub3 spec. I break up each chapter into its own file so really don't need another tag to say it's a chapter. I do use <div> tags to give special formatting to a section of the file. To me that serves the same purpose.

Spoiler:

CSS:
p           {text-indent: 1.2em}
div.verse   {margin: 2em}
div.verse p {font-style: italic; font-size:.8em; text-indent:0}
div + p     {text-indent: 0}


HTML:
<p>normal paragraph</p>
<p>normal paragraph</p>
<p>normal paragraph</p>
<p>normal paragraph</p>

<div class="verse">
   <p>Line of verse</p>
   <p>Line of verse</p>
   <p>Line of verse</p>
   <p>Line of verse</p>
</div>

<p>normal paragraph after div = no indent</p>
<p>normal paragraph</p>
<p>normal paragraph</p>
<p>normal paragraph</p>

[Hitch]

Originally Posted by Turtle91

The <h?> tags are more semantically correct when used to define/differentiate what level 'header' you are using. You can style your headers however way you wish, or no way at all. Some devices might apply default styles to a header when that device doesn't use the publisher's css. As mentioned previously, some programs like Sigil and Calibre Editor can auto create TOC based on the header tags.

I use them in a heirarchy like this: (snipped)

Yes, as they should be used--to establish document hierarchy. But that's not what I'm taking away from the question. I'm trying to understand what he's really asking.

Hitch

[lumpynose]

Hitch, I think he's currently relying on the built in formatting of the h1 and h3 tags, with h1 being bigger than h3. In his example the smaller text is h3 and precedes the larger h1 text. But now that you've revealed the wizard behind the curtain (CSS) he's asking if he can change that h3 to an h1.

[DNSB]

Originally Posted by pedrovic

Thanks, "DNSB" and "theducks" for the tips.
I tested in Sigil and Kindle Previewer and it's OK.

One more question: can I change <h3> to <h1> for a better HTML semantics?

Best,
Pedrovic

Since I use css classes to control the appearance, my preference is <h1> is used for books in a omnibus/box set, <h2> is used for parts within a book and <h3> is used for chapters. I've occasionally used <h4> for sub-chapters but that's been pretty rare. If I get to the point where I might need <h5> or <h6>, I find myself looking at the book structure instead.

I might ask why using h1 instead of h3 would be better HTML semantics? They should be used for heading levels from h1 to h6. In my case, consistency says a single book would not get a <h1>, a book without parts would not get a <h2>, etc.

[GrannyGrump]

I always use h1 for the book title. Then descend as needed. If it is an omnibus, the individual book titles get to be h2 and their chapters are h3. If it is a standard novel with chapters or a short story collection, those are often assigned as h3 also. I have never gone deeper than h4, and that is seldom, because I only do simple fiction, and that very rarely has sub-chapters.

You can use the hx with a title: tag if you want the name to appear differently in the TOC than it appears on the page, or even set the hx to display:none and then create your displayed heading text(s) with <p>s or <div>s.

[lumpynose]

pedrovic, putting it all together/cutting to the chase, I think the way to do it is as DNSB originally outlined, with a br and span inside the h3 tag and using classes to control the appearance/formatting.

[patrik]

This is something I have been thinking about lately (and I have done in with two separate h# but wondering what best practice is), thank you pedrovic for asking and all you others for great responses!

If you do it like DNSB describes, how do you adjust the space between the two lines (besides putting multiple <br/>s)? (line-height could be used if the two lines are short enough to never use multiple lines on the device)

Also, what is the usuability to have the cover as a heading? I use headers as a way to get a toc, and for me, the cover shouldn't be there. What am I missing?

[pedrovic]

Originally Posted by Hitch

Why do you think those are "better," if I may ask?

Hitch

Hello, thank you all for the comments.
I meant that, from the little I understand, it is not good practice to put a <h3> before a <h1>, for hierarchical reasons. So I was in doubt about this because, in some printed books, it is common to have a smaller chapter number preceded by its title, according to the example I posted. And I suggested switching <h3> to <h1> to have more subtitle options in the text body, you know?

Best,
Pedrovic