Tutoriales
Claude Opus 5.5: reparar el CSS de impresión de fichas
Usa Claude Opus 5.5 para identificar reglas propias de pantalla antes de reducir una ficha para imprimirla.
Usa Claude Opus 5.5 para identificar reglas propias de pantalla antes de reducir una ficha para imprimirla. La navegación fija, el contenido recortado y los bloques grandes pueden eliminar especificaciones o crear páginas vacías. Aporta el resultado impreso junto con HTML y CSS y pide un parche pequeño que conserve todos los datos del producto.
Asociar el síntoma a una regla
| Síntoma impreso | Revisar | Primera reparación que evaluar |
|---|---|---|
| Desaparecen filas inferiores | Altura fija y desbordamiento recortado | Permitir que crezca el contenedor |
| La navegación tapa contenido | Controles fijos o adhesivos de pantalla | Ocultar controles irrelevantes al imprimir |
| Gran hueco antes de una sección | Bloque indivisible y saltos forzados | Permitir fragmentación adecuada |
| Especificaciones demasiado pequeñas | Ancho de pantalla y escala general | Reorganizar columnas antes de reducir texto |
La guía de impresión de MDN explica hojas de impresión, `@media print` y ajustes mediante `@page`. Adaptan el documento al papel. Una captura estrecha no sustituye un documento de impresión generado.
Calcular el ancho antes de cambiar la letra
En una ficha hipotética, A4 mide 210 mm de ancho. Con márgenes de 15 mm a cada lado quedan 210 − 30 = 180 mm. US Letter mide 215,9 mm y deja 185,9 mm con los mismos márgenes. Son ejemplos calculados localmente, no resultados de Opus ni mediciones del área útil de tu impresora. El diálogo de impresión, las cabeceras y las limitaciones físicas pueden afectar al resultado.
Una sección de dos columnas puede necesitar una sola en papel. Conserva modelo, unidades, variantes, texto de garantía aportado por la empresa y referencias necesarias para interpretar la ficha. No ocultes una tabla incómoda para cumplir una página. Si el contenido necesita dos, una ficha legible de dos páginas puede ser la entrega correcta.
Consulta `break-inside` en la referencia de MDN. Pedir que un bloque no se divida no hace que uno enorme quepa. Mantén pies breves junto a sus imágenes y permite fragmentar secciones largas. Revisa primera página, tabla más larga y última página, no solo la portada.
Un prompt completo de reparación
Repara la impresión de esta ficha de producto. Entradas: HTML o estructura del componente, CSS de pantalla e impresión, PDF generado o capturas por página, papel, márgenes, escala y versión del navegador. Marca como desconocidos los ajustes ausentes. Es una tarea de diseño de impresión, no permiso para reescribir datos del producto.
Identifica alturas fijas, recortes de desbordamiento, controles fijos o adhesivos, anchos excesivos y saltos forzados o evitados. Vincula cada cambio con un síntoma visible y una ubicación del código. Calcula el ancho útil con las dimensiones aportadas. Prioriza cambios específicos de impresión y reorganización legible antes de reducir todas las fuentes.
Devuelve un parche mínimo y una lista de verificación anterior y posterior. Conserva cada especificación, unidad, variante y nota necesaria. Trata una página como preferencia salvo obligación expresa; señala lo que no cabe de forma legible. Incluye A4 y Letter si se requieren ambos. Distingue emulación de medios de impresión y PDF real; no afirmes aprobación sin inspeccionar las páginas generadas.La guía oficial de Opus sirve para definir contexto y restricciones de salida. El escenario propone un flujo, no afirma que una ejecución de Opus haya generado o aprobado un PDF.
Verificar el documento exportado
Genera el PDF con ajustes registrados y lee todas las páginas. Cuenta filas frente al original, revisa recortes y cabeceras superpuestas y confirma la asociación entre etiquetas e imágenes. Repite con cada papel requerido. La emulación facilita inspeccionar CSS, pero no establece la paginación final. Si importa la copia física, revisa también una impresión real; el PDF no certifica por sí solo el comportamiento de la impresora.
Preguntas habituales
**¿Uso `break-inside: avoid` en todas partes?** No. El exceso puede desplazar secciones grandes o dejar huecos. Aplícalo a grupos pequeños que deban permanecer unidos y revisa el resultado.
**¿«Ajustar a página» es la reparación?** Puede reducir la letra sin corregir pérdidas ni recortes. Diagnostica el diseño antes de depender de la escala.
**¿Es lo mismo que revisar especificaciones de PDF?** Ese flujo extrae y concilia datos de un PDF. Este repara el diseño HTML que crea el documento impreso.
Mantener unidos datos y recurso creativo
Lleva los datos y la imagen aprobados a Panelly Studio para crear la campaña y conserva la ficha como referencia. Si el documento recibido es contradictorio, empieza por la revisión de especificaciones PDF. No se afirma que Panelly tenga un exportador PDF ni integración con Opus.
