Imagens tipográficas

Títulos gráficos com a fonte da sua escolha

Com GD2 instalado no seu site, o SPIP pode criar, ele mesmo, imagens a partir de títulos (ou qualquer outro elemento da base de dados) usando uma fonte tipográfica à sua escolha.

A função que realiza este efeito é image_typo. Esta página apresenta as diferentes opções que se pode usar com esta função.

[(#TITRE|image_typo)]

Atenção : a partir do SPIP4.4, esta função não é mais fornecida pelo SPIP-dist: para usá-la, é preciso instalar o plugin image_typo

police (fonte)

Senão especificar nenhuma variável, image_typo usará a fonte padrão fornecida com o SPIP: Dustismo, uma fonte GPL de Dustin Norlander.
Ela encontra-se no subdiretório polices do diretório dist ou squelettes-dist para o SPIP 2 (nas versões precedentes do SPIP, trata-se do diretório ecrire).

Pode também especificar o nome de outra fonte, que tenha pré-instalado no seu site.

[(#TITRE|image_typo{police=dustismo_bold.ttf})]

(Dustismo-bold também é fornecida pelo SPIP.)

Em teoria, pode usar diversos formatos de fonte: TrueType, PostScript Type 1, OpenType... De acordo com a configuração do seu site, é possível que certos formatos não sejam compatíveis.

As fontes devem ser instaladas num subdiretório /polices do diretório que contém os seus templates.

Se instalar-mos, por exemplo, um ficheiro TrueType assim:
polices/stencil.ttf
pode-se usar esta nova fonte [1].

[(#TITRE|image_typo{police=stencil.ttf})]

taille (tamanho

Pode-se definir o tamanho de exibição da fonte. Isto faz-se com a variável taille.

[(#TITRE|image_typo{police=stencil.ttf,taille=36})]

Note: não se especifica "36pt", apenas "36", sem indicar a unidade.

couleur (cor)

Esta variável permite especificar a cor. Por padrão, o resulto é em preto. Esta variável é uma cor RGB hexadecimal, sempre no formato "3399BB".
Note: omite-se o "#" que normalmente precede este tipo de código de cor.

[(#TITRE|image_typo{police=stencil.ttf,taille=36,couleur=4433bb})]

largeur (largura)

A variável largeur permite especificar a largura máxima da imagem.
Note bem: é um valor máximo; a imagem real é "enquadrada" automaticamente, em seguida, para adotar as dimensões do texto realmente composto.

O primeiro bloco, abaixo, é composto com uma largura máxima de 300 pixels, o segundo, com uma largura de 400 pixels.

[(#TITRE|image_typo{police=stencil.ttf,largeur=300})]
[(#TITRE|image_typo{police=stencil.ttf,largeur=400})]

align (alinhamento)

A variável align permite forçar o alinhamento de várias linhas de texto (quando for o caso) à esquerda, à direita, ou ao centro. Excecionalmente, usa-se aqui a sintaxe inglesa, semelhante à usada nas folhas de estilo.

[(#TITRE|image_typo{police=stencil.ttf,align=left})]
[(#TITRE|image_typo{police=stencil.ttf,align=center})]
[(#TITRE|image_typo{police=stencil.ttf,align=right})]

hauteur_ligne (entrelinha

hauteur_ligne permite definir a altura entre cada linha de texto (no caso em que a imagem contém várias linhas).

[(#TITRE|image_typo{police=stencil.ttf,taille=36,hauteur_ligne=80})]

padding (espaço de guarda)

Certas fonte "transbordam" da sua caixa de renderização, resultando num efeito desastroso (fontes "cortadas"). A variável padding permite, excecionalmente, forçar um espaço adicional à volta da composição tipográfica.

[(#TITRE|image_typo{police=stencil.ttf,padding=5})]

Filtrar a imagem

O resultado de image_typo sendo uma imagem, pode-se sempre aplicar os filtros de imagens. Por exemplo, a seguir, tornamos a imagem semi-transparente, em que aplicamos uma textura.

[(#TITRE|image_typo{police=stencil.ttf,couleur=aa2244}|image_alpha{60})]
[(#TITRE|image_typo{police=stencil.ttf,couleur=aa2244}|image_masque{carre-mur.png})]

Ver também

Os filtros

A matéria sobre Processamento automatizado das imagens, que detalha igualmente diversos outros filtros de imagens.

Notas

[1Atenção: se não proteger este diretório (com htaccess, por exemplo), o seu ficheiro de fonte ficará acessível na web. Se usa fontes comerciais, tome cuidado para não acabar, assim, por distribuir fontes para as quais isso não é permitido.

NB.1. A imagem criada por image_typo é no formato PNG 24 com uma camada alfa para realizar a transparência. Para forçar o Microsoft Explorer a exibir corretamente essa transparência, o SPIP usa uma classe de folha de estilo específica, format_png, definida em spip_style.css; ela chama um "comportamento" (behavior) que torna a exibição possível no MSIE. Mais uma vez recomendamos integrar o spip_style.css padrão nos seus próprios templates, podendo depois sobrescrevê-locom os seus próprios estilos.

N.B.2. A exibição de certas fontes (nomeadamente as inglesas e alguns itálicos) é problemática. As técnicas de renderização tipográfica no GD2 estão, claramente, ainda em desenvolvimento (encontramos vários bugs neste aspeto). Esperemos que as funções GD2 evoluam rapidamente.

N.B.3. O árabe, o farsi, o hebreu? É possível, após o SPIP 2.0!

Autor Ricardo Porto Publié le : Mis à jour : 11/08/25

Traductions : català, English, Español, français, italiano, Nederlands, Português