Receipt height too big on thermal printer EPSON TM-T20II
But if i try to save as pdf the height is correct.
The css I am using
#media print {
#page {
size: 80mm 110mm; margin: 10mm;
}*, *: before, *: after {
box - sizing: border - box;
}
}
If I try to save as PDF is OK
If I try to print NOT OK
It seems that the size of the paper is the culprit
I am using roll paper 80mm. But on the printer paper size only I have 80x297 mm or 80x3276 mm
I have tried also
#media print {
html,body {
height: auto;
}
}
Any suggestion how to solve this?
With the help of #KJ I have solved this problem with the printer utility program (see comments above)
I also took a look at the forum what #KJ mentioned:
https://forum.sumatrapdfreader.org/t/print-page-using-command-line-print-settings-fit-remove-top-page-spaces/3866
Unfortunately in windows 10 this option (save paper) I can't find it anywhere. But if the printer utility have these settings option then it work (at least the printer we are talking about EPSON TM-T20II)
Still, the preview looks bad (as in the photos I put above) but when printing the printer removes the white spaces (before and after the text)
Related
A heading should have an image to the right of it only when a page is printed.
I declared following stylesheet:
#media print {
h1::after {
content: url( IMAGE_URL_HERE );
position: absolute;
top: 0;
right: 0;
}
}
The problem is that image won't appear in print preview (of any browser). If I, however, print preview dialog is closed and re-opened, image will then appear just fine.
You can try to reproduce it youself: http://jsbin.com/gevefivi
Is there anything I'm doing wrong or is it an expected behaviour?
UPDATE: I think it is related to race condition inside engine's print layout rendering because when I refer to a local image it is always displayed in Print Preview and is printed just fine.
UPDATE: Looks like print engine really doesn't wait before external resource in content: url() is loaded but generates PDF file for preview and that's why there is no image there if image fetch takes some time to finish. But it does send HTTP request and saves it locally for the next time. So that explains why it usually works fine when Print Preview is opened for the second time.
I tested it with following PHP file as an external resource:
<?php
sleep(5);
// Create a blank image and add some text
$im = imagecreatetruecolor(120, 20);
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 1, 5, 5, 'A Simple Text String', $text_color);
// Set the content type header - in this case image/jpeg
header('Content-Type: image/jpeg');
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
// Output the image
imagejpeg($im);
// Free up memory
imagedestroy($im);
It only returns an image in 5 seconds. To reproduce this issue make sure PHP file above is located on your local server or at worst in your local network. Refer to it in content: url() and open the Print Preview dialog. You'll not see the image. Close the dialog. Open the dialog and you'll still not see the image. Wait 2-3 seconds. Open it and you'll see the image as it is fetched and cached. If you remove the sleep(5); line you should see the image from the first time you open Print Preview dialog.
Still eager to know whether this is a bug or whether this is an expected behavior and if there is a working solution at the moment.
After hours of experimenting I came to conclusion that as of today web browsers just don't wait for any external resources specified in print-specific stylesheets to be fully downloaded before rendering the print-ready document.
So, seems like the only way to display external resources in print version of the page is to at least download them (either via html tags, screen stylesheets or javascript, doesn't really matter how) before user decides to print that page.
And, no, seems like this is not a bug, but rather a standard accepted by current major vendors.
Good point op,
I was in the same situation, I found a trick to preload image via CSS :
it is not the best way because I load images every time :/
If I take your code :
print.css
.h1:before {
content: url(IMAGE_URL_HERE);
}
screen.css
h1 {
background: url(IMAGE_URL_HERE) no-repeat -9999px -9999px;
//img not displayed but loaded
}
regards
Does anyone know of a tool out there that previews #page CSS rules? Failing that, is there something out there that I could use to print a document with full support for these rules?
http://www.w3.org/TR/CSS2/page.html
Opera comes closest. It supports everything except for the left/right page breaks (treats them as always) but still requires you to print to something to see them (can't see a live print preview).
Displaying Print preview
In Opera 12.16 (and all version prior to it, but unfortuntely not in Opera 16+), you can press Control + Shift + P to display Print preview, which will use print CSS media to display the page. If, for any reason, this shortcut does not work for you, you need to add it to keyboard shortcuts:
Open Opera Preferences (Control + F12)
Switch to Advanced tab → Shortcuts
Click Edit… button on the right side of Keyboard Setup part
Click New
Fill in "p ctrl shift" in first column (Input context and shortcuts) and "Print preview" in second (Actions)
OK, OK, refresh the page and try it now ;-)
Using #page CSS rules
… should be simple, everything works just fine in Opera (again, only 12.16-). Just remember to put #page CSS rules in #media print section of stylesheet, like this:
#media print {
#page {
margin: 0.7cm 0.85cm;
}
#page :first {
margin-top: 5cm;
}
#page :left {
margin-right: 2.5cm;
}
#page :right {
margin-left: 2.5cm;
}
}
I'm using these few rules to style my documents for better printing (notice extra margin on inner sides of pages, leaving space for binding). Hope it helps!
#page { #top-right { content: "Page " counter(page) " of " counter(pages); } }
This is the only way i found to display the page numbers as 'Page 5 of 10' for example. However it does not seem to be working. I tried it in a simple HTML page but it didn't work.
I want to display the page number any where in the page using plain html/css.
Did anyone succeed to make it work? If so, I appreciate your support.
You quote a (by and large correct) CSS snippet to create PDF- and print output ("paged media") from HTML input, but you say: "it does not seem to be working".
Then, two sentences further down, you say: "I want to display the page number any where in the page".
First, point two.
There is no way to put the page numbers into the HTML website itself. This feature is only for paged media, such as PDF or print output created from the HTML.
So, it's only for PDF or print output. But even there: there's also no way to put the page numbers on the PDF or print page at arbitrary positions. Your only choices are the top- and bottom -left/-right/-center margin boxes, nowhere on the main page.
Second, point one.
Now for putting the page number info into these spots where they are possible...
Since you do not elaborate what exactly does not work with your setup, let me give you a rundown:
Create a file my.css and put the following content into it (it's not the minimum required by your question, but adds a few more goodies for you to experiment with).
Also, at first I'll explain how to use it with PrinceXML.
#page { size: A4 landscape;
background: gray;
border: solid 1pt blue;
padding: 9pt;
margin: 18pt 18pt 18pt 18pt;
font-family: "Helvetica Narrow";
#top-left {
content: 'PrivateCopy';
color: red;
font-style: bolditalic;
}
#top {
content: string(doctitle);
}
#bottom-left {
content: 'My Super-Duper Manual';
font-style: bold;
}
#top-right {
content: "Page " counter(page) " of " counter(pages);
font-style: bold;
}
#bottom {
content: string(paratitle);
}
}
Save the file somewhere on your disk.
Now call the PrinceXML commandline and use -s my.css to apply the style sheet:
prince \
--verbose \
--javascript \
--style=/path/to/my.css \
http://stackoverflow.com/questions/12061835/css-page-counter \
--output=my-css-page-counter-question.pdf
(Obviously, you need to adapt your path to the my.css stylesheet file. But then...) Voila!, your Stackoverflow question in a PDF...
Of course you can extend my.css with many more features. And of course, you can use it for any conversion of HTML files, even local ones mixed with remote ones:
prince \
--verbose \
--javascript \
-s /path/to/my.css \
/home/nada.adly/Documents/title.html \
/home/nada.adly/Documents/chapter_1.html \
/home/nada.adly/Documents/chapter_2.html \
http://en.wikipedia.org/wiki/Cascading_Style_Sheets \
http://stackoverflow.com/questions/tagged/css \
-o random.pdf
Now for using CSS aside from and without PrinceXML, and for direct print output. (Of course you can always print the PDF generated by PrinceXML -- but maybe you don't want to use Prince at all?)
Again, you are not clear about the scope of your question:
Do you as a browser user want to get these page numbers into any website printout you may do?
Or do you as a webmaster responsible for a website want to make sure that these page numbers get in into the printouts your website visitors do from your content?
I'll not elaborate any of these two points here (since I may be completely missing your point), but...
...you should google for 'User Style Sheets' and for 'print.css' to find out where exactly to store this CSS code (because user style sheet locations are different from browser to browser);
...the CSS code is the same for any one of the two purposes (webmaster's style sheet or user style sheet).
This works only when HTML page is printed.
Try to print or save your HTML page as .xps . You will see the page numbers.
If you are using Prince, all will work fine and you can safely rely on the newest CSS3 standards which will allow you to produce print-quality PDFs.
If you are not using prince, you are out of luck. There are multiple options for working around, but none of the really do the job.
#page { anything }
is close to useless in the browser world when it comes to pagination. It seems fine for some margins in some browsers.
Another problem is the missing implementation of margin-box like "#top-right". None of the browser I tested even heard of them :-) Again, Prince knows them all.
Chrome doesn't use the whole #page approach and has a checkbox in the chrome-print dialog, which allows you to embed very crude pagination ("1/2"). It is not configurable in any way and completely ignores any page number related css.
Firefox is a much better candidate, at least there is a vaild workaround, but the problem here is, that the counters(pages) is always zero. So if you want to show the amount of total pages, this approach leads nowhere.
For browsers, it will utlimately boil down to the used HTML/CSS rendering engine. All libraries, stand-alone solutions and embedded browser rely on the underlying renderer and if the feature is not or badly support, the framework can'T do anything about it (like awesomoium, cefsharp etc.).
If you are printing using a browser, not many browsers (as of December 2013) support all of the CSS Paged Media specification. On the whole, you are usually pretty sure of getting page-breaks supported, but headers and footers don't work in any browser I have tested.
However, if I print using PrinceXML, it works fine:
"C:\...\prince.exe" http://localhost/Test/ -o C:\Pdf\prince.pdf
I get all my headers and footers, page numbers, dynamic content.
You'll find that more and more browsers / rendering engines will add full support as the specification matures.
I'm trying to get styles applied to a page only when the page is projected on the wall (by a projector, when someone is giving a presentation). As the moment, I can only get this in Opera in fullscreen mode.
Is there any way to get #media projection to take affect in other browsers? Also, is there a way to make it only apply to the projection, and not the laptop its projecting from?
If not, are there any viable workarounds to this? I am trying to create a slideshow in css, but also offer a "presenter view" with extra controls on the laptop of the presenter.
Any help in any surrounding area is much appreciated.
#media projection is an abstract concept. Practically projection can be 'on' only on devices of special kind with custom browser builds.
On desktop/laptop with projector attached as an external monitor there is no way for the browser to know what kind of additional monitor is used (if any) for viewing.
The only option for you is to put <button>"Fullscreen" mode</button> and to use something like:
$(button).click( function() { $(document.body).toggleClass("fullscreen") } );
And use styles:
body { ... }
body.fullsceen { ... }
If the projector's output is a different resolution than your laptop monitor, you can use a CSS media query to control the display of an extra element inside each slide, with notes for the presenter.
For example, let's say the laptop is 1024x768, the projected screen is 1280x800, and the notes are inside an element with the class name "notes" -- you'd do something like this:
.slide > .notes
{
display:none;
}
#media projection and (width:1280px)
{
.slide > .notes
{
display:block;
}
}
It would still require the projector and the laptop to be different screens (like using two monitors), but with that as a given, it totally works -- I've done this for real.
I use Opera in fullscreen mode whenever I give presentations; I also use a Mac OS X app called "Mira", which allows you to configure the Apple Remote so it sends keystrokes to applications. So mapping the "Fwd" and "Back" keys on the remote to "page-up" and "page-down" in Opera, I can use the remote to step-through the slides :-D
I am trying to print a PHP generated document in chrome, on the browser it looks fine Link to the page I want to print But my printer will not print any coloured backgrounds, can anyone offer any suggestions please? Can I do this with CSS?
You adjust in the browser, whether the background colors and images are printed. See your browsers printing options.
Google Chrome offers this feature starting from version 26 (march 2013).
Also starting from version 17, Chrome allows changing the background print behavior programmatically by using -webkit-print-color-adjust:exact; in the element CSS to print the background.
Gordon's answer is great, but for people whose CSS skills are rusty, here's a more complete example.
Put the following in your document's <head> section.
<style type="text/css">
#media print { body { -webkit-print-color-adjust: exact; } }
</style>
By the way, although Chrome/Chromium's print dialog now has a Background graphics checkbox, it only seems to work if you do not click Print using system dialog (observed with Chromium in Linux).
Chrome > Print (cmd P) > click More Settings > Options: check Background graphics