CSS ignored in some spots but not all?

pete5609 · 09-18-2012, 09:32 PM

This is a hard one to explain. Have formatted several ePubs for a client, mostly using BBEdit, from InDesign files (not important). Have run into one annoying bug/feature with iBooks reader on each project.

Each chapter is a separate html file, including separate files for things like Foreword, About the Author, Bibliography, as well as Chapter 1, Chapter 2, etc. All are listed in the ToC and content.opf etc.

CSS for the start of each chapter looks like:

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Foreword</title>
<link rel="stylesheet" href="design.css" type="text/css" />
</head>
<body>
<div id="foreword">
<div class="header">
<h1>
<span class="chapter-title">Foreword</span>
</h1>
</div>

(swap out Foreword for whatever else.)

Somehow class="chapter-title" is ignored in a few of the files, and across 3 different projects now, it's only ignored on non-numbered chapters, like Foreword or Notes. On ALL chapters that are actually called Chapter 1, it displays fine.

Here is the bit from the CSS file:

.chapter-title {
display: block;
font-family: "Knockout";
font-size: 1.6em;
letter-spacing: 0.05em;
line-height: 1;
margin-top: 1em;
margin-bottom: 0.4em;
text-align: left;
text-transform: uppercase;
-webkit-hyphens: none;
}

Nothing too weird in there.

Any ideas as to why it will only work when iBooks feels like it?

Displays fine on Adobe Digital Editions (though none of the embedded fonts display, but it displays consistently anyway.)

Thx

Jellby · 09-19-2012, 04:07 AM

Where do you have the problem then, in iBooks? I believe iBooks is known to do weird things (like acting different on titles that actually contain the word "Chapter").

susan_cassidy · 09-19-2012, 11:51 AM

Why have a div, and an h1 and a span tag? Why not just define the h1 heading in the css the way you want it to appear. It could have to do with the fact that you have so many nested tags.

pete5609 · 09-19-2012, 04:09 PM

Fixed it. I needed to add the com.apple.ibooks.display-options file to the package. Looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<display_options>
<platform name="*">
<option name="specified-fonts">true</option>
</platform>
</display_options>

And yeah, there's a lot going on in those h1 tags, but the formatting is pretty complicated. Looks good when it actually works properly.

09-18-2012, 09:32 PM	#1
pete5609 petebooks Posts: 11 Karma: 10 Join Date: Sep 2012 Location: Arlington, VA Device: iPad	CSS ignored in some spots but not all? This is a hard one to explain. Have formatted several ePubs for a client, mostly using BBEdit, from InDesign files (not important). Have run into one annoying bug/feature with iBooks reader on each project. Each chapter is a separate html file, including separate files for things like Foreword, About the Author, Bibliography, as well as Chapter 1, Chapter 2, etc. All are listed in the ToC and content.opf etc. CSS for the start of each chapter looks like: <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Foreword</title> <link rel="stylesheet" href="design.css" type="text/css" /> </head> <body> <div id="foreword"> <div class="header"> <h1> <span class="chapter-title">Foreword</span> </h1> </div> (swap out Foreword for whatever else.) Somehow class="chapter-title" is ignored in a few of the files, and across 3 different projects now, it's only ignored on non-numbered chapters, like Foreword or Notes. On ALL chapters that are actually called Chapter 1, it displays fine. Here is the bit from the CSS file: .chapter-title { display: block; font-family: "Knockout"; font-size: 1.6em; letter-spacing: 0.05em; line-height: 1; margin-top: 1em; margin-bottom: 0.4em; text-align: left; text-transform: uppercase; -webkit-hyphens: none; } Nothing too weird in there. Any ideas as to why it will only work when iBooks feels like it? Displays fine on Adobe Digital Editions (though none of the embedded fonts display, but it displays consistently anyway.) Thx

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Touch Dead (non-responsive) spots?	NineOne	Kobo Reader	24	07-09-2011 03:11 PM
Free Wi-Fi spots	Kumabjorn	Amazon Kindle	24	01-11-2011 06:38 AM
css pseudo elements and adjacent combinators in extra css?	ldolse	Calibre	2	12-21-2010 05:09 PM
Dust spots?	shighfield	Sony Reader	153	08-10-2009 10:00 AM
EVDO spots	cheriejetty	Amazon Kindle	3	01-03-2008 08:33 PM

09-19-2012, 04:07 AM	#2
Jellby frumious Bandersnatch Posts: 7,515 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Where do you have the problem then, in iBooks? I believe iBooks is known to do weird things (like acting different on titles that actually contain the word "Chapter").

09-19-2012, 11:51 AM	#3
susan_cassidy Wizard Posts: 2,251 Karma: 3720310 Join Date: Jan 2009 Location: USA Device: Kindle, iPad (not used much for reading)	Why have a div, and an h1 and a span tag? Why not just define the h1 heading in the css the way you want it to appear. It could have to do with the fact that you have so many nested tags.

09-19-2012, 04:09 PM	#4
pete5609 petebooks Posts: 11 Karma: 10 Join Date: Sep 2012 Location: Arlington, VA Device: iPad	Fixed it. I needed to add the com.apple.ibooks.display-options file to the package. Looks like this: <?xml version="1.0" encoding="UTF-8"?> <display_options> <platform name="*"> <option name="specified-fonts">true</option> </platform> </display_options> And yeah, there's a lot going on in those h1 tags, but the formatting is pretty complicated. Looks good when it actually works properly.

Advert