SVG textLength: adatta le etichette senza deformarle

Usa textLength con lengthAdjust="spacing" quando un'etichetta SVG richiede una lunghezza precisa e una piccola correzione della spaziatura è accettabile. Le forme dei glifi rimangono invariate. Se scegli spacingAndGlyphs, il renderer può allungare o comprimere le lettere stesse lungo la riga di testo. Queste sono le due modalità definite dalla specifica del testo SVG.

La difficoltà è il valore di destinazione: textLength è una lunghezza richiesta, non una larghezza massima. Può allargare un'etichetta corta con la stessa facilità con cui ne comprime una lunga. Inoltre, non crea righe con ritorno a capo.

Cosa cambia con ciascuna regolazione

spacing è il valore predefinito quando imposti textLength senza un valore lengthAdjust. Il riferimento MDN su textLength spiega come interagiscono la lunghezza richiesta e la modalità di regolazione.

Per una normale identità di marca, usa una piccola correzione e ispezionala. Un'etichetta che richiede una forte riduzione solitamente merita un carattere più piccolo, parole più brevi o uno spazio più ampio nella disposizione.

Un'etichetta corta e una lunga con lo stesso obiettivo

Abbiamo disegnato un emblema originale a rombo e verificato due etichette modificabili in Abel Regular con una dimensione del carattere di 64 unità SVG. Dopo aver caricato il carattere previsto, il browser ha misurato PINE a circa 115.6 unità e PINE & FIELD a 325.3 unità. Entrambe le righe regolate richiedono 240 unità.

Stesso obiettivo, tipografia diversa

Nell'etichetta corta, spacing crea spazi vistosi. In quella lunga, accosta troppo le lettere. I glifi conservano le proprie forme in entrambi i casi, ma nessuno dei due risultati è adatto a questo disegno. La riga spacingAndGlyphs raggiunge la stessa estensione modificando visibilmente le proporzioni del carattere.

La nostra prova ha usato Chrome 154 nel browser dell'app. Abbiamo misurato l'estensione orizzontale dalla posizione iniziale del primo carattere alla posizione finale dell'ultimo; ogni riga regolata ha raggiunto circa 240 unità. L'esempio usa un solo carattere latino e testo semplice da sinistra a destra. Non è una prova di compatibilità tra renderer o multilingue.

Imposta una correzione moderata della lunghezza

Per l'etichetta lunga sopra, 330 unità sono vicine alla lunghezza naturale di 325.3 unità. È un esempio di calibrazione più utile che forzarla a 240.

Scarica Abel-Regular.ttf e il suo OFL.txt dalla directory Abel di Google Fonts. Inseriscili in una cartella fonts accanto a un file HTML contenente questo markup, poi servi quella cartella localmente:

<style>
  @font-face {
    font-family: Abel;
    src: url('./fonts/Abel-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }
</style>
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="540" height="136" viewBox="0 0 540 136"
     role="img" aria-label="Pine and Field emblem and label">
  <path d="M25 80L63 24L101 80L63 114Z" fill="#287967"/>
  <path d="M43 80L63 49L83 80L63 97Z" fill="#c2d998"/>
  <text id="label" x="135" y="86"
        font-family="Abel" font-size="64" font-weight="400"
        textLength="330" lengthAdjust="spacing"
        fill="#17372e">PINE &amp; FIELD</text>
</svg>

Il valore senza unità 330 appartiene al sistema di coordinate dell'SVG. Ridimensionare l'intero SVG in una pagina ridimensiona anche quella distanza sullo schermo. Mantieni separati emblema e testo, affinché una modifica tipografica non alteri il disegno.

Il carattere rimane rilevante. textLength non trasforma le lettere in contorni e non include il carattere nel file. Se la forma delle lettere cambia su un altro computer, diagnostica la sostituzione dei caratteri SVG prima di regolarne la spaziatura.

Per una larghezza massima, misura prima

Se la regola è «lascia invariate le etichette corte, riduci soltanto quelle lunghe», aggiungi tu questa condizione. Questo esempio riduce la dimensione del carattere, così le lettere mantengono le proporzioni mentre diventano più piccole in entrambe le dimensioni.

Inserisci questo script dopo l'SVG sopra. Sostituisce la regolazione fissa di 330 unità con un massimo di 240 unità:

<script type="module">
  const label = document.querySelector('#label');
  const baseSize = 64;
  const maxWidth = 240;
 
  await document.fonts.load('64px Abel', label.textContent);
  await document.fonts.ready;
 
  label.removeAttribute('textLength');
  label.removeAttribute('lengthAdjust');
  label.setAttribute('font-size', String(baseSize));
 
  const naturalWidth = label.getComputedTextLength();
  if (naturalWidth > maxWidth) {
    const fittedSize = baseSize * maxWidth / naturalWidth;
    label.setAttribute('font-size', String(fittedSize));
  }
</script>

document.fonts.ready attende che il caricamento dei caratteri e il lavoro di disposizione del documento siano terminati. La chiamata esplicita load() richiede prima il carattere usato in questo esempio. Misurare prima che il carattere previsto sia caricato può portare a decidere l'adattamento usando scritte di ripiego.

Rimuoviamo textLength prima di chiamare getComputedTextLength(), perché questo ramo richiede la lunghezza naturale. Nella nostra prova nel browser, il metodo riportava ancora la lunghezza naturale per le righe spacing, anche se l'estensione visualizzata dall'inizio alla fine era cambiata. Non presumere che sia una misura universale della larghezza visiva regolata.

Con questo script, l'etichetta corta PINE mantiene la dimensione di 64 unità. L'etichetta lunga scende a circa 47.2 unità. Esamina il risultato alle dimensioni effettive di visualizzazione o stampa. Se le parole ridotte sono troppo piccole, cambia disposizione o testo invece di ridurre indefinitamente la dimensione. Esegui nuovamente l'adattamento quando cambiano le parole o le impostazioni del carattere.

Controlla l'etichetta finale nella sua destinazione

L'adattamento numerico è soltanto uno dei controlli. Osserva le coppie di lettere e lo spazio fra emblema e testo alle dimensioni finali. Mantieni le etichette comuni alla spaziatura naturale, a meno che il disegno richieda una calibrazione.

Per più righe, creale e posizionale intenzionalmente; textLength da solo non fornisce regole di ritorno a capo. Per un distintivo curvo, usa la procedura separata per il testo SVG su un tracciato. Quella guida controlla la linea di base seguita dalle lettere.

Conserva il sorgente con testo modificabile, poi apri il file da consegnare nell'editor, browser o renderer che lo userà effettivamente. La guida ai file SVG spiega perché un SVG può contenere testo modificabile, tracciati vettoriali o un'immagine incorporata pur avendo la stessa estensione.

Se il logo iniziale esiste soltanto come immagine raster, il vettorializzatore di loghi di PerfectVector può recuperare la grafica dell'emblema. Ispeziona e ripulisci quei tracciati, poi riscrivi le parole come testo modificabile prima di adattare l'etichetta. Una parola ricalcata è geometria di tracciato; textLength non può modificarne la spaziatura dei caratteri. La nostra guida pratica alla vettorializzazione dei loghi tratta questo passaggio di recupero del sorgente.

FAQ

textLength riduce soltanto il testo troppo lungo? No. Richiede una lunghezza, quindi può anche espandere un testo naturalmente più corto. Misura l'etichetta naturale e applica una tua condizione quando serve una regola di larghezza massima.

Quale valore lengthAdjust conserva le forme delle lettere? Usa spacing per regolare la spaziatura dei caratteri senza allungare i glifi. Una regolazione ampia può comunque creare spazi sgradevoli o sovrapposizioni, quindi ispeziona le scritte alle dimensioni finali.

textLength può adattare scritte ricalcate da un PNG? Opera sul testo SVG, non sui tracciati a forma di lettera. Riscrivi le parole come testo modificabile se servono textLength o una spaziatura dei caratteri modificabile, mantenendo l'emblema come grafica vettoriale separata.

Fonti

1. W3C — Regolazione del testo SVG 2 — Le due modalità e il loro effetto sulle forme dei glifi e sugli avanzamenti.
2. MDN — textLength — Lunghezza richiesta e modalità spacing predefinita.
3. MDN — FontFaceSet.ready — Attesa del caricamento dei caratteri e della disposizione.
4. MDN — getComputedTextLength — Misurazione di un elemento di testo SVG.
5. Google Fonts — Abel — Il carattere e la licenza usati nel confronto originale.

Recupera un emblema raster con il vettorializzatore di loghi se ne hai bisogno, poi mantieni le scritte come elemento di testo separato. Confronta l'etichetta finale a dimensioni normali prima di creare una copia da consegnare convertita in tracciati o un'esportazione raster.