Uma tipografia personalizada

O texto de base

Mesmo o texto de base no SPIP, aquele que redige num dos formulários da área restrita, escrevendo sem parar, gera tags HTML específicas. Com efeito, ele é segmentado em parágrafos; a cada parágrafo corresponde uma tag <p class="spip">. Podemos assim associar a esses parágrafos um estilo bem específico, que não será aplicado ao resto do texto da página.

Comecemos por escolher uma fonte tipográfica. Para tal, usa-se a propriedade font-family, que toma como valor um ou mais nomes de fontes a usar. Para o corpo do texto como o de uma matéria é melhor uma fonte serifada; digamos que opta pela "Bookman Old Style". Adicione, então, ao seu ficheiro mes_styles.css a regra a seguir:

p.spip {
    font-family: "Bookman Old Style";
}

(note que um nome de fonte com várias palavras deve ser colocado entre aspas...)
Pode ocorrer um problema se a fonte "Bookman Old Style" não estiver instalada no computador dos seus visitantes: cada computador tem uma configuração diferente, e não se esqueça que as fontes "gratuitas" da Microsoft são raramente instaladas em Linux e Macintosh... É preferível prever este caso e especificar uma ou mais fontes alternativas de substituição:

p.spip {
    font-family: "Bookman Old Style", "Times New Roman", serif;
}

Assim, especificamos alternativas à Bookman, a clássica "Times New Roman", e como último recurso "serif". A "serif" não é propriamente uma fonte, mas um código genérico que indica ao navegador que deve usar a fonte serifada padrão do computador; igualmente, "sans-serif" especifica a fonte sem serifa padrão (geralmente Arial ou Helvetica).

Observe esta regra importante: na propriedade font-family, é conveniente sempre indicar várias opções alternativas para se adaptar às fontes instaladas no computador do visitante. Note que esta regra também é válida para a tag <font face="..."> do HTML tradicional.

Evidentemente, outras propriedades estão à sua disposição. Pode, por exemplo, configurar o tamanho das letras com a propriedade font-size. Note, no entanto, que os navegadores dispõem de uma configuração de tamanho de letra padrão, e que o texto principal das suas páginas não deverá sobrepor-se a esta regra, por razões de conforto visual: é o utilizador quem deve escolher o tamanho básico, e não o webmaster.

Note que os estilos que aplicar às tags <p> aplicam-se a cada parágrafo como objeto atónomo. Isto permite certos efeitos interessantes como, por exemplo, indentar a primeira linha dos parágrafos ao usar a propriedade text-indent. Por padrão, esta propriedade tem valor zero, ou seja, sem indentação. Pode alterá-la para obter, em cada primeira linha, um afastamento de sessenta pixels para a direita:

p.spip {
    text-indent: 60px;
}

Aplicar um tratamento diferenciado

Mais do que nos estendermos sobre a grande variedade de estilos gerados pelos atalhos tipográficos do SPIP, que poderá configurar à vontade (eles são abordados nas matérias seguintes desta mesma seção), vamos estudar aqui o caso de querer aplicar um layout diferente a um mesmo estilo, de acordo com a sua posição no template. Esta necessidade é legítima: pode querer, por exemplo, exibir o corpo do texto numa fonte serifada com indentação no início do parágrafo, mas o post-scriptum numa fonte mais "lisa" (sem serifas) e mais pequena, sem indentação.

É uma operação bem simples, na realidade. Precisa alterar o seu template, introduzindo os elementos que permitirão discriminar o texto e o post-scriptum.

Pode ser, por exemplo, dentro do loop ARTICLES principal, na forma abaixo:

<div class="texto">#TEXTE</div>
<div class="ps">#PS</div>

Será preciso recalcular a página (já que o HTML foi alterado...). A exibição do navegador continuará a mesma: normal, os nossos novos estilos ainda não têm nenhuma regra na folha de estilos, sendo ignorados pelo navegador. Vamos remediar a situação:

.texto p.spip {
    font-family: "Times New Roman", serif;
    text-indent: 50px;
}
.ps p.spip {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 90%;
}

Aqui, a grande novidade não reside nas propriedades gráficas mas no modo como são aplicadas ao código HTML. Com efeito, ".texto p.spip" significa: "esta regra aplica-se a todas as tags <p class="spip"> contidas numa tag com o atributo class igual a texte”. Pode restringir um pouco esta regra ao especificar que a tag superior dever ser uma tag <div> (o início da regra será então escrita como "div.texto p.spip"); mas como dominamos a estrtura dos nossos próprios templates, não é útil deixar a folha de estilos demasiado restritiva.

De qualquier forma, esta folha de estilos dá o resultado pretendido: os parágrafos do corpo do texto exibem-se com uma indentação, os do post-scriptum com uma fonte mais pequena e sem indentação. Para verificar se estas regras são corretamente aplicadas a cada um dos parágrafos <p class="spip"> e não à <div class="..."> envolvente, pode divertir-se definindo uma moldura preta:

.texto p.spip {
    border: 1px solid black;
}

Note que cada parágrafo do corpo do texto (mas não do post-scriptum) fica contornado por uma moldura preta. Se tivessemos escrito simplesmente ".texte" em vez de ".texte p.spip, todo o texto seria contornado por uma única moldura preta. c’est le texte tout entier qui serait entouré d’un unique cadre noir englobant. Observemos de passage a aparição da propriedade border...

Note: este truque, que consiste em traça uma moldura de cor para saber a quais elementos específicos uma regra é aplicada, pode ser muito útil à medida que a sua folha de estilos cresce. Não hesite em usá-lo se começar a perder o pé...

Este método é bem poderoso e pode ser usado com muita vantagem para estruturar o seu layout.