Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 11-22-2012, 01:07 PM   #1
phossler
Addict
phossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensions
 
Posts: 363
Karma: 51406
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: kindle
Am I using @font-face correctly?

I'm not getting the formatting I was expecting


Using this HTML

Code:
<?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>
  <link href="../Styles/Garamond.css" rel="stylesheet" type="text/css" />
  <link href="../Styles/epub.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <p>none text text text text text text text text</p>

  <p class="brush">brush text text text text text</p>

  <p class="fancy">fancy no tags text text<br /></p>

  <p class="fancy"><i>fancy w/ i tag text text</i></p>

  <p class="fancyi">fancyi text text</p>
</body>
</html>


and this CSS

Code:
@font-face {
    font-family: 'Script';
    font-weight: normal;
    font-style: normal;
    src: url('../Fonts/Brush Script MT Italic.ttf');
}
@font-face {
    font-family: 'Garamond';
    font-weight: normal;
    font-style: normal;
    src: url('../Fonts/Garamond.ttf');
}

@font-face {
    font-family: 'Garamond Bold';
    font-weight: bold;
    font-style: normal;
    src: url('\..\Fonts\Garamond Bold.ttf');
}

@font-face {
    font-family: 'Garamond Italic';
    font-weight: normal;
    font-style: italic;
    src: url('..\Fonts\Garamond Italic.ttf');
}

p.fancy {
	font-family:'Garamond',serif;
	font-size: 4em;
}

p.fancyi {
	font-family:'Garamond Italic',serif;
	font-size: 4em;
}

p.brush {
	font-family:'Script',serif;
	font-size: 4em;
}
1. the class="fancyi" seems to display in Arial in Sigil and un-italic in ADE

2. to get the italic, I had to use <i> tags

Screen shots attached


Is this the way CSS / Sigil / epubs / ADE are supposed to work?

I feel I'm doing some wrong.

I thought I was following

http://web.sigil.googlecode.com/git/...bed_fonts.html

Thanks

Paul
Attached Thumbnails
Click image for larger version

Name:	Displayed in Sigil.JPG
Views:	67
Size:	70.6 KB
ID:	96647   Click image for larger version

Name:	Displayed in ADE.JPG
Views:	335
Size:	49.0 KB
ID:	96648  
Attached Files
File Type: epub test font.epub (420.3 KB, 33 views)
phossler is offline   Reply With Quote
Old 11-22-2012, 01:25 PM   #2
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 15,100
Karma: 5939999
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Garmond is the font family
Then there is an @font for each stroke-weight combination that links the font source

Code:
@font-face {
    font-family: 'Garamond';
    font-weight: normal;
    font-style: normal;
    src: url('../Fonts/Garamond.ttf');
}

@font-face {
    font-family: 'Garamond';
    font-weight: bold;
    font-style: normal;
    src: url('\..\Fonts\Garamond Bold.ttf');
}

@font-face {
    font-family: 'Garamond ;
    font-weight: normal;
    font-style: italic;
    src: url('..\Fonts\Garamond Italic.ttf');
}
The usage refers to the Family: 'Garmond'
the weight and style will then select which (matching) Family member to use (the weight and style values must match the @ font)

In your example, you just have 2 Familys
theducks is offline   Reply With Quote
 
Advertisement
Old 11-22-2012, 03:20 PM   #3
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,086
Karma: 1444487
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
Just a reminder that Sigil will show up the basic font face, but won't show the variations such as italic. If correctly done, they will show up in the device.

For checking that, use Reader for PC or some other similar software for your device.
mrmikel is offline   Reply With Quote
Old 11-22-2012, 10:33 PM   #4
phossler
Addict
phossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensions
 
Posts: 363
Karma: 51406
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: kindle
@theducks -- thanks -- that sorted it out for me as far as the epub version is concerned


I was trying to follow the tutorial:

http://web.sigil.googlecode.com/git/...bed_fonts.html

which had an example

Quote:
Add a definition of the font, e.g.:

@font-face {
font-family: 'MyFont'; <===================???
font-weight: normal;
font-style: normal;
src: url(MyFont.ttf);
}

@font-face {
font-family: 'MyFontBold'; <=================???
font-weight: bold;
font-style: normal;
src: url(MyFontBold.ttf);
}

and I mis-understood that 'font-family' part

@mrducks -- thanks for the reminder, I use Adobe Digital Editions to check epubs and Kindle Previewer (not Kindle for PC) to see how well Calibre converted it to mobi or azw3


Thanks again

Paul
phossler is offline   Reply With Quote
Old 11-22-2012, 10:51 PM   #5
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 15,100
Karma: 5939999
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by phossler View Post
@theducks -- thanks -- that sorted it out for me as far as the epub version is concerned


I was trying to follow the tutorial:

http://web.sigil.googlecode.com/git/...bed_fonts.html

which had an example




and I mis-understood that 'font-family' part

@mrducks -- thanks for the reminder, I use Adobe Digital Editions to check epubs and Kindle Previewer (not Kindle for PC) to see how well Calibre converted it to mobi or azw3


Thanks again

Paul
I believe that is in error (or it could be just a different way)
I like declaring a single family, then using the variations, knowing they will have the same look.
You would NOT declare Brush to be part of the Garmond, it has atotal different look.

My PEz (Adobe) is my check
theducks is offline   Reply With Quote
Old 11-23-2012, 10:06 AM   #6
phossler
Addict
phossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensions
 
Posts: 363
Karma: 51406
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: kindle
Well, the 'theducks way' has the great advantage of working, and the 'different way' in the tutorial does not (at least the way I was doing it)

(The Brush ttf was easy to not mess up since there were no style or weight options) so only single font-family)

Then once I realized that I needed to 1) make a AZW3 file, AND 2) turn [Use Publisher Fonts] on in the Touch, everything works 100% as expected / wanted / hoped for



Paul
phossler is offline   Reply With Quote
Old 11-28-2012, 05:58 PM   #7
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 37,903
Karma: 18763702
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Just a quick note about Garamond...

It's too light for eink screens. When I've seen it used, I've replaced it with the semibold version. But the better solution is to find a better font that works with an eink screen. Also, another issue with Garamond is that the ration of lower case to upper case is not all that good so it leaves a lot of white space between the lines.
JSWolf is online now   Reply With Quote
Old 11-29-2012, 04:54 PM   #8
phossler
Addict
phossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensions
 
Posts: 363
Karma: 51406
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: kindle
@JSWolf -- You're right about Garamond being a little too light (but it looks so pretty) .

The dead tree version of the book was in Garamond so I just carried along with it

The Touch doesn't have the contrast I'd like as it is

Are there 'standard' recommendations for highly readable fonts for the KT? I really prefer serif fonts for reading.

I'm just converting / fixing / reformatting PD books for personal reading, so the only person I have to please is myself.

Paul
phossler is offline   Reply With Quote
Old 11-29-2012, 10:19 PM   #9
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 37,903
Karma: 18763702
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
I have a modified (made darker) version of Charis SIL that is very readable on an eink screen. Plus the height of the uppercase to lowercase is very good. Here's the link to download. Also, there are smallcap versions too.

http://www.mediafire.com/download.php?64cse2dshispx08

Last edited by JSWolf; 02-03-2013 at 07:16 PM.
JSWolf is online now   Reply With Quote
Old 11-29-2012, 10:50 PM   #10
phossler
Addict
phossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensions
 
Posts: 363
Karma: 51406
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: kindle
Thanks -- at first glance it seems like it'll will be very readable

I usually use Bookman as my workhorse font, but it's got eink issues also

Some of the books I'm Sigil-izing have sub and super scripts, and the Charis seems like it will help there also.

Paul
phossler is offline   Reply With Quote
Old 11-29-2012, 10:53 PM   #11
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 37,903
Karma: 18763702
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by phossler View Post
Thanks -- at first glance it seems like it'll will be very readable

I usually use Bookman as my workhorse font, but it's got eink issues also

Some of the books I'm Sigil-izing have sub and super scripts, and the Charis seems like it will help there also.

Paul
It is very readable. I've been using it for some time now and I like the way it displays.

Happy to help.
JSWolf is online now   Reply With Quote
Old 11-30-2012, 04:31 PM   #12
signum
Connoisseur
signum is that somebody.signum is that somebody.signum is that somebody.signum is that somebody.signum is that somebody.signum is that somebody.signum is that somebody.signum is that somebody.signum is that somebody.signum is that somebody.signum is that somebody.
 
Posts: 65
Karma: 45332
Join Date: Aug 2011
Device: none
I'm surprised this hasn't been mentioned in this thread yet. The original post shows four @font-face declarations. The first two look just fine. The fourth one uses backslashes in the “url” line instead of forward slashes. Forward slashes are preferred, but the backslashes might work the same anyway. I'd still change them to forward slashes.

The third declaration begins with a backslash as the first character of the url. Assuming that the backslash works the same as the forward slash, this will take you to the directory of all directories, the top level of the entire filesystem (aka disk). Remove that leading backslash and the declaration for “bold” will have a much better chance of working when you get around to testing it. Also change the backslashes to forward slashes while you're there.
signum is offline   Reply With Quote
Old 11-30-2012, 05:38 PM   #13
phossler
Addict
phossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensions
 
Posts: 363
Karma: 51406
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: kindle
@signum -- I did fix them in the CSS and you're right -- it did work much better.

I had a number of other issues with my CSS; some i found myself and other the people here helped me with

Paul
phossler is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
A new face from New Zealand PeterMNZ Introduce Yourself 3 10-15-2012 03:28 AM
Just Another Pretty Face PollyN Introduce Yourself 6 01-08-2012 06:49 AM
Gentium Book font (ttf) doesn't render correctly therealjoeblow Kobo Reader 12 09-08-2011 12:23 AM
Another new face in the crowd! Rebos1969 Introduce Yourself 8 06-24-2010 09:01 PM


All times are GMT -4. The time now is 09:54 PM.


MobileRead.com is a privately owned, operated and funded community.