Allineamento verticale SVG: centra un'etichetta

Per un'etichetta SVG orizzontale, y posiziona la linea di base selezionata. Non colloca la sommità delle lettere a quella coordinata. Inizia con dominant-baseline="middle" quando disponi una breve etichetta latina intorno a una guida orizzontale e ispeziona il risultato con il carattere effettivo. Usa text-anchor="middle" per centrare orizzontalmente il testo intorno alla coordinata x.

Un'etichetta può comunque sembrare troppo alta o bassa accanto a un emblema. middle e central usano linee di base diverse del carattere, mentre il centraggio visivo dipende dalle forme della parola. Decidi se la disposizione richiede una linea di base condivisa, un riquadro di testo centrato o una correzione ottica prima di aggiungere uno scostamento.

Scegli l'obiettivo dell'allineamento

Lo stesso y="100" può produrre posizioni diverse delle lettere:

Le definizioni W3C delle linee di base distinguono middle da central. Nessuna delle due definizioni promette di centrare i contorni disegnati di ogni parola. Contano anche le tabelle delle linee di base dei caratteri e le euristiche del renderer, come spiega il riferimento MDN su dominant-baseline.

Per il normale testo orizzontale, text-anchor="middle" riguarda l'altro asse. Allinea il segmento di testo intorno alla posizione orizzontale fornita; non produce un centraggio verticale. Consulta il riferimento text-anchor per il suo rapporto con i segmenti di testo.

Confronta un emblema e un'etichetta modificabile

Salva questo esempio completo come baseline-example.svg e aprilo in un browser. L'anello è geometria originale; Agyp è una stringa di prova con un tratto ascendente e tratti discendenti. La linea rossa indica y=100.

<svg xmlns="http://www.w3.org/2000/svg" width="840" height="400"
     viewBox="0 0 420 200">
  <path fill="#137f74" fill-rule="evenodd"
    d="M55 75A25 25 0 1 1 55 125A25 25 0 1 1 55 75
       M55 86A14 14 0 1 0 55 114A14 14 0 1 0 55 86"/>
  <path d="M20 100H400" fill="none" stroke="#c3594d"/>
  <text id="label" x="250" y="100" font-family="Arial, sans-serif"
        font-size="64" text-anchor="middle" dominant-baseline="middle"
        fill="#193e3a">Agyp</text>
</svg>

Cambia soltanto dominant-baseline in alphabetic, poi in central. Mantieni fisse coordinate, dimensione del carattere e parole. Confronta poi un secondo carattere disponibile. Cambiare più impostazioni insieme rende più difficile identificare quale abbia spostato l'etichetta.

Abbiamo renderizzato tutti e tre i valori con copie caricate di Arial e Times New Roman. Ogni pannello usa le stesse coordinate SVG e l'anello originale. I rettangoli verdi mostrano il risultato di getBBox() del browser per il testo modificabile.

Gli esempi alphabetic sono più in alto rispetto alla linea centrale dell'anello. Gli esempi middle si spostano verso il basso, mentre central colloca i riquadri riportati vicino alla guida. Le misure stampate sotto ogni campione riguardano questi file di caratteri e questo rendering nel browser. Non sono scostamenti da copiare in un altro progetto.

I nostri file di caratteri sono stati caricati prima della misurazione. L'SVG esportato può scegliere un carattere sostitutivo quando quello richiesto non è disponibile; risolvi questa dipendenza prima di valutare l'allineamento. La guida alle variazioni dei caratteri SVG spiega come controllare il carattere effettivo e conservare una copia da consegnare.

Un riquadro di testo centrato può ancora sembrare sbilanciato

I limiti del testo SVG non sono necessariamente il rettangolo più piccolo intorno ai segni visibili. Le regole SVG dei riquadri delimitatori usano le celle dei glifi e i valori di ascendente e discendente del carattere per i calcoli del testo. Un rettangolo intorno a quelle celle può includere spazio che nessuna lettera disegna.

Questa distinzione conta con etichette come Agyp: g, y e p scendono sotto la linea di base alfabetica. Un'etichetta interamente maiuscola ha una distribuzione visiva diversa. Il carattere previsto e le parole effettive devono essere presenti durante l'allineamento.

Per una fila di etichette che devono leggersi sulla stessa riga, conserva una linea di base alfabetica condivisa. Spostare ogni parola individualmente finché la sua forma visibile sembra centrata può rendere irregolare la fila.

Per una singola composizione di emblema e testo, confronta l'etichetta alle dimensioni finali e correggila visivamente dopo aver scelto una linea di base. Se la disposizione richiede specificamente un allineamento tramite i contorni delle lettere, usa una copia convertita in tracciati nell'editor per ispezionare quella geometria, conservando il testo modificabile nell'originale. Tratta i limiti dei contorni e la correzione ottica come decisioni separate.

Centra il riquadro del testo SVG misurato quando è quello l'obiettivo

Per un elemento <text> semplice, senza trasformazioni e su una sola riga, calcola lo scostamento dal centro del riquadro riportato al punto di destinazione. Esegui questo codice nel documento contenente l'esempio, dopo che il carattere è pronto:

await document.fonts.ready;
 
const label = document.querySelector('#label');
const targetY = 100;
const originalY = label.y.baseVal.getItem(0).value;
const box = label.getBBox();
const shift = targetY - (box.y + box.height / 2);
 
label.setAttribute('y', String(originalY + shift));

Il calcolo allinea il riquadro del testo riportato con targetY. Non calcola l'equilibrio visivo e non elimina lo spazio inutilizzato nelle celle dei glifi del carattere. Misura di nuovo dopo aver cambiato testo, carattere, peso o dimensione.

document.fonts.ready attende il caricamento dei caratteri e il lavoro di disposizione associato. Non dimostra che il carattere previsto sia stato effettivamente fornito; controlla anche la risorsa del carattere o le informazioni del browser sui caratteri renderizzati.

Questo frammento presuppone un solo valore y, nessuna posizione per singolo carattere, nessuno scostamento dy e nessun gruppo di testo trasformato. getBBox() restituisce un riquadro SVG locale. Un obiettivo in un altro sistema di coordinate richiede una corrispondenza; usa la procedura per i limiti SVG prima di mescolare pixel dello schermo e unità SVG.

Risolvi le impostazioni in conflitto prima di aggiungere altri scostamenti

Ispeziona il testo e i suoi gruppi genitori. Un dy residuo, un <tspan> annidato o una trasformazione possono alterare il posizionamento che stai cercando di diagnosticare. Rimuovi una regolazione sospetta alla volta in una copia e confronta il risultato.

Controlla anche gli stili della pagina. Il CSS può prevalere sull'attributo di presentazione dominant-baseline. Se cambiare l'attributo non ha un effetto visibile, ispeziona il valore calcolato prima di aggiungere una seconda correzione.

alignment-baseline riguarda il modo in cui la linea di base di un elemento si allinea con la corrispondente linea di base del genitore. Non è un sinonimo generale di «centra questa etichetta nell'SVG». Il riferimento MDN su alignment-baseline identifica anche i limiti del supporto nei browser. Per questa etichetta autonoma, concentra la prova su dominant-baseline, poi verifica la destinazione effettiva dell'esportazione.

Questo esempio riguarda testo latino orizzontale in un browser. Le etichette curve richiedono un controllo di posizionamento diverso; la guida pratica al testo SVG su tracciato separa le scritte dalla curva guida. Altri sistemi di scrittura e la scrittura verticale richiedono decisioni proprie sulle linee di base.

Mantieni separati il simbolo e le scritte

Se possiedi già un emblema vettoriale pulito, conservalo e ricostruisci l'etichetta come testo modificabile. Spostare l'etichetta o scegliere un carattere non richiede vettorializzazione.

Quando l'emblema esiste soltanto in un PNG o JPG, il vettorializzatore di loghi di PerfectVector può preparare una geometria candidata per quella parte del disegno. Controllane contorno e aperture, poi disponila accanto al testo appena digitato usando la linea di base scelta. La vettorializzazione non identifica il carattere originale e non ripristina la tipografia modificabile da un'immagine raster.

Per le scritte esatte di un marchio, usa il carattere originale e le risorse vettoriali quando sono disponibili oppure ricostruisci le scritte deliberatamente. La guida alla vettorializzazione dei loghi aiuta a scegliere tra conservazione, ricalco e ridisegno del sorgente.

Prima della consegna, controlla parole e carattere effettivi, ispeziona la composizione alle dimensioni finali e riapri l'SVG esportato nella destinazione. Conserva l'originale modificabile se la copia da consegnare usa testo convertito in tracciati.

FAQ

dominant-baseline="middle" è uguale a central? No. Middle usa una linea di base legata all'altezza della x, mentre central usa la linea di base centrale del carattere associata al riquadro em. Le loro posizioni possono differire e nessuna garantisce il centraggio ottico di ogni parola.

text-anchor="middle" centra verticalmente il testo SVG? Per il normale testo orizzontale, text-anchor controlla il posizionamento orizzontale intorno alla coordinata x. Scegli separatamente la linea di base verticale con dominant-baseline, poi ispeziona il risultato con il carattere previsto.

getBBox può centrare esattamente le lettere visibili? Può centrare il riquadro del testo SVG riportato dal browser. I limiti del testo possono includere spazio nelle celle dei glifi oltre le lettere disegnate, quindi questo calcolo non garantisce un centraggio ottico o un allineamento aderente ai contorni.

Fonti

1. W3C — Allineamento delle linee di base SVG — Definisce le linee di base alphabetic, middle e central.
2. MDN — dominant-baseline — Spiega tabelle delle linee di base, euristiche dei caratteri e precedenza del CSS.
3. MDN — text-anchor — Documenta l'ancoraggio dei segmenti di testo intorno a una posizione fornita.
4. W3C — Riquadri delimitatori SVG — Descrive il modello a celle dei glifi usato per i limiti del testo.
5. MDN — FontFaceSet.ready — Definisce quando sono completati il caricamento dei caratteri e la disposizione.
6. MDN — getBBox — Documenta i limiti SVG locali e le trasformazioni escluse.
7. MDN — alignment-baseline — Spiega l'allineamento con la linea di base del genitore e i limiti del supporto nei browser.

Se al logo ricostruito serve ancora un emblema modificabile, prepara un candidato SVG con PerfectVector, ispeziona il contorno recuperato, poi abbinalo a scritte modificabili e controlla l'allineamento nella destinazione finale.