Permalink
Browse files

Fixing print CSS

When printing the CSS file paths need to be rewritten
to match the absolute URIs used in PDFKit. In addition, it
is required to configure the print media style or 
the output will be buggy. 

In print mode, the position of the slide needs to be 
set explicitly to "relavtive" or more explict styling 
in the slide container will fail in print mode.
  • Loading branch information...
1 parent 335e142 commit 96d510d09b0af1afcb870416889f8baa284e2dc7 @grundprinzip committed Nov 12, 2011
Showing with 18 additions and 4 deletions.
  1. +15 −2 lib/showoff.rb
  2. +1 −0 public/css/onepage.css
  3. +2 −2 public/css/showoff.css
View
@@ -382,12 +382,25 @@ def onepage(static=false)
def pdf(static=true)
@slides = get_slides_html(static, true)
@no_js = false
+
html = erb :onepage
# TODO make a random filename
+ # Process inline css and js for included images
+ # The css uses relative paths for images and we prepend the file url
+ html.gsub!(/url\(([^\/].*?)\)/) do |s|
+ "url(file://#{options.pres_dir}/#{$1})"
+ end
+
+ # Todo fix javascript path
+
+
# PDFKit.new takes the HTML and any options for wkhtmltopdf
# run `wkhtmltopdf --extended-help` for a full list of options
- kit = PDFKit.new(html, :page_size => 'Letter', :orientation => 'Landscape')
+ kit = PDFKit.new(html,
+ :page_size => 'Letter', # This should be configurable
+ :orientation => 'Landscape',
+ :print_media_type => true )
# Save the PDF to a file
file = kit.to_file('/tmp/preso.pdf')
@@ -451,7 +464,7 @@ def self.do_static(what)
File.open(css_path) do |file|
data = file.read
data.scan(/url\((.*)\)/).flatten.each do |path|
- @logger.debug path
+ #@logger.debug path
dir = File.dirname(path)
FileUtils.makedirs(File.join(file_dir, dir))
FileUtils.copy(File.join(pres_dir, path), File.join(file_dir, path))
@@ -23,6 +23,7 @@
height: 600px;
overflow:hidden;
border: none;
+ position: relative;
page-break-after: always
}
}
@@ -368,7 +368,7 @@ a.fg-button { float:left; }
}
.slide .center {
- width: 600px;
+ width: 800px;
height: 600px;
display: table-cell;
text-align: center;
@@ -377,7 +377,7 @@ a.fg-button { float:left; }
#preso, .slide {
background: #fff;
- width: 600px;
+ width: 800px;
height: 600px;
margin-left:auto;
margin-right:auto;

0 comments on commit 96d510d

Please sign in to comment.