If I include the css style 'writing-mode: tb-rl', which is used for writing vertical text, in the html stream that is to be converted to pdf, I get a repeat of the first 30 pages, up to the number of pages that should have rendered, which is always counted correctly.
SO for example in a 70 page pdf, it will show 70 pages but will repeat the first 30, between 30 and 59, and then show the first 10 again for 60 onwards.
If I remove the vertical text, i.e the style writing-mode: tb-rl, everything returns to normal. The vertical text when displayed is rendered correctly on page 21.
This happens in our code that uses the pdf library, and also in the example provided by Winnovative.
Has anyone dealt with this before? I would love a fix or work around as Winnovative are slow to respond to anything. Thanks
I never did find a direct work around to this issue.
Winnovative HTML2PDF is inconsistent in all version (tried up to 7) when the output includes vertical text in a multi-page document.
I would guess that this is something to do with page flowing/measuring calculations.
One alternative which we tested to work (but we did not use for other reasons) was to switch to evo pdf - a Winnovative sister product and their recommended solution to several internet explorer based issues apparent in the Winnovative HTML2PDF solution.
Our solution in the end was to use the existing Winnovative library to convert the pages with vertical text into non paged images (full height), and then embed the image in the PDF.
Winnovative HTML to PDF converter rendering is compatible with WebKit rendering. The supported way to rotate text is using CSS -webkit-transform property. For example, you can rotate a whole div 5 degrees clockwise using the following code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
/* Rotate div */
-webkit-transform: rotate(5deg);
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
Related
This this the current design of my report:
When I run it on different browser except for Chrome, it's looks almost ok (I have no idea why the HTML render is different from the expected result):
But in Chrome, it's a different story. Tiny boxes appear out of nowhere. How do I get rid of it?:
It seems that the boxes are generated upon loading the page. It creates a gif image named "Blank.gif" here is the complete code when I entered 'Inspect Element':
<img src="/Reserved.ReportViewerWebControl.axd?Culture=1033&CultureOverrides=True&UICulture=1033&UICultureOverrides=True&ReportStack=1&ControlID=712a96453ecc4eb89b71439a5477d6c6&Mode=true&OpType=ReportImage&ResourceStreamID=Blank.gif"/>
I solved it by just creating a CSS style that finds img elements in the body that matches the source of that image element with "Blank.gif" and then hides it.
Here is my solution:
<style>
body:nth-of-type(1) img[src*="Blank.gif"]
{
display: none;
}
</style>
I had the same problem. I'd used lines in the report to create custom-shaped tables. Those lines were the problem.
I created my own table using rectangles instead of lines. And there are no more empty images.
I have trouble understanding how to render html elements with correct size when printing them to A4 size paper.
To illustrate my purpose, I simplified my code to a html page with a single red bordered table that should be 210mmx297mm (A4 paper size):
<!DOCTYPE html>
<html>
<head>
<style>
#page
{
size: 210mm 297mm portrait; /* Set paper size to A4 (portrait) */
}
html, body
{
width: 210mm;
padding:0;
margin: 0 auto; /* Left, right are auto for body to appear as centered on screen */
}
html
{
background: rgb(204,204,204); /* gray client window for screen (so as to emphase the body as looking as A4 paper) */
}
table
{
width:100%;
height:297mm;
-moz-box-sizing: border-box;
border: solid 3px red;
border-spacing:0;
border-collapse: collapse;
}
td
{
padding: 0;
text-align: center;
box-shadow: inset 0 0 0 1000px white;
}
</style>
</head>
<body>
<table><tr><td>Hello world!</td></tr></table>
</body>
</html>
When I try to print this with Firefox (49.0.2), and carefully setting all margins to 0 and rendering size to 100%, I get a table which obviously is oversized:
If I select 'Adapt to page' for rendering size, I get a table which obviously is downsized:
I'm not much more lucky if I try with Chrome (54.0.2840.87 m)
I tried to force size to 210mmx297mm all the way round in the css, but there's still something wrong. I can't figure out what it is ... either a bug in rendering engine or setting missing in my code.
Note
Contextually I'm trying to create automatic reports all in html+css+javascript so they can be easily be viewed and eventually printed to pdf or paper from a web-browser. Cover page should be filled with some image up the very edges of A4 paper.
Here is some more complete example:
Example (JSFiddle)
I'm almost there, everything display nicely on screen (firefox+chrome) but there's still those margins when printing (printing works with firefox+nomargin+adaptsize only ... chrome is bugged for repeating table header/footer when printing).
You are tackling a difficult problem which is a bane of many programmers' existence. Printing from HTML and ensuring compatibility with different browsers is basically a unicorn. You shouldn't manage that concern yourself. The quirks of CSS styling and the fragmentation of the browser ecosystem will make sure you don't succeed.
My advice is that you take a look at a PDF generator API like PDF Kit or iText.
From my research, page and form printing is especially problematic on Firefox. As you've noticed from first hand experience, you can't manage margins in a sane way. I also tried with Firefox 49.0.2 without success.
I thought about using #media print{} but Firefox was unwilling to collaborate.
That being said, your code worked just fine for me running Chrome on the version you mentioned. Note that I set the margins to 'none'.
Cover page should be filled with some image up the very edges of A4 paper.
You're never going to satisfy this requirement. Trust me, I've been doing dashboards and reports on the web for a long time and you simply don't get fine-grained control over rendering like this. The web isn't designed for it.
You can still generate some great reports if you're willing to work within a margin and not try for pixel-perfect layouts. Web reports can look super sharp and you can cover multiple media with one code base.
But for situations where pixel-perfect rendering matters, in addition to control over page breaks and such, only a PDF library will suffice. There are some good ones out there--I've had success with PDFSharp.
Why don't you display a cover image that doesn't span the entire page?
You could use phantomjs to render your pdf (you ask for pdf eventually). In php I have successfully used https://github.com/kriansa/h2p to generate pdf's. (also with rendering javascript based charts with d3.js). It is not easy but with headless browsing you can make it work.
EDIT: we found what causes this problem and a solution. Read the choosen answer for more info.
Original question:
I'm experiencing this strange issue where the text is not rendering correctly for some words, displaying totally meaningless words or symbols instead of the words i put in the html, although inspecting the code all is how it should be, no errors in console, no problems of any kind (apparently).
First things first, the problem:
Here is how the text should be displayed on my page:
This is how it is displayed when refreshing:
When i zoom the page in or out it fixes itself until the next refresh.
I use a google web font ("Cabin" for anyone interested) but it seems to not be the issue since i tried different fonts with no luck.
I also include some third party javascript in the page (jquery.js, underscore.js, backbone.js, handlebars.js, foundation.js, jquery.cookie.js, i18next.js) and a bunch of proprietary js files.
I tried to disable them one by one and the problem goes away when i disable all of them.(conflict maybe?)
I tested the page on different pc/laptops in my office, tried locally and online, but the issue persist.
I read a question here on SO (can't find the link) where a user was having text rendering problems and fixed it wit CSS propriety -webkit-transform: translateZ(0); but looks like it's not my case.
For what is worth, here is my HTML:
<div class="footer-story full-width">
<div class="footer-story-row">
<h5>SUGGESTED</h5>
<div class="columns large-6">
<img src="http://lorempixel.com/120/120" alt=""/>
<div class="inline-top">
<h5>This is the title of the article</h5>
<p>by RandomUsername</p>
</div>
</div>
</div>
</div>
And the css involved (not everything):
.footer-story {
width: 100%;
max-width: 100%;
height: 400px;
background-color: gray;
padding-top: 15px;
}
.footer-story .footer-story-row h5 {
color: white;
border-bottom: 1px solid #ffffff;
}
.inline-top .footer-story .footer-story-row h5 {
border-bottom: 0px !important;
}
Now i have no idea how to look for a solution for this problem, because i can't see where the problem generates and can't reproduce it for you to see and play with.
I'm assuming it's a Chrome bug since everything works fine on Firefox, but i can't find anything similar anywhere, so i hope some of you can at least point me in the right direction to find a solution.
Thanks
I was able to fix this by using webfontloader to load Google Fonts.
Instead of:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500">
Use this:
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Roboto:300,400,500']
}
});
</script>
See: https://github.com/typekit/webfontloader#get-started
Ok so we finally found what was wrong:
Foundation puts text-rendering:optimizeLegibility by default on all <h> and <p>.
Looks like this css property behaves really buggy with chrome, you can read more about the problem here:
Is it safe to use the CSS rule "text-rendering: optimizelegibility;" on all text?
https://code.google.com/p/chromium/issues/detail?id=39017
It looks different from the bug issued above, but it has the same behavior although in different circumstances.
From what we have experienced it happens when:
- you load a custom font from Google Web Fonts
- you load one or more JS files in your page
- you have set text-rendering:optimizeLegibility on text elements and there's an <a></a> inside OR wrapping the text element
it happens really random and it's not easy to reproduce.
The solution was just to set the SASS variables that use this property in Foundation to text-rendering:none !default; and everything went in his place.
Hope this helps.
First question on stackoverflow, hope it's not too boneheaded. I've been trying to figure out a way to display a calendar with split event days. What I came up with was using an SVG graphic placed with inline css as a background for the specific calendar table cell in order to split days that have a split. It works wonderfully in Firefox and Chrome but the graphics do not display in Internet explorer (I've tried 9 and 10 but not 11).
The calendar is first generated with javascript and events are placed by adding css classes to targeted cells from JSON data.
Here is a small snip of the a CSS classes being used to apply the background, full example with the HTML in the fiddle:
.calendar td {
position:relative;
}
.calendar .split {
background-repeat:no-repeat;
background-position: top left;
background-size: 100% 100%;
}
.calendar .split.am_vaca{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><polygon points='0,0 1,0 0,1' style='stroke-width:0; fill:lightgreen;' /></svg>");}
Here is the fiddle containing the HTML and CSS that illustrates the issue:
http://jsfiddle.net/0mspvexg/2/
Running the fiddle in Firefox and chrome shows the split days properly but Internet explorer 9, 10, (11?) does not display the split days.
I have looked at similar questions such as the following but have not yet found any clear solutions:
SVG background image in IE9
Inline SVG not working as background-image in IE
Anyone have any experience with getting Internet explorer to display inline SVG as a background or see something obvious I'm overlooking or maybe I'm approaching this the wrong way. Thanks!
IE works if you base64 encode the data e.g.
.calendar .split.pm_mgmt{ background-image: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxIDEnICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cG9seWdvbiBwb2ludHM9JzEsMSAxLDAgMCwxJyBzdHlsZT0nc3Ryb2tlLXdpZHRoOjA7IGZpbGw6ZG9kZ2VyYmx1ZTsnIC8+PC9zdmc+");}
Unfortunately you need use URI encoding (or base64) for Internet Explorer.
With URI encoding you keep the posibility to change the SVG values, but it's hard to read.
.calendar .split.am_vaca { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%20%20preserveAspectRatio%3D'none'%3E%3Cpolygon%20points%3D'0%2C0%201%2C0%200%2C1'%20style%3D'stroke-width%3A0%3B%20fill%3Alightgreen%3B'%20%2F%3E%3C%2Fsvg%3E"); }
You can encode your SVG here:
http://pressbin.com/tools/urlencode_urldecode/
And choose the encodeURIComponent() option.
If you are using Compass you can automate base64 encoding:
http://keegan.st/2012/09/14/easy-image-data-uris-with-compass/
I'm having an issue in Google Chrome on Windows only (tried IE11, FF, Opera, Safari) with printing. The issue only occurs when using the system print dialog. Using the Chrome Print Preview renders expected results, but it's just when using the system print dialog that I get the issue.
The first image below is the expected result (printed using the normal Chrome Print Preview window):
And this one is what I get (using the system print dialog):
I think it's pretty self explanatory what the issue is - all the text has a white highlight.
The other possibly related issue is that none of my fonts are correct - the PDF is rendering using Arial, instead of the correct fonts I've declared.
These were printed to a PDF printer, however the results are exactly the same when printed on paper, and I've tried two different manufacturers of printers.
I would post CSS (as I suspect that's the issue) but I'm not really sure what to post.
I've tried changing heaps of different CSS values from various elements (too many to name), but I've tried the obvious ones: background-colors and backgrounds, tried removing opacities etc.
Any ideas would be greatly appreciated!
Edit: A live URL with an example is at: iNewsletter
Edit: Just wrote a simple test case which also fails:
<!DOCTYPE html>
<html>
<head>
<style>
#bg {width: 500px; height: 500px;}
#text {margin-top: -500px;}
</style>
</head>
<body>
<div id="bg"><img src="http://inws-cache-dev.s3.amazonaws.com/3-resize-1024-768.jpg" width="500" height="500" /></div>
<div id="text">This text will have a white highlight</div>
</body>
</html>
Which leads me to think it's a Chrome bug
The problem is in your CSS like you guessed. Search for #media print in your CSS, that controls the printing style. The live site you provided, doesn't allow any print at all so you get a totally white document as it sets the print style display:none.