Tipografia: CMS Axe e o tema Rocket

Como fã dos recursos tipográficos da web, vivo sentindo falta de uma referência dos recursos à minha disposição – e chegou a hora de começar a resolver a parte disso que ninguém poderia fazer por mim.

Ser o autor tanto do CMS1 quanto do tema que eu uso para publicar meu blog2 tem vantagens e desvantagens, como:

✔ Ao voltar a blogar depois de alguns anos só twitando, tudo ainda continua do jeito que eu lembrava.
✘ Eu não lembrava tão bem assim.
✔ A documentação do Axe é bem suficiente pra essa minha retomada.
✘ A do Rocket é inexistente...

Vamos, então, corrigir essa lacuna, registrando as dicas de tipografia do Axe com o Rocket (e com os scripts de configuração sob medida do BBEdit), para eu mesmo ter uma referência sem ter que ficar relendo o código a cada vez.

Fazer esse tipo de registro, quase 10 anos depois de ter escrito o código e feito algumas das escolhas, é um exercício de penitência, em especial pelos pecados que cometi contra a web semântica, 10 anos atrás...

1. Os subtítulos, leads e destaques

Por razões3 que hoje não mais se justificam, os títulos de H1 a H3 ficaram reservados para uso nos templates e plugins, sendo que o <h4> passou a ser o ideal, nessa configuração peculiar, para criar os subtítulos dentro de artigos – a exemplo do subtítulo acima.

★ Atalho para o H4: Control + 4

Outro atalho importante é o Control + P, que acrescenta um destaque visual4 para o lead (ou lide) dos artigos, ou seja, o primeiro parágrafo descritivo do conteúdo ou da relevância do texto – como você pode ver no parágrafo inicial deste post.

Esse mesmo atalho de teclado tem dois primos interessantes voltados a formatar pull quotes (com o uso de modificadores), que veremos a seguir.

Pull quotes ou olhos são a formatação típica de citações extraídas do texto para atrair, por meio de destaque, a atração do leitor para um trecho.

★ Atalho para o pull quote acima: Control + Option + P

Também existem os pull quotes ou olhos que ficam à margem de um parágrafo, ajudando o leitor a referenciar ou encontrar o trecho que o interessa numa obra de referência, por exemplo. Eles são posicionados sem interromper o fluxo vertical da leitura, e de tal forma que o parágrafo os envolva com naturalidade.

★ Atalho para o pull quote acima: Control + Option + Shift + P
★ Atalho para a marcação luminosa: Option + Command + B


E o divisor vertical acima é simplesmente a renderização da clássica tag <hr>.

2. Os recursos para material técnico

Com frequência eu escrevo sobre programação e outros assuntos de natureza tecnológica, com convenções próprias e que exigem marcação estrita de contextos, em especial ao reproduzir literalmente trechos de código ou comandos.

Para trechos maiores, o Axe e o Rocket jogam em dobradinha para tratar a tag <pre> como necessário, incluindo evitar as quebras de linha que não estejam literalmente presentes, e criar uma barra de rolagem lateral se for preciso, como no exemplo a seguir:


© 2022 Augusto Campos http://augustocampos.net/ (12/nov/2022)

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. 

You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, 
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 

See the License for the specific language governing permissions and limitations under the License.

Da mesma forma, a tag <tt> é tratada em parceria pelo CMS e pelo tema, facilitando inserir um comando como DEVICE=C:\Windows\EMM386.EXE NOEMS no meio de um parágrafo, diferenciando o que é comando e o que é o fluxo de texto.

Um caso especial é a referência a teclas, da qual tivemos vários exemplos acima. Ela pode ser feita com a tag <kbd> envolvendo cada nome de tecla, como no exemplo Shift + Tab – ou, fazendo uso de um pouco de unicode, + .

3. As notas de rodapé

Quando eu escrevi o Axe, tomei a decisão de não adotar o padrão de representação MarkDown. Se fosse hoje, certamente a minha decisão teria sido a oposta.

Mas um recurso facilmente acessível a quem escrevia em MarkDown, na época, eram as notas de rodapé5, e eu tratei de inserir suporte a elas, com uma sintaxe esquisita mas fácil de digitar (ainda mais depois que criei o atalho + R...), na segunda versão pública do Axe, em setembro de 2013.

As notas de rodapé devem ser definidas no ponto em que serão referenciadas, marcadas entre colchetes e precedidas de @@rod:, conforme o exemplo a seguir:

Este é um texto comum[@@rod:E aqui vem o texto da nota de rodapé 
dele.] para exemplo.

As notas de um artigo são numeradas sequencialmente, aparecem sempre ao final do post (ou seja, no rodapé) e também reproduzidas como um hover no seu número, visível a quem pairar o mouse sobre ele. Junto a cada nota, no rodapé, há um link para retornar ao seu contexto original.


O que eu esqueci? Muita coisa, provavelmente.

E, 10 anos depois, o meu gosto tipográfico me faz desejar incluir mais recursos no Rocket (e, provavelmente, com complementos no CMS e nos scripts do BBEdit).

Isso quer dizer que voltaremos a esse assunto mais vezes, mas tenho certeza de que o distinto público não vai se incomodar 😀

 
  1.  O CMS Axe foi escrito por mim em 2013, e penso que quem o usa hoje em dia somos apenas eu e o André Noel. Provavelmente o código que eu disponibilizei na época exigirá algumas atualizações para rodar no ambiente atualizado dos provedores de hospedagem.

  2.  O tema Rocket foi originalmente escrito para o meu site BR-Mac.

  3.  De SEO, na época...

  4.  Usando (muito mal) a tag H2, na contramão da web semântica!

  5.   Ou notas de fim de artigo, mais propriamente falando.