stuck Posted June 25, 2010 Report Share Posted June 25, 2010 is it possible using a print style sheet for my content to be printed in columns rather than spew out as it appears on screen. if so, how would i go about this. best regards Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 25, 2010 Report Share Posted June 25, 2010 Yes, it is possible - and here is how it's done: http://www.csstutorial.net/2010/02/making-web-pages-printable-with-css/ Quote Link to comment Share on other sites More sharing options...
jstern Posted June 25, 2010 Report Share Posted June 25, 2010 if your familiar with jquery at all, there a program called jprint that works really well. you can tell it to print everything in certain <div> tags. Quote Link to comment Share on other sites More sharing options...
stuck Posted June 28, 2010 Author Report Share Posted June 28, 2010 Yes, it is possible - and here is how it's done: http://www.csstutorial.net/2010/02/making-web-pages-printable-with-css/ this article is primitive and doesn't help me with my question. Quote Link to comment Share on other sites More sharing options...
stuck Posted June 28, 2010 Author Report Share Posted June 28, 2010 if your familiar with jquery at all, there a program called jprint that works really well. you can tell it to print everything in certain <div> tags. thanks for your help - i will look into this. great stuff! Quote Link to comment Share on other sites More sharing options...
stuck Posted June 28, 2010 Author Report Share Posted June 28, 2010 Nope - unable to find any article or demo which uitilises jprint for what i am trying to achieving. Basically, my client is another who will only read articles in print. He really needs the content to be printed in columns rather than a page-wide block of text. If anyone has an axample of where i can educate myself on this then pls pls pls let me know about it. Best Rgds Quote Link to comment Share on other sites More sharing options...
newseed Posted June 28, 2010 Report Share Posted June 28, 2010 Multi-columns paragraph text is not support by CSS2.1. This feature will be introduced in CSS3. CSS3: column-count: 2; column-width: 250px; column-gap: 35px; column-rule: 1px solid #666; height: 250px; The css is self-explanatory. You will only need one div to contain the content. <div class="multi-col"> <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. </p> <p>Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p> <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc.</p> </div> With a height setting of 250px, the content will fill the first column before it continues over to the next column. The drawback is that if the content exceeds beyond the two columns then text will overflow starting a third column. The problem with CSS3 is that it is not supported in most modern and earlier browsers. Google seems to be supporting most of the CSS3 styles. Of course you can do a little css hack for browsers like Firefox and Safari using -moz and -webkit respectively. Firefox: -moz-column-count: 2; -moz-column-width: 250px; -moz-column-gap: 35px; -moz-column-rule: 1px solid #666; height: 250px; Safari: -webkit-column-count: 2; -webkit-column-width: 250px; -webkit-column-gap: 35px; -webkit-column-rule: 1px solid #666; height: 250px; Unfortunately, there is no solution for IE which covers about 50-55% of the market. The only solution (unless there is a jquery script for printing two columns) is to create a second page specifically for print displaying two columns. Quote Link to comment Share on other sites More sharing options...
jstern Posted June 28, 2010 Report Share Posted June 28, 2010 What I've done with jprint in the past in a similar situation, was created a hidden div in format you want the printed area to be printed. - Make your page look how it's supposed to to the person visiting. - Make a hidden div below all your content, but in the format (columns style) you need printed in. Noone will ever see the hidden divs (unless they inspect the page i suppose, but that's not a big deal). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.