I have a page that spits out db data in long horizontal tables.
I need to print it nicely so it does not cut off. Any tips ?
Change table into horizontal one with many rows (swap rows/columns)
Suggest users to switch to Landscape mode. AFAIK there's no way to do that programmatically in current browsers (CSS3 defines #page {size:landscape})
Split table every few columns (i.e. instead one with 100 columns, generate 10 tables with 10 columns each). Use CSS table {display: inline-table} to show them all side-by-side on screen. This trick works only if you don't have cells with varying heights.
If it doesn't fit on the paper in a readable font, it just doesn't.. In my opinion, huge horizontal tables (be it a HTML table or an Excel sheet with many columns) don't lend well to printing. For that matter, they don't lend well to viewing on a screen either. Remember vertical scrolling is much easier for your users than horizontal scrolling - all thanks to that little wheel on your mouse.
Worst case, you might need to write a seperate print version which uses a vertical layout.
To ensure your table won't disappear into the Printer Abyss, ensure that its container has a width set to 100%.
I assume you know how to use print specific CSS (<style type="text/css" media="print">).
Since printers and computer monitors can have very different resolutions,
do most of your size-setting in em's in the print CSS, and hide non-essential
elements when printing (display:none).
Also, to increase readability on paper, use a white background, black text,
and serif fonts (Times New Roman, etc.), which have a reputation for being more legible on paper.
Different browsers do printing their own way (even more than on screen),
so play around a bit and see if you can get better results from another browser.
That is, of course, if printing is not required to work perfectly across
the entire browser spectrum.
Related
I'm building an adaptive design using CSS and I'm wondering how I can keep things nicely aligned. Two examples so far: my page: http://www.spabc.com/drupal/ now, I would like to keep the check-rates_btn aligned with the titleimg as the browser window resizes but due to the image being set a width of 95%, I can't really keep things aligned. I'd also like to keep the logo nicely aligned with the image i.e. where it hangs over titleimg, I want to keep the room that it hangs over = to the distance on the right side to the border of the titleimg. I tried to depict what I mean here: The distances depicted with red lines should stay equal. How do I do this?
You will need to adjust the styles for check-rates_btn and titleimg accordingly using CSS Media Queries.
Unfortunately, you are using Drupal and have too many cached CSS files for me to look through, but the ones I did look at (layout.css and system.theme.css) only had a few specific media queries that were not altering these classes.
Hope this helps.
I've tried using em as well as px, but I cannot get a certain line of text to display at the same size in every browser. I know I'm reaching for a lot but I'm tasked with achieving a pixel-perfect development based on a mock-up, and need a certain text to span the width of an area left-to-right so that it all flushes from side to side with an image.
My last option is to use an image, which I don't want to do. I know that you can specify certain CSS parameters that work on the different browsers such as -moz-SOMECSSPROPERTY:some value; but can you do this with the font size so that one browser has it at one size, and another as another. Oddly enough too though this is actually only happening in the browsers that are on different OS's, i.e. - on my Mac it's as intended, and on Windows (same browsers) different.
Thanks for advice.
It won't be enough to specify the font on a per-browser basis, because (as you noticed) you'll also run into inconsistencies across platforms and devices.
If you want the text to always fit the image flush, the text pretty much has to be an image, too.
I have a page that I'm trying to set up for printing. This page contains a large number of individual tables. The tables are of varying size but, in general, I can fit 2.5 to 3 tables on each page. I'd like to be able to prevent the tables from being broken by a page break. Any idea how I can accomplish that?
I tried this:
.reportTable {
page-break-inside: avoid;
}
Unfortunately, page-break-inside only seems to be supported in Opera (according to W3Schools - I verified that this doesn't work in Firefox 4.0.1).
I can do this to force a page break before after every single table:
.reportTable {
page-break-after: always;
}
This works to insert the page breaks and seems to be supported in all major browsers, but it leaves me with tons of wasted space on the printed documents (roughly half of each page is blank). I really only want a page break if the entire next table won't fit on this page.
I know that I have users utilizing Internet Explorer, Firefox, and Safari so I'd really like to support those as much as possible. Finding something that would also work in Chrome and Opera would be a very nice bonus.
Any ideas?
I've also been looking for an answer to this. The closest I came is to knowing approximately how many lines of output would fit on a page, then calculating how many lines of output the page had. In your case:
1) figure out how many lines of output you can fit on a page.
2) keep track of how many lines you've used already by displaying your first table.
3) calculate how many lines table 2 will take. Add it to table 1's lines and see if you're still below your approximate threshold. If you are, display the table, if not, put a div down with the page-break:always in it to force a new table.
This would give you approximately what you are looking for, but it won't be perfect. every once and a while, you'll have a table that "could" have fit on the previous page, but just didn't quite make the cutoff because you have to be on the low side of estimating how many lines fit on a page.
I haven't however figured out a way to facter in if the content inside a cell or something like that will wrap around into a new line when smushed into a printout page.
Hope that sparks an idea for you.
At present, there seems to be no way to force the browsers that don't support page-break-inside: avoid to do so.
However, since you can fit 2.5 to 3 tables on each page and prefer not to print just a single table using page-break-after: always;, you could opt to insert a special div that forces a page break after every two tables.
So you would include <div class="pageBreak"></div> and hide it for the screen but display it for printing. And you would give it a style of page-break-after: always;. In this way, you get at least two tables per page.
Another suggestion would be to let the user decide whether or not he/she wants to print one table per page or as many as can fit (with some possibly being split over the pages). You can toggle a checkbox to add the page-break-after: always; style to the tables.
to fix this just make
#table{page-break-after:auto;}
This is a very old question, so just wanted to update that page-break-inside: avoid; is now supported in most major browsers. Though there are some quirks to making sure page-break-xxx works (NO parent at any level can have position: fixed, the element and direct parent need to be position: relative and display: block, etc.).
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside
https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside
Not all printers are created equally.
You are having problems because the printer is not controlled by either the web browser or the html code. It is controlled by the printer driver that came with the printer. This function (and its settings) belongs to the owner of the computer rendering the page, not to you.
Your code can not know in advance how many lines the printer attached to the user's system can put on a page, or how the printer will lay out a table. It will be different if a user with a different printer opens the page. Just like different screen resolutions, there are different printer pixel resolutions.
So all of the rules that apply to different screens (and their disadvantages) also apply to different printers. Not only can't you know where the printer will break a page, you can't even know how large the printed page is, in terms of how much content fits on a page.
To get all of a table (or multiple tables) onto a page, the user should select the parts he wants to print, and then use Print Selection on the printer dialog box.
I have recently begun using image sprites and they are definately great for reducing http requests. Is there a point where it becomes bad practice?
Im thinking particularly where a lot of extra markup has to be added to support them. For example, using them for list bullet points, I have to add two or three extra spans to get everything alligned etc.
Theres also the annoying point that you cant use repeating images, so therfore there is always the toss up between one large image as part of sprite or a tiny 1 pixel image used for repeating downloaded on its own.
Im really looking for an opinion on the two situations outlined here + any other general considerations/guidelines for using sprites.
They can often cause performance issues on mobile devices. I'm not 100% certain why (never really dived into the problem), but I'm assuming it's because the mobile webkit is loading a new copy of a relatively large image into memory for every instance of it on the page. Since mobile devices often have very small amounts of RAM, it can quickly cause the page to slow down.
I've run into this issue before when having about 300 "icon" sprites on a page at one time, each pulling from a sprite image that contained about 50 different icons. Going back to "normal" methods of one icon per image (or 2-3 for hover states) solved performance issues on this particular page.
Also, many browsers (mobile and otherwise) will often not 100% respect the clipping of sprites when you slightly resize the page content (e.g. using "Zoom In/Out" on the browser itself). You'll often see little pieces of the sprite next to the one you want to use.
As for your bullet example, you shouldn't ever need more than one extra div/span. You would set a margin-left on the li and position your "bullet div" in the empty space it creates.
That being said, I use sprites all the time because they're convenient, just be aware of a few issues with them. Generally, I have sprites.png, sprites_h.png and sprites_v.png for horizontally and vertically repeating pieces.
Write two simple test pages, use sprites on one, and not on the other. Use a tool like http://www.webpagetest.org/ to measure the performance in a few different browsers. Once you have data, you can make decisions.
I would divide sprites by related elements, like navigation and content-related sprites, so you can benefit from sprites and keep a logical order in your code. Don't forget that readable and understandable code should be a priority (particularly with CSS, it can get very messy) unless you're working on a Google-scale project.
What are the right sizes for a webpage to be printed on A4 size paper? What other stuff should be considered?
*inline CSS is preferred in this case
Clarification: This web-page's only propose is to be printed, since it is a receipt.
Clarification # 2: This web-page is for the internal use of the company I'm working for. They would like it to look professionally designed receipt.
Clarification # 3: This web-page must be printed on one page -of A4 size- only.
Answer
I'd recommend using two different style sheets.
For viewing in the browser you could set the table width to the width of an A4 paper: 21cm. (Minus margins 18cm.)
For printing the size of the table should be "100%", which means the printer fills the whole width of the page, using the margins given by the browser's settings. (Those page margins are what makes it impossible for you to make a printout look exactly the same.)
Possibly working
Make the table narrow enough to be safe it's in the page margins. Then center that table vertically.
Solution for perfect layout
There's no way you're going to achieve that with HTML & CSS, it's just not designed to allow exact layouts!
Create PDFs online and let the users download them. Most browsers are able to render PDFs anyway.
the best way is use from #Media command in stylesheet
for example
#media print{}
use for print layout of all control and
#media screen{}
used for screen layout of control, just think you have a
<div class="wrapper">content</div>
and then in your media you should have
#media print{ .wrapper{width: 100%;background-color:Transparent;color:Black;}}
and
#media screen{ .wrapper{width: 100%;background-color:#cdebcd;color:Red;}}
with this #media you can style your layout totaly different for print and screen. you can also use
.SomeDivOrContent{visibility:hidden;display:none;}
to hide ites in print.
let me know was it helpfull or not
Like the other guys said you need to use a print CSS, but remember one thing:
display:none; //is your friend!
You can use this to make sure elements such as your navigation etc are not printed out.
By the way A List Apart has this great article on print stylesheets, check it out.
Make your printable version as simple and free from page furniture as possible.
You should create a print-specific stylesheet that as a minimum removes any width restrictions on the page so the print page can flow the text to fit the output paper.
You should also be aware that most browser don't print CSS background images by default so don't rely on them being present on the printed page.
EDIT: In answer to your comment, I would make the receipt as simple as possible. The main issue is you don't have control over the end-user's printer so you can't know for sure exactly how wide the printable area is.
Design the page using a liquid/flowable layout and try and keep it simple. Amazon's receipt style that you get in the delivery box is probably worth using for inspiration.