@jjlmoya/utils-audiovisual 1.4.0 → 1.6.0

package/src/tool/printQualityCalculator/component.astro

@@ -1,7 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components';
 import type { PrintQualityCalculatorUI } from './index';
-import './style.css';
 
 interface Props {
   ui: PrintQualityCalculatorUI;
@@ -10,7 +9,7 @@ interface Props {
 const { ui } = Astro.props;
 ---
 
-<div class="pq-wrapper">
+<div class="pq-wrapper" id="pq-root" data-ui={JSON.stringify(ui)}>
     <div
         id="drop-zone"
         class="pq-drop-zone pq-group"
@@ -81,10 +80,10 @@ const { ui } = Astro.props;
                 </div>
 
                 <div class="pq-presets">
-                    <button class="pq-preset-btn" data-val="72">Pantalla (72)</button>
-                    <button class="pq-preset-btn" data-val="150">Periódico (150)</button>
-                    <button class="pq-preset-btn pq-preset-active" data-val="300">Imprenta (300)</button>
-                    <button class="pq-preset-btn" data-val="600">Fine Art (600)</button>
+                    <button class="pq-preset-btn" data-val="72">{ui.dpiScreenLabel} (72)</button>
+                    <button class="pq-preset-btn" data-val="150">{ui.dpiNewspaperLabel} (150)</button>
+                    <button class="pq-preset-btn pq-preset-active" data-val="300">{ui.dpiPrintLabel} (300)</button>
+                    <button class="pq-preset-btn" data-val="600">{ui.dpiFineArtLabel} (600)</button>
                 </div>
             </div>
 
@@ -136,18 +135,41 @@ const { ui } = Astro.props;
     </div>
 </div>
 
-<script is:inline>
+<script>
+    const root = document.currentScript?.closest('[data-ui]') || document.getElementById('pq-root');
+    const ui = root ? JSON.parse(root.dataset.ui || '{}') : {};
+
     const PAPER_FORMATS = [
-        { name: "A6 (Postal)", w: 10.5, h: 14.8 },
-        { name: "A5 (Cuartilla)", w: 14.8, h: 21.0 },
-        { name: "A4 (Folio)", w: 21.0, h: 29.7 },
-        { name: "A3 (Doble Folio)", w: 29.7, h: 42.0 },
-        { name: "A2 (Poster Pequeño)", w: 42.0, h: 59.4 },
-        { name: "A1 (Poster Grande)", w: 59.4, h: 84.1 },
-        { name: "A0 (Plano)", w: 84.1, h: 118.9 },
+        { key: "postal", label: "A6", w: 10.5, h: 14.8 },
+        { key: "quartilla", label: "A5", w: 14.8, h: 21.0 },
+        { key: "folio", label: "A4", w: 21.0, h: 29.7 },
+        { key: "doubleFolio", label: "A3", w: 29.7, h: 42.0 },
+        { key: "smallPoster", label: "A2", w: 42.0, h: 59.4 },
+        { key: "largePoster", label: "A1", w: 59.4, h: 84.1 },
+        { key: "plane", label: "A0", w: 84.1, h: 118.9 },
     ];
 
     function initPQCalc() {
+        console.log('DEBUG: initPQCalc called');
+        console.log('DEBUG: ui object:', ui);
+        console.log('DEBUG: ui.formatPostal:', ui.formatPostal);
+
+        function getFormatName(format) {
+            const keyMap = {
+                postal: 'formatPostal',
+                quartilla: 'formatQuartilla',
+                folio: 'formatFolio',
+                doubleFolio: 'formatDoubleFolio',
+                smallPoster: 'formatSmallPoster',
+                largePoster: 'formatLargePoster',
+                plane: 'formatPlane'
+            };
+            const uiKey = keyMap[format.key];
+            const result = format.label + ' (' + (ui[uiKey] || format.key) + ')';
+            console.log('DEBUG: getFormatName for', format.key, '=', result, '(uiKey:', uiKey, ', ui[uiKey]:', ui[uiKey], ')');
+            return result;
+        }
+
         const dropZone = document.getElementById("drop-zone");
         const fileInput = document.getElementById("file-input");
         const resultsArea = document.getElementById("results-area");
@@ -210,7 +232,7 @@ const { ui } = Astro.props;
         });
 
         function processFile(file) {
-            if (!file.type.startsWith("image/")) { alert("Por favor selecciona una imagen válida"); return; }
+            if (!file.type.startsWith("image/")) { alert(ui.invalidImageError); return; }
             const reader = new FileReader();
             reader.onload = function(e) {
                 const img = new Image();
@@ -270,30 +292,32 @@ const { ui } = Astro.props;
         function updateQualityBadge(dpi) {
             if (!qualityText || !qualityDesc || !qualityBadge) return;
             if (dpi >= 300) {
-                qualityText.textContent = "Calidad Excelente";
-                qualityDesc.textContent = "Ideal para revistas de arte, libros de fotografía y visualización a menos de 30cm.";
+                qualityText.textContent = ui.qualityExcellent;
+                qualityDesc.textContent = ui.qualityExcellentDesc;
                 qualityBadge.className = "pq-quality-badge pq-badge-green";
             } else if (dpi >= 150) {
-                qualityText.textContent = "Calidad Buena";
-                qualityDesc.textContent = "Suficiente para pósters, periódicos y visualización a más de 50cm de distancia.";
+                qualityText.textContent = ui.qualityGood;
+                qualityDesc.textContent = ui.qualityGoodDesc;
                 qualityBadge.className = "pq-quality-badge pq-badge-yellow";
             } else if (dpi >= 72) {
-                qualityText.textContent = "Calidad Pantalla/Baja";
-                qualityDesc.textContent = "Adecuado solo para visualización digital o vallas publicitarias lejanas (>2 metros).";
+                qualityText.textContent = ui.qualityFair;
+                qualityDesc.textContent = ui.qualityFairDesc;
                 qualityBadge.className = "pq-quality-badge pq-badge-red";
             } else {
-                qualityText.textContent = "No Apto para impresión";
-                qualityDesc.textContent = "La imagen se verá pixelada. Usar solo para iconos pequeños o vistas muy lejanas.";
+                qualityText.textContent = ui.qualityPoor;
+                qualityDesc.textContent = ui.qualityPoorDesc;
                 qualityBadge.className = "pq-quality-badge pq-badge-slate";
             }
         }
 
         function updateFormatsTable(cmW, cmH) {
+            console.log('DEBUG: updateFormatsTable called, ui.supportedText:', ui.supportedText);
             if (!formatsTableBody) return;
             formatsTableBody.innerHTML = "";
             const imgMin = Math.min(cmW, cmH);
             const imgMax = Math.max(cmW, cmH);
             PAPER_FORMATS.forEach(function(paper) {
+                console.log('DEBUG: Processing paper format:', paper.key);
                 const paperMin = Math.min(paper.w, paper.h);
                 const paperMax = Math.max(paper.w, paper.h);
                 const covers = imgMin >= paperMin - 0.1 && imgMax >= paperMax - 0.1;
@@ -301,9 +325,9 @@ const { ui } = Astro.props;
                 const row = document.createElement("tr");
                 row.className = "pq-formats-row";
                 const statusHtml = covers
-                    ? '<span class="pq-status pq-status-ok"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg> Sí (Cubierto)</span>'
-                    : '<span class="pq-status pq-status-no"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"/></svg> No (' + coverage.toFixed(0) + '%)</span>';
-                row.innerHTML = '<td class="pq-td pq-td-name">' + paper.name + '</td><td class="pq-td pq-td-dim">' + paper.w + ' x ' + paper.h + '</td><td class="pq-td">' + statusHtml + '</td>';
+                    ? '<span class="pq-status pq-status-ok"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg> ' + ui.supportedText + '</span>'
+                    : '<span class="pq-status pq-status-no"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"/></svg> ' + ui.notSupportedPrefix + coverage.toFixed(0) + '%)</span>';
+                row.innerHTML = '<td class="pq-td pq-td-name">' + getFormatName(paper) + '</td><td class="pq-td pq-td-dim">' + paper.w + ' x ' + paper.h + '</td><td class="pq-td">' + statusHtml + '</td>';
                 formatsTableBody.appendChild(row);
             });
         }
@@ -316,3 +340,489 @@ const { ui } = Astro.props;
     }
     document.addEventListener("astro:page-load", initPQCalc);
 </script>
+
+<style>
+:root {
+    --pq-bg: #fff;
+    --pq-border: #cbd5e1;
+    --pq-primary: #6366f1;
+    --pq-primary-light: #e0e7ff;
+    --pq-accent: #4f46e5;
+}
+
+:global(.theme-dark) {
+    --pq-bg: #0f172a;
+    --pq-border: #334155;
+    --pq-primary: #6366f1;
+    --pq-primary-light: rgba(99, 102, 241, 0.2);
+    --pq-accent: #818cf8;
+}
+
+:global(.pq-wrapper) {
+    width: 100%;
+    max-width: 56rem;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding: 1rem;
+}
+
+.pq-hidden {
+  display: none;
+}
+
+:global(.pq-drop-zone) {
+    position: relative;
+    cursor: pointer;
+    border: 2px dashed var(--pq-border);
+    border-radius: 1rem;
+    padding: 3rem;
+    transition: border-color 0.3s, background 0.3s;
+}
+
+:global(.theme-dark .pq-drop-zone) {
+    border-color: var(--pq-border);
+}
+:global(.pq-drop-zone:hover),
+:global(.pq-drop-zone.pq-drop-active) {
+    border-color: var(--pq-primary);
+    background: rgba(99, 102, 241, 0.04);
+}
+:global(.pq-drop-inner) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 1rem;
+}
+:global(.pq-upload-icon-wrap) {
+    width: 5rem;
+    height: 5rem;
+    background: var(--pq-primary-light);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--pq-accent);
+    transition: transform 0.3s;
+}
+
+:global(.theme-dark .pq-upload-icon-wrap) {
+    background: rgba(99, 102, 241, 0.2);
+    color: #818cf8;
+}
+:global(.pq-drop-zone:hover .pq-upload-icon-wrap) {
+    transform: scale(1.1);
+}
+:global(.pq-drop-title) {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #0f172a;
+    margin: 0;
+}
+
+:global(.theme-dark .pq-drop-title) {
+    color: #f1f5f9;
+}
+:global(.pq-drop-sub) {
+    color: #64748b;
+    margin: 0.25rem 0 0;
+    font-size: 0.95rem;
+}
+:global(.pq-drop-overlay) {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(168,85,247,0.04));
+    border-radius: 1rem;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+}
+:global(.pq-drop-zone:hover .pq-drop-overlay) { opacity: 1; }
+
+:global(.pq-results) {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    animation: pq-fade-up 0.5s ease-out;
+}
+
+@keyframes pq-fade-up {
+    from {
+        opacity: 0;
+        transform: translateY(1.25rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+:global(.pq-file-card) {
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.75rem;
+    box-shadow: 0 4px 24px -8px rgba(0,0,0,0.1);
+    padding: 1.5rem;
+}
+
+:global(.theme-dark .pq-file-card) {
+    background: #0f172a;
+    border-color: #1e293b;
+}
+:global(.pq-file-left) {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+:global(.pq-preview-wrap) {
+    position: relative;
+    width: 8rem;
+    height: 8rem;
+    flex-shrink: 0;
+}
+:global(.pq-preview-img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 0.5rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+:global(.pq-file-name) {
+    font-weight: 700;
+    color: #0f172a;
+    font-size: 1rem;
+    margin: 0 0 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 20rem;
+}
+
+:global(.theme-dark .pq-file-name) {
+    color: #f1f5f9;
+}
+:global(.pq-file-meta) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+:global(.pq-meta-item) {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.85rem;
+    color: #64748b;
+}
+
+:global(.pq-main-grid) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+}
+
+@media (max-width: 640px) {
+    .pq-main-grid { grid-template-columns: 1fr; }
+}
+
+:global(.pq-config-panel) {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+}
+
+:global(.theme-dark .pq-config-panel) {
+    background: rgba(30, 41, 59, 0.5);
+    border-color: var(--pq-border);
+}
+:global(.pq-config-label) {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #475569;
+    margin-bottom: 1rem;
+}
+
+:global(.theme-dark .pq-config-label) {
+    color: #94a3b8;
+}
+:global(.pq-slider) {
+    width: 100%;
+    height: 0.5rem;
+    background: #e2e8f0;
+    border-radius: 0.5rem;
+    appearance: none;
+    cursor: pointer;
+    accent-color: #6366f1;
+    margin-bottom: 1rem;
+}
+
+:global(.theme-dark .pq-slider) {
+    background: #334155;
+}
+:global(.pq-dpi-row) {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+:global(.pq-dpi-number) {
+    width: 6rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.5rem;
+    background: #fff;
+    color: #0f172a;
+    font-size: 1rem;
+    font-weight: 700;
+    text-align: center;
+    padding: 0.4rem 0.5rem;
+    outline: none;
+}
+:global(.pq-dpi-number:focus) { border-color: var(--pq-primary); }
+
+:global(.theme-dark .pq-dpi-number) {
+    background: #0f172a;
+    border-color: var(--pq-border);
+    color: #f1f5f9;
+}
+:global(.pq-dpi-label) {
+    font-size: 0.875rem;
+    color: #64748b;
+}
+:global(.pq-presets) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+:global(.pq-preset-btn) {
+    padding: 0.25rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: 999px;
+    background: #e2e8f0;
+    color: #475569;
+    border: none;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+}
+:global(.pq-preset-btn:hover) { background: #cbd5e1; }
+
+:global(.theme-dark .pq-preset-btn) {
+    background: #334155;
+    color: #94a3b8;
+}
+
+:global(.theme-dark .pq-preset-btn:hover) {
+    background: #475569;
+}
+:global(.pq-preset-active) {
+    background: var(--pq-primary-light);
+    color: #4338ca;
+    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
+}
+
+:global(.theme-dark .pq-preset-active) {
+    background: rgba(99, 102, 241, 0.3);
+    color: #a5b4fc;
+}
+
+:global(.pq-output-panel) {
+    display: flex;
+}
+:global(.pq-output-gradient) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background: linear-gradient(135deg, #6366f1, #a855f7);
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    color: #fff;
+    box-shadow: 0 10px 40px -10px rgba(99,102,241,0.4);
+    position: relative;
+    overflow: hidden;
+}
+:global(.pq-output-blur-bg) {
+    position: absolute;
+    top: 0; right: 0;
+    width: 8rem; height: 8rem;
+    background: rgba(255,255,255,0.1);
+    border-radius: 50%;
+    filter: blur(2rem);
+    transform: translate(2rem, -2rem);
+    pointer-events: none;
+}
+:global(.pq-output-subtitle) {
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: rgba(224,231,255,0.9);
+    margin: 0 0 0.5rem;
+    position: relative;
+}
+:global(.pq-output-size) {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    font-size: 2.5rem;
+    font-weight: 900;
+    margin-bottom: 0.25rem;
+    position: relative;
+}
+:global(.pq-size-sep) {
+    font-size: 1.5rem;
+    opacity: 0.5;
+}
+:global(.pq-size-unit) {
+    font-size: 1.5rem;
+}
+:global(.pq-output-inches) {
+    color: rgba(199, 210, 254, 0.8);
+    font-size: 0.875rem;
+    margin-bottom: 1.5rem;
+    position: relative;
+}
+:global(.pq-quality-section) {
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255,255,255,0.2);
+    position: relative;
+}
+:global(.pq-quality-badge) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    font-size: 0.875rem;
+    font-weight: 700;
+    background: rgba(255,255,255,0.2);
+    backdrop-filter: blur(4px);
+    margin-bottom: 0.5rem;
+}
+:global(.pq-badge-green) {
+    background: rgba(16, 185, 129, 0.25);
+    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.3);
+}
+
+:global(.pq-badge-yellow) {
+    background: rgba(234, 179, 8, 0.25);
+    box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.3);
+}
+
+:global(.pq-badge-red) {
+    background: rgba(239, 68, 68, 0.25);
+    box-shadow: 0 0 0 1px rgba(252, 165, 165, 0.3);
+}
+
+:global(.pq-badge-slate) {
+    background: rgba(100, 116, 139, 0.25);
+    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.3);
+}
+:global(.pq-quality-desc) {
+    font-size: 0.875rem;
+    color: rgba(199,210,254,0.9);
+    line-height: 1.4;
+    margin: 0;
+}
+
+:global(.pq-formats-card) {
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+}
+
+:global(.theme-dark .pq-formats-card) {
+    background: #0f172a;
+    border-color: #1e293b;
+}
+:global(.pq-formats-title) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 700;
+    font-size: 1rem;
+    color: #0f172a;
+    margin: 0 0 1rem;
+}
+
+:global(.theme-dark .pq-formats-title) {
+    color: #f1f5f9;
+}
+:global(.pq-formats-scroll) {
+    overflow-x: auto;
+}
+:global(.pq-formats-table) {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+}
+:global(.pq-formats-table th) {
+    text-align: left;
+    padding: 0.75rem 1rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #475569;
+    background: #f8fafc;
+}
+
+:global(.theme-dark .pq-formats-table th) {
+    background: #1e293b;
+    color: #94a3b8;
+}
+:global(.pq-formats-row) {
+    border-bottom: 1px solid #f1f5f9;
+    transition: background 0.15s;
+}
+
+:global(.pq-formats-row:hover) {
+    background: #f8fafc;
+}
+
+:global(.theme-dark .pq-formats-row) {
+    border-color: #1e293b;
+}
+
+:global(.theme-dark .pq-formats-row:hover) {
+    background: #1e293b;
+}
+:global(.pq-td) {
+    padding: 0.75rem 1rem;
+    color: #475569;
+}
+
+:global(.theme-dark .pq-td) {
+    color: #94a3b8;
+}
+:global(.pq-td-name) {
+    font-weight: 600;
+    color: #0f172a;
+}
+
+:global(.theme-dark .pq-td-name) {
+    color: #f1f5f9;
+}
+:global(.pq-status) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-weight: 600;
+    font-size: 0.8rem;
+}
+:global(.pq-status-ok) { color: #16a34a; }
+:global(.pq-status-no) { color: #d97706; }
+
+:global(.theme-dark .pq-status-ok) {
+    color: #4ade80;
+}
+
+:global(.theme-dark .pq-status-no) {
+    color: #fbbf24;
+}
+</style>

package/src/tool/printQualityCalculator/i18n/en.ts

@@ -14,7 +14,7 @@ const ui: PrintQualityCalculatorUI = {
     maxPrintTitle: "Maximum Print Size",
     standardFormatsTitle: "Supported Standard Formats",
     formatColumn: "Format",
-    measureColumn: "Measurements (cm)",
+    measureColumn: "Measurements",
     supportColumn: "Supported?",
     qualityExcellent: "Excellent Quality",
     qualityGood: "Good Quality",
@@ -26,6 +26,20 @@ const ui: PrintQualityCalculatorUI = {
     qualityPoorDesc: "The image will look pixelated. Printing is not recommended.",
     unitCm: "cm",
     unitInches: "in",
+    dpiScreenLabel: "Screen",
+    dpiNewspaperLabel: "Newspaper",
+    dpiPrintLabel: "Printing",
+    dpiFineArtLabel: "Fine Art",
+    formatPostal: "Postcard",
+    formatQuartilla: "Quartilla",
+    formatFolio: "Folio",
+    formatDoubleFolio: "Double Folio",
+    formatSmallPoster: "Small Poster",
+    formatLargePoster: "Large Poster",
+    formatPlane: "Plane",
+    supportedText: "Yes (Covered)",
+    notSupportedPrefix: "No (",
+    invalidImageError: "Please select a valid image",
     faqTitle: "Frequently Asked Questions",
     bibliographyTitle: "References"
 };

package/src/tool/printQualityCalculator/i18n/es.ts

@@ -14,7 +14,7 @@ const ui: PrintQualityCalculatorUI = {
     maxPrintTitle: "Tamaño Máximo de Impresión",
     standardFormatsTitle: "Formatos Estándar Soportados",
     formatColumn: "Formato",
-    measureColumn: "Medidas (cm)",
+    measureColumn: "Medidas",
     supportColumn: "¿Soportado?",
     qualityExcellent: "Calidad Excelente",
     qualityGood: "Calidad Buena",
@@ -25,7 +25,21 @@ const ui: PrintQualityCalculatorUI = {
     qualityFairDesc: "Adecuado para visualización digital o vallas lejanas.",
     qualityPoorDesc: "La imagen se verá pixelada. No se recomienda imprimir.",
     unitCm: "cm",
-    unitInches: "pulg"
+    unitInches: "pulg",
+    dpiScreenLabel: "Pantalla",
+    dpiNewspaperLabel: "Periódico",
+    dpiPrintLabel: "Imprenta",
+    dpiFineArtLabel: "Fine Art",
+    formatPostal: "Postal",
+    formatQuartilla: "Cuartilla",
+    formatFolio: "Folio",
+    formatDoubleFolio: "Doble Folio",
+    formatSmallPoster: "Poster Pequeño",
+    formatLargePoster: "Poster Grande",
+    formatPlane: "Plano",
+    supportedText: "Sí (Cubierto)",
+    notSupportedPrefix: "No (",
+    invalidImageError: "Por favor selecciona una imagen válida"
 };
 
 const faq: PrintQualityCalculatorLocaleContent['faq'] = [