[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).