Background image with text on top?

[mrmikel]

BTW, this is what the online validator says:

EPUB Validator (beta)
Results

Detected version: EPUB 2.0

Results: Congratulations! No problems were found in background_image_test_ruben1.epub.

Validated using EpubCheck version 3.0.1.

Same message if you subsitute paragraph for blockquote.

So it seems Flight Crew is wrong.

[RbnJrg]

Originally Posted by Jellby

Exactly. As I said above, <svg> (or <img>) is not allowed to be the direct child of a <blockquote>, because <blockquote> can only have block-level children. That's not a surprise.

But I think you misunderstand the message. The list is not giving all the elements where <svg> is forbidden, but all the elements that are allowed there: and "svg" (or "img") is not in the list, hence the error.

Ok, now I understand better what that list is saying to me

The case with <p> or <hX> is entirely different. Those can have character-level children, and therefore <svg> or <img>. Do you get validation errors with <svg> inside <p> or <hX>?

No, no error message with <svg> inside <p> or <hX>. But I wasn't quite sure about using that sintaxis, I preferred no to employ those kind of tags and to enclose the svg in a DIV.

[RbnJrg]

Originally Posted by mrmikel

BTW, this is what the online validator says:

EPUB Validator (beta)
Results

Detected version: EPUB 2.0

Results: Congratulations! No problems were found in background_image_test_ruben1.epub.

Validated using EpubCheck version 3.0.1.

Same message if you subsitute paragraph for blockquote.

So it seems Flight Crew is wrong.

You mean the ePub with the svg enclosed in a <blockquote> tag? So, what must I conclude? Is it possible to use svgs inside blockquotes?

[DaleDe]

I think Sigil is a bit more restrictive than ePubCheck these days. With 3.0 in the offing and there svg can even be its own file the requirements have been relaxed. For example svg works fine just inside a body so it can basically be anywhere. Only Sigil complains, but I think it doesn't try and fix it.

Dale

[mrmikel]

You can play around with the validator at:
http://validator.idpf.org/

I tried substituting various things and it seems like the long list of Sigil is wrong, at least according to the 2.0 standard.

I don't think that Flight Crew has ever been a high priority for the Sigil developers. It is good for catching big errors, but it doesn't check to make sure references exist or are correct etc. It is convenient for that, but I always try to use epubcheck just before posting an epub.

[Jellby]

FlightCrew tries to follow the ePub 2 specification as published, not the IDPF validator behaviour. In some points the specificatios is rather ambiguous and FlightCrew's and IDPF validator's interpretations differ. Unless the latter is considered as normative, I don't think we can say one or the other is wrong.

And this, of course, has nothing to do with whether a particular code will work as intended in real-world devices.

[mrmikel]

Originally Posted by Jellby

And this, of course, has nothing to do with whether a particular code will work as intended in real-world devices.

This is always the rub. Very few people have every device or even every major device to check epubs with.

[Psymon]

Originally Posted by RbnJrg

My english is not so good so I don't understand you very well; what is your issue now?

And my english is very good... but sometimes I don't explain myself very well!

My apologies if I didn't explain myself very well. Firstly, though, thanks for the tip re display:none for my <h1> tags! I should have thought of that myself, but for some reason I thought I wasn't allowed to put anything else on the page other than what was in those <svg> tags (don't ask me why I thought that -- I think that was an assumption I made based on something funny happening when I did that on pages with full-size images).

In any case, though, while I was really happy with the way those SVG title pages looked when they were done, they were also a lot more complicated to edit -- and that's in addition to my not being able to put the <h1> tags in them (which you resolved now, of course).

So for both those reasons, I was thinking of trying what you'd said was "better" anyway, i.e. not doing it the SVG way, and instead doing it just with CSS (background-image), using/modifying the code you'd posted here earlier.

I couldn't seem to get it to work with this image (see attachment), though. Basically -- if at all possible -- I was hoping to have this image as my full-page background image, and then my chapter title + flower ornament + author tags (<h1> + <img> + <h2>) overtop that. And while I'm at it, if these latter could have margins set as a percentage, that would be great, as I could easily have all the text stay within the "frame" in the background image, regardless of orientation or size.

All of this has been really great, Rubén! I don't quite understand that SVG code, but I know how to do that now (thanks to you, including your last reply). It'd be nice to know/understand the other CSS way, too -- then I'd have two options to choose from for now and any future projects.

PS...

I just did the calculations, and if it were possible to make all the margins 10%, that would keep the text within the "frame" of the background image (more exactly, 9% for the left/right margins and 6% for the top/bottom would allow the text right up to the edge of the "frame", if the background image is indeed 100% full-page).

[GMcG]

@AlexBell
In the example in post 25 you can't resize the text. So an image with embedded text would have done it as well as you said - and it is much simpler.

George

[RbnJrg]

Originally Posted by Psymon

And my english is very good... but sometimes I don't explain myself very well!

My apologies if I didn't explain myself very well. Firstly, though, thanks for the tip re display:none for my <h1> tags! I should have thought of that myself, but for some reason I thought I wasn't allowed to put anything else on the page other than what was in those <svg> tags (don't ask me why I thought that -- I think that was an assumption I made based on something funny happening when I did that on pages with full-size images).

In any case, though, while I was really happy with the way those SVG title pages looked when they were done, they were also a lot more complicated to edit -- and that's in addition to my not being able to put the <h1> tags in them (which you resolved now, of course).

Well, then we must suppose that the svg method works for you

So for both those reasons, I was thinking of trying what you'd said was "better" anyway, i.e. not doing it the SVG way, and instead doing it just with CSS (background-image), using/modifying the code you'd posted here earlier.

I couldn't seem to get it to work with this image (see attachment), though. Basically -- if at all possible -- I was hoping to have this image as my full-page background image, and then my chapter title + flower ornament + author tags (<h1> + <img> + <h2>) overtop that. And while I'm at it, if these latter could have margins set as a percentage, that would be great, as I could easily have all the text stay within the "frame" in the background image, regardless of orientation or size.

Ah, ah, ah. We have a problem here You can have a background image with text over it but troubles appear when you want all the text stay within the background image. We have a problem because ADE doesn't support the properties to achieve that. See this post:

https://www.mobileread.com/forums/sho...43&postcount=4

As you can see, the text remain in same page, no matter if the device is in portrait or landscape mode. But that technique only works for Kindle and iPad; you can't get that output in ADE and on ereaders based on ADE So is as it looks in my K4NT:

Portraid mode:


Landscape mode:


Below you can see the respective ePub.

But if you want all the text stay within the background image no matter the device and the device's orientation, then the easiest thing is to write the text directly over the background image, as Alex made. The alternative is to use svg.

All of this has been really great, Rubén! I don't quite understand that SVG code...

You can learn about SVG by reading this tutorial:

http://commons.oreilly.com/wiki/inde...SVG_Essentials

In the Chapter 8 of this tutorial, you can learn how to manage text.

Of course, once you know about SVG, the more probable thing is that you don't want to write the SVG code by hand but using -for example- Inkscape

It'd be nice to know/understand the other CSS way, too -- then I'd have two options to choose from for now and any future projects.

Well, you can find a lot of tutorials about html and css in the web. Believe me, is not a so difficult matter; in a couple of weeks you'll know enough to understand all the code posted in this forum

Regards
Rubén

[Psymon]

Originally Posted by RbnJrg

Ah, ah, ah. We have a problem here You can have a background image with text over it but troubles appear when you want all the text stay within the background image. We have a problem because ADE doesn't support the properties to achieve that.

I can't thank you enough, Rubén, for your time and trouble in helping me -- or maybe I should say for your patience in putting up with me.

I'm a bit confused now, though. When this whole thread started, you said that you thought that using the background-image CSS method was better than the SVG method, but now I get the impression that perhaps it's actually SVG that you think would be better. Did I get confused about something along the way?

That method you pointed to for centering text vertically on a page was rather interesting, too, actually -- although as you indicated, it won't work on all devices (i.e. not in ADE). I can see that the SVG method does have the advantage that one can get text to center on the page -- it comes out pretty much as though one had actually made a graphic of the text, in fact, except without the "overhead" of having tons of extra graphics in one's epub (which in my case would have been one each for the 20+ chapters in my book).

I have to wonder, though, if doing it that way (SVG) introduces some limatations? As I mentioned before -- and which you resolved for me -- there's the fact that my chapter title texts don't get made into <h1> tags, but I also wondered about two other things: searching, and text-to-voice readers. I tried out a search on my ipad, and that seems to work okay, but I'm not sure how a text-to-voice reader would work, if it would pick up on those chapter titles and "read" them, too (not to mention read them as headings, not just simply "text").

I guess wondering about this accessibility issue might inadvertently introduce a problem that would cause my ebook to be rejected -- and I guess that's why I was wondering about the background-image/CSS method that you originally mentioned. Like I said, I tried to do it that way, but couldn't get it to work (using the larger background image that I loaded up in my previous reply.

In other words... I'm still a bit confused, and not sure which method would be the better way to go! Sorry...

[DaleDe]

SVG is better. The text will stay where it belongs and it is supported in ADE. However, don't expect it to work for mobi.

Dale

[Psymon]

Originally Posted by DaleDe

SVG is better. The text will stay where it belongs and it is supported in ADE. However, don't expect it to work for mobi.

Well, that's the impression that I was getting, too, but I still recall that Rubén said -- repeatedly -- that he preferred the CSS method. I guess that's why I'm a bit confused (apart from my apparent "confusion" in getting the CSS method to work, too, of course).

[RbnJrg]

Originally Posted by Psymon

I can't thank you enough, Rubén, for your time and trouble in helping me -- or maybe I should say for your patience in putting up with me.

You have nothing to thank me.

I'm a bit confused now, though. When this whole thread started, you said that you thought that using the background-image CSS method was better than the SVG method, but now I get the impression that perhaps it's actually SVG that you think would be better. Did I get confused about something along the way?

Yes, I said that. And still I think is the better method but in this particular case, when the background image has to occupy the full page; that forces me to use properties not well supported by ADE (because, I repeat, the background image must have a height=100%)

That method you pointed to for centering text vertically on a page was rather interesting, too, actually -- although as you indicated, it won't work on all devices (i.e. not in ADE). I can see that the SVG method does have the advantage that one can get text to center on the page -- it comes out pretty much as though one had actually made a graphic of the text...

Indeed.

...in fact, except without the "overhead" of having tons of extra graphics in one's epub (which in my case would have been one each for the 20+ chapters in my book).

I have to wonder, though, if doing it that way (SVG) introduces some limatations?

SVG is well supported by ADE, ereaders based on ADE, iPad and Kindle. As DaleDe said, is not supported by mobi but mobi is the old Kindle format; right now, Kindle 3 and newer models, use the .kf8 format and .kf8 supports plenty SVG. To me, mobi is a practically an obsolete format (sorry Hitch, I know you don't think so) and only used by the old Kindle models.

As I mentioned before -- and which you resolved for me -- there's the fact that my chapter title texts don't get made into <h1> tags, but I also wondered about two other things: searching, and text-to-voice readers. I tried out a search on my ipad, and that seems to work okay, but I'm not sure how a text-to-voice reader would work, if it would pick up on those chapter titles and "read" them, too (not to mention read them as headings, not just simply "text").

I don't know how it'll work with the TTS feature because my reader doesn't have that functionality. Maybe others members of this forum can answer you this question.

I guess wondering about this accessibility issue might inadvertently introduce a problem that would cause my ebook to be rejected -- and I guess that's why I was wondering about the background-image/CSS method that you originally mentioned. Like I said, I tried to do it that way, but couldn't get it to work (using the larger background image that I loaded up in my previous reply.

I don't think that your ebook will be rejected by using SVG

In other words... I'm still a bit confused, and not sure which method would be the better way to go! Sorry...

If you want to use a background image with a height of 100% then use SVG that is supported by all major ereaders.

[RbnJrg]

Originally Posted by DaleDe

SVG is better. The text will stay where it belongs and it is supported in ADE. However, don't expect it to work for mobi.

Dale

Mobi is an old kind of format, Dale The future is kf8 (in the kindle world, of course)