diff --git a/pages/barcode_pos_script.php b/pages/barcode_pos_script.php
index df434fe..7b4cf13 100644
--- a/pages/barcode_pos_script.php
+++ b/pages/barcode_pos_script.php
@@ -88,16 +88,75 @@
return lines.join('');
}
+ function applyBarcodePreviewNameStyles(container, compact) {
+ if (!container) {
+ return;
+ }
+
+ const arabicLine = container.querySelector('.label-name-ar');
+ const englishLine = container.querySelector('.label-name-en');
+
+ container.style.width = '100%';
+ container.style.maxWidth = '100%';
+ container.style.lineHeight = '1.05';
+ container.style.marginBottom = '0';
+
+ if (arabicLine) {
+ arabicLine.style.display = 'block';
+ arabicLine.style.fontWeight = '700';
+ arabicLine.style.fontSize = compact ? '0.98rem' : '1.10rem';
+ arabicLine.style.direction = 'rtl';
+ arabicLine.style.whiteSpace = 'nowrap';
+ arabicLine.style.overflow = 'hidden';
+ arabicLine.style.textOverflow = 'ellipsis';
+ }
+
+ if (englishLine) {
+ englishLine.style.display = 'block';
+ englishLine.style.fontWeight = '600';
+ englishLine.style.fontSize = compact ? '0.84rem' : '0.95rem';
+ englishLine.style.whiteSpace = 'nowrap';
+ englishLine.style.overflow = 'hidden';
+ englishLine.style.textOverflow = 'ellipsis';
+ }
+ }
+
+ function applyBarcodePreviewDateStyles(container, compact) {
+ if (!container) {
+ return;
+ }
+
+ container.style.width = '100%';
+ container.style.maxWidth = '240px';
+ container.style.direction = 'ltr';
+ container.style.textAlign = 'center';
+ container.style.lineHeight = '1.05';
+ container.style.fontWeight = '600';
+ container.style.fontSize = compact ? '0.80rem' : '0.92rem';
+ container.style.marginTop = '0';
+
+ const row = container.querySelector('.label-date-row');
+ if (row) {
+ row.style.gap = compact ? '10px' : '14px';
+ }
+
+ container.querySelectorAll('.label-date-item').forEach((item) => {
+ item.style.gap = compact ? '4px' : '6px';
+ });
+ }
+
function buildSingleBarcodeSvgMarkup(sku, labelWidthMm, labelHeightMm) {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const scale = getSingleBarcodeScale(labelWidthMm, labelHeightMm);
JsBarcode(svg, sku, getSingleBarcodeOptions(sku, labelWidthMm, labelHeightMm));
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+ svg.setAttribute('shape-rendering', 'crispEdges');
svg.style.width = Math.round(scale * 100) + '%';
svg.style.maxWidth = '100%';
svg.style.height = 'auto';
svg.style.display = 'block';
svg.style.margin = '0 auto';
+ svg.style.shapeRendering = 'crispEdges';
return svg.outerHTML;
}
@@ -111,6 +170,7 @@
const width = dimensions.width;
const height = dimensions.height;
const scale = getSingleBarcodeScale(width, height);
+ const compact = width <= 40 || height <= 25;
const nameContainer = document.getElementById('barcodeLabelName');
const priceContainer = document.getElementById('barcodeLabelPrice');
const previewContainer = document.getElementById('barcodeContainer');
@@ -121,19 +181,34 @@
}
nameContainer.innerHTML = buildSingleBarcodeNameHtml(label.nameAr, label.nameEn);
+ applyBarcodePreviewNameStyles(nameContainer, compact);
+
priceContainer.textContent = label.price ? 'OMR ' + label.price : '';
- previewContainer.style.width = Math.min(Math.max(width * 3.6, 170), 280) + 'px';
+ priceContainer.style.display = label.price ? 'block' : 'none';
+ priceContainer.style.fontWeight = '700';
+ priceContainer.style.fontSize = compact ? '0.98rem' : '1.08rem';
+ priceContainer.style.lineHeight = '1';
+ priceContainer.style.marginTop = '0';
+
+ previewContainer.style.display = 'flex';
+ previewContainer.style.flexDirection = 'column';
+ previewContainer.style.alignItems = 'center';
+ previewContainer.style.justifyContent = 'center';
+ previewContainer.style.gap = compact ? '4px' : '6px';
+ previewContainer.style.width = Math.min(Math.max(width * 3.8, 185), 310) + 'px';
previewContainer.style.maxWidth = '100%';
- previewContainer.style.padding = height <= 25 ? '12px' : '16px';
+ previewContainer.style.padding = height <= 25 ? '10px 12px' : '12px 14px';
svg.innerHTML = '';
JsBarcode(svg, label.sku, getSingleBarcodeOptions(label.sku, width, height));
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+ svg.setAttribute('shape-rendering', 'crispEdges');
svg.style.width = Math.round(scale * 100) + '%';
svg.style.maxWidth = '100%';
svg.style.height = 'auto';
svg.style.display = 'block';
svg.style.margin = '0 auto';
+ svg.style.shapeRendering = 'crispEdges';
}
function initSingleBarcodePreviewControls() {
@@ -219,19 +294,19 @@
page-break-after: always;
display: flex;
flex-direction: column;
- justify-content: space-between;
+ justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
box-sizing: border-box;
- padding: 1.5mm 2mm;
- gap: 0.75mm;
+ padding: 1.1mm 1.8mm 1.2mm;
+ gap: 0.45mm;
}
.label-container:last-child { page-break-after: avoid; }
.label-name {
width: 100%;
max-width: 100%;
- line-height: 1.05;
+ line-height: 1.02;
}
.label-name-ar,
.label-name-en {
@@ -242,38 +317,41 @@
}
.label-name-ar {
font-weight: 700;
- font-size: 11px;
+ font-size: 12px;
direction: rtl;
}
- .label-name-en { font-size: 9px; }
+ .label-name-en {
+ font-size: 10px;
+ font-weight: 600;
+ }
.label-price {
- font-size: 11px;
+ font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.label-compact {
- padding: 1mm 1.5mm;
- gap: 0.5mm;
+ padding: 0.85mm 1.3mm 0.95mm;
+ gap: 0.35mm;
}
- .label-compact .label-name-ar { font-size: 10px; }
- .label-compact .label-name-en { font-size: 8px; }
- .label-compact .label-price { font-size: 10px; }
+ .label-compact .label-name-ar { font-size: 10.5px; }
+ .label-compact .label-name-en { font-size: 8.75px; }
+ .label-compact .label-price { font-size: 10.5px; }
.barcode-wrap {
width: 100%;
- flex: 1;
- min-height: 0;
display: flex;
align-items: center;
justify-content: center;
- padding: 0 1.5mm;
- overflow: hidden;
+ padding: 0 1mm;
+ margin: 0.15mm 0;
+ overflow: visible;
}
.barcode-wrap svg {
width: 100%;
height: auto;
display: block;
overflow: visible;
+ shape-rendering: crispEdges;
}
@@ -307,8 +385,10 @@
const expiryText = formatBarcodeLabelDate(expiryDate) || '--/--/----';
return `
-
P:${escapeBarcodeLabelHtml(productionText)}
-
E:${escapeBarcodeLabelHtml(expiryText)}
+
+ P:${escapeBarcodeLabelHtml(productionText)}
+ E:${escapeBarcodeLabelHtml(expiryText)}
+
`;
}
@@ -325,28 +405,28 @@
function getDatedBarcodeScale(labelWidthMm, labelHeightMm) {
if (labelWidthMm <= 32 || labelHeightMm <= 24) {
- return 0.88;
+ return 0.96;
}
if (labelWidthMm <= 40 || labelHeightMm <= 30) {
- return 0.84;
+ return 0.95;
}
if (labelWidthMm <= 50 || labelHeightMm <= 35) {
- return 0.80;
+ return 0.94;
}
- return 0.76;
+ return 0.90;
}
function getDatedBarcodeOptions(sku, labelWidthMm, labelHeightMm) {
const baseOptions = getSingleBarcodeOptions(sku, labelWidthMm, labelHeightMm);
const skuLength = String(sku || '').length;
- const showValue = labelHeightMm >= 42 && labelWidthMm >= 50 && skuLength <= 16;
+ const showValue = labelHeightMm >= 46 && labelWidthMm >= 50 && skuLength <= 16;
return {
...baseOptions,
displayValue: showValue,
- fontSize: showValue ? 9 : 8,
+ fontSize: showValue ? 10 : 8,
textMargin: showValue ? 2 : 0,
- height: Math.max(Math.round(baseOptions.height * (showValue ? 0.78 : 0.86)), 24),
+ height: Math.max(Math.round(baseOptions.height * (showValue ? 0.88 : 0.96)), 28),
margin: Math.max(baseOptions.margin, 6),
marginBottom: showValue ? 1 : 0
};
@@ -357,11 +437,13 @@
const scale = getDatedBarcodeScale(labelWidthMm, labelHeightMm);
JsBarcode(svg, sku, getDatedBarcodeOptions(sku, labelWidthMm, labelHeightMm));
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+ svg.setAttribute('shape-rendering', 'crispEdges');
svg.style.width = Math.round(scale * 100) + '%';
svg.style.maxWidth = '100%';
svg.style.height = 'auto';
svg.style.display = 'block';
svg.style.margin = '0 auto';
+ svg.style.shapeRendering = 'crispEdges';
return svg.outerHTML;
}
@@ -375,6 +457,7 @@
const width = dimensions.width;
const height = dimensions.height;
const scale = getDatedBarcodeScale(width, height);
+ const compact = width <= 40 || height <= 30;
const nameContainer = document.getElementById('datedBarcodeLabelName');
const datesContainer = document.getElementById('datedBarcodeLabelDates');
const priceContainer = document.getElementById('datedBarcodeLabelPrice');
@@ -388,26 +471,42 @@
}
nameContainer.innerHTML = buildSingleBarcodeNameHtml(label.nameAr, label.nameEn);
+ applyBarcodePreviewNameStyles(nameContainer, compact);
+
datesContainer.innerHTML = buildDatedBarcodeDateRowsHtml(
productionInput ? productionInput.value : '',
expiryInput ? expiryInput.value : ''
);
+ applyBarcodePreviewDateStyles(datesContainer, compact);
+
if (priceContainer) {
priceContainer.textContent = label.price ? 'OMR ' + label.price : '';
priceContainer.style.display = label.price ? 'block' : 'none';
+ priceContainer.style.fontWeight = '700';
+ priceContainer.style.fontSize = compact ? '0.90rem' : '1.02rem';
+ priceContainer.style.lineHeight = '1';
+ priceContainer.style.marginTop = '0';
}
- previewContainer.style.width = Math.min(Math.max(width * 3.8, 180), 300) + 'px';
+
+ previewContainer.style.display = 'flex';
+ previewContainer.style.flexDirection = 'column';
+ previewContainer.style.alignItems = 'center';
+ previewContainer.style.justifyContent = 'center';
+ previewContainer.style.gap = compact ? '4px' : '5px';
+ previewContainer.style.width = Math.min(Math.max(width * 4.0, 190), 320) + 'px';
previewContainer.style.maxWidth = '100%';
- previewContainer.style.padding = height <= 30 ? '10px 12px' : '12px 14px';
+ previewContainer.style.padding = height <= 30 ? '10px 11px' : '11px 13px';
svg.innerHTML = '';
JsBarcode(svg, label.sku, getDatedBarcodeOptions(label.sku, width, height));
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+ svg.setAttribute('shape-rendering', 'crispEdges');
svg.style.width = Math.round(scale * 100) + '%';
svg.style.maxWidth = '100%';
svg.style.height = 'auto';
svg.style.display = 'block';
svg.style.margin = '0 auto';
+ svg.style.shapeRendering = 'crispEdges';
}
function initDatedBarcodePreviewControls() {
@@ -497,8 +596,10 @@
${nameHtml ? `
${nameHtml}
` : ''}
${svg}
-
${dateHtml}
- ${priceHtml}
+
`;
}
@@ -516,7 +617,7 @@
page-break-after: always;
display: flex;
flex-direction: column;
- justify-content: space-between;
+ justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
@@ -524,13 +625,13 @@
}
.label-container:last-child { page-break-after: avoid; }
.dated-label {
- padding: 1.2mm 2mm;
- gap: 0.6mm;
+ padding: 0.95mm 1.45mm 1mm;
+ gap: 0.3mm;
}
.label-name {
width: 100%;
max-width: 100%;
- line-height: 1.05;
+ line-height: 1.02;
}
.label-name-ar,
.label-name-en {
@@ -541,57 +642,84 @@
}
.label-name-ar {
font-weight: 700;
- font-size: 10px;
+ font-size: 11.5px;
direction: rtl;
}
- .label-name-en { font-size: 8px; }
- .label-dates {
+ .label-name-en {
+ font-size: 9.5px;
+ font-weight: 600;
+ }
+ .label-meta {
width: 100%;
display: flex;
flex-direction: column;
- align-items: flex-start;
- gap: 0.35mm;
- font-size: 8px;
- line-height: 1.05;
+ align-items: center;
+ justify-content: center;
+ gap: 0.25mm;
+ margin-top: 0.1mm;
+ }
+ .label-dates {
+ --label-date-row-gap: 1.2mm;
+ --label-date-item-gap: 0.55mm;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ direction: ltr;
+ font-size: 9px;
+ font-weight: 600;
+ line-height: 1;
}
.label-date-row {
- display: flex;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ white-space: nowrap;
+ max-width: 100%;
+ }
+ .label-date-item {
+ display: inline-flex;
align-items: center;
- gap: 1mm;
white-space: nowrap;
}
.label-date-key {
font-weight: 700;
}
.label-price {
- font-size: 9px;
+ font-size: 10px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.label-compact {
- padding: 0.9mm 1.4mm;
- gap: 0.45mm;
+ padding: 0.75mm 1.05mm 0.8mm;
+ gap: 0.25mm;
}
- .label-compact .label-name-ar { font-size: 9px; }
- .label-compact .label-name-en { font-size: 7px; }
- .label-compact .label-dates { font-size: 7px; }
- .label-compact .label-price { font-size: 8px; }
+ .label-compact .label-name-ar { font-size: 10px; }
+ .label-compact .label-name-en { font-size: 8.3px; }
+ .label-compact .label-meta { gap: 0.2mm; }
+ .label-compact .label-dates {
+ --label-date-row-gap: 0.85mm;
+ --label-date-item-gap: 0.35mm;
+ font-size: 7.8px;
+ }
+ .label-compact .label-price { font-size: 8.8px; }
.barcode-wrap {
width: 100%;
- flex: 1;
- min-height: 0;
display: flex;
align-items: center;
justify-content: center;
- padding: 0 1.2mm;
- overflow: hidden;
+ padding: 0 0.7mm;
+ margin: 0.15mm 0;
+ overflow: visible;
}
.barcode-wrap svg {
width: 100%;
height: auto;
display: block;
overflow: visible;
+ shape-rendering: crispEdges;
}