Title Pages

From DPWiki
Jump to: navigation, search
DP Official Documentation - Post-Processing and Post-Processing Verification

Plain title pages

Title pages can be a little tricky because some of them contain lots of text in multiple different sizes and all kinds of printing styles. It may be tempting to use different levels of heading elements to reflect the different sizes of (usually) centred text. Keep in mind, however, that things like the author’s or publisher’s names are not actually headings for the book; they are just centred because text on the title page is usually centred, and they are printed in different sizes and styles because that makes the title page look more interesting.

The most important thing to keep in mind for title pages is that the actual book title is the first “heading” in the book: Everything after it is part of the book, and all the chapter or section headings are sub-headings to the book title. Thus, you should use the <h1> element for the book title (and for nothing else). All the other parts of the title page should go in ordinary paragraph (<p>) elements, with appropriate additional markup (bold, italic, etc.) and CSS to make your title page match the original more closely.

In addition to using heading elements correctly, your title page markup should also not break up phrases that belong together. Use one <p> element for everything that belongs together, and <br/> elements if you need line breaks within a phrase.

Let’s look at an example:

Sample title page


On this title page, the title is broken across several lines, in different font sizes. We mark it using an <h1> element, but in order to match the book, we need some additional markup:

<h1>MEMOIRS<br/>
AND CORRESPONDENCE<br/>
<small>OF</small><br/>
ADMIRAL<br/>
<big>LORD DE SAUMAREZ.</big></h1>

As you can see, we use just one heading element for the whole heading, keeping everything that belongs to it together; but we are still able to keep line breaks and font-size changes. For the rest of the title page, we employ the same principle:

<p class="center spaced"><small>FROM</small><br/>
ORIGINAL PAPERS IN POSSESSION OF THE FAMILY.</p>

<p class="center spaced space-above">
BY SIR JOHN ROSS, C.B. K.S.A. K.C.S. F.R.A.S.<br/>
<small>CAPTAIN IN THE ROYAL NAVY.</small></p>

<p class="center space-above">IN TWO VOLUMES.</p>

<p class="center">VOL. II.</p>

<p class="center spaced space-above"><big>LONDON:</big><br/>
RICHARD BENTLEY, NEW BURLINGTON STREET,<br/>
<b>Publisher in Ordinary to Her Majesty.</b><br/>
1838.</p>

This markup keeps semantic units together and avoids the use of spurious heading tags—while making the title page very closely resemble the original with the appropriate CSS:

h1
{
  text-align: center;
  font-size: x-large;
  font-weight: normal;
  line-height: 1.6;
}

h1 small
{
  font-size: small;
}

.center
{
  text-align: center;
}

.spaced
{
  line-height: 1.5;
}

.space-above
{
  margin-top: 3em;
}

Look at this!

Illustrated title pages

For an example of an illustrated title page, see the Case Study on Images.

Half-title pages

Let’s start with a definition: A half-title page is a page with just the book title (or a part, chapter or section title) printed on the right-hand page before the actual title page (or start of the part, chapter or section). Here is an example:

Sample Half-Title Page


Since half-title pages typically only duplicate text that is also found on the next page or two, you basically have two options of handling them: you can just delete the duplicated text, or you can leave it in, which matches the original more closely.

If you decide to keep your half-title page, make sure you do not use a heading element for it. If you did, you would end up with two heading elements for the same place in the book—either the start of the book, or each part, section or chapter if you have half-title pages for them. This would also create spurious entries in the auto-generated table of contents on “mobile” devices, and in the list of headings used to navigate the book in text-to-speech software.

N.B.: If your half-title page contains text that is not duplicated elsewhere, you have to keep it, of course. In that case, it might also be appropriate to use a heading element; make sure you think about your headings hierarchy and mark things up accordingly.

For a simple half-title page with a duplicated title, use an ordinary paragraph with a class or id attribute, and format the page using CSS. Here is (very simple) HTML code for the above example:

<p id="half-title">BENGAL FAIRY TALES</p>

In order to centre the title and increase the font size, we apply some CSS. We want space above and below the title, in order to set it off from the surrounding text, so our default CSS will be

#half-title
{
  text-align: center;
  font-size: large;
  margin: 6em 0;
}

This already looks pretty good, but since spacing works somewhat differently for different media types, let’s adjust this CSS. For print-outs and “mobile” devices, which are paged media, we can format the half-title page as a separate page—the way it looks in the original printed book. This will have no effect on a computer screen. To achieve this, we’ll add page breaks above and below:

#half-title
{
  page-break-before: always;
  page-break-after: always;
  text-align: center;
  font-size: large;
  margin: 6em 0;
}

The above CSS puts the half-title onto its own page. If we leave it like that, however, the title may end up at the very top of the printed page or e-reader screen, with little or no space to set it off from the edge of the sheet or screen. Let’s rectify that!

Since many devices and applications ignore margins at the tops of pages, it is safer to use paddings in cases like this:

#half-title
{
  page-break-before: always;
  page-break-after: always;
  text-align: center;
  font-size: large;
  padding: 6em 0;
}

Look at this!

N.B.: If your half-title page is illustrated, you might want to consult the illustrated title-page example in the Case Study on Images.

To comment or request edits to this page, please contact lhamilton or hdmtrad.

Return to DP Official Documentation Menu