I'm having trouble adjusting PhantomJS to create a PNG file that matches the original browser presentation.
Here is the entire sample html file. It's a sankey diagram creating using rCharts and d3-sankey. (You'll need to save the file to your hard drive and view it from there.)
I'm running on Windows and using rasterize.js:
>> phantomjs.exe rasterize.js test.html test.png
ISSUE: Below is a snip of one of the text strings when viewed in a browser:
And here is a snip of the same string from the PNG created by PhantomJS:
How do I make the text-shadow go away? I've played around with various CSS attributes (text-shadow) and webkit-specific attributes (e.g., -webkit-text-rendering), but can't seem to make it go away.
Is this a setting in PhantomJS? in the underlying webkit? or somewhere else?
rCharts has an undocumented function called take_screenshot that uses CasperJS (which in turn uses PhantomJS to take screenshots of rCharts created visualizations on a given html page.
For example, I forked the example you provided, renamed it as a html file, which you can view here.
I ran rCharts::take_screenshot('http://rcharts.io/viewer/?7063641'), which results in the following screenshot. The take_screenshot function uses system commands, and work well on a Mac. I have not tested it on Windows, so YMMV.
NOTE: You will need to install the dev branch for this feature.
OK - I found the issue. It is related to browser display differences. SANKEY.CSS sets the text shadow:
.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}
The text-shadow is ignored in Firefox (my default browser) and is properly rendered using Chrome (thanks #ramnath for cluing me into the browser differences!). PhantomJS uses webkit to render pages (which works properly) while Firefox uses gecko (which obviously doesn't implement text-shadow properly.) Fiddling with text-shadow in my original post didn't affect any changes - because Firefox wasn't rendering any changes and I was experimenting in the browser.
SO, the fix is to override .node text-shadow in my main HTML file. After the change, all is rendering as I prefer in the PhantomJS-created PNG.
.node text {
pointer-events: none;
text-shadow: 0 0px 0 #fff;
}
Lesson: to properly test HTML for rendering in PhantomJS on Windows, use Chrome to preview. Both use webkit as the underlying rendering engine.
Related
When I press save or review in the Orbeon form runner, warnings are displayed for all incorrect values.
When I emulate the print media using Chrome dev tools (F12 -> ... -> More tools -> Rendering -> Emulate CSS media -> print), these warnings are still visible.
However, when I create a PDF using the PDF button, the warnings are removed. Is there a way around this? I would like to see all warnings in the generated PDF.
I thought about using a custom print CSS like this:
#media print {
.xforms-alert{
display: block !important;
}
}
But this does not do anything...
Demo form here.
The answer is that currently, there is no way to show the warnings in the PDF, or even in Review mode: the HTML markup does not include alerts at all in these cases, whether for errors or for warnings.
Problem: when I use a visual regression testing tool such as PhantomCSS, the screenshots produced contain the website with dramatically moved HTML elements.
Problem image:
How it should really look like: (taken from esfiddle.net )
Tools: PhantomCSS. The same problem happens with BackstopJS.
What can I do to prevent the problem image?
The flex CSS property is causing the problems.
Since version 3 backstop supports chrome as engine, so you could specify
"engine": "chrome"
I think it would work fine in Chrome.
I'm using ABCPDF + Gecko to render some PDFs within an HTML->PDF templating engine I'm writing. I switched to Gecko specifically to be able to render embedded SVG graphics for things like signatures. However, it seems that now all font colors have changed to black,regardless of the style sheet, class names, or even inline styles being used. Is this a gecko configuration problem, a problem with ABCPDF, or ... ??
Example HTML:
<span style="color:blue;">This should be blue</span>
I'm specifying no options besides browser size, and didn't customize anything in the XULRunner21_0 folder. I'm using AddImageHtml to add the html to a PDF document.
Update: after some more research looks like this may be tied to how Gecko treats text upon printing (not the same as media type). Is there a setting that will prevent it from mucking with the visuals?
This ended up being caused by including bootstrap css in my little project. Removing the print media bits from my copy of bootstrap resolved the issue.
I found this link on how to embed custom fonts in XAML apps. Is there some way I can achieve the same while building using JS? The following method did not work.
#font-face {
font-family: "MimicRoman";
src: url("/fonts/MimicRoman.otf") format('opentype');
}
Looks ok to me, that's how it should work. You are sure the path to the font file is correct and you did also actually use the font-face somewhere? For instance,
body {
font-family: MimicRoman;
}
Also, you are sure there are no other font-family declarations taking precedence over the declaration you've made? (this can be seen quite easily with the DOM Explorer).
If nothing else works, you might want to test some other font file, just in case that file is corrupt or something (some working examples from here, for instance).
My site is displaying all fonts in Times New Roman even though that declaration is nowhere in my CSS.
This only happens in Safari 5.0.5 on OS X only. When inspecting a text element, it says "font-family: Times New Roman".
The fonts are displayed correctly in 5.1
What could be the problem, and how can this be fixed?
If you have no fonts declared in your CSS, The browser may try to apply its default font.
To avoid that, you may do something like:
html{
font-family:Arial, Helvetica, Verdana;
}
However, If you do have font-family declared for your element, it may be some widget or external CSS that overwrites your CSS, Try to get rid of these for a quicker debugging.