Nível 2 · Desenho

Texto e tipografia

O Rayzia tem um único motor de texto. O que parece ser cinco ferramentas de tipografia na barra lateral é esse motor com quatro presets diferentes armados de antemão. Aprenda a barra de opções uma vez e todas elas se comportam do mesmo jeito.

O slot de texto e suas cinco entradas

A barra lateral é agrupada. Você não vê 52 botões, vê cerca de 19: quatro botões principais de navegação, doze slots de grupo e três ferramentas independentes. O texto vive em um desses slots de grupo. O slot traz um pequeno triângulo; clique nele e um flyout lista os membros. O que você escolher permanece no slot, salvo por slot no seu navegador, então a barra lateral que você acaba tendo é sua, e não a de uma captura de tela.

Os cinco membros são Type Tool, Area Type, Type on a Path, Vertical Type e Touch Type. A Type Tool é o padrão do slot e a única com atalho de teclado. As outras quatro constroem o mesmo motor de Texto e armam um preset antes de você clicar:

  • Area Type arma um preset de área, então clicar em uma forma cria um texto novo fluindo dentro dela.
  • Type on a Path arma um preset de caminho, então clicar em um caminho faz o texto correr ao longo dele.
  • Vertical Type arma um modo de escrita vertical, então o texto flui de cima para baixo.
  • Touch Type arma um preset que agarra um único caractere, que você pode então mover, girar e escalar com alças no canvas.

Uma inconsistência de nomes que você vai notar: o tooltip da barra lateral diz “Text [T]” enquanto o flyout renomeia a mesma ferramenta para “Type Tool”. Mesma ferramenta, dois rótulos. Ainda não resolvemos isso.

Compondo um texto

  1. Escolha o slot de texto Pressione T ou clique no slot na barra lateral. Se o slot estiver com um dos presets, abra o flyout e escolha Type Tool.
  2. Clique onde o texto deve começar Um cursor de texto aparece e o editor é montado. Digite.
  3. Estilize pela barra de opções A barra no topo muda para os controles de texto assim que a ferramenta fica ativa. Família da fonte, estilo e tamanho são os três primeiros.
  4. Saia do texto Troque para a ferramenta de Seleção com V quando quiser mover ou transformar o objeto em vez de editar seus caracteres.

Todo objeto de texto é um elemento de texto SVG real no documento, não uma imagem de texto. Esse é o ponto central do editor: o documento é SVG, então o que você exporta é o que estava editando.

O que a barra de opções realmente oferece

A barra de texto é construída pelo motor de texto e espelhada na interface. Da esquerda para a direita você tem um combo de família de fonte, um botão de upload de fonte, um combo de estilo de fonte, tamanho da fonte, altura de linha com unidade, alinhamento, sobrescrito e subscrito, espaçamento entre letras e palavras, e os controles de direção de escrita.

  • Font Family é um combo com autocompletar das famílias registradas. O padrão é Arial onde Arial está registrada; caso contrário, Roboto, que está sempre embutida.
  • Font Size é em pontos, padrão 16, com presets de 4 até 144. O valor é convertido para pixels antes de ser aplicado.
  • A altura de linha tem padrão 1.25 com um combo de unidades oferecendo cm, mm, in, pc, px, pt, %, em e ex. A unidade padrão é em.
  • Espaçamento entre letras e espaçamento entre palavras são campos numéricos de 0 a 10.
  • O alinhamento é esquerda, centro e direita, o que define tanto o text-align quanto a âncora do texto.

Duas ressalvas honestas. O controle de espaçamento entre letras está rotulado como pt, mas o handler aplica o valor em px, então confie no resultado no canvas em vez da unidade no rótulo. E kerning, deslocamento vertical e rotação de caracteres existem, mas ficam permanentemente guardados no dropdown de excedente da barra, em vez de exibidos inline. Touch Type é a forma pretendida de manipulá-los no canvas.

Os cinco grupos de botões de alinhamento, deslocamento de linha de base, direção do texto, orientação do texto e direção de parágrafo não aparecem na barra como fileiras completas de botões. Cada um se dobra em um único controle mostrando o ícone atual mais uma seta, com as opções em um dropdown. Isso mantém a barra legível em um laptop.

Fontes, incluindo as suas

Ao lado do combo de família há um botão intitulado “Upload font from your computer…”. Ele aceita .ttf, .otf, .woff, .woff2 e .ttc, e recebe mais de um arquivo por vez. Uma fonte enviada é registrada na lista de fontes ativa, salva no seu dispositivo para sobreviver a um reload e, no Pro, é espelhada na nuvem para chegar às suas outras máquinas.

Uma família que precisa ser baixada, em vez de uma já carregada, aparece riscada na lista até seus bytes chegarem. Escolha-a e ela é baixada. Isso importa mais do que parece: salvar como .rzv embute as fontes em uso, então o arquivo continua portátil, mas uma exportação SVG simples não carrega a fonte junto.

Tailandês e outras escritas complexas

Aqui está a regra, e vale a pena conhecê-la antes de digitar uma palavra em tailandês. Ao digitar, o Rayzia verifica cada caractere contra a fonte ativa no momento. Se a fonte não tiver um glifo para aquele caractere, o caractere é desenhado como um ponto de interrogação.

Isso é deliberado. Uma fonte sem glifos tailandeses mapeia cada caractere tailandês para seu glifo .notdef, cujo contorno é vazio. Um texto feito de contornos vazios não tem caixa delimitadora mensurável, o que antes deixava o objeto inteiro preso na origem do documento em vez de no seu cursor, invisível e difícil de recuperar. Substituir por um ponto de interrogação visível mantém a geometria válida e mantém o texto onde você o colocou.

Então, se você vir fileiras de pontos de interrogação, nada está quebrado e nada foi perdido. Você está em uma fonte só latina. Escolha uma família que tenha a escrita, ou envie uma, e os caracteres serão renderizados corretamente. A mesma substituição roda ao digitar e ao colar, então os dois se comportam igual.

As fontes são baixadas pela rede. Offline, ou onde um servidor de fontes externo estiver inacessível, só as famílias embutidas ficam disponíveis, o que é uma restrição real para trabalho não latino. Enviar a fonte de que você precisa é a solução confiável.

Perguntas frequentes

Por que meu texto em tailandês aparece como pontos de interrogação?

A fonte ativa não tem glifos para esses caracteres, então o Rayzia substitui por um ponto de interrogação visível em vez de não renderizar nada. Troque a Font Family por uma família que suporte a escrita, ou envie uma com o botão ao lado do combo de família, e os caracteres aparecem.

Area Type, Path Type, Vertical Type e Touch Type são ferramentas separadas?

Não. As quatro constroem o mesmo motor de Texto e armam um preset antes de você clicar, e compartilham uma única barra de opções. Por isso, tudo o que você aprende na ferramenta Type se transfere direto.

Para onde foram o kerning e a rotação de caracteres?

Eles existem, mas vivem permanentemente no dropdown de excedente da barra de opções, em vez de inline. Touch Type é a forma no canvas de ajustar a posição, rotação e escala de um caractere individual.

Uma fonte enviada ainda estará lá amanhã?

Sim. Fontes enviadas são salvas no seu dispositivo e recarregam com o editor. No Pro, elas também são espelhadas na nuvem e seguem você para seus outros dispositivos. Salvar como .rzv embute as fontes em uso, então o próprio documento é portátil.