CSS Width Property ignored in some ePub Readers

4 posts / 0 new
Last post

Hi Everyone

I am trying to size HTML Divs for my Epub layout using width and float properties. I am managing to accomplishing the styling in iBooks and Kobo on the iPad and iPhone, unfortunately when running my epub file through ePub Reader, Total Reader and KyBook the width properties for the Divs are ignored and they size to 100% the viewport area. I have tried using percentage, viewport height and pixel measurements to size the width of the DIvs. I have also tried running display styling of inline-block and inline.

ePub Reader, Total Reader and KyBook will display CSS height styling with no problem so I'm unsure why the CSS width properties are not being honoured. Has anyone else come across this issue before and managed to find a work around? I have tried to use column styling however this will not work either. I would also prefer having a transparent gap between Divs hence my reason for wanting to use width and float properties for styling.

Cheers
Dani

EPUBReader the extension for firefox?
I use CSS:width for figure elements and I have a test file with CSS:width for div.
I cannot see any problems.
Can you provide the styling instruction with the width property for the div?

Maybe it is a good idea, if you test the problem systematically and send bug reports to the developers of such readers.
The W3C may have tests for all CSS properties, maybe it is sufficienct just to create an EPUB with the relevant once to check different viewers in an efficient and reliable way.

This helps all authors and readers.
Workarounds are not very useful, if bugs have to be clearly fixed by developers ;-)

Hi O.H.
Thanks for your reply. The ePub Reader App I'm testing on was developed by DevelSoftware and available for download through Apple iTunes. Any help you could give me on this issue would be much appreciated. Originally I generated the files through InDesign and have since modified then to try and work the width and float styling for the Divs.

Here's the content.opf file:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<package version="3.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="bookid" prefix="rendition: http://www.idpf.org/vocab/rendition/# ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/">
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
<meta name="generator" content="Adobe InDesign 10.0" />
<meta property="ibooks:specified-fonts">true</meta>
<dc:title>test1</dc:title>
<dc:date>2016-09-08T00:47:49Z</dc:date>
<dc:language>en</dc:language>
<meta property="dcterms:modified">2016-09-08T00:47:49Z</meta>
<dc:identifier id="bookid">urn:uuid:29d919dd-24f5-4384-be78-b447c9dc299b</dc:identifier>
<!--fixed-layout options-->
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">portrait</meta>
<meta property="rendition:spread">none</meta>
</metadata>
<manifest>
<item id="Untitled-1-1" href="Untitled-1-1.xhtml" media-type="application/xhtml+xml" />
<item id="toc" href="toc.xhtml" media-type="application/xhtml+xml" properties="nav" />
<item id="idGeneratedStyles.css" href="css/idGeneratedStyles.css" media-type="text/css" />
<item id="x277.png" href="image/277.png" media-type="image/png" />
<item id="x278.png" href="image/278.png" media-type="image/png" />
<!--<item id="crystal.mp4" href="video/crystal.mp4" media-type="video/mp4" />-->
</manifest>
<spine>
<itemref idref="Untitled-1-1" />
</spine>
</package>

Here's my xhtml:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=768,height=1024, initial-scale=1" />
<title>Untitled-1-1</title>
<link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css" />
</head>
<body id="Untitled-1-1">
<div id="wrapper">
<div id="rightdiv"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>

<div id="leftdiv"><p>Hello this is some text to describe Stellar Classification.
</p></div>
</div>

</body>
</html>

Here's my CSS:
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin:0;
padding:0;
border-width:0;
}
#wrapper{
height:100vh;
width:100%;
background-color:rgba(100,130,50,1.00);

}

#rightdiv {
padding:20px;
position:relative;
width:40%;
height:auto;
text-align:left;
background-color:rgba(255,155,144,1.00);
display:inline-block;
float:right;

}
#leftdiv {
position:relative;
height:auto;
width:40%;
background-color:rgba(250,250,155,1.00);
padding:20px;
display:inline-block;
float:left;
}

Thanks.
Dani

For what do you need position:relative ?
rgba color code alreadey a recommendation from W3C, but not mentioned for EPUB 3, use only rgb color code.

A unit like vh is neither a W3C recommendation (yet) nor mentioned for EPUB 3 as well.

Unknown/invalid notations may cause trouble in some viewers.
Correct behaviour would be to only ignore this special issue, but some viewers may have a bug in the procedure to handle bugs/unknown features in stylesheets.

Fix these issues, but maybe they are not really the reason for your problem.

At least for a test, try it without the meta elements with the rendition information - does this result in a difference concerning CSS interpretation or the questionable features?

And I have no access to appled programs, therefore I cannot test those.
Try for example if the CSS is interpreted as expected in EPUBReader in firefox or in the extensions readium or even better Readiator EPUB Reader for webKit browsers like Chromium, Goggle Chrome etc. This may help to identify the culprit ;-)

Secondary menu