Using CSS for printed reports etc

tmccormi wrote on Thursday, July 23, 2009:

There has a been some discussion about switching from a mixture or presentation models for print to using PDF or CSS.  Seem’s like CSS is the order to support UTF-8 going forward. 

So I have a couple of questions.    I am not very familiar with CSS development and I am wondering if there is a developer guildeline or a set of classes, functions, modules or style sheets that are ready to use as an OpenEMR standard and if that standard has been documented anywhere?  I didn’t find anything on the wiki.

Secondly does CSS actually support printed output.  Ie: can you control the page length, breaks, headers and footers, page counts, column widths, etc? I’ve only seen it used to control display in  browsers and printing from there is crappy as it does not handle paging well.

We are planning on working on a number of the printed items and I would like to do that work in a method consistent with future releases.

Seem like there should be a CSS or Template for each type of printed output,
1) Single page (letters, referrals, rx-scripts, reciepts)
2) Multipage column reports in portrait mode (narrow)
3) Multipage column reports in landscape (wide)
4) Labels (avery 2 or 3 column)

–Tony

whimmel wrote on Thursday, July 23, 2009:

Yes, CSS has some styles that are specific to printing. You can actually specify two stylesheets for the same page so that it uses different styles for viewing a report on-screen vs on paper.  (See: http://www.w3.org/TR/CSS2/media.html)

I’d like to find and/or develop a more generic reporting engine that supports templates and styles for sections of the output, not just the entire report,  as well as multiple nested group bands with subtotals and other calculations. I may be asking for too much though :slight_smile:

sunsetsystems wrote on Thursday, July 23, 2009:

I have been experimenting with this a bit.  There are a few CSS features that help a lot with pages intended for printing.  One of the most important is the ability to tell the browser that a page break is wanted, something like this:

<p style=‘page-break-after: always’ />

And also the ability to specify sizes, widths and heights in points.  Points are a well-defined unit of measure on the printed page.

There are some annoyances.  I think the main one is that most browsers are set up by default to print headers and footers (URL, date/time, page numbers, etc.) and the HTML/CSS has no control over this.  So if the user doesn’t like them, they have to go into “page setup” or whatever and turn them off… which also turns them off for anything else printed by the browser.

There are also browser bugs to watch out for.  Seems like any time you do something unusual on a web page, one browser or another is going to choke on it.

In general, CSS/HTML printing support is not very sophisticated, but I think we should support it.  PHP classes could be created to simplify things and overcome many of the limitations.  I don’t know what’s already available in that regard.

Rod
www.sunsetsystems.com

cfapress wrote on Thursday, July 23, 2009:

I’ve mucked around quite a bit with CSS in OpenEMR. Here is the file I worked up over the past two years trying to keep the styling out of the PHP/HTML as best I could:

<oemr>/interface/themes/style_oemr.css

and for the Outlook style calendar you can check out this:

<oemr>/interface/themes/ajax_calendar.css

And for the calendar search, here is yet another CSS file

<oemr>/interface/main/calendar/modules/PostCalendar/pntemplates/default/style/ajax_search.css

Now, you asked specifically about printing and Bill answered your question quite well. I’ve used CSS for page breaks and repeating table headers across pages. There is very little control over page margins and nothing for landscape vs. portrait. At least, nothing supported in current browsers. That’s why PDF can be a good solution. But that brings us back around to UTF8 issues.

Jason

bo2999 wrote on Thursday, July 23, 2009:

CSS can be a headache. 

For example, four panel prescription printing does not work in firefox browser 3.0!

Something to think about.

Bo

bradymiller wrote on Thursday, July 23, 2009:

Bo,
Check out the new HTML print prescription option in the cvs demo(as of today). You should be pleasantly surprised.
-brady

bradymiller wrote on Tuesday, July 28, 2009:

hey,

   We now have functional CSS printing for the following:
- Prescriptions
- Letter Generator
- Immunization Records (will show up in cvs demo tomorrow am)
- Referrals

  The best way to see how they work is to check out the “source” of the page. To get full effect in immunizations, make sure more than 15 to see the paging mechanism.  All but the referrals were recently cranked out by me as quickly as possible for the imminent 3.1.0 release. So, I didn’t create templates, and each mechanism is using its own code. Would be nice in the future to consider creating templates (such as a header with facility and patient name), along with a basic page template (this would sue the header template etc.) Rod’s referral template mechanism is likely the best way to go for standardization. Rod’s mechanism also allows straighforward modification of the template (kind of like smarty).

-brady

bradymiller wrote on Tuesday, July 28, 2009:

hey,

I also forgot to add the following functional CSS printing option in openemr, which happens to be the coolest one:
Growth Charts

-brady