Entendendo a Pontuação Deslocada

A Pontuação Deslocada é uma ferramenta tipográfica poderosa para a criação de corpos de texto opticamente alinhados. Infelizmente, ela foi renegada pela web… até agora. Veremos o valor da pontuação deslocada e como você pode implementá-la parcialmente, usando um pouco de JavaScript e uma regra de CSS que existe há anos.

Pontuação Deslocada: O Básico

Quando Gutenberg estava criando sua Bíblia, por volta de 1400, ele desenvolveu um estilo de composição de sinais de pontuação que perdura até hoje, chamada de “Pontuação Deslocada” (também conhecida como alinhamento ótico).

O Que É Pontuação Deslocada?

Pontuação deslocada é um método de configurar os sinais de pontuação fora das margens do corpo do texto. Isso cria a aparência de bordas uniformes no texto e permite um fluxo ótico melhor.

A pontuação deslocada impacta na forma que você percebe o traçado do texto em uma página.

Onde A Pontuação Deslocada Acontece

Pontuação deslocada acontece nas margens, fora do alinhamento do resto do texto. Você pode deslocar a pontuação em textos alinhados à esquerda, direta ou justificados.

Por Que Deslocamos a Pontuação?

A teoria do porque deslocar a pontuação ser importante, é mais ou menos assim:

Os sinais de pontuação no texto só ocupam uma parte da altura das (letras) maiúsculas. Geralmente, isso não é um problema, mas, quando o sinal de pontuação é o primeiro caractere na parte reta da lateral do corpo de um texto, ele consome uma quantidade considerável de espaçamento vertical, o que pode atrapalhar o fluxo visual do corpo de texto.

A pontuação deslocada acaba com isso. Naturalmente, alguns sinais acabam na lateral de um texto. Ao invés de deixá-los ali, atrapalhando o fluxo ótico do texto, o tipógrafo alivia essa ruptura, deslocando os sinais de pontuação para as margens.

Quais Sinais de Pontuação Podem Ser Alinhados Oticamente?

Como os sinais de pontuação aliviam as rupturas causadas pelos sinais de pontuação de versaletes (small caps), tem-se que, geralmente, deve-se deslocar esses sinais de pontuação, como as aspas simples e duplas (” “ ’ ‘) e hifens (– —). Você deveria evitar deslocar pontuações de altura completa, como o ponto de exclamação (!) e o de interrogação (?).

Pontuação Deslocada: Impressa e na Web

O suporte a pontuação deslocada já existe em programas de publicação para computadores há um tempo, como no Adobe InDesign. O InDesign provê ótimas ferramentas para pontuação deslocada em corpos de texto. Claro, isso é ótimo para quem trabalha com aplicativos de publicação impressa, mas como ficam os designers para web?

O problema em se aplicar a pontuação deslocada na web é que tudo nela se baseia em caixas. As regras de estilização no CSS usam o “modelo de caixa” que envolve todos os elementos HTML em caixas. Essas caixas possuem margens, bordas, espaçamento interno e conteúdo.

Por padrão, todos os caracteres ficam dentro de uma caixa. Pontuação deslocada, por outro lado, requer que os caracteres estejam fora da caixa. Isso tem sido um grande problema para se resolver com programas, assim, a implementação desse truque da pontuação deslocada tem sido ignorada na web, pelos projetistas e pelos criadores de navegadores. Mark Boulton afirma que é uma vergonha que esse aspecto tão importante da composição tipográfica venha sendo relegado.

Pontuação Deslocada e a Especificação

Pode até surpreender você, mas a pontuação deslocada faz parte do módulo de texto do CSS3. A propriedade da pontuação deslocada, contudo, está marcada como opcional, contribuindo para a sua não implementação. Na verdade, se não for implementada, essa propriedade “corre o risco de ser removida da especificação durante o período de revisão (CR) devido a não existência de implementações (corretas)”.

Uma vez que os navegadores não implementaram essa propriedade ainda, não entraremos em maiores detalhes sobre a propriedade hanging-punctuation. Contudo, se você estiver curioso, pode ler a especificação ou a visão geral do Chris Coyer para o CSS Tricks.

Sinais de Pontuação para Deslocamento

Há um pouco de informação interessante que podemos pegar da especificação. Ela detalha quais sinais de pontuação deveriam ser deslocados:

A especificação ainda diz que outros caracteres podem ser deslocados, se necessário, o que é bom, uma vez que essa lista não é final. Por exemplo, a especificação não menciona travessões, os quais a tipografia tradicional costuma deslocar.

Como recomendado em The Recovering Physicist, é muito provável que os idiomas ocidentais tradicionais só desloquem os seguintes sinais de pontuação:

Para idiomas ocidentais, sinais de pontuação como travessão, pontos, vírgulas, dois pontos, ponto e vírgula, etc, são, geralmente, deslocados à direita da margem, uma vez que eles, normalmente, não começam parágrafos ou aparecem na margem esquerda.

Trazendo A Pontuação Deslocada Para a Web

Idealmente, você deslocaria todas os sinais de pontuação qualificados que estivessem em um parágrafo de texto, mas estamos falando da web. O suporte incompleto ao CSS dificulta a implementação do deslocamento em textos alinhados à esquerda, direita e a textos justificados.

Pode ser mais fácil aplicar a pontuação deslocada em uma única margem. Por exemplo, na margem esquerda para textos alinhados à esquerda. Elementos do tipo bloco, como as tags <blockquote>, <p>, <h1> até o <h5> que comecem com sinais de pontuação qualificados, podem usar valores negativos para text-indent para deslocar a pontuação.

É interessante notar que a pontuação deslocada usando valores negativos para text-indent só permitirá deslocar sinais no começo do parágrafo. Por conta do refluxo do texto na web por contas dos variados tamanhos de tela, você nunca saberá onde sinais de pontuação ficarão. O sinal de pontuação inicial é a única pontuação que você pode ter certeza.

Em relação a esse tipo de situação, explorar as possibilidades de deslocamento da pontuação inicial pode ainda ser valioso. É uma escolha tipográfica que você, como designer pode fazer.

Veremos nesse tutorial como deslocar uma pontuação inicial nos textos ocidentais tradicionais alinhados a esquerda. Lembre-se que o código é maleável. Você pode pegar os exemplos nesse tutorial e modificá-los para adequar-se a qualquer necessidade que tiver. Tomara que, no futuro, os navegadores tenham uma forma melhor de resolver esse problema de sinais de pontuação deslocados.

Passo 1: Visão Geral Rápida

A ideia por traz da implementação da pontuação deslocada para texto alinhado a esquerda é bem simples. Use o JavaScript para encontrar todos os elementos da DOM elegíveis, isso é, que comecem com um sinal de pontuação passível de deslocamento. Quando encontrado, aplique uma classe HTML com valor negativo de text-indent ao elemento em questão.

Passo 2: Examine O Código

Vejamos um exemplo básico de código usado em um artigo simples de blog. O texto do artigo estaria disposto em títulos, subtítulos, listas e citações, todos como elementos parentes, dessa forma:

1

<article class="post">

2

<h1>Título do Artigo</h1>

3

    <p>Algum texto aqui ...</p>

4

    <p>"Um parágrafo" que começa com uma pontuação deslocável ...</p>

5

    <h2>Um subtítulo para um Artigo</h2>

6

    <p>Texto aqui ...</p>

7

    <blockquote>

8

        <p>Texto em citação ...</p>

9

        <p>Com múltiplos parágrafos ...</p>

10

    </blockquote>

11

    <p>Mais texto ...</p>

12

    <h2>"Um subtítulo" começando com Pontuação</h2>

13

    <p>Mais texto ...</p>

14

    <ul>

15

        <li>Texto em lista ...</li>

16

        <li>Segundo item da lista</li>

17

    </ul>

18

    <p>Mais texto ...</p>

19

    <p>Último parágrafo.</p>

20

</article>

Seu código pode e variará disso, que, no caso, você pode alterar depois para ajustar o JavaScript para encontrar os elementos DOM de acordo com seu código. Para esse tutorial, usaremos esse código.

Para deslocar a pontuação inicial dentro do bloco de texto, devemos primeiro delimitar quais sinais de pontuação podem ser deslocados, os quais analisamos anteriormente nesse tutorial. É importante lembrar que idiomas diferentes usam aspas (e pontuação) de formas bem diferentes. Por exemplo, vejam como o inglês e o galês usam aspas primárias e secundárias:

• Inglês: Falei para o João, “O Marcos uma vez disse, ‘Se disser a verdade, não terá de lembrar de qualquer coisa.’”
• Galês: Falei para o João, ‘O Marcos uma vez disse, “Se disser a verdade, não terá de lembrar de qualquer coisa.”’

Percebeu como são totalmente opostos? Essas diferenças são apenas o começo. Veja esses exemplos de uso de aspas primárias e secundárias em vários idiomas (você pode ver uma compilação completa na Wikipedia):

É interessante saber dessas diferenças, caso tenha de trabalhar com idiomas além do inglês ocidental. Assim saberá o que e como deslocar.

Passo 3: Preparando o CSS

Agora já temos um mínimo de código para nosso layout. Usaremos o JavaScript para analisar cada um dos objetos da DOM e encontrar aqueles que iniciam com pontuação passível de deslocamento. Para esses, aplicaremos uma classe HTML que possui uma regra de text-indent com valor negativo, que irá deslocar a pontuação para a margem esquerda.

A parte complicada começa na definição do valor para a regra text-indent. Fontes diferentes requerem valores diferentes, logo, isso requererá bastante teste e customização da sua parte. Por exemplo, uma aspa dupla inteligente (“) tem largura maior que a aspa simples inteligente (‘). Assim, se você tiver de deslocar a pontuação, o elemento da DOM que iniciar com uma aspa dupla precisará ter um valor maior para a regra text-indent que um elemento DOM começando com uma aspa simples.

Uma Nota Sobre Fontes

Não apenas o valor do text-indent será diferente dependendo do sinal de pontuação que você tiver de deslocar, também dependerá da fonte que você escolher usar. Claro, estamos falando da web, e você pode nunca ter certeza que um usuário terá uma fonte em questão. Contudo, fontes tradicionais para a web são ubíquas, enquanto as fontes não tradicionais possuem meios alternativos e garantidos de entrega aos clientes. De qualquer forma, você pode chegar bem próximo de ter certeza que todos usam a mesma fonte.

Qualquer fonte ou conjunto de fonte que usar, é interessante testar valores de text-indent com ela (e, preferivelmente, em vários tamanhos). Isso garante que suas pontuações deslocadas alinharão corretamente.

Classes de Pontuação Deslocada

Assumindo que todos os elementos de nosso artigo usam a mesma fonte, podemos configurar três classes de larguras: small (pequena), medium (média), e large (grande). Dependendo do tipo de pontuação que o parágrafo começar, nosso JavaScript aplicará uma dessas três classes ao elemento da DOM, criando, dessa forma, a pontuação deslocada!

1

.indent-small {text-indent: -.2325em}

2

.indent-medium {text-indent: -.4125em}

3

.indent-large {text-indent: -.6125em}

Perceba que estamos usando valores de medida em em. Isso garante que o text-indent sempre será relativo ao valor de font-size do texto do artigo. Assim, se a fonte aumentar, você não terá de alterar os valores de text-indent.

Classes de Pontuação Deslocada: Duas Fontes

E se estiver usando duas fontes diferentes em seu layout? Nesse exemplo, os elementos de texto do corpo (<p>, <ul> e <blockquote>) usam uma fonte sem serifa (Helvetica Neue, Arial e alternativas) enquanto os títulos (<h1>, <h2> e <h3>) usam uma outra fonte sem serifa (Source Sans Pro). Os sinais de pontuação de Source Sans Pro são, pelo design, mais largos que os da Helvetica Neue e Arial. Assim, os elementos DOM configurados com Source Sans Pro (títulos) precisam de um valor uma pouco maior para text-indent que os elementos DOM configurados com Helvetica Neue (listas, parágrafos, etc).

Isso é bem simples de ajustar, bastando criar classes adicionais específicas para os títulos. Ajustaremos o JavaScript para detectar o tipo do elemento e, então, aplicar a classe apropriada.

1

.indent-header-small {text-indent: -.325em}

2

.indent-header-medium {text-indent: -.5125em}

3

.indent-header-large {text-indent: -.7125em}

Passo 4: Configurar Uma Função no JavaScript

Agora que já temos o HTML e o CSS que precisamos, usaremos o JavaScript para descobrir quais elementos da DOM são descendentes diretos do recipiente do nosso artigo. Checaremos, então, se esses elementos DOM começam com um sinal de pontuação que deve ser deslocado.

Para começar, criaremos uma função que conterá todo nosso código. Essa função receberá um argumento, que é o elemento DOM contendo o texto que queremos analisar em busca de pontuação a deslocar, por exemplo o recipiente do artigo de um blog.

1

/*

2

 * Pontuação Deslocada

3

 * Essa função aceita um elemento DOM

4

 * pesquisa em cada um de seus descendentes e

5

 * se o elemento começar com uma pontuação deslocável,

6

 * a classe HTML apropriada é aplicada ao elemento.

7

 *

8

 * Então, o elemento DOM recebe uma classe para ativar as classes

9

 * que aplicamos.

10

 */

11

function hangPunctuation(container) {

12

// o código vai aqui

13

}

Nota: pontuação deslocada é um dos aspectos do aprimoramento progressivo. Nesse exemplo, usaremos JavaScript nativo que não é totalmente suportado em navegadores antigos (estou olhando para você, IE). Se quisesse fazer isso funcionar em navegadores antigos, você poderia. A maioria das coisas que faremos será em relação a seleção de elementos da DOM e alterar suas classes. Você poderia usar a jQuery para isso ou poderia usar alguma função auxiliar lá do site youmightnotneedjquery.com

Passo 5: Definindo os Caracteres de Pontuação

Precisamos criar uma lista das pontuações deslocáveis. Usando os caracteres que definimos antes como referência, podemos criar um objeto JavaScript definindo nossos sinais de pontuação (a partir de seus caracteres Unicode):

1

// Sinais de pontuação qualificados

2

var marks = {

3

    '\u201c': 'medium',     // “ - ldquo - aspa dupla inteligente da esquerda

4

    '\u2018': 'small',      // ‘ - lsquo - aspa simples inteligente da

5

    '\u0022': 'medium',     // " - ldquo - aspa dupla normal esquerda

6

    '\u0027': 'small',      // ' - lsquo - aspa simples normal esquerda

7

    '\u00AB': 'large',      // « - laquo - aspa dupla angular esquerda

8

    '\u2039': 'medium',     // ‹ - lsaquo - aspa simples angular esquerda

9

    '\u201E': 'medium',     // „ - bdquo - aspa dupla inteligente esquerda e baixa

10

    '\u201A': 'small',      // ‚ - sbquo - aspa simples inteligente e baixa

11

};

Como pode ver, definimos a lista de sinais de pontuação que queremos deslocar com a definição de largura correspondente que combine com nossas classes HTML. Esse objeto nos diz qual sinal de pontuação a usar no deslocamento e quão negativo deve ser o valor do text-indent. Essa lista não está completa. A beleza é que iteraremos por toda lista, assim, você pode adicionar sinais de pontuação adicionais a essa lista, se necessário.

Passo 6: Iterando por Cada Elemento da Lista

Agora, iteraremos por todos os descendentes do elemento recipiente (passado como parâmetro para a função). Para tanto, primeiramente, prepararemos a iteração a partir de um laço for:

1

// Itera sobre todos os descendentes diretos do recipiente

2

// Se for uma citação, itera sobre todos descendentes diretos também

3

for(i=0; i<container.children.length; i++) {

4

// código vai aqui

5

}

O próximo passo (dentro do laço for) criaremos uma variável chamada el que representará cada elemento descendente direto do recipiente que estamos iterando (obtenha os descendentes do elemento usando a propriedade .children):

1

var el = container.children[i];

Agora, passaremos nossa variável el para outra função (hangIfEligible()), que checará se o elemento começa com algum sinal de pontuação que pode ser deslocado. Se sim, outra função aplicará a classe ao elemento.

1

if (el.tagName === 'BLOCKQUOTE') {

2

for (var k = 0; k < el.children.length; k++) {

3

        hangIfEligible(el.children[k]);

4

    };

5

}

6

else {

7

    hangIfEligible(el);

8

}

Notou o que fizemos com a tag blockquote? Uma vez que o elemento blockquote tem seus próprios elementos que podem começar com pontuação passível de deslocamento (como uma tag <p> tag), precisamos iterar sobre seus filhos também. Logo, se o elemento atual que estamos iterando é um blockquote, iteraremos sobre cada um de seus filhos e os passaremos para a função hangIfEligible(). Se não for um blockquote, simplesmente passaremos o próprio elemento à função hangIfEligible().

Se não iterarmos, especificamente, pelos filhos do blockquote, provavelmente deixaríamos de deslocar as pontuações neles.

Nosso laço for deve parecer com isso:

1

// Itera por todos os descendentes diretos do recipiente

2

// se for uma citação, itera por todos seus descendentes diretos

3

for(i=0; i<container.children.length; i++) {

4

5

var el = container.children[i];

6

7

    if (el.tagName === 'BLOCKQUOTE') {

8

        for (var k = 0; k < el.children.length; k++) {

9

            hangIfEligible(el.children[k]);

10

        };

11

    }

12

    else {

13

        hangIfEligible(el);

14

    }

15

}

Passo 7: Deslocando a Pontuação

Passamos o elemento filho atual para a função hangIfEligible(). É a hora de definirmos como ela funciona:

1

// Verifica se o elemento passado

2

// começa com um sinal de pontuação qualificado

3

// Se começar, aplica a classe apropriada, dependendo do tipo da tag

4

function hangIfEligible(el) {

5

// código vai aqui

6

}

Como pode ver, temos uma função chamada hangIfEligible() que leva um parâmetro: o elemento DOM que verificaremos se começa em pontuação.

Obtendo o Texto do Elemento

Agora, criaremos as variáveis que precisamos. Primeiro, precisaremos pegar o texto de dentro do elemento DOM. Para tanto, usaremos a propriedade innerText do JavaScript. Como isso não funciona no Firefox, também usaremos a propriedade textContent, que funciona.

1

var text = el.innerText || el.textContent;

Preparando o Nome da Classe HTML

Como nosso exemplo usa duas fontes diferentes (uma para títulos e outra para o corpo do texto), precisaremos de duas classes diferentes para os dois tipos de elementos.

Se você se lembra, nossas classes HTML que controlam os valores negativos de text-indent seguem o padrão indent- para nomeação, e o de largura para sinais de pontuação (small, medium, ou large). Se o elemento é um título, adicionaremos header- entre eles. Assim, a classe para sinais de pontuação pequenos é a indent-small no texto normal, e indent-header-small para títulos.

Em nosso JavaScript, criaremos uma variável para nossa classe HTML e anexaremos header- depois se a tag atual é um título.

1

var htmlClass = 'indent-';

Verificando Se o Elemento Começa com Pontuação

Verificaremos e veremos se o texto em nosso elemento começa com um dos sinais de pontuação definidos anteriormente. Para tanto, iteraremos sobre cada valor em nossa variável marks onde definimos os sinais de pontuação que queremos deslocar. E, então, usaremos a propriedade indexOf do JavaScript para verificar e ver se o primeiro caractere do elemento de texto combina com nossos sinais de pontuação.

1

for(var mark in marks) {

2

if ( text.indexOf(mark) === 0 ){

3

        // se combinar, codifique aqui

4

    }

5

}

Explicando o indexOf: O indexOf do JavaScript verifica uma cadeia de caracteres onde cada caractere é um elemento de um vetor. Por exemplo, var text = 'A String' seria o equivalente a ['A', ' ', 'S', 't', 'r', 'i', 'n', 'g']. A propriedade indexOf leva como parâmetro um caractere e busca o vetor completo em busca daquele caractere. Se ele encontra, retorna a posição do primeiro elemento encontrado no vetor. Assim, em nosso caso, buscamos por algum sinal de pontuação. Se for encontrado na primeira posição do vetor (índice 0) então, nosso texto começa com uma pontuação deslocável.

Adicionando uma Classe

Tudo que temos de fazer agora é adicionar a classe ao elemento se o primeiro caractere do seu texto combina com um dos sinais de pontuação.

Em nosso exemplo, se o elemento começa com um sinal de pontuação qualificado, precisaremos verificar se o elemento atual é um título (uma vez que nossos títulos precisam de classes HTML diferenciadas). Logo, na parte que adicionamos esse comentário // se combinar, codifique aqui, substituiremos pelo trecho a seguir:

1

if (el.tagName === 'H1' || el.tagName === 'H2' || el.tagName === 'H3' || el.tagName === 'H4' || el.tagName === 'H5' )

2

htmlClass += 'header-';

3

el.classList.add(htmlClass + marks[mark]);

Viu o que fizemos? Se o elemento for qualquer tipo de título, adicionaremos header- ao nome da classe. A classe HTML que será adicionada a nossa DOM é construída dessa forma:

• indent- por padrão
• header- anexado se o elemento atual é um título
• small, medium, ou large são adicionados dependendo da largura do sinal de pontuação atual

Todo o Código Junto

All of that code together would look like this:

1

// Verifica se o elemento passado

2

// começa com um sinal de pontuação qualificado

3

// Se começar, aplica a classe apropriada, dependendo do tipo da tag

4

function hangIfEligible(el) {

5

var text = el.innerText || el.textContent;

6

    var htmlClass = 'indent-';

7

8

    for(var mark in marks) {

9

        if ( text.indexOf(mark) === 0 ){

10

            if (el.tagName === 'H1' || el.tagName === 'H2' || el.tagName === 'H3' || el.tagName === 'H4' || el.tagName === 'H5' )

11

                htmlClass += 'header-';

12

            el.classList.add(htmlClass + marks[mark]);

13

        }

14

    }

15

}

Passo 8: Execute a Função Assim Que a Página Carregar

Tudo que temos de fazer agora é executar a função quando a página carregar. Você pode fazer isso com algumas poucas linhas de código:

1

window.onload = function() {

2

var container = document.querySelector('.post')

3

    hangPunctuation( container );

4

    container.classList.add('hang-punctuation');

5

}

Viu o que fizemos? Invoque a função hangPunctuation e passe o elemento DOM do texto o qual você quer descolar a pontuação.

Note que adicionamos a classe ao elemento recipiente. Você pode usar essa classe para deslocar listas <ul>, também. Simplesmente adicione um CSS como: .hang-punctuation ul {margin:0; padding:0: list-style-position: outside;}

O Código Final

E é isso! Finalizamos! Eis o código final:

1

/*

2

 * Pontuação Deslocada

3

 * Essa função aceita um elemento DOM

4

 * pesquisa em cada um de seus descendentes e

5

 * se o elemento começar com uma pontuação deslocável,

6

 * a classe HTML apropriada é aplicada ao elemento.

7

 *

8

 * Então, o elemento DOM recebe uma classe para ativar as classes

9

 * que aplicamos.

10

 */

11

function hangPunctuation(container) {

12

13

    // Sinais de pontuação qualificados

14

    var marks = {

15

        '\u201c': 'medium',     // “ - ldquo - aspa dupla inteligente da esquerda

16

        '\u2018': 'small',      // ‘ - lsquo - aspa simples inteligente da

17

        '\u0022': 'medium',     // " - ldquo - aspa dupla normal esquerda

18

        '\u0027': 'small',      // ' - lsquo - aspa simples normal esquerda

19

        '\u00AB': 'large',      // « - laquo - aspa dupla angular esquerda

20

        '\u2039': 'medium',     // ‹ - lsaquo - aspa simples angular esquerda

21

        '\u201E': 'medium',     // „ - bdquo - aspa dupla inteligente esquerda e baixa

22

        '\u201A': 'small',      // ‚ - sbquo - aspa simples inteligente e baixa

23

    };

24

25

    // Itera por todos os descendentes diretos do recipiente

26

    // se for uma citação, itera por todos seus descendentes diretos

27

    for(i=0; i<container.children.length; i++) {

28

29

        var el = container.children[i];

30

31

        if (el.tagName === 'BLOCKQUOTE') {

32

            for (var k = 0; k < el.children.length; k++) {

33

                hangIfEligible(el.children[k]);

34

            };

35

        }

36

        else {

37

            hangIfEligible(el);

38

        }

39

    }

40

41

    // Verifica se o elemento passado

42

    // começa com um sinal de pontuação qualificado

43

    // Se começar, aplica a classe apropriada, dependendo do tipo da tag

44

    function hangIfEligible(el) {

45

        var text = el.innerText || el.textContent;

46

        var htmlClass = 'indent-';

47

48

        for(var mark in marks) {

49

            if ( text.indexOf(mark) === 0 ){

50

                if (el.tagName === 'H1' || el.tagName === 'H2' || el.tagName === 'H3' || el.tagName === 'H4' || el.tagName === 'H5' )

51

                    htmlClass += 'header-';

52

                el.classList.add(htmlClass + marks[mark]);

53

            }

54

        }

55

    }

56

}

57

58

window.onload = function() {

59

    var container = document.querySelector('.post')

60

    hangPunctuation( container );

61

    container.classList.add('hang-punctuation');

62

}

É bom lembrar que essa solução não é completa. Provavelmente, requererá alguns ajustes para cada projeto que for usada, porque cada projeto diferente nas escolhas de fontes, estrutura de código, etc. Entretanto, se estiver estruturando um texto longo, essa solução pode ajudar a adicionar um pouco de refinamento tipográfico ao seu layout.

Leitura Suplementar:

• Pontuação Deslocada no CSS Tricks
• Mark Boulton sobre Pontuação Deslocada
• Pontuação Deslocada no CSS3, por The Recovering Physicist
• Harry Roberts fala sobre marcadores de listas e citações deslocadas no Smashing Magazine

Uma Abordagem Alternativa

Desde a publicação desse artigo, outros aparecerão com suas ideias. Dê uma olhada nos comentários e verá a técnica inspiradora de Gunnar Bittersmann. O Lane Olson até combinou essa técnica com meu JavaScript para criar uma demonstração no Codepen.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!