download typographer.js - typographer.js Sumber Code Unduh

typographer.js

Kode sumber lainnya

1.0.0

Unduh

Typographer.js

Modul untuk menerapkan aturan tipografi yang telah teruji waktu ke dokumen Anda untuk meningkatkan keterbacaan.

Mengapa

Tipografi adalah seni, seperti halnya ilmu pengetahuan, yang telah disempurnakan selama perjalanan sejarah. Bekerja tanpa henti untuk meningkatkan keterbacaan dan aliran teks, juru tipografi di seluruh dunia telah merancang banyak aturan yang sering dibuang pada media publikasi saat ini. Modul ini bertujuan untuk memperbaiki situasi ini.

Ini adalah pekerjaan yang sedang berlangsung dan Anda mungkin tidak merasa cocok untuk kebutuhan Anda sendiri. Anda dapat berkontribusi dalam banyak cara untuk meningkatkan proyek ini: dengan mengirimkan permintaan tarik, menyarankan ide, atau mendokumentasikan konvensi tipografi negara Anda sendiri.

Penggunaan

 typographer ( input , configuration ) ;

input adalah string atau elemen HTML (lihat batasan tentang input HTML).

configuration adalah objek dengan properti opsional berikut:

locale : Kode bahasa untuk digunakan. Default adalah en .
output_format : text atau html , format yang digunakan untuk penggantian (misalnya u00a0 atau   untuk ruang yang tidak memecahkan). Default adalah text .
disable_rules : Array aturan/aturan untuk menonaktifkan (misalnya ['ruleset/name1', 'ruleset2/name2', 'ruleset3', ...] ).

Bergantung pada jenis input , tipografi akan mengembalikan string (saat menggunakan input string), atau memperbarui elemen dan keturunannya secara langsung di DOM.

Input string

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

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

Input Elemen HTML

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

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

Kami akan pergi ke luar angkasa

Motivasi pertama untuk proyek ini adalah spasi , seperti yang Anda tahu, ada lebih dari satu jenis ruang, kita akan melihat beberapa:

Ruang reguler: Ruang yang paling umum digunakan, itu adalah tempat yang Anda dapatkan dengan menekan bilah ruang pada keyboard Anda.
Ruang non-breaking:   Mirip dengan ruang biasa, tetapi tidak dapat dipecahkan di dua garis saat membungkus. Kedua kata (dipisahkan oleh ruang yang tidak memecahkan) akan selalu berakhir pada baris yang sama.
Ruang Tipis:   adalah ruang yang lebih sempit dari ruang biasa.
Ruang Non-Breaking sempit:   adalah ukuran yang sama dengan ruang tipis tetapi tidak dapat dipecah di dua garis.

Ada lebih dari sekadar keempat jenis ruang ini, tetapi Anda mendapatkan idenya. Ruang yang tidak memecahkan sangat berguna untuk mencegah pembungkus aneh.

Pertimbangkan 451 °F , bukankah aneh memiliki unit pada garis terpisah dari nilainya? Inilah tujuan spasi yang tidak pecah. Anda ingin menggunakan ruang yang tidak pecah.

Batasan

Ini tidak akan pernah sempurna dan ada banyak kasus di mana tipografi akan berjuang, misalnya, sistem unit internasional menentukan bahwa unit harus didahului oleh ruang (yang tidak melanggar), tetapi agak sulit untuk memastikan sesuatu adalah unit. Beberapa unit bisa sangat ambigu (misalnya V untuk Volt, juga bisa menjadi angka Romawi untuk 5).

Kami akan menambahkan ruang yang tidak melanggar pada unit yang cukup yakin, dan akan menyerahkan kepada Anda untuk melakukannya untuk yang ambigu.

Jika Anda menggunakan input string HTML dengan lokal yang membutuhkan ruang non-breaking (biasa atau sempit) sebelum tanda baca, Anda harus memastikan string Anda tidak berisi tag apa pun yang tidak boleh diubah, seperti <code> atau <style> misalnya. Kalau tidak, Anda akan berakhir dengan hal -hal seperti color : red ; yang akan merusak sampel gaya atau kode Anda.

Menggunakan input elemen HTML aman karena kami memfilter node yang tidak boleh diubah seperti yang di atas (dan lainnya). Perhatikan bahwa jika elemen dalam input Anda berisi beberapa jenis simpul tersebut, kami akan melewatkan seluruh elemen wadah.

Kami mencoba yang terbaik untuk secara otomatis memperbaiki sebanyak yang kami bisa, tetapi pemerintahan pertama tipografi adalah: "Ketika ragu, tinggalkan sebagaimana adanya."

Negara yang berbeda, aturan tipografi yang berbeda

Ini jika menjadi rumit, aturannya berbeda di seluruh negara, dan bahkan di negara tertentu, mungkin ada lebih dari satu gaya yang direkomendasikan. Secara default, kami akan fokus pada penerapan aturan tipografi yang tidak perlu, dalam pendekatan 80-20 yang khas.

Prancis / Belgia / Swiss (Prancis)

Catatan: Kanada (Prancis) menggunakan aturan berbeda untuk tanda baca.

Aturan tanda baca

, seharusnya tidak memiliki ruang sebelumnya, dan ruang biasa setelahnya.
. seharusnya tidak memiliki ruang sebelumnya, dan ruang biasa setelahnya.
: Harus memiliki ruang yang tidak melanggar sebelumnya, dan ruang biasa setelahnya.
; Seharusnya memiliki ruang yang tidak embel non-breaking sebelumnya, dan ruang biasa setelahnya.
? Seharusnya memiliki ruang yang tidak embel non-breaking sebelumnya, dan ruang biasa setelahnya.
! Seharusnya memiliki ruang yang tidak embel non-breaking sebelumnya, dan ruang biasa setelahnya.
« , ‹ Harus memiliki ruang reguler sebelumnya dan ruang yang tidak pecah setelahnya.
» , › Seharusnya memiliki ruang yang tidak embel non-breaking sebelumnya dan ruang reguler setelahnya.
“ , ' Seharusnya memiliki ruang biasa sebelumnya dan tidak ada ruang setelahnya.
” , ' Seharusnya tidak memiliki ruang sebelumnya dan ruang biasa setelahnya.
( Harus memiliki ruang biasa sebelumnya dan tidak ada ruang setelahnya.
) seharusnya tidak memiliki ruang sebelumnya dan ruang biasa setelahnya.
[ Harus memiliki ruang biasa sebelumnya dan tidak ada ruang setelahnya.
] seharusnya tidak memiliki ruang sebelumnya dan ruang biasa setelahnya.
- (Hyphen) seharusnya tidak memiliki ruang sebelum atau sesudahnya.
— (Em, Long) atau- – en, medium) harus memiliki ruang biasa di luar dan ruang yang tidak pecah di dalam ketika dipasangkan di sekitar beberapa teks.
… , ... , atau . . . seharusnya tidak memiliki ruang sebelumnya dan ruang biasa setelahnya. Kecuali ketika di antara tanda kurung persegi atau tanda kurung di mana seharusnya tidak ada ruang sebelum atau sesudahnya.
' seharusnya tidak memiliki ruang sebelum atau sesudahnya.

Inggris / Amerika Serikat

Aturan tanda baca

, seharusnya tidak memiliki ruang sebelumnya, dan ruang biasa setelahnya.
. seharusnya tidak memiliki ruang sebelumnya, dan ruang biasa setelahnya.
: seharusnya tidak memiliki ruang sebelumnya, dan ruang biasa setelahnya.
; seharusnya tidak memiliki ruang sebelumnya, dan ruang biasa setelahnya.
? seharusnya tidak memiliki ruang sebelumnya, dan ruang biasa setelahnya.
! seharusnya tidak memiliki ruang sebelumnya, dan ruang biasa setelahnya.
“ , ' Seharusnya memiliki ruang biasa sebelumnya dan tidak ada ruang setelahnya.
” , ' Seharusnya tidak memiliki ruang sebelumnya dan ruang biasa setelahnya.
« , ‹ Harus memiliki ruang reguler sebelumnya dan ruang yang tidak pecah setelahnya.
» , › Seharusnya memiliki ruang yang tidak embel non-breaking sebelumnya dan ruang reguler setelahnya.
( Harus memiliki ruang biasa sebelumnya dan tidak ada ruang setelahnya.
) seharusnya tidak memiliki ruang sebelumnya dan ruang biasa setelahnya.
[ Harus memiliki ruang biasa sebelumnya dan tidak ada ruang setelahnya.
] seharusnya tidak memiliki ruang sebelumnya dan ruang biasa setelahnya.
- (Hyphen) seharusnya tidak memiliki ruang sebelum atau sesudahnya.
— (em, long) atau – (en, medium) seharusnya tidak memiliki ruang sebelum atau setelah. Dash EM harus memiliki ruang sebelumnya ketika digunakan untuk menunjukkan sumber kutipan.
… , ... , atau . . . Dapat memiliki ruang biasa sebelum dan sesudah, tidak ada ruang sebelum dan ruang biasa setelahnya, atau ruang sebelumnya dan tidak ada ruang setelahnya.
' seharusnya tidak memiliki ruang sebelum atau sesudahnya.

Lokal yang didukung

Sebagian besar waktu Anda dapat menggunakan kode bahasa umum, tetapi jika Anda menemukan transformasi yang diterapkan salah, coba gunakan kode lokal spesifik untuk negara Anda. Misalnya, Canadian French ( fr_CA ) menggunakan aturan jarak yang berbeda untuk tanda baca, jadi menggunakan fr dalam konteks itu kemungkinan besar akan menghasilkan hasil yang tidak tepat.