Jump to content
Stef's Coding Community
stuck

styling for print

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...