I'm trying to apply css to my PDF when using ABCPDF. I set the media type to MediaType.Print in the code behind like so:
doc.HtmlOptions.Media = MediaType.Print;
I then add the HTML using the AddImageHtml function.
In the HTML markup I added the following:
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio 6.0">
<style type="text/css">
#media print {
table {
background-color: red;
}
}
</head>
Unfortunately this does not work and my tables do not change to red. If I change the CSS from #media print to #media screen it works perfectly fine, which is puzzling because I set the media type to print in the code. Is there another option I'm forgetting to set?
use Gecko as your engine;
doc.HtmlOptions.Engine = EngineType.Gecko;
Gecko engine supports both print and screen media types. The default MSHTML may only support screen.
Related
I created a classic report in oracle apex 5.0 which has a few product info (colour, szie, price etc.) as well as a Barcode column. To display the barcode column in a specific barcode font, I uploaded a piece of jquery code as plugin and managed to get the barcode displayed correctly like below
But when it comes to printing, the print function that comes with APEX doesn't work, because it only prints out the original barcode value (6208217iFiEiGi1i) which is returned by the sql. As a workaround, I created a button that calls a javascript which does window.print(), and used some CSS to get rid of the header and the sidebar of the web page, and managed to only print the main content of the web page which is the report.
The way I did is, I have the below CSS code in the html header of my page
<style media="print" type="text/css">
#media print
{
body * { visibility: hidden; }
#print-content * { visibility: visible; }
#print-content { position: relative; top: 0; left: 0; width:100%; padding:0; }
}
</style>
and the below in the region header and footer section I want to print
<div id="print-content" >
</div>
However, this approach left me with another issue. Sometimes the row gets cut off at the end of the page, that makes it look like below
Can anyone give me some suggestions on how I get around with this issue?
Thanks a lot
Try using this CSS - I'm not sure what you should apply it to, perhaps table rows in general:
#media print {
tr {page-break-inside: avoid;}
}
Possibly a more specific selector would be preferable like div#myreport tr.
I was wondering if there is way to have conditional statements in SASS for Internet explorer
FOr e.g. lets say this is what I am looking for:
.container {
background-color: black
}
if ie10 {
.container {
background-color: yellow;
}
}
I found a few hacks that work fine like for e.g.
#media screen\0 {
.container {
background-color: yellow;
}
}
This one works fine but it is a HACK!! And I want to avoid it because who knows when IE fixes this issue and then I would have to re-write my whole code.
Here is one more hack that works
.container {
background-color: black;
background-color: yellow\0/
}
So in this case the second statement is read by IE but not by chrome and Mozilla or Safari so this also does the trick but again, this is also a HACK!!
I dont want to use any kind of hacks in to my project because they dont have a certain life-time.
So is there anyone who has figured out a way to apply IE conditional SASS without using hacks but using something official.
I would really appreciate the help.
You could just import an ie partial (ie10.scss)
base SCSS
.ie10 {
#import "ie10";
}
HTML
<!--[if IE 10]> <html class="ie10"> <![endif]-->
Here's a jsfiddle: http://jsfiddle.net/TCg8N/
Basically it's a simple page with some (Japanese) unicode characters and a custom font (via data:uri):
<head>
<style>
body {
font-family: "customfont";
}
#font-face {
font-family: "customfont";
src: url(data:font/ttf;base64,...);
}
</style>
</head>
<body>
お問合せ内容をご記入ください。
</body>
It works on all browsers I have tested except Chrome on Windows (I tried Windows 7, but could be there on other versions as well). To reproduce the issue:
Control Panel -> Clock, Language, and Region -> Region and Language -> Administrative -> Change system locale...
Select Japanese (Japan) from the list.
Reboot.
Is this a Chrome bug, or could there be something wrong with my font? I tried explicitly setting the charset to UTF-8, but that doesn't help.
Thanks!
It might be helpful to use unicode-range descriptor to define your font-face.
unicode-range: U+0-10FFFF;/* Initial range */
This descriptor defines the set of Unicode codepoints that may be
supported by the font face for which it is declared.
http://www.w3.org/TR/css3-fonts/#unicode-range-desc
I'm not sure why Chrome (31 or later) has different behavior from other browsers, but this article might be a clue for it:
https://code.google.com/p/chromium/issues/detail?id=247920
Your code might go like this:
<head>
<meta charset="UTF-8">
<style>
body {
font-family: "customfont";
}
#font-face {
font-family: "customfont";
src: local('Arial');/* defining default src */
}
#font-face {
font-family: "customfont";
unicode-range: U+007F-FFFF; /* range other than Latin */
src: url(data:font/ttf;base64,AAE....);
}
</style>
</head>
DEMO
http://jsfiddle.net/naokiota/jXHfd/3/
Hope this helps.
I want to use the cytoscape-panzoom plugin distributed with Cytoscape.js. In my html page, I have included the according files from the cytoscape-web/plugins directory, as well as jquery and jquery-ui:
<link rel="stylesheet" href="javascript/jquery.cytoscapeweb-panzoom.css" />
<script type="text/javascript" src="javascript/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.cytoscapeweb-panzoom.js"></script>
In the css file jquery.cytoscapeweb-panzoom.css I have modified the locations of the png files containing the ui-icons as advised in the comment (the png files are accessible, I can see them when I paste the link in the browser):
.ui-cytoscapeweb-panzoom-zoom-button .ui-icon {
/*background-image: url("../images/ui-icons_ffffff_256x240.png"); /* point to your copy of the img */
background-image: url("http://cpdb.molgen.mpg.de/download/ui-icons_ffffff_256x240.png");
}
.ui-cytoscapeweb-panzoom-pan-button .ui-icon {
/*background-image: url("../images/ui-icons_000000_256x240.png"); /* point to your copy of the img */
background-image: url("http://cpdb.molgen.mpg.de/download/ui-icons_000000_256x240.png");
}
.ui-cytoscapeweb-panzoom-static .ui-cytoscapeweb-panzoom-zoom-button .ui-icon {
/*background-image: url("../images/ui-icons_000000_256x240.png"); /* point to your copy of the img */
background-image: url("http://cpdb.molgen.mpg.de/download/ui-icons_000000_256x240.png");
}
However, after the page loads, the panzoom controls (the circle, slider, etc.) are missing their icons, as can be seen in this screenshot (resource does not exist anymore). Does anyone have a clue what I'm doing wrong?
If you're building from the master branch, you may have to redownload the stylesheet. I think the selectors you have are out-of-date since the name change. The class names wouldn't have cytoscapeweb in the name anymore.
I have simplified a problem I faced in Firefox (the original code is generated by server side controls). Open the following snippet in IE and in Firefox:
<html>
<style>
.AllInline, .AllInline * { display: inline; }
</style>
<span class="AllInline">
Test
<script type="text/javascript">
<!-- var obj = {}; //-->
</script>
</span>
</html>
In IE, I get:
Test
While in Firefox, I get:
Test <!-- var obj = {}; //-->
The content of the script block becomes visible somehow.
I was not expecting the styling rules to be applied to script blocks (can't really see a reason why one would want this either).
Would anyone have an explanation ?
base, basefont, datalist, head, meta, script, style, title, noembed and param tags are hidden by the simple expedient of setting display: none; in html.css (which is a UA stylesheet). So they are subject to being unhidden by page CSS such as your example. area on the other hand has display: none ! important; because it has special internal handling (the image effectively owns the area).
Don't put JavaScript there. Insert it just before </body></html>.
Test your HTMl in the Echochamber.
fascinating bug!
you can add .AllInline script {display: none;} to your css to hide it.