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 05-16-2017, 04:19 AM   #1
Cyberseeker
Connoisseur
Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.
 
Posts: 55
Karma: 602194
Join Date: Apr 2017
Device: Ipad
Maximize Image Width

I want to use SVG diagrams in my book, and they have various widths. Up till now I have been inserting them with the following code:

Code:
<div><img alt="My Diagram" src="../Images/my diagram.svg"/></div>
However, I would like them to utilise the maximum screen space of whatever device the reader is using. Could someone suggest code that tells the image to render itself to the maximum width (portrait or landscape) of the device they are on? Thereafter, can they be 'zoomed' even larger still?
Cyberseeker is offline   Reply With Quote
Advert
Old 05-16-2017, 10:24 AM   #2
Turtle91
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: 1,436
Karma: 11279752
Join Date: Dec 2012
Location: Altus, Oklahoma today
Device: iPhone 6/5/iPad 1,2 & Air/Surface Pro/Kindle PW
If you want the diagrams on their own page I would recommend an SVG wrapper. If you are using Sigil then there is a plugin to insert an image. Do a search on SVG...there are a lot of threads talking about this issue.
The SVG code for maximizing the display is:
Code:
<svg xmlns="http://www.w3.org/2000/svg" 
     width="100%" height="100%" 
     preserveAspectRatio="xMidYMid meet" version="1.1" 
     viewBox="0 0 526 701"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <image width="526" height="701" xlink:href="../Images/Test.jpg"/>
</svg>
- Where 526 and 701 are replaced with the actual dimensions of your image.

If you want the image to be on the same page as text then you can just wrap it with a <div>:

Code:
<div class="image">
    <img alt="" src="../Images/test.jpg" style="max-width:600px" />
</div> 

div.image {width:100%; margin:2em auto; text-align:center}
img       {max-width:100%; max-height:100%}


-OR-

<div class="image_600">
    <img alt="" src="../Images/test.jpg" />
</div> 

div.image_600 {width:100%; margin:2em auto; text-align:center; max-width:600px}
img           {max-width:100%; max-height:100%}
You can style the classes however you want. The style in the <img> is optional. If you have a lot of different sized images then you can enter that individual image's width in pixels. This prevents smaller images from getting too stretched and blurry on uber-large displays. If you only have a few images you can just give the <div> a different class name (image_600, image_1000, etc) and do all the styling in the stylesheet....pick your poison. Although purists will demand all styling is done in the stylesheet.

edit:
Of course, if you are using solely .svg diagrams then you don't need to worry about the max-width and blurring/stretching issues. But you can use this technique with other formats as well.

Cheers,

Last edited by Turtle91; 05-16-2017 at 11:00 AM.
Turtle91 is offline   Reply With Quote
Old 05-16-2017, 02:32 PM   #3
Cyberseeker
Connoisseur
Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.
 
Posts: 55
Karma: 602194
Join Date: Apr 2017
Device: Ipad
Quote:
Originally Posted by Turtle91
If you want the diagrams on their own page I would recommend an SVG wrapper. If you are using Sigil then there is a plugin to insert an image. Do a search on SVG...there are a lot of threads talking about this issue.
The SVG code for maximizing the display is:
I haven't tried this yet because most of my images are inserted in the text.

Quote:
Originally Posted by Turtle91
If you want the image to be on the same page as text then you can just wrap it with a <div>:
Ive gone with your suggestion here. So far so good. Thank you.
Code:
	div.image {
width:100%; margin:2em auto; text-align:center;
}
	img       {
max-width:100%; max-height:100%
}
However, I want some of my images more than 100% So I tried changing the css dimensions to 200% but nothing happened. When I originally drew the images in Inkscape, I didnt worry too much about the width because, as you mentioned, svg is supposed to stretch. So, here I am, wanting to stretch them.

Please don't tell me I have to draw my pictures again. Is there something I can add to the stylesheet to stretch the image across the screen?

Last edited by Cyberseeker; 05-16-2017 at 02:37 PM.
Cyberseeker is offline   Reply With Quote
Old 05-16-2017, 02:57 PM   #4
Turtle91
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: 1,436
Karma: 11279752
Join Date: Dec 2012
Location: Altus, Oklahoma today
Device: iPhone 6/5/iPad 1,2 & Air/Surface Pro/Kindle PW
I don't think 200% would do anything...the screen is only 100% wide.

What I'm thinking is that your image files themselves have a bunch of space around them?? Can you open the svg in an svg editor and crop out any space??

You may need to create a blank file and then copy/paste the svg code.
Turtle91 is offline   Reply With Quote
Old 05-16-2017, 06:51 PM   #5
Cyberseeker
Connoisseur
Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.
 
Posts: 55
Karma: 602194
Join Date: Apr 2017
Device: Ipad
White space is not the problem. My website seem to be rendering SVG images at full width. The problem I'm having seems to be happening in Sigil. The content pane shows text at full width but inserted images at about 75%. I'll repost on the Sigil forum.
Cyberseeker is offline   Reply With Quote
Old 05-16-2017, 07:03 PM   #6
Cyberseeker
Connoisseur
Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.
 
Posts: 55
Karma: 602194
Join Date: Apr 2017
Device: Ipad
Image Width in Contents Pane

Question continued here

Last edited by Cyberseeker; 05-16-2017 at 07:09 PM.
Cyberseeker is offline   Reply With Quote
Old 05-17-2017, 06:15 AM   #7
Cyberseeker
Connoisseur
Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.
 
Posts: 55
Karma: 602194
Join Date: Apr 2017
Device: Ipad
Quote:
Originally Posted by Turtle91
The SVG code for maximizing the display is:
Code:
<svg xmlns="http://www.w3.org/2000/svg" 
     width="100%" height="100%" 
     preserveAspectRatio="xMidYMid meet" version="1.1" 
     viewBox="0 0 526 701"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <image width="526" height="701" xlink:href="../Images/Test.jpg"/>
</svg>
- Where 526 and 701 are replaced with the actual dimensions of your image.
Im back again, this time trying your first option. Sorry for all the questions but its a learning curve for me.

Ive tried the above option inbetween my text paragraphs and the image expands and contracts the way I hoped it would. It looks good. The only trouble is, that it has a very large gap from the text, and I cannot see any thing about "padding" or whatever to reduce that gap.

Is this method only for use on a separate page with no text? If so, would the Sigil plugin do it without the gap?

Last edited by Cyberseeker; 05-17-2017 at 06:19 AM.
Cyberseeker is offline   Reply With Quote
Old 05-17-2017, 07:53 AM   #8
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,369
Karma: 117701645
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
The wrapper will fill the whole page. So, the gaps cannot be avoided. Therefore it is usually better to keep those images either at the start or beginning of a chapter.
Toxaris is offline   Reply With Quote
Old 05-17-2017, 01:44 PM   #9
Cyberseeker
Connoisseur
Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.
 
Posts: 55
Karma: 602194
Join Date: Apr 2017
Device: Ipad
Quote:
Originally Posted by Toxaris View Post
The wrapper will fill the whole page. So, the gaps cannot be avoided. Therefore it is usually better to keep those images either at the start or beginning of a chapter.
Several of the chapters in my 'paper' book have a graphic timeline running along the bottom of each page. As I think about what you are saying, the solution for me, may be to consolidate all of them into one big diagram, and put it at the end of the chapter.

Hmm I can see that E-pub turns conventional desktop publishing on to its head.
Cyberseeker is offline   Reply With Quote
Old 05-17-2017, 01:47 PM   #10
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 48,156
Karma: 36908365
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
You can't run a graphic at the bottom of every page. It's not doable. The bottom of the page is not always the same. Many different variables change where the bottom of the page is.
JSWolf is offline   Reply With Quote
Old 05-17-2017, 03:39 PM   #11
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,369
Karma: 117701645
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
Well, you can used fixed layout. But that differs strongly per device (if supported at all,, most won't). You would be better of with a PDF.
Toxaris is offline   Reply With Quote
Old 05-17-2017, 05:40 PM   #12
Cyberseeker
Connoisseur
Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.
 
Posts: 55
Karma: 602194
Join Date: Apr 2017
Device: Ipad
Quote:
Originally Posted by Toxaris View Post
Well, you can used fixed layout. But that differs strongly per device (if supported at all,, most won't). You would be better of with a PDF.
Ive been down the pdf track with Amazon's new tool for educational pubs. It ok but html is more flexible. 'Just that I have to put my learning hat on.
Cyberseeker is offline   Reply With Quote
Old 05-19-2017, 06:52 AM   #13
Cyberseeker
Connoisseur
Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.
 
Posts: 55
Karma: 602194
Join Date: Apr 2017
Device: Ipad
Quote:
Originally Posted by Turtle91
The SVG code for maximizing the display is:
Code:
<svg xmlns="http://www.w3.org/2000/svg" 
     width="100%" height="100%" 
     preserveAspectRatio="xMidYMid meet" version="1.1" 
     viewBox="0 0 526 701"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <image width="526" height="701" xlink:href="../Images/Test.jpg"/>
</svg>
Just a small refinement please. Im changing the 100% to 95% so that my image is indented slightly from the text. Can you tell me how to center it in that case?
Cyberseeker is offline   Reply With Quote
Old 05-19-2017, 10:53 AM   #14
Turtle91
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: 1,436
Karma: 11279752
Join Date: Dec 2012
Location: Altus, Oklahoma today
Device: iPhone 6/5/iPad 1,2 & Air/Surface Pro/Kindle PW
Quote:
Originally Posted by Cyberseeker View Post
Just a small refinement please. Im changing the 100% to 95% so that my image is indented slightly from the text. Can you tell me how to center it in that case?
The preserveAspectRatio="xMidYMid meet" selection takes care of that. It centers the image using the options: xMidYMid meet.

Check here for a definition of all the SVG terms.
Turtle91 is offline   Reply With Quote
Old 05-21-2017, 07:47 PM   #15
Cyberseeker
Connoisseur
Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.Cyberseeker ought to be getting tired of karma fortunes by now.
 
Posts: 55
Karma: 602194
Join Date: Apr 2017
Device: Ipad
Quote:
Originally Posted by Cyberseeker
Several of the chapters in my 'paper' book have a graphic timeline running along the bottom of each page. As I think about what you are saying, the solution for me, may be to consolidate all of them into one big diagram, and put it at the end of the chapter.
OK, so my diagrams stretch across the screen when put on separately. Here is a single long diagram, and it works just fine:

Code:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 900 200" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="900" height="200" xlink:href="../Images/singlelongdiagram.svg"/>
</svg>
And here is a consolidated picture of three of my long diagrams. No luck.

Code:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 900 1076" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="900" height="1076" xlink:href="../Images/consolidateddiagram.svg"/>
</svg>
My large consolidated diagram does not stretch over the page as I would like it to. Why is that? It is the same code? The only thing I can think of, is that my picture has changed from being 'landscape' to 'portrait.' Nothing I do in creating the taller graphic seems to stretch over Sigils content pane.

I cannot attach an svg file, but can you duplicate a 900w x 1076h image in Sigil and make it stretch?

Last edited by Cyberseeker; 05-21-2017 at 07:52 PM.
Cyberseeker is offline   Reply With Quote
Reply

Tags
image, svg, width, zoom

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
fit a image to the width of screen leescott ePub 7 07-23-2015 10:39 AM
Maximize Image Francois Driesen Calibre 8 08-19-2014 02:58 PM
Changing image width in the economist goios Recipes 1 04-24-2014 01:29 PM
problem with floating image and relative width jobalcaen ePub 5 08-17-2013 07:53 AM
Setting Image width on news feed Wiggles Calibre 2 08-13-2010 02:10 AM


All times are GMT -4. The time now is 09:29 AM.


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