combining text and image

[Stephaan]

Hello,

I'm new to Sigil and I'm trying to create an e-pub for the book that my daughter made. It contains a lot of images and I'm having trouble to get the text near and in front of the image. In the attachment you will see a left top corner image and the text beneath it although the text should be like attachment 2. I more or less can get it done in Sigil playing aroung with the positioning (margin-top/margin left) but when I look at the result in my e-pub viewer (adobe digital editions), the image is not what it looked like in Sigil.

Can anyone point me in the right direction?

thanks in advance
Stephaan

[Toxaris]

Those kind of effects will be hard to do in normal ePUB. They would be possible with fixed-format ePUB, but then you are limited to certain readers/reading applications.

In this particular case you could try to make it two images. One horizontal and one vertical. The vertical can be floated left. You could try.

[exaltedwombat]

This sort of thing can be bodged up for an eBook that will only be read on one specific device (but then, why not pdf?) but it isn't really in the nature of ePub as a distribution format.

[Hitch]

Originally Posted by Stephaan

Hello,

I'm new to Sigil and I'm trying to create an e-pub for the book that my daughter made. It contains a lot of images and I'm having trouble to get the text near and in front of the image. In the attachment you will see a left top corner image and the text beneath it although the text should be like attachment 2. I more or less can get it done in Sigil playing aroung with the positioning (margin-top/margin left) but when I look at the result in my e-pub viewer (adobe digital editions), the image is not what it looked like in Sigil.

Can anyone point me in the right direction?

thanks in advance
Stephaan

Can you please tell all of us what your goal is? Are you creating this for your daughter, alone? Are you creating this for distribution? If for the latter, upon which ePUB platforms? If the former, or both, what devices do you have to read it upon, or which you intend to read it upon?

What you're trying to do is actually fairly advanced stuff. It seems simple, I know, if you're accustomed to print layout, but it's not in ebooks. We need to know what your goal is to try to help you at all. Where it's going, what devices, distribution or not...the whole thing. Then I'm quite sure that one of us can get you going in the correct direction.

Hitch

[RbnJrg]

Originally Posted by Stephaan

Hello,

I'm new to Sigil and I'm trying to create an e-pub for the book that my daughter made. It contains a lot of images and I'm having trouble to get the text near and in front of the image. In the attachment you will see a left top corner image and the text beneath it although the text should be like attachment 2. I more or less can get it done in Sigil playing aroung with the positioning (margin-top/margin left) but when I look at the result in my e-pub viewer (adobe digital editions), the image is not what it looked like in Sigil.

Can anyone point me in the right direction?

thanks in advance
Stephaan

Do the following:

1. In your stylesheet.css file, write:

.back_img {
    background: url("../Images/Background.png") 0 0 no-repeat;
    background-size: contain;
    height: 200px;
    text-align: center;
    font-size: 1.2em;
    padding: 1.5em 2em;
}

2. In your .html file write:

<div class="back_img">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>

    <p>Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc.</p>
</div>

After that you'll get something like the screenshot below. This method also works in ADE I attach the respective .ePub

Regards
Rubén

PS: In my example I'm using as background a .png image of 222 x 259px. Of course, you'll use your proper image with the size of your convenience since the property "background-size: contain;" will do almost all the work

[Stephaan]

I'm trying to create an e-pub book that is readable on as much devices as possible since the idea of publishing a book is that it can be read by as many people as possible. The original paper version of the book is published on the bravenewbooks.com site where beginning writes can post their books with a very low cost. As they also offer the option of e-books we would like to provide this as well to the public. Hence my effort to convert the Original book into epub with the application provided on that site but which seems only suitable for full tekst books. The conversion was done but the result is not satisfactory. That is why I searched for a software that could edit and correct the created e-pub. Maybe I should try to import the Original word-doc into sigil. Would that solve some of the problems? If it is not possible to create an e-pub valid for most systems, I could either create one that is readable by most or create several and indicate which version is suited for which system. If that is not to high a goal to reach.

Thanks for your reaction, I hope that this clarifies the reason why I want it converted/corrected.

STephaan

[Stephaan]

Dear Rubén

thank you very much for your solution, especially on behalf of my daughter. Your reply was just what I was looking for. I attach the result .

I can use this feature for other images (as there are quite some) and for her second book she recently published (also with a lot of images)

Thanks again.

Stephaan (and Hannah)

[exaltedwombat]

You will spend a disproportionate amount of time and effort in attempting to make this sort of border work in an eBook intended for wide distribution.

Sometimes it's better to follow the spirit of the book rather than attempting a facsimile of the printed version. Why not prepare graphics, including the border and a portion of text, which could head a section as a full-width illustration? Choose a different type-face, so it doesn't clash with the body text - text in an image never quite matches body text in size or definition, so make this a virtue rather than a problem.

Don't think "convert". Think "design for eBook".

[Stephaan]

dear Exaltedwombat

You are right in what you propose. since it is my first attempt at creating an E-book I did not know the best way of starting this and how much time and effort it would take. I have some experience in web design but nothing very spectacular. So I will surely try it the graphics way to see which solution is best suited for books like these.

Any other suggestions are welcome.
thanks again for your reaction
Stephaan

[RbnJrg]

Originally Posted by Stephaan

Dear Rubén

thank you very much for your solution, especially on behalf of my daughter. Your reply was just what I was looking for. I attach the result .

I can use this feature for other images (as there are quite some) and for her second book she recently published (also with a lot of images)

Thanks again.

Stephaan (and Hannah)

You are welcome

[mrmikel]

There is no simple way to do epubs, no matter how much you know, because each book poses its unique set of problems, as does working in different languages.

Somethings in web design do not work in epubs at all, like automatic numbering of bulleted points, view windows, targets etc. So especially in the beginning, the simpler the better.

[Hitch]

Originally Posted by Stephaan

dear Exaltedwombat

You are right in what you propose. since it is my first attempt at creating an E-book I did not know the best way of starting this and how much time and effort it would take. I have some experience in web design but nothing very spectacular. So I will surely try it the graphics way to see which solution is best suited for books like these.

Any other suggestions are welcome.
thanks again for your reaction
Stephaan

Stephaan:

Honestly, you're going to find that half the ePUB readers out there won't honor this. Amazon devices, in the millions, cannot use a background image. Please consider using a simpler image--like a single line of the colored dots, or whatever those are--above the relevant text. That's nice and simple, and will work in every device. What you're trying to do takes some skill to make work across all, or even nearly all, devices, and it won't work at all in many ePUB-readers.

Hope that helps.

Hitch

[Doitsu]

Originally Posted by Hitch

Honestly, you're going to find that half the ePUB readers out there won't honor this. Amazon devices, in the millions, cannot use a background image.

Striving for backwards compatibility is very admirable, but Rubén's very creative solution will work on current Kindle models, RMSDK-based readers and iDevices, which is no small feat.

Owners of older Kindles simply won't see the image, which, IMHO, won't significantly affect their reading experience, unless they're expecting to see a 1:1 conversion of a print book whose layout they're already familiar with.

And the neat thing about CSS3 styles in Kindle books is that most of them don't even require a fallback style for older Kindles, because KindleGen will simply ignore them when generating the Mobi7 part.

[Hitch]

Originally Posted by Doitsu

Striving for backwards compatibility is very admirable, but Rubén's very creative solution will work on current Kindle models, RMSDK-based readers and iDevices, which is no small feat.

Owners of older Kindles simply won't see the image, which, IMHO, won't significantly affect their reading experience, unless they're expecting to see a 1:1 conversion of a print book whose layout they're already familiar with.

And the neat thing about CSS3 styles in Kindle books is that most of them don't even require a fallback style for older Kindles, because KindleGen will simply ignore them when generating the Mobi7 part.

Doits:

I was simply advising the OP that it wouldn't work on the K7's. He's making a child's book, a pseudo-fixed-format book. I know that everyone here, except me, it seems, wants to forget all those millions of e-inks that are still out there. Hell, I'd love to forget all the e-inks that are still out there, but I'm constantly (constantly) boggled at just how many of my clients read on a K2. And how many people on Goodreads, etc.

I admire Ruben's code, I do. He knows this, I've told him privately. But the OP probably doesn't know that the background-image won't work on some devices, and he does need to know, if it's that important to him. Ruben sort of always assumes that "everybody knows," but someone like the OP doesn't know, and likely, doesn't have all the devices to test. That's it. No worries.

Hitch

[DiapDealer]

Originally Posted by Hitch

I know that everyone here, except me, it seems, wants to forget all those millions of e-inks that are still out there.

And me!! *waves hand in the air*