Как подогнать простую HTML-страницу для печати на принтере этикеток TSC TTP-244 Pro (40х60 мм)? ⇐ Html

[Anonymous]

Я работаю над печатью простой HTML-страницы с помощью принтера этикеток TSC TTP-244 Pro. Размер этикетки 40х60 мм. Я уже правильно установил размер страницы в настройках принтера, но когда я печатаю страницу, ее содержимое выходит за пределы и распределяется по нескольким этикеткам (3 страницы) вместо того, чтобы аккуратно вписаться в одну этикетку.
Я хочу добиться следующего:

• Содержимое должно идеально вписываться в размер этикетки 40x60 мм.
• При необходимости размер шрифта и поля должны автоматически подстраиваться под размер метка.
• Не должно быть нежелательных разрывов страниц; весь контент должен печататься на одной этикетке.
• Решение должно работать с помощью настроек CSS или HTML.

Я пробовал использовать базовый CSS, но не уверен, как правильно структурировать макет печати для этикеток такого маленького размера.

Код: Выделить всё

Label Printing

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

@page {
size: 40mm 60mm;
margin: 0;
}

body {
width: 40mm;
height: 60mm;
padding: 0.5mm;
font-size: 4.5px;
line-height: 1;
overflow: hidden;
}

.header {
text-align: center;
margin-bottom: 0.5mm;
font-weight: bold;
}

.company-info {
display: flex;
justify-content: space-between;
margin-bottom: 0.5mm;
}

.company-name {
font-family: 'Monotype Corsiva', cursive;
font-size: 5px;
}

.company-meta {
font-size: 3.5px;
line-height: 1.2;
}

.divider {
border-top: 0.5px solid #000;
margin: 0.5mm 0;
}

.details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.3mm;
margin-bottom: 0.5mm;
}

.detail-pair {
display: flex;
white-space: nowrap;
}

.detail-label {
font-weight: bold;
margin-right: 0.5mm;
}

.detail-value {
white-space: normal;
word-break: break-all;
max-width: 18mm;
}

.parts-title {
font-weight: bold;
text-align: center;
margin-bottom: 0.3mm;
font-size: 4.5px;
}

.parts-table {
width: 100%;
border-collapse: collapse;
font-size: 4px;
}

.parts-table th,
.parts-table td {
padding: 0.2mm;
border: none;
}

.parts-table td {
word-break: break-all;
max-width: 18mm;
}

.page-break {
page-break-after:  always;
}





OUTWARD DETAILS


XXXXXXXXXXXXXXXXXXXX®
ISO 9001:2015 Certified
XXXXXXXXXXXX



Packing Date:
{{ date('d-m-Y H:i', strtotime($boxDetails[0]->package_date)) }}





Party:
{{ $salesRegister[0]->customer_name }}

Inv No:
{{ $salesRegister[0]->document_no }}

Box:
{{ $boxNo }}/{{ $totalBoxes }}

Date:
{{ \Carbon\Carbon::parse($salesRegister[0]->posting_date)->format('d-m-Y') }}

Weight:
{{ $boxDetails[0]->weight }}{{ $boxDetails[0]->parts_nlr_measure }}



Parts Summary



#
INV No.
Description
Qty



@foreach ($salesRegister as $index => $register)
@if ($register->box_no == $boxNo)

*
{{ $register->inv_no }}
{{ $register->search_description }}
{{ $register->qty }}

@endif
@endforeach



@if (!$loop->last)

@endif
@endforeach


window.onload = function() {
setTimeout(function() {
window.print();
setTimeout(function() {
window.close();
}, 100);
}, 200);
};

Что я хочу:

• Исправить CSS, чтобы обеспечить печать в пределах 40 x 60 мм без переполнения.
• Руководство по передовому опыту разработки веб-страниц для термопринтеров или принтеров этикеток, таких как TSC TTP-244 Pro.

Что я сделал на данный момент:

• Установил размер бумаги для принтера 40x60 мм в настройках принтера.
• Пытался уменьшить размер шрифта вручную.

Содержимое по-прежнему перетекает на следующий ярлык.

Подробнее здесь: https://stackoverflow.com/questions/795 ... -printer-4