Download do typographer.js - typographer.js Download de código fonte

typographer.js

Outro código-fonte

1.0.0

Baixar

typographer.js

Um módulo para aplicar regras tipográficas testadas pelo tempo em seus documentos para melhorar a legibilidade.

Por que

A tipografia é uma arte, tanto quanto uma ciência, que foi refinada ao longo da história. Trabalhando incansavelmente para melhorar a legibilidade e o fluxo do texto, os tipógrafos em todo o mundo criaram muitas regras que geralmente são descartadas nos meios de publicação atuais. Este módulo tem como objetivo corrigir essa situação.

Este é um trabalho em andamento e você pode não achar adequado para suas próprias necessidades. Você pode contribuir de várias maneiras para melhorar este projeto: enviando solicitações de tração, sugerindo idéias ou documentando as convenções tipográficas do seu país.

Uso

 typographer ( input , configuration ) ;

input é uma string ou um elemento HTML (consulte as limitações sobre a entrada HTML).

configuration é um objeto com as seguintes propriedades opcionais:

locale : o código do idioma a ser usado. O padrão é en .
output_format : text ou html , formato usado para substituições (por exemplo u00a0 ou   para espaços não quebrantes). O padrão é text .
disable_rules : Matriz de regras/regras para desativar (por exemplo ['ruleset/name1', 'ruleset2/name2', 'ruleset3', ...] ).

Dependendo do tipo de entrada , o tipógrafo retornará uma string (ao usar uma entrada de string) ou atualizará o elemento e seus descendentes diretamente no DOM.

Entrada de string

 const fixed = typographer (
  'Bonjour typographer: enchanté !' ,
  {
    locale : 'fr_FR' ,
    output_format : 'html'
  }
) ;

console . log ( fixed ) // 'Bonjour typographer&nbsp;: enchanté&#8239;!'

Entrada do elemento HTML

 const elements = document . querySelectorAll ( '.fixTypography' )

[ ] . forEach . call ( elements , element => {
  typographer (
    element ,
    {
      locale : 'fr_FR' ,
      output_format : 'html'
    }
  ) ;
} ) ;

Estamos indo para o espaço

A primeira motivação para este projeto são os espaços , como você deve saber, há mais do que apenas um tipo de espaços, examinaremos alguns:

Espaço regular: o espaço mais usado, é o que você recebe pressionando a barra de espaço no teclado.
espaço sem quebra:   Semelhante ao espaço regular, mas não pode ser quebrado em duas linhas ao embrulhar. Ambas as palavras (separadas por um espaço sem quebra) sempre acabam na mesma linha.
Espaço fino:   é um espaço mais estreito que o espaço regular.
Espaço estreito sem quebra:   tem o mesmo tamanho do espaço fino, mas não pode ser quebrado em duas linhas.

Existem mais do que apenas esses quatro tipos de espaços, mas você entendeu. Os espaços não quebrantes são realmente úteis para evitar embalagens estranhas.

Considere 451 °F , não seria estranho ter a unidade em uma linha separada que o valor? É para isso que servem os espaços que não são de quebrar. Você quer usar espaços não quebrantes.

Limitações

Isso nunca pode ser perfeito e há muitos casos em que o tipógrafo terá dificuldades, por exemplo, o sistema internacional de unidades especifica que as unidades devem ser precedidas por um espaço (não quebra-a), mas é bastante difícil garantir que algo seja uma unidade. Algumas unidades podem ser muito ambíguas (por exemplo, Volt, também podem ser o número romano para 5).

Adicionaremos um espaço sem quebra em unidades das quais temos certeza e deixaremos você fazê-lo para os ambíguos.

Se você usar uma entrada de string html com um local que requer espaços não quebrantes (regulares ou estreitos) antes dos sinais de pontuação, verifique se sua sequência não contém tags que não devem ser transformadas, como <code> ou <style> , por exemplo. Caso contrário, você acabará com coisas como color : red ; o que quebraria suas amostras de estilo ou código.

O uso de uma entrada do elemento HTML é seguro, pois filtramos nós que não devem ser transformados como os acima mencionados (e outros). Observe que, se um elemento dentro da sua entrada contiver alguns desses tipos de nós, ignoraremos o elemento inteiro do contêiner.

Tentamos o nosso melhor para corrigir automaticamente o máximo que pudermos, mas a primeira regra do tipógrafa é: "Em caso de dúvida, deixe as coisas como elas são".

Países diferentes, regras tipográficas diferentes

Isso é que fica complicado, as regras diferem entre os países e, mesmo em um determinado país, pode haver mais de um estilo recomendado. Por padrão, focaremos na aplicação de regras tipográficas indiscutíveis, em uma abordagem típica de 80-20.

França / Bélgica / Suíça (francês)

Nota: O Canadá (francês) usa regras diferentes para pontuação.

Regras de pontuação

, não deveria ter espaço antes e um espaço regular depois.
. Não deveria ter espaço antes e um espaço regular depois.
: Deve ter um espaço sem quebra antes e um espaço regular depois.
; Deveria ter um espaço estreito sem quebra antes e um espaço regular depois.
? Deveria ter um espaço estreito sem quebra antes e um espaço regular depois.
! Deveria ter um espaço estreito sem quebra antes e um espaço regular depois.
« , ‹ Deve ter um espaço regular antes e um espaço estreito sem quebra depois.
» , › Deve ter um espaço estreito sem quebra antes e um espaço regular depois.
“ , ' Deveria ter um espaço regular antes e sem espaço depois.
” , ' Não deveria ter espaço antes e um espaço regular depois.
( Deve ter um espaço regular antes e sem espaço depois.
) não deve ter espaço antes e um espaço regular depois.
[ Deve ter um espaço regular antes e sem espaço depois.
] não deve ter espaço antes e um espaço regular depois.
- (hífen) não deve ter espaço antes nem depois.
— (Em, longa) ou- – pt, médio) deve ter um espaço regular do lado de fora e um espaço sem quebra no interior quando combinado em torno de algum texto.
… , ... , ou . . . Deveria não ter espaço antes e um espaço regular depois. Exceto quando entre colchetes ou parênteses, onde não deve haver espaço antes nem depois.
' Não deveria ter espaço antes nem depois.

Reino Unido / Estados Unidos

Regras de pontuação

, não deveria ter espaço antes e um espaço regular depois.
. Não deveria ter espaço antes e um espaço regular depois.
: Não deveria ter espaço antes e um espaço regular depois.
; Não deveria ter espaço antes e um espaço regular depois.
? Não deveria ter espaço antes e um espaço regular depois.
! Não deveria ter espaço antes e um espaço regular depois.
“ , ' Deveria ter um espaço regular antes e sem espaço depois.
” , ' Não deveria ter espaço antes e um espaço regular depois.
« , ‹ Deve ter um espaço regular antes e um espaço estreito sem quebra depois.
» , › Deve ter um espaço estreito sem quebra antes e um espaço regular depois.
( Deve ter um espaço regular antes e sem espaço depois.
) não deve ter espaço antes e um espaço regular depois.
[ Deve ter um espaço regular antes e sem espaço depois.
] não deve ter espaço antes e um espaço regular depois.
- (hífen) não deve ter espaço antes nem depois.
— (Em, longa) ou – (pt, médio) não deve ter espaço antes nem depois. O EM Dash deve ter um espaço antes, quando usado para indicar a fonte de uma cotação.
… , ... , ou . . . pode ter espaços regulares antes e depois, sem espaço antes e um espaço regular depois, ou um espaço antes e sem espaço depois.
' Não deveria ter espaço antes nem depois.

Locais apoiados

Na maioria das vezes, você pode simplesmente usar o código de idioma geral, mas se encontrar as transformações aplicadas incorretas, tente usar o código de localidade específico para o seu país. Por exemplo, o francês canadense ( fr_CA ) usa diferentes regras de espaçamento para pontuação; portanto, o uso de fr nesse contexto provavelmente produzirá resultados impróprios.