EPUB3 and svg files - Page 2

rightawn · 07-11-2022, 03:13 PM

Thank you! Maybe I did something wrong.
I used Sigil and Calibre. I'll check the code and try it again.

Do you know if there is a way to put the audio player on top of the image? That would be my preferred way of displaying it.

Thanks again!

RbnJrg · 07-11-2022, 06:37 PM

Quote:

Originally Posted by rightawn

Do you know if there is a way to put the audio player on top of the image? That would be my preferred way of displaying it.

Must the image be enclosed in a svg wrapper? if not, you can use a negative margin-top for the image, or you can use "position: relative" and "z-index" properties for the audio control and image elements.

rightawn · 07-11-2022, 06:54 PM

The audio player doesn't necessarily need to be inside of the SVG.

I just thought that would be the best way for me to control the positioning of the image and audio player in the E-reader.

So far, I've had issues with the audio player appearing on different pages than the image. I want them tp display together.

I still can't get the audio to appear within the SVG. It shows up in the Sigil preview but disappears in Calibre.

RbnJrg · 07-12-2022, 10:29 AM

Quote:

Originally Posted by rightawn

The audio player doesn't necessarily need to be inside of the SVG.
...
So far, I've had issues with the audio player appearing on different pages than the image. I want them tp display together.

Then the solution is easy. Just put the audio control and the image inside a <div> with the property "display: inline-block". You should have something like this:

Code:

<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</p>

  <div class="inblock">
    <audio class="sound" controls="controls" src="../Audio/Track18.mp3">Track18</audio>

    <img class="full" alt="leopard" src="../Images/leopard.jpg"/>
  </div>

  <p>Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</p>
</body>

And your .css stylesheet should have the following:

Code:

p {
    text-align: justify;
    line-height: 1.2em;
    font-size: 1em;    
    margin: 0;
}

.inblock {
    display: inline-block;
    margin: 1em 0;
}

.sound {
    width: 100%;
    margin-bottom: 1em;
}

.full {
    width: 100%;
}

With that code your audio control and image will remain together. I attach an epub with an example so you can watch the code better.

EDIT: The code can be modified a bit if you want to limit the height of the image to a percentage of the screen height, since that is also possible to get.

rightawn · 07-12-2022, 12:09 PM

Thank you so much!

This worked! You have saved me from hours of frustration!

RbnJrg · 07-12-2022, 01:19 PM

Quote:

Originally Posted by rightawn

Thank you so much!

This worked! You have saved me from hours of frustration!

You are welcome and glad that the code helped you

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Epub3 XHTML Validation epub3	Ramesh Arpitha	ePub	5	06-30-2014 08:32 PM
New Errors Converting epub3 -> zip -> epub3	Lola25	ePub	2	11-12-2013 09:37 PM
epub from SVG files	sachin	ePub	7	05-11-2012 09:04 AM
Which is the best way to add SVG (vector graphics) to PDF files ?	DSpider	PDF	0	04-01-2011 07:27 PM

07-11-2022, 03:13 PM	#16
rightawn Junior Member Posts: 7 Karma: 10 Join Date: Jul 2022 Device: none	Thank you! Maybe I did something wrong. I used Sigil and Calibre. I'll check the code and try it again. Do you know if there is a way to put the audio player on top of the image? That would be my preferred way of displaying it. Thanks again!

07-11-2022, 06:54 PM	#18
rightawn Junior Member Posts: 7 Karma: 10 Join Date: Jul 2022 Device: none	The audio player doesn't necessarily need to be inside of the SVG. I just thought that would be the best way for me to control the positioning of the image and audio player in the E-reader. So far, I've had issues with the audio player appearing on different pages than the image. I want them tp display together. I still can't get the audio to appear within the SVG. It shows up in the Sigil preview but disappears in Calibre.

07-12-2022, 12:09 PM	#20
rightawn Junior Member Posts: 7 Karma: 10 Join Date: Jul 2022 Device: none	Thank you so much! This worked! You have saved me from hours of frustration!