Pretext.js: 15KB Boyutuyla Metin Düzenini 500 Kat Hızlandıran Kütüphane

Kısaca

Pretext.js, DOM işlemleri yerine saf aritmetik kullanarak çok satırlı metni ölçen ve konumlandıran, sıfır bağımlılıklı bir TypeScript kütüphanesidir. Zorunlu senkron yeniden akışları ortadan kaldırır, getBoundingClientRect()'tan yaklaşık 500 kat daha hızlı metin ölçümü sağlar ve dünyadaki tüm büyük yazı sistemlerini destekler. Sanal kaydırıcılar, sohbet arayüzleri veya veri ızgaraları geliştiriyorsanız, bu kütüphane tarayıcıların 30 yıldır göz ardı ettiği bir sorunu çözer.

Giriş

JavaScript'iniz her getBoundingClientRect() çağırdığında veya offsetHeight okuduğunda, tarayıcı her şeyi durdurur. Bekleyen stil değişikliklerini temizler, düzeni yeniden hesaplar ve tam bir render geçişi zorlar. Buna zorunlu senkron yeniden akış denir ve bir tarayıcının gerçekleştirebileceği en maliyetli tek işlemdir.

Şimdi bunu sanal bir listede 1.000 sohbet balonu veya bir veri ızgarasında 10.000 satır ile çarpın. Sonuç mu? Düşen kareler, takılmalar ve uygulamanızın bozuk olduğunu düşünen kullanıcılar.

react-motion'ın (21.700'den fazla GitHub yıldızı) geliştiricisi ve Meta'da React ile ReasonML'in temel katkıcılarından Cheng Lou, bu sorunu çözmek için Pretext.js'i geliştirdi. Kütüphane Mart 2026'da yayınlandı, günler içinde 14.000'den fazla GitHub yıldızına ulaştı ve yılın en büyük Hacker News konularından birini başlattı.

Bu makale, Pretext.js'in ne yaptığını, nasıl çalıştığını, ne zaman kullanmanız gerektiğini ve eksikliklerini açıklıyor. Bu kütüphanenin teknoloji yığınıza uygun olup olmadığını bilerek ayrılacaksınız.

Pretext.js Nedir?

Pretext.js, saf bir JavaScript/TypeScript metin düzenleme motorudur. Çok satırlı metni tamamen aritmetik kullanarak ölçer ve konumlandırır; getBoundingClientRect() yok, offsetHeight yok, yeniden akış yok, takılma yok.

Temel fikir basittir. Tarayıcıya “bu metin ne kadar yüksek?” diye sormak (bu da tarayıcıyı önce onu render etmeye zorlar) yerine, Pretext.js cevabı Canvas API'den gelen font ölçülerini kullanarak matematiksel olarak hesaplar.

İşte tüm API yüzeyi:

import { prepare, layout } from '@chenglou/pretext';

// Step 1: Prepare text (one-time, cacheable)
const handle = prepare('Hello, pretext.js', '16px "Inter"');

// Step 2: Layout at any width (pure arithmetic, microseconds)
const { height, lineCount } = layout(handle, 400, 24);

Hepsi bu kadar. İki fonksiyon. Biri metin segmentlerini ölçer ve önbelleğe alır. Diğeri düzeni hesaplamak için aritmetik yapar. prepare() çağrısı, tarayıcıya (Canvas measureText() aracılığıyla) dokunan tek işlemdir. Bundan sonra, layout() saf matematiktir.

Bu, API yoğun uygulamalar için neden önemlidir?

Akış API yanıtlarını tüketen uygulamalar geliştiriyorsanız; yapay zeka asistanları, gerçek zamanlı panolar veya işbirlikçi düzenleyiciler gibi; gelen metnin yüksekliğini render etmeden önce bilmeniz gerekir. Bu olmadan, sanal kaydırıcınız takılır, sohbet arayüzünüz atlar ve kullanıcılarınız bunu fark eder.

Pretext.js size bu yüksekliği milisaniyeler yerine mikrosaniyelerde verir. Fark hızla katlanır.

Pretext.js'in Çözdüğü Sorun

Bu kütüphanenin neden var olduğunu anlamak için, JavaScript düzen özelliklerini okuduğunda ne olduğunu anlamanız gerekir.

Zorunlu Senkron Yeniden Akış Açıklaması

Bu kodu yazdığınızda:

const elements = document.querySelectorAll('.text-block');
elements.forEach(el => {
  const height = el.getBoundingClientRect().height; // REFLOW!
  // use height for positioning...
});

Her getBoundingClientRect() çağrısı tarayıcıyı şunlara zorlar:

1. JavaScript yürütmeyi duraklat
2. Bekleyen tüm stil değişikliklerini temizle
3. Tüm belge (veya alt ağaç) için düzeni yeniden hesapla
4. Hesaplanan değeri döndür

Buna “düzen takılması” denir. 1.000 öğeyi ölçen bir döngüde, tarayıcı 1.000 tam düzen yeniden hesaplaması yapar. Maliyeti mi? Yaklaşık 94 milisaniye, bu da 60fps'de 6 kare düşüşü anlamına gelir.

Sanal Kaydırma Sorunu

Sanal kaydırma kütüphanelerinin (react-window veya tanstack-virtual gibi) kaydırma konumlarını hesaplamak için her öğenin yüksekliğini bilmesi gerekir. Sabit yükseklikteki öğeler için bu önemsizdir. Değişken yükseklikteki metin içeriği için ise bir kabustur.

Standart geçici çözüm, öğeleri ekran dışında render etmek, ölçmek ve sonra konumlandırmaktır. Bu işe yarar ancak sanal kaydırmanın amacını boşa çıkarır; render etmekten kaçınmaya çalıştığınız DOM düğümlerini render etmiş olursunuz.

Bazı kütüphaneler yükseklikleri tahmin eder ve render sonrası düzeltir, bu da gözle görülür atlamalara neden olur. Diğerleri ise geliştiricileri sabit yükseklikler belirtmeye zorlayarak ne gösterebileceğinizi sınırlar.

Pretext.js bu tür tüm geçici çözümleri ortadan kaldırır. Tam metin yüksekliğini herhangi bir DOM düğümü oluşmadan önce hesaplarsınız.

Gerçek Sayılar

Pretext.js kendi sitesinde karşılaştırma sonuçlarını yayınladı:

Hız iyileşmesi, daha küçük partilerde daha çarpıcıdır çünkü DOM ölçümünün çağrı başına maliyeti sabit kalırken, Pretext'in aritmetik maliyeti doğrusal olarak artar.

Pretext.js Kaputun Altında Nasıl Çalışır?

Kütüphane üç farklı aşamada çalışır. Bunları anlamak, onu nasıl optimize edeceğinize yardımcı olur.

Aşama 1: Metin segmentasyonu

prepare() fonksiyonunu çağırdığınızda, Pretext.js önce giriş metninizi normalleştirir. Boşlukları işler, Unicode satır sonu kurallarını (UAX #14) uygular ve metni bölünebilir birimlere ayırır.

Çok dilli desteğin devreye girdiği yer burasıdır. Segmentasyon motoru şunları doğru şekilde ele alır:

• CJK karakterleri (Çince, Japonca, Korece): Her karakter geçerli bir kesme noktasıdır
• Arapça ve İbranice: Çift yönlü işaretleyicilere sahip sağdan sola metin
• Tayca: Kelimeler arasında boşluk yok, sözlük tabanlı segmentasyon gerektirir
• Hintçe/Devanagari: Karmaşık birleşik ünsüzler ve ligatürler
• Emoji: Çok kod noktalı emoji dizilerini (bayraklar, ten renkleri, ZWJ dizileri) doğru şekilde işler
• Yumuşak kısa çizgiler: ­ kesme fırsatlarına saygı duyar

Aşama 2: Canvas ölçümü

Segmentasyondan sonra, Pretext.js her segmenti Canvas measureText() API'si aracılığıyla besler. Bu, kütüphanenin yaptığı tek tarayıcı çağrısıdır ve hızlıdır çünkü Canvas metin ölçümü düzen yeniden akışını tetiklemez.

// Internal: how Pretext measures text
const ctx = offscreenCanvas.getContext('2d');
ctx.font = '16px "Inter"';
const metrics = ctx.measureText('Hello'); // No reflow!
const width = metrics.width; // Glyph advance width

Ölçümler, segment ve font kombinasyonuna göre önbelleğe alınır. Aynı metin ve font ile prepare()'ı iki kez çağırırsanız, ikinci çağrı önbelleğe alınmış verileri yeniden kullanır.

Aşama 3: Saf aritmetik düzen

layout() fonksiyonu önbelleğe alınmış segment genişliklerini ve bir konteyner genişliğini alır, ardından açgözlü bir algoritma kullanarak satır sonlarını hesaplar:

1. Toplam konteyner genişliğini aşana kadar segment genişliklerini topla
2. Yeni bir satıra geç
3. Tüm segmentler yerleştirilene kadar tekrarla
4. Toplam yüksekliği elde etmek için satır sayısını satır yüksekliğiyle çarp

DOM yok. Canvas yok. Saf toplama ve karşılaştırma.

Bu yüzden layout() çok hızlıdır; bir cetvel ve hesap makinesiyle kağıda yazacağınız aynı matematiği yapıyor.

Yeniden Kullanılabilir İşleyici Deseni

Pretext.js'deki en iyi tasarım kararlarından biri, prepare()'ın yeniden kullanılabilir bir işleyici döndürmesidir. Tek bir prepare() çağrısı tüm konteyner genişliklerinde çalışır:

const handle = prepare(longArticleText, '16px "Inter"');

// Compute height for mobile, tablet, and desktop in microseconds
const mobile = layout(handle, 375, 24);   // { height: 2400, lineCount: 100 }
const tablet = layout(handle, 768, 24);   // { height: 1200, lineCount: 50 }
const desktop = layout(handle, 1200, 24); // { height: 720, lineCount: 30 }

Bu desen, duyarlı tasarım hesaplamaları için mükemmeldir. Bir kez ölçer ve istediğiniz genişlikte anında düzenlersiniz.

Pratik Kullanım Durumları

1. Değişken Yüksekliğe Sahip Metinle Sanal Kaydırma

Bu, birincil kullanım durumudur. Pretext.js'i sanal bir kaydırıcıyla nasıl entegre edeceğiniz aşağıdadır:

import { prepare, layout } from '@chenglou/pretext';

interface TextItem {
  id: string;
  content: string;
}

function computeHeights(items: TextItem[], containerWidth: number) {
  return items.map(item => {
    const handle = prepare(item.content, '14px "Inter"');
    const { height } = layout(handle, containerWidth, 20);
    return { id: item.id, height: height + 32 }; // +32 for padding
  });
}

// 10,000 items measured in ~4ms
const heights = computeHeights(chatMessages, 600);

Ekran dışı render yok. Yükseklik tahmini yok. Öğeler görünür hale geldiğinde gözle görülür atlamalar yok.

2. Yapay Zeka Sohbet Arayüzleri

Yapay zeka asistanları yanıtları jeton jeton akışla sağlar. Her yeni jeton satır sayısını değiştirebilir ve altındaki her şeyi kaydırabilir. Geleneksel DOM ölçümüyle, her jeton güncellemesi bir yeniden akış tetikler.

Pretext.js ile, her parça geldikten sonra DOM'a dokunmadan yüksekliği yeniden hesaplarsınız:

let streamedText = '';
const font = '15px "SF Pro"';

socket.on('token', (token: string) => {
  streamedText += token;
  const handle = prepare(streamedText, font);
  const { height } = layout(handle, bubbleWidth, 22);
  
  // Update virtual scroller position without DOM measurement
  scroller.updateItemHeight(messageId, height + padding);
});

3. Metin Sütunlu Veri Izgaraları

Elektronik tablo tarzı uygulamalar sütunların otomatik boyutlandırılmasına ihtiyaç duyar. DOM aracılığıyla binlerce hücre değerini ölçmek maliyetlidir. Pretext.js bunu hızlı hale getirir:

function computeColumnWidth(values: string[], font: string, padding: number) {
  let maxWidth = 0;
  for (const value of values) {
    const handle = prepare(value, font);
    // Layout with infinite width = single line = natural text width
    const { height } = layout(handle, Infinity, 20);
    // Use handle's internal width tracking for column sizing
    maxWidth = Math.max(maxWidth, /* computed width */);
  }
  return maxWidth + padding;
}

4. Çok Dilli İçerik Akışları

Karışık komut dosyası içeriğine sahip (Çince gönderileri, ardından Arapça yanıtları, ardından Korece yorumları) sosyal medya akışları, her komut dosyasının farklı satır sonu kuralları olduğu için sanallaştırılması oldukça zordur.

Pretext.js, hepsini aynı API ile işler:

const posts = [
  { text: 'This library changed everything', lang: 'en' },
  { text: 'RTL text with correct bidirectional layout', lang: 'ar' },
  { text: 'CJK text gets proper character-level breaks', lang: 'zh' },
];

// Same API, correct results for every script
posts.forEach(post => {
  const handle = prepare(post.text, '16px system-ui');
  const { height } = layout(handle, 400, 24);
});

Apidog ile Metin Düzeninizi Test Etme

API'ler tarafından desteklenen metin yoğun arayüzler oluştururken, düzeni doğru yapmak savaşın sadece yarısıdır. Metin bileşenlerinize veri sağlayan API yanıtlarının doğru veriyi, doğru formatta ve doğru hızda teslim ettiğini de doğrulamanız gerekir.

Apidog bunu kolaylaştırır. Pretext.js entegrasyonunuzun aşamalı metin yüklemesini nasıl ele aldığını test etmek için akış API yanıtlarını taklit edebilirsiniz. Farklı metin uzunlukları, diller ve Unicode uç durumlarıyla test senaryoları oluşturun, ardından dağıtımdan önce sanal kaydırıcınızın doğru davrandığını doğrulayın.

Yapay zeka sohbet ürünleri geliştiren ekipler için Apidog'un API test ortamı şunları yapmanızı sağlar:

• Gerçek LLM çıktısını simüle etmek için parçalanmış metinle akış yanıtlarını taklit edin
• Kullanıcılar hata yapmadan önce düzen hatalarını yakalamak için çok dilli yüklerle test edin
• Metin alanlarının beklenen formatı içerdiğini doğrulamak için yanıt şemalarını doğrulayın
• Metin render etme uç durumlarınızı kapsayan otomatik test paketlerini çalıştırın

Bu önemlidir çünkü bir metin düzenleme kütüphanesi, içine akan veriler kadar iyidir. Ölçüm motorunuz ne kadar hızlı çalışırsa çalışsın, çöp API yanıtları çöp düzenler üretir.

Bilinen Sınırlamalar ve Eleştiriler

Pretext.js mükemmel değildir. Hacker News başlığı, onu benimsemeden önce bilmeye değer birkaç geçerli endişeyi ortaya çıkardı.

Render Etme Doğruluğu Uç Durumları

Birden fazla kullanıcı, Safari ve Chrome demolarında metnin sınırlayıcı kutuların dışına taştığını bildirdi. Kütüphanenin aritmetiği, belirli senaryolarda tarayıcının doğal düzeninden sapabilir:

• Alışılmadık karakter aralıklarına sahip yazı tipleri
• Tek bir blok içinde karışık yazı tipi boyutlarına sahip metin
• Canvas ve DOM arasındaki alt piksel render etme farklılıkları
• Tarayıcıya özgü metin şekillendirme gariplikleri

Bu uç durumlar, sanal kaydırma için (birkaç piksellik hatanın görünmez olduğu durumlarda) daha az önemliyken, piksel mükemmelliğinde dizgi için daha önemlidir.

Canvas ölçümü bedava değil

prepare() çağrısı hala tarayıcının Canvas metin motoruna ulaşır. Kare başına binlerce benzersiz prepare() işleyicisi oluşturan uygulamalar için bu bir darboğaz haline gelebilir. Çözüm önbellekleme ve toplu işlem yapmaktır, ancak kütüphane bunlardan hiçbirini zorunlu kılmaz.

CSS özelliği desteği yok

Pretext.js, bir font belirtimi ile ham metni ölçer. Düzeni etkileyen CSS özelliklerini dikkate almaz:

• letter-spacing
• word-spacing
• text-indent
• text-transform
• font-feature-settings
• font-variant

Metin stiliniz bu CSS özelliklerine dayanıyorsa, hesaplanan yükseklik tarayıcının render ettiğiyle eşleşmeyecektir. Bunları manuel olarak hesaba katmanız veya tutarsızlığı kabul etmeniz gerekir.

DOM render etmeyi değiştirmez

Pretext.js size metnin ne kadar uzun olacağını söyler. Metni sizin için render etmez. Metni görüntülemek için hala DOM düğümlerine (veya Canvas/SVG render etmeye) ihtiyacınız vardır. Kütüphanenin değeri ölçüm aşamasındadır, render etme aşamasında değil.

Pretext.js vs. Geleneksel Yaklaşımlar

Doğru seçim kısıtlamalarınıza bağlıdır. Piksel mükemmelliğinde doğruluk ve CSS özelliği desteğine ihtiyacınız varsa, DOM ölçümü hala temel gerçektir. Binlerce öğe arasında hıza ihtiyacınız varsa ve küçük alt piksel farklılıklarını tolere edebiliyorsanız, Pretext.js büyük bir farkla kazanır.

Başlarken

Kurulum

npm install @chenglou/pretext
# or
pnpm add @chenglou/pretext
# or
bun add @chenglou/pretext

Temel kullanım

import { prepare, layout } from '@chenglou/pretext';

// Measure a paragraph
const handle = prepare(
  'Pretext.js computes text layout without touching the DOM.',
  '16px "Inter"'
);

// Get height at a specific container width
const result = layout(handle, 600, 24);
console.log(result.height);    // e.g., 48 (2 lines x 24px)
console.log(result.lineCount); // e.g., 2

React ile entegrasyon

import { prepare, layout } from '@chenglou/pretext';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useMemo, useRef } from 'react';

function VirtualChat({ messages }: { messages: string[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
  const containerWidth = 600;
  const font = '14px "Inter"';
  const lineHeight = 20;

  const heights = useMemo(() => {
    return messages.map(msg => {
      const handle = prepare(msg, font);
      const { height } = layout(handle, containerWidth, lineHeight);
      return height + 24; // padding
    });
  }, [messages]);

  const virtualizer = useVirtualizer({
    count: messages.length,
    getScrollElement: () => parentRef.current,
    estimateSize: (index) => heights[index],
  });

  return (
    <div ref={parentRef} style={{ height: '100vh', overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.key}
            style={{
              position: 'absolute',
              top: virtualRow.start,
              width: containerWidth,
            }}
          >
            {messages[virtualRow.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

Bu size, herhangi bir mesaj DOM'a render edilmeden önce hesaplanmış doğru öğe yükseklikleriyle sanal bir sohbet sunar. Tahmin yok, düzeltme atlamaları yok, yeniden akış yok.

Etkileşimli oyun alanı

Pretext.js web sitesi, metin yapıştırabileceğiniz, yazı tiplerini seçebileceğiniz, kapsayıcı genişliğini ayarlayabileceğiniz ve düzen hesaplamasını gerçek zamanlı olarak görebileceğiniz pretextjs.dev/playground adresinde etkileşimli bir oyun alanı içerir. Entegrasyondan önce davranışı doğrulamak için en hızlı yoldur.

Pretext.js'i ne zaman kullanmamalısınız?

Pretext.js, her metin ölçüm problemi için doğru araç değildir:

• Bilinen içeriğe sahip statik sayfalar: Metniniz değişmiyorsa ve sanallaştırma yapmıyorsanız, CSS düzeni iyi halleder. Kütüphaneye gerek yok.
• Piksel mükemmelliğinde baskı düzenleri: Canvas ölçümü ile DOM render etme arasındaki alt piksel farklılıkları baskı çözünürlüğünde önemlidir. DOM'u temel gerçek olarak kullanın.
• Yoğun CSS metin stili: `letter-spacing`, `text-indent` veya `font-feature-settings` gibi özelliklere güveniyorsanız, yükseklik hesaplamaları render edilmiş çıktıdan sapacaktır.
• Sunucu tarafı render etme: Pretext.js, `node-canvas` gibi polyfill'ler olmadan Node.js'de bulunmayan Canvas API'ye bağlıdır. Sunucu tarafı desteği yol haritasında yer alsa da henüz yayınlanmamıştır.
• Küçük, statik listeler: Bir listede 50 öğeniz varsa, DOM ölçümü 5ms'den daha kısa sürer. Optimizasyon bağımlılığa değmez.

Sıkça Sorulan Sorular

Pretext.js üretim için hazır mı?

Kütüphane Mart 2026'da yayınlandı ve günler içinde 14.000'den fazla GitHub yıldızına ulaştı. Yaratıcısı Cheng Lou, milyonlarca kullanıcıya hizmet veren bir üretim sistemi olan Midjourney'nin ön ucunu yönetiyor. Kütüphanenin test paketi düzinelerce dil ve uç durumu kapsıyor. Bununla birlikte, yeni bir sürüm. Sürümünüzü sabitleyin ve belirli yazı tiplerinize ve içeriğinize göre test edin.

Pretext.js, React, Vue ve Svelte ile çalışıyor mu?

Evet. Pretext.js çerçeveden bağımsızdır. İki fonksiyona sahip saf bir TypeScript kütüphanesidir. Metin ölçümlerine ihtiyacınız olan her yerde prepare() ve layout() çağırabilirsiniz; React hook'ları içinde, Vue composable'larında, Svelte store'larında veya düz JavaScript'te.

Pretext.js web fontlarını nasıl işler?

prepare() fonksiyonu, çağrı anında tarayıcının yüklediği herhangi bir yazı tipini kullanarak metni ölçer. Web yazı tipiniz henüz yüklenmediyse, ölçüm yedek yazı tipini kullanacak ve yanlış sonuçlar verecektir. prepare() çağrılmadan önce yazı tiplerinizin yüklendiğinden emin olun. Doğrulamak için Font Loading API'sini (document.fonts.ready) kullanın.

Pretext.js'i Canvas veya SVG render etme için kullanabilir miyim?

Evet. Kütüphane, render hedefinden bağımsız metin düzenini hesaplar. Hesaplanan yükseklikleri ve satır sonlarını Canvas 2D, WebGL, SVG veya DOM'da metni konumlandırmak için kullanabilirsiniz. Pretext.js web sitesi tüm bu render hedeflerinin örneklerini göstermektedir.

RTL (sağdan sola) dilleri destekliyor mu?

Evet. Pretext.js, Arapça, İbranice ve diğer RTL komut dosyalarını uygun çift yönlü metin desteğiyle işler. Ayrıca karışık yönlü metinleri (örneğin, gömülü İngilizce kelimelerle Arapça metin) de doğru şekilde işler.

Paket boyutu ne kadar?

Sıfır bağımlılıkla 15KB küçültülmüş. Polyfill gerektirmez. Kütüphane yalnızca standart tarayıcı API'lerini (Canvas measureText() ve mevcut olduğunda Intl.Segmenter) kullanır.

DOM ölçümüyle karşılaştırıldığında ne kadar doğru?

Çoğu metin içeriği için Pretext.js, DOM düzeniyle 1-2 piksel içinde eşleşir. Doğruluk, kullandığınız yazı tipi ve CSS özelliklerine bağlıdır. `letter-spacing` ve `word-spacing` gibi özellikler dikkate alınmaz, bu nedenle bunları kullanırsanız daha büyük farklılıklar bekleyin. Birkaç piksellik hatanın görünmez olduğu sanal kaydırma için doğruluk fazlasıyla yeterlidir.

Pretext.js stilize edilmiş metinleri (kalın, italik, karışık boyutlar) ölçebilir mi?

Her prepare() çağrısı tek bir font belirtimi alır. Karışık stillere sahip metinler için (normal metin içindeki kalın kelimeler), metni kendiniz segmentlere ayırmanız ve her stil çalıştırması için ayrı işleyiciler oluşturmanız gerekir. Bu, gelecek sürümlerde ele alınabilecek bilinen bir sınırlamadır.

Sonuç

Pretext.js, tarayıcıların otuz yıldır göz ardı ettiği bir sorunu çözüyor: DOM yeniden akışı olmadan hızlı, doğru metin ölçümü. Sanal kaydırıcılar, sohbet arayüzleri, veri ızgaraları veya binlerce metin bloğunu ölçmesi gereken herhangi bir arayüz geliştiren geliştiriciler için bu kütüphane, tüm bir geçici çözüm kategorisini iki fonksiyon çağrısıyla değiştiriyor.

Kütüphane sihirli bir değnek değildir. Yazı tipi belirtiminin ötesinde CSS metin özelliklerini desteklemez, küçük alt piksel doğruluk farklılıkları vardır ve henüz sunucu tarafında çalışmaz. Ancak hedef kullanım durumu için; sanallaştırılmış listeler için metin yüksekliklerini önceden hesaplamak; hiçbir şey bu kadar yaklaşamaz.

Daha hızlı metin yoğun arayüzler oluşturmaya hazır mısınız? Veri katmanınızın sağlam olduğundan emin olmak için API uç noktalarınızı Apidog ile test ederek başlayın, ardından Pretext.js'i render etme hattınıza ekleyin.