I am creating a graphic to be dynamically generated for a report for one of our clients. I have the rough layout and I am testing to see how it prints. However, when I go to print it/save to pdf (testing both), the stylized divs are not being displayed.
Html Generate Screen
Print/Pdf Page
CSS styling for printing is very limited. With more complex layout like yours, you're either better of converting it to an image or converting it to a PDF file. Choosing the best framework really depends on what back-end you're using. In Java I had most of luck using FlyingSaucer and in PHP html2pdf.
Also, this is good tutorial on what is possible using CSS styling for printing.
Related
I have a problem with my html layout. I am using CSS -ms-grid in order to create a map of points in a specific place on my site. On IE my layout looks exaclty as I wanted, but after conversion to PDF the -ms-grid falls apart. Its width fills the entire page. I am using PDF Creator to convert my html.
How can I get my layout to look exactly the same in the PDF file as it does in the browser? Maybe you know a better or faster way of conversion?
I am not a good programist, but I am trying :)
The problem is probably that the PDF Creator doesn't support the -ms-grid CSS property. As you can see in Can I Use, the support is very limited. If you open your website in another browser, like Chrome or Firefox, the grid will probably look like in your PDF. You have to find another way to do your layout to have it compatible with PDF Creator.
I am newbie to Jquery Mobile, so far what ever examples i searched contains only one html page for whole application, with multipe div tags where each page/screen is defined as div tag with data-role as page with some header and footers optionally. Based on user actions, we are hiding some div's(pages) and showing only expected page. Also, this multi-page template seems to be standard design, as written by some blogs. Are there any other designing ways? what I would like to have is multipe html pages, for ex one for login, one for home, one for contact etc. Other wise it is difficult to understand/code/debug issues, especially people from Java background like me.So, what I want is some kind of MVC design with JQueryMobile, like each view/screen as sepearate html associated with one js (Controller). Can we have multiple html pages in JqueryMobile app? If possible how to pass data/ maintain session between them? Any samples are most welcome. Thanks In Advance.
Note: Also I don't want server side includes, may app contains 10 to 15 screens, each page will make a webservice call and fetch some data and map it to UI.
As jerone mentioned above, the jQuery Mobile documentation clearly says
We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
See http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html
Each page (which can be a static HTML file or anything produced by a script (e.g PHP, Python or whatever)) is thus standalone and transitions from one page to another are done using AJAX calls.
There is no such thing as a controller except if you assume that your browser is one!
You can use multiple html files if you want. jQuery Mobile will automatic include these with AJAX: http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
Anyways, jQuery Mobile recommends one big html file with multiple pages.
From http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html
This template is standard HTML document with a single "page" container inside, unlike a multi-page template that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
I am working on a school project for me CS class where we are to find an application that is interesting to us and figure out how it works.
I have picked the technology on dudamobile.com
The app takes a URL and then converts the desktop version of a website into a mobile version.
I think I have a basic understanding out how this works....
Clean up the HTML
Parse the HTML and look for key tags
Store key tags in variables
Apply variables to a premade mobile HTML template
insert custom CSS to fit mobile devices
This is a pretty high level analysis, my question is what specific tools can I use to create something similar for my project? Is my analysis correct, in your opinion?
To me it just looks like they strip out large sections of css and replace it with more mobile friendly and less graphic intensive css. It also seems to choose odd links in navigation to make the top links so some kind of algorithm there (the top links of my site were all the ones I had for mobile devices).
I would start by doing a few tricks on the css files the site uses and strip out background images, changing images over a certain width into block level elements, changing font size, etc. until you get it looking like more of a simple layout and then add the other mobile elements as you see fit (making it readable without zooming is probably the most important though).
If the site uses html5 you can apply different css rules to the navigation section to make it a list of links and move it to the top.
Don't expect it to be a perfect crossover unless the site is moderately simple though.
You would need a back end technology to retrieve and parse the .css file to re-serve it. I would suggest whatever language you're comfortable with. I don't have much experience in PHP but I believe it would be a good fit for that application.
What is the CSS code to do a page break when printing? Or better yet, is there some print CSS framework like JQuery is to web page DOM manipulation? I need to print web pages with control like Adobe PDF, but without using a third party plug-in. Prints need to be precise, like controlling what pixels hit the top of each page, (if we want to put our logo on each page header for example.
Any ideas?
page-break-before: always;
page-break-after: always;
You can try to force a page break using the page-break-before or page-break-after properties.
Pixel-perfect print control will be very, very hard to achieve. For example, each browser adds a footer and header section that you cannot influence and only the user can turn off. Browsers disregard background images, and tend to set margins as they see fit.
For a rundown on how to style HTML for print, this Smashing Magazine article may provide some pointers: Printing the Web: Solutions and Techniques
Browser support for printing is very weak, at best. For example, getting something like a page header image to work is going to be pretty rough; I don't know of any browsers that even support the "#page" CSS declaration, let alone the running content features of CSS3.
The FlyingSaucer PDF toolkit for Java, on the other hand, does a remarkable job of transforming XHTML into PDFs (especially given that it's free). We use it with Freemarker to template the "page", but it handles images, running header/footer text, even intra-document links.
I'm not sure what server language you're using but I've had great success with wkhtmltopdf and wicked_pdf for Ruby on Rails.
You cannot get pixel-level print precision from a browser. Your only option is PDF or similar 3rd party document format. However, if you just want to ensure a logo is on the top of a page vs the bottom of the next, you can use the page-break-before, page-break-after properties
The w3schools.com has a handy CSS Reference. Since most of us cannot remember many uncommon css properties, hope this is useful for you.
I need to display some HTML content as it will be printed. Basically, I want to emulate the browser print preview feature.
I'm not sure how to do this just with HTML/CSS/JavaScript. The only solution I came up is to convert the HTML to PDF so it´s split into pages and then convert that PDF to images and print each image one bellow the other.
It will be really helpfull if someone can point a more straight forward method. I'm not even sure if this is posibble.
BTW, I'm using PHP in the backend, so if there is a PHP class for this it will be helpfull.
The page size for diplaying it will be letter no matter what the user have configured
This how it should look in the browser:
I don't think this is possible. You cannot know all the users' print-settings in the browser (javascript) and definitely not on the server (php, asp, java).
update
Think about it this way (please keep in mind that a decent 100% solid print preview is NOT possible):
User navigates to page and asks for a print preview
Website provides print preview (preferably in a html-format, otherwise png or pdf)
User likes and wants to print:
From the browser
From some image viewing/editing program (png)
From Acrobat (pdf)
Every print solution has it's own Print... dialog. You can change print settings here.
It's the last point where everything you want fails... You don't have control over the output anymore at that point (from your website)...
As others have point out, you can't do this. My recommendation is that you make a "printer-friendly" version that just contains a plain white background and plain black text. But that's about as close as you can get to the actual "print preview".
HTML wasn't really meant for page layout, it was meant to be read on screen. Why is the browsers page preview not good enough?
Anyways, what you could do is try and convert the html to latex or something similar, and render that to a pdf or png on the server side and display that. But that would preclude using very complicated html layouts otherwise it will get pretty nasty.
I think there's a simple workaround.
You can ask user the page size and top, bottom, left, right margins. Then render the page in PDF using these settings. PDF will guarantee that the page will be printed as generated.
I think this approach should work well.