help mimicking an Avery label

[bbrendon]

I'm trying to mimic an Avery Label for my printer. I'm pretty close but the rest isn't coming together. I think my main issue is the top, bottom, left, right margins and the space down the center. Also, I'm not really sure the labels are 2x4 like the red boxes would have me believe. I don't suppose someone could give me a few hints?

The below creates this: https://i.imgur.com/OFsykvp.png
What I'm going for is this : https://i.imgur.com/k3DFVvn.png

@page {
  width: 8.5in;
  height: 11in;
  padding-top: 12.5mm;
  padding-left: 3mm;
}

img {
  height: 90%;
  display: inline-block;
  vertical-align: middle;
  image-rendering: pixelated;
}
.text {
  font-family: Verdana;
  font-weight: bold;
  vertical-align: middle;
  display: inline-block;
  font-size: 30px;
}
.item {
  width: 4in;
  height: 2in;
  text-align: center;
  border: 1px solid red;
}

<img src="{{label_tools.qr_code(url)}}"/>
<span class='text'>
    BOX <br/>
    LABEL <br/>
    # {{ label_num }} <br/>
</span>

[bbrendon]

Also, I just realized the page padding is causing the page to be 8.74 x 11.97 instead of 8.5x11 . Using margin's on the page have no effect.

[veghp]

I'm not sure what would be the best approach, but if you subtract the padding from the US page size (216x279), then it creates a pdf with the correct size.

@page {
  width: 213mm;
  height: 267mm;
  padding-top: 12mm;
  padding-left: 3mm;
}

I checked with Inkscape and the width of the boxes is correct for me. Note that the 4x1 px width of the red borders adds to the width of the boxes.

I don't know at the moment how to set the width between the boxes, but this is related to the div tag, also mentioned in issue #6 and this discussion. The relevant part of the code is in print_template.html.

[bbrendon]

Thanks for the tips!

I think this works by increasing the size of the empty space character which increases the center column width. Bit of a hack.

body {
  font-size: 30px;
}