How do I center the TITLE PAGE of my ePub files and make them fit the entire frame?

CrankyLamb · 12-29-2023, 12:39 PM

I manage my library in Calibre but when I open my eBooks in Adobe Digital Editions (ADE), many of them have title pages that are too big and get cropped off frame

EXHIBIT A:

Or they are not positioned at the center of the frame.

EXHIBIT B:

How do I fix that ?

In a previous thread I asked a similar question about cover pages for which I had found a fix.
However, that fix does not work for title pages.

A perfect title page for me looks like this:

EXHIBIT C:

1. It's scaled to fit the entire frame.
2. It is placed at the center.

Any idea how I can fix my problem?

If it helps, this is the code for Exhibit A:

Exhibit A Code:

Quote:

And this is the title page code for Exhibit B:

Exhibit B Code:

Quote:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="en" xml:lang="en">
<head>
<title>After Steve</title>
<meta content="urn:uuid:aa07ca1b-4820-4de0-885e-d10d8de3e243" name="Adept.expected.resource"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../../stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="../../page_styles.css"/>
</head>
<body epub:type="frontmatter" class="calibre">
<section epub:type="frontmatter" title="Title Page">
<div class="full" id="tit"><span epub:type="pagebreak" id="page_i" title="i"></span><span epub:type="pagebreak" id="page_ii" title="ii"></span><span epub:type="pagebreak" id="page_iii" title="iii"></span><a href="9780063009837_Contents.xhtml#rtit" class="calibre1"><img alt="image" src="../images/Titlepage.jpg" class="calibre2"/></a></div>
</section>
</body>
</html>

Thank you.

PS: I'm a complete newbie to code. I find it very intimidating and completely suck at it, so please explain to me like I'm 5 if your solution requires typing code.

theducks · 12-29-2023, 04:14 PM

You want to be fussy, you need to learn the basics (EPUB is pretty basic when compared to a Web Page)

First, wrap your head around the Box Model concept.

W3C schools has good explanations.
EPUB is really Boxes within boxes.

Then understand the smallest level box.

Margins is the spacing from others
Borders are the box edges (most cases this is 0, no color)
Padding is the space from the box to the actual contents (words or image)

Feedbooks chapter titles look complex. In fact the style is really simple, making use of padding and borders.

Quoth · 12-30-2023, 08:16 AM

Some ereaders / apps will ignore a top margin on the first item in a new file (which causes a page break). They will though do the padding-top correctly.
margin-bottom and margin top allow spacing between paragraphs (or other things) instead of blank lines.
An ebook should have only one space at any space, no tabs and no spaces at the start and end of a paragraph/line.
There should be no line-height statements.

W3C is really good, but it's orientated at web pages/web sites, so it doesn't always apply to ebooks.

thiago.eec · 01-02-2024, 06:31 AM

You can use the same SVG wrapper used for covers, like suggested on the topic you referred to.

This is the code I use for EPUB3 (like your examples):

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="pt-BR" xml:lang="pt-BR">
   <head>
      <title>Capa</title>
      <style type="text/css">
         @page {
            padding: 0pt;
            margin: 0pt;
         }
         body {
            padding: 0pt;
            margin: 0pt;
            column-count:1;
         }
         div.Cover {
            text-align: center;
            padding: 0pt;
            margin: 0pt;
            height: 100vh;
         }
      </style>
   </head>
   <body>
      <section epub:type="cover" aria-labelledby="book_cover" aria-describedby="cover_desc">
         <div class="Cover">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1362 1958" role="img">
               <title id="book_cover">Capa do livro A comunidade secreta</title>
               <desc id="cover_desc">Garota andando por uma estação ferroviária, com o trem ao seu lado soltando fumaça</desc>
               <image height="1958" width="1362" xlink:href="../Images/cover00335.jpeg"/>
            </svg>
         </div>
      </section>
   </body>
</html>

This works for any full page image. Its centered horizontally and vertically. It keeps the original ratio. Just change the height and width values accordingly.

theducks · 01-02-2024, 08:52 AM

Why fight it, when the built in tools can do it (and other metadata) for you?

Polish will insert, remove... items selected using the data currently in the Library.

The cover is inserted in a SVG wrapper (like above)

thiago.eec · 01-02-2024, 09:19 AM

Quote:

Originally Posted by theducks

Why fight it, when the built in tools can do it (and other metadata) for you?

Polish will insert, remove... items selected using the data currently in the Library.

The cover is inserted in a SVG wrapper (like above)

No fight here. I use the built-in tools. I use snipets for this: select the image href, press Ctrl+J and voilá.

The cover tool is limited to the cover image. With snipets I can use this for any full page image.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How do I center the cover photos of my ePub files and make them fit the entire page?	CrankyLamb	Editor	13	01-03-2024 05:46 PM
EPUB to PDF - force image to be fit within single page	Douman	Conversion	7	09-27-2020 11:55 AM
Images fit page as mobi, but not ePub	Mat Ward	ePub	2	12-19-2012 11:48 PM
ePub files do not center a custom <hr /> tag!	Haidon	ePub	2	08-21-2010 04:29 AM
How to center/fit page width SVG images with <OBJECT>	amoroso	ePub	0	07-31-2010 11:48 AM

12-29-2023, 04:14 PM	#2
theducks Well trained by Cats Posts: 29,817 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	You want to be fussy, you need to learn the basics (EPUB is pretty basic when compared to a Web Page) First, wrap your head around the Box Model concept. W3C schools has good explanations. EPUB is really Boxes within boxes. Then understand the smallest level box. Margins is the spacing from others Borders are the box edges (most cases this is 0, no color) Padding is the space from the box to the actual contents (words or image) Feedbooks chapter titles look complex. In fact the style is really simple, making use of padding and borders.

12-30-2023, 08:16 AM	#3
Quoth the rook, bossing Never. Posts: 11,169 Karma: 85874891 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11	Some ereaders / apps will ignore a top margin on the first item in a new file (which causes a page break). They will though do the padding-top correctly. margin-bottom and margin top allow spacing between paragraphs (or other things) instead of blank lines. An ebook should have only one space at any space, no tabs and no spaces at the start and end of a paragraph/line. There should be no line-height statements. W3C is really good, but it's orientated at web pages/web sites, so it doesn't always apply to ebooks.

01-02-2024, 08:52 AM	#5
theducks Well trained by Cats Posts: 29,817 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Why fight it, when the built in tools can do it (and other metadata) for you? Polish will insert, remove... items selected using the data currently in the Library. The cover is inserted in a SVG wrapper (like above)