View Single Post
Old 06-28-2013, 10:07 AM   #13
il_mix
Enthusiast
il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.
 
Posts: 39
Karma: 20178
Join Date: Jun 2013
Device: Kobo Touch
Here we are again!

As I told you, I tried Sigil for the HTML to ePub conversion. And finally I've got what I wanted.
For everyone interested in the topic, here is a very simple and useful guide (click the blue square to go to the original post):
Quote:
Originally Posted by Pablo View Post
EDIT (March 9th, 2013)

Uploaded version 3 covering Sigil 0.7.1

EDIT (April 20th, 2013)

Uploaded version 3 in ePub format

Pablo
I know a little HTML and CSS, so this was all I need; by the way, it seems a really good guide for all newbie coders.

Long story short: I've had alredy tried what jackie_w said. I didn't get the expected result due to the fact that I didn't write the right path for the Dark Courier font. So I've embedded the font in the ePub, in a known folder, and using (this time) the right path for the @font-face declaration I got what I want.

I think that the main problem with Calibre was that it will do too many task automatically, and I didn't have a very good control on what's happening. With Sigil I have to do manymanymany task manually, but I can see all the folder tree of the ePub (side note: just learned that the ePub is nothing more than a "zip" file...), and I can have a good view of what's happening.

So, the Style.css file includes this
Code:
@font-face {
  font-family: "Dark Courier";
  font-weight: normal;
  font-style: normal;
  src: url(../Fonts/Dark Courier-Regular.ttf);
}
@font-face {
  font-family: "Dark Courier";
  font-weight: bold;
  font-style: normal;
  src: url(../Fonts/Dark Courier-Bold.ttf);
}
@font-face {
  font-family: "Dark Courier";
  font-weight: normal;
  font-style: italic;
  src: url(../Fonts/Dark Courier-Italic.ttf);
}
@font-face {
  font-family: "Dark Courier";
  font-weight: bold;
  font-style: italic;
  src: url(../Fonts/Dark Courier-BoldItalic.ttf);
}
pre {
  white-space: pre-wrap;
  background: #eeeeee;
}
code {
  font-family: "Dark Courier";
}
The .ttf files path is: parent folder (.xhtml files are in "Text" folder") than "Fonts" folder.
You can find the ePub structure attached.

In the .xhtml files I use this
Code:
<p>Here is a sample</p>
<pre><code>int d; // a variable</code></pre>
<p>That's it!</p>
I use the <pre> tag for blocks of code (useful for indentation and newlines); to use the monospace font inside a paragraph I just use the <code> tag:
Code:
<p>Sample paragraph with <code>some code</code> and normal text</p>
Thanks to everyone for all the hints!
MIX
Attached Thumbnails
Click image for larger version

Name:	ePubStructure.PNG
Views:	400
Size:	10.1 KB
ID:	107427  
il_mix is offline   Reply With Quote