Forum Bugs

Images not rendered: CSS problem

dbarrett
I'm using a variant of the Wikipedia CSS file to convert wiki pages to PDF. Unfortunately, some images aren't being rendered. I suspect they are images at the bottoms of PDF pages. In the CSS file, I have:

@page {
  size: 8.5in 11in;
  ...


When I change it to:

@page {
  size: a4;
  ...


the images display correctly. I've attached the CSS file. Any ideas how to fix this?

Here is the full CSS.
/*

  CSS style sheet for Wikipedia articles.

  Written by Hakon Wium Lie March 2008.
  Modified by Dan Barrett March 2010.

  This style sheet may be reused by anyone for any purpose.

  Here's an example of how to use the style sheet:

  prince --no-author-style -s http://www.princexml.com/howcome/2008/wikipedia/wiki2.css http://en.wikipedia.org/wiki/Winter_war -o foo.pdf

*/

@import url(http://www.princexml.com/fonts/gentium/index.css);

@prince-pdf {
  prince-pdf-page-mode: show-bookmarks;
}

/* Book-specific styles */

div.princeBookTitle {
 width: 100%;
 text-align: center;
 font-size: 30pt;
 font-weight: bold;
 text-decoration: underline;
}

div.princeBookCredits {
 width: 100%;
 text-align: center;
 font-size: 12pt;
 font-style: italic;
}

div.princePageBreak {
 page-break-after: always;
}

/* Heading numbering */
div.princeBook h1 {
    counter-reset: section;
}
div.princeBook h1:before {
    counter-increment: chapter;
    content: counter(chapter) ". ";
}
div.princeBook h2 {
    counter-reset: subsect;
}
div.princeBook h2:before {
    counter-increment: section;
    content: counter(chapter) "." counter(section) ". ";
}
div.princeBook h3:before {
    counter-increment: subsect;
    content: counter(chapter) "." counter(section) "." counter(subsect) ". ";
}

/* set headers and footers */

@page {
/* size: a4; */
  size: 8.5in 11in;
  margin: 2cm;
  font: 11pt/1.3 "Gentium", serif;

  @top-right { 
    content: string(title);
    font-style: italic;
  }
  @top-left { 
    content: string(source);
    font-style: italic;
  }
  @bottom-center {
    content: counter(page);
    vertical-align: top;
    padding-top: 1em;
  }
}

#siteSub { string-set: source content() }

/* basic style settings*/

body {
  font: 10pt/1.3 "Gentium", serif;
  prince-linebreak-magic: auto; 
  hyphens: auto;
  text-align: justify;
}

ul, ol, dl { text-align: left; hyphens: manual; }

h1, h2, h3, h4, h5, h6 { 
  line-height: 1.2;
  padding: 0;
  margin: 0.7em 0 0.2em; 
  font-weight: normal;
  text-align: left;
  page-break-after: avoid;
  clear: both;
}

a { text-decoration: none; color: inherit; }

p { padding: 0; margin: 0 }

blockquote p {
  font-size: 1em;
  font-style: italic;
}


/* text indentation */

p + p { text-indent: 1.5em }
div.thumb + p { text-indent: 1.5em }
h2 + div.thumb + p { text-indent: 0 }
h3 + div.thumb + p { text-indent: 0 }
h2 + div.thumb + div.thumb + p { text-indent: 0 }
h3 + div.thumb + div.thumb + p { text-indent: 0 }
h2 + dl + div.thumb + p { text-indent: 0 }
h3 + dl + div.thumb + p { text-indent: 0 }


div + div.thumb + p { text-indent: 0 }


#toc { display: none }


ul { 
  list-style-type: disc;
  margin-left: 1.3em;
}

/* put article heading on top of the page, spanning all columns */

h1.firstHeading { 
  float: top; 
  string-set: title content();
  padding-bottom: 0.2em;
  border-bottom: thin solid black;
  margin-bottom: 1em;
}


#footer { padding-top: 1em }
#footer ul { 
  list-style-type: none;
  margin-left: 0;
}

#footer li { display: inline }
#footer br { display: none ! important }
#privacy, #about, #disclaimer { display: none }

/* images */

.thumb, .thumbinner, img, .thumbcaption { 
  border: none; margin: 0; padding: 0;
  page-break-inside: avoid;
}

.thumb { 
  margin: 0.2em 0;
  float: prince-column-top-if-necessary; 
}

.thumb img {
  width: 100%;
  height: auto;
}

.thumbcaption { 
   background: #fff; 
   text-align: left; 
   font-style: italic;
   font-size: 1em;
   line-height: 1.2em;
   padding-bottom: 0.3em;
   border-bottom: thin solid gray;
   margin-bottom: 1em;
}

div, img { max-width: 100% }

img.thumbborder { border: thin solid black }

.infobox img { width: auto; height: auto; max-width: 95% }


/* notes */

li > b:first-child { display: none }

a[href^="/wiki"] { color: #400 }
a { color: #004 }

#siteSub { 
  display: block; 
  font-style: italic; 
  margin: 0.3em 0 
}

h2 + dl { display: none } /* these hide tag abuse */
h3 + dl { display: none }

/* tables */

tr, td, th { margin: 0; padding: 0.1em 0.3em; text-align: left; vertical-align: top }

div.center, th[align="center"] { text-align: center }

/* infoboxes are troublesome */

.infobox {
  float: none;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  line-height: 1.2em; 
  font-size: 90%;
  margin: 0 0 1em; 
  padding: 0;
  background: #ddd; 
  hyphens: manual;
  border: solid 1px #aaa;
}

.infobox td,
.infobox th {
    border: none;
    border-top: solid 1px #aaa;
    padding: 0.4em 0.6em 0.4em 0.6em;
}

.infobox .mergedtoprow td,
.infobox .mergedtoprow th {
    border-top: solid 1px #aaa;
    padding: 0.4em 0.6em 0.2em 0.6em;
}

.infobox .mergedrow td,
.infobox .mergedrow th {
    border: 0;
    padding: 0 0.6em 0.2em 0.6em;
}

.infobox .mergedbottomrow td,
.infobox .mergedbottomrow th {
    border-top: 0;
    border-bottom: solid 1px #aaa;
    padding: 0 0.6em 0.4em 0.6em;
}

.infobox .maptable td,
.infobox .maptable th {
    border: 0;
    padding: 0;
}

table.wikitable { float: top; width: 100%; border-collapse: collapse; border-bottom: thin solid black; margin-bottom: 1em }
table.wikitable, table.wikitable td, table.wikitable th { border: thin solid black; padding: 0.2em; text-align: left }

table.wikitable[align] { float: none; width: 100%; margin: 1em 0 }
table.wikitable[align] td { padding: 0.2em 0.3em }
table.wikitable[align] th { padding: 0.2em 0.3em; text-align: center; font-weight: bold }

table.wikitable img { width: auto; height: auto; prince-image-resolution: 150dpi }

.ambox { border: thin solid black; padding: 0.3em; margin: 0.7em 0 }

table.collapsible { display: none }

/* remove elements */

#administrator, #protected-icon, #siteSub, .magnify, .noprint, #jump-to-nav, .navbox, .top, #column-one, #colophon, .editsection, .toctoggle, .tochidden, #f-poweredbyico, #f-copyrightico, #viewcount, #about, #disclaimer, #privacy, #contentSub, #privacy, #about, #disclaimers, #mw-hidden-catlinks, .dablink, .sisterproject, .metadata { display: none }

hr { display: none }

.printfooter, #footer, #catlinks { float: bottom; margin: 0.5em 0; page-break-after: avoid }

#catlinks { prince-text-replace: " |" ", " }

sup { vertical-align: baseline }
sup { vertical-align: top }

ol, ul { margin-left: 1.5em }

ol.references { margin-left: 2.2em }
ol.references li::marker { 
  width: 2.2em;
  padding-right: 0;  
  text-align: left;
  content: "[" counter(list-item) "]";
}

/* remove those pesky '' characters */

body { prince-text-replace: "'" "\2019" }


/* remove visible markers references */

ol.references li a[href|="#cite_ref"] { display: none }

/*
ol.references li { prince-text-replace: "^" "" }
ol.references li a { prince-text-replace: none }
ol.references li a sup i b { prince-text-replace: "a" "" "b" "" "c" "" "d" "" "e" "" "f" "" "g" "" "h" "" "i" "" "j" "" "k" "" "l" "" "m" ""}
*/
mikeday
It's a bit difficult to tell what the problem is here. Do you have a test document that demonstrates the issue?
dbarrett
I have a test document from our MediaWiki site that shows the problem. The web pagedisplays two big images, OrganizingWork-definitions.jpg and OrganizingWork.jpg. The PDF, however, includes only the first image. If you modify the CSS as I explain earlier in this post (change to A4 size), both images get displayed properly.

I can't seem to upload this as a file attachment: your site rejects .html and .txt as file extensions. Here is the HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" dir="ltr">
<head>
<title>Badpdf - MyDevWiki</title>
</head>
<body class="mediawiki ltr ns-0 ns-subject page-Badpdf skin-monobook">
<div id="globalWrapper">
<div id="column-content"><div id="content" >
	<a id="top"></a>
	
	<h1 id="firstHeading" class="firstHeading">Badpdf</h1>
	<div id="bodyContent">
		<div id="contentSub"></div>
		<div id="jump-to-nav">Jump to: <a href="#column-one">navigation</a>, <a href="#searchInput">search</a></div>
		<!-- start content -->
<h2><span class="editsection">[<a href="/w/index.php?title=Badpdf&amp;action=edit&amp;section=1" title="Edit section: Marketing Hub Concepts">edit this section</a>]</span> <span class="mw-headline" id="Marketing_Hub_Concepts">Marketing Hub Concepts</span></h2>
<div class="floatnone"><a href="/wiki/File:OrganizingWork-definitions.jpg" class="image"><img alt="OrganizingWork-definitions.jpg" src="/w/images/4/43/OrganizingWork-definitions.jpg" width="700" height="484" /></a></div>

<div class="thumb tnone"><div class="thumbinner" style="width:702px;"><a href="/wiki/File:OrganizingWork.jpg" class="image"><img alt="OrganizingWork.jpg" src="/w/images/4/4e/OrganizingWork.jpg" width="700" height="323" class="thumbimage" /></a>  <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:OrganizingWork.jpg" class="internal" title="Enlarge"><img src="/w/skins/common/images/magnify-clip.png" width="15" height="11" alt="" /></a></div></div></div></div>

<div class="printfooter">
Retrieved from "<a href="http://djbwiki.mywiki.net/wiki/Badpdf">http://djbwiki.mywiki.net/wiki/Badpdf</a>"</div>
		<div id='catlinks' class='catlinks catlinks-allhidden'></div>		<!-- end content -->
		<div id='mw-data-after-content'>
<div class="visualClear"></div>
	</div>
</div></div>
<div id="column-one">

	<div id="p-cactions" class="portlet">
		<h5>Views</h5>
		<div class="pBody">
			<ul>
				 <li id="ca-nstab-main" class="selected"><a href="/wiki/Badpdf" title="View the content page [c]" accesskey="c">Page</a></li>
				 <li id="ca-talk" class="new"><a href="/w/index.php?title=Talk:Badpdf&amp;action=edit&amp;redlink=1" title="Discussion about the content page [t]" accesskey="t">Discussion</a></li>
				 <li id="ca-edit"><a href="/w/index.php?title=Badpdf&amp;action=edit" title="You can edit this page. Please use the preview button before saving [e]" accesskey="e">Edit</a></li>

				 <li id="ca-history"><a href="/w/index.php?title=Badpdf&amp;action=history" title="Past revisions of this page [h]" accesskey="h">History</a></li>
				 <li id="ca-delete"><a href="/w/index.php?title=Badpdf&amp;action=delete" title="Delete this page [d]" accesskey="d">Delete</a></li>
				 <li id="ca-move"><a href="/wiki/Special:MovePage/Badpdf" title="Move this page [m]" accesskey="m">Rename</a></li>
				 <li id="ca-protect"><a href="/w/index.php?title=Badpdf&amp;action=protect" title="Protect this page [=]" accesskey="=">Protect</a></li>
				 <li id="ca-watch"><a href="/w/index.php?title=Badpdf&amp;action=watch" title="Add this page to your watchlist [w]" accesskey="w">Watch</a></li>
			</ul>

		</div>
	</div>
	<div class="portlet" id="p-personal">
		<h5>Personal tools</h5>
		<div class="pBody">
			<ul>
				<li id="pt-userpage"><a href="/wiki/User:Danb" title="Your user page [.]" accesskey=".">Danb</a></li>
				<li id="pt-mytalk"><a href="/wiki/User_talk:Danb" title="Your talk page [n]" accesskey="n">My talk</a></li>

				<li id="pt-preferences"><a href="/wiki/Special:Preferences" title="Your preferences">My preferences</a></li>
				<li id="pt-watchlist"><a href="/wiki/Special:Watchlist" title="The list of pages you are monitoring for changes [l]" accesskey="l">My watchlist</a></li>
				<li id="pt-mycontris"><a href="/wiki/Special:Contributions/Danb" title="List of your contributions [y]" accesskey="y">My contributions</a></li>
				<li id="pt-logout"><a href="/w/index.php?title=Special:UserLogout&amp;returnto=Badpdf" title="Log out">Log out</a></li>
			</ul>
		</div>
	</div>

	<div class="portlet" id="p-logo">
	</div>
	<script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
	<div class='generated-sidebar portlet' id='p-navigation'>
		<h5>Navigation</h5>
		<div class='pBody'>
			<ul>

				<li id="n-mainpage"><a href="/wiki/Home" title="Visit the main page [z]" accesskey="z">Home</a></li>
				<li id="n-What.27s-new.3F"><a href="http://djbwiki.mywiki.net/w/index.php?title=Special:NewPages&amp;namespace=all">What's new?</a></li>
				<li id="n-recentchanges"><a href="/wiki/Special:RecentChanges" title="The list of recent changes in the wiki [r]" accesskey="r">Recent changes</a></li>
				<li id="n-randompage"><a href="/wiki/Special:Random" title="Load a random page [x]" accesskey="x">Random page</a></li>
				<li id="n-Browse-by-category"><a href="/wiki/MyDevWiki:Taxonomy">Browse by category</a></li>
				<li id="n-People-directory"><a href="/wiki/Special:PeopleDirectory">People directory</a></li>

				<li id="n-Preset-article-types"><a href="/wiki/Special:PagePresets">Preset article types</a></li>
				<li id="n-FAQ"><a href="/wiki/FAQ">FAQ</a></li>
				<li id="n-help"><a href="/wiki/Help:Contents" title="The place to find out">Help</a></li>
			</ul>
		</div>
	</div>
	<div id="p-search" class="portlet">

		<h5><label for="searchInput">Wiki Search</label></h5>
		<div id="searchBody" class="pBody">
			<form action="/w/index.php" id="searchform">
				<input type='hidden' name="title" value="Special:Search"/>
				<input id="searchInput" title="Search MyDevWiki" accesskey="f" type="search" name="search" />
				<input type='submit' name="go" class="searchButton" id="searchGoButton"	value="Go" title="Go to a page with this exact name if exists" />&nbsp;
				<input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="Search" title="Search the pages for this text" />
			</form>

		</div>
	</div>
	<div class="portlet" id="p-tb">
		<h5>Toolbox</h5>
		<div class="pBody">
			<ul>

				<li id="t-whatlinkshere"><a href="/wiki/Special:WhatLinksHere/Badpdf" title="List of all wiki pages that link here [j]" accesskey="j">What links here</a></li>
				<li id="t-recentchangeslinked"><a href="/wiki/Special:RecentChangesLinked/Badpdf" title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li>
<li id="t-upload"><a href="/wiki/Special:Upload" title="Upload files [u]" accesskey="u">Upload file</a></li>
<li id="t-specialpages"><a href="/wiki/Special:SpecialPages" title="List of all special pages [q]" accesskey="q">Special pages</a></li>
				<li id="t-print"><a href="/w/index.php?title=Badpdf&amp;printable=yes" rel="alternate" title="Printable version of this page [p]" accesskey="p">Printable version</a></li>				<li id="t-permalink"><a href="/w/index.php?title=Badpdf&amp;oldid=540287" title="Permanent link to this revision of the page">Permanent link</a></li><li id="t-pdf"> <a href="/w/index.php?title=Special:PrincePDF&page=Badpdf">Print as PDF</a> (<a href="/w/index.php?title=Special:PrincePDF&page=Badpdf&cols=2">2-col</a>)</li><li id="t-invitetowatch"><a href="/wiki/Special:InviteToWatch/Badpdf">Invite watchers</a></li><li id="t-cite"><a href="/w/index.php?title=Special:Cite&amp;page=Badpdf&amp;id=540287" title="Information on how to cite this page">Cite this page</a></li>			</ul>

		</div>
	</div>
</div><!-- end of the left (by default at least) column -->
<div class="visualClear"></div>
<div id="footer">
	<div id="f-poweredbyico"><a href="http://www.mediawiki.org/"><img src="/w/skins/common/images/poweredby_mediawiki_88x31.png" height="31" width="88" alt="Powered by MediaWiki" /></a></div>
	<ul id="f-list">
		<li id="lastmod"> This page was last modified on 8 November 2010, at 13:24.</li>

		<li id="about"><a href="/wiki/MyDevWiki:About" title="MyDevWiki:About">About MyDevWiki</a></li>
	</ul>
</div>
</div>

<script>if (window.runOnloadHook) runOnloadHook();</script>
<!-- Served in 0.188 secs. --></body></html>
dbarrett
I just reproduced this with the latest Prince 7.1, downloaded today.
mikeday
Great, are the two image files also available online? Then it should be possible to track down the problem.
dbarrett
I can email copies to you. (They are behind a firewall.) Just tell me where.
mikeday
That would be good, the address is mikeday@yeslogic.com.
dbarrett
Mike, I emailed you the two graphics.
mikeday
Thanks. It seems to be related to "float: prince-column-top-if-necessary" which is being applied to .thumb elements. If the elements are not actually in a column layout, and yet they don't quite fit at the bottom of the page, they get eaten. This is not ideal, and we will see if we can fix this in a future release of Prince. Thank you for letting us know about the issue. :)
dbarrett
Thank you Michael. I made this CSS change:

Old:

.thumb {
  margin: 0.2em 0;
  float: prince-column-top-if-necessary;
}


New (just adds "td"):

td .thumb {
  margin: 0.2em 0;
  float: prince-column-top-if-necessary;
}

Does this seem like a good fix? It seems to eliminate the problem in our test cases.
mikeday
Right, if the tables with thumbnails are always inside columns, that should do the trick. :)
mikeday
We have fixed this issue in Prince 8.0, available now. Thanks again for letting us know! :)