What I'm trying to do is create an area on a page that users can interact with, which corresponds perfectly in size to the typical size of a piece of paper (A4), so that users are aware of exactly what the print will look like as they're constructing the printable area (before accessing print preview). I do not want to and should not have to use #media print at all.
It seems as if the perimeter of the printable area of the page corresponds to the actual browser window (window.innerWidth, etc) only sometimes, whereas at other times elements that are positioned closer to the center of the page are partially excluded from the printable area or even excluded altogether.
I can't seem to find any rhyme or reason to this. I've tried looking on SO and found one question in relation to printable areas but for a different language/context. Tried looking on Google. Nothing.
[edit] Now that I think about it, it's behaving kind of like viewport/viewbox cropping/zooming.
Anybody know how would one go about finding the actual printable area of a webpage and or the perimeter thereof?
Example
An element with the position right: 0 appears on the far right side of the page and will be included in the print, but ironically that very same element ends up becoming partially excluded when it is dragged closer to the center of the screen.
...
<body>
<div id="l"></div>
<div id="r"></div>
<textarea draggable="true" id="textarea"></textarea>
</body>
...
#media print {
#l, #r {
width: 50%;
height: 100%;
position: absolute;
top: 0;
}
#l {
background: blue;
}
#r {
left: 50%;
background: orange;
}
#textarea {
right: 0;
}
}
However, if I drag the image closer to the center of the page, ironically it becomes partially excluded from the printable area...
Often times, a special style sheet that is designed solely for purposes of printing is associated with a web page. This style sheet can literally include/exclude anything.
Here's some reading on setting up a print style sheet.
Related
I am trying to use heatmap.js to create a heatmap, following the instructions from this post: How to render heatmap.js on an image?
All of my code is identical to the one at that example. Just a simple generated heatmap with a background image added in CSS. Please see this screenshot from that post :
But I want to display an image on top of the heatmap, so a foreground image instead of a background image.
I have tried using plotly, but unfortunately this is intended to run on an ESP-32, with SPIFFS, so I am extremely limited to space and processing power. Even after I used the partial bundle to get the file size down small enough, the web page just simply wouldn't load. I'd really prefer to use heatmap.js if possible anyways, since it has a much smaller footprint.
To further explain what I'm trying to do, I want to put this half-transparent image on top of the generated heatmap:
So the final desired result would look like this, displaying only the heatmap inside the transparent part of the foreground image:
All the code I am using is identical to the previously mentioned post, just a simple generated heatmap with a background image added in CSS. I also used this documentation here to build an example heatmap, https://www.patrick-wied.at/static/heatmapjs/docs.html
Is there any easy way to do this using HTML/CSS/JavaScript?
I don't know heatmap so cannot test this, but from the info given in the question if the placing of a background image works as shown then the placing of a foreground image should be possible.
What we do is style an after pseudo element on #heatmap, give it the correct dimensions, put it above the heatmap element using z-index and give it the required image as its background. The image should then appear to be sitting above the heatmap element - I assume obscuring part of it.
You need to make sure that the heatmap element is positioned so its after pseudo element knows where to position itself in relation.
#heatmap {
width: as you want
height: as you want
background-image: if you still want it to have one
any other styling you want heatmap to have
position: relative;
}
#heatmap::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* make sure this is big enough - higher than the heatmap's z-index */
background-image: url(the image you want to be in the foreground);
background-size: cover; /* or contain depending on what you want */
background-repeat: no-repeat;
background-position: center center; /*or wherever you want it */
}
}
What I'm trying to achieve is to print generated labels in a very fixed format. The paper they will be printed on is self-adhesive and pre-cut, so the restriction would be to print them in exact positions on the page.
To achieve this purpose, I'm making use of the window.print() function in javascript in a separate window that contains only the grid-like structure.
The problem is that I can't seem to be able to override the margins. I would have expected top and left to be 0, but they are set to something somehow. I would like to have control over what the printable margins are.
This is the most promising version I've tried:
#page {
width: 210mm;
height: 297mm;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
}
I've also tried setting negative margins, on the #page element and to also wrap the divs in a parent div and set negative margins on that and they were ignored, got exactly the result in the image.
I also don't have hidden elements on the page. The window that is opened contains just a parent div with all the little rectangular divs in it.
The inner divs themselves have no margin and no margin is set up in the browser Print prompt.
I'm also open to alternatives. I was going for a front-end solution, but my backend is PHP. I wouldn't find a server-side solution adverse, but I need to make sure I will be able to have a 3 mm margin on the right, between the label and the edge of the paper.
I'm trying to rotate a wide table (work schedule, see example image below) for printing purposes. The reason I'm doing this is because I want the table to stretch over multiple pages so when you print it on paper you can put the different sheets together and get 1 decent sized, readable table/schedule.
Now the problem I'm having isn't the rotating itself, it's the number of pages when trying to print the table. Instead of expanding the table to the next page it's cut-off so you'll only see the top part.
Now Google Chrome does the printing just fine, it spreads the table across 2 or 3 pages like I want it to. I'm having trouble however getting the same result in Firefox or IE.
I'm using the CSS transform:rotate method to rotate the body/schedule and get the wanted result in my browser (see below).
transform:rotate(90deg);
-ms-transform:rotate(90eg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
I've tried adding margins, paddings to the table but it only moves the table around the page instead of expanding it to the next page. Adding overflow (body *{ overflow:visible !important; }) only scaled the body down so it'll fit on 1 page.
Is there any way to print this wide table on multiple pages so it's still readable for FF & IE?
Thanks in advance.
Example image (usually there's text in the time-blocks):
(Normal printing in landscape mode won't do because the text becomes too small to read.)
When you use a css rotation the actual dimensions don't change.
So if you have a block that is 100 x 20 px and you rotate it. The browser will still see the 100 x 20 px block, while you see a 20 x 100 block. Adding margins and padding's wont change this, you will need to modify the height and width.
I guess the simplest method would be to add an invisible div that has the same height as the tables width and vice versa. You can use javascript for this.
#media print {
#page {
size: landscape;
}
div.landscape-parent {
width: 585mm;
height: 450mm;
}
div.landscape {
width: 585mm;
height: 450mm;
transform: rotate(270deg) translate(-585mm, 0);
transform-origin: 0 0;
align-content: end;
}
div.content {
padding: 10mm 10mm 10mm 10mm;
}
I'll preface this question by asserting that I'm no "Web Guy". I have little to no experience programming in JavaScript, or any other Web-based programming technology aside from XML and some related XSLT; go easy on me!
What I suppose I'm trying to create is something akin to an imagemap: I would like to place an image on a webpage then, based on information I've received back from a hardware chassis, populate the various "hardware slots" in the image of the chassis with an image of the piece of hardware that is in that location.
I'd like to create these points and have them relative to the image, not the browser window, so that I could create the image of the chassis anywhere and still place the images of the cards over their appropriate slots.
Is there a mechanism for using vars to hold the offsets, and then placing the other images, using those var offsets relative to the chassis image? Is there a different way to do this sort of thing?
You could simply put them at the correct positions using CSS absolute/relative positioning.
Another solution would be using a <canvas> to actually draw an image consisting of multiple other images.
I agree with ThiefMaster, and a sketch for some markup would be something like this.
<div class="chassi">
<div id="slot1" class="slot"></div>
<div id="slot2" class="slot"></div>
// more slots if needed
</div>
<style>
.chassi
{
position: relative;
background: url(/path/to/your/image.png);
}
.slot
{
position:absolute;
}
#slot1
{
left: 20px;
top: 20px;
}
#slot2
{
left: 20px;
top: 60px;
}
</style>
Then using javascript to load the slot data, and adding images to the "slot"-divs.
Its called image mapping and you can read about it here
I'm looking for a way to disable the copying of a specific area of text when you use Ctrl + C, etc. Whether I have to write the text a different way or not.
http://gyazo.com/721a0a5b5af173beb1ad3305633beafb.png
Above is what this is for. It's a syntax highlighter I have been working on (3 languages supported so far). When the user selects ANY text in any way, I don't want the line numbers to be copied.
I can't think of a way to display line numbers, without them actually being there.
As long as the line numbers and the source code are mixed together, this is going to be tough to prevent programmatically, if not impossible.
The ideal way would be having the source code in an actual container of its own.
Open a document inspector and look at how Github do it, for example: https://github.com/jbrisbin/riak-exchange/blob/master/Makefile
they have a separate <pre> element containing the line numbers, and a <table> cell containing the code. (I assume selecting is a reason why they use tables here, but I do not know for sure.)
Give this a try...
Demo: http://jsfiddle.net/wdm954/UD8Dq/7
I layered the div so the code div is on top and the numbers are behind. When you copy and paste you should just get the code.
.lines {
position: absolute;
width: 80%;
color: #666;
}
.lines pre:nth-child(odd) {
background-color: #EEE;
}
.code {
position: absolute;
z-index: 2;
padding-left: 5%;
width: 80%;
}
<div class="box">
<div class="lines">
<pre>1</pre>
<pre>2</pre>
<pre>3</pre>
<pre>4</pre>
</div>
<div class="code">
<pre>
code
code
code
code
</pre>
</div>
</div>
Setting user-select, -moz-user-select, and -webkit-user-select to none might work. For IE, you will need to handle onselectstart and return false.
This will prevent people from selecting the text, but I don't know what happens when it's beside other text that you attempt to copy.
I know that this question is three years old, but with HTML5 you can store line numbers in a data attributes and use CSS2 to display the text. This should prevent line numbers from being copied.
HTML
<span data-line-number='1' class='line'></span>
CSS
.line:before {
content: attr(data-line-number);
}