typographer.js Téléchargement - typographer.js Téléchargement du code source

typographer.js

Autre code source

1.0.0

Télécharger

typographe.js

Un module pour appliquer des règles typographiques éprouvées à vos documents afin d'améliorer la lisibilité.

Pourquoi

La typographie est un art, autant qu'une science, qui a été raffinée au cours de l'histoire. Travaillant sans relâche pour améliorer la lisibilité et le flux du texte, les typographes du monde entier ont conçu de nombreuses règles qui sont souvent rejetées sur les supports de publication d'aujourd'hui. Ce module vise à corriger cette situation.

C'est vraiment un travail en cours et vous ne le trouverez peut-être pas adapté à vos propres besoins. Vous pouvez contribuer de nombreuses façons d'améliorer ce projet: en soumettant des demandes de traction, en suggérant des idées ou en documentant les propres conventions typographiques de votre pays.

Usage

 typographer ( input , configuration ) ;

input est une chaîne ou un élément HTML (voir Limitations concernant l'entrée HTML).

configuration est un objet avec les propriétés optionnelles suivantes:

locale : le code linguistique à utiliser. La valeur par défaut est en .
output_format : text ou html , format utilisé pour les remplacements (par exemple u00a0 ou   pour les espaces non révolutionnaires). La valeur par défaut est text .
disable_rules : tableau de règles / ensembles de règles à désactiver (par exemple ['ruleset/name1', 'ruleset2/name2', 'ruleset3', ...] ).

Selon le type d'entrée , le typographe renvoie une chaîne (lors de l'utilisation d'une entrée de chaîne), soit mettre à jour l'élément et ses descendants directement dans le DOM.

Entrée de chaîne

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

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

Entrée de l'élément HTML

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

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

Nous allons à l'espace

La toute première motivation pour ce projet est les espaces , comme vous le savez peut-être, il y a plus qu'un seul type d'espaces, nous en examinerons quelques-uns:

Espace régulier: L'espace le plus utilisé, c'est celui que vous obtenez en appuyant sur la barre d'espace sur votre clavier.
Espace non révolutionnaire:   Semblable à l'espace ordinaire, mais ne peut pas être brisé sur deux lignes lors de l'emballage. Les deux mots (séparés par un espace non révolutionnaire) finiront toujours sur la même ligne.
Espace mince:   est un espace plus étroit que l'espace ordinaire.
Espace non révolutionnaire étroit:   est de la même taille que l'espace mince mais ne peut pas être brisé sur deux lignes.

Il y a plus que ces quatre types d'espaces, mais vous avez l'idée. Les espaces non révolutionnaires sont vraiment utiles pour éviter un enveloppement étrange.

Considérez 451 °F , ne serait-il pas bizarre d'avoir l'unité sur une ligne séparée que la valeur? C'est à cela que servent les espaces non révolutionnaires. Vous souhaitez utiliser des espaces non révolutionnaires.

Limites

Cela ne peut jamais être parfait et il y a beaucoup de cas où le typographe aura du mal, par exemple, le système international d'unités spécifie que les unités devraient être précédées d'un espace (non révolutionnaire), mais il est assez difficile de s'assurer que quelque chose est une unité. Certaines unités peuvent être très ambiguës (par exemple V pour Volt, peuvent également être le chiffre romain pour 5).

Nous ajouterons un espace non révolutionnaire sur les unités dont nous sommes à peu près sûrs, et vous laisserons le faire pour le faire pour des ambigus.

Si vous utilisez une entrée de chaîne HTML avec un paramètre régional qui nécessite des espaces non révolutionnaires (réguliers ou étroits) avant les panneaux de ponctuation, vous devez vous assurer que votre chaîne ne contient pas de balises qui ne doivent pas être transformées, comme <code> ou <style> par exemple. Sinon, vous vous retrouverez avec des choses comme color : red ; qui casserait vos échantillons de style ou de code.

L'utilisation d'une entrée d'élément HTML est sûre car nous filtrons les nœuds qui ne doivent pas être transformés comme ceux susmentionnés (et autres). Notez que si un élément dans votre entrée contient certains de ces types de nœuds, nous sauterons l'élément de conteneur entier.

Nous faisons de notre mieux pour réparer automatiquement autant que possible, mais la première règle de typographe est: «En cas de doute, laissez les choses telles qu'elles sont.»

Différents pays, différentes règles typographiques

C'est si il est difficile, les règles diffèrent d'un pays à l'autre, et même dans un pays donné, il peut y avoir plus d'un style recommandé. Par défaut, nous nous concentrerons sur l'application de règles typographiques incontestées, dans une approche typique de 80-20.

France / Belgique / Suisse (français)

Remarque: Le Canada (français) utilise différentes règles pour la ponctuation.

Règles de ponctuation

, ne devrait pas avoir d'espace auparavant et un espace régulier après.
. ne devrait pas avoir d'espace avant et un espace régulier après.
: devrait avoir un espace non révolutionnaire auparavant et un espace régulier après.
; devrait avoir un espace étroit non décomposé auparavant et un espace régulier après.
? devrait avoir un espace étroit non décomposé auparavant et un espace régulier après.
! devrait avoir un espace étroit non décomposé auparavant et un espace régulier après.
« , ‹ Devrait avoir un espace régulier avant et un espace étroit non décomposable après.
» , › Devrait avoir un espace étroit non ruine avant et un espace régulier après.
“ , ' Devrait avoir un espace régulier avant et aucun espace après.
” , ' Ne devrait pas avoir d'espace avant et un espace régulier après.
( devrait avoir un espace régulier avant et aucun espace après.
) ne devrait pas avoir d'espace avant et un espace régulier après.
[ devrait avoir un espace régulier avant et aucun espace après.
] ne devrait pas avoir d'espace avant et un espace régulier après.
- (Hyphen) ne devrait pas avoir d'espace avant ni après.
— (em, long) ou – (en, moyen) devrait avoir un espace régulier à l'extérieur et un espace non révolutionnaire à l'intérieur lorsqu'il est associé à un texte.
… , ... , ou . . . ne devrait pas avoir d'espace avant et un espace régulier après. Sauf en cas de crochets ou de parenthèses où il ne devrait y avoir aucun espace avant ni après.
' ne devrait pas avoir d'espace avant ni après.

Royaume-Uni / États-Unis

Règles de ponctuation

, ne devrait pas avoir d'espace auparavant et un espace régulier après.
. ne devrait pas avoir d'espace avant et un espace régulier après.
: ne devrait pas avoir d'espace avant et un espace régulier après.
; ne devrait pas avoir d'espace avant et un espace régulier après.
? ne devrait pas avoir d'espace avant et un espace régulier après.
! ne devrait pas avoir d'espace avant et un espace régulier après.
“ , ' Devrait avoir un espace régulier avant et aucun espace après.
” , ' Ne devrait pas avoir d'espace avant et un espace régulier après.
« , ‹ Devrait avoir un espace régulier avant et un espace étroit non décomposable après.
» , › Devrait avoir un espace étroit non ruine avant et un espace régulier après.
( devrait avoir un espace régulier avant et aucun espace après.
) ne devrait pas avoir d'espace avant et un espace régulier après.
[ devrait avoir un espace régulier avant et aucun espace après.
] ne devrait pas avoir d'espace avant et un espace régulier après.
- (Hyphen) ne devrait pas avoir d'espace avant ni après.
— (em, long) ou – (en, moyen) ne devrait avoir aucun espace avant ni après. Le tableau de bord EM doit avoir un espace avant lorsqu'il est utilisé pour indiquer la source d'une citation.
… , ... , ou . . . Peut avoir des espaces réguliers avant et après, pas d'espace avant et un espace régulier après, ou un espace avant et pas d'espace après.
' ne devrait pas avoir d'espace avant ni après.

Locules soutenues

La plupart du temps, vous pouvez simplement utiliser le code de la langue générale, mais si vous trouvez les transformations appliquées incorrectes, essayez d'utiliser le code local spécifique pour votre pays. Par exemple, le français canadien ( fr_CA ) utilise différentes règles d'espacement pour la ponctuation, donc l'utilisation fr dans ce contexte donnera très probablement des résultats inappropriés.