I like a title page in an ebook. I also like it to fit on one page, and to fill that page. It is, of course, possible to do this with an SVG graphic, but that's quite complex and will probably mess up text-to-speech too.
Here's a way to do it with just CSS.
- Add a height: 100% to the html and body elements
- Wrap the title page in a div, setting the height of that to 100%
- Assign each paragraph in your title page a height as a percentage, making sure the percentages add up to just under 100% and that they all have margin set to 0.
- Done!
I found that if I made all the heights add up to exactly 100%, then ADE added an extra blank page after my title page. But making them add up to 99% fixed that. So it's probably safest to make them add to just under 100%.
Of course, it's possible for it to render really badly if a very large font is selected with a very small page size - the text will collide. But it's possible to get a very good effect with any reasonable settings and page aspect ratio.
Here's a the HTML and CSS for the title page of my next publication:
HTML:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="../Styles/style001.css" type="text/css" />
<title></title>
</head>
<body>
<div class="titlepage">
<p class="titlepage-topgap"></p>
<p class="titlepage-title">Alfredo Catalani<br />
<span class="titlepage-subtitle">Composer of Lucca</span></p>
<p class="titlepage-author">Domenico Luigi Pardini</p>
<p class="titlepage-para3">With Firsthand Accounts of Catalani by<br />
Giovanni Baptista Nappi<br />
and Raffaello Barbiera</p>
<p class="titlepage-para2">Edited, annotated, and introduced by<br />
David Chandler</p>
<p class="titlepage-para1">Translated by Valentina Relton</p>
</div>
</body>
</html>
CSS:
Code:
html, body {
margin:0;
padding: 0;
border-width:0;
line-height: 1.2em;
font-family: serif;
height: 100%;
}
@page {
margin: 6pt;
}
div.titlepage {
height:100%;
margin:0;
padding:0;
border-width:0;
}
p.titlepage-topgap {
height: 10%;
margin: 0;
}
p.titlepage-title {
height: 30%;
min-height: 1.8em;
margin:0;
font-size:3em ;
line-height: 0.8em;
text-indent: 0;
text-align: center;
font-weight: bold;
font-family: sans-serif;
}
span.titlepage-subtitle {
font-size: 0.66em;
text-indent: 0;
font-weight: bold;
font-family: sans-serif;
}
p.titlepage-author {
height: 24%;
margin: 0;
font-size:1.5em;
line-height: 1em;
text-indent: 0;
text-align: center;
font-weight: bold;
font-family: sans-serif;
}
p.titlepage-para3 {
height: 15%;
min-height: 3.5em;
margin: 0;
text-indent: 0;
text-align: center;
font-weight: bold;
font-family: sans-serif;
}
p.titlepage-para2 {
height: 10%;
min-height: 2.5em;
margin: 0;
text-indent: 0;
text-align: center;
font-weight: bold;
font-family: sans-serif;
}
p.titlepage-para1 {
height: 10%;
min-height: 0.8em;
margin: 0;
text-indent: 0;
text-align: center;
font-weight: bold;
font-family: sans-serif;
}