typographer.js

Typograf.js

Ein Modul zur Anwendung bewährter typografischer Regeln auf Ihre Dokumente, um die Lesbarkeit zu verbessern.

Warum

Typografie ist eine Kunst wie eine Wissenschaft, die im Laufe der Geschichte verfeinert wurde. Typografen auf der ganzen Welt haben unermüdlich daran arbeiten, die Lesbarkeit und den Fluss von Texten zu verbessern, und haben viele Regeln entwickelt, die häufig auf den heutigen Veröffentlichungsmedien verworfen werden. Dieses Modul zielt darauf ab, diese Situation zu korrigieren.

Dies ist sehr viel in Arbeit, und Sie finden es möglicherweise nicht für Ihre eigenen Bedürfnisse geeignet. Sie können auf viele Weise dazu beitragen, dieses Projekt zu verbessern: indem Sie Pull -Anfragen einreichen, Ideen vorschlagen oder die typografischen Konventionen Ihres Landes dokumentieren.

Verwendung

 typographer ( input , configuration ) ;

input ist ein String oder ein HTML -Element (siehe Einschränkungen der HTML -Eingabe).

configuration ist ein Objekt mit den folgenden optionalen Eigenschaften:

• locale : Der zu verwendende Sprachcode. Standard ist en .
• output_format : Entweder text oder html , Format für Austausch verwendet (z. B. u00a0 oder   für nicht blockierte Räume). Standard ist text .
• disable_rules : Array von Regeln/Regeln zu deaktivieren (z. B. ['ruleset/name1', 'ruleset2/name2', 'ruleset3', ...] ).

Abhängig vom Eingabetyp gibt der Typograf entweder eine Zeichenfolge zurück (bei Verwendung einer String -Eingabe) oder aktualisiert das Element und seine Nachkommen direkt im DOM.

String -Eingabe

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

console . log ( fixed ) // 'Bonjour typographer : enchanté !'

HTML -Elementeingabe

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

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

Wir gehen in den Weltraum

Die allererste Motivation für dieses Projekt ist , wie Sie vielleicht wissen, dass es mehr als nur eine Art von Räumen gibt. Wir werden uns einige ansehen:

• Normaler Raum: Der am häufigsten verwendete Raum, den Sie erhalten, indem Sie die Space -Leiste auf Ihrer Tastatur drücken.
• Nicht bahnbrechender Raum:   Ähnlich wie der reguläre Raum, kann aber beim Wickeln nicht über zwei Linien unterbrochen werden. Beide Wörter (durch einen nicht bahnbrechenden Raum getrennt) werden immer auf derselben Zeile landen.
• Dünner Raum:   ist ein Raum schmaler als der reguläre Raum.
• Schmaler nicht bahnbrechender Raum:   ist die gleiche Größe wie der dünne Raum, kann aber nicht über zwei Linien unterbrochen werden.

Es gibt mehr als nur diese vier Arten von Räumen, aber Sie haben die Idee. Nicht bahnbrechende Räume sind wirklich nützlich, um eine seltsame Verpackung zu verhindern.

Betrachten Sie 451 °F Wäre es nicht seltsam, das Gerät auf einer separaten Linie als auf dem Wert zu haben? Dafür sind nicht bahnbrechende Räume da. Sie möchten nicht bahnbrechende Räume verwenden.

Einschränkungen

Dies kann niemals perfekt sein und es gibt viele Fälle, in denen der Typographer kämpfen wird. Zum Beispiel gibt das internationale System der Einheiten an, dass der Einheiten einen Raum (ein nicht brechens) vorausgehen sollten, aber es ist ziemlich schwierig, sicherzustellen, dass etwas eine Einheit ist. Einige Einheiten können sehr mehrdeutig sein (z. B. für Volt, können auch die römische Zahl für 5 sein).

Wir werden einen nicht bahnbrechenden Raum für Einheiten hinzufügen, von dem wir uns ziemlich sicher sind, dass Sie es Ihnen überlassen, dies für mehrdeutige zu tun.

Wenn Sie eine HTML- String -Eingabe mit einem Gebietsschema verwenden, das vor den Interpunktionszeichen nicht brechen (regelmäßig oder schmal) erfordert, sollten Sie sicherstellen, dass Ihre Zeichenfolge keine Tags enthält, die nicht wie <code> oder <Styles> wie beispielsweise <code> oder <style> enthält. Andernfalls werden Sie mit Dingen wie color : red ; Das würde Ihr Styling- oder Code -Beispiele brechen.

Die Verwendung eines HTML -Elementeingangs ist sicher, da wir Knoten herausfiltern, die nicht wie die oben genannten (und andere) transformiert werden sollten. Beachten Sie, dass wir das gesamte Containerelement überspringen, wenn ein Element in Ihrer Eingabe einige dieser Knotentypen enthält.

Wir versuchen unser Bestes, um automatisch so viel wie möglich zu reparieren, aber die Erstwirtschaft des Typographen lautet: „Im Zweifeln lassen Sie die Dinge so, wie sie sind.“

Verschiedene Länder, unterschiedliche typografische Regeln

Dies ist schwierig, die Regeln unterscheiden sich in den Ländern, und selbst in einem bestimmten Land kann es mehr als einen empfohlenen Stil geben. Standardmäßig konzentrieren wir uns auf die Anwendung unbestrittener typografischer Regeln in einem typischen 80-20-Ansatz.

Frankreich / Belgien / Schweiz (Französisch)

Hinweis: Kanada (Französisch) verwendet verschiedene Regeln für die Interpunktion.

Interpunktionsregeln

• , sollte vorher keinen Platz haben und einen regulären Raum danach.
• . sollte vorher keinen Platz und einen regulären Platz danach haben.
• : Sollte zuvor einen nicht sprechenden Raum und einen regulären Raum danach haben.
• ; sollte zuvor einen engen, nicht bahnbrechenden Raum und einen regulären Raum danach haben.
• ? sollte zuvor einen engen, nicht bahnbrechenden Raum und einen regulären Raum danach haben.
• ! sollte zuvor einen engen, nicht bahnbrechenden Raum und einen regulären Raum danach haben.
• « , ‹ Sollte vorher einen regelmäßigen Raum und einen schmalen, nicht bahnbrechenden Raum danach haben.
• » , › Sollte vorher einen schmalen, nicht sprechenden Raum und einen regulären Raum danach haben.
• “ , ' Sollte vorher einen regelmäßigen Platz haben und keinen Platz danach.
• ” , ' Sollte vorher keinen Platz haben und danach einen regulären Platz haben.
• ( Sollte einen regulären Platz vor und keinen Platz danach haben.
• ) sollte vorher keinen Platz haben und einen regulären Platz danach.
• [ Sollte einen regulären Platz vor und keinen Platz danach haben.
• ] sollte vorher keinen Platz haben und einen regulären Platz danach.
• - (Bindestrich) sollte keinen Platz vor und nach danach haben.
• — (EM, lang) oder- – en, mittel) sollten einen regelmäßigen Raum außerhalb und einen nicht bahnbrechenden Raum im Inneren haben, wenn sie sich um einen Text kombinieren.
• … , ... , oder . . . sollte vorher keinen Platz haben und einen regulären Platz danach. Außer wenn zwischen quadratischen Klammern oder Klammern, wo es keinen Platz gibt, oder danach.
• ' Sollte keinen Platz vor und nach danach haben.

Vereinigtes Königreich / Vereinigte Staaten

Interpunktionsregeln

• , sollte vorher keinen Platz haben und einen regulären Raum danach.
• . sollte vorher keinen Platz und einen regulären Platz danach haben.
• : sollte vorher keinen Platz und einen regulären Platz danach haben.
• ; sollte vorher keinen Platz und einen regulären Platz danach haben.
• ? sollte vorher keinen Platz und einen regulären Platz danach haben.
• ! sollte vorher keinen Platz und einen regulären Platz danach haben.
• “ , ' Sollte vorher einen regelmäßigen Platz haben und keinen Platz danach.
• ” , ' Sollte vorher keinen Platz haben und danach einen regulären Platz haben.
• « , ‹ Sollte vorher einen regelmäßigen Raum und einen schmalen, nicht bahnbrechenden Raum danach haben.
• » , › Sollte vorher einen schmalen, nicht sprechenden Raum und einen regulären Raum danach haben.
• ( Sollte einen regulären Platz vor und keinen Platz danach haben.
• ) sollte vorher keinen Platz haben und einen regulären Platz danach.
• [ Sollte einen regulären Platz vor und keinen Platz danach haben.
• ] sollte vorher keinen Platz haben und einen regulären Platz danach.
• - (Bindestrich) sollte keinen Platz vor und nach danach haben.
• — (em, lang) oder – (en, mittel) sollte keinen Platz haben, was noch danach ist. Der EM -Dash sollte zuvor einen Platz haben, wenn es verwendet wird, um die Quelle eines Zitats anzuzeigen.
• … , ... , oder . . . Kann vor und nach regelmäßige Räume haben, keinen Platz zuvor und einen regulären Platz danach oder einen Platz vor und keinen Platz danach.
• ' Sollte keinen Platz vor und nach danach haben.

Unterstützte Orte

In den Zeiten können Sie einfach den allgemeinen Sprachcode verwenden. Wenn Sie jedoch die angewandten Transformationen falsch finden, verwenden Sie den spezifischen Gebietsschemascode für Ihr Land. Zum Beispiel verwendet Canadian French ( fr_CA ) unterschiedliche Abstandsregeln für die Interpunktion, sodass die Verwendung fr in diesem Kontext höchstwahrscheinlich zu falschen Ergebnissen führt.

Englisch

• en - Allgemeiner Sprachcode für Englisch
• en_US - Vereinigte Staaten
• en_GB - Vereinigtes Königreich
• en_CA - Kanada
• en_AU - Australien
• en_NZ - Neuseeland
• en_IN - Indien

Französisch (Français)

• fr - Allgemeiner Sprachcode für Französisch
• fr_FR - Frankreich
• fr_BE - Belgien
• fr_CA - Kanada
• fr_CH - Schweizer
• fr_LU - Luxemburg
• fr_MC - monaco

Deutsch (Deutsch)

• de - Allgemeiner Sprachcode für Deutsch
• de_DE - Deutschland
• de_AT - Österreich
• de_BE - Belgien
• de_CH - Schweizer
• de_LI - Liechtenstein
• de_LU - luxemburg

Spanisch (Español)

• es - Allgemeiner Sprachcode für Spanisch
• es_ES - Spanien
• es_AR - Argentinien
• es_BO - Bolivien
• es_CL - Chile
• es_CO - Kolumbien
• es_CR - Costa Rica
• es_DO - Dominikanische Republik
• es_EC - Ecuador
• es_SV - El Salvador
• es_GT - Guatemala
• es_HN - Honduras
• es_MX - Mexiko
• es_NI - Nicaragua
• es_PA - Panama
• es_PY - Paraguay
• es_PE - Peru
• es_PR - Puerto Rico
• es_UY - Uruguay
• es_US - Vereinigte Staaten
• es_VE - Venezuela