MobileRead Forums - View Single Post

Karellen · 06-20-2022, 09:16 PM

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

06-20-2022, 09:16 PM	#1
Karellen Wizard Posts: 1,611 Karma: 9500498 Join Date: Sep 2021 Location: Australia Device: Kobo Libra 2	<svg><text> 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’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 Attached Thumbnails Last edited by Karellen; 06-20-2022 at 09:33 PM.