HTML/CSS - Avoiding cell splitting when printing - html

I want to print an HTML table.
Unfortunately, when I do, cells (rows) are often cut between two pages.
Also, browsers seem to trample over the page-break-inside property without any care, so that won't work.
The code in question:
<table>
<tr><td colspan="2">HEY YALL!</td></tr>
<tr><td>A!</td><td>B</td></tr>
</table>

Sorry -- I think there is no great way to go here -- the web still isn't made for printing.
One work-around for IE is to emulate version 8, so the page-break-inside: avoid will work. There's also a bit about windows and orphans settings. More here: http://msdn.microsoft.com/en-us/library/dd433064%28v=vs.85%29.aspx
You can also look for HTML+CSS - to - PDF conferters. I've seen a lot of different implementations of that sort of thing.
One thing I've done in the past also is to change the content-type to .doc and stream the HTML out to MS Word (because that's what my users have, and Word can read HTML now.). This works OK.

Related

Prevent page breaks in puppeteer pdf

I have html like
<table>
<tbody></tbody>
</table>
This template is getting converting to PDF with puppeteer where my tabular data is splitting across two pages however i dont want tabular data to split across the pages
I have tried all the solutions of SO for this issue https://github.com/puppeteer/puppeteer/issues/6366
but still I am not able to find the solution
I have tried page-break-inside :avoid in tbody/tr its not working
I know this css works on block level element so I have tried with wrapping the table in div and applied that css on div still table is breaking in pages
Please help if you have any solution
First of all, you need to generate your pdf for print. To do it, use this method :
await page.emulateMediaType('print');
This will allow you to control the presentation of content for print with css like break-before, see more here : https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media
Answer
You have multiple solutions so :
If your table is small enough, you can put it on one page, with a css rule like style="page-break-before: always", to ensure that it start on a new page.
If your table is too long (most of the case for dynamics table), generate your pdf for print will repeat the table header on each page, so the pdf will still be readable. If you need to ensure that some elements groups will stay together, you can apply css rules like we saw above.
It could be an hard work to obtain precise render with puppeteer, but puppeteer is probably the best to do it for now. Be brave.

Avoid HTML table cells being cut when printed

I have a HTML document with many tables which I want to be printed. The problem is that sometimes, the paper end is reached in the middle of a row, so half of it is printed in one page and the rest in the next page, even cutting a single line of text in two parts.
Is there any way to avoid this?
NOTE: I have already read this question, but I need a solution which not involves CSS, because is not working at the target computer, and I can't change that.
Even with CSS, the issue is difficult due to limited browser support to CSS pagination (as can be seen from the answers to the question you refer to).
Through years, this problem has existed, and I don't think anyone has souped up an HTML trick for the purpose. There have been some tricks for trying to prevent page breaks inside a paragraph or list by placing it in a one-cell table, but this has worked occasionally only, and besides, in your case you already have a table.
So I’m afraid there is no solution, apart from using elements that cause extra vertical spacing, like a pre element containing empty lines (to push the entire table to next page—this may of course make things much worse when the parameters of the situation, like page formatting and paper size, differ from your expectations) or splitting a table into two tables, possibly with extra space between them (even more problematic).
If the target computer doesn't support (enough of) CSS, then you can create a PDF document on the server. If you set the Content-Type correctly, the browser will download the document and start the PDF reader of the system.
If this isn't possible, then there is no solution.

HTML5 Embedded Fonts render differently across browsers?

I want to make this page look the same across all browsers. Specifically, I want the wrapping point of the text to be exactly the same on all browsers so I can create a PDF version with 100% accuracy. Check this out in FF vs. Chrome, for example.
http://santaspencil.com/desktop/embedded-test/embedded-fonts-test.php
Questions:
- Can it be done?
- Are there alternatives that don't require the user to download a plugin?
You should consider embedding the font file into your CSS. But as usual stone-age IE can not do this as you will need to include an EOT font file on your server.
http://base64fonts.com will convert your font files to base64 and then produce a css code for you to copy and paste in your html. this will help with insuring your font loads across browsers (except IE).
Good luck
... I want the wrapping point of the text to be exactly the same on all browsers ...
Bang head here (sign on brick wall). Web technology doesn't even try to do this. If you figure out a way to provide your own font -such as embedded webfonts- you can SORTA make it work. But if 100% is your goal, you might as well give up sleeping.
One of the neat things about browsers is their "liquid layout" capabitity, automatically rendering a page differently on a tablet than on a desktop to fill the different screen sizes for example. One of the prices you pay for this infinite rerenderability though is inability to specify the appearance exactly. Besides, edge cases will always arise and bite. For example if the available line is 0-73 units and the text you want to put in it is 74 units long, does it "fit" or not??? (i.e. does zero count? and is using up the very last unit a "fit" or an indication of the need to "wrap"?)
The only way to have browsers render your exact appearance is to give them what appears to them to be an image. Displaying the text on your screen, taking a screenshot of it, and making that screenshot into a *.GIF is one way.
A PDF file works too, as it appears to a browser to be a "funny" image with its own rendering engine. Most rendering engines are probably the same (i.e. the ones from Adobe) even if the browsers aren't the same, so it's much more likely to work. Providing PDF documents on the web works pretty well and is pretty widely supported. If a URL looks like http://yoursys.yourdomain/yourpath/yourfile.pdf most browsers will fetch it and start their PDF rendering tool and display it directly ...usually INside the browser window so the user isn't even aware of a different application having been used.
As to the last part of your question, it's the wrong question. It should be "solutions that don't require a plugin THE USER DOESN'T ALREADY HAVE". The advantage of a PDF plugin is the vast majority of users already have it. Not all plugins are evil/inconvenient ...just the less common ones (or the Flash plugin if your target is iPhones where users aren't even allowed to download it:-).
good luck!
This is probably way too late, but I did not know this until today. There is something called a non-breaking space, represented by in HTML, you can use to prevent unwanted line breaks or other such thing. Wikipedia has a pretty good writeup on it.
http://en.wikipedia.org/wiki/Non-breaking_space

IE6 Performance issue with source code above 10k lines

I have a big performance issue in IE6 even with javascript turned-off.
It's strange because sometimes when the page is loaded, the header is floated next to the footer, or slideshow is over the the content.
I wonder if someone had same or similiar issues in IE6 and if i minify a generated source code into a one-line, will it help somehow to gain loadspeed in that browser ?
-Want to mention that it should be compatible with ie6 so please, do not post a messages like - use modern browsers.
The problem was in MS png fixer inside css. Even if i turned off a javascript, it still works, so when i removed css lines with ms filter for png transparency, it starts working like it should.
Thanks for any submits.
I doubt that removing newlines would increase the speed in any noticeable fashion.
That is, the performance issues are likely not caused by line count but rather the size/number/type/cost of the elements/operations after the parsing.
The actual lexer that handles the newlines should see them no differently in the stream than any other character. Depending on exactly what context "source" means newlines have some effect semantically at the parser:
CSS: none (ignoring embedded newlines)
HTML: possible new text-nodes or different content
JavaScript: automatic semicolon insertion (or embedded newlines)
However, there is no reason not to try a minified version quickly to see if it makes a difference and, more importantly, to satisfy your curiosity ;-) I would definitely heed the other suggestions as well, such as checking the page (everything) for validity.
Happy coding.
You haven't specified what your page consists of, but my guess would be you're outputting the mother of all HTML tables?
The reason I guess that is because IE6 is known to be extremely slow when rendering large tables, particularly where the column widths are variable. (later IEs are also slow with this, but not as bad as IE6)
The reason is that the browser attempts to render the entire table before displaying anything, and performs a lot of calculations to work out how to render it.
The answers on this question may also help you: Are large html tables slow?

SSRS 2005 Table Border Problems When Rendering to HTML

I have a problem with my matrix not rendering properly in HTML. It's a minor issue but annoying nonetheless.
The problem is that the right borders disappear on the rightmost column. It only happens on cells with data in them. Like so:
alt text http://img193.imageshack.us/img193/7718/med100width.png
Does anyone else experience this? Workarounds? Fixes? Does SSRS 2008 have the same issue?
I have had similar problems, particularly cross browser, with SSRS. The standard of the HTML generated is very poor and hence often is quirky to say the least even in internet explorer.
The client I was working for had strict standards for accessibility and browser compatibility so I looked into improving the standard of what was outputted a lot but didn't get anywhere. As reports are basically XML I was hoping someone somewhere may have written a better engine to transform this into XHTML but it appears not.
I ended up playing around with table size and column widths which in some cases seemed to resolve some of my issues.
Upon further inspection it seems that all numbers are enclosed in divs, with the attribute width=100%. Using the developer tool in IE I saw that removing width=100% restored the borders.
One solution could be to write your own renderer based on the standard html and filter out the annoying little buggers.