[nabsltd]

Originally Posted by paperwhite13

I changed the p classes tags to <p>,<h1>-<h3>, it’s much cleaner now There is one thing I was wondering about - new chapter pages, which are styled like this:

1.
Chapter Title

2.
Chapter Title

In general, the code would be something like the following, but with the styles in the stylesheet file instead of inline:

<style>
.chapter-number {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
}
.chapter-name {
  font-size: 1.2em;
  text-align: center;
}
</style>

<h1 class="chapter-number" title="1. The First Chapter">1.</h1>
<p class="chapter-name">The First Chapter</p>

This allows the following:

1. Styling the two lines differently.
2. Automatically generating a table of contents by looking at h1 elements.
3. Using p is more accurate than h1 or h2.

Some people will complain about my last point, but using either h1 or h2 is wrong because headers can be thought of as an outline as far as accessability is concerned. The chapter name is not really the same level as the number...it's more like content. But, it's definitely not at a lower level, which h2 would imply.

I've also seen multi-line chapter headings done another way, but I don't like it as much:

<style>
.chapter {
  text-align: center;
}
.chapter-number {
  font-size: 2em;
  font-weight: bold;
}
.chapter-name {
  font-size: 1.2em;
}
</style>

<h1 class="chapter" title="1. The First Chapter"><span class="chapter-number">1.</span><br />
<span class="chapter-name">The First Chapter</span></h1>

You still have to include the title attribute to generate the table of contents without any strange formatting, and you would have to use line-height in the .chapter selector if you wanted to change the distance between the two lines. The first way, you can just use margins.