Por padrão, a altura e a largura de uma pré-visualização de PDF embutida em um artigo variam dependendo do navegador do leitor. Você pode definir um tamanho fixo consistente para todas as prévias do PDF usando o CSS Customizado, para que a pré-visualização seja renderizada nas mesmas dimensões para todos os leitores.
Essa solução alternativa se aplica apenas a artigos criados no editor Advanced WYSIWYG. Prévias em PDF nos artigos do editor Markdown não são afetadas.
Quando usar essa correção
- Tamanhos inconsistentes de pré-visualização de PDF entre navegadores: navegadores renderizam objetos PDF embutidos em diferentes dimensões padrão. Essa correção impõe um tamanho consistente.
- Controle da proeminência da pré-visualização: defina uma altura maior para dar mais espaço vertical ao PDF na página, ou um tamanho menor para mantê-lo compacto junto com o conteúdo ao redor.
O seletor object CSS mira todos <object> os elementos do site, não apenas embeds em PDF. Se sua base de conhecimento usar <object> tags para outros tipos de conteúdo (como SVGs ou outras mídias incorporadas), essas também serão redimensionadas por esse trecho.
Referência rápida
Substitua 500px pelos valores desejados de altura e largura.
object {
height: 500px !important;
width: 500px !important;
}
Como definir altura e largura da pré-visualização do PDF
- No portal da Base de Conhecimento, acesse Configurações > site da Base de Conhecimento > CSS & JavaScript Personalizado.
- Selecione a aba CSS e cole o seguinte trecho:
object {
height: 500px !important;
width: 500px !important;
}
- Substitua ambos
500pxos valores pela altura e largura desejadas. - Clique em Salvar.
Desfecho
Após salvar o CSS, prévias de PDF incorporadas são renderizadas nas dimensões fixas especificadas em todos os navegadores.
Escopo e cobertura
| Item | Detalhes |
|---|---|
| Escopo | Global, todos <object> os elementos em todos os artigos do editor WYSIWYG |
| Suporte ao editor | Apenas editor WYSIWYG avançado. Os artigos do editor Markdown não são afetados |
| Tamanho padrão do exemplo | 500px × 500px, ajuste às suas necessidades de layout |
| Altura e largura | Definido independentemente, você pode usar valores diferentes para cada um |
| Valores percentuais | Suportado, use width: 100% para preencher a largura do contêiner do artigo |
Melhores práticas
- Defina a largura para uma porcentagem em vez de um valor fixo em pixels quando possível:
width: 100%preenche o contêiner do artigo e se adapta a diferentes tamanhos de tela, enquanto um fixo500pxpode transbordar em telas estreitas ou parecer pequeno demais em telas largas. Use valores fixos apenas quando precisar de um tamanho preciso e inalterado. - Defina a altura em relação ao seu conteúdo do PDF: uma altura muito pequena força os leitores a rolarem dentro do painel de visualização. Considere
600pxou700pxpara que um PDF padrão em formato A4 mostre pelo menos uma página inteira sem rolar a página. - Teste no celular após aplicar: dimensões fixas dos pixels não diminuem em telas pequenas. Se sua base de conhecimento tiver tráfego móvel significativo, verifique se a pré-visualização do PDF não sobrecarrega o layout do artigo em janelas de visualização estreitas.
- Use um seletor mais específico, se necessário: se o seletor amplo
objectafetar outros conteúdos incorporados no seu site, substitua-o por um seletor mais direcionado. Por exemplo,article p objectlimita o escopo a<object>elementos dentro dos parágrafos do artigo.