wicked_pdf and stylesheets

There are several articles showing how to use wicked_pdf on a Ruby on Rails application, so I am not going to exlain that here. Setup is quite simple, and the gem is just awesome.

There are however a few things to notice:

Outputs on osx and ubuntu can be inconsistent

If you are using wkhtmltopdf-binary-11 on osx in development and the same binary in production on a ubuntu system the output of the pdf is most likely to be quite different. Solution: Develop on your local computer, fine-tune using an Ubuntu machine in Virtualbox.

Stylesheets don't 'behave'

You might get mixed results when using linked stylesheets. The simple solution is to inline your pdf or print stylesheet. Put this in your pdf layout file:

<style type="text/css">
<%= Rails.application.assets.find_asset('pdf_print.css').to_s.html_safe %>
</style>

This way your stylesheet will be inline, and all linking issues with wkhtmltopdf is resolved. If you have full paths for your assets, that will sometimes work as well. (e.g. if they are hosted on a cdn), but to my experience, inline CSS is more consistant when using wkhtmltopdf.

After writing this blog post, I found this repository:
https://github.com/jwo/railsdotpdf
It is a fully working example of generating pdf with linking to the assets instead of inline css. It is a fairly basic example, but it shows how to setup wicked_pdf with linked stylesheets.

Watching/monitoring CSS attributes with jQuery

I needed to monitor dimension and size CSS attributes for a AAC switch-access library I'm developing. (A separate blog post on that when it's ready. It's already on github, but there are some annoying bugs, and only support for single switch elements, and no groups...)

After testing jquery-resize (github.com/cowboy/jquery-resize), jquery-watch (darcyclarke.me/dev/watch/) and a few others, I found that they were almost what I was looking for, but not exactly what I needed.

My requirements where:

• Monitor one or multiple CSS attribute
• Use custom functions like 'outerWidth(true)' to get the full width including border, margin and padding. 'css('width')' would only return the element width.
• Use requestAnimationFrame instead of setTimeout if available.
• Either jQuery events or direct callbacks

Since I didn't find any existing jQuery plugins, jquery-csswatch was born.

Sources: github.com/leifcr/jquery-csswatch.
Example: leifcr.github.com/jquery-csswatch/example/

The plugin is written in CoffeeScript.

Styling QWebKit scrollbars

I read some people had problems styling the scrollbars in QWebkit. It's quite simple, if you think of them as CSS (with webkit specific parameters) instead of Qt Scrollbars. Ideally it should be a stylesheet mapping between QStyleSheet and a css, so that it would automatically do the magic.

You need to implement this CSS in all the documents loaded. You can do this modifying the DOM for the document you load. If you are to provide static content, I would recommend putting the CSS into the content instead, as that is easier to modify later.

Here's a small example on how to style the scrollbars:

::-webkit-scrollbar {
    width: 42px;
}

::-webkit-scrollbar-track-piece {
    background: #CCCCCC;
    border: 2px solid #6666CC;
   -webkit-border-radius: 10px;
    width:20px;
}
::-webkit-scrollbar-thumb:vertical {
    height: 40px;
    border: 2px solid #6666CC;
    background-color: #6666CC;
    -webkit-border-radius: 10px;
}

::-webkit-scrollbar-button:end:increment {
    height:42px;
    width:42px;
    background-image: url(arrow-down.png);
    background-repeat:no-repeat;
    background-color:white;
}
::-webkit-scrollbar-button:start:decrement 
{
    height:42px;
    width:42px;
    background-image: url(arrow-up.png);
    background-repeat:no-repeat;
    background-color:white;
}

::-webkit-scrollbar-button:end:increment:hover {
    background-color:green;
}
::-webkit-scrollbar-button:start:decrement:hover
{
    background-color:green;
}

:not(.none):not(.double-start)::-webkit-scrollbar-track-piece:vertical:end:single-button,
:not(.none):not(.double-start)::-webkit-scrollbar-track-piece:vertical:end:double-button,
.single::-webkit-scrollbar-track-piece:vertical:end,
.double-end::-webkit-scrollbar-track-piece:vertical:end,
.double-both::-webkit-scrollbar-track-piece:vertical:end 
{
    margin-bottom: 40px;
}

:not(.none):not(.double-end)::-webkit-scrollbar-track-piece:vertical:start:single-button,
:not(.none):not(.double-end)::-webkit-scrollbar-track-piece:vertical:start:double-button,
.single::-webkit-scrollbar-track-piece:vertical:start,
.double-start::-webkit-scrollbar-track-piece:vertical:start,
.double-both::-webkit-scrollbar-track-piece:vertical:start 
{
    margin-top: 40px;
}

This is just an example, and you probably want to change it a lot to suite your needs.