I'm trying to convert a html page to PDF. The conversion works fine with PhantomJS, however, phantomjs does not seem to support CSS3 columns.
The command I'm running (html->pdf)
phantomjs.exe examples/rasterize.js http://davidwalsh.name/demo/css-columns.php sample.pdf
The resulting PDF does not honour the CSS columns style, displaying a vertical list of items instead.
However, running the following command to convert html->image does honour the CSS3 Columns style:
phantomjs.exe examples/rasterize.js http://davidwalsh.name/demo/css-columns.php sample.png
Can someone please confirm that this is expected behaviour?
BTW, I've tried using wkhtmltopdf but this does/will not be supporting CSS Columns.
Many Thanks
I believe that the webkit version on which PhantomJs relies probably is not implementing CSS3 columns, although the major webkit browsers (Safari and Chrome) both do. This link
https://github.com/ariya/phantomjs/wiki/Supported-Web-Standards
and this link
http://trac.webkit.org/wiki/QtWebKitFeatures22
will shed as much as light as there is on this topic, AFAIK.
I've come to the same conclusion as #Stolli. But as a work around, I did do the following:
Use CSS3 columns and convert the html to an image using wkhtmltoimage which ships with the wkhtmltopdf library. This will maintain the CSS3 column structure.
Then embed the generated image in a html string like:
<html><img src='path/to/my/file'/></html> and convert to PDF using wkhtmltopdf.
Obviously, there are allot of dependencies here, so it is not ideal for a production environment.
No, I don't believe it does to this day but an alternative is to use https://github.com/peterdemartini/html5-to-pdf which uses Nightmare browser instead of phantom and supports CSS columns, I just tried it out.
Related
I am using wkhtmltopdf 0.12.1 (with patched qt)
While most CSS3 stuff - at least what I use - works fine, some need a '-webkit-' prefix, like transform
Others, like border-image seem to work only with the short form (and prefixed). ie. border-image-xxx, seem not to work, SVG seems not to be supported at all
So the question: How can I find out, what level of CSS3 support wkhtmltopdf has? Trial and error is very time consuming, and probably erronous, because of typos.
edid: based on answer
I am testing with Chrome, FF, IE, Opera & safari (as possible with windows), wkhtmltopdf is like an own browser - sorringliy its seems not big enough to get a place in 'official' lists
It uses CSS2 - to my knowledge, no CSS3 properties will work.
wkhtmltopdf uses webkit. This is used by Safari and Chrome as well.
Details here: https://en.wikipedia.org/wiki/WebKit
So if you check http://caniuse.com for these browsers you should get a good result.
Final tests are still a good thing though.
Some examples of questions asked here
wkhtmltopdf css sizes in cm/mm
Does wkhtmltopdf respect css font color?
Does wkHTMLtoPDF support #page rules?
One of my development teams have written a couple CSS files that work flawlessly with IE. However, the UI is all messed up when rendered on other browsers.
Is there a tool that can take these CSS files and convert them into cross browser version? Unfortunately, these CSS files are too large and the expertise desirable to cook cross browser CSS and test it is lacking in the team at present.
The most recent versions of all prominent browsers need to be supported.
No, because that would require a tool to understand your design intent and then fix it. If it was so easy to create cross browser compatible css by just using a magic tool we would all be using it.
Usually I see this done the other way around. Get it to work in all browsers and then hack in fixes to IE. My guess is that a few simple simple things are grossly affecting the layout. I would fix it for a more standards compliant browser like Firefox and then hack in fixes to old versions of IE as necessary.
You might want to try Prefixr. It did help me with some CrossBrowser issues, but I programmed for Chrome. Don't know how great the compatibility is the other way around.
Is there any tool which can automatically convert shorthand css to longhand? I need this cause I want to use SmartSprites which does not work well with shorthand.
And prefably also a tool which does the reverse, so after the sprite computation i can minify the css as much as possible...
Also any other solutions for automatic spiriting is welcome, basically im looking for some command line tools which can be integrated into the build process so that the developers still develop on the raw css code.
You can use Dragonfly on Opera. Dragonfly is like Firebug on Firefox and Chrome but developed by Opera. There is a function in Dragonfly which let you alter the shorthand and vica versa. Check opera.com/dragonfly/documentation/
For the reverse, you can use a CSS optimiser like csstidy. I doubt it will convert shorthands to non-shorthands though.
Why not forbid the use of shorthands by developers and use csstidy in the build process?
If you don't like that idea, you could write a small script to do the shorthand conversion, which is significantly easier than the other way around. It basically comes down to string replacement.
Any solution for reducing browser compatibility problem while writing css style.
These three are the main points you need to do yourself:
Write correct markup - make sure it validates
Make sure your markup is in standards mode
Write correct CSS - make sure it validates
In addition, you can do some of the following to reduce the amount of headache:
You can use a CSS framework, like Blueprint, 960.gs, YUI CSS library, etc.
For Internet Explorer -related issues, there is ie7.js and ie8.js
Know how HTML and CSS work
Test in all browsers you target
You may also want to use a CSS reset file to start on the common ground.
Well, as of now there is nothing like fixall() which will make all browsers compatible...however, you can reduce compatibility problems by using the correct doctype.
Read thisarticle on using doctypes. Also, validate your markup.
Edit: You can go to Browser shots to see screenshots of your web design in different browsers.
Discipline!
Validate your HTML. Use a correct DOCTYPE.
Use standards, hack the bugs.
Be descriptive, or use a reset stylesheet.
Simple -- test, test, test.
First thing, you should have at least these browsers on your computer: FireFox3.5B , InternetExplorer7 (+ optional Safari 3, Google Chrome 2 Beta and Opera).
Now for a more definite answer:
avoid css3 styling like "opacity" et cetera as CSS3 is not a standard yet. Instead use Javascript libraries like jQuery to apply those effects selectively
avoid png transparency like the plague... instead use dithered gif transparency (this is now somewhat old, as it now works on IE7+)
Test and test and test
I'm using CSS Filters to modify images on the fly within the browser. These work perfectly in Internet Explorer, but aren't supported in Firefox.
Does anyone know what the CSS Filter equivalent for these is for Firefox? An answer that would work cross browser (Safari, WebKit, Firefox, etc.) would be preferred.
<style type="text/css">
.CSSClassName {filter:Invert;}
.CSSClassName {filter:Xray;}
.CSSClassName {filter:Gray;}
.CSSClassName {filter:FlipV;}
</style>
Update: I know Filter is an IE specific feature. Is there any kind of equivalent for any of these that is supported by Firefox?
Please check the Nihilogic Javascript Image Effect Library:
supports IE and Fx pretty well
has a lot of effects
You can find many other effects in the CVI Projects:
they are also JS based
there's a Lab to experiment
Good Luck
Could you give us a concrete example of what exactly you're trying to do? You'd probably get fewer "Your brower sux" responses and more "How about trying this different approach?" ones.
Normally CSS is used to control the look and feel of HTML content, not add effects or edit images in clever ways. What you're trying to do might be possible using javascript, but a behavior-oriented script still probably isn't very well suited for the kind of tweaking you want to do (although something like this is a fun and very inefficient adventure in CSS / JS tomfoolery).
I can't imagine a scenario when you would need the client to perform image tweaking in real-time. You could modify images server-side and simply reference these modified versions with your CSS or possibly Javascript, depending on what you're doing exactly. ImageMagick is a great little command-line tool for all the image effects you would ever need, and is pretty simple to use by itself or within the server-side language of your choice. Or if you're using PHP, I believe PHP's GD library is pretty popular.
There are no equivalents in other browsers. The closest you could get is using a graphics library like Canvas and manipulating the images in it, but you'd have to write the manipulations yourself and they'd require JavaScript.
filter is an IE-only feature -- it is not available in any other browser.
SVG filters applied to HTML content.
Only works in Firefox 3.1 and above, though I think Safari is heading in the same direction.
None that I know of. Filter was an IE only thing and I don't think any other browser has followed with similar functionality.
What is there a specific use case you need?
I'm afraid that you are pretty much out of luck with most of the cross-browser filter-type functionality. CSS alone will not allow you to do most of these things. For example, there is no way to invert an image cross-browser just using CSS. You will have to have two different copies of the image (one inverted) or you could try using Javascript or maybe go about it a completely different way, but there is no simple solution solely in CSS.
There are filters, such as Gaussian Blur et al in SVG, which is supported natively by most browsers except IE.
Pure thought experiment here, you could wrap your images in an SVG object on the fly with javascript and attempt to apply filters to them.
I doubt this would work for background images, though perhaps with alot of clever positioning it could work.
It's unlikely to be a realistic solution. If you don't want to permanently modify your source images, Rudi has the best answer, using server side tools to apply transformations on the fly (or cached for performance) will be the best cross browser solution.
This is a very very old question but css has updated to now support filters. Read more about it at
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Syntax
With a function, use the following:
filter: <filter-function> [<filter-function>]* | none
For a reference to an SVG element, use the following:
filter: url(svg-url#element-id)
Not really, and hopefully there never will be. It's not a web standard CSS feature for the reason that you're using CSS to format the webpage, not the browser itself. The day that other web designers and developers think they should style my browser how they wish and are then do so is the day I stop visiting their pages (and I say this as a front end web guy).