Basic printed page layout using HTML and CSS

Question

I'm creating a web page to be printed. It could wrap to 2 pages. There has to be a small, black square in each corner for a scanner to use for reference. I'm pretty sure I just need divs for the 4 black squares in the corners and one more div for main content area. How do I position the 4 corner squares so that each of them is in its own corner of the printed page with the content div filling the center? The center content should be inside the corner squares left to right, but could overlap with them top to bottom.

EDIT: I uploaded a sample image, but it's not showing.

EDIT: Here's what I have so far:

http://jsfiddle.net/7DjTf/

<html>
    <head>
        <title>Printable Form</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div id="UpperLeftScanningIndicator"></div>
        <div id="UpperRightScanningIndicator"></div>
        <div id="Content">Here is some content.<br /><br /><br /><br />Here is some more.</div>
        <div id="LowerLeftScanningIndicator"></div>
        <div id="LowerRightScanningIndicator"></div>
    </body>
</html>

#Content {
    border: solid 1px black;
    width:90%;
    margin-left:auto;
    margin-right:auto;
}

#UpperLeftScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: left;
}

#UpperRightScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: right;
}

#LowerLeftScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: left;
    position:absolute;
    bottom:20px;
}

#LowerRightScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: right;
    position:absolute;
    bottom:20px;
    right:500px;
}

I'm not sure how to get the lower right block to go over to the right. Float would work, but using "absolute" seemed to break that. Note: your browser window needs to be pretty wide for this sample to look any good. Also, I'm not sure how to make those black squares appear on every page no matter if there is only one page or if there is a second page printed.

Here's a sample of how the page should look

score 2 · Accepted Answer · edited May 23 '17 at 11:46

2

its actually pretty easy. I've updated your fiddle - http://jsfiddle.net/avrahamcool/7DjTf/1/

you have to use the right attribute correctly.

I would recommend using the same technique for all indicators. so use position: absolute; with all of them, and set the top/bottom left/right accordingly also, no need for repeating the style. use class instead. like this: http://jsfiddle.net/avrahamcool/7DjTf/2/

Update: apparently, the @page CSS3 pseudo elements rules are not implemented yet in the browsers, so we'll have to fall back to JavaScript. (if it was, you'll have a perfect solution like this article explains)

first: because background-color is not printed, I switched to img tag. second: the first solution had only 4 indicators (2 at the beginning & 2 at the end), and you want 4 indicator for each printed page.

so here is a new solution: http://jsfiddle.net/avrahamcool/7DjTf/5/

the idea is to add dynamic indicators as the content grows. the indicators should be visible only when printing. the part that visualize the indicator is the .indicator rule and he's located in @print rule.

so far, I didn't manage to write a code that 'knows' how many pages will be printed.. so the for loop run a constant number of times (and I don't know how to solve this part)

inside the loop: I add 4 dynamic indicators (2 in the left and 2 in the right) each time, the offset should grow in such way that the next indicators would be in the next page..

If you know how many pages you're gonna have, its a perfect solution for you.

Notice: this offset between pages is different when printing from different browsers. I've tested my solution in Chrome. (IE & FF requires a little tuning);

edited May 23 '17 at 11:46

Community

1
1

answered Sep 09 '13 at 18:17

avrahamcool

13,888
5
47
58

Ah! Very nice! Yes. That's much better. Can you tell me if those black squares will automatically print out if the content area forces a second page to print out? – birdus Sep 09 '13 at 18:28
the 2 top one will be printed in the first page, the two lower one in the second page. – avrahamcool Sep 09 '13 at 18:30
Okay. To clarify, every page must have all four black sqaures in the corners. Those are scanning references, so to scan each page, the scanner will look for those black squares. – birdus Sep 09 '13 at 18:32
1

you will have to use the @page selector. read more [here](http://www.tutorialspoint.com/css/css_paged_media.htm) – avrahamcool Sep 09 '13 at 18:34
Actually. its a bit of a problem. because I forgot that background color wont show on print. you will have to use an img instead. let me put together a working solution. – avrahamcool Sep 09 '13 at 18:50
I've just discovered this. Sounds like this might help: -webkit-print-color-adjust: exact;. Also, maybe just give clear instructions about printer settings. Not ideal, though. – birdus Sep 09 '13 at 19:28
By the way, I don't think images will solve the problem, either. "Print Background" (or whatever) will still have to be ticked in the print dialog box (I think). – birdus Sep 09 '13 at 19:35

score 0 · Answer 2 · answered Sep 09 '13 at 18:20

0

if you want right bottom icon to set in right you can use this

#LowerRightScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: right;
    position:absolute;
    bottom:20px;
    right:20px;
}

answered Sep 09 '13 at 18:20

Ankit Agrawal

6,034
6
25
49

Basic printed page layout using HTML and CSS

2 Answers2