Why does my reveal.js PDF output have 45 000 pages instead of 350 pages after upgrading from 2.6.2 to 3.5.0? - reveal.js

I recently upgraded this slidedeck from reveal.js 2.6.2 to 3.5.0. Everything works fine, except that the PDF export now has 45 000 pages instead of 350 pages like before the upgrade.
To reproduce, click on this link and ask for the print dialog in Chrome, which will already show the number of pages.
My index.html hasn't changed. It has still this code:
<script>
if (window.location.search.match(/print-pdf/gi)) {
document.write('<link rel="stylesheet" href="website/reveal/css/print/pdf.css">');
}
</script>
Which is still equivalent to the PDF export instructions in the latest readme.

According to the PDF export instructions,
Slides that are too tall to fit within a single page will expand onto multiple pages.
When I opened your presentation in browser based on Chromium, I saw quite a lot of empty space between slides. I think the problem may be somewhere here.

As of reveal.js 3, there is a regression that cannot handle overlapping images with position: absolute well in PDF export.

Related

How to stop automatic download on IE 11 while using iframe

I have given a source in a Iframe tag, my is issue is that when the page loads on IE the download begins automatically and it generally happens on IE installed on windows 8.
<div> <iframe src="../../Images/Sample.pdf" width="800px" height="800px" ></iframe> </div>
It's downloaded probably because there is not Adobe Reader plug-in
installed. In this case IE (it doesn't matter which version) doesn't
know how to render it and it'll simply download file (Chrome, for
example, has its own embedded PDF renderer).
That said. is not best way to display a PDF (do not forget
compatibility with mobile browsers, for example Safari). Some browsers
will always open that file inside an external application (or in
another browser window). Best and most compatible way I found is a
little bit tricky but works on all browsers I tried (even pretty
outdated):
Keep your but do not display a PDF inside it, it'll be filled
with an HTML page that consists of an tag. Create an HTML
wrapping page for your PDF, it should look like this:
<html>
<body>
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
</body>
</html>
Of course you still need the appropriate plug-in installed in the
browser. Also take a look to this post if you need to support Safari
on mobile devices.
1st. Why nesting inside ? You'll find answer here on
SO. Instead of nested tag you may even provide a custom
message for your users (or a built-in viewer, see next paragraph).
2nd. Why an HTML page? So you can provide a fallback if PDF viewer
isn't supported. Internal viewer, plain HTML error messages/options
and so on...
It's tricky to check PDF support so you may provide an alternate
viewer for your customers, take a look to PDF.JS project, it's pretty
good but rendering quality - for desktop browsers - isn't as good as a
native PDF renderer (I didn't see any difference in mobile browsers
because of screen size, I suppose).
See also: HTML embedded PDF iframe

Issue with displaying sample d3 graph bar chart on IE 8

I've been referring to a sample Bar Chart Screencast and I'm currently trying to see how does d3.js work on IE 8. I've copied the sample code present in the screencast tutorial and I've placed the same in this file in my app. Based on the wiki of d3 I've tried including Aight(aight.js and aight.d3.js) in my Rails app, in my layout . But when I've tried hitting a sample url /companies/company_division_stats on IE 8, nothing shows up. It works well on Chrome and Firefox.
I understand that aight.js might have limited support in terms of functions wrt IE 8 browser. Is it because of this reason that my d3 graph doesn't show up on IE 8 and shows up on other browsers or is it something to do with my code ?
My code is present on github. Can any one please tell me in case I'm missing something.
For IE8, you would need to limit yourself to manipulating regular HTML DOM nodes with D3. But the example you linked uses SVG, which is not supported by IE8:
http://caniuse.com/svg
From the D3 wiki you linked:
You'll need a modern browser to use SVG and CSS3 Transitions. D3 is not a compatibility layer, so if your browser doesn't support standards, you're out of luck. Sorry!
From the Aight github page (emphasis mine):
Aight is a collection of shims and polyfills that get IE8 up to speed with a bare minimum of HTML5 compatibility, providing all of the interfaces necessary to do HTML-only DOM manipulation with d3.js (and other libraries that rely on those interfaces)
If you're looking for examples that do not use SVG, the first eight of Scott Murray's Tutorials use only HTML. However, I think you'll find that most other examples on the web use D3 with SVG. If IE8 support is important to you, another library such as Raphael may be more appropriate.

Converting PDFs to be viewed in any browser

I currently use a PDF-to-Flash to allow for users to flip thru pages of uploaded PDFs. However, with so many using iPhones/iPads I would like to switch this to a solution which works with any browser.
The site is developed in Ruby on Rails and I have looked into using pdf-toolkit and rmagick to convert the PDFs to images but it's not enough since I want the pages to scale with the browser window - SVG is not an option since I need for it to work w/ IE6 ;)
Any ideas?
Thx,
G
Why don't you use http://docs.google.com/viewer ?
http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html
It's really simple, and it isn't Flash (can serve iPhone users too :D). Just add this to the view:
<iframe src="http://docs.google.com/viewer?url=#{YOUR_PDF_URL}&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
Another option is a digital publishing platform like the one from Zmags. It converts a PDF to Flash, but when viewed on mobile devices it transforms into a swipeable version. Loads fast too.

Printing in IE6 completely different to other A-grade browser printing

Does anyone know of a best practice print document for printing a website in IE6? I have a specific page that needs to be printed and it comes out well in other browsers except IE6 where it is being chopped off by a huge amount on the right side of my page.
Thanks
I have found the most fool-proof method of making something printable is by providing a print button that links to a PDF version of the document.
Generating the PDF is the major task there but that can be quite simple with the right tool.
I use http://www.xhtml2pdf.com/ which is a Python app to take a page and generate a PDF version. It might need some tweaking so you might need a special stylesheet to fix some things.
Other than that, you're left fixing IE. It might help to add a print stylesheet:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
And overriding some of your more extravagant positioning methods. If you're centring, pull it back to the left, cut out extraneous margins and padding (remember background-images won't render with standard print settings so you can cut out a lot of padding).
You might find there's some crossover (ie you use some of the print styles in your PDF version) so you might be able to generate a hybrid solution to allow people to grab PDF versions and print straight from HTML.

sifr 3 only visible on my computer

I am using sifr3 in my website. I have uploaded the website on a real server and I realized that the sifr3 fonts are only visible when I'm browsing the page from my computer. I have uploaded all the essential files and I don't understand what might be broken. Can you help me please?
This is the link to the test website:
http://www.artabout.gr/idiston/
(look at the h1 headings, the menu is using images, not sifr)
You need to embed the font
http://www.bethinkerconcepts.com/2009/06/embedding-fonts/

Resources