js server text width Download - js server text width Kode Sumber Download

js server text width

Pengunduhan font

1.0.0

Unduh

JS-server-text-lebar

Modul ini menyediakan fungsi untuk menghitung lebar teks dalam piksel. Di browser Anda memiliki kemampuan di luar kotak (dengan kanvas atau dengan elemen tersembunyi) tetapi tidak di nodeJs. Ini berguna untuk rendering sisi server ketika Anda perlu memotong teks ke ukuran tetap atau untuk menggambar sesuatu di sekitar teks.

Instalasi

 npm install server-text-width

atau

 yarn add server-text-width

Fitur

Tidak ada dependensi
Bekerja di Node dan di Browser dengan cara yang sama
Mendukung Karakter Unicode (tidak hanya Latin atau ASCII)
Mendukung banyak font (font Anda sendiri juga)
mendukung beberapa ukuran font
mendukung berat font
Definisi naskah disertakan
meminimalkan ukuran data tabel

Bagaimana cara kerjanya?

Ide asli dipinjam dari https://github.com/adambisek/string-pixel-width

Buka alat khusus mappingTool.html termasuk dalam paket itu
Di alat itu pilih nama font, ukuran dan berat. Pilih juga rentang karakter Unicode.
Alat ini menghasilkan tabel Anda dengan lebar untuk setiap karakter.
Masukkan tabel ke dalam sumber Anda sebagai modul konstan dan inisialisasi dengannya.
Sekarang Anda memiliki fungsi yang dapat mengukur lebar teks.

Langkah demi langkah

Buka mappingTool.html di browser Anda. Anda dapat mengunduhnya dari github https://raw.githubusercontent.com/evgenus/js-server-text-width/main/mappingtool.html

MappingTool

Pilih Font yang ingin Anda ukur, ukuran font, berat font dan rentang karakter. Semua halaman Unicode sudah ada di sini. Anda dapat memilih berdasarkan lokal (atau lokal) yang Anda gunakan. Anda juga dapat bereksperimen dengan teks menggunakan input di atas. Semua karakter yang tidak dicakup dengan rentang unicode yang dipilih akan disorot dengan merah.

Di bagian paling bawah alat ini akan menghasilkan data tabel Anda, yang Anda butuhkan untuk dimasukkan ke dalam modul. Setiap lebar karakter diwakili dengan 2 simbol dalam pengkodean basis 64. Satu untuk integer dan satu untuk bagian fraksional (dalam karakter yang diberikan font memiliki lebar fraksional dalam piksel). Itu jauh lebih kompak daripada menyimpan data di JSON.

Dalam kode Anda, buat variabel konstan dengan nilai itu.

 const TEXT_WIDTH_LOOKUP_TABLE = {
    "Times|32px|bold|0" : "aAaAaAaAaAaAaAaAaAIAIAIAIAIAaAaAaAaAaAaAaAaAaAaAaAaAaAaAIAIAIAIAIAKqRxQAQAgAaqI5KqKqQASOIAKqIAI5QAQAQAQAQAQAQAQAQAQAKqKqSOSOSOQAdxXGVVXGXGVVTiY5Y5MdQAY5VVeMXGY5TiY5XGRzVVXGXGgAXGXGVVKqI5KqSmQAKqQARzOMRzOMKqQARzI5KqRzI5aqRzQARzRzOMMdKqRzQAXGQAQAOMMmHCMmQoaA" ,
    "Times|32px|bold|400" : "VVVVaqS9W5RzMdMdQAdkdkbRY5ZdYIY5XGVVVVS9WRVVfRUKZdZdY5WEeMY5Y5Y5TiXGVVYIbXXGY5X9e9e9Y5e9UKW5fdXGQAQAPsN7QAOMYRNTSXSXRzRRU7RzQARzRzOMPsQAXuQARbRMZzZzSuYMPiOiYORMOMOMRMN7OiMdI5IsKqXgXgRMRzSXQARzoATzYbTMgOVOXGQAjIYxfoXMrgf9Q5M3Y9WAY5QAaGTXaGTXruiRaXSunkZ1oATzXGOMKzAAAAAAAAAAAAAAY5SbVKQ7TiRzS9N7S9N7XGSdfRYRUKNTY5RzY5TEXMSbagUKY5RzdgVVjqbAXVREXGOMVVPuXGXGXiXiXGQAbxTgX9RMX9SGX9RMcKSCcKSCMdfRYRXmTAX1R9Y5SbY5SbXgSCeMVzI5XGQAXGQAgAXGVVOMVAOMVAOMfRYRUKNTQ5OqZdSXZdSXY5QAY5QAY5QAW5OiYIQAYIQAYIQAX9RMUXOie9YMUXOiXGQAXGQA" ,
    "Times|32px|bold|591" : "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALoAAKqAAAAKqAAAAKGAAaAaAaAaAaAaAaAaAQ3OsLuO3QZJiKKQIQ7J7OoORN7QXREKbKGPTQOPxOoSEQdPdO1WCQkaAaAaAaAaATGTgT3IKOu"
} ;

Catatan: Jika Anda memerlukan beberapa font, ukuran, berat atau rentang, hanya menggabungkan kamus itu secara manual. Alat ini terbatas untuk menghasilkan hanya satu set pada saat itu untuk kesederhanaan.

Kemudian cukup impor dan inisialisasi modul

 import { init } from 'server-text-width' ;

const { getTextWidth } = init ( TEXT_WIDTH_LOOKUP_TABLE ) ;

const width = getTextWidth ( 'Measure my text' ) ;