Span tag displays inconsistently on iBooks

Cepheus · 02-26-2020, 05: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>

JSWolf · 02-26-2020, 05: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.

hobnail · 02-26-2020, 08: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.

JSWolf · 02-26-2020, 08:32 PM

And the <div class="titlepage"> can go. Just put all you need in the title class.

hobnail · 02-26-2020, 11: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

Cepheus · 02-27-2020, 11: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.

02-26-2020, 05:44 PM	#1
Cepheus Member Posts: 18 Karma: 10 Join Date: Mar 2019 Device: Kindle	Span tag displays inconsistently on iBooks 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="1READING" 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="1READING" 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> Attached Thumbnails

02-26-2020, 05:59 PM	#2
JSWolf Resident Curmudgeon Posts: 76,395 Karma: 136466962 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	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.

02-26-2020, 11:29 PM	#5
hobnail Running with scissors Posts: 1,557 Karma: 14325282 Join Date: Nov 2019 Device: none	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 Last edited by hobnail; 02-26-2020 at 11:34 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Regex: grabbing <h3><span> tag group	meghane_e	Editor	8	03-28-2019 05:33 PM
Span Span Span Sigil cleaning up indesign	blackest	Sigil	31	12-06-2017 11:16 AM
<Span> tag vs <I> tag	Sablerose	Editor	22	01-15-2014 03:26 AM
span in span: is this problematic?	tbuyus	ePub	8	03-31-2013 09:01 AM
svg image inside span tag in mobi file not display numbers	Hala Aly	Workshop	3	09-12-2012 09:00 AM

02-26-2020, 08:15 PM	#3
hobnail Running with scissors Posts: 1,557 Karma: 14325282 Join Date: Nov 2019 Device: none	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.

02-26-2020, 08:32 PM	#4
JSWolf Resident Curmudgeon Posts: 76,395 Karma: 136466962 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	And the <div class="titlepage"> can go. Just put all you need in the title class.

02-27-2020, 11:09 AM	#6
Cepheus Member Posts: 18 Karma: 10 Join Date: Mar 2019 Device: Kindle	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.