Best way to do an "art gallery"?

[Psymon]

Originally Posted by Toxaris

IIRC the Adobe engine does not support the text-anchor in SVG at all. Other rendering engines might be fine.

Wow, this is all becoming sooooooo complicated, all just to do something that one would think would be so ridiculously simple, with the end result seeming to be "Oh, by the way, doing it this way won't always work." :/

Is this really all so necessary, going through all these complicated "jumping through hoops" just to do what it was that I wanted to do (and having it still not work correctly in some contexts)? I mean, if it's not going to work 100% the time anyway, then with regard to what I came up with before, just using simple HTML (as I did up in the epub attachment that I included in my earlier post here), I would think that with the size/orientation of the images that I was using that the only context in which the caption would bump over to the next page would be if one is viewing the book on a desktop/laptop computer, in a program where the windows can be resized -- and then the "problem" is easily fixable by resizing the window so that the caption doesn't bump over to the next page.

Isn't that better, to have a "problem" that occurs sometimes but which the user can easily fix, rather than one that can't be fixed at all? Not to mention the former HTML method is so ridiculously simple and easy to do, and the latter is turning out to be soooooooooo incredibly complicated (comparatively).

Seriously, I'm just wondering what the point is choosing the extremely complex method, rather than the ridiculously simple method, when no matter which way you do it you're going to run into issues some of the time (and with the complex method the user can't fix it, but with the simple method they can).

[Toxaris]

Captions are a big problem with ePUB if you want to be absolutly sure that the caption is always combined with the picture. The only way to always be sure (AFAK), is to insert the caption in the picture itself.
You can include it in the SVG, but forget about centering automatically.

In ePUB3 it is supposedly solved IF (there it is again) the ePUB3 readers follow the specifications and interpret them the same.

As has been said many times. Don't make it too complex, because for sure it will break on a reader or reading program.

[Psymon]

Originally Posted by Toxaris

As has been said many times. Don't make it too complex, because for sure it will break on a reader or reading program.

Never mind that learning how to do this the SVG way is turning out to be like taking a graduate course in physics or chemistry or something -- and all just to learn how to boil water.

After all this, while I genuinely do GREATLY appreciate all the help that everyone has been giving me, and while it has indeed been instructive for me and perhaps down the road I will make good use of what I've learned (along with resources for what I still need to learn about this, of course), for this current project it all just seems like overkill, making everything so much more complicated for practically no other reason than because we "can" (make it more complicated).

Surely doing it the way I was going to before -- with a simple 4:3 landscape image (changing the width/height to 90% or something) with a simple small-sized caption underneath -- is a reasonably workable solution, one that will no doubt work out just fine the vast majority of times (and is easily fixable by the user if/when it doesn't), and also ensures that my captions are styled exactly in keeping with how the rest of the book is done, to boot?

I really do appreciate everyone's help on this -- and thank you all so much for that -- but I honestly just don't get it, what the point is in making things so very complicated, just to acheive some rather negligible advantage (that isn't guaranteed to work all the time either). I think that, after all this, I'll just do it the way that I was going to before (plain ol' HTML).

But with that said, I'm not so closed-minded about this that I can't be convinced otherwise -- I just need a pretty good argument to that end, that's all.

[DaleDe]

Originally Posted by Toxaris

IIRC the Adobe engine does not support the text-anchor in SVG at all. Other rendering engines might be fine.

I checked it in my ADE copy on my PC and it works fine. Version 3.0.86137. It does exactly what you would expect.

Dale

[Psymon]

Originally Posted by DaleDe

I checked it in my ADE copy on my PC and it works fine. Version 3.0.86137. It does exactly what you would expect.

Oh, Dale, the things you make me do -- like giving it another shot, just when I'd given up.

Okay, you inspired me to try again, and with a fair bit of frustration I managed to get the whole gallery of paintings done up (14 images w/captions in all), and everything seems to have turned out fine -- for the most part, anyway. It looks fine in ADE (I tried it in both v.3 as well as v.2, and it comes out okay in both), and then sent it over to my iPad to check, and although the images/captions aren't centered vertically on the page (as they are in ADE), that doesn't matter too much, I suppose.

What's weird on the iPad, though, is that each and every image has a little horizontal line added up at the top-left of the image -- see the attached screenshot here. I haven't got a clue where that comes from, it's not there in ADE, nor do I see anything funny that I might have added in my code.

And the text is so small. Oded (I think it was) had suggested 2em, I ended up going with 3em, but even still it's very small -- at least, when you're in a two-page spread like this. I could change it to 4em or something, of course, but then if you're in a single-page mode then it comes out way too big.

And this has me wondering -- once again -- whether I should just do it the HTML way as I was going to. That little line that's showing up is annoying, and what I don't like about this SVG method is that the font size for the caption changes along with the size of the pic, that I can't just have it be the size that I want it to be (regardless), in keeping with the font size(s) used elsewhere in my book.

I'm totally on the fence about this now, and not sure what I'll end up doing, as a result. :/

------------------

OFFTOPIC: On an unrelated note, while checking this in ADE v.2, I noticed that my transparent PNGs (used elsewhere in my book) aren't transparent, the entire area that should be transparent comes out as black (which looks awful, of course). Does ADE2 not support PNG transparency? And should I care what ADE2 does (so to speak)? I tested it in that because it was previously recommended (elsewhere) that I do so -- indeed, that I should also test it in v.1, too (which I haven't, but could).

[DaleDe]

The example I gave you to illustrate the left/middle/right also drew a line at about the same point as the image you attached. Did you leave it in? It would be between a g statement. The original value of 40 maybe 50 pixels for the caption should be ok or if you prefer use pt (points) which also needs to be rather large. There is really no reason the numbers can't be big.

On the transparent issue. It there a background set somewhere?

Dale

[odedta]

Originally Posted by Psymon

And the text is so small. Oded (I think it was) had suggested 2em, I ended up going with 3em

I used 2em randomly to point out that you should use 'em' measurement units if you want your font to be scalable.

Lol I should be clearer next time

[Toxaris]

Originally Posted by DaleDe

I checked it in my ADE copy on my PC and it works fine. Version 3.0.86137. It does exactly what you would expect.

Dale

Ah, they have fixed it? It does not work on version 2 and almost all readers with RDMSK out there though...

[Psymon]

Originally Posted by DaleDe

The example I gave you to illustrate the left/middle/right also drew a line at about the same point as the image you attached. Did you leave it in? It would be between a g statement.

Oh, is that what that "path" line of code was about? I had no idea what that was for there, because in reading up about it on that site, it explained that you could do up text on a "squiggly" path or whatever. I didn't need to do that, I just needed a plain ol' regular, straight line, but when I deleted that line then everything screwed up, my text jumped up to the top-left of the image (with it "centered" at the top-left, i.e. so that it extended off-screen to the left).

I had no idea what that "path" line of code did (let alone what "stroke" and "fill" were all about), but I just left it in.

Here's the code that I ended up using in my HTML...

  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 2048 1636" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="1536" width="2048" xlink:href="../Images/cranch1840-the_us_capitol.jpg" />

      <g style="font-size: 3em; font-family:English; font-style: normal;">
        <path d="M 100 10 100 100" style="stroke: gray; fill: none;"></path>

        <text x="1024" y="1586" style="text-anchor: middle">The U.S. Capitol (1840)</text>
      </g>
    </svg>
  </div>

I put it in a <div>, too because Sigil kept telling me that it was invalid if I didn't (although Pagina didn't -- and I do trust the latter more than the former, but it was annoying getting that one error).

The original value of 40 maybe 50 pixels for the caption should be ok or if you prefer use pt (points) which also needs to be rather large. There is really no reason the numbers can't be big.

I just wish I could have the captions set to what my "small" text is for the rest of the whole book, and have it just stay that size, no matter how big the image is (like, if you switch from landscape to portrait or whatever).

On the transparent issue. It there a background set somewhere?

Um, in my CSS? Not in anything that would relate to those particular images. I do have background-color:transparent specified for my <p> tags, and those images are in a <p> tag, but that shouldn't affect those images -- which look fine in ADE3 and on the iPad, it's only ADE2 that they seem to go all black in (where the image is supposed to be transparent). In fact, just to be sure, I just deleted that background-color: transparent; line from my CSS, and the problem is still there, so that's not it.

I guess ADE2 just can't handle PNG transparency? I'm sure GIF transparency wouldn't be a problem (although I haven't tried it).

[Psymon]

Originally Posted by Toxaris

It does not work on version 2 and almost all readers with RDMSK out there though...

I was teetering on the brink of my fence-sitting a few moments ago, not sure which way to lean, but now I'm starting to lean back to the side of just doing it the HTML way and putting up with the occasional (and easily fixable by the user) issue of the captions sometimes ending up on the next page. :/

[Tex2002ans]

Originally Posted by Psymon

Never mind that learning how to do this the SVG way is turning out to be like taking a graduate course in physics or chemistry or something -- and all just to learn how to boil water.

Boiling Water? That is some hard stuff! Does anyone even know how to do that?

The water just keeps on falling out of the pot, I have no clue how to keep it in there!

I was recently chatting with Hitch, and Hitch mentioned that if I ever finished writing and posting my SVG Tutorial... it would probably be "about 25 pages". I laughed. I just took a look at my Formula to PNG Tutorial, and it is ~9 pages.... SVG is way more complex... I would have to take up about 50!

Originally Posted by Psymon

OFFTOPIC: On an unrelated note, while checking this in ADE v.2, I noticed that my transparent PNGs (used elsewhere in my book) aren't transparent, the entire area that should be transparent comes out as black (which looks awful, of course). Does ADE2 not support PNG transparency?

Hmmm... it SHOULD handle PNG transparency perfectly fine. What program did you use to generate it? (Photoshop? Which version? What settings did you use while saving the PNG?)

Mind sending a few of those images my way so I can do some fiddling?? Or just attach a sample EPUB with the problem in it?

There was a bug I found a long time ago with PNG transparency, although that was with Kindles. (I wrote down the specifics at the time in my Formula to PNG thread). Although that had mostly to do with the way that I heavily optimized the images (Indexed + Transparency). Never did research any further.

Originally Posted by Psymon

[...] And should I care what ADE2 does (so to speak)?

I wouldn't ignore it... just like there are millions of older Kindles out there, there are also a bunch of older devices on the older ADE (RMSDK) engines. Not everyone has the latest+greatest versions of the readers!

We had a nice big chat about images with captions (perhaps one of THOSE solutions might help you as well) + the typical warning about not ignoring older readers. You can also see my Post #9 where I listed 6 other MobileRead topics asking similar "image with captions" question:

https://www.mobileread.com/forums/sho...d.php?t=223178

Originally Posted by Psymon

I was teetering on the brink of my fence-sitting a few moments ago, not sure which way to lean, but now I'm starting to lean back to the side of just doing it the HTML way and putting up with the occasional (and easily fixable by the user) issue of the captions sometimes ending up on the next page. :/

Yep yep, this is the camp I fall in. Design it in a way and hope it falls on the same page, if not, oh well. Although I must add, that works well for my situation (trying to create a "one source EPUB to rule them all"). If you didn't mind creating SPECIFIC files for SPECIFIC stores/readers, then the SVG wrapper is clearly the superior technical choice.

[Psymon]

Originally Posted by Tex2002ans

Boiling Water? That is some hard stuff! Does anyone even know how to do that?

The water just keeps on falling out of the pot, I have no clue how to keep it in there!

That's because the strainer is supposed to be used after you've cooked your noodles in the pot -- you don't cook them in the strainer.

I was recently chatting with Hitch, and Hitch mentioned that if I ever finished writing and posting my SVG Tutorial... it would probably be "about 25 pages". I laughed. I just took a look at my Formula to PNG Tutorial, and it is ~9 pages.... SVG is way more complex... I would have to take up about 50!

I'm not looking forward to it -- any of them.

More seriously, re ADE2 and the issue I was having

Hmmm... it SHOULD handle PNG transparency perfectly fine. What program did you use to generate it? (Photoshop? Which version? What settings did you use while saving the PNG?)

I made them in Photoshop CS6. As for which settings, um, if I remember correctly I did them up as PNG-8, 64 colors, no transparency dither, no matte, in sRGB color space -- at least, that's what my settings were still set at, from the last time I saved as PNG (which as far as I recall was for these particular images that are in question).

Mind sending a few of those images my way so I can do some fiddling?? Or just attach a sample EPUB with the problem in it?

Here, I'll attach a sample of what I've been working on, which includes a "title" page where you can see the issue re the PNG transparency in ADE2 (re the ornamental image underneath the main title there), plus I included both the HTML and SVG version of the gallery I've been working on (I only included 3 of the 14 paintings in order to keep the file size down here).

We had a nice big chat about images with captions (perhaps one of THOSE solutions might help you as well) + the typical warning about not ignoring older readers. You can also see my Post #9 where I listed 6 other MobileRead topics asking similar "image with captions" question:

https://www.mobileread.com/forums/sho...d.php?t=223178

Thanks for that, I did search about this before, before I posted this thread, but I didn't seem to find the answer I was looking for -- but that helps, I guess I was probably using the wrong search terms or something. I check that out over the weekend, see if maybe I find any more ideas.

Yep yep, this is the camp I fall in. Design it in a way and hope it falls on the same page, if not, oh well. Although I must add, that works well for my situation (trying to create a "one source EPUB to rule them all"). If you didn't mind creating SPECIFIC files for SPECIFIC stores/readers, then the SVG wrapper is clearly the superior technical choice.

Well, I definitely don't want to be designing for specific readers, let alone stores. My intention was to just give this book away, probably through a variety of different places, and so no doubt it'll end up being viewed on any number of different kinds of readers -- and so, as you say, I'm probably better off just keeping things simple.

It is too bad, because it is nice if I can guarantee that the image/caption stay together -- but then, there's also the fact that I wasn't too crazy about the caption changing size along with the image, too, and in addition to that it seemed that my embedded font wasn't working in the caption either (although that might be because I hadn't included some SVG-specific "font face" code, I just assumed that the caption would use the font specified in the style sheet).

In any case, your response here does have me leaning even more back to just doing it the HTML way, but I'll certainly be interested in anything you can make of the file I've attached here -- especially, at this point, that PNG transparency issue.

Thanks very much, Tex (and also thanks once again to everyone else who has helped here)!

[RbnJrg]

Hi Psymon;

I have just seen that you are using "em" units with SVG. Well, you shouldn't use "em" but "pt" (or "px") with SVG. Many ereaders don't support "ems" when they are used inside SVG images (in theory, SVG should support "em" but in practice I have found another thing). By the way, you should read this tutorial if you are going to work with SVG:

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

http://commons.oreilly.com/wiki/inde...ssentials/Text

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

Regards
Rubén

[Psymon]

Originally Posted by RbnJrg

I have just seen that you are using "em" units with SVG. Well, you shouldn't use "em" but "pt" (or "px") with SVG. Many ereaders don't support "ems" when they are used inside SVG images (in theory, SVG should support "em" but in practice I have found another thing).

Oh, okay, that's good to know.

By the way, you should read this tutorial if you are going to work with SVG

At this point, I'm not sure if I am or not.

[Psymon]

Originally Posted by Tex2002ans

Hmmm... it SHOULD handle PNG transparency perfectly fine. What program did you use to generate it? (Photoshop? Which version? What settings did you use while saving the PNG?)

Mind sending a few of those images my way so I can do some fiddling?? Or just attach a sample EPUB with the problem in it?

There was a bug I found a long time ago with PNG transparency, although that was with Kindles. (I wrote down the specifics at the time in my Formula to PNG thread). Although that had mostly to do with the way that I heavily optimized the images (Indexed + Transparency). Never did research any further.

Hey, Tex, any luck with figuring out what was going on with my transparent PNGs (as we were talking about earlier, re their not being transparent in ADE2)?