Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Calibre > Editor

Notices

Reply
 
Thread Tools Search this Thread
Old 12-29-2023, 12:39 PM   #1
CrankyLamb
Junior Member
CrankyLamb began at the beginning.
 
CrankyLamb's Avatar
 
Posts: 6
Karma: 10
Join Date: Dec 2023
Device: none
How do I center the TITLE PAGE of my ePub files and make them fit the entire frame?



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:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="en" xml:lang="en">
<head>
<title>MCU</title>
<link href="../styles/stylesheet.css" rel="stylesheet" type="text/css"/>
<meta content="urn:uuid:e407651d-7240-44a3-b12c-889607e07316" name="Adept.expected.resource"/>
</head>
<body>
<section epub:type="frontmatter" id="tit" title="Title">
<p class="image0"><span epub:type="pagebreak" id="page_i" role="doc-pagebreak" title="i"/><span epub:type="pagebreak" id="page_ii" role="doc-pagebreak" title="ii"/><span epub:type="pagebreak" id="page_iii" role="doc-pagebreak" title="iii"/><span epub:type="pagebreak" id="page_iv" role="doc-pagebreak" title="iv"/><img alt="" src="../images/title.jpg" style="width:100%;"/></p>
</section>
</body>
</html>
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.
CrankyLamb is offline   Reply With Quote
Old 12-29-2023, 04:14 PM   #2
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,763
Karma: 54401244
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.
theducks is offline   Reply With Quote
Advert
Old 12-30-2023, 08:16 AM   #3
Quoth
the rook, bossing Never.
Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.
 
Quoth's Avatar
 
Posts: 11,020
Karma: 85555555
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.
Quoth is offline   Reply With Quote
Old 01-02-2024, 06:31 AM   #4
thiago.eec
Guru
thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.
 
Posts: 921
Karma: 1177583
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
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.
thiago.eec is offline   Reply With Quote
Old 01-02-2024, 08:52 AM   #5
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,763
Karma: 54401244
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)
theducks is offline   Reply With Quote
Advert
Old 01-02-2024, 09:19 AM   #6
thiago.eec
Guru
thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.
 
Posts: 921
Karma: 1177583
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
Quote:
Originally Posted by theducks View Post
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.
thiago.eec is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 07:31 PM.


MobileRead.com is a privately owned, operated and funded community.