Problemas com texto dinâmico em SVG quando a fonte não é SVG


7

Então, eu tenho uma cadeia de automação gráfica que tem sido executada em um ambiente Linux sem cabeçalho, usando SVGs gerados / alterados programaticamente e PhantomJS (atualmente 1.9.0) como um mecanismo de renderização final. Eu tenho alguns requisitos de substituição de texto dinâmico e as necessidades de ajuste e dimensionamento de fonte dinâmica resultantes ... Eu tenho usado fontes SVG incorporadas e algum javascript incorporado de baixa qualidade, que funciona bem, exceto por duas coisas:

1) O cliente tem alguns pedidos de fontes com ligaduras (que o formato de fonte SVG não suporta)

2) Estamos escolhendo uma opção de visualização ao vivo e gostaríamos de poder servir o SVG até a página da Web sem renderizar png / jpeg / o que quer que seja no nosso servidor antes. mantenha a carga baixa, faça a CPU do cliente fazer o trabalho pesado, tudo isso.

No interesse desses problemas, eu tenho brincado com as fontes WOFF, já que o suporte para fontes SVG nunca foi MUITO bom, e agora que o Chrome não as suporta mais com a mudança para o mecanismo Blink, se eu quiser o cliente fazer o meu trabalho preciso de algo compatível com o maior número possível de navegadores comuns ...

Então, aqui está o problema: Meu dimensionamento automático falha quando uso uma fonte WOFF (ou OFT ou TTF) e a função @ font-face.

o que eu tenho feito é apenas incorporar a fonte SVG no meu gráfico nos defs e referenciar com o DOM como qualquer outro elemento SVG. Isso faz as coisas que eu espero e preciso quando combinadas com o script java como este:

<script id="multiscaler1" type="text/javascript">
    var texta = document.getElementById(&quot;text8093&quot;);
    var textb = document.getElementById(&quot;text8100&quot;);
    var textpatha = document.getElementById(&quot;textPath8097&quot;);
    var textpathb = document.getElementById(&quot;textPath8104&quot;);
    var patha = document.getElementById(&quot;path8091&quot;);
    var pathb = document.getElementById(&quot;path8089&quot;);
    var charcounta = textpatha.getNumberOfChars();
    var charcountb = textpathb.getNumberOfChars();
    var fontsizea = 10;
    var fontsizeb = 10;
    var offseta = -13;
    var offsetb = -13;
    var spacing = 0;
    while ( ((textpatha.getComputedTextLength() + (spacing * charcounta)) &lt; patha.getTotalLength()) &amp;&amp; (fontsizea &lt; 43) )
    {
        fontsizea += .5;
        offseta += 0.2
        textpatha.setAttribute(&quot;font-size&quot;, fontsizea);
        texta.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + offseta + &quot;,0)&quot;);
    }
    while ( ((textpathb.getComputedTextLength() + (spacing * charcountb)) &lt; pathb.getTotalLength()) &amp;&amp; (fontsizeb &lt; 43) )
    {
        fontsizeb += .5;
        offsetb += 0.2
        textpathb.setAttribute(&quot;font-size&quot;, fontsizeb);
        textb.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + offsetb + &quot;,0)&quot;);
    } 
</script>

É uma porcaria, eu sei, mas sou gerente de produção e artista gráfico, não codificador: P e fica assim:

insira a descrição da imagem aqui

Qual é o que eu quero ... (mas é claro que só funciona em navegadores que suportam fontes SVG ...)

agora, quando adiciono essa pequena beleza aos meus deffs

<style type="text/css">
@font-face {
  font-family: Narrow-Bold;
  src: url('WOFFFONTS/Narrow-Bold.woff');
}
</style>

e remover os dados da fonte SVG, recebo o seguinte:

insira a descrição da imagem aqui

Oh céus. Isso não está certo. Eu brinquei com meus valores de espaçamento (que existem para lidar com outra situação em que altero o espaçamento de caracteres para maximizar o tamanho da fonte com base no comprimento da string ...) e posso fazer isso:

insira a descrição da imagem aqui

também muito errado: /

O que dá aqui? Qualquer ajuda? Francamente, seria ótimo mudar tudo para fontes WOFF (ou @ fontes OTF ou TTF vinculadas à face da fonte, que BTW fazem a mesma coisa), pois eu teria muito menos 20.000 + SVGs de linha sem incorporar fontes por todo o lado o maldito lugar ...

Eu tentei diferentes ferramentas de conversão de fontes e até mesmo um truque que encontrei em alguns resultados de pesquisa do Google em que você cria o WOFF a partir do SVG, não o TTF ou OTF ... mesmos resultados.

??

Abaixo está um exemplo simplificado de um SVG independente que funciona com fonte SVG incorporada usando a fonte Delicious Bold gratuita . Obviamente, isso funcionará apenas em um navegador que suporte fontes SVG. A fonte incorporada foi criada a partir de um novo download do OTF com o FontForge For Windows Release 2015-06-12 . Eu também criei uma versão WOFF da mesma fonteda mesma maneira (todas as configurações padrão, ignorando o aviso sobre "avanço de ems não padrão" na definição TTF) e adicionado um link @ font-face com um nome diferente que apontará para o WOFF quando estiver no mesmo diretório que o SVG. Ao editar o font-face = "xxxxxx" no elemento de caminho de texto / texto do SVG, você pode alternar rapidamente entre a fonte SVG incorporada (que funciona bem) a fonte WOFF vinculada (que é dimensionada incorretamente) e a versão do sistema da fonte família, se instalada (que talvez seja digna de nota, é renderizada ligeiramente diferente da fonte SVG incorporada, mas também é dimensionada corretamente)

Esse comportamento é consistente em todos os navegadores testados (Opera mais recente para Windows 7 64bit, Mozilla mais recente Linux Ubuntu 14, Chrome mais recente Windows 7/8 64bit, Safari 5.1.7 para Windows (suporta fontes SVG) e PhantomJS 1.9.7 Linux CentOS 6.4 final (suporta fontes SVG) Também é consistente em todas as fontes testadas (muitas ...) e mecanismos de conversão de fontes (fonte de esquilo, FontForge, Birdfont ...)

Como o SVG independente é muito grande para colar no corpo, aqui está um link para ele colado em um projeto JSfiddle .

Sim, eu sei que eu poderia resolver isso renderizando com o Apache batik, mas: 1) Batik é slooooooooooooow. Sooooo slooooooooooooooooooooooooow ... OMG é lento. 2) Eu quero ser capaz de descarregar o máximo possível da carga da CPU do meu servidor, a REVERSA exata do que o batik fará 3) Esse não é o ponto, caramba!


Olá JawzX, se você não receber uma resposta aqui. Você pode tentar postar em stackoverflow.com
AndrewH 26/06

Obrigado, sou um membro do Stack Overflow e já publiquei isso de forma cruzada. até agora tem conseguido muito mais atenção aqui, mas há respostas tanto lugar ...
JawzX

11
Você deve colocar uma recompensa em 2 dias, mas no SO, e não aqui. Você também deve revisar sua pergunta para torná-la mais compacta e direta, talvez combinando as 3 imagens em uma. Você pode conseguir mais leitores.
Alin

11
Muito TL; DR
Zach Saucier

11
não sabia TL; DR era uma crítica válida fora do redit.
JawzX

Respostas:


1

Eu trabalho muito com SVGs, como sou web designer. Se quiser manter a forma (estilo da fonte) do meu texto, abro o Adobe Illustrator, escrevo o que quero e 'Criar contornos'. Não é demorado, apenas copie o texto antes de descrevê-lo para manter uma versão editável.


Estou trabalhando Em um ambiente de produção completo com centenas de pedidos de clientes por dia, não tenho tempo para exportar para caminhos no illustrator. Eu ainda estou usando um sistema ultrapassado, uma vez que é o mais rápido, e isso é o que realmente importa para os meus propósitos ...
JawzX
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.