Image Width in Contents Pane

[Cyberseeker]

I would like svg images included in my book to utilise the maximum screen space of whatever device the reader is using, so my stylesheet says,

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

Sigil's contents pane shows text at full width, but inserted images are rendered at about 75%. I asked about this up in the Epub forum and also at Inkscape, but I think it must be a Sigil issue.

Has anyone encountered this problem, and if so, can I get a fix please?

[Toxaris]

It is not an Sigil issue. The best way to use the maximum screen space is to use a wrapper. The code for that is also used for covers in Sigil. That is the same answer you got in the ePUB forum.

Also, you have a margin specified for the div containing the image, so the complete screen will never be used. That is even besides the potential margin for the body and html tags.

Another point, the auto value does not really work for a lot of readers It will be interpreted as being 0 (this in accordance to the ePUB specifications).

[Turtle91]

Originally Posted by Toxaris

Another point, the auto value does not really work for a lot of readers It will be interpreted as being 0 (this in accordance to the ePUB specifications).

That is true - the fix is to combine it with text-align:center to catch all those pesky 'substandard' readers.

[CalibUser]

You may wish to try my plugin that wraps images in SVG code. It is available at:

https://www.mobileread.com/forums/sh...d.php?t=283333

[Cyberseeker]

Originally Posted by CalibUser

You may wish to try my plugin that wraps images in SVG code. It is available at:

https://www.mobileread.com/forums/sh...d.php?t=283333

Im giving it a whirl now. Looks good, but there seem to be a few glitches. The 2 buttons, 'Import external image' and 'Default folder' both point to the same place.

Then, when I select one of my svg images 'Select image window' I get a popup saying, "You must select an image from the list, or load a file."

[CalibUser]

Originally Posted by Cyberseeker

The 2 buttons, 'Import external image' and 'Default folder' both point to the same place.

This is intentional: The 'Import external image' button will open a browser dialog that opens at the folder set by the 'Default folder' option. You can change the default folder by clicking the 'Default folder' button and selecting a different folder that contains your images. Then, when you click 'Import external image' the image folder that you set as a default will open. Perhaps I did not make this clear enough in the ePub instructions. Clicking the 'Default folder' button will not let you select an image.

Originally Posted by Cyberseeker

Then, when I select one of my svg images 'Select image window' I get a popup saying, "You must select an image from the list, or load a file."

The plugin will not import a SVG image (the plugin uses the Pillow module and unfortunately this does not support SVG files). However, you can select eg a png file and when you import this it will be wrapped in a SVG wrapper.

There is an issue with double clicking the selected file in the dialog box 'Choose an image file': if the mouse is double-clicked on an image filename in this dialog and the mouse is over the 'Select image' listbox of the ''Insert Image into ebook with SVG wrapping' window then the second click seems to go through to the listbox; if the listbox in this region is empty, then a file is not selected and you get the message "You must select an image from the list, or load a file.".

To overcome this problem, instead of double clicking an image file to select it in the 'Choose an image file' dialog, click the image file once to highlight it and then click the 'Open' button in this dialog and this should open your image.

I have not been able to resolve this issue so far; I may have to change the code so that a single click opens the image file, but I would prefer to find an alternative solution as a double click is the standard way to open a file. I hope the above helps in the meantime.

[Toxaris]

Originally Posted by CalibUser

The plugin will not import a SVG image (the plugin uses the Pillow module and unfortunately this does not support SVG files). However, you can select eg a png file and when you import this it will be wrapped in a SVG wrapper.

That is a shame, since svg is a perfectly acceptable format for images in an ePUB.

[Cyberseeker]

Originally Posted by CalibUser

The plugin will not import a SVG image (the plugin uses the Pillow module and unfortunately this does not support SVG files). However, you can select eg a png file and when you import this it will be wrapped in a SVG wrapper.

Perhaps svg files will be supported in the future. In the meanwhile, I tried jpeg and png and it looked good. One question however; what advantage is it to wrap a different file-type image in a svg wrapper? Im not a techie so it seems strange to me. Does it enhance the png image?

[Toxaris]

No, but it will scale to any screen resolution utilizing the whole screen. When set correctly, it keep the aspect ratio.

[Cyberseeker]

Scaling to any screen resolution sounds like a good idea. But as I understand it, pixel based images degrade when scaled, whereas svg images do not. Is this an issue with CalibUser's plugin?

[Turtle91]

You can also manually import the svg file, then use the same technique, and code, to put the SVG wrapper around it. See the other thread you had on this topic.

[CalibUser]

Originally Posted by Cyberseeker

Scaling to any screen resolution sounds like a good idea. But as I understand it, pixel based images degrade when scaled, whereas svg images do not. Is this an issue with CalibUser's plugin?

The plugin imports images that use standard formats, eg png, and scales them to the size of the display screen for the ePub reader (retaining the aspect ratio), so if the original size of the image is significantly different to the height/width of the displayed image then some degradation is possible.

[Cyberseeker]

Originally Posted by CalibUser

The plugin imports images that use standard formats, eg png, and scales them to the size of the display screen for the ePub reader (retaining the aspect ratio), so if the original size of the image is significantly different to the height/width of the displayed image then some degradation is possible.

Thanks for replying. My book uses a lot of long diagrams, so I like your plugin and will use it for larger png's. I hope it develops in time to include svg files as well.

[DiapDealer]

PIL/Pillow doesn't support SVG. But an SVG file is just XML, so it wouldn't be impossible to "detect" an SVG file using lxml or gumbo and extract its dimensions/viewPort. You'd have to intercept the SVG before passing the image data to PIL, but it would be possible to support SVG images with the Image Wrapper plugin. What doesn't pass the SVG sniff test could then be passed on to Pillow. Just a suggestion, mind you.

[CalibUser]

Originally Posted by DiapDealer

...an SVG file is just XML, so it wouldn't be impossible to "detect" an SVG file using lxml or gumbo and extract its dimensions/viewPort. You'd have to intercept the SVG before passing the image data to PIL, but it would be possible to support SVG images with the Image Wrapper plugin. What doesn't pass the SVG sniff test could then be passed on to Pillow. Just a suggestion, mind you.

Thanks for this suggestion. It is something I may look into as a project for the future as I have not used SVG images, lxml or gumbo so I will need to get my head around these when I get time....