TeddyStudio does not work correctly with square labels

[Dualton]

Hi,

first of all thanks for all the great work!

I just startet using TeddyStudio and wanted to print my square labels.
I use Avery labels with 60 x 60 mm.

This is my setup:

Spacing and Margin are taken from the form obviously.

This is what the sheet looks like after I hit print:

Top and left margin are not applied, and spacing vertically and horizontally are not equal. The vertical spacing seems to be fine, while horizontal is too large.

In the print dialogue I can add margins for top and left(which shouldn't be the point to have to enter them separately, I guess?), which leaves me with this:

Now because the horizontal spacing is too big, it won't fit three labels anymore, but the form holds three per row.

Just for fun I made round labels with 60 mm and I get this:

Round 40mm gets this:

So issue does not seem to originate from square labels?

Tested on Mac with Firefox and Safari as well as Firefox on Windows.

Any idea what I see here?

Thanks

[henryk86]

In chrome it works fine. I did just test it. Outer margins are fine, inner spacing are also fine.

What are your printer settings? Borders must be set to default (Standard). if it is set to "no border" (Keine) or "Minimum" it does not work.

As the settings are done by pure css, the browser need to follow the css print options. browsers typically ignore those settings or overwrite them.

[henryk86]

firefox seems to ignore that part:

@media print {
@page {
size: var(--paper-size);
margin-top: var(--paper-margin-top);
margin-left: var(--paper-margin-left);
margin-bottom: 0;
margin-right: 0;
}

and also for the inner spacing:
...
gap: ${labelSpacingY} ${labelSpacingX},
...

[henryk86]

My recommendation (as this is a problem how browsers implement the css rules): Use Chrome for that.

There will be no solution for all browsers. As Chrome is used by ~80% of all internet users for now chrome is the mainly supported browser.

If you have a working solution which does not break chrome, does not need manual settings, then share it here. I would like to support all browsers.

[henryk86]

(i tested it on the latest develop branch - but there should be no differences related to teddystudio to 0.6.7 release version)

[Dualton]

When I set it to default, the borders are 0 as shown in first picture.

I was able to produce even spacings between pictures by making X half the size of Y.

[henryk86]

The problem is related to firefox and safari. They ignore css settings or interprete them in another way. Use chrome as said.