i have try to print barcode 39 on firefox, on display browser it the barcode was appear, but when i want to print this, the barcode was gone. then i try on google chrome, everything was okay.
this is my code :
#font-face {
font-family:"Barcode 39";
src:url("/web/res/css/font/Code39.eot?") format("eot"),url("/web/res/css/font/Code39.woff")
format("woff"),url("/web/res/css/font/Code39.ttf")
format("truetype"),url("/web/res/css/font/Code39.svg#")
format("svg");
font-weight:normal;font-style:normal;}
at html :
<style media="screen" type="text/css">/*<![CDATA[*/#import '/web/task/local/adhi/fontbarcode.css';/*]]>*/</style>
<style type="text/css">
.code39{
font-family:"Barcode 39";
font-size :50px;
}
</style>
<span class="code39">*1234*</span>
<br><br>
-Thanks
Try this:
#media screen {
.code39{
font-family:"Barcode 39";
font-size :50px;
}
}
#media print {
.code39{
font-family:"Barcode 39";
font-size :50px;
}
}
The #media rule, introduced in CSS2, made it possible to define different style rules for different media types.
Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.
See CSS3 Mediaqueries for more informations.
A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we're left with web pages that frustratingly don't properly print on to paper.
It's remarkable that so few websites use print stylesheets as:
Print stylesheets enormously improve usability, especially for pages with a lot of content (such as this one!)
They're phenomenally quick and easy to set up
Some websites do offer a link to a print-friendly version of the page, but this of course needs to be set up and maintained. It also requires that users notice this link on the screen, and then use it ahead of the regular way they print pages (e.g. by selecting the print button at the top of the screen). Print-friendly versions are however useful when printing a number of web pages at the same time such as an article that spans on to several web pages.
Source Print stylesheet - the definitive guide
How do you get cross browser compatibility in Print? any tips for print css file to make print on paper identical from all browser.
Edit
I'm already using Eric meyer CSS but still facing inconsistencies in different browser when we take print from site.
Is there any CSS declarations which we can use always and put at a top in print css , Like other css resets which work good in media=screen?
I'm already using a different css for print (print.css) with media="print"
Would it be better to keep * {posotion:static} , *{float:none} , * {clear:both}
in print css always?
Identical results are impossible. The output depends not only on CSS but also on individual settings for page margins, the printer’s capabilities, available fonts, paper format (A4 vs US Letter) and probably a lot more.
For CSS
Avoid floats and positioning (relative, absolute and fixed). Especially Mozilla (Firefox) can not handle those properties very well.
Use page-break-* but don’t rely on it. Some browsers insert page breaks even in images.
You don’t know the page width and height (could A5). Keep anything as flexible as possible.
For performance, put your print style into the main stylesheet in a #media print {} rule.
Use pt not px for borders and margins. A printer doesn’t know what a pixel is and may come to strange results.
Develop your print layout in Opera, which has the best support for #media print currently, and insert compatibility hacks, when you’re done.
Internet Explorer may crash on print, if you use its reserved IDs.
Never rely on print preview. You get very different results on real printouts. Save the rain forest with a print-to-pdf-driver. :)
In html there use a link with the attribute "media" set to "print".
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
You can disable all other css and just use your "print" css. set the media first to "screen". Test it just like your testing a normal css in all browsers.
In my experience, what it looks in the screen, will pretty much look when it's printed.
Advice:
1) keep your layout as fluid as possible for it to be flexible to what ever the paper margin it was set to.
2) keep it simple.
3) In IE, backgrounds might be missing. To fix this, go to: Tools>Internet Options>Advanced. on the Settings box, scroll down to Printing and enable "Print background colors and images"
I'd like to print http://www.delicious.com/tags/engmark to PDF (Using Firefox on Linux, if possible), but the result looks rubbish. How can I print without taking into account the print-specific CSS (which I think is loaded by the enormous JS on the site)? I tried to disable print CSS in the Web Developer extension, but that didn't affect the print output.
I looked through the HTML file and found that there's a link tag with the attribute of media="screen"
If you just remove that attribute, the CSS would then load.
I've recently been working on a print stylesheet for a website, and I realized that I was at a loss for effective ways to tweak it. It's one thing to have a reload cycle for working on the on-screen layout:
change code
command-tab
reload
but that whole process gets much more arduous when you're trying to print:
change code
command-tab
reload
print
squint at print-preview image
open PDF in Preview for further inspection
Are there tools I'm missing out on here? Does WebKit's inspector have a "pretend this is paged media" checkbox? Is there some magic that Firebug (shudder) can do?
There is an option for that in Chrome's inspector.
Open the DevTools inspector (mac: Cmd + Shift + C , windows: Ctrl + Shift + C)
Click on the Toggle device mode icon , located on the upper left corner of the DevTools panel. (windows: Ctrl+Shift+M, mac: Cmd+Shift+M).
Click on the More overrides icon in the top right corner of the browser viewport to open the devtools drawer.
Then, select Media in the emulation drawer, and check the CSS media checkbox.
This should do the trick.
Update: The menus have changed in DevTools.
It can now be found by clicking on the "three-dots" menu in the top right corner > More Tools > Rendering Settings > Emulate media > print.
Source: Google DevTools page*
I'm assuming you want as much control of the printed window as possible without using a HTML to PDF approach... Use #media screen to debug - #media print for final css
Modern browsers can give you a quick visual for what's going to happen at print time using inches and pts in a #media query.
#media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
html { width:8.5in; }
body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
...
}
Once your browser is displaying "inches" you'll have a better idea of what to expect. This approach should all but end the print preview method. All printers will work with pt and in units, and using the #media technique will allow you to quickly see what's going to happen and adjust accordingly. Firebug (or equivalent) will absolutely expedite that process. When you've added your changes to #media, you've got all the code you need for a linked CSS file using media = "print" attribute - just copy/paste the #media screen rules to the referenced file.
Good luck. The web wasn't built for print. Creating a solution that delivers all of your content, styles equal to what's seen in the browser can be impossible at times. For instance, a fluid layout for a predominantly 1280 x 1024 audience doesn't always translate easily to a nice and neat 8.5 x 11 laser print.
W3C reference for purusal: http://www.w3.org/TR/css3-mediaqueries/
Chrome 48 you can debug print styles within the Rendering tab.
Click the menu icon top right of inspector and Rendering Settings.
Edit
For Chrome 58 the location has changed to Web Inspector > Menu > More Tools > Rendering
In Chrome v41, it's there, but in a slightly different spot.
There's an easy way to debug your print stylesheet without switching any media attribute in your HTML code (of course, as pointed out, it doesn't solve the width / pages issue):
Use Firefox + Web Developer extension.
In the Web Developer menu, choose CSS / Display CSS by Media Type / Print
Go back to Web Developer menu, choose Options / Persist Features
Now you are viewing the print CSS and you can reload your page indefinitely.
Once you're done, uncheck "Persist Features" and reload, you'll get the screen CSS again.
HTH.
Chrome's UI is different again as of v53.
I don't need to use this feature often, but whenever I do, it takes me forever to figure out where the Chrome team has moved it since the last time I burned cycles trying to track it down.
Notice it's the ... menu in Dev Tools pane not the ... menu in Chrome Browser pane.
Now scroll down in the Rendering section. It's often below the fold.
Following up to the answer by rflnogueira, the current Chrome settings (40.0.*) will look like below:
Just show the print stylesheet in your browser using media="screen" while debugging. The print preview view uses the same rendering engine as normal browsing mode so you can get accurate results using that.
2019 - Updated instructions
Open Chrome inspector
From Mac => option + command + i
From Windows => F12
Click on the little 3 dots, customize and control devTools
Select More Tools
Select Rendering
Scroll to the bottom to Emulate CSS Media
Select print from the down arrow
If you have a print function that rewrites the content of the page to a new window with your print style sheet referenced you'll get a much better idea of what its going to look like on paper , and you'll be able to debug it with the likes of firebug too.
Heres an example of how this can be done with JavaScript / jquery
$("#Print").click(function () {
var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
a.document.open("text/html");
a.document.write("<html><head>");
a.document.write('<link rel="stylesheet" href="css/style.css" />');
a.document.write('<link rel="stylesheet" href="css/print.css" />');
a.document.write("</head><body>");
a.document.write($('#Content').html());
a.document.write('</body></html>');
a.document.close();
a.print();
});
In Firefox (87.0), the "DOM and Style Inspector" has a toggle button for print media simulation.
One drawback is that it does not clearly delineate the page boundaries.
In DreamWeaver there is a toolbar that shows virtually any rendering option you want:
screen, print, handheld media, projection screen, tv media, desitn time style sheets, etc.
This is what I use especially because it: instantly shows a preview with 1 single press of a button.
I use macros to send keypress and mouse clicks repeatedly.
Under Windows, AutoHotKey is a great software and under OS X you can read about Automator sort of an alternative AHK for OsX.
Under Windows (replace Ctrl by Cmd under OS X) "Ctrl-s / switch to Fx window wherever it is in the list of windows opened / Ctrl-r" bound to 1 unused key avoids frustration from uninteresting tasks and will ultimately save my arms from RSI :)
I'm debugging a site that has problems with element positioning when printing (I have a separate print.css file linked by a link element with the media="print" attribute). This problem only occurs in IE7 and IE8.
What I'm looking for is a way to view the page using the print media type, but while still having IE8's developer tools available to view element details and edit in real-time, etc.
The function I'm looking for would be similar to the "Display CSS by Media Type" feature in Chris Pederick's Web Developer Extension for Firefox. (But this problem doesn't occur in firefox...nor in safari, or even in IE6.)
Why not just assign the screen attribute to the print stylesheet for your debugging session (and remove the screen version or swap the media attributes)?
What I have always done, is I have disabled (commented out the "screen" style sheet) and converted the media="print" style sheet to be media="screen". Only way I know how with out printing a bunch of test pages.
i've always used print preview, never had a problem with it. just open it up in IE; i'd target it with conditionals, but "hacks" work just as well.
you're seeing differences....what media attributes do your other link elements have? if you have one for all, switch it to type="screen, projection">