HTML to ePUB with monospace font

il_mix · 06-24-2013, 03:24 PM

Hi everyone!

I'm testing a frined's Kobo Touch, looking if it suits my needs.
I have many HTML and PDF documents about programming. I managed to do a not-so-bad conversion from PDF to HTML, so I'm interested the most in the last step of the conversion to ePub.

Well, I'm not able to get the code section to be displayed in monospace font. I made many tests. Here is the one that (I think) is closer to the right solution. Here is my HTML:

Code:

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

<head>
<title>Book title</title>
<meta name="author" content="someone"/>
<style type="text/css">
body {
  font-family: Sans-serif;
}
pre {
  background: #eeeeee;
}
code {
  font-style: monospace;
}
</style>
</head>

<body>
<h1><b>1 My chapter</b></h1>
<h2><b>1.1 Introduction</b></h2>
<p>Here is a line with normal font.</p>
<p>Here is another one.</p>
<pre><code>for(int i = 0; i < 100; i++) {
  printf("Why the hell it's not monospace?");
}</code></pre>
<p>That's all folks!</p>
</body>
</html>

I've set nothing in particular in the conversion settings.
I've tried embedding Courier New, but than anything become Courier New EXCEPT for the code section...

Any hints?
Thanks!
MIX

theducks · 06-24-2013, 04:03 PM

Sans-serif is not a guaranteed Monospaced font.

Code:

font-family {monospace;}

depending on your device, this may not be honored.

You could embed a monospaced font like courier new (not free)

davidfor · 06-25-2013, 12:01 AM

Kobo don't include a monospace font on their devices. But, embedding it should work. But, they are sensitive to the font names and file names. There has been discussion in the Kobo forum about this. https://www.mobileread.com/forums/sho...d.php?t=204363 has some discussion on it.

il_mix · 06-25-2013, 02:48 AM

Quote:

Originally Posted by theducks

Sans-serif is not a guaranteed Monospaced font.

Code:

font-family {monospace;}

Sans-serif is for the body, so anything but the <code>, that is declared "monospace". ...well, sort of. I used font-style instead of font-family. Ups!
By the way, using font-family won't change the on-reader visualization.

Quote:

Originally Posted by davidfor

Kobo don't include a monospace font on their devices. But, embedding it should work. But, they are sensitive to the font names and file names. There has been discussion in the Kobo forum about this. https://www.mobileread.com/forums/sho...d.php?t=204363 has some discussion on it.

I'll try to add a new monospace font. We'll see...

Thank guys!

il_mix · 06-25-2013, 07:33 AM

Nope, I don't get it...

I've installed a monospace font (Dark Courier), and I can select it in my Kobo.
I tested this new code

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Book title test</title>
<meta name="author" content="someone"/>
<style type="text/css">
body {
	font-family: Gothic;
}
pre {
 background: #eeeeee;
}
code {
	font-family: Dark Courier;
}
</style>
</head>

<body>
<h1><b>1 My chapter</b></h1>
<h2><b>1.1 Introduction</b></h2>
<p>Here is a line with <em>normal font</em>.</p>
<p>Here is another one.</p>
<pre><code>for(int i = 0; i < 100; i++) {
  printf("Why the hell it's not monospace?");
}</code></pre>
<p>That's all folks!</p>
</body>
</html>

But everything will still be displayed with the same font...
I didn't embed the font since it is already on the Kobo. By the way, if I embed it I get anything but the code in Dark Courier, again.

SIDE NOTE: I have the 2.6.1 firmware

theducks · 06-25-2013, 08:15 AM

shouldn't it be "Dark Courier" because of the space?

il_mix · 06-25-2013, 09:52 AM

Tried it, too...
I think I'll try with Sigil, since I've found a couple of guide/tutorials about embedding font.

PeterT · 06-25-2013, 10:11 AM

One idea for you is to look at using a tool like Atlantis Word Processor to create ePubs and have it to the embedding. There is a thread on the program here. The program is available at this site. Try it and see how it works for you in simplifying the creation of books.

If you like the trial version, you might even find a sizable discount code via a bit of Google searching.

Sabardeyn · 06-25-2013, 10:33 AM

PeterT,
The Dark Courier font is already on his reader. He's having trouble getting the Kobo to use it though.

Maybe it's being overridden in the book's CSS? Maybe try... shoot I'm forgetting the syntax, but "important!" along with setting the font?

PeterT · 06-25-2013, 10:44 AM

Yes but maybe he could get the syntax correct by using another font embedded via a tool like AWP and then work on modifying it to use his preferred font...

Sabardeyn · 06-25-2013, 02:44 PM

Good point.

jackie_w · 06-27-2013, 10:54 AM

Quote:

Originally Posted by il_mix

Nope, I don't get it...

I've installed a monospace font (Dark Courier), and I can select it in my Kobo.
...
But everything will still be displayed with the same font...
I didn't embed the font since it is already on the Kobo. By the way, if I embed it I get anything but the code in Dark Courier, again.

SIDE NOTE: I have the 2.6.1 firmware

You were actually closer with your original code. You'll be pleased to know that the solution is quite simple. Your problem is that you have not included the necessary @font-face css statements. Try replacing your style section with this before doing your calibre conversion:

Code:

<style type="text/css">
@font-face {font-family: monospace; font-weight: normal; font-style: normal; src: url("res:///fonts/normal/Dark Courier")}
@font-face {font-family: monospace; font-weight: bold; font-style: normal; src: url("res:///fonts/bold/Dark Courier")}
@font-face {font-family: monospace; font-weight: normal; font-style: italic; src: url("res:///fonts/italic/Dark Courier")}
@font-face {font-family: monospace; font-weight: bold; font-style: italic; src: url("res:///fonts/bolditalic/Dark Courier")}
pre {
  background: #eeeeee;
}
code {
  font-style: monospace;
}
</style>

You will also notice that I removed your body {font-family:...} statement. In general, if you are going to be reading the epub on a Kobo, it is better (IMO) to let the user choose the main body font from the Kobo select-a-font list. Those who prefer sans-serif can select a sans-serif font and those who prefer serif can pick a serif. However, if you really want to try to force sans-serif then the correct statement would be:
body {font-family: sans-serif} i.e. all lowercase.

Hope this helps

il_mix · 06-28-2013, 10:07 AM

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

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

06-24-2013, 03:24 PM	#1
il_mix Enthusiast Posts: 39 Karma: 20178 Join Date: Jun 2013 Device: Kobo Touch	HTML to ePUB with monospace font Hi everyone! I'm testing a frined's Kobo Touch, looking if it suits my needs. I have many HTML and PDF documents about programming. I managed to do a not-so-bad conversion from PDF to HTML, so I'm interested the most in the last step of the conversion to ePub. Well, I'm not able to get the code section to be displayed in monospace font. I made many tests. Here is the one that (I think) is closer to the right solution. Here is my HTML: Code: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Book title</title> <meta name="author" content="someone"/> <style type="text/css"> body { font-family: Sans-serif; } pre { background: #eeeeee; } code { font-style: monospace; } </style> </head> <body> <h1><b>1 My chapter</b></h1> <h2><b>1.1 Introduction</b></h2> <p>Here is a line with normal font.</p> <p>Here is another one.</p> <pre><code>for(int i = 0; i < 100; i++) { printf("Why the hell it's not monospace?"); }</code></pre> <p>That's all folks!</p> </body> </html> I've set nothing in particular in the conversion settings. I've tried embedding Courier New, but than anything become Courier New EXCEPT for the code section... Any hints? Thanks! MIX

06-24-2013, 04:03 PM	#2
theducks Well trained by Cats Posts: 29,792 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Sans-serif is not a guaranteed Monospaced font. Code: font-family {monospace;} depending on your device, this may not be honored. You could embed a monospaced font like courier new (not free)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
* to Mobi: setting monospace font size	Starko	Conversion	7	11-16-2012 03:04 PM
Determine font and font size on incoming epub?	peaceridge	Calibre	4	01-30-2012 03:35 PM
Problem with epub to mobi? Everything is monospace	elmago79	Conversion	2	05-20-2011 01:00 PM
single HTML to ePub with fixed width font	skyfish	Calibre	8	12-10-2009 01:30 PM
Wide margins in html to epub; font size mngmt; PDF metadata	dementrio	Calibre	2	08-01-2009 01:33 AM

06-25-2013, 12:01 AM	#3
davidfor Grand Sorcerer Posts: 24,907 Karma: 47303748 Join Date: Jul 2011 Location: Sydney, Australia Device: Kobo:Touch,Glo, AuraH2O, GloHD,AuraONE, ClaraHD, Libra H2O; tolinoepos	Kobo don't include a monospace font on their devices. But, embedding it should work. But, they are sensitive to the font names and file names. There has been discussion in the Kobo forum about this. https://www.mobileread.com/forums/sho...d.php?t=204363 has some discussion on it.

06-25-2013, 08:15 AM	#6
theducks Well trained by Cats Posts: 29,792 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	shouldn't it be "Dark Courier" because of the space?

06-25-2013, 09:52 AM	#7
il_mix Enthusiast Posts: 39 Karma: 20178 Join Date: Jun 2013 Device: Kobo Touch	Tried it, too... I think I'll try with Sigil, since I've found a couple of guide/tutorials about embedding font.

06-25-2013, 10:11 AM	#8
PeterT Grand Sorcerer Posts: 12,162 Karma: 73448616 Join Date: Nov 2007 Location: Toronto Device: Nexus 7, Clara, Touch, Tolino EPOS	One idea for you is to look at using a tool like Atlantis Word Processor to create ePubs and have it to the embedding. There is a thread on the program here. The program is available at this site. Try it and see how it works for you in simplifying the creation of books. If you like the trial version, you might even find a sizable discount code via a bit of Google searching.

06-25-2013, 10:33 AM	#9
Sabardeyn Guru Posts: 644 Karma: 1242364 Join Date: May 2009 Location: The Right Coast Device: PC (Calibre), Nexus 7 2013 (Moon+ Pro), HTC HD2/Leo (Freda)	PeterT, The Dark Courier font is already on his reader. He's having trouble getting the Kobo to use it though. Maybe it's being overridden in the book's CSS? Maybe try... shoot I'm forgetting the syntax, but "important!" along with setting the font?

06-25-2013, 10:44 AM	#10
PeterT Grand Sorcerer Posts: 12,162 Karma: 73448616 Join Date: Nov 2007 Location: Toronto Device: Nexus 7, Clara, Touch, Tolino EPOS	Yes but maybe he could get the syntax correct by using another font embedded via a tool like AWP and then work on modifying it to use his preferred font...

06-25-2013, 02:44 PM	#11
Sabardeyn Guru Posts: 644 Karma: 1242364 Join Date: May 2009 Location: The Right Coast Device: PC (Calibre), Nexus 7 2013 (Moon+ Pro), HTC HD2/Leo (Freda)	Good point.

Advert

Advert