Printing a DIV smaller Options

[PapaGeek]

Hello, this is my first post on this website, but, as the name indicates, I programmed my first computer for the US Army in 1967.

I am in the process of creating a personal website for a 4 person gaming group. The game is Carcassonne and the website requires the creation of various “tile maps”. I use standard HTML tables to display each tile in 90 px squares, some of which are created in a div to allow game objects to be placed on the tiles.

Here is a link to the page that talks about how the maps are created with HTML and CSS:
Creating Tile Maps

The problem that I’m having is how to print the pages. The maps are created in pixels and the upper left corners of objects placed on tile is also defined in pixels. But the tile maps seem to overpower the printed pages, so my question is this:

Is there a way to create a “div class=tilemap” that has no CSS definition on the viewed pages, but on the:
link media="print" href="print.css" type="text/css" rel="stylesheet"

I need the CSS to print everything inside the div at a 50% size?

Thanks in advance for any help you can offer!

[Christian J]

Hello and welcome!

You shouldn't just reduce px values by some amount to make it fit on paper, since there's no reliable equivalent between screen and print media. Instead, use length units like in (inches) or mm (millimeters) in media print stylesheets to fit the paper format the user is printing on.

See also https://www.w3.org/TR/2011/REC-CSS2-2011060...ml#length-units (the section about anchor units and reference pixels). Mobile phone screen pixels complicate things even further, not mentioned on the linked page.

[PapaGeek]

Christian,

Thanks for the reply, but I don’t think that the unit of measurement is the issue for this problem. As I said, and as the linked page demonstrates, placing an object on the square tile will remain the major problem.

If you are only placing a tile, there is only one image in that square space.

When you are placing a tile and another object on top of it, both images are placed inside a “div.meeple { position: relative; left: 0; top: 0; }”. The jpg tile is placed first, then the smaller transparent gif file is placed on top of the tile with a style="top:35px; left:30px;" added to the img command.

The issue is that I want the images on a browser screen to be large enough for a visitor to examine, but I don’t want those images to be that large on the printed page because they will overpower the text.

I’ve tried using zoom, but nothing happens. I also tried a simple transform: scale(50%); it worked, on the actual images in the tile table, but the position of the image moved to an almost random location and the wrap around the tile table was for the full sized table, not the 50% version.

[Christian J]

The issue is that I want the images on a browser screen to be large enough for a visitor to examine, but I don’t want those images to be that large on the printed page because they will overpower the text.

For printing, can't you just use smaller length values in the print stylesheet (compared with the screen stylesheet)?

On screen the pictures look small to me, but I don't know how big they're meant to be (for whatever it's worth, on my particular screen 90px corresponds to about one inch). Browser zooming doesn't help a lot, the images just become too blurry then. Also, zooming affects the page's text font-size a lot, and text is already fairly large by default (24px).

I’ve tried using zoom, but nothing happens.

Do you mean the CSS zoom property? I wouldn't use that, also it seems it's not supported by Firefox: https://caniuse.com/?search=zoom

[PapaGeek]

The placement of gif meeples on the jpg square tiles requires an exact multi-layer relative position table cell. I just posted a test page to illustrate the problem that I am having with printing my pages. The URL is: http://www.papageek.com/car/zoom.htm

My first attempt was to use zoom, but it had no effect at all in Firefox. My second attempt, the one that is illustrated in the URL is “transform: scale(0.7);”. Not sure of other browsers, but if you display or print the page from Firefox, the table is now 70% of the original size, but it has also moved to the right and is over the text which is still indented according to the size of the original table!

If the shrinking and printing of a table is not possible in standard HTML and CSS, I do have another option. I can create all of my tile map tables in another file, Alt Print Screen, paste them into my Paint Shop Pro, copy and paste each tile map and save them as GIF files. I already have a JavaScript that I wrote to change the size of an image based on the width of the page it is being displayed or printed on.

[Christian J]

Here's an example of what I had in mind:

CODE

@media screen {
    div.meeple {
    position: relative;
    width: 200px;
    height: 200px;
    }

    img.mp {
    position: absolute;
    top:5px;
    left:30px;
    }    
}

@media print {
    div.meeple {
    position: relative;
    width: 25mm;
    height: 25mm;
    }

    img.mp {
    position: absolute;
    top:5mm;
    left:10mm;
    }
}

However, your use of inline styles for the "top" and "left" coordinates here becomes a problem, since inline styles don't let you specify media types:

CODE

<img class=mp src=rt/BlueM.gif style="top:40px; left:40px;">

Another way to apply that inline styling could be to use an individual CLASS name for every unique absolute positioned image, then you could style each such image's CLASS in the @screen and @print sections of the stylesheet.

I do have another option. I can create all of my tile map tables in another file, Alt Print Screen, paste them into my Paint Shop Pro, copy and paste each tile map and save them as GIF files.

That might work too. Using Window's Snipping Tool might speed up the process even more, since you can crop and save as an image file in one operation.

[PapaGeek]

Yes, the absolute placement of the “meeples” is the problem. The Red meeple at the top is being placed on the city at the top of that tile, the Blue meeple at the bottom center is being placed on the Monastery in the center of that tile, and the Blue meeple on the center row is first placed close to the open edge of that city, then moved toward the center of the same tile in the maps on the right!

It is interesting that the transform scale() did properly resize, rescale, the entire tile map table, but did not affect the wrapped text and also moved the table to the right!

I might play with it some more, but the fallback for my JavaScript function variableImageResizer() might be the final answer!

If anyone want to use my code, it is in my included VariableStyle.js file and short documentation is at the bottom of my http://www.papageek.com/car/Organize.htm page. A more detailed documentation is in the middle of my http://www.papageek.com/journal/features.htm page. The journal page has the same image display in two different sizes and as you play with the width of the page you can see how the images change size to adapt to the changing page width.