Probleme beim Einstellen und zentrieren des Druckerbereichs im Printfenster

[kaysiebke]

Guten Tag und danke im Voraus an die Gemeinde, ich habe leider ein Problem den Druckerbereich einzustellen und habe schon diverse Möglichkeiten ausprobiert. In der Desktopansicht ist alles ok und auch gut zentriert, aber im Print Fenster bekomme ich den Inhalt nicht auf eine Seite bzw. mir wird eine lehre Seite angezeigt. Da ich nicht so ein guter Erklärbär bin, hier mal ein ausschnitt aus meiner CSS so wie zwei bilder und ein Link zu meinem HTML

zum Link geht es hir

/* Druckansicht */
@media print {
  .info-box {
    margin: 0 auto; /* Zentrales Margin */
    text-align: center; /* Text innerhalb der Box zentrieren */
  }

  .container {
    transform: scale(0.8); /* Verkleinert den Container-Inhalt */
    transform-origin: top left; /* Setzt den Ursprung der Transformation */
  }

  .container {
    margin: 10px; /* Verringert den äußeren Abstand */
    padding: 5px; /* Verringert den inneren Abstand */
  }

  .container {
    width: 100mm;
    height: 35mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Ausblenden von nicht gewünschten Elementen im Druck */
  input,
  textarea,
  select,
  button,
  label,
  .hidden,
  .button-container,
  #btnPrint,
  .autoreset-container,
  .logo-container {
    display: none !important;
  }

  @page {
    size: 100mm 35mm;
    margin: 0;
  }
}

 

[MrMurphy]

Grundsätzlich:

Bei der Druckausgabe weisen die Browser heutzutage die größten Unterschiede auf. Wenn du ein print-Layout erstellen willst solltest du das Ergebnis in möglichst vielen unterschiedlichen Browsern und mit unterschiedlichen Druckern testen.

Beim Ausdruck können die Besucher im Druckmenü je nach Betriebssystem und Browser viele Einstellungen selbst treffen oder ändern. Einfach mal in unterschiedlichen Browsern die Druckausgabe aufrufen und auf die Einstellungsmöglichkeiten achten.

Webseiten sind äußerst flexibel und unendlich groß. Papier hat immer eine bestimmte Größe. Die Schriftgröße in Browsern und beim Ausdruck funktioniert unterschiedlich.

Viele Drucker haben mit aktuellen CSS-Angaben wie Flexbox oder Grid bei der Druckausgabe noch massive Schwierigkeiten. Das hat bei der Weiterentwicklung der Browser offensichtlich überhaupt keine Priorität (meine Erfahrung und Meinung). Also am besten so weit wie möglich weglassen.

Soll heißen: Die Druckausgabe einer Webseite ist auch heute noch ein Abenteuer und erfordert viel ausprobieren. "Ich mach ein paar Angaben für die Druckausgabe" funktioniert nur bei sehr einfach gestrickten Webseiten.

Zu deinem Beispiel:

Bei dem fällt mir auf, das du die CSS-Angaben bis zu Beginn der Druckangaben keinem Ausgabemedium zugeordnet hast, die Browser also standardmäßíg "@media all" verwenden. Alle CSS-Angaben wirken also auf die Druckausgabe, was die Browser gar nicht mögen.

"@media print" heißt, das diese Angaben nur für die Druckausgabe gelten, damit werden andere CSS-Angaben, die keinem Medium zugeordnet sind, aber nicht ausgeschlossen.

Es hat sich bewährt, die Bildschirm- und die Druckausgabe komplett zu trennen und für die Druckausgabe die dabei üblichen Einheiten zu verwenden, was du nur teilweise mit mm umgesetzt hast. Also als Beispiel mm, cm, inch oder auch pt für die Schriftgrößen. Mit Einheiten wie px, rem und ähnlichen haben Druckausgabe und Drucker nur wenig am Hut.

Ich würde zunächst die CSS-Angaben für den Bildschirm- und die Druckausgabe komplett trennen.

 

[kaysiebke]

das das ganze unterschiedlich angezeigt wird, ist mir bewusst, mit den Browsern und dies habe ich auch berücksichtigt und getestet, aber in allen Browser, die ich habe, ist das Problem ein und dasselbe. Hier liegt das Problem eher wahrscheinlich am Aufbau meinem HTML, aber ich kann die
Ursache nicht finden oder identifizieren. Können Sie mir ein beichpiel geben wie ich Bildschirm- und die Druckausgabe terne voneinander im css, damit ich eine ungefähre Vorstellung habe wie sie es meinen

hir ist mal meine css, ich hoffe, ich hab nicht vergessen

.info-box,
.info-box * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.info-box {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--info-box-bg);
border-radius: 4px;
color: var(--info-box-text-color);
min-height: 100px;
height: 180px;
width: 100%;
overflow-wrap: break-word;
white-space: normal;
text-overflow: ellipsis;
word-wrap: break-word;
box-sizing: border-box;
}

#label-sku {
display: block;
position: relative;
top: 23px; /* Falls du die SKU näher an die Oberseite bringen möchtest */
margin: 0;
}

#barcode {
display: block;
position: relative;
top: 5px; /* Verschiebt den Barcode näher an die SKU */
}

#label-size-color {
display: block;
position: relative;
top: -1px; /* Verschiebt Größe | Farbe näher an den Barcode */
margin: 0;
}

#label-description {
display: block;
position: relative;
top: -10px; /* Verschiebt die Beschreibung näher an Größe | Farbe */
margin: 0;
}

.info-box {
display: flex;
flex-direction: column;
gap: 2px; /* Minimaler Abstand zwischen den Elementen */
line-height: 1;
}

.info-box span {
margin: 0;
}
.svg.barcode {
width: 100%;
max-width: 200px;
height: 180px;
display: block;
}

#label-sku {
font-size: 24px;
font-weight: 700;
}

#label-description {
font-size: 14px;
font-weight: 200;
}

#label-size-color {
font-size: 18px;
font-weight: 200;
}

/* Container für Farbe und Größe */
.color-size-container {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}

.color-size-container > div {
flex: 1;
margin-right: 10px;


/* Print-Stile */
@media print {
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: white;
color: black;
}

input,
textarea,
select,
button,
label,
.hidden,
.button-container,
#btnPrint,
#btnAutoReset,
.logo {
display: none;
}

@page {
size: 100mm 35mm;
margin: 0;
}