Getting started, but how?

[misskennedy]

I'm a total newbie and never done an Ebook. I downloaded Sigil, read the manual and browsed th Forum here, but still, I don't know very well just HOW to get started. Is there an easy step by step turorial which lets you create a simple book, with some pictures, some text and some chapters, just a simple thing in order to introduce noobs like me into the workflow?
Or / and is there a template book which I could work on and learning by replacing content?

In fact, I have an Ipad3 and would like to make an Ebook for it (matching the Retina Display) its a comic, so content will mainly be pictures.

[theducks]

Originally Posted by misskennedy

I'm a total newbie and never done an Ebook. I downloaded Sigil, read the manual and browsed th Forum here, but still, I don't know very well just HOW to get started. Is there an easy step by step turorial which lets you create a simple book, with some pictures, some text and some chapters, just a simple thing in order to introduce noobs like me into the workflow?
Or / and is there a template book which I could work on and learning by replacing content?

In fact, I have an Ipad3 and would like to make an Ebook for it (matching the Retina Display) its a comic, so content will mainly be pictures.

My 2cents
Learn by reverse engineering (similar) a book you like

You DO need to know HTML and CSS for what you want to do (at least with Sigil which is aimed more to the Text side). You can easily throw pictures on a page with Sigil, but to place them nicely you are going to be using HTML and stylesheet properties to whip them into neat place(ment)

[misskennedy]

Theducks, Yes, I am currently working this way...I know html, but no CSS...still I'm playng around in altering the existing CSS. Actually the first results are pretty encouraging.

Two things:

1. How can I use own fonts? Yes, I imported font files into the font folders in Sigil and I replaced the font names in the CSS, but It doesn't work.

2. How can I assign a cover-mage to the book in Sigil?

[Pablo]

Originally Posted by misskennedy

Theducks, Yes, I am currently working this way...I know html, but no CSS...still I'm playng around in altering the existing CSS. Actually the first results are pretty encouraging.

Two things:

1. How can I use own fonts? Yes, I imported font files into the font folders in Sigil and I replaced the font names in the CSS, but It doesn't work.

2. How can I assign a cover-mage to the book in Sigil?

Have a look at my Quick and Dirty ePub Tutorial (see my signature). If you are using the current version of Sigil (0.5.3), make sure you download the version 2 file. The original version of the tutorial is obsolete.

[DiapDealer]

1. How can I use own fonts? Yes, I imported font files into the font folders in Sigil and I replaced the font names in the CSS, but It doesn't work.

Don't rely on Sigil's book view to decide your embedded fonts "aren't working." View your ePub in ADE (or an actual device) to determine that. Or at the very least, close Sigil and then reopen your ePub after making changes to embedded font code.

[misskennedy]

DiapDealer, I did that. Custom Fonts aren't showing on the decice, too.

I also have another issue: I do insert the image files each one into a separate section, in the hope to have an image=a page. But on the device, a blank page is created between the files. Sometimes only when viewed square, sometimes only in vertical held, sometimes in both. Is there a possibility to control this and make it the way that there's a page break after each image file but with no blank page between two?
I know that this is probably to be done in the CSS and that is where's my limit :-(

But hey, I managed to assign a cover image ! :-)

[theducks]

Originally Posted by misskennedy

DiapDealer, I did that. Custom Fonts aren't showing on the decice, too.

I also have another issue: I do insert the image files each one into a separate section, in the hope to have an image=a page. But on the device, a blank page is created between the files. Sometimes only when viewed square, sometimes only in vertical held, sometimes in both. Is there a possibility to control this and make it the way that there's a page break after each image file but with no blank page between two?
I know that this is probably to be done in the CSS and that is where's my limit :-(

But hey, I managed to assign a cover image ! :-)

without seeing your code (and the stylesheet) it is a little hard to guess
If you have not done so, grab copies of the CSS and HTML cheatsheets
there are a few things that can cause page breaks

The command: page-break-before: always

Margins before or after the image that can't exist With the image (as sized) on a single page.


And some things just don't work (reliably) on various reading software (read the ADE flaws thread in EPUB section)

Fonts: remember everything about a filename and path in EPUB is case sensitive

src:url(../Fonts/CharisSILB.ttf)

since Sigil puts font files in the Fonts folder... having the bold part is important if you want things to work

[misskennedy]

Theducks, Thank you very much for being willing to look into this. So here is the code of the CSS:

/***********************************************/
/* Styles for document saved to a stream       */
/* Generated by Aspose.Words for .NET 10.6.0.0 */
/***********************************************/

body { font-family: Souvenir Lt BT, sans-serif; line-height:115% }
h1, h2, h3, h4, p { margin:0pt 0pt 10pt }
h1 { color: #009900; font-family:Trebuchet MS, serif; font-size:1.27em; font-weight:bold; line-height:115%; margin-bottom:0pt; margin-top:24pt; page-break-after:avoid; page-break-inside:avoid }
h2 { color:#4f81bd; font-family: Souvenir Lt BT, serif; font-size:1.18em; font-weight:bold; line-height:115%; margin-bottom:0pt; margin-top:10pt; page-break-after:avoid; page-break-inside:avoid }
h3 { color:#4f81bd; font-family:Souvenir Lt BT, serif; font-weight:bold; line-height:115%; margin-bottom:0pt; margin-top:10pt; page-break-after:avoid; page-break-inside:avoid }
h4 { color:#4f81bd; font-family:Souvenir Lt BT, serif; font-style:italic; font-weight:bold; line-height:115%; margin-bottom:0pt; margin-top:10pt; page-break-after:avoid; page-break-inside:avoid }
.BalloonText { font-family:Tahoma, sans-serif; font-size:0.73em; line-height:normal; margin-bottom:0pt }
.Title { border-bottom-color:#4f81bd; border-bottom-style:solid; border-bottom-width:1pt; color:#17365d; font-family:Cambria, serif; font-size:1.27em; letter-spacing:0.25pt; line-height:normal; margin-bottom:15pt; padding-bottom:4pt }
span.SprechblasentextZchn { font-family:Tahoma, sans-serif; font-size:0.73em }
span.TitelZchn { color:#17365d; font-family:Souvenir Lt BT, serif; font-size:2.36em; letter-spacing:0.25pt }
span.berschrift1Zchn { color:#365f91; font-family:Cambria, serif; font-size:1.27em; font-weight:bold }
span.berschrift2Zchn { color:#4f81bd; font-family:Cambria, serif; font-size:1.18em; font-weight:bold }
span.berschrift3Zchn { color:#4f81bd; font-family:Cambria, serif; font-weight:bold }
span.berschrift4Zchn { color:#4f81bd; font-family:Cambria, serif; font-style:italic; font-weight:bold }

Here is the code of a "page" (a section)

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>

<body>
  <p>&nbsp;<img alt="" src="../Images/02.png" /></p>
</body>
</html>

And in order to make things complete; here is the link to a page image file : https://dl.dropbox.com/u/61460662/02.png

All "page" files for this book are in the same size. When looked at it on the Ipad, the images display very good, its just this blank page issue that needs to be fixed.

[theducks]

Line-Height: 115%
that is 1.15 pages. I suspect this

IMHO
Get rid of that at the body level.

If you need a bigger line space for certain paragraphs, create a separate (p) class for those.

Images should have their own class(es) to control borders, margins/padding AND size ... (fine control) (that picture is larger than my screen on my 5" PEz) so you might want to control/Maintain aspect ratio


BTW your example does not have any link to the stylesheet... you are getting browser defaults

[Toxaris]

I am missing the whole @font-face part in the CSS. Also, remember that you need to do something special to add fonts for iBooks.

Check this blog-entry from Liz Castro to learn more about font-embedding.

Also, keep in mind that a lot of stuff in ePUB is Case-Sensitive!

[misskennedy]

No problem to get rid of that Line hight thing, as for the rest, as I also guessed, it needs some skilled CSS formating which I am not able to to. Now let's see what it does without that line tag.

[mrmikel]

You don't have to be skilled. You just have to have some time and bumble your way through it, making sure to work on copies instead of originals.

Take out anything you don't understand affecting line height or margins, one at a time.

As ducks noted, you have to refer to the stylesheet in each section, similar to this:

<head>
<meta content="text/css" http-equiv="Content-Style-Type" />

<title>The Far Country, by Nevil Shute</title>
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />
</head>

matching the stylesheet name exactly by case.

[DiapDealer]

As Toxaris mentioned... I'm guessing the main issue why your embedded fonts are not working is the fact that there are no @font-face declarations in your css.

[misskennedy]

I now solved the problem of the blank spaces by assembling the comic page files in a software called epubizator which is designed for creating Comic Ebooks. But its a very rough programm, so I then uploaded the finished file in Sigil in order to refine it there. There are no blank pages on the Ipad view now, but the font problem hasn't been solved. I added a font face tag. It does display the correct font in the Sigil Window, but not on the Ipad. Well, I may live with that.

[DiapDealer]

There's a special file you have to add to an ePub to get embedded fonts to work in iBooks. The link in Toxaris' post gives the particulars involved to get it working.

Also, for future reference... "it doesn't work on the iPad" doesn't give people the necessary info to help you. The app that you're using on the iPad to view the ePub with is the important detail. Much more so than "iPad."