Por defecto, la altura y el ancho de una vista previa de PDF incrustada en un artículo varían según el navegador del lector. Puedes establecer un tamaño fijo consistente para todas las vistas previas en PDF usando CSS personalizado, para que la vista previa se muestre en las mismas dimensiones para todos los lectores.
Esta solución alternativa solo se aplica a artículos creados en el editor avanzado WYSIWYG. Las vistas previas en PDF en los artículos del editor Markdown no se ven afectadas.
Cuándo usar esta solución
- Tamaños de vista previa de PDF inconsistentes entre navegadores: los navegadores renderizan objetos PDF incrustados en diferentes dimensiones predeterminadas. Esta solución impone un tamaño constante.
- Controlar la prominencia de la vista previa: establece una altura mayor para que el PDF tenga más espacio vertical en la página, o un tamaño más pequeño para mantenerlo compacto junto al contenido circundante.
El selector object CSS apunta a todos <object> los elementos del sitio, no solo a las incrustaciones en PDF. Si tu base de conocimientos usa <object> etiquetas para otros tipos de contenido (como SVGs u otros medios embebidos), estos también serán redimensionados por este fragmento.
Referencia rápida
Sustituye 500px por los valores de altura y anchura que deseas.
object {
height: 500px !important;
width: 500px !important;
}
Cómo establecer la altura y el ancho de la vista previa del PDF
- En el portal de la Base de Conocimiento, ve a Configuración > sitio de la Base de Conocimientos > CSS y JavaScript personalizados.
- Selecciona la pestaña CSS y pega el siguiente fragmento:
object {
height: 500px !important;
width: 500px !important;
}
- Sustituye ambos
500pxvalores por la altura y anchura deseadas. - Haz clic en Guardar.
Resultado
Tras guardar el CSS, las vistas previas de PDF incrustadas se renderizan a las dimensiones fijas especificadas en todos los navegadores.
Alcance y cobertura
| Punto | Detalle |
|---|---|
| Alcance | Global, todos <object> los elementos en todos los artículos de editores WYSIWYG |
| Soporte para editores | Solo editor avanzado WYSIWYG. Los artículos de los editores de Markdown no se ven afectados |
| Tamaño de ejemplo por defecto | 500px × 500px, ajusta a tus necesidades de distribución |
| Altura y anchura | Configurado de forma independiente, puedes usar valores diferentes para cada uno |
| Valores porcentuales | Apoyado, úsalo width: 100% para rellenar el ancho del contenedor del artículo |
Mejores prácticas
- Establece el ancho a un porcentaje en lugar de un valor fijo en píxeles cuando sea posible:
width: 100%llena el contenedor del artículo y se adapta a diferentes tamaños de pantalla, mientras que un fijo500pxpuede desbordarse en pantallas estrechas o parecer demasiado pequeño en pantallas anchas. Usa valores fijos solo cuando necesites un tamaño preciso e invariable. - Establece la altura relativa al contenido de tu PDF: una altura demasiado pequeña obliga a los lectores a desplazarse dentro del panel de vista previa. Considera
600pxo700pxpara que un PDF estándar en formato A4 muestre al menos una página completa sin necesidad de desplazarse. - Prueba en móvil después de aplicar: las dimensiones fijas de píxeles no se reducen en pantallas pequeñas. Si tu base de conocimientos tiene un tráfico móvil significativo, comprueba que la vista previa del PDF no desborda el diseño del artículo en ventanas de visualización estrechas.
- Utiliza un selector más específico si es necesario: si el selector amplio
objectafecta a otro contenido incrustado en tu sitio, retitúyelo por uno más específico. Por ejemplo,article p objectlimita el alcance a<object>elementos dentro de los párrafos del artículo.