Images in Sigil (ePub)

bentleymaniac · 04-11-2016, 10:44 PM

I'm currently creating an illustrated ebook in Sigil, and have sort of worked out the html and css for the text and headings. Unfortunately, I'm completely stuck when it comes to the images.

My idea for the images, is for them to occupy the whole screen, either like the cover does, or else just as a whole page. I also want it to scale so that the aspect ratio remains the same. Thus, the image needs to scale to fit either the height or the width, whichever prevents the image from being cropped. As the images are contained within the chapter, I would prefer to NOT create a separate *.xhtml file for each image.

I would also like to keep my inline css as basic and short as possible. (I would prefer to use the separate css file for this.

If I try to use an inline <div> and <img> tags within the <body>, the image won't scale any smaller than the width of the original image. I just get scrollbars.

When I try to use <svg> (which I know nothing about, but was copying instructions from the web) I end up with huge white bars above and below the image.

In both cases, the image breaks itself to display over two pages.

Could someone please help, by telling me,

1) what image format is best for epubs (jpg, png, svg, etc)

2) the best coding to make the images do what i want (and explain what each part means)

I realise I am asking for a lot, but I really am stuck.

My Html for inline images was:

Code:

<div class="inline">
	<img alt="" src="../Images/Image_04.png"/>
</div>

and the css was:

Code:

div.inline {
	height:99%;
	width:100%;
	page-break-inside:avoid;
	text-align:center;
}

div.inline
	img {
		display:inline-block;
		height:100%;
		margin:0 auto;
	}

fbrzvnrnd · 04-12-2016, 02:45 AM

I suggest you to use a different file for each image.
Remember: the height and width % are related to the parent of the DOM element where img is placed.
This is not usually a problem for the width, because left and right edge are the same of the ebook screen.
BUT this is a problem for the height, because the parent is the body, and the body height "begins" in first page of your chapter and ends in the last page of your chapter. So when you ask an height 90%, you are not talking about 90% of the page, but 90% of the body element, so 90% of the entire chapter!

bentleymaniac · 04-12-2016, 05:03 AM

Thanks. I may have accidentally come across a solution. I have yet to check it on an ereader, but it displays correctly (except for an extra page break after an image)

here's what I did:
css

Code:

p {
	font-family:"Book Antiqua";
	src: url("../Fonts/BookAntiqua.TTF") format("truetype");
	font-size:1.2em;
	text-indent:1.2em;
	margin-top:0px;
	margin-bottom:0px;
	text-align:justify;
}
p.ni {
	text-indent:0em;
}

div.inline {
	height:99%;
	width:100%;
	page-break-inside:avoid;
	text-align:center;
}

div.inline
	img {
		display:inline-block;
		height:auto;
		max-height:100%;
		width:auto;
		max-width:100%;
		margin:0 0;
	}

html

Code:

<body>
<p>Shoie, a thoughtful look on his face, turned the knob and walked into Alvin's bedroom. At least he <i>started</i> in. The act of opening the door triggered Alvin's Foolproof Burglar Alarm. A boxing glove packed with stones, mounted on a short section of two-by-four, came whipping through the air. It was powered by a screen-door spring. At the last moment Shoie suddenly remembered the Burglar Alarm — he'd been caught by it countless times before - and tried to duck. He was too late. The boxing glove struck him smack on the nose, and he went reeling back into Alvin's arms, while a loud bell clanged and the lights in the room flashed on and off.</p>

<div class="inline">
	<img alt="Image_02" src="../Images/Image_02.png"/>
</div>

<p>Daphne put her hand to her mouth and giggled. Her golden pigtails shook. "Shoie, I swear you'll <i>never</i> remember that dumb boxing glove that Alvin put up as a burglar alarm. I'll bet you've been hit by that thing fifty zillion times. Tomorrow you'll come up here and walk right into it again."</p>
</body>

(from "Alvin Fernald, TV Anchorman", by Clifford B. Hicks - a public domain book which I am converting from hard copy to epub)

any ways of making the code more efficient wouuld be handy.

fbrzvnrnd · 04-12-2016, 05:56 AM

Yes, I forgot you want the image take all the space of the page, sorry.
Anyway the code is interesting: it seems ADE4 uses the height % referred to the page space instead body. Ibooks uses the body.

bentleymaniac · 04-12-2016, 06:07 AM

Quote:

Originally Posted by fbrzvnrnd

Yes, I forgot you want the image take all the space of the page, sorry.
Anyway the code is interesting: it seems ADE4 uses the height % referred to the page space instead body. Ibooks uses the body.

so did the code work on your system? I have to use ADE 2.0 so it doesn't accept css for text-align, and quite a few other commands.

It seems to work in the latest Calibre reader, though.

Notjohn · 04-12-2016, 06:52 AM

I am skeptical that you can (or want to) fill the page, given that e-book readers come in various dimensions. The Fire tablet, for example, is skinnier than most e-ink computer screens.

I also usually put an image in its own file. I don't use SVG except for the cover, which Sigil does for me. I put an inline width instruction (usually 100%, with exceptions for the book colophon and for images of poor quality) but nothing for the height. This is the style:

div.image {
text-align:center;
margin-bottom: 0.25em;
}

The bottom margin is to provide a bit of separation if there's a caption, as there usually is.

fbrzvnrnd · 04-12-2016, 07:11 AM

Quote:

Originally Posted by bentleymaniac

so did the code work on your system? I have to use ADE 2.0 so it doesn't accept css for text-align, and quite a few other commands.

It seems to work in the latest Calibre reader, though.

Actually I suggest you to test with an ebook reader (adobe digital mobile). Your code give good results with Ibooks or ADE4, but I fear it will no work with real ebook reader (sorry today I forgot mine @home).

bentleymaniac · 04-12-2016, 07:21 AM

no problem. I have two different types of Kobo reader, so I'll test on those when I finish the text editing.

bentleymaniac · 04-12-2016, 07:24 AM

BTW, what's the usual formatting for html and css in an epub? I was taught to tab in for each command, but sigil and most ebooks I have looked at seem to write everything without tabs.
ie:
The way I learned html/css

Code:

<html>
<body>
    <p class="...">
        <span>...</span>
    </p>
</body>
</html>

but sigil seems to do everything flat

Code:

<html>
<body>
<p class="...">
<span>...</span>
</p>
</body>
</html>

which is correct/better?

KevinH · 04-12-2016, 08:12 AM

For presentation of html on the reader it simply desn't matter. But if you have to manually edit the page, using indents helps to see the structure and that can help prevent mistakes when editing.

Sigil puts it exactly how it was provided to Sigil. You can use a reformat xhtml right click menu command to "pretty-print" format the page for you automatically if you want the indented version.

KevinH

fbrzvnrnd · 04-12-2016, 09:16 AM

Quote:

Originally Posted by bentleymaniac

which is correct/better?

the better is the better for you (or for the people that have to work with you

theducks · 04-12-2016, 12:49 PM

Quote:

Originally Posted by bentleymaniac

BTW, what's the usual formatting for html and css in an epub? I was taught to tab in for each command, but sigil and most ebooks I have looked at seem to write everything without tabs.
ie:
The way I learned html/css

Code:

<html>
<body>
    <p class="...">
        <span>...</span>
    </p>
</body>
</html>

but sigil seems to do everything flat

Code:

<html>
<body>
<p class="...">
<span>...</span>
</p>
</body>
</html>

which is correct/better?

Don't worry about YOU indenting while entering code, Indented HTML is for you (unlike some other languages)

If you just want it Pretty, right click in the page: Reformat:<choice>

bentleymaniac · 04-13-2016, 07:30 PM

So, I tried it on my Kobo Glo HD, and was majorly disappointed.
The images display at about a quarter the size of the screen, (1/2 width and 1/2 height), and they have massive page breaks before and after.

What I'm really trying to do is have the image float slightly, so that it displays full screen (on every device) at the next page turn after a particular referenced point in the text. So, for instance, you have the description of an event happening, and the next page turn gives you the illustration full screen, then the next page turn back to text WITHOUT having three quarters of the page before the illustration blank because the image is forced in a particular spot in the text.

Any ideas? I'm stumped.

fbrzvnrnd · 04-14-2016, 12:56 AM

I think the max-height/max-width *could* be the problem. You ask to the picture to do not resize itself more than its pixel dimension. So if you open the book in a device with a high ppi density, the image will be "little".

Toxaris · 04-14-2016, 03:59 AM

The only foolproof method of having an image full page everytime is to have a seperate XHTML for each image. It is not ideal, far from it, but it is the only thing that works consistent. Also, if you want ensure that the aspect ratio is correct and that it is sized correctly on each device, regardless of the resolution, an SVG wrapper would be the best choice. That is also what most people use for a cover.

04-11-2016, 10:44 PM	#1
bentleymaniac Enthusiast Posts: 29 Karma: 10 Join Date: Oct 2015 Device: kobo	Images in Sigil (ePub) I'm currently creating an illustrated ebook in Sigil, and have sort of worked out the html and css for the text and headings. Unfortunately, I'm completely stuck when it comes to the images. My idea for the images, is for them to occupy the whole screen, either like the cover does, or else just as a whole page. I also want it to scale so that the aspect ratio remains the same. Thus, the image needs to scale to fit either the height or the width, whichever prevents the image from being cropped. As the images are contained within the chapter, I would prefer to NOT create a separate .xhtml file for each image. I would also like to keep my inline css as basic and short as possible. (I would prefer to use the separate css file for this. If I try to use an inline <div> and <img> tags within the <body>, the image won't scale any smaller than the width of the original image. I just get scrollbars. When I try to use <svg> (which I know nothing about, but was copying instructions from the web) I end up with huge white bars above and below the image. In both cases, the image breaks itself to display over two pages. Could someone please help, by telling me, 1) what image format is best for epubs (jpg, png, svg, etc) 2) the best coding to make the images do what i want (and explain what each part means) I realise I am asking for a lot, but I really am stuck. My Html for inline images was: Code: <div class="inline"> <img alt="" src="../Images/Image_04.png"/> </div> and the css was: Code: div.inline { height:99%; width:100%; page-break-inside:avoid; text-align:center; } div.inline img { display:inline-block; height:100%; margin:0 auto; } Last edited by bentleymaniac; 04-11-2016 at 11:29 PM. Reason: additional information*

04-12-2016, 07:24 AM	#9
bentleymaniac Enthusiast Posts: 29 Karma: 10 Join Date: Oct 2015 Device: kobo	BTW, what's the usual formatting for html and css in an epub? I was taught to tab in for each command, but sigil and most ebooks I have looked at seem to write everything without tabs. ie: The way I learned html/css Code: <html> <body> <p class="..."> <span>...</span> </p> </body> </html> but sigil seems to do everything flat Code: <html> <body> <p class="..."> <span>...</span> </p> </body> </html> which is correct/better? Last edited by bentleymaniac; 04-12-2016 at 07:27 AM.

04-14-2016, 12:56 AM	#14
fbrzvnrnd Fanatic Posts: 554 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	I think the max-height/max-width could be the problem. You ask to the picture to do not resize itself more than its pixel dimension. So if you open the book in a device with a high ppi density, the image will be "little". Last edited by fbrzvnrnd; 04-14-2016 at 08:22 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Images now showing in ePub after editing in Sigil or Calibre	postkast2929	ePub	44	04-21-2016 11:45 AM
Can I use the code Sigil uses for Covers for other images?	rosshalde	Sigil	4	12-23-2014 11:00 AM
Copying Sigil Images Folder	EditorOne	Sigil	5	06-08-2013 08:50 PM
Images with Sigil	Gerlyn	ePub	2	02-08-2012 01:05 PM
Alreader not showing images after editing ePUB with Sigil	cerramadre	Sigil	27	09-02-2011 10:24 PM

04-12-2016, 02:45 AM	#2
fbrzvnrnd Fanatic Posts: 554 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	I suggest you to use a different file for each image. Remember: the height and width % are related to the parent of the DOM element where img is placed. This is not usually a problem for the width, because left and right edge are the same of the ebook screen. BUT this is a problem for the height, because the parent is the body, and the body height "begins" in first page of your chapter and ends in the last page of your chapter. So when you ask an height 90%, you are not talking about 90% of the page, but 90% of the body element, so 90% of the entire chapter!

04-12-2016, 05:56 AM	#4
fbrzvnrnd Fanatic Posts: 554 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	Yes, I forgot you want the image take all the space of the page, sorry. Anyway the code is interesting: it seems ADE4 uses the height % referred to the page space instead body. Ibooks uses the body.

04-12-2016, 06:52 AM	#6
Notjohn mostly an observer Posts: 1,515 Karma: 987654 Join Date: Dec 2012 Device: Kindle	I am skeptical that you can (or want to) fill the page, given that e-book readers come in various dimensions. The Fire tablet, for example, is skinnier than most e-ink computer screens. I also usually put an image in its own file. I don't use SVG except for the cover, which Sigil does for me. I put an inline width instruction (usually 100%, with exceptions for the book colophon and for images of poor quality) but nothing for the height. This is the style: div.image { text-align:center; margin-bottom: 0.25em; } The bottom margin is to provide a bit of separation if there's a caption, as there usually is.

04-12-2016, 07:21 AM	#8
bentleymaniac Enthusiast Posts: 29 Karma: 10 Join Date: Oct 2015 Device: kobo	no problem. I have two different types of Kobo reader, so I'll test on those when I finish the text editing.

04-12-2016, 08:12 AM	#10
KevinH Sigil Developer Posts: 7,644 Karma: 5433388 Join Date: Nov 2009 Device: many	For presentation of html on the reader it simply desn't matter. But if you have to manually edit the page, using indents helps to see the structure and that can help prevent mistakes when editing. Sigil puts it exactly how it was provided to Sigil. You can use a reformat xhtml right click menu command to "pretty-print" format the page for you automatically if you want the indented version. KevinH

04-13-2016, 07:30 PM	#13
bentleymaniac Enthusiast Posts: 29 Karma: 10 Join Date: Oct 2015 Device: kobo	So, I tried it on my Kobo Glo HD, and was majorly disappointed. The images display at about a quarter the size of the screen, (1/2 width and 1/2 height), and they have massive page breaks before and after. What I'm really trying to do is have the image float slightly, so that it displays full screen (on every device) at the next page turn after a particular referenced point in the text. So, for instance, you have the description of an event happening, and the next page turn gives you the illustration full screen, then the next page turn back to text WITHOUT having three quarters of the page before the illustration blank because the image is forced in a particular spot in the text. Any ideas? I'm stumped.

04-14-2016, 03:59 AM	#15
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	The only foolproof method of having an image full page everytime is to have a seperate XHTML for each image. It is not ideal, far from it, but it is the only thing that works consistent. Also, if you want ensure that the aspect ratio is correct and that it is sized correctly on each device, regardless of the resolution, an SVG wrapper would be the best choice. That is also what most people use for a cover.

Advert

Advert