Mobileread
Span tag displays inconsistently on iBooks
#1  Cepheus 02-26-2020, 04:44 PM
This is a really strange inconsistency. I have produced an ePub file with 21 XHTML files (1 per chapter). There are numbered headers in each chapter (1-5). Every header uses the same HTML structure and the same CSS (please see below). Amazingly the number in the header only displays in the correct san-serif style in chapters 1-13. In the last 8 chapters the number in the header displays as a serif font (please see attached screenshots).

In ADE it displays correctly throughout the book. I've combed through the HTML and CSS but can't find any reason for this and its baffling. Has anyone else had this experience with in iBooks or and iPad???

CSS for all chapters
section.chapter section.section div.titlepage h2.title span.num {
font-size: 1.2em;
font-family: Arial, Trebuchet, Verdana, Lucida, Helvetica, sans-serif !important;
font-style: normal;
font-weight: bold;
color: gray;
}

Chapter 13 HTML
<section xmlns="http://www.w3.org/1999/xhtml" class="section" title="1**READING" xmlns:epub="http://www.idpf.org/2007/ops" epub:type="subchapter" id="ch13">
<div class="titlepage">
<h2 class="title"><span class="num">1</span> READING</h2>
</div>
<p>...</p>
<p>...</p>
</section>

Chapter 14 HTML
<section xmlns="http://www.w3.org/1999/xhtml" class="section" title="1**READING" xmlns:epub="http://www.idpf.org/2007/ops" epub:type="subchapter" id="ch14">
<div class="titlepage">
<h2 class="title"><span class="num">1</span>**READING</h2></div>
<p>...</p>
<p>...</p>
</section>
Chapter 13 headers.JPG Chapter 14 headers.JPG 
Reply 

#2  JSWolf 02-26-2020, 04:59 PM
Try the following CSS in place of the CSS you've posted.

Code
section.chapter section.section div.titlepage h2.title span.num {
font-size: 1.2em;
font-family: sans-serif;
font-weight: bold;
color: gray;
}
You do not need all those fonts and that could be confusing things.
Reply 

#3  hobnail 02-26-2020, 07:15 PM
In addition to what JSWolf said, if you're not using that span class="num" anywhere else I'd dumb it down and get rid of its nesting in the css and specify it as

span.num {
blah blah blah;
}

Otherwise if you are using it elsewhere just make it unique; e.g., span class="numheaders".

"Complicated" css like you're using is more likely to cause problems.
Reply 

#4  JSWolf 02-26-2020, 07:32 PM
And the <div class="titlepage"> can go. Just put all you need in the title class.
Reply 

#5  hobnail 02-26-2020, 10:29 PM
I'm also puzzled by your setup of the file; I do the chapter per file thing when redoing a book from project gutenberg and I use sigil's starting file and my files look like this:

Code
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="en" xml:lang="en">
<head> <title>The prince and the pauper</title> <link href="../Styles/reset_blitz.css" type="text/css" rel="stylesheet"/> <link href="../Styles/stylesheet-2020-01-22.css" type="text/css" rel="stylesheet"/>
</head>
<body> <header> <h2>Chapter One <span>The birth of the Prince and the Pauper.</span></h2> </header> <p>In the ancient city of London, on a certain autumn day in the second quarter of the sixteenth
Yours contains neither the xml version nor the doctype lines, and you don't have the outer html tag which mine has the xmlns on; yours has it on the section. I've never seen a chapter set up that way; maybe it works but you might try using sigil and put what's between the section tags in the files created by sigil, between the body tags. (I've also configured sigil to use EPUB 3.)

https://www.mobileread.com/forums/sh...d.php?t=327196

Each time you start/add a new chapter go to the File menu and select Add -> Blank HTML File.

That's sending you off in an entirely new direction rather than solving your existing problem but I'm wondering if your problem isn't that your files are malformed. You could at least use sigil to see what a proper epub looks like, and install the epub check plugin to verify its correctness.

https://www.mobileread.com/forums/sh...d.php?t=248186
Reply 

#6  Cepheus 02-27-2020, 10:09 AM
Hi, and thanks for all your responses. The original CSS was just the following:

span.num {
font-size: 1.2em;
font-style: normal;
font-weight: bold;
color: gray;
}

Unfortunately this has the same results as the CSS I originally posted. I've tried just about every combination of CSS too without luck.

Hobnail - the HTML I posted earlier is just a small output of the entire file. Our files are generated from an XML to XSLT to HTML conversion that automatically breaks up the book by chapters. The XML and Doctype info is in the header. I just left it out of the post for brevity.

I've looked into it a little further and this seems to be a problem that pops up on all our ePubs when using a span tag. For whatever reason if we specify a font style (serif or san-serif) it works at the paragraph level. But any span tag within those paragraph styles will always be overridden by whatever the default font on the device is set too. So if the CSS specifies that the paragraph be set to san-serif if the user selects a serif font in iBooks that serif font will display in any span tags within that san-serif paragraph. Just to make things even more bizarre it will only happen in some of our chapters but not all. In 2/3 of the above book the number displays as intended. And it only seems to happen in iBook (desktop and iPad versions). In other ePub software it works fine.


Not sure if anyone has experience with this and it may be something that we have no control over :-( But I'd love to hear other people's experience with this.
Reply 

Today's Posts | Search this Thread | Login | Register