Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 06-20-2022, 10:16 PM   #1
Karellen
Evangelist
Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.
 
Karellen's Avatar
 
Posts: 479
Karma: 1494314
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&#8217;s original ‘Stepper’ as anonymously posted online.</text>
      
<text x="256" y="770" text-anchor="middle" class="centre">(please notethe 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
Click image for larger version

Name:	svgtext.jpg
Views:	101
Size:	69.5 KB
ID:	194459  

Last edited by Karellen; 06-20-2022 at 10:33 PM.
Karellen is offline   Reply With Quote
Old 06-20-2022, 10:34 PM   #2
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 2,642
Karma: 15679045
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2 & Air/Surface Pro/Kindle PW
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.
Turtle91 is offline   Reply With Quote
Old 06-20-2022, 11:23 PM   #3
KevinH
Sigil Developer
KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.
 
Posts: 6,569
Karma: 4500168
Join Date: Nov 2009
Device: many
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.

Last edited by KevinH; 06-20-2022 at 11:40 PM.
KevinH is offline   Reply With Quote
Old 06-21-2022, 01:17 AM   #4
Karellen
Evangelist
Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.
 
Karellen's Avatar
 
Posts: 479
Karma: 1494314
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
@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
Karellen is offline   Reply With Quote
Old 07-03-2022, 02:34 PM   #5
Notjohn
mostly an observer
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 1,509
Karma: 987654
Join Date: Dec 2012
Device: Kindle
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.
Notjohn is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Forma no svg text as the cover page image, epub3 lumpynose Kobo Reader 15 06-05-2019 12:56 PM
adding text after svg (not caption) on single page dbb1480 Sigil 7 06-11-2016 06:00 AM
Svg wrapper with a caption text field roger64 ePub 13 01-31-2016 07:45 PM
[Tutorial] Convert TEXT to SVG IMAGE with Inkscape GrannyGrump Workshop 3 04-22-2014 06:38 AM
epub-kindle conversion blanks svg with text bobb40 Conversion 2 09-28-2012 09:05 AM


All times are GMT -4. The time now is 09:27 PM.


MobileRead.com is a privately owned, operated and funded community.