Para todos os interessados, isso parece resumir tudo: link
Minha pergunta é especificamente o que eu estou procurando, mas também estou interessado em "regras gerais" sobre como preservar estilos ao abrir uma página HTML no Word. Mais informações sobre o meu contexto segue.
O arquivo HTML que está sendo aberto no Word tem <link ... /> elementos, incluindo folhas de estilo. tudo é exibido normalmente em um navegador.
Até agora descobri que elementos com várias classes não têm seus estilos transportados, nem nada aninhado, quando baseados em um elemento com várias classes.
Considere isso:
<p class="class1">This <span class="class1 class2">is my</span> text.</p>
.class1 { color:green; }
.class2 { color:orange; }
.class1.class2 { color:red; }
.class1.class2,
.class1 { color:blue; }
Resultados em:
p é verde porque sua primeira declaração contém p não é azul porque essa declaração faz parte de uma declaração multi-classe 'inválida' (!) span é laranja porque sua primeira declaração contém span não é vermelho, nem azul, por causa das declarações de várias classes 'inválidas' -
Como resultado das descobertas acima, acabei envolvendo meus elementos em outro elemento, sempre com um único nome de classe de marcação , e formando as coisas com sucesso nessa base.
Observe que não há problema em manipular elementos com Javascript, adicionando / removendo nomes de classes extras conforme necessário, o Word só está interessado na marcação real no arquivo HTML que está tentando analisar.
O que eu não descobri é como obter imagens de plano de fundo de CSS relativamente vinculadas para aparecer quando os arquivos HTML são abertos pelo Word. Eu costumo usar o atalho: background:transparent url(../img/icon-audio-16.gif) left top no-repeat; que não funcionou (sim, verifiquei meus caminhos), mas também não fiz uma análise detalhada:
background-color:transparent;
background-image:url(../img/icon-audio-16.gif);
background-position:left top;
background-repeat:no-repeat;
Sim ...
Tags images format css html microsoft-word