Quote:
Originally Posted by Psymon
Well, I'm frustrated -- again. I spent hours last night doing up all 20+ chapter title pages in that SVG method you posted, Rubén, and although they all look great now, I'm such a dummy that it was only after I'd spent all that time fixing up every chapter title so that it would look nice -- which is a total pain to do when you have to adjust everything with pixels rather than just specifying a heading or paragraph or whatever -- that it hit me that in the process I'd invariably lost all my <h1> tags (duh!) and hence none of the chapters were getting marked to the table of contents either.
|
My english is not so good so I don't understand you very well; what is your issue now? The problem is that you lost all <h1> tags? If the text over your background image works fine, then the another issue is trivial.
According to what I posted, indeed, there is not any <h1> tag so it can't appear in the TOC
. Suppose you have something like that:
Code:
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 533 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="800" width="533" xlink:href="../Images/bamboo_fence.jpg"></image>
<text fill="red" style="font-size: 50px" text-anchor="middle" x="266.5" y="200">
This Here
<tspan x="266.5" y="280">Is A</tspan>
<tspan x="266.5" y="370">Chapter Title</tspan>
</text>
<image height="63" width="63" x="235" xlink:href="../Images/ornament.png" y="450"></image>
<text fill="green" style="font-size: 30px; font-style: italic" text-anchor="middle" x="266.5" y="600">By Author</text>
</svg>
</div>
Then do the following:
1. First, in your stylesheet.css file, add this:
Code:
h1 {
display: none;
}
2. Now above the <div> tags where you enclose your svg wraper write:
Code:
<h1 title="Whatever be the title you want here"> </h1>
Of this way, you'll end with something like this:
Code:
<h1 title="Whatever be the title you want here"> </h1>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 533 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="800" width="533" xlink:href="../Images/bamboo_fence.jpg"></image>
<text fill="red" style="font-size: 50px" text-anchor="middle" x="266.5" y="200">
This Here
<tspan x="266.5" y="280">Is A</tspan>
<tspan x="266.5" y="370">Chapter Title</tspan>
</text>
<image height="63" width="63" x="235" xlink:href="../Images/ornament.png" y="450"></image>
<text fill="green" style="font-size: 30px; font-style: italic" text-anchor="middle" x="266.5" y="600">By Author</text>
</svg>
</div>
Now regenerate the TOC by pressing Ctrl+T in Sigil. You'll see what you want to see
Quote:
I couldn't get this to work for me -- at least, not with that background image that I've been using. I'm assuming that I'm doing something wrong, but I don't know what. That background image is 1200x1800, but I adjusted the code you gave at the above link to give the image a height of 900.
In Sigil it looks fine -- and I haven't looked yet, but I'm guessing it probably would look fine in iBooks -- but in ADE it doesn't work at all.
|
I don't know why is not working in ADE for you; maybe you are doing something wrong; see this screenshot of my ADE:
Could you post here the image you are using and the text you want to write over it? Maybe of that way I can say you more things about what to do.
Regards
Rubén