We're currently generating reports for our web application using html5 / css3, and they look good on screen, but obviously when the user hits print who knows what is going to come out of the printer. So, what I would like to know is what is the best way to convert these reports to PDF for download / printing while maintaining the same visual quality of the on screen reports.
Update 2010-10-26 16:01: We're using both .NET and Perl
The only think I can think of that might work is wkHTMLtoPDF. It's a QT app that sits on top of WebKit to generate its PDF.
The good news is that it even evaluates JS so just about anything goes.
The other good news is that QT is available across a wide selection of platforms. Whatever you might be using, chances are you can use QT.
Try Prince XML, the results are pretty to look at.
If you are using some of the new HTML5 elements like Canvas, then probably even the popular PDF converter wont help you.
I suggest you to put suitable print-friendly version of your CSS. This could be achieved by using media="print" attribute in the <link rel="stylesheet"... tag of a separate CSS file, which is containing the definitions for print version.
Some options (all proprietary):
Aspose.Pdf for .NET: Expensive, very good though.
Winnovative HTML to PDF Converter: I've already use their tool, gets the job done.
ExpertPDF: Another good one.
For open-source alternatives, please see here:
Open Source HTML to PDF Renderer with Full CSS Support
ExpertPdf (www.html-to-pdf.net) supports html5 / css3.
You can try the online demo here:
http://www.html-to-pdf.net/free-online-pdf-converter.aspx
There is a node module html5-to-pdf that works pretty well.
Is free and open source.
It runs on Electron. There are some bugs (for example anchor tags render the hyperlink as well) - but it might be an easy fix.
Related
I am making a Google Apps Script for Google Docs with a side panel.
I would like to match the style of buttons, scroll bars, etc. that Google Docs has.
FYI, a lot of the CSS seems to have be minified/obfuscated.
scb-button-icon
jfk-star
Where might I find such a thing?
I would have thought Google Apps Script might have provided something like this, since consistency makes the UX better.
If the official source is not available, is an unofficial one available?
EDIT: Sidebar CSS is now freely available, see CSS Package for Add-ons.
For research only, of course:
View Source of the page you wish to research. Copy and...
Paste into a text editor. Remove everything up to and including the <style> tag, and from the </style> tag to the end. Copy and...
Paste into an HTML decoder, to remove the encoding. Now you have all the CSS, it's just badly formatted. Copy and...
Paste into a CSS Formatter, and tidy it up. Optionally, output as a file.
At this point, you've got a CSS file that can be experimentally built into your for-personal-use-only app. Browser inspectors are handy for determining the HTML others have used to produce the UI elements you want to learn from.
Here's my own little experiment, a sidebar in a Google Doc, with an assortment of elements:
Not sure if you'll be able to find the source code, so here is an alternative:
CSS Unminify
This tool will take minified CSS and expand it. This will allow you to at the very least read the CSS and hopefully figure out which rules you need.
If copyright infringement is not an issue then you could simply recreate the design that Google adopt for their buttons. It should be fairly simple with CSS. The font Google + uses is called Roboto and is free to download
I talked to some of the guys at Google and got a alpha version of the CSS.
It does not yet, however, completely support IE or Firefox, and has (very minor) differences, so I accepted Mogsdad's answer.
I need to collect data from a visitor in an HTML form and then have them print a document with the appropriate fields pre-populated. They'll need to have a couple of signatures on the document, so it has to be printed.
The paper form already exists, so one idea was to scan it in, with nothing filled out, as an image. I would then have the HTML form data print out using CSS for positioning and using the blank scanned form as a background image.
A better option, I would think, would be to automatically generate the PDF with this data, but I'm not sure how to accomplish either.
Suggestions and ideas would be greatly appreciated! =)
I would have to respectfully disagree with Osvaldo. Using CSS to align on a printed document would take ages to do efficiently in the aspect of cross-browser integration. Plus, if Microsoft comes out with a new browser, you're going to have to constantly update for the new use in browsers.
If you know any PHP (Which, if you know JavaScript and HTML, basic PHP is very simple), here's a good library you can use, FDPF:
Thankfully, PHP doesn't deprecate a whole lot of methods and the total code is less than 10 lines if you have to go in and change things around.
You can control printed documents acceptably well with CSS, so I would suggest you to try that option first. Because it's easier.
This is actually a great php library for converting HTML to PDF documents http://code.google.com/p/dompdf/ there are many demo's available on the site
XSL-FO is what I would recommend. XSL-FO (along with XSLT and XPath) is a sub-standard of XSL that was designed to be an abstract representation of a formatted document (that contains, text, graphic elements, fonts, styles, etc).
XSL-FO documents are valid xml documents, and there exist tools and apis that allow you to convert an XSL-FO documet to MS Word, PDF, RTF, etc. Depending on the technology you use, a quick google search will tell you what is available.
Here are a few links to help you get started with XSL-FO:
http://en.wikipedia.org/wiki/XSL_Formatting_Objects
http://www.w3schools.com/xslfo/xslfo_intro.asp
http://www.w3.org/TR/xsl11/
I wonder whether there is any good WYSIWYG editor when it comes to editing complex HTML pages generated from ASP.NET, PHP, GWT or anything else. I've tried a lot of WYSIWYG tools, but after a certain point I always end up with manually editing the HTML source code or CSS to fix different issues. The editors I've tried are never compatible with the ASP.NET/PHP/etc code I'm writing.
Edit: I have used Visual Studio for a few years to do ASP.NET development. After a while, it always comes to the point where I can't even open the pages and user controls because they rely on so many things which aren't available in debug time.
You're not going to get anything that is perfect. You're almost always going to have to tweak the mark-up by hand at least a little bit.
Your best bet would probably be Adobe Dreamweaver for PHP and Visual Studio (Visual Studio Web Developer Express is free) for ASP.NET.
I love VS, but I'd rather make sweet love to a hedgehog than use the HTML editor. Expression Web does a much better job editing HTML.
Personally I think that Visual Studio is the best for ASP.NET, although Expression Web also seems to be pretty good.
But I personally I think it's the best for you to start writing more code and using the WYSIWYG part less and less.
With Web applications it's all about the way they're displayed in the browser and I think that the browser is the tool which should be used for testing the GUI.
I agree, I have Expression Web right now and it works well. You can move stuff around in design view but will of course, as stated above, have to render the code manually. But it works if you wanna see the changes you have made. I would always of course view it in the browser and not just rely on the design view. Also W3Schools is a great tool.
WYSIWYG editors for complex web site/applications just never measure up IMHO.
The problem comes down to wanting control of the HTML/CSS markup, yet also the flexibility to create a GUI via drag-n-drop. (the 2 are almost polar opposites)
Take a very simple example.
In WYSIWYG mode, I type/create (pretend that World is on the line right after Hello (the Markdown editor forces me to add an extra line break)):
Hello
World
What HTML should the editor create?
Hello<br/>
<b>World</b>
<p>Hello</p>
<p><strong>World</strong></p>
<div>Hello</div>
<div><span style="font-weight:bold;">World</span></div>
<span class="abcNormal">Hello</span>
<br/>
<span class="abcBold">World</span>
(and a zillion more possibilities)
I still think the best thing you can have is an editor/IDE that understands your component/tags and provides auto-completion and code-assist/intellisense - paired up with a very quick deploy option to test changes ASAP in real browser(s)
Take a look at BBCode Editor
http://richtexteditor.com/demo/bbcode.aspx
This example shows a simple BBCode formatter for the Editor.
I am building a new WebSite based on Grails technology.
Concerning the graphical design of my website, I plan to use services from a professional web designer but meanwhile, I need to do some basics graphical design myself in order to have a "user-friendly" beta-version.
I have read through the stackoverflow.com site but couldn't make up my mind. Here is what I have found out:
how-do-you-choose-a-css-framework
what-is-the-best-css-grid-framework
can-someone-recommend-a-bells-and-whistles-css-framework
what-is-the-best-css-framework-and-are-they-worth-the-effort
But unfortunately there are many contradictory answers.
First, some say that using CSS framework is backwards authoring and not a good thing. Others advice YUI Grids, BluePrint, 960 gs, YAML...And many say that Compass allows to develop CSS layouts easily and reusable.
So considering that:
I am new to the CSS world and I do not intend to be a web designer
My layout should be user-friendly (but not necessary awesome L&F)
It should be maintanable and easily improvable (by a professionnal web designer)
Easy to implement (in order to have something quickly)
What do you advice me for getting started with the web design of my site?
Thank you for your advices.
Fabien
First, if you don't intend to be a web designer, I'd suggest outsourcing your CSS. There are several websites where you can supply HTML or a Photoshop design and have it coded up for well under a grand (1k). Or get HTML/CSS designs free.
Then there is one thing you need to know and another two you need to work out:
all HTML should be written in a semantic and valid manner: semantic = properly ordered headings, lists, no excessive divs etc.; valid = will pass WC3 validation tests. None of this is rocket science, but is still a skill that needs to be learned. Andy Clarke's Transcending CSS is a great book on semantic HTML/CSS. For ease of maintenance, the HTML and CSS should be tidy and consistently indented, etc.
you need to determine whether you'll be needing an admin backend and database for managing content, or if you're just building a site consisting of static pages (i.e. html and css files, images and other media etc.). If it's the former, that's a whole other learning curve :-)
what are your best skills? If you're a good designer, get other people to write the HTML/CSS, or use a ready-made template (there are many on the web) and customise it. Here's a good start for multi-column layouts. If you're a programmer, learn to use a framework like Django (Python), Titanium (Perl), something smaller in Ruby (because Ruby on Rails is a bit big to start with) or one in your favourite language.
Good CSS is a craft, and simplicity is the essence, but if you want to learn enough to get started, my advice would be to:
understand inheritance (the 'cascade' in CSS) and the fact that anything can be a 'block', so don't use lots of nested divs just to apply a style. Instead, apply the style to the HTML element itself, or to the element only when it appears in a parent block (like a menu unordered list contained in a sidebar div);
learn about block and inline elements (Web Design from Scratch is a great learning resource and I'd recommend it), and that CSS can change this behaviour;
test in Firefox, then test in Internet Explorer. >= IE7's not so bad (but look out for HasLayout). What you can't tweak to get right in IE, use conditional comments to add CSS that only IE can see - never use CSS hacks - .htc files that add missing IE functionality (e.g. rollover styles on any element) are available;
learn about CSS positioning, and use 'fixed' sparingly;
put all your CSS in one file (for starters), and don't use inline CSS in the HTML;
styling forms and form fields is almost a separate skill :-)
Use background images to add style, but also understand that you can offset and overlap images using positioning. You'll need to use PNGs for nice transparency, though. Oh yes, and opacity looks nice, but requires non-standard CSS for now. although the more flexible rgba (a=alpha) method is widely-supported. As do rounded corners, but both worth using.
I'd avoid CSS frameworks and resets for now - they'll complicate things at this stage by adding yet another DSL to learn (but read the arguments and the pros and cons). To avoid annoying default margins and padding, I always reset everything by doing html *, body * {margin: 0; padding 0;} then build padding and margins back in wherever needed - never been a problem so far :-)
What do you advice me for getting started with the web design of my site?
Get Firebug plugin for Firefox now!
Primary CSS uses:
See which CSS rules apply
Change CSS in real time and see the affect
Inspect other websites to see how they do things
I would not be able to develop CSS (and other web related technologies) without this tool
Take a look at YUI CSS reset/base/font/grid
http://developer.yahoo.com/yui/3/cssreset/
And Grid 960 also has some nice layouts (search for their site in google)
I don't know what OS you are running, but if you are a Mac user, I suggest a great free tool for CSS: Xyle Scope. It's not an editor but a CSS viewer/scanner, it let you browse easily the CSS code of any web page so you can learn better how css works and you can analyze any well done layout on the web.
CSSEdit (Mac Only) is a good solution for writing Cascade sheets, easy to use, not expensive, and reach of features.
Fireworks: I think is a great software to draft your layouts and make some good graphical works!
Dreamweaver: it's an all in one solution for web developing ... it's a really great tool to easily maintain synched your remote version of the website with your local one.
Coda (Mac Only) is a very good alternative to Dreamweaver, even if it don't let you manage and edit the .htaccess files!
For coding your web site I suggest dreamweaver or Coda, but an other good alternative is BBEdit (Mac Only).
Bootstrap, Its the best css framework i can suggest, there is another one called foundation also but i prefer bootstrap more since it is popular among developers and is extendible. There are few more other frameworks, I wrote a blog about that, Here Read it too if you want http://www.andwecode.com/freebies/5-responsive-css-frameworks :)
I'm looking at ways to embed PDF viewing in a Flex application.
Currently the only option I've seen is by using the flash.html.HTMLLoader class, which only works if you're using AIR. This isn't a big deal -- I'm willing to use AIR if I have to -- but based on my experimentation with viewing a PDF this way it appears that AIR simply integrates the embedded Adobe PDF browser Plug-in for viewing, which not only shows the PDF page(s), but provides all of the manipulation controls as well (zooming, printing, etc.) which I don't want to see.
I'm looking for something that works somewhat along the lines of the JPedal library for Java -- an embedded component that simply renders the PDF alone.
Has anyone found a way to do this with either AIR's built-in component or via some other method?
There are a couple of ways, but neither actually have the PDF in the Flex App:
Convert the PDF to SWF. Use this tool or one like it to convert the file over.
Use HTMLComponent, a method that uses an iframe over your flash/flex to make it appear like an external page is in your app. There are a few downsides to this method however - most of them described in detail at Deitte.com.
What you want is possible with AIR and described in this Adobe article:
http://www.adobe.com/devnet/air/flex/quickstart/scripting_pdf.html
Take a look at http://www.adobe.com/devnet/flex/quickstart/embedding_assets/ and see if it helps.
I don't think you can embed PDF files directly (but I'm not really sure) but if you totally need to do it and you don't want to open a new window you could convert the PDF to another format that can be inserted in your app.
If your goal is to simply display the PDF in the Flex environment then you could use the IFrame approach. You can find an example here http://www.deitte.com/archives/2006/08/finally_updated.htm
By using this approach you can load any HTML content which includes PDF's.
Take a look.
Okay guys here is the exact one we're looking
http://subinsugunan.blogspot.com/2009/06/embed-pdf-in-flex-application.html