I am trying to find out why #media print is not working on Chrome. It's fine with IE and FF.
I am working on print page for a coupon, but Chrome is printing a blank page.
Are you using a separeted css?
Try embedding the css inside the page to see if the problem persist.
The example bellow seems to work in the same page:
<style type="text/css">
#media print{
.button {display : none}
}
</style>
Related
I've got a French text on a website using "Nunito" from Google Fonts.
On Safari, I found out that my text had bolder letters for signs such as "ç" or "é". Looking again, I realized they also differ on other browser, not just as much.
I've tried including the font in different ways (link, font-face), nothing does the trick.
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Nunito:700&display=swap" rel="stylesheet">
<style>
body {
font-size:20px;
font-family: 'Nunito', Arial, sans-serif;
}
</style>
</head>
<body>
comment ça marche ?
</body>
</html>
In the example, the "ç" looks off.
At some point, I went and typed some text on Google Fonts directly, and it looked right.
That got me thinking... And trying at my example again.
Bing!
The text I had was copied/pasted from what the marketing sent me. That text didn't work, while "typed" text did.
The "ç" in the text I had was charcode 99 ("c") followed by 807 (the cedilla below it). Chrome and Firefox did attach both in an odd way, but it kind of worked, but Safari just ignored it and took the whole sign from Arial.
The "ç" I typed in Google Fonts for text was the code 231, which is a single character from Latin encoding.
I am trying to open pdf files in an iframe by also using parameters to control how the pdf is opened. They work great on the website, but they don't seem to work on electron: the pdf is opening inside the iframe, however, the zoom level specified by the 'view=fitH' does not seem to work in electron. Is there any way to make the parameters work in electron too? This is the code that I am using.
<iframe src='./res/test.pdf#page=1&toolbar=0&statusbar=0&messages=0&navpanes=0&scrollbar=0&view=fitH' frameborder="0" style="width:72.5%;height:95%;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></iframe>
Update:
I will try to offer more details of what I'm trying to do. I'm building the app from macOS Sierra and the end goal is to have a local app for windows which can be used instead of the online app when there is no internet connection. I am using the following command to build the app:
electron-packager ./ --platform=all --arch=all --overwrite --asar
However, the pdf is not fitting the width of the iframe as it should, but is instead zoomed out like in the following image:
The actual result - you can see that the pdf is zoomed out a lot
I will try to build the app from windows and see if that solves the issue.
I see this working just the same way as in browsers
main.js
const {app, BrowserWindow} = require('electron')
app.once('ready', () => {
let win = new BrowserWindow({
webPreferences: {
plugins: true
}
})
win.loadURL(`${__dirname}/pdfargs.html`)
})
pdfargs.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<iframe src='./res/test.pdf#page=1&toolbar=0&statusbar=0&messages=0&navpanes=0&scrollbar=0&view=fitH' frameborder="0" style="width:72.5%;height:95%;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></iframe>
</body>
</html>
I found out what the problem was. I was breaking the rule:
Individual parameters, together with their values (separated by & or #), can be no greater then 32
characters in length.
I am now using page=1&toolbar=0&view=fitH and it works like expected now.
I don't know why it worked in browsers even though I was using more than 32 characters, but I guess there is an exception to every rule.
The html looks like this:
<html>
<head>
<style type="text/css">
h1:before
{
content: '\292d';
}
</style>
</head>
<body>
<h1>Sample Text</h1>
</body>
</html>
So, I've already converted the '⤭' character to ASCII which shows fine in my desktop's browser; however, on iPhone, it's blank!
The problem could be with content: '\292d'; even though they say content is supported with safari 1.0 and up it still does not work properly.
i used it for displaying images and it used to show up in inspect element but not in browser window, the entity '\292d' is infact supported
instead Try putting it directly inside the tag, or use javascipt if you want it to be dynamically inserted
I've seen similar questions, but not this exactly.
Do CSS media queries have to be in an external CSS file to work properly?
I've got a client who I’ve only got access to an inline css block within WordPress. Their IT department has the CMS really locked down, and the only thing I have access to change is the CSS via a plugin called Improved Simpler CSS that puts an inline block of <style type="text/css"></style> before the <head> closes.
In doing the site, the browser seems to pick up the "inline" media queries OK, responding to changing the browser's width, but utilizing an iPhone or iOS simulator, I only get the desktop view, and I'm thinking iOS doesn't like the CSS not being externalized.
<style type="text/css">
/* Mobile-specific media query */
#media only screen and (min-width: 320px) and (max-width:767px) {
#wrapper,
.home #content,
.page #container,
.page .page,
#footer,
.page #content {
width: 100%;
}
#header {
margin-top: 50px;
margin-left: 20px;
width: 95%;
width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
height: 151px;
}
}
</style>
No, they don't have to be external...
MDN's docs on Media Queries demonstrates the two main ways of setting media queries:
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a stylesheet -->
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
Media queries are perfectly valid within <style>, they don't have to be within an external stylesheet.
Make sure you include the viewport meta tag in your head (if you haven't already):
<meta name="viewport" content="width=device-width, initial-scale=1">
It would also help if you include the CSS you currently have.
I have a web application that produce its reports in HTML format. Sometimes these reports become very much and the window shows scrollbars.
The problem I have is that I can just print what I see in the web page, and whenever I want to print them, I have not more than 1 page to print. So I lose other repots that I expect to be in other papers.
What do I have to do ?
The nature of the problem
Your problem is associated with styling.
It is hard to tell what exactly your problem is - we did not have a chance to see your stylesheets. For sure you should rewrite them to not crop the pages.
Apply different stylesheets to screen and print
One idea is to change current stylesheet to be applied only to screen media and apply different one specifically to printed media.
You can do it like that in HTML:
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
or like that in CSS (example from W3C):
#import url("fancyfonts.css") screen;
#media print {
/* style sheet for print goes here */
}
Print-specific styling
For details on print-specific styles see the following page: http://www.w3.org/TR/CSS2/page.html
In your case the following styling may become useful:
table { page-break-inside: auto; }
tr { page-break-inside: avoid; page-break-after: auto; }
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
It will allow for page breaks inside the table, will try to avoid page breaks inside rows, and will repeat both headers and footers of the table on each page. However, check whether it works in your target browsers, to be sure.
If you are using ASP.NET, use Crystal Reports.
If you are using Java EE, use JasperReports.
If you are using PHP, use FPDF (there may be something else too).
These tools are better for bulding reports rather than pure HTML.