View Full Version : verifying html


JaneFancher
08-28-2010, 08:52 PM
Another tick on the eternal battle for embedded fonts.

I've successfully created several files with embedded fonts, file which show properly in all epub readers I can find. Suddenly, following the same procedure, I'm getting problems with Adobe Digital Editions not showing the fonts.

Everything I read says to "validate html", the ADE is very picky. Okay. I'd be happy to. HOW? I've "verified" it in Namo web editor, but it's still not showing. How in heck do you "validate" your html?

As always, thanks for any help.

shall1028
08-28-2010, 10:18 PM
Short answer: just because your html is "valid" (read: has been validated) doesn't mean ADE will display the font.

Slightly longer answer: As has been pointed out in other threads ADE is written, for whatever reason, to not use embedded fonts.

The epubcheck program or various online HTML validation sites can validate your HTML. Bing and Google searches can be your friend.

JSWolf
08-28-2010, 10:34 PM
shall1028, please don't give out such incorrect information. ADE can display properly embedded fonts no problem.

Jane, if you can give us a sample of your ePub, maybe the CSS someone can have a look and see what might be wrong.

theducks
08-28-2010, 10:41 PM
Another tick on the eternal battle for embedded fonts.

I've successfully created several files with embedded fonts, file which show properly in all epub readers I can find. Suddenly, following the same procedure, I'm getting problems with Adobe Digital Editions not showing the fonts.

Everything I read says to "validate html", the ADE is very picky. Okay. I'd be happy to. HOW? I've "verified" it in Namo web editor, but it's still not showing. How in heck do you "validate" your html?

As always, thanks for any help.

The ultimate test after the validation tool says it is synthetically correct
is old Eyeball Mk I :D
Then, change the Zoom level.:eek: (I had these really cool chapter headings. Until...)
Then change the viewer program :eek:


And be sure to ask here at MR.
These folks seem to have found all the limitations on the various platforms.
Ultimately, you will have to decide what to live with if a workaround can't be found.

shall1028
08-28-2010, 10:57 PM
such incorrect information. ADE can display properly embedded fonts no problem.

Slightly incorrect might be a better term and "no problem" is also slightly incorrect.

The fonts must be embedded and specified properly. I made an epub sometime ago that would not display properly in ADE using:

font-family: "Goudy", "serif";

but does display properly as:

font-family: "Goudy", serif;

I had forgotten that I found the fix to the problem and assumed that ADE had problems with embedded fonts.

Note though the fonts need to be embedded in the epub and not merely on your system.

JSWolf
08-28-2010, 11:08 PM
Slightly incorrect might be a better term and "no problem" is also slightly incorrect.

The fonts must be embedded and specified properly. I made an epub sometime ago that would not display properly in ADE using:

font-family: "Goudy", "serif";

but does display properly as:

font-family: "Goudy", serif;

I had forgotten that I found the fix to the problem and assumed that ADE had problems with embedded fonts.

Note though the fonts need to be embedded in the epub and not merely on your system.

Actually, that too is partly incorrect. Depending on the ADE being used, you can use fonts on your system instead of having to have them in your ePub. Sony allows you to call up fonts you have loaded on the reader (for example).

charleski
08-29-2010, 12:38 AM
How in heck do you "validate" your html?

Actually, you probably need to check your css, as ADE will completely discard a stylesheet if it finds any errors in it. The W3 CSS validator is here (http://jigsaw.w3.org/css-validator/). Note that this will always return errors with font-face definitions as it won't be able to see the urls that are specified, but look for errors in the rest of the css.

JaneFancher
08-29-2010, 12:19 PM
As always...thanks, everyone.

Sorry about the length. Code, you know.

I got an html validator plugin for FireFox which routed out some redundant code, but ADE still won't display the fonts. The css validator Charleski recommended complained about a few things (all font and image related), but the exact code it complains about is present in the file that displays properly, so I don't think that can be the problem.

Here's the complete CSS code for the file that WON'T display fonts:

@namespace h "http://www.w3.org/1999/xhtml";

@font-face {
font-family: "BlackChancery";
font-style: normal;
font-weight: normal;
src:url(../Fonts/BlackChancery.ttf) format(opentype);;
}

@font-face {
font-family: "Stowe Open Face";
font-style: normal;
font-weight: normal;
src:url(../Fonts/STOWE_OF.ttf) format(opentype);;
}

@font-face {
font-family: "Arabella";
font-style: normal;
font-weight: normal;
src:url(../Fonts/Arabella.ttf) format(opentype);;
}

@font-face {
font-family: "PP Handwriting";
font-style: normal;
font-weight: normal;
src:url(../Fonts/hand.ttf) format(opentype);;
}


@font-face {
font-family: "Hand Me Down S (BRK)";
font-style: normal;
font-weight: normal;
src:url(../Fonts/handmeds.ttf) format(opentype);;
}


.calibre {
display: block;
font-family: serif;
font-size: 1em;
font-style: normal;
font-weight: normal;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
page-break-before: always
}
.calibre1 {
display: block;
margin-bottom: 1px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-indent: 0.2in
}
.calibre10 {
font-family: "Stowe Open Face", serif
}
.calibre11 {
background-color: black;
border: 1px inset;
color: gray;
display: block;
height: 0.0125in;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
margin-top: 0.5em
}
.calibre12 {
display: block;
margin-bottom: 1px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
page-break-before: always;
text-align: justify;
text-indent: 0.2in
}
.calibre13 {
display: block;
margin-bottom: 1px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: justify;
text-indent: 0.2in
}
.calibre14 {
font-weight: bold
}
.calibre15 {
color: blue;
cursor: pointer;
text-decoration: none
}
.calibre16 {
height: 300;
width: 292
}
.calibre17 {
font-size: 0.75em;
line-height: normal;
vertical-align: super
}
.calibre18 {
display: block;
margin-bottom: 1px;
margin-left: 0;
margin-right: 0;
margin-top: 0
}
.calibre19 {
display: block;
margin-bottom: 1px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
page-break-before: always
}
.calibre2 {
display: block;
font-size: 2em;
font-weight: bold;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
margin-top: 0.67em;
page-break-before: always;
text-align: center
}
.calibre20 {
height: 632;
width: 423
}
.calibre21 {
font-size: 2em
}
.calibre22 {
font-style: italic
}
.calibre23 {
display: block;
page-break-after: always
}
.calibre24 {
font-size: 0.70833em
}
.calibre25 {
display: block;
font-size: 1.41667em;
font-weight: bold;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
margin-top: 0.83em;
page-break-before: always;
text-align: center
}
.calibre26 {
font-size: 0.79412em
}
.calibre27 {
font-size: 1.125em
}
.calibre28 {
font-family: "Arabella", serif
}
.calibre29 {
font-family: "Hand Me Down S (BRK)", serif
}
.calibre3 {
color: inherit;
cursor: inherit;
text-decoration: inherit
}
.calibre30 {
display: block;
margin-bottom: 1px;
margin-left: 3.5in;
margin-right: 0;
margin-top: 0;
text-align: justify;
text-indent: -3.3in
}
.calibre31 {
font-family: "PP Handwriting", serif
}
.calibre32 {
display: block;
margin-bottom: 1px;
margin-left: 0.5in;
margin-right: 0;
margin-top: 0;
text-align: center;
text-indent: -0.3in
}
.calibre33 {
display: block;
margin-bottom: 1px;
margin-left: 2in;
margin-right: 0;
margin-top: 0;
text-align: justify;
text-indent: -1.8in
}
.calibre4 {
font-family: "BlackChancery", serif
}
.calibre5 {
font-size: 0.83333em
}
.calibre6 {
display: block
}
.calibre7 {
font-size: 1em
}
.calibre8 {
display: block;
margin-bottom: 1px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: center
}
.calibre9 {
font-size: 0.75em
}

Here's the code for the file that DOES display properly:

@namespace h "http://www.w3.org/1999/xhtml";

@font-face {
font-family: "Hanford Script";
font-style: normal;
font-weight: normal;
src:url(../Fonts/HANFORD_.TTF) format(opentype);;
}

@font-face {
font-family: "BlackChancery";
font-style: normal;
font-weight: normal;
src:url(../Fonts/BlackChancery.TTF) format(opentype);;
}

@font-face {
font-family: "Blaster";
font-style: normal;
font-weight: normal;
src:url(../Fonts/blaster.ttf) format(opentype);;
}
@font-face {
font-family: "PP Handwriting";
font-style: normal;
font-weight: normal;
src:url(../Fonts/hand.ttf) format(opentype);;
}

@font-face {
font-family: "Stowe Open Face";
font-style: normal;
font-weight: normal;
src:url(../Fonts/STOWE_OF.TTF) format(opentype);;
}

@font-face {
font-family: "Disciple";
font-style: normal;
font-weight: normal;
src:url(../Fonts/Disciple-Regular.ttf) format(opentype);;
}

.calibre {
display: block;
font-family: serif;
font-size: 1em;
font-style: normal;
font-weight: normal;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
page-break-before: always;
text-align: justify
}




.calibre1 {
display: block;
font-size: 2em;
font-weight: normal;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
margin-top: 0.67em;
page-break-before: always;
text-align: left
}
.calibre10 {
display: block;
margin-bottom: 1px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
page-break-before: always
}
.calibre11 {
font-size: 1.66667em
}
.calibre12 {
font-size: 0.83333em
}
.calibre13 {
text-decoration: underline
}
.calibre14 {
display: block
}
.calibre15 {
display: block;
margin-bottom: 1px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: justify;
text-indent: 0.2in
}
.calibre16 {
height: 286;
width: 277
}
.calibre17 {
font-style: italic
}
.calibre18 {
display: block;
margin-bottom: 1px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: justify
}
.calibre19 {
font-size: 0.64516em
}
.calibre2 {
font-size: 1em
}
.calibre20 {
text-decoration: none
}
.calibre21 {
height: 555;
width: 370
}
.calibre22 {
font-size: 2em
}
.calibre23 {
display: block;
page-break-after: always
}
.calibre24 {
display: block;
font-size: 2em;
font-weight: normal;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
margin-top: 0.67em;
text-align: justify
}
.calibre25 {
display: block;
font-size: 1.66667em;
font-weight: normal;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
margin-top: 0.83em;
text-align: justify;
text-indent: 0.2in
}
.calibre26 {
font-size: 0.775em
}
.calibre27 {
font-family: "Blaster", serif
}
.calibre28 {
font-family: "BlackChancery", sans-serif
}
.calibre3 {
font-family: "Hanford Script", fantasy
}
.calibre30 {
font-family: "PP Handwriting", serif
}
.calibre31 {
font-family: "Disciple", cursive
}
.calibre4 {
display: block;
margin-bottom: 1px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: left
}
.calibre5 {
font-family: "Stowe Open Face", serif
}
.calibre6 {
font-size: 1.29167em
}
.calibre7 {
background-color: black;
border: 1px inset;
color: gray;
display: block;
height: 0.0125in;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
margin-top: 0.5em;
text-align: left
}
.calibre8 {
background-color: black;
border: 1px inset;
color: gray;
display: block;
height: 0.0125in;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
margin-top: 0.5em
}
.calibre9 {
display: block;
margin-bottom: 1px;
margin-left: 0;
margin-right: 0;
margin-top: 0
}
a {
color: inherit;
text-decoration: inherit;
cursor: default
}
a[href] {
color: black;
text-decoration: none;
cursor: pointer
}

Whatever the differences are, they seem pretty obscure to me. I'm really starting to understand why publishers throw up their hands and just put any old thing out there! You'd think Adobe would be clever enough to make their reader less of a perfectionist.

pholy
08-29-2010, 01:40 PM
Jane - I haven't got any way to check, but I have a bad feeling about that "Hand Me Down S (BRK)" font - I'll bet the parens foul up somebodies parsing. Can you substitute a different font, just for a test?

If that works, maybe you (or someone) can use FontForge to rename the font sensibly...

Edit:
Or, less possibly, it is rejected because FontForge reports that most (if not all) characters are invalid because they are drawn in the wrong direction (!?) - that is fixable, apparently - still, all my other font programs have no trouble with this font.

JaneFancher
08-29-2010, 03:39 PM
Okay...I've gone in and eliminated all traces of fonts other than Stowe Open Face, which is the most universally "swallowed" of every font I've run across. Taken them out of the fonts folder. Changed all css font calls to SOF, and taken out all trace of the other fonts in the @font calls at the beginning. Still nothing. So...I don't think the problem lies in the fonts or the font code.

Other weird thing: I have two series that I'm coding for online sale. One entire series is showing the fonts in ADE. The other isn't. At this point I'm getting totally weirded out! :D If it were the 'NetWalkers series, I wouldn't worry. Wesley has played so many games on my computer since this project started, I could easily blame him...but that's the series that's working!

There some code I can't get at in Sigil...for instance, the calibre generated TOC. Is there any chance something in there could be fouling it up? Is there a way to get at it? (Grasping at straws here.)

I know I should just leave it...most readers have to have the "generic" version anyway, but the mystery's getting to me now!

Thanks again, everyone.

theducks
08-29-2010, 05:44 PM
Okay...I've gone in and eliminated all traces of fonts other than Stowe Open Face, which is the most universally "swallowed" of every font I've run across. Taken them out of the fonts folder. Changed all css font calls to SOF, and taken out all trace of the other fonts in the @font calls at the beginning. Still nothing. So...I don't think the problem lies in the fonts or the font code.

Other weird thing: I have two series that I'm coding for online sale. One entire series is showing the fonts in ADE. The other isn't. At this point I'm getting totally weirded out! :D If it were the 'NetWalkers series, I wouldn't worry. Wesley has played so many games on my computer since this project started, I could easily blame him...but that's the series that's working!

There some code I can't get at in Sigil...for instance, the calibre generated TOC. Is there any chance something in there could be fouling it up? Is there a way to get at it? (Grasping at straws here.)

I know I should just leave it...most readers have to have the "generic" version anyway, but the mystery's getting to me now!

Thanks again, everyone.
Are you using Windows?
Unzip the EPUB, Notepad++ (free) is a great text editor with lots of coder features (like Sigil CV, but way more :D
You can right-click "Edit With Notepad++" any of the files (except images)

There may be a "leftover" from one of your font choices in the NCX.
I would also worry about ant font filename with a space :eek:

charleski
08-29-2010, 06:23 PM
1) Are the fonts properly listed in the OPF manifest? I assume they are, but it's an obvious thing to check.
2) Does the rest of your styling appear in ADE? If ADE finds an error then it throws out everything, so if any styling appears it indicates that ADE has successfully parsed the css.
3) These are display fonts that you're probably using for headings (I hope :) ), are the classes (calibre10, calibre28 etc) properly applied in the xhtml?

pholy
08-29-2010, 07:00 PM
I dropped the Hand-Me-Down font into a book I've been working on that had some span classes that I could modify, and touched up the OPF manifest, as Charleski mentioned, and it displays just fine on my Sony 505, and on my Kobo - both ADE readers, of course.

So I was wrong about the parens in the font name, and I can only second second Charleski's suggestions.

Sorry about that...

JaneFancher
08-29-2010, 07:02 PM
Curiouser and curiouser... (BTW...all formatting is fine in ADE. Only the fonts are missing.)

I made a completely new epub file and began adding fonts one by one, starting with the two I use a lot for titles, BlackChancery and Stowe open face. (the spaces seem to be OK with everything...I was suspicious at first, too, but they seem to be working.) Anyway, with those two added, ADE did fine. YAY.

Third added: Arabella. Didn't work. Changed CSS in the specific file to have it use BlackChancery for one para. That didn't work. I began eliminating style codes one by one in this same html file, and just on this one paragraph.

This paragraph had four style codes, font size, font type, italics and an sgc_1 code that I think Sigil puts in. Once I had everything but the font type out, viola! BlackChancery appeared. Wheeee. I tried Arabella...and there it was. Wheeeee. Now, I began adding the other code back in. Font size went in OK. But if either the italics code or the sgc code was in, the font disappeared again.

I thought perhaps ADE didn't like so many font qualifiers in one set of brackets, so I broke it up into two. That didn't work. I tried both the ital css and the sgc code singly and it didn't work with either scenario.

Meanwhile...over in the 'NetWalkers file, there are plenty of fonts with the sgc codes that are displaying just fine in ADE. I thought maybe it was because this font doesn't have an ital version, but it displays in ital in FireFox and Calibre. And the same thing happens with the other fonts.

I hate to give up the ital because that's what sets it off as handwriting if the reader doesn't handle embedded fonts.

Are we having fun yet?

thanks again

JaneFancher
08-29-2010, 07:10 PM
Charleski,

Yup yup yup! These are for headings and internal notes and letters. The handwriting style indicates the mood of the writer, so they're fun, but not essential. Definitely not the primary font.

Um....OPF manifest? she asks in a tiny voice. What's that? They seem right everywhere I know to look, which is all those places Sigil lets me get to.

I ASSUME they're correct in the html files. See my last post for the adventures I had this afternoon trying to hunt down an html cause/effect.

I did cross check all the files that are in the epub zip but don't show in Sigil...just in note pad...with those of a file that works fine in ADE, and didn't see anything different other than the different books would account for.

pholy
08-29-2010, 07:23 PM
You might try "font-style oblique;" as that is perhaps more likely computed anyway. My CSS book is mostly for browsers, but it might be allowed in ADE.

Edit:
For ADE, using a fall-back generic seems to work OK - from this span class:

.TurinTalk {
font-family: "Hand Me Down S (BRK)", sans-serif;
font-style: italic;
}

I do get italic sans-serif text...

from this:
.subvocal {
font-family: "Hand Me Down S (BRK)", sans-serif;
}

I get the hand-me-down font used.

So try a fall-back in the class definition -not in the @font-face definition, as you may recall :)

JaneFancher
08-29-2010, 09:15 PM
For ADE, using a fall-back generic seems to work OK - from this span class:

.TurinTalk {
font-family: "Hand Me Down S (BRK)", sans-serif;
font-style: italic;
}

I do get italic sans-serif text...

from this:
.subvocal {
font-family: "Hand Me Down S (BRK)", sans-serif;
}

I get the hand-me-down font used.

So try a fall-back in the class definition -not in the @font-face definition, as you may recall :)

Hah! thou dost assume far greater capacity in CSS than I doth have. I make it up as I go along. Compare what happens when I change something. :2thumbsup

I'll give this a try and see what happens. Thanks!

charleski
08-29-2010, 10:40 PM
This paragraph had four style codes, font size, font type, italics and an sgc_1 code that I think Sigil puts in. Once I had everything but the font type out, viola! BlackChancery appeared. Wheeee. I tried Arabella...and there it was. Wheeeee. Now, I began adding the other code back in. Font size went in OK. But if either the italics code or the sgc code was in, the font disappeared again.

In your css you defined the font as:
@font-face {
font-family: "BlackChancery";
font-style: normal;
font-weight: normal;
src:url(../Fonts/BlackChancery.ttf) format(opentype);;
}
So that's telling the renderer that this font file corresponds to the normal weight and normal style of the BlackChancery font. But then in your xhtml you tell it you want the text rendered in BlackChancery italic. The renderer looks at the fonts it has available and finds that none correspond to BlackChancery italic, so it falls back to the default font.

I'm afraid this is a case of computers having the irritating habit of trusting that you mean what you tell them :).

You don't need to include the font-style and font-weight attributes, they're used when you embed different font files for the same family so that you get proper bold and italics. If you want to use both BlackChancery roman and BlackChancery italic you need to embed two font files, one for each style, give them the same font-family name, and indicate the difference through the font-style attribute.

pholy
08-29-2010, 11:49 PM
If I change the font-style in my @font-face definition to italic, and leave the span class definition as
.TurinTalk {
font-family: "Hand Me Down S (BRK)", sans-serif;
font-style: italic;
}

then in ADE I get the hand-me-down font used, and in fb2 (which doesn't do embedded fonts) I get the default font with italic rendering...

Is that sort of like what you wanted, Jane? I think something like that may be the only way to get a fall-back generic font to render with a style. As long as you don't try to use the same font with different styles, I think it works OK.

But I think it's kind of ugly... Does anybody think it would be acceptable? On the other hand, if hand-me-down was an italic font, you would want to say so in the @font-face, and you would have to use italic in the class definition, so maybe it is OK?

How many epub readers don't do embedded fonts (besides iPads, of course)? (And on iPads, you can specify up to five of the 30-some available fonts.)

charleski
08-30-2010, 04:41 AM
As long as you don't try to use the same font with different styles, I think it works OK.

But I think it's kind of ugly... Does anybody think it would be acceptable?

What is unacceptable is generating an 'italic' from a roman font simply by shifting its axis 30. Luckily ADE refuses to inflict this sort of carnage. Italic is not 'rendered', it's a completely different font and therefore needs to have a separate font defined in the css.

pholy
08-30-2010, 08:46 AM
What is unacceptable is generating an 'italic' from a roman font simply by shifting its axis 30. Luckily ADE refuses to inflict this sort of carnage. Italic is not 'rendered', it's a completely different font and therefore needs to have a separate font defined in the css.

Oh, yes, I forgot to make this clear; the hand-me-down font was rendered unchanged, exactly as it was before, only the fall-back font version was rendered as italic. Which was, I think, pretty much what Jane wanted.

As I recall, Jane was using a cursive font in some places, and wanted a fall-back to show up as italic to distinguish it from the rest of the text. I was using the hand-me-down because I had it handy, and I wanted to see if parens in the font name caused a problem (they don't).

Setting the font-style of a cursive font to italic is not so far-fetched, and then setting the font-style in the class definition would be required (I think) to use that font-face. I haven't dug into CSS enough yet to know for sure, though.

I'm guessing that font engines must know how to apply styles and weights to their generic fonts, because we can't supply @font-face definitions to them anyway.

Jane, does this help any?

JaneFancher
08-30-2010, 10:41 AM
Hey, guys! I think you've done it! Thanks. Pholy...you're absolutely correct re my goals, and charlesky, thanks for the explanation. I was kinda figuring that out. I just wanted the written letters/notes to show up differently, whether embedded fonts worked or not on the reader.

I agree, an ad hoc ital is uuuuugly, but I'm trying to accommodate all readers.

I've done as you suggest, Pholy, and it's lookin' good in all readers I have available to test. Hand me down is a scritchy font anyway. Not meant to be pretty. :D

Thanks again!!!!

charleski
08-30-2010, 02:26 PM
You still need to define the font as italic in your @font-face

@font-face {
font-family: "Hand Me Down S (BRK)";
font-style: italic;
font-weight: normal;
src:url(../Fonts/handmeds.ttf) format(opentype);
}
.TurinTalk {
font-family: "Hand Me Down S (BRK)", sans-serif;
font-style: italic;
}

will work, but

@font-face {
font-family: "Hand Me Down S (BRK)";
font-style: normal;
font-weight: normal;
src:url(../Fonts/handmeds.ttf) format(opentype);
}
.TurinTalk {
font-family: "Hand Me Down S (BRK)", sans-serif;
font-style: italic;
}

won't.

pholy
08-30-2010, 10:02 PM
Thanks, Charleski. That is what I had done. I guess I just got tired of all the cut and paste between postings. It is best to have it all completely clear.