0

Preciso apresentar textos com cor de fundo alterados e em fontes distintas dentro de uma tag de renderização de html, mas não é apresentado o valor correto.

Tag utilizada:

<p:document
    xmlns:p="http://jboss.com/products/seam/pdf"
    creator="#{messages['report.creator']}"
    margins="0 0 0 0">
    <p:html value="#{relatorioAction.textoEmHtml}"/>
</p:document>

Texto para renderização:

<p style="text-align: center;">
 <span style="font-family: &quot;comic sans ms&quot;, sans-serif; color: #ff0000;">
  <span style="background-color: #99cc00;">
   <strong>
    <em>
     <u>Texto em cor vermelho sublinhado com cor de fundo verde oliva</u>
    </em>
   </strong>
  </span>
 </span>
</p>
<p style="text-align: center;">
 <strong>
  <em>
   <u>
    <span style="color: #ffa500;">
     <span style="background-color: #000000;">
      Texto em cor laranja com cor de fundo preto
     </span>
    </span>
   </u>
  </em>
 </strong>
</p>

Tentando imprimir isso, o pdf estará as duas linhas em arial e sem background color.

inserir a descrição da imagem aqui

Existe alguma configuração que eu estou deixando de lado e que atua sobre essa impressão?

10
  • 1
    Olá gustavo, não sei se é seu caso porque vc esta falando de pdf, mas eu já vi um problema assim no HTML, e a solução era alterar o css color-adjust algo como: *{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; } Commented 14/08/2020 às 19:18
  • Relacionada: Como imprimir cores de fundo em HTML com CSS Commented 14/08/2020 às 19:22
  • 1
    Não funcionou, @IcaroMartins Commented 14/08/2020 às 20:25
  • 1
    O componente que está usando para gerar o PDF é o iText? Se não me engano o ajuste da cor dum paragrafo deve ser feita dentro do ambiente Java pois o iText não suporta configuração background em parágrafo vindos de HTML/CSS/Javascript. Commented 20/08/2020 às 22:35
  • 1
    Não vou dar uma resposta pois faz muito tempo que não uso Java e muita coisa não mais me lembro, mas se não me engano essa limitação pode ser contornada se colocar o parágrafo dentro de um <div> ou então dentro de uma célula de uma tabela, ao invés de tentar colorir o background do parágrafo colora o <div> ou <td> dependendo de qual abordagem usar. Teste pois não tenho certeza. Commented 21/08/2020 às 12:30

1 Resposta 1

7
+500

Eu ia escrever como comentário por não ter um ambiente de teste, mas está ficando grande então vai como resposta mesmo sem poder testar...

Primeiro sobre as fonts, existe algo que se chama Web Safe Font, em resumo o seu usuário precisa ter a fonte instalada no Sistema Operacional para ver a fonte corretamente. Veja a imagem abaixo para entender melhor. Uma fonte de referência https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts

inserir a descrição da imagem aqui

Depois existem variações do nome para a mesma font-family, então se resguarde e inclua as duas variações por exemplo como abaixo:

font-family: "Comic Sans MS", "Comic Sans", cursive;

Depois eu reparei que vc não colocou o caractere de Aspas " " no nome da fonte e isso não está dentro do formato correto de escrita do CSS, portanto não use &quot; e use apenas aspas duplas " ou aspas simples '. No caso como vc está usando style direto na tag o ideal seria deixar assim " ' ' " ou o contrário ' " " '

style="font-family: 'Comic Sans MS', 'Comic Sans', cursive;"

inserir a descrição da imagem aqui


Sobre o background img e color

Na impressão vc pode ver nessas duas respostas que dei algumas alternativas para fazer isso! Mas basicamente para imagem vc pode usar dentro do @print um display:block na tag <img>, pois img como background-image não funciona, e para cor vc pode usar box-shadow com o atributo inset para jogar a cor "para dentro" do elemento.

Seguem as outras respostas que já fiz sobre cor e imagem na hora de impressão. Recomendo que leia integralmente as respostas, aqui está só o resumos do resumo...

Para imagem:

Aplicar marca d'água sem afetar o texto

Imprimir página com Background

.imagem {
    display: none;
}

@media print {
    .imagem {
        display: block;
    }
}

<div class="imagem">
    <img src="cancelado.png" alt="">
</div>

Para cor

Imprimir pagina HTML mantendo o CSS da pagina

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

table thead tr th {
    background: greenyellow; /* cor antes da impressão */
}

@media print{
  table thead tr th{
    box-shadow: 0 0 0 1000px red inset;  /* cor para impressão */
  }
}
<div class="container">
    <table border="1">
        <thead>
            <tr>
                <th>Item 1</th>
                <th>Item 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Texto 1</td>
                <td>Texto2</td>
            </tr>
        </tbody>
    </table>
</div>


Uma dica

Verifique na documentação do Jboss Seam Pdf se tem como vc automaticamente embedar a font-family, aqui no site da Adobe tem infos sobre isso: https://helpx.adobe.com/acrobat/using/pdf-fonts.html

Sobre os background color/image vc pode ver na documentação se tem como imprimir o PDF como imagem https://helpx.adobe.com/acrobat/kb/quick-fix-print-pdf-image.html ou se tem a opção de trazer por padrão a opção de "Gráficos de segundo plano" como mencionado no comentário.

5
  • Obrigado pela resposta, Hugo. Tentarei implementar as suas ideias. Mas vc tem em mente que não perguntei sobre HTML ou CSS mas sim sobre a geração de ambos dentro de um pdf gerado pelo Jboss Seam, não tem? Não colocando suas ideias como incorretas, apenas que não vejo menção da funcionalidade, e acredito que deixei claro na pergunta, mas se eu transcrever o que eu dei de exemplo em uma pagina HTML, o funcionamento é o esperado. Somente dentro do pdf gerado pelo Jboss Seam que não funciona. Commented 20/08/2020 às 16:50
  • Talvez eu precise elucidar a necessidade na pergunta, o que vc me diz Hugo? Commented 20/08/2020 às 16:55
  • 1
    @GustavoCinque eu entendi sim, os código que eu coloquei são exemplo e dicas para vc tentar usar no seu ambiente, como eu disse não tenho como testar isso aqui. Mas como falado se vc vai usar aspas dentro den aspas faça assim: " ' ' " ou o contrário ' " " '. Sobre o font-family é o mesmo, o usuário tem que ter a fonte, a não ser que tenha como vc fazer um embed da font no PDF, mas ai vc tem que ver a documentação desse sistema que vc usa ai. E sobre o background é o mesmo, olha na documentação de trazer por default Gráficos de segundo plano marcado para pegar as cores e imgs de bg
    – hugocsl
    Commented 20/08/2020 às 17:15
  • A solução para as aspas foi aproveitada, sobre a cor de fundo infelizmente não encontrei nenhuma correção, parece que é problema do framework Commented 25/08/2020 às 13:51
  • 1
    @GustavoCinque Que pena que nem tudo deu certo, agora é esperar para ver se eles soltam alguma atualização corrigindo esses problemas. Lamento não ter podido ajudar muito mais, valeu a força ;) []´s
    – hugocsl
    Commented 25/08/2020 às 14:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .