<svg><text>

[Karellen]

epub v3.0
Reference... https://developer.mozilla.org/en-US/...Tutorial/Texts

I am attempting to add an image and a note underneath the image.

If I used a simple <img> tag, the note ends up on the next page, even though there is enough space on the page for the text

I am now trying to use the <svg> with a <text> field, but I can't seem to get the text to wrap. Instead the start and end of the text disappears off the edges of the page.

This is my code...

PHP Code:

<div class="nopagebreak">

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 533 800" preserveAspectRatio="xMidYMid meet">
      <image width="533" height="800" xlink:href="../Images/stepper.jpeg"/>
      <text x="256" y="750" text-anchor="middle" class="centre">The plan for Willis Linsay&#8217;s original ‘Stepper’ as anonymously posted online.</text>
      <text x="256" y="770" text-anchor="middle" class="centre">(please note: the publisher accepts no responsibility for the inappropriate use of this diagram or the technology it represents.)</text>
    </svg>

</div> 


Which gives me what is shown in the image.

How do I force the text to wrap to the next line, using centre align method?

Also... How to remove the large top margin and centre the image horizontally. Using <div class="centre"> won't centre the image.


Thanks

[Turtle91]

People have been beating their heads against this wall for a while now. There are a few threads talking about it if you really want to do the searching.

Bottom line: There IS a way to make it work, but it takes a lot of effort and isn't guaranteed to work on all devices. The best easiest way is to use a photo editor and place the text exactly how you want it to appear. Then save the image with the text included.

[KevinH]

The svg 1.1 spec has no text wrap capability and any solution to make it requires javascript or lots of obscure cssorboth.

If epub3/html5, have you tried making the img tag a child of a figure tag and using the figcaption tag immediately after inside the figure tag. Of course sizing the img using css is needed as well to make sure it fits on the page with enough space for a caption. You can add a page-break before to make it start on a new page if that helps.

[Karellen]

@KevinH

Thank you, that was a very simple and easy solution and it all works nicely in the Libra 2. I had not come across the <figure> tab before.

After losing track of time and spending well over an hour trying to figure out the svg text method, when I thought I finally had it working using <foreignobject>, I sideloaded the book to the Libra 2 and there was no text, even though I could see it in Calibre Editor and Reader as well as Kindle Previewer. Removed the <foreignobject> tags and just used <text> and all I got was ⌧⌧⌧⌧ symbols. So it looks like the Libra does not recognise <svg> text tags.

Thanks again

[Notjohn]

I have adopted a policy of putting the cart before the horse: the caption information is worked into the paragraph preceding the image. So the reader has presumably already absorbed the information by the time he/she/it sees the image, and can always page back if (as usually happens) it's on the preceding "page".

What prompted me to do this was a photo book about my home state that I borrowed from the state e-brary. Starting toward the beginning of the book, every page showed a caption for the preceding image at the top of the page, with the rest of the page given over to another and unrelated photo.