View Single Post
Old 02-27-2020, 10:34 AM   #3
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,827
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
I don't know why you chose my svg approach for text over image. Of course that is valid but there are other alternatives that do not involve the use of svg images. Here is an example of another way to achieve what you want (you are posting in the epub forum, but if you are going to use it in books for Kindle, the code needs modifications):

1. In the .xhtml file:

Code:
<body>
  <div class="top">

    <h2>Chapter Title</h2>
    <p class="center bold top">"...so that at least I may come to rest<br/>in death in the tranquil resting places"<sup><a href="../Text/ftn.xhtml#ftn1" id="ftn1">[1]</a></sup></p>

    <p class="right bold">Virgil</p>
  </div>
</body>
2. In the .css file:

Code:
@font-face {
    font-family: "Fontin";
    font-weight: normal;
    font-style: normal;
    src: url("../Fonts/Fontin.ttf");
}

html {
     height: 100%;
}

body {
     height: 100%;
     margin: 0;
     padding: 0;
     background: url("../Images/ch-template.jpg");
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
}


h2 {
     text-indent: 0;
     text-align: center;
     font-size: 1.4em;
     margin-bottom: 25%;
     font-family: "Fontin";
}

.center {
     text-indent: 0;
     text-align: center;
}

.right {
     text-align: right;
     
}

.bold {
     font-weight: bold;
}

div.top {
     margin: 40% 15% 0;
     font-family: "Fontin";
}
As you can see, I'm using "html {height: 100%}". This can produce some issues if the page is not only for a image with some text inscribed over it. But if want to uses as a start of a chapter only, then no problem. Below you can check the respective epub. Probably the margins used by me will need a tweak, but the important is to show the method.
Attached Files
File Type: epub background_image_text_and _footnote2.epub (156.1 KB, 239 views)

Last edited by RbnJrg; 02-27-2020 at 10:41 AM.
RbnJrg is offline   Reply With Quote